@font-face{font-family:"SR Display";src:url("/fonts/sr-display-700.woff") format("woff");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"SR Mono";src:url("/fonts/sr-mono-400.woff") format("woff");font-style:normal;font-weight:400;font-display:swap}
:root{--instrument-font:"SR Mono","Courier New",monospace}
.contact h2{font-family:"SR Display",Arial,sans-serif;font-weight:700;font-size:clamp(50px,6.65vw,96px);letter-spacing:-.06em}

/* Quiet instrument markings, aligned to existing content edges. */
.scene-controls .text-button,.subject-top,.subject-top .text-button,.track-status,.variant-letter,.variant-copy small,.clock,.transport-button,.volume-wrap span,.pending-label,.wave-probe,.contact-links small{font-family:var(--instrument-font);font-weight:400;font-variant-numeric:tabular-nums}
.scene-label::after{width:32px;margin-top:11px;opacity:.5}
.scene-ruler{position:absolute;z-index:4;right:12px;top:70px;bottom:62px;width:4px;pointer-events:none;opacity:.35;background:repeating-linear-gradient(to bottom,#fff 0 1px,transparent 1px 14px);mask-image:linear-gradient(transparent,#000 15%,#000 85%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 15%,#000 85%,transparent)}
.subject-top{letter-spacing:.045em}
.subject-top::before{content:"";position:absolute;bottom:-3px;left:0;right:0;height:5px;pointer-events:none;background:linear-gradient(var(--fg),var(--fg)) left/1px 5px,linear-gradient(var(--fg),var(--fg)) right/1px 5px;background-repeat:no-repeat;opacity:.65}
.chapter-index svg{transition:transform .75s var(--motion-ease),opacity .6s var(--motion-ease)}
.subject:not(.chapter-entered) .chapter-index svg{transform:translateY(9px);opacity:.35}
.track-heading.reveal>div{transition-delay:.12s}
.track-heading.reveal .track-cover{transition-delay:.2s}
.track-cover::after{content:"";position:absolute;inset:0;pointer-events:none;border:1px solid #ffffff28;mix-blend-mode:difference}
.player{position:relative}
.player::before{content:"";position:absolute;left:0;right:0;top:-3px;height:5px;background:linear-gradient(var(--fg),var(--fg)) left/1px 5px,linear-gradient(var(--fg),var(--fg)) right/1px 5px;background-repeat:no-repeat;opacity:.65;pointer-events:none}
.track-status{letter-spacing:.02em}
.variant-copy small{font-size:8px;letter-spacing:.025em}
/* Soften text on both light and dark selection fills; keep the indicator crisp. */
.variant>.variant-letter,.variant>.variant-copy{opacity:.84}
#subject-02 .variant>.variant-letter,#subject-02 .variant>.variant-copy{opacity:.78}
.clock{font-size:10px;letter-spacing:0}

/* The existing diagonal is a short, scroll-driven passage into chapter one. */
.chapter-bridge{height:calc(var(--entry-cut) + 150px);perspective:none}
.chapter-bridge::before{display:none}
.chapter-field{display:block;width:100%;height:100%;color:#fff;opacity:.32;transform:translateY(calc(var(--bridge-shift,0px) * .15)) scale(var(--bridge-scale,1));transform-origin:65% 0;pointer-events:none}

/* A native range makes the waveform equally usable by pointer and keyboard. */
.wave-area{isolation:isolate}
.wave-seek{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;opacity:0;cursor:crosshair;touch-action:pan-y;appearance:none;background:transparent}
.wave-seek:disabled{pointer-events:none}
.wave-seek::-webkit-slider-runnable-track{height:100%;background:transparent}
.wave-seek::-webkit-slider-thumb{appearance:none;width:1px;height:100%;background:transparent;border:0}
.wave-seek::-moz-range-track{height:100%;background:transparent}
.wave-seek::-moz-range-thumb{width:1px;height:100%;background:transparent;border:0}
.wave-area:has(.wave-seek:focus-visible){outline:1px dashed var(--fg);outline-offset:4px}
.wave-ruler{display:none;position:absolute;bottom:7px;left:0;right:0;height:4px;opacity:.3;background:repeating-linear-gradient(to right,var(--fg) 0 1px,transparent 1px 10%);pointer-events:none}
.wave-playhead{display:none;position:absolute;z-index:1;top:23px;bottom:13px;left:clamp(1px,var(--playhead,0%),calc(100% - 1px));width:1px;background:var(--fg);opacity:.5;pointer-events:none}
.wave-playhead::after{content:"";position:absolute;bottom:-5px;left:-2px;width:5px;height:5px;background:var(--fg);clip-path:polygon(0 0,100% 0,50% 100%)}
.wave-probe{position:absolute;inset:0;opacity:0;z-index:2;pointer-events:none;transition:opacity .12s ease;font-size:9px;line-height:1;letter-spacing:.03em}
.wave-probe::before{content:"";position:absolute;top:20px;bottom:7px;left:var(--probe,0%);width:1px;background:var(--fg);opacity:.7}
.wave-probe span{position:absolute;left:clamp(22px,var(--probe,0%),calc(100% - 22px));top:3px;transform:translateX(-50%);padding:2px 4px;background:var(--bg);color:var(--fg);white-space:nowrap}
.wave-area.is-ready .wave-ruler,.wave-area.is-ready .wave-playhead{display:block}
.wave-area.is-ready.is-hovering .wave-probe,.wave-area.is-ready:focus-within .wave-probe{opacity:1}
.subject[data-playback="loading"] .pending-label{animation:loading-breathe 1.4s ease-in-out infinite}
.subject[data-playback="loading"] .play{opacity:.65}
@keyframes loading-breathe{50%{opacity:.45}}

/* Keep the accepted contact layout; the surface responds inside its footprint. */
.contact-links>a{position:relative;isolation:isolate;background:#000}
.contact-links>a::before{content:"";position:absolute;z-index:0;inset:-12px -12px -1px;pointer-events:none;background:#fff;clip-path:polygon(0 100%,0 100%,0 100%,0 100%);transition:clip-path .45s var(--motion-ease)}
.contact-links>a>span{position:relative;z-index:1;color:#fff;mix-blend-mode:difference}
.contact-links a small{color:#fff;opacity:.65;letter-spacing:.1em}
.contact-links>a>span:last-child{transition:transform .4s var(--motion-ease)}
.contact-links>a:focus-visible::before{clip-path:polygon(0 0,calc(100% - 20px) 0,100% 100%,0 100%)}
.contact-links>a:focus-visible>span:last-child{transform:translate(3px,-3px)}
@media(hover:hover) and (pointer:fine){.contact-links>a:hover::before{clip-path:polygon(0 0,calc(100% - 20px) 0,100% 100%,0 100%)}.contact-links>a:hover>span:last-child{transform:translate(-2px,-3px)}}

@media(max-width:620px){
 .contact h2{font-size:60px}
 .scene-ruler{right:9px;top:63px;bottom:54px;width:3px}
 .subject-top{font-size:9px}
 .subject-top .text-button{font-size:8px;letter-spacing:.015em}
 .track-status{font-size:8px;max-width:116px}
 .variant-copy small{font-size:7px;line-height:1.5}
 .clock{font-size:9px}
 .chapter-bridge{height:calc(var(--entry-cut) + 100px)}
 .wave-probe{font-size:8px}
 .contact-links>a::before{inset:-10px -8px -1px}
}
@media(prefers-reduced-motion:reduce){.subject:not(.chapter-entered) .chapter-index svg{transform:none;opacity:1}}
.motion-paused .subject:not(.chapter-entered) .chapter-index svg{transform:none;opacity:1}
.motion-paused .chapter-index svg,.motion-paused .contact-links>a::before,.motion-paused .contact-links>a>span:last-child,.motion-paused .wave-probe{transition:none}