/* Editorial refinement + progressive native motion. Core content stays visible. */
/* Fade is attached to the section, so its edge stays seamless as the artwork moves. */
.hero:after{content:'';position:absolute;inset:auto 0 -1px;height:clamp(155px,23svh,255px);background:linear-gradient(0deg,var(--paper) 0%,#f6f3eef5 13%,#f6f3eeb0 39%,#f6f3ee47 68%,#f6f3ee00 100%);z-index:-1;pointer-events:none}
.hero h1,.prologue h2,.chapter h2,.interlude h2,.section-heading h2{text-wrap:balance;font-kerning:normal}
.hero-content{z-index:1}.hero-bottom{z-index:2}
.hero-content:before{content:'';position:absolute;left:-12px;top:65px;width:88px;height:1px;background:#baa18c4d}
.chapter-copy{position:relative;isolation:isolate}
.chapter-copy:before{content:attr(data-number);position:absolute;left:-15px;top:-74px;font:160px/.9 var(--serif);letter-spacing:-9px;color:#ceac9011;z-index:-1;pointer-events:none}
.scene{border-radius:2px;overflow:clip}
.scene-top{padding-bottom:18px;border-bottom:1px solid #e0d1c270}
.scene-canvas{isolation:isolate}
.scene-photograph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:74% 50%;opacity:var(--photo-opacity,0);transform:scale(var(--photo-scale,1));mask-image:radial-gradient(ellipse 60% 63% at 53% 51%,#000 38%,transparent 91%);z-index:0;pointer-events:none}
.object-scene{position:relative;z-index:1;opacity:var(--diagram-opacity,1)}
.scene-marks{gap:3px!important}
.scene-marks a{display:flex;width:31px;height:35px;align-items:center;justify-content:center;position:relative}
.scene-marks a>span{display:block;width:23px;height:2px;background:#e6d3c3;transition:background .2s}
.scene-marks a.active>span{background:#b28b6c}
.scene-marks a[aria-current]>span{height:3px;background:var(--accent)}
.scene-marks a:after{content:'';position:absolute;left:50%;bottom:1px;width:3px;height:3px;background:transparent;border-radius:50%;transform:translateX(-50%)}
.scene-marks a[aria-current]:after{background:var(--accent)}
.scene-note{font-size:10px;color:#846e5c}
.scene-bottom{padding-top:6px;padding-bottom:14px;border-top:1px solid #e0d1c270}
.chapter{scroll-margin-top:130px}
.chapter-copy>p:not(.eyebrow){color:#715b49}
.chapter-copy .chapter-aside{color:#89705c!important}
.chapter-copy>p:not(.eyebrow){font-size:15px}
.chapter-copy .chapter-aside{font-size:13px!important}
.chapter-footnote{font-size:11px}
.chapter-footnote,.step-meta,.material-top,.result-count{color:#89705c}
.interlude{background:#f4e1cf}
.interlude-inner:before{content:'→';position:absolute;right:6%;top:48%;font:160px/1 var(--serif);color:#d2ae9159;z-index:-1;transform:rotate(-35deg)}
.start-step{transition:background .2s,padding .2s}
.start-step:hover{background:#f2e9e266}
.start-action>span,.chapter-link>span{transition:transform .2s}
.start-step:hover .start-action>span,.chapter-link:hover>span{transform:translate(3px,-3px)}
.material:hover{border-top-color:#b39379}
.header{container-type:scroll-state;container-name:page-header}
@supports (container-type:scroll-state){@container page-header scroll-state(stuck:top){.header-inner{box-shadow:0 7px 22px -17px #715844}}}
@media(prefers-reduced-motion:no-preference){
 @supports(animation-timeline:view()){
  .hero{view-timeline-name:--hero;view-timeline-axis:block}
  .hero-art{animation:hero-camera linear both;animation-timeline:--hero;animation-range:exit 0% exit 100%}
  .hero-edition{animation:hero-type-drift linear both;animation-timeline:--hero;animation-range:exit 0% exit 100%}
  .prologue .fine-rule{transform-origin:left;animation:rule-draw linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
  .interlude{view-timeline-name:--interlude;view-timeline-axis:block}
  .interlude-orbit{animation:orbit-camera linear both;animation-timeline:--interlude;animation-range:entry 0% exit 100%}
 }
}
@keyframes hero-camera{from{transform:translateY(0) scale(1)}to{transform:translateY(7%) scale(1.08)}}
@keyframes hero-type-drift{from{transform:translateY(0)}to{transform:translateY(-70px)}}
@keyframes rule-draw{from{transform:scaleX(.15)}to{transform:scaleX(1)}}
@keyframes orbit-camera{from{transform:rotate(-45deg) translateX(-15px)}to{transform:rotate(-20deg) translateX(20px)}}
@media(max-width:700px){
 .hero-art{mask-image:linear-gradient(180deg,transparent 0%,#000 23%,#000 100%)}
 .hero-content:before{display:none}
 .scene{overflow:clip}
 .scene-top{padding-bottom:0;border:0}
 .scene-canvas{height:211px}
 .scene-bottom{padding:0 7px 0;border-top:0;min-height:42px}
 .scene-marks{gap:0!important}
 .scene-marks a{width:29px;height:42px}
 .scene-marks a>span{width:19px}
 .scene-note{font-size:9px;max-width:125px;text-align:right;line-height:1.5}
 .scene-photograph{object-position:75% 50%;mask-image:radial-gradient(ellipse 54% 70% at 53% 51%,#000 38%,transparent 95%)}
 .chapter{scroll-margin-top:390px}
 .chapter-copy:before{font-size:110px;top:-52px;left:-8px;letter-spacing:-6px}
 .chapter-copy>p:not(.eyebrow){font-size:14px}
 .chapter-copy .chapter-aside{font-size:12px!important}
 .chapter-footnote{font-size:10px}
 .hero-description{font-size:14px}
 .hero .button{font-size:12px}
 .material p{font-size:13px}
 .material>a{font-size:12px}
 .chapter-number{background:var(--paper)}
 .interlude-inner:before{right:-50px;font-size:130px;top:58%}
 .start-step:hover{background:transparent}
}
@media(prefers-reduced-motion:reduce){.hero-art,.hero-edition,.fine-rule,.interlude-orbit{animation:none!important}.scene-photograph{transform:none}.start-action>span,.chapter-link>span{transform:none!important}}