@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:600 900;font-display:swap;src:url(../fonts/BigShouldersDisplay-normal-600_900.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:300 500;font-display:swap;src:url(../fonts/GeistMono-normal-300_500.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/IBMPlexMono-normal-300.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/IBMPlexMono-normal-400.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/InstrumentSans-normal-400_600.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/InstrumentSerif-italic-400.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/InstrumentSerif-normal-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/Inter-normal-400_700.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:300 500;font-display:swap;src:url(../fonts/JetBrainsMono-normal-300_500.woff2) format('woff2')}
/* =====================================================================
   HVERA — live page base (the export twin is ../common.css)
   Every section sits in its own .vp container, so breakpoints are container queries on the real width
   and a pinned .vp is never inside a contained ancestor (ScrollTrigger pins with position: fixed).
   1u = clamp(umin, min(100cqw / dw, 100svh / dh), umax) — see common.css for the reference frames.
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scrollbar-width: none; -webkit-text-size-adjust: 100%; }
html::-webkit-scrollbar { display: none; }
body { overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.vp { --w: 100cqw; --vh: 100svh; container: page / inline-size; width: 100%; position: relative; }
.fx {
  --k: 1; --dw: 90; --dh: 56.25; --umin: 12px; --umax: 40px;
  position: relative; overflow: hidden; width: 100%; height: calc(var(--vh) * var(--k));
  font-size: clamp(var(--umin), min(calc(var(--w) / var(--dw)), calc(var(--vh) / var(--dh))), var(--umax));
  line-height: 1;
}
@container page (max-width: 991px) { .fx { --dw: 52.125; --dh: 67.5; --umin: 12px; } }
@container page (max-width: 599px) { .fx { --dw: 24.375; --dh: 41.25; --umin: 13px; --umax: 18px; } }
.screen { position: relative; height: var(--vh); }
.only-tm { display: none !important; }
@container page (max-width: 991px) { .only-d { display: none !important; } .only-tm { display: revert !important; } }

/* safety net: when u is clamped at its floor (very short windows) let unpinned sections grow instead of clipping */
@media (min-width: 992px) and (max-height: 674px), (min-width: 600px) and (max-width: 991px) and (max-height: 809px), (max-width: 599px) and (max-height: 535px) {
  main .fx:not(.depth) { height: auto; min-height: calc(var(--vh) * var(--k)); }
}

/* fixed layers: nav / rail / bar, menu, loader */
.ui-layer { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.ui-layer > .fx { height: 100svh; overflow: visible; }
.ui-layer:not(.menu-layer) > .fx { background: none !important; }
.ui-layer a, .ui-layer button, .ui-layer [role="button"], .ui-layer .nav > *, .ui-layer .bar > *, .ui-layer .rail { pointer-events: auto; }
.menu-layer { z-index: 60; visibility: hidden; }
.menu-layer.is-open { pointer-events: auto; }
.menu-layer > .fx { overflow: hidden; }
.loader { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; }
.loader svg { width: 3.5rem; height: 3.5rem; }
.ln { overflow: clip; overflow-clip-margin: .1em; }
@media (prefers-reduced-motion: reduce) { .loader { display: none; } }