/* Three rooms, one uninterrupted listening session. */
html{scroll-snap-type:y proximity;scroll-padding-top:18px}.scene{position:relative;scroll-snap-align:start;scroll-margin-top:18px}.listening-scene{min-height:0}.record-title[data-title-mode="ethos"]{font-size:clamp(40px,min(7.1vw,25cqh),142px);line-height:.88;letter-spacing:-.045em;text-wrap:nowrap;overflow-wrap:normal}.record-title[data-title-mode="ethos"]>span{display:block;white-space:nowrap}
.section-nav{display:flex;align-items:center;gap:clamp(8px,1.5vw,22px);margin-inline:auto;white-space:nowrap}.section-nav a{display:flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:none;font:11px/1 var(--mono);letter-spacing:.06em}.section-nav .nav-separator{color:var(--muted);font:11px/1 var(--mono);opacity:.55;pointer-events:none}.section-nav a:hover,.section-nav a[aria-current="location"]{color:var(--paper)}.section-nav a:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
@media(max-width:700px){.record-title[data-title-mode="ethos"]{font-size:clamp(29px,min(10.7vw,25cqh),80px)}.section-nav{gap:6px}.section-nav a,.section-nav .nav-separator{font-size:9px;letter-spacing:.02em}.topbar-right{gap:0}}
@media(max-width:380px){.section-nav{gap:5px}.section-nav a,.section-nav .nav-separator{font-size:8px}}
html[data-motion=off]{scroll-snap-type:none}
@media(prefers-reduced-motion:reduce){html{scroll-snap-type:none;scroll-behavior:auto}}

/* The masthead stays in flow, then becomes a hovering navigation instrument. */
html{scroll-padding-top:118px}.scene{scroll-margin-top:118px}
.site-shell>.topbar{position:sticky;top:0;z-index:40;width:100%;margin-inline:auto;background:color-mix(in srgb,var(--black) 94%,transparent);backdrop-filter:blur(14px);transition:width .5s ease,top .5s ease,padding .5s ease,background-color .35s,box-shadow .5s}
.site-shell>.topbar.is-floating{--black:#000;--paper:#fff;--muted:#c9c5cb;--rule:#ffffff30;--panel:#000;width:min(760px,calc(100% - 24px));top:14px;padding-inline:20px;background:#000;color:#fff;border:1px solid #ffffff30;box-shadow:0 12px 38px #0007;backdrop-filter:none}
.topbar.is-floating .appearance-panel{right:0;background:#000;color:#fff;max-height:calc(100svh - 140px)}
.section-nav a{position:relative;transition:color .2s ease}
.section-nav a:after{content:'';position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .22s ease;pointer-events:none}
.section-nav a:is(:hover,:focus-visible):after{transform:scaleX(1)}
.topbar.is-floating .section-nav a:is(:hover,:focus-visible,[aria-current=location]){color:var(--accent)}
/* Both small registers speak in exactly the same ink and type. */
.eyebrow,.platform-dock .origin-lexicon{font:500 clamp(12px,.86vw,14px)/1.2 var(--mono);letter-spacing:.1em;color:var(--paper)}
.platform-dock .origin-lexicon{display:block;white-space:nowrap}
@media(max-width:1400px){.platform-dock .origin-lexicon{grid-column:1/-1}}
@media(max-width:700px){html{scroll-padding-top:104px}.scene{scroll-margin-top:104px}.site-shell>.topbar{padding-inline:12px;gap:8px}.site-shell .topbar>.brand{width:44px}.site-shell .topbar>.brand .stareye{width:52px;height:52px}.topbar .appearance-toggle{width:44px;height:44px}.topbar-right{flex-shrink:0}.site-shell>.topbar.is-floating{width:calc(100% - 16px);top:8px;padding-inline:8px;gap:6px}.topbar.is-floating .appearance-panel{width:min(350px,calc(100vw - 32px));max-height:calc(100svh - 120px)}}
html[data-motion=off] :is(.topbar,.section-nav a),html[data-motion=off] .section-nav a:after{transition:none}
@media(prefers-reduced-motion:reduce){.site-shell>.topbar,.section-nav a,.section-nav a:after{transition:none}}
.scene.guestbook-board{scroll-margin-top:118px}
@media(max-width:700px){.scene.guestbook-board{scroll-margin-top:104px}}
