@font-face {
  font-family: "Telka Extended";
  src: url("/assets/fonts/telka-extended-medium.woff2") format("woff2"),
       url("/assets/fonts/telka-extended-medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #111510;
  --paper: #f2f2e9;
  --accent: #edfa8b;
  --edge: clamp(18px, 1.7vw, 32px);
  --display: "Telka Extended", Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --drawer-width: 50vw;
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--paper);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 7px; }
::selection { color: var(--ink); background: var(--accent); }
.skip-link { position: fixed; top: -100px; left: var(--edge); z-index: 100; padding: 14px; background: var(--paper); color: var(--ink); }
.skip-link:focus { top: 16px; }

.site-header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  padding: var(--edge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }
.brand { display: block; width: clamp(112px, 10.4vw, 158px); }
.brand img { display: block; width: 100%; height: auto; transition: filter 250ms; }
.site-header.is-on-paper { color: var(--ink); }
.site-header.is-on-paper .brand img { filter: brightness(0); }
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  padding: 0;
  background: none;
  font-size: 14px;
  line-height: 1;
}
.crosshair { position: relative; display: inline-block; width: 16px; height: 16px; transition: transform 500ms cubic-bezier(.2,.75,.2,1); }
.crosshair i { position: absolute; display: block; background: currentColor; }
.crosshair i:nth-child(1), .crosshair i:nth-child(2) { left: 7px; width: 2px; height: 4px; }
.crosshair i:nth-child(1) { top: 0; }
.crosshair i:nth-child(2) { bottom: 0; }
.crosshair i:nth-child(3), .crosshair i:nth-child(4) { top: 7px; height: 2px; width: 4px; }
.crosshair i:nth-child(3) { left: 0; }
.crosshair i:nth-child(4) { right: 0; }
.menu-toggle:hover .crosshair { transform: rotate(90deg); }
.crosshair--close { transform: rotate(45deg); }
.menu-toggle:hover .crosshair--close { transform: rotate(135deg); }

.site-shell { transition: transform 800ms cubic-bezier(.76,0,.24,1); }
.menu-open .site-shell { transform: translateX(calc(-1 * var(--drawer-width))); }
.menu-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  margin: 0;
  width: var(--drawer-width);
  max-width: none;
  height: 100%;
  height: 100dvh;
  max-height: none;
  border: 0;
  padding: 0;
  color: var(--paper);
  background: var(--ink);
  overflow: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform 800ms cubic-bezier(.76,0,.24,1);
}
.menu-drawer::backdrop { background: rgb(0 0 0 / 0); }
.menu-drawer.is-open { transform: translateX(0); }
.drawer-close { position: absolute; right: var(--edge); top: var(--edge); z-index: 2; }
.drawer-content { min-height: calc(100% - 80px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 96px 12% 72px 20%; }
.drawer-content nav { display: flex; flex-direction: column; gap: 8px; }
.drawer-content nav a { display: block; font-family: var(--display); font-weight: 500; font-size: clamp(34px, 4.4vw, 76px); line-height: 1.25; letter-spacing: -.05em; overflow: hidden; }
.drawer-content nav a span { display: block; transition: transform 350ms, color 350ms; }
.drawer-content nav a:hover span { transform: translateX(8px); color: var(--accent); }
.drawer-cta { margin-top: 48px; }
.drawer-footer { position: absolute; left: var(--edge); right: var(--edge); bottom: var(--edge); display: flex; justify-content: space-between; gap: 16px; font: 10px/1.4 var(--mono); text-transform: uppercase; color: #8b8e80; }
.drawer-footer a:hover { color: var(--paper); }

.journey { position: relative; height: 440vh; height: 440svh; }
.journey-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; background: var(--ink); }
.stage-grid { position: absolute; inset: 0; background-image: radial-gradient(circle, #f2f2e926 .8px, transparent 1px); background-size: 96px 96px; }
.media-frame { position: absolute; inset: 0; overflow: hidden; clip-path: inset(var(--media-inset, 0px)); will-change: clip-path; }
.hero-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform: scale(var(--media-scale, 1)); }
.media-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(10 16 17 / .16) 0%, transparent 35%, rgb(7 12 15 / .13) 48%, rgb(7 12 15 / .62) 100%); }
.media-shade::after { content: ""; position: absolute; inset: 0; background: rgb(8 15 16 / var(--story-shade, 0)); }
.hero-content { position: absolute; z-index: 2; left: var(--edge); right: var(--edge); bottom: clamp(28px, 4.4vh, 52px); will-change: transform, opacity; }
h1 { margin: 0 0 24px; font: 500 clamp(46px, 5.85vw, 104px)/1.04 var(--display); letter-spacing: -.055em; }
h1 span { display: block; }
.cta { display: inline-flex; gap: 38px; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 18px; color: var(--ink); background: var(--accent); font: 11px/1 var(--mono); letter-spacing: .02em; text-transform: uppercase; clip-path: polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%); transition: background 200ms; }
.cta:hover { background: #f7ffbf; }
.cta .arrow { font: 22px/1 Arial, sans-serif; transition: transform 250ms; }
.cta:hover .arrow { transform: translate(2px, -2px); }
.cta:focus-visible { outline-offset: -5px; outline-color: var(--ink); }
.chapter { position: absolute; z-index: 2; inset: 0; display: flex; align-items: center; padding: 0 9vw; opacity: 0; pointer-events: none; will-change: opacity, transform; }
.chapter--right { justify-content: flex-end; }
.chapter--left { justify-content: flex-start; }
.chapter-copy { width: max-content; min-width: 25vw; }
.chapter-index { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; color: var(--accent); font: 11px/1 var(--mono); letter-spacing: .06em; }
.chapter-rule { height: 1px; flex: 1; background: currentColor; opacity: .5; }
.small-cross { font: 20px/1 var(--mono); }
.chapter h2 { margin: 0; font: 500 clamp(48px, 6.1vw, 100px)/1.1 var(--display); letter-spacing: -.055em; }
.journey-meter { position: absolute; z-index: 3; top: 50%; right: calc(var(--edge) + 7px); height: 160px; width: 9px; display: flex; flex-direction: column; align-items: center; transform: translateY(-50%); opacity: .7; }
.meter-cap { display: block; width: 9px; height: 4px; border-left: 1px solid #f2f2e980; border-right: 1px solid #f2f2e980; }
.meter-cap:first-child { border-top: 1px solid #f2f2e980; margin-bottom: 5px; }
.meter-cap:last-child { border-bottom: 1px solid #f2f2e980; margin-top: 5px; }
.meter-track { width: 1px; flex: 1; background: #f2f2e94d; }
.meter-track > span { display: block; height: 100%; background: var(--accent); transform: scaleY(0); transform-origin: top; }
.stage-footer { position: absolute; z-index: 3; left: var(--edge); right: var(--edge); bottom: 22px; display: flex; justify-content: flex-end; align-items: center; gap: 34px; pointer-events: none; }
.stage-footer > * { pointer-events: auto; }
.scroll-cue { display: flex; align-items: center; gap: 16px; font: 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.scroll-cue > span:last-child { font: 18px/1 Arial, sans-serif; }
.video-controls { display: flex; align-items: center; gap: 16px; }
.clip-count { font: 9px/1 var(--mono); letter-spacing: .08em; }
.video-toggle { width: 28px; height: 28px; background: none; padding: 6px; display: grid; place-items: center; }
.pause-icon { width: 8px; height: 10px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.video-toggle.is-paused .pause-icon { width: 0; height: 0; border: 5px solid transparent; border-left: 8px solid currentColor; border-right: 0; }

.content-start { position: relative; min-height: 100vh; min-height: 100svh; padding: 110px var(--edge) 36px; display: flex; flex-direction: column; color: var(--ink); background: var(--paper); outline: none; }
.content-eyebrow { display: flex; justify-content: space-between; padding: 20px 0; border-top: 1px solid #11151044; font: 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.content-eyebrow > span:last-child { font: 22px/1 Arial, sans-serif; }
.content-start h2 { margin: 10vh 0 14vh; font: 500 clamp(42px, 6.5vw, 112px)/1.07 var(--display); letter-spacing: -.06em; }
.content-horizon { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 20px; border-top: 1px solid #11151033; font: 10px/1 var(--mono); text-transform: uppercase; }
.horizon-mark { font: 24px/1 var(--mono); }

@media (min-width: 1800px) { .hero-content { bottom: 56px; } }
@media (max-width: 767px) {
  :root { --drawer-width: 100vw; --edge: 20px; }
  .site-header { padding-top: 20px; }
  .brand { width: 112px; }
  .menu-toggle { font-size: 13px; gap: 9px; }
  .journey { height: 400svh; }
  .hero-content { bottom: 106px; }
  h1 { font-size: clamp(34px, 7.9vw, 60px); line-height: 1.13; letter-spacing: -.055em; margin-bottom: 25px; }
  .cta { min-height: 46px; padding: 0 16px; gap: 32px; font-size: 10px; }
  .journey-meter { right: 23px; height: 110px; }
  .chapter { padding: 0 26px; }
  .chapter--right { justify-content: flex-start; }
  .chapter-copy { min-width: 72vw; }
  .chapter h2 { font-size: clamp(42px, 10vw, 70px); }
  .chapter-index { margin-bottom: 20px; font-size: 10px; }
  .stage-footer { justify-content: space-between; bottom: 24px; gap: 12px; }
  .video-controls { gap: 10px; }
  .scroll-cue { font-size: 8px; gap: 10px; }
  .drawer-content { padding: 100px 10% 100px; min-height: 100%; }
  .drawer-content nav { gap: 10px; }
  .drawer-content nav a { font-size: clamp(42px, 10.5vw, 76px); line-height: 1.3; }
  .drawer-cta { margin-top: 40px; }
  .drawer-footer { font-size: 9px; bottom: 24px; }
  .content-start { padding-top: 100px; }
  .content-start h2 { margin-top: 13vh; font-size: clamp(35px, 8.4vw, 64px); line-height: 1.15; }
}
@media (max-height: 520px) and (min-width: 768px) {
  h1 { font-size: 48px; }
  .hero-content { bottom: 24px; }
  .drawer-content { padding-top: 70px; padding-bottom: 60px; }
  .drawer-content nav a { font-size: 38px; }
  .drawer-cta { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .hero-video { transform: none; }
  .media-frame { clip-path: none; }
}