/* Geometry-led hero. Keep the visual layer outside all content clipping contexts. */
.octave-home{--hero-width:min(1400px,68%);overflow-x:visible}
html:has(.octave-home){overflow-x:clip;scroll-behavior:auto}
.octave-home .hero{width:var(--hero-width);padding:0;margin-inline:auto;overflow:visible}
.octave-home .hero-stage{min-height:112svh;padding:0}
.octave-home .hero .hero-bottom{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(24px,6vw,100px);align-items:start;padding:0;width:100%;overflow:visible}
.octave-home .hero .queen-slot{height:auto;min-height:260px;width:auto;align-self:stretch;pointer-events:none}
.octave-home .hero-copy{min-width:0;margin:0;width:100%;max-width:48ch;font-size:clamp(16px,1.25vw,21px)}
.octave-home .story-heading{white-space:normal;text-wrap:balance;line-height:1;margin-bottom:26px;overflow-wrap:normal}
.octave-home .travelling-name{position:fixed!important;margin:0!important;line-height:1!important;letter-spacing:0!important;max-width:none;z-index:80;pointer-events:none;transform:none!important;transition:color .52s!important;will-change:top,left,font-size}
.octave-home .floating-layer{position:fixed!important;inset:auto;right:auto;bottom:auto;width:320px;height:440px;max-width:none;z-index:65;pointer-events:none;overflow:visible;transition:none!important;will-change:transform}
.octave-home .floating-layer queen-scene{transition:none;opacity:1}
.octave-home .jm-bar,.octave-home .jm-bar.jm-bar-on{top:max(16px,env(safe-area-inset-top));z-index:75}
.octave-home .jm-bar .jm-bar-inner,.octave-home .jm-bar.jm-bar-on .jm-bar-inner{width:var(--hero-width);max-width:none;min-height:56px;padding:0;margin:0 auto;justify-content:flex-end;transition:none;backdrop-filter:none;overflow:visible}
.octave-home .jm-barnav{margin:0;gap:0;align-items:flex-end}
.octave-home .jm-barlink{font-size:14px;line-height:1.35;min-height:22px;padding:1px 0 1px 16px}
.octave-home .landing-section{position:relative;margin:clamp(36px,7svh,80px) 0 0;padding:0;height:145svh;min-height:460px;overflow:visible;z-index:3}
.octave-home .board-stage,.octave-home .board-stage.is-approaching{position:sticky;inset:auto;top:90px;visibility:visible;width:min(1400px,100%);height:min(720px,calc(100svh - 110px));min-height:220px;margin:0 auto;transform:none;overflow:visible;background:none;border:0;pointer-events:none}
.octave-home .board-stage.is-landed{pointer-events:auto}
.octave-home .board-stage queen-scene{overflow:visible;touch-action:pan-y}
.octave-home .board-stage.is-fallback::after{display:none}
.octave-home .board-stage .piece-prompt{position:absolute;top:auto;bottom:4px;left:0;width:100%;max-width:none;text-align:center;transform:none;margin:0;z-index:5}
.octave-home .piece-prompt.is-visible{opacity:.6}
#projects :is(.case-title,.case-type,.case-role,.case-copy){min-width:0;height:auto;overflow-wrap:anywhere}
#projects .case-title{white-space:normal}
@media(min-width:680px) and (max-width:1099px){.octave-home{--hero-width:84%}}
@media(max-width:679px){
 .octave-home{--hero-width:calc(100% - 40px)}
 .octave-home .hero .hero-bottom{grid-template-columns:minmax(60px,.32fr) minmax(0,1fr);gap:20px}
 .octave-home .hero-copy{font-size:16px}
 .octave-home .story-heading{font-size:clamp(25px,6vw,30px)}
 .octave-home .hero .queen-slot{min-height:180px}
 .octave-home .landing-section{height:125svh;min-height:460px}
}
@media(max-height:500px){
 .octave-home .hero-stage{min-height:125svh}
 .octave-home .hero .hero-bottom{gap:32px}
 .octave-home .story-heading{font-size:28px}
 .octave-home .hero-copy{font-size:16px}
 .octave-home .board-stage{top:80px;height:calc(100svh - 90px);min-height:180px}
 .octave-home .landing-section{height:160svh;min-height:440px}
 .octave-home .jm-barnav{flex-direction:row;gap:16px}
 .octave-home .jm-barlink{min-height:32px;padding:4px 0}
 .octave-home .jm-bar .jm-bar-inner{min-height:40px}
}
@media(prefers-reduced-motion:reduce){
 .octave-home .hero-stage{min-height:150px}
 .octave-home .hero .hero-bottom{grid-template-columns:1fr;max-width:720px;margin-inline:auto}
 .octave-home .queen-slot{display:none}
 .octave-home .landing-section{height:auto;min-height:0;padding-bottom:32px}
 .octave-home .board-stage{position:relative;top:0}
 .octave-home .hero-copy :is(.story-heading,.intro,.copy-footer){opacity:1;transform:none}
}

.fallback-landed-piece{position:absolute;pointer-events:none;object-fit:contain}

.name-measure{position:fixed;visibility:hidden;pointer-events:none;inset:0 auto auto 0;width:max-content;line-height:1;margin:0;white-space:nowrap}

.octave-home .jm-bar,.octave-home .jm-bar.jm-bar-on{opacity:var(--dock-progress,0);transition:none}
.octave-home .jm-bar:focus-within{opacity:1}