/* A single editorial scene: typography and light share the same scroll score. */
.light-story{background:#e9e7e0;color:#191a17;position:relative}
.light-stage{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:1fr auto auto;column-gap:5vw;row-gap:2rem;padding:3rem var(--gutter);position:relative}
.light-intro{align-self:center;min-width:0}
.light-intro .eyebrow{font-size:.875rem;margin-bottom:2rem;color:#51524a}
.light-intro h2{font-size:clamp(3.6rem,7.8vw,8rem);letter-spacing:-.065em;line-height:.98;max-width:9ch}
.light-intro h2>span{display:inline-block;color:#77603d}
.light-frame{grid-column:2;grid-row:1/4;position:relative;overflow:hidden;isolation:isolate;background:#15100b;min-height:35rem}
.light-frame img,.light-canvas{position:absolute;width:100%;height:100%;inset:0;object-fit:cover;object-position:center}
.light-canvas{opacity:0;pointer-events:none}
.light-gpu .light-canvas{opacity:1}
.light-frame-edge{position:absolute;inset:12px;border:1px solid #fff2;pointer-events:none;z-index:2}
.light-caption{max-width:28rem;min-width:0}
.light-caption-top{display:flex;align-items:center;gap:1rem;font-size:.875rem;font-variant-numeric:tabular-nums;margin-bottom:1rem}
.light-caption-line{height:1px;background:#99988d;flex:1;transform-origin:left}
.light-copy article{margin-bottom:1.5rem}
.light-copy h3{font-size:clamp(1.8rem,3vw,3rem);margin-bottom:.6rem;line-height:1.1}
.light-copy p{font-size:1.125rem;line-height:1.4;max-width:30ch;color:#505149}
.light-rail{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;justify-content:space-between}
.light-chapters{display:flex;gap:1rem}
.light-chapters button{background:transparent;padding:.5rem 0;color:#56574e;border:0;border-bottom:1px solid transparent;font-size:.875rem}
.light-chapters button[aria-pressed=true]{color:#191a17;border-color:currentColor}
.light-direction{font-size:.875rem;color:#55564d}
.light-progress{height:2px;background:#c5c4b9;width:100%;overflow:hidden}
.light-progress span{display:block;height:100%;background:#24251f;transform-origin:left;transform:scaleX(var(--light-progress,0))}
.light-active .light-story{height:310svh}
.light-active .light-stage{position:sticky;top:var(--header);height:calc(100svh - var(--header));padding-block:2rem;overflow:hidden}
.light-active .light-frame{min-height:0;clip-path:inset(var(--frame-inset,4%) 0 round var(--frame-radius,2px))}
.light-active .light-frame img{transform:scale(var(--light-zoom,1.08));filter:brightness(var(--light-brightness,.8)) saturate(var(--light-saturation,1))}
.light-active .light-intro h2{transform:translateY(var(--light-title-y,0px))}
.light-active .light-intro h2>span{transform:translateX(var(--light-word-x,0px))}
.light-active .light-caption-line{transform:scaleX(var(--light-line,1))}
.light-active .light-copy{display:grid}
.light-active .light-copy article{grid-area:1/1;margin:0;opacity:var(--copy-opacity,0);transform:translateY(var(--copy-y,0px));pointer-events:none}
.light-active .light-copy article:first-child{--copy-opacity:1}
body:not(.light-active) .light-chapters,body:not(.light-active) .light-direction,body:not(.light-active) .light-caption-top,body:not(.light-active) .light-progress{display:none}
@media(max-width:1000px) and (min-width:761px){.light-direction{display:none}.light-stage{column-gap:3vw}.light-intro h2{font-size:6.8vw}}
@media(max-width:760px){
 .light-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;padding:2rem var(--gutter);gap:1.25rem}
 .light-intro{align-self:start}.light-intro .eyebrow{font-size:.8125rem;margin-bottom:.65rem}
 .light-intro h2{font-size:clamp(2.4rem,10vw,3.8rem);line-height:1.02;max-width:14ch}
 .light-intro h2 br:first-of-type{display:none}
 
 .light-frame{grid-column:1;grid-row:2;min-height:28rem}
 .light-caption{max-width:100%}.light-caption-top{margin-bottom:.5rem;font-size:.8125rem}.light-copy h3{font-size:1.8rem;margin-bottom:.35rem}.light-copy p{font-size:1rem;max-width:34ch}
 .light-active .light-stage{padding-block:1.25rem;gap:1rem}.light-active .light-frame{min-height:0}
 .light-active .light-story{height:300svh}.light-direction{font-size:.8125rem}.light-chapters{gap:1rem}.light-chapters button{padding:.35rem 0}
 .light-rail{gap:.4rem}.light-frame-edge{inset:8px}
}
@media(max-width:760px) and (max-height:700px){.light-active .light-intro h2{font-size:2.4rem}.light-active .light-intro .eyebrow{margin-bottom:.4rem}.light-active .light-stage{gap:.75rem;padding-block:1rem}.light-active .light-copy h3{font-size:1.6rem}.light-active .light-direction{display:none}}
@media(prefers-reduced-motion:reduce){.light-canvas{display:none}.light-frame img{filter:none!important;transform:none!important}}
