.matter-section{--stage-top:86px;--stage-height:calc(100svh - 86px);position:relative;background:#090c08;color:#f6f8f1;isolation:isolate}
.matter-section.scroll-ready{height:420svh}
.matter-stage{position:relative;height:var(--stage-height);min-height:320px;overflow:hidden;isolation:isolate}
.scroll-ready .matter-stage{position:sticky;top:var(--stage-top)}
.matter-visual,.matter-shade,.matter-words{position:absolute;inset:0;pointer-events:none}
.matter-visual{overflow:hidden}
.matter-photo{position:absolute;width:100%;height:100%;object-fit:contain}
.scroll-ready:not(.has-renderer) .matter-photo{object-fit:cover;transform:scale(var(--photo-scale,1));clip-path:inset(var(--photo-frame,0));opacity:calc(.32 + var(--photo-reveal,1)*.68)}
#matter-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.has-renderer #matter-canvas{opacity:1}
.has-renderer .matter-photo{visibility:hidden}
.matter-shade{background:linear-gradient(180deg,rgba(5,8,4,.7),transparent 23%,transparent 60%,rgba(5,8,4,.86)),linear-gradient(90deg,rgba(5,8,4,.62),transparent 67%)}
.matter-top{position:absolute;z-index:2;top:34px;left:5%;right:5%;display:flex;justify-content:space-between;gap:24px;align-items:center}
.matter-top .eyebrow{color:#c7cebd}
.matter-skip{font-size:14px;color:#d6dccc;border-bottom:1px solid #737c67;padding-bottom:4px}
.matter-skip:hover{color:var(--art-accent)}
.matter-act{position:absolute;left:8%;right:6%;top:50%;transform:translateY(-50%);opacity:0;will-change:opacity,transform}
.matter-act:first-child{opacity:1}
.matter-kicker{display:block;font-size:14px;letter-spacing:.03em;color:#d4dcc8;margin-bottom:24px}
.matter-act p{font-size:clamp(70px,10.6cqw,168px);font-weight:500;letter-spacing:-.065em;line-height:.92;color:#f6f8f1}
.matter-act em{font-style:normal;color:var(--art-accent)}
.matter-line{display:block;font-size:16px;line-height:1.65;color:#d2dac7;margin-top:26px}
.matter-words{top:0;bottom:0}
.matter-act{top:26%;transform:none}
.matter-act[data-act="1"]{left:9%}
.matter-act[data-act="2"]{top:27%}
.matter-act[data-act="2"] p{font-size:clamp(65px,8.5cqw,132px)}
.matter-bottom{position:absolute;z-index:2;left:5%;right:5%;bottom:30px;display:flex;justify-content:space-between;align-items:flex-end;gap:22px}
.matter-chapters{display:flex;gap:24px;align-items:center}
.matter-chapters button{display:flex;gap:8px;align-items:center;min-height:44px;padding:8px 0;background:transparent;color:#a7b19b;border-bottom:1px solid transparent;font-size:14px;white-space:nowrap}
.matter-chapters button span{font-size:12px;color:#848e79;font-variant-numeric:tabular-nums}
.matter-chapters button[aria-pressed="true"]{color:#e8f3d8;border-color:var(--art-accent)}
.matter-chapters button[aria-pressed="true"] span{color:var(--art-accent)}
.matter-cue{font-size:14px;color:#c5cdba;opacity:calc(1 - var(--end-opacity,0))}
.matter-end{position:absolute;right:0;bottom:0;display:flex;flex-direction:column;align-items:flex-end;gap:9px;opacity:var(--end-opacity,0);visibility:hidden}
.at-end .matter-end{visibility:visible}
.matter-end>span{font-size:12px;color:#c2ccb5}
.matter-end button{color:#eff6e5}
.matter-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:rgba(213,255,95,.08)}
.matter-progress span{display:block;height:100%;width:100%;transform:scaleX(var(--matter-progress,0));transform-origin:left;background:var(--art-accent)}
@container site (max-width:700px){
 .matter-section{--stage-top:72px;--stage-height:calc(100svh - 72px)}
 .matter-section.scroll-ready{height:360svh}
 .matter-top{top:24px;left:6%;right:6%;gap:14px;align-items:flex-start}
 .matter-top .eyebrow{font-size:12px;max-width:140px}
 .matter-skip{font-size:12px;text-align:right;max-width:115px}
 .matter-act,.matter-act[data-act="1"]{left:7%;right:7%;top:25%}
 .matter-act p{font-size:clamp(60px,15.3cqw,104px)}
 .matter-kicker{font-size:14px;margin-bottom:22px;max-width:240px}
 .matter-line{font-size:16px;max-width:265px;margin-top:24px}
 .matter-act[data-act="2"]{top:18%}
 .matter-act[data-act="2"] p{font-size:clamp(57px,13.6cqw,96px)}
 .matter-bottom{left:6%;right:6%;bottom:24px;min-height:85px;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:12px}
 .matter-chapters{gap:22px}
 .matter-chapters button{font-size:14px}
 .matter-cue{font-size:12px;position:absolute;top:0;left:0}
 .matter-end{left:0;right:auto;top:-18px;bottom:auto;align-items:flex-start;gap:3px}
 .matter-shade{background:linear-gradient(180deg,#050804a8,transparent 30%,transparent 65%,#050804e8),linear-gradient(90deg,#05080480,transparent 90%)}
}
@media(max-height:560px){@container site (min-width:701px){
 .matter-top{top:16px}.matter-act,.matter-act[data-act="2"]{top:24%}.matter-act p,.matter-act[data-act="2"] p{font-size:68px}.matter-kicker{margin-bottom:12px}.matter-line{display:none}.matter-bottom{bottom:12px}
}
}
.matter-section.motion-reduced{height:auto}
.motion-reduced .matter-stage{position:relative;top:auto;height:max(660px,85svh)}
.motion-reduced .matter-chapters,.motion-reduced .matter-cue,.motion-reduced .matter-progress{display:none}
.motion-reduced #matter-canvas{display:none}
.motion-reduced .matter-photo{visibility:visible;transform:none!important;object-fit:contain!important;opacity:1!important;clip-path:none!important}
@media(prefers-reduced-motion:reduce){.matter-section.scroll-ready{height:auto}.scroll-ready .matter-stage{position:relative;top:auto}}
@container site (min-width:701px) and (max-width:900px){.matter-act p{font-size:clamp(68px,10cqw,92px)}}
