/* Scroll-driven 3D hero (site v3). Scoped under .h3d. 2026-10-22 rework (approved changes 9-15):
   the headline is visible from first paint, the 3D scene loads after it, a still stands in until then,
   ~300vh of scroll in three chapters, square buttons, and a designed still for reduced motion / no WebGL.
   Two layouts:
   - pinned: JavaScript on and motion allowed (the default below);
   - static: no JavaScript, reduced motion, or no WebGL (html.h3d-static, set by hero.js). */
.h3d{--hm:#B9BEC8;--hs:#9AA1AD;--hl:rgba(241,239,234,.26);--hbg:#0B0D11;--hb:var(--brass-lit,#C4A56C);position:relative;height:400vh;background:var(--hbg);color:var(--bone,#F1EFEA)}
.h3d-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.h3d-poster,.h3d-gl{position:absolute;inset:0;width:100%;height:100%}
.h3d-poster{background:var(--hbg)}
.h3d-poster picture,.h3d-poster img{display:block;width:100%;height:100%;object-fit:cover}
.h3d-gl{opacity:0;transition:opacity .7s var(--ease-out,ease-out)}
.h3d.h3d-live .h3d-gl{opacity:1}
.h3d-vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 60% 45%,transparent 58%,rgba(11,13,17,.7) 100%),linear-gradient(180deg,rgba(11,13,17,.55),transparent 20%,transparent 62%,rgba(11,13,17,.82))}
.h3d-still{display:none}

/* text: stages share one column on the left; the object sits to the right */
.h3d-chs{position:absolute;inset:0;z-index:3;pointer-events:none}
.h3d-st{position:absolute;z-index:3;left:var(--edge,40px);width:min(560px,40vw);pointer-events:none}
.h3d-st a{pointer-events:none}
.h3d-st.is-live a{pointer-events:auto}
.h3d-st0{bottom:clamp(64px,10vh,132px);width:min(700px,46vw)}
.h3d-ch{top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;padding-top:var(--nav-h,72px);opacity:0}
.h3d-ch>*{position:relative}

.h3d-kicker{display:flex;align-items:center;gap:14px;margin:0 0 clamp(16px,2.4vh,26px);font:italic 400 clamp(1.1rem,1.35vw,1.35rem)/1.35 var(--serif);color:var(--hm);letter-spacing:0}
.h3d-kicker-node{flex:none;width:28px;height:1px;background:var(--hb)}
/* sized by the window's height as well as its width, so the first screen clears the header on short laptop windows (2026-10-23) */
.h3d-title{font:300 min(clamp(3rem,5.6vw,6.6rem),9.2vh)/.95 var(--serif);letter-spacing:-.035em;max-width:13ch;margin:0;color:var(--bone,#F1EFEA);text-wrap:balance}
.h3d-title .brass{color:var(--hb)}
.h3d .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em .14em .1em;margin:-.14em -.14em -.1em}
.h3d .w>span{display:inline-block}
.h3d-lead{font:400 clamp(1.05rem,1.3vw,1.25rem)/1.6 var(--sans);color:var(--hm);max-width:40ch;margin:clamp(18px,2.8vh,32px) 0 0}
.h3d-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(22px,3.6vh,40px)}
.h3d-where{margin:clamp(16px,2.4vh,24px) 0 0;font:400 14px/1.4 var(--sans);color:var(--hs)}

/* the headline's word-by-word rise, from first paint (no script needed) */
@keyframes h3dRise{from{transform:translateY(105%)}to{transform:none}}
@keyframes h3dFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.h3d .w>span{animation:h3dRise .95s var(--ease-out,cubic-bezier(.16,1,.3,1)) both}
.h3d .d1>span{animation-delay:.05s}.h3d .d2>span{animation-delay:.11s}.h3d .d3>span{animation-delay:.17s}
.h3d .d4>span{animation-delay:.23s}.h3d .d5>span{animation-delay:.29s}.h3d .d6>span{animation-delay:.35s}
.h3d .d7>span{animation-delay:.41s}.h3d .d8>span{animation-delay:.47s}.h3d .d9>span{animation-delay:.53s}.h3d .d10>span{animation-delay:.59s}
.h3d-kicker,.h3d-lead,.h3d-btns,.h3d-where{animation:h3dFade .8s var(--ease-out,ease-out) both}
.h3d-kicker{animation-delay:0s}.h3d-lead{animation-delay:.45s}.h3d-btns{animation-delay:.55s}.h3d-where{animation-delay:.65s}

/* chapters */
.h3d-chno{display:flex;align-items:baseline;gap:12px;margin:0 0 18px;font:500 15px/1.4 var(--sans);color:var(--hm)}
.h3d-chno span{font:500 13px/1 var(--mono);color:var(--hb);letter-spacing:.02em}
.h3d-ch h2{font:300 clamp(2.1rem,3.3vw,3.7rem)/1.04 var(--serif);letter-spacing:-.028em;margin:0 0 20px;color:var(--bone,#F1EFEA);max-width:17ch;text-wrap:balance}
.h3d-ch p{color:var(--hm);margin:0;max-width:42ch;font:400 clamp(1rem,1.15vw,1.12rem)/1.6 var(--sans)}
.h3d-ch p.h3d-chno{color:var(--hm)}
.h3d .notes{max-width:44ch;margin-top:18px;color:var(--hm)}
.h3d-cta{margin-top:28px!important}

/* buttons: square, like .btn in concept.css (2px inset outline; primary filled Bone on Ink) */
.h3d .h3d-btn{position:relative;display:inline-flex;align-items:center;gap:14px;min-height:56px;padding:0 26px;border-radius:0;font:500 17px/24px var(--sans);text-decoration:none;color:var(--bone,#F1EFEA);background:transparent;box-shadow:inset 0 0 0 2px currentColor;transition:background-color 160ms var(--ease),color 160ms var(--ease),box-shadow 160ms var(--ease),transform 160ms var(--ease-out,ease-out)}
.h3d .h3d-btn .btn-arrow{width:22px;height:10px;background:currentColor;clip-path:polygon(0 45%,78% 45%,78% 0,100% 50%,78% 100%,78% 55%,0 55%);transition:transform 160ms var(--ease)}
.h3d .h3d-btn-fill{background:var(--bone,#F1EFEA);color:var(--ink,#171A21);box-shadow:inset 0 0 0 2px var(--bone,#F1EFEA)}
@media (hover:hover) and (pointer:fine){
  .h3d .h3d-btn:hover{background:var(--bone,#F1EFEA);color:var(--ink,#171A21)}
  .h3d .h3d-btn-fill:hover{background:var(--hb);color:var(--ink,#171A21);box-shadow:inset 0 0 0 2px var(--hb)}
  .h3d .h3d-btn:hover .btn-arrow{transform:translateX(4px)}
}
.h3d .h3d-btn:active{transform:scale(.97)}

/* bottom bar: chapter rail (left), scroll cue then the sample label (right) */
.h3d-meta{position:absolute;z-index:4;left:var(--edge,40px);right:var(--edge,40px);bottom:24px;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}
.h3d-rail{display:flex;gap:26px;margin:0;padding:0;list-style:none}
.h3d-rail li{min-width:64px;padding-top:10px;border-top:1px solid var(--hl);font:500 13px/1.3 var(--sans);color:var(--hs);transition:color .4s var(--ease),border-color .4s var(--ease)}
.h3d-rail li span{margin-right:8px;font:500 12px/1 var(--mono);color:inherit}
.h3d-rail li.on{color:var(--bone,#F1EFEA);border-top-color:var(--hb)}
.h3d-rail li.on span{color:var(--hb)}
.h3d-cue{display:flex;align-items:center;gap:14px;font:500 13px/1.3 var(--sans);color:var(--hm)}
.h3d-cue i{display:block;width:1px;height:40px;background:linear-gradient(var(--hb),transparent);animation:h3dcue 2.2s var(--ease) infinite;transform-origin:top}
.h3d.is-moving .h3d-cue i{animation:none}
@keyframes h3dcue{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.h3d-tag{position:absolute;z-index:4;right:var(--edge,40px);bottom:22px;margin:0;display:flex;align-items:center;gap:10px;white-space:nowrap;font:500 13px/1 var(--sans);color:var(--bone,#F1EFEA);padding:9px 12px;background:rgba(11,13,17,.72);box-shadow:inset 0 0 0 1px rgba(196,165,108,.45);opacity:0}
.h3d-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--hb)}

/* narrow and portrait screens: the object fills the top of the screen, the words sit beneath it */
@media (max-aspect-ratio:23/20){
  .h3d-st,.h3d-st0{left:0;right:0;width:auto;padding:0 var(--gutter,16px)}
  .h3d-st0{bottom:max(22px,env(safe-area-inset-bottom))}
  .h3d-ch{top:auto;bottom:0;height:auto;justify-content:flex-end;padding:72px var(--gutter,16px) max(26px,env(safe-area-inset-bottom))}
  .h3d-ch::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,13,17,.97) 62%,rgba(11,13,17,0))}
  .h3d-ch h2{max-width:none}
  .h3d-meta{display:none}
  .h3d-tag{right:auto;left:var(--gutter,16px);bottom:auto;top:calc(var(--nav-h,72px) + 10px);font-size:12px;padding:7px 10px}
  .h3d-where{display:none}
}
@media (max-width:820px){
  .h3d-title{font-size:clamp(2.55rem,10.4vw,4rem);max-width:none}
  .h3d-kicker{font-size:1.05rem;gap:10px;margin-bottom:12px}.h3d-kicker-node{width:18px}
  .h3d-lead{font-size:1rem;margin-top:14px;max-width:46ch}
  .h3d-btns{gap:10px;margin-top:20px}
  .h3d .h3d-btn{min-height:50px;padding:0 20px;font-size:16px}
  .h3d-chno{margin-bottom:12px}
  .h3d-ch h2{font-size:clamp(1.75rem,7.4vw,2.6rem);margin-bottom:12px}
  .h3d-ch p{font-size:15px}
  .h3d .notes{margin-top:12px;font-size:13px}
}
@media (max-aspect-ratio:23/20) and (max-height:700px){.h3d-lead{display:none}}

/* ---------- static: no JavaScript, reduced motion, or no WebGL ----------
   One designed still of the exploded pose, full width, then the chapters as plain reading. */
:is(html:not(.js),html.h3d-static) .h3d{height:auto}
:is(html:not(.js),html.h3d-static) .h3d-pin{position:relative;height:auto;overflow:visible;padding:calc(var(--nav-h,72px) + clamp(40px,8vh,104px)) 0 clamp(64px,8vw,120px)}
:is(html:not(.js),html.h3d-static) :is(.h3d-poster,.h3d-gl,.h3d-vig,.h3d-meta,.h3d-tag){display:none}
:is(html:not(.js),html.h3d-static) .h3d .h3d-st{position:relative;inset:auto;left:auto;right:auto;width:auto;opacity:1;transform:none;padding:0;background:none}
:is(html:not(.js),html.h3d-static) .h3d .h3d-st a{pointer-events:auto}
:is(html:not(.js),html.h3d-static) .h3d-st0{margin:0 var(--edge,16px);max-width:900px}
:is(html:not(.js),html.h3d-static) .h3d-title{max-width:13ch}
:is(html:not(.js),html.h3d-static) .h3d-still{display:block;margin:clamp(40px,6vw,88px) 0 clamp(40px,6vw,80px)}
:is(html:not(.js),html.h3d-static) .h3d-still img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
:is(html:not(.js),html.h3d-static) .h3d-still figcaption{margin:14px var(--edge,16px) 0;font:500 13px/1.4 var(--sans);color:var(--hm)}
:is(html:not(.js),html.h3d-static) .h3d-chs{position:relative;inset:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,6vw,96px);margin:0 var(--edge,16px);pointer-events:auto}
:is(html:not(.js),html.h3d-static) .h3d-ch{display:block;padding:0}
:is(html:not(.js),html.h3d-static) .h3d-ch::before{display:none}
:is(html:not(.js),html.h3d-static) .h3d .w>span{animation:none}
@media (max-width:820px){:is(html:not(.js),html.h3d-static) .h3d-chs{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  html .h3d{height:auto}
  html .h3d-pin{position:relative;height:auto;overflow:visible;padding:calc(var(--nav-h,72px) + clamp(40px,8vh,104px)) 0 clamp(64px,8vw,120px)}
  html :is(.h3d-poster,.h3d-gl,.h3d-vig,.h3d-meta,.h3d-tag){display:none}
  html .h3d .h3d-st{position:relative;inset:auto;left:auto;right:auto;width:auto;opacity:1;transform:none;padding:0;background:none}
  html .h3d .h3d-st a{pointer-events:auto}
  html .h3d-st0{margin:0 var(--edge,16px);max-width:900px}
  html .h3d-title{max-width:13ch}
  html .h3d-still{display:block;margin:clamp(40px,6vw,88px) 0 clamp(40px,6vw,80px)}
  html .h3d-still img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
  html .h3d-still figcaption{margin:14px var(--edge,16px) 0;font:500 13px/1.4 var(--sans);color:var(--hm)}
  html .h3d-chs{position:relative;inset:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,6vw,96px);margin:0 var(--edge,16px);pointer-events:auto}
  html .h3d-ch{display:block;padding:0}
  html .h3d-ch::before{display:none}
  html .h3d .w>span,html .h3d-kicker,html .h3d-lead,html .h3d-btns,html .h3d-where,html .h3d-cue i{animation:none}
  html .h3d .h3d-btn{transition:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:820px){html .h3d-chs{grid-template-columns:1fr}}

/* ---------- phones (change list item 4, 2026-10-23) ----------
   Under 820 px the hero is the calm version from the first paint (the page head sets h3d-static): one main button,
   the picture larger and edge to edge, and the picture and chapters rising in as they reach the screen. */
@media (max-width:819px){
  html.h3d-static .h3d-pin{padding-top:calc(var(--nav-h,64px) + 36px);padding-bottom:56px}
  html.h3d-static .h3d-btns [data-h3d-next]{display:none}
  html.h3d-static .h3d{overflow-x:clip}
  html.h3d-static .h3d-still{margin:28px 0 40px}
  html.h3d-static .h3d-still img{width:112%;max-width:none;margin-left:-6%}
  html.h3d-static .h3d-chs{gap:48px}
  html.h3d-static .rise{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out,ease-out),transform .9s var(--ease-out,ease-out)}
  html.h3d-static .rise.is-in{opacity:1;transform:none}
}
@media (max-width:819px) and (prefers-reduced-motion:reduce){html.h3d-static .rise{opacity:1;transform:none;transition:none}}

/* ---------- phones: the lens reads the headline, then the laptop comes apart (change list item 6, 2026-10-23) ----------
   Under 820 px with motion allowed (the page head sets h3d-phone). First paint is the first frame: the headline at the
   top, the lead, the button and the rail at the bottom, the laptop faint below. hero.js then sets h3d-lensing: the stage
   pins for 260svh of scroll while the lens reads the headline and lands on the last card, and the chapters (moved out
   of the pin) slide up over it. Without the script the chapters simply follow the first screen. */
html.h3d-phone .h3d{height:auto;overflow-x:clip}
html.h3d-phone .h3d-pin{position:relative;display:flow-root;height:auto;min-height:100vh;min-height:100svh;overflow:visible}
html.h3d-phone.h3d-lensing .h3d-pin{position:sticky;top:0;height:100vh;height:100svh;min-height:0;overflow:hidden;
  background:radial-gradient(120% 70% at 70% 105%,rgba(165,132,75,.2),rgba(11,13,17,0) 60%),var(--hbg)}
html.h3d-phone :is(.h3d-gl,.h3d-vig,.h3d-cue){display:none}
html.h3d-phone .h3d-poster{inset:auto;top:39svh;right:-38.5vw;width:120.5vw;height:auto;background:none;opacity:.6;pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 55%,transparent 85%);mask-image:linear-gradient(#000 55%,transparent 85%)}
html.h3d-phone .h3d-poster :is(picture,img){height:auto}
html.h3d-phone .h3d .h3d-st0{left:0;right:0;width:auto;bottom:auto;top:calc(var(--nav-h,64px) + 22px);height:calc(100svh - var(--nav-h,64px) - 102px);
  display:flex;flex-direction:column;padding:0 var(--gutter,16px)}
html.h3d-phone .h3d-st a{pointer-events:auto}
html.h3d-phone .h3d-title{font-size:min(17.4vw,8.2svh);max-width:none;position:relative}
html.h3d-phone .h3d-lead{margin-top:auto;max-width:30ch;font-size:16px;line-height:1.5}
html.h3d-phone .h3d-btns [data-h3d-next],html.h3d-phone .h3d-where{display:none}
html.h3d-phone .h3d-meta{display:flex;left:var(--gutter,16px);right:var(--gutter,16px);bottom:max(22px,env(safe-area-inset-bottom))}
html.h3d-phone .h3d-rail{flex:1;gap:8px}
html.h3d-phone .h3d-rail li{flex:1;min-width:0;font-size:12px}
html.h3d-phone .h3d-rail li span{display:block;margin:0 0 4px}
/* the exploded laptop, the lens and its glow wait off stage until the script places them */
html.h3d-phone .h3d-still{display:block;position:absolute;margin:0;top:calc(var(--nav-h,64px) + 6px);left:-10.75vw;width:135vw;opacity:0;
  transform-origin:59% 66.8%;pointer-events:none}
html.h3d-phone .h3d-still img{display:block;width:100%;height:auto}
html.h3d-phone .h3d-still figcaption{display:none}
.h3d-lens,.h3d-halo{display:none}
html.h3d-phone.h3d-lensing :is(.h3d-lens,.h3d-halo){display:block;position:absolute;left:0;top:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .6s var(--ease-out,ease-out)}
html.h3d-phone .h3d-lens{width:330px;height:330px;max-width:none;transform-origin:0 0;filter:drop-shadow(0 24px 30px rgba(0,0,0,.6))}
html.h3d-phone .h3d-halo{width:260px;height:260px;border-radius:50%;background:radial-gradient(closest-side,rgba(196,165,108,.3),rgba(196,165,108,0))}
html.h3d-phone.h3d-lensing.h3d-lens-on :is(.h3d-lens,.h3d-halo){opacity:1}
/* the words seen through the glass: a copy of the headline, 1.45x, clipped to the glass */
.h3d-mag{position:absolute;pointer-events:none;opacity:0;transition:opacity .6s var(--ease-out,ease-out)}
.h3d-lens-on .h3d-mag{opacity:1}
.h3d-zoom{position:absolute;inset:0;background:radial-gradient(closest-side,rgba(40,36,28,.92),rgba(11,13,17,.97))}
.h3d-zoom .h3d-title{color:#fff}
.h3d-zoom .h3d-title .brass{color:var(--hb)}
.h3d-zoom .w>span{animation:none}
/* the chapters: after the first screen without the script; with it, below the pinned stage, sliding up over it */
html.h3d-phone .h3d-chs{position:relative;inset:auto;display:block;margin:0;padding:56px var(--gutter,16px) 64px;pointer-events:auto;z-index:5;background:var(--hbg)}
html.h3d-phone .h3d-pin>.h3d-chs{margin-top:100svh}
html.h3d-phone.h3d-lensing .h3d>.h3d-chs{margin-top:260svh;box-shadow:0 -48px 48px var(--hbg)}
html.h3d-phone .h3d .h3d-ch{position:relative;inset:auto;display:block;width:auto;padding:0;opacity:1;transform:none}
html.h3d-phone .h3d-ch+.h3d-ch{margin-top:48px}
html.h3d-phone .h3d-ch::before{display:none}
html.h3d-phone .h3d-tag{z-index:4;opacity:0}
/* short phones keep the lead down to 640 px tall; below that it goes and the button holds the bottom */
@media (max-aspect-ratio:23/20) and (max-height:700px){html.h3d-phone .h3d-lead{display:block}}
@media (max-height:639px){html.h3d-phone .h3d-lead{display:none}html.h3d-phone .h3d-btns{margin-top:auto}}
html.h3d-phone .h3d-lead{text-shadow:0 0 14px var(--hbg),0 0 4px var(--hbg)}
/* on short screens the exploded laptop is drawn smaller, so the lens lands above the button */
html.h3d-phone{--h3d-sw:min(135vw,calc((62svh - var(--nav-h,64px) - 6px) / .822))}
html.h3d-phone .h3d-still{width:var(--h3d-sw);left:calc(50% - var(--h3d-sw) * .45)}