/* 5680 pass 4: quiet header + chaptered menu, scroll rail, section lockups, chapter openers, intro.
   Same tokens as site.css. Motion is transform/opacity/clip-path only; reduced motion at the end. */

:root{--navh:calc(56px + env(safe-area-inset-top))}
html{scrollbar-gutter:stable}
html.mp-lock{overflow:hidden}
[data-chapter],.stage,#contact{scroll-margin-top:var(--navh)}

/* ===== Header: transparent over the hero, blurred charcoal after it, hides on scroll down ===== */
.hdr{position:fixed;inset:0 0 auto;z-index:100;height:var(--navh);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:env(safe-area-inset-top) max(calc(var(--pad) - 12px),env(safe-area-inset-right)) 0 max(calc(var(--pad) - 10px),env(safe-area-inset-left));transition:transform .5s var(--ease)}
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(44,47,50,.96);border-bottom:1px solid var(--line);opacity:0;transition:opacity .4s var(--ease)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.hdr::before{background:rgba(44,47,50,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}}
html.hdr-solid .hdr::before{opacity:1}
html.hdr-hide .hdr{transform:translateY(-100%)}
html.hdr-hide .jr{transform:translateY(calc(-1 * var(--navh)))}
.jr{transition:transform .5s var(--ease)}
.hdr:focus-within,html.mp-open .hdr{transform:none!important}
html.mp-open .hdr::before{opacity:0}
.hdr-mark{display:inline-grid;place-items:center;min-width:44px;min-height:44px;padding:0 4px;font:26px/1 var(--serif);color:var(--paper);text-decoration:none;letter-spacing:.01em}
.hdr-ch{position:absolute;left:50%;top:calc(env(safe-area-inset-top) + 28px);transform:translate(-50%,-50%);font:500 10px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--text);white-space:nowrap;opacity:0;transition:opacity .35s var(--ease);pointer-events:none}
html.hdr-solid .hdr-ch.on{opacity:.8}
html.mp-open .hdr-ch{opacity:0!important}
.hdr-acts{display:flex;align-items:center;gap:6px}
.hdr-chat,.hdr-menu{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--paper);text-decoration:none;-webkit-tap-highlight-color:transparent}
.hdr-chat{border:1px solid rgba(233,240,86,.75);transition:border-color .3s,transform .12s var(--ease)}
.hdr-chat:hover{border-color:var(--acid)}
.hdr-chat:active,.hdr-menu:active{transform:scale(.96)}
.hdr-chat svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.hm-l{position:absolute;left:12px;right:12px;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;border-radius:1px;transition:transform .3s var(--ease)}
.hm-l:first-child{transform:translateY(-4px)}
.hm-l+.hm-l{transform:translateY(4px)}
.hdr-menu[aria-expanded="true"] .hm-l:first-child{transform:rotate(45deg)}
.hdr-menu[aria-expanded="true"] .hm-l+.hm-l{transform:rotate(-45deg)}
.hdr :focus-visible{outline-offset:2px;border-radius:999px}

/* ===== Menu: phone = full-height panel clipped open from the button; desktop = dropdown card ===== */
.mp{position:fixed;inset:0;z-index:90;visibility:hidden;pointer-events:none;transition:visibility 0s linear .56s}
.mp.open,html:not(.js) .mp:target{visibility:visible;pointer-events:auto;transition-delay:0s}
.mp-in{position:absolute;inset:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;padding:calc(var(--navh) + 10px) max(var(--pad),env(safe-area-inset-right)) 0 max(var(--pad),env(safe-area-inset-left));background:rgba(44,47,50,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html.js .mp-in{clip-path:circle(0px at var(--ox,calc(100% - 40px)) var(--oy,28px));transition:clip-path .55s var(--ease)}
html.js .mp.open .mp-in{clip-path:circle(150% at var(--ox,calc(100% - 40px)) var(--oy,28px))}
.mp-ch+.mp-ch{margin-top:16px}
.mp-cn{font:500 10px/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--text);opacity:.85;padding-bottom:2px}
.mp-list a{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;padding:2px 0;color:var(--paper);text-decoration:none;border-radius:4px;-webkit-tap-highlight-color:transparent}
.mp-list a::before{content:"";position:absolute;inset:0 -12px;border-radius:8px;background:radial-gradient(160px circle at var(--gx,30%) var(--gy,50%),rgba(215,232,188,.10),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
.mp-list a:hover::before,.mp-list a:active::before{opacity:1}
.mp-n{flex:none;width:22px;font:500 10px/1 var(--sans);letter-spacing:.12em;color:var(--muted);font-variant-numeric:tabular-nums}
.mp-t{position:relative;font:34px/1.08 var(--serif);padding-bottom:2px}
.mp-t::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--acid);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.mp-list a:hover .mp-t::after,.mp-list a:focus-visible .mp-t::after,.mp-list a[aria-current] .mp-t::after{transform:scaleX(1)}
.mp-list a[aria-current]::after{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--acid)}
.mp-list a:focus-visible{outline-offset:4px}
html.js .mp .mp-n,html.js .mp .mp-t,html.js .mp .mp-cn,html.js .mp .mp-foot{opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .5s var(--ease)}
html.js .mp.open .mp-n,html.js .mp.open .mp-t,html.js .mp.open .mp-cn,html.js .mp.open .mp-foot{opacity:1;transform:none;transition-delay:calc(.14s + var(--i,0) * 50ms)}
html.js .mp.open .mp-n{transition-delay:calc(.1s + var(--i,0) * 50ms)}
html.js .mp.open .mp-foot{transition-delay:.3s}
.mp-foot{position:sticky;bottom:0;display:flex;gap:10px;margin-top:auto;padding:18px 0 calc(18px + env(safe-area-inset-bottom));background:linear-gradient(to top,rgba(44,47,50,.96) 70%,rgba(44,47,50,0))}
.mp-inq{flex:1;padding:0 16px}
.mp-ask{flex:none;padding:0 18px;white-space:nowrap}
@media (max-height:640px) and (max-width:899px){.mp-t{font-size:28px}.mp-list a{min-height:44px}}
@media (min-width:900px){
  .mp{inset:auto;top:calc(var(--navh) - 2px);right:max(calc(var(--pad) - 12px),env(safe-area-inset-right));width:360px}
  .mp-in{position:relative;inset:auto;max-height:calc(100vh - var(--navh) - 24px);padding:20px 24px 0;border:1px solid var(--line-2);border-radius:14px;background:rgba(44,47,50,.97);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
  html.js .mp-in{clip-path:circle(0px at var(--ox,calc(100% - 22px)) var(--oy,-22px))}
  html.js .mp.open .mp-in{clip-path:circle(160% at var(--ox,calc(100% - 22px)) var(--oy,-22px))}
  .mp-t{font-size:26px}
  .mp-list a{min-height:40px}
  .mp-foot{padding-bottom:20px;background:linear-gradient(to top,rgba(44,47,50,1) 70%,rgba(44,47,50,0))}
}

/* ===== Scroll rail: right edge, chapter ticks, acid progress ===== */
.rail{position:fixed;right:0;bottom:calc(24px + env(safe-area-inset-bottom));z-index:45;width:44px;height:40vh;pointer-events:none;opacity:0;transition:opacity .4s var(--ease),bottom .4s var(--ease)}
@media (max-width:899px){html.cta-on .rail{bottom:calc(88px + env(safe-area-inset-bottom))}}
@media (min-width:900px){.rail{bottom:25vh;height:50vh}}
.rail.on{opacity:1}
html:not(.js) .rail{display:none}
.rail-t{position:absolute;top:0;bottom:0;right:10px;width:2px;background:rgba(215,232,188,.2);overflow:hidden}
.rail-f{position:absolute;inset:0;background:var(--acid);transform-origin:top;transform:scaleY(var(--p,0))}
@supports (animation-timeline: scroll()){.rail-f{animation:railp linear both;animation-timeline:scroll(root)}}
@keyframes railp{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.rail-d{position:absolute;inset:0}
.rail-d li{position:absolute;right:0;top:var(--y,0);transform:translateY(-50%)}
.rail-d button{position:relative;display:block;width:44px;height:44px;border-radius:8px}
.rail.on .rail-d button{pointer-events:auto}
.rail-d button::before{content:"";position:absolute;right:7px;top:18px;width:8px;height:8px;border-radius:50%;background:var(--bg);border:1px solid rgba(215,232,188,.55);transition:transform .35s var(--ease),background-color .35s,border-color .35s}
.rail-d li.past button::before{background:var(--muted);border-color:var(--muted)}
.rail-d button[aria-current="true"]::before{background:var(--acid);border-color:var(--acid);transform:scale(1.5)}
.rail-d button:focus-visible{outline-offset:-6px}
.rail-l{position:absolute;right:28px;top:50%;transform:translate(6px,-50%);padding:4px 9px;border-radius:999px;background:rgba(29,32,33,.88);font:500 9px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--paper);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.rail-d li.lbl .rail-l,.rail-d button:focus-visible .rail-l,.rail-d button:hover .rail-l{opacity:1;transform:translate(0,-50%)}

/* ===== Section lockup: index, acid rule that draws in, serif title, sage standfirst ===== */
.lk{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;font:500 10px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--text)}
.lk-n{color:var(--paper);font-variant-numeric:tabular-nums}
.lk-r{flex:none;width:24px;height:1px;background:var(--acid);transform-origin:left}
html.js .lk-r{transform:scaleX(0);transition:transform .9s var(--ease) .15s}
html.js .lk.in .lk-r{transform:none}
.lk-e{color:var(--muted)}
.lk-solo{margin-bottom:28px}
.sf{margin-top:16px;max-width:52ch;font:italic 400 clamp(18px,1.9vw,22px)/1.35 var(--serif);color:var(--text)}
.sf-ink{color:#4a513e;margin-top:10px}

/* Margin annotations: rotated in the left gutter on wide screens, inline under the figure on phones */
.fig{margin-top:10px;font:500 9px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.fig-gal{margin:0 0 10px}
#gallery:has(.chip[data-f="all"][aria-pressed="false"]) .fig-gal{visibility:hidden}
.gal-w,.has-fig{position:relative}
@media (min-width:1100px){
  .fig,.fig-gal{position:absolute;top:0;right:calc(100% + 12px);margin:0;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
}

/* ===== Chapter openers: faint numeral watermark, sage hairline drawn from the center, acid dot ===== */
.chap{position:relative;padding-top:clamp(64px,10vw,140px);text-align:center;overflow:hidden}
.chap-wm{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);font:clamp(150px,30vw,360px)/1 var(--serif);color:var(--paper);opacity:.05;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap}
.chap-line{position:relative;display:block;height:1px;background:rgba(215,232,188,.22)}
.chap-dot{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--acid)}
.chap-t{position:relative;padding-top:22px;font:500 11px/1.4 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--text)}
.chap-n{display:block;margin-bottom:6px;font-size:9px;letter-spacing:.24em;color:var(--muted)}
html.js .chap-line{transform:scaleX(0);transition:transform 1.2s var(--ease)}
html.js .chap-dot{opacity:0;transition:opacity .5s var(--ease) .9s}
html.js .chap-t{opacity:0;transform:translateY(10px);transition:opacity .8s var(--ease) .3s,transform .8s var(--ease) .3s}
html.js .chap.in .chap-line,html.js .chap.in .chap-t{opacity:1;transform:none}
html.js .chap.in .chap-dot{opacity:1}
.chap+.sec{padding-top:clamp(48px,7vw,96px)}

/* ===== Intro: headline (line mask) + first-person letter ===== */
.intro{padding-bottom:clamp(24px,4vw,48px)}
.intro-h{margin-top:28px;font-size:clamp(44px,7.4vw,104px);line-height:.98;letter-spacing:-.015em;max-width:14ch}
html.js .intro-h .ln>span{transform:translateY(106%);transition:none}
html.js .intro-h.in .ln>span{transform:none;transition:transform .9s var(--ease)}
html.js .intro-h.in .ln:nth-child(2)>span{transition-delay:.08s}
html.js .intro-h.in .ln:nth-child(3)>span{transition-delay:.16s}
.intro-body{margin-top:clamp(36px,5vw,64px);max-width:34ch;font:20px/1.5 var(--serif);margin-left:auto;margin-right:clamp(0px,8vw,140px)}
.intro-p{font:20px/1.5 var(--serif);color:var(--paper)}
.intro-p+.intro-p{margin-top:16px}
.intro-drop::first-letter{float:left;font-size:3.4em;line-height:.8;padding:.08em .1em 0 0;color:var(--text)}
.intro-sig{margin-top:26px;font:italic 34px/1 var(--serif);color:var(--text)}
@media (max-width:640px){.intro-body{margin-right:0}}

@media (min-width:1100px){
  .intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:72px;align-items:end}
  .intro>.eyebrow{grid-column:1/-1}
  .intro-body{margin:28px 0 0 auto}
}

/* ===== Reduced motion: menu becomes a 150ms fade, rail and header update without animation, reveals static ===== */
@media (prefers-reduced-motion: reduce){
  .hdr,.hdr::before,.hdr-ch,.jr,.hm-l,.rail,.rail-d button::before,.rail-l,.mp-t::after{transition:none!important}
  .mp{transition:visibility 0s linear .15s}
  html.js .mp-in,html.js .mp.open .mp-in{clip-path:none;opacity:0;transition:opacity .15s linear}
  html.js .mp.open .mp-in{opacity:1}
  html.js .mp .mp-n,html.js .mp .mp-t,html.js .mp .mp-cn,html.js .mp .mp-foot{opacity:1;transform:none;transition:none}
  html.js .lk-r,html.js .chap-line,html.js .chap-dot,html.js .chap-t{transform:none;opacity:1;transition:none}
  html.js .intro-h .ln>span{transform:none!important;transition:none}
  .rail-f{animation:none}
}