@font-face { font-family: "Switzer"; src: url(../assets/fonts/switzer-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Switzer"; src: url(../assets/fonts/switzer-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Switzer"; src: url(../assets/fonts/switzer-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Switzer"; src: url(../assets/fonts/switzer-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Switzer"; src: url(../assets/fonts/switzer-800.woff2) format("woff2"); font-weight: 800; font-display: swap; }

:root {
  /* the film's night: sampled from the blimp shot */
  --sky-0: #000a26;
  --sky-1: #001a52;
  --sky-2: #012a7a;
  --sky-3: #03368c;
  --black: #020306;
  --ink: #f3f5f8;
  --soft: rgba(243, 245, 248, .74);
  --mute: rgba(243, 245, 248, .5);
  --line: rgba(255, 255, 255, .16);
  /* the sign's bulbs */
  --bulb: #f4f7ff;
  --bulb-red: #ff4a5e;
  --bulb-cyan: #7fe6f2;
  --pad: clamp(18px, 4.4vw, 72px);
  /* side margins that also clear the notch / rounded corners in landscape (viewport-fit=cover) */
  --pad-l: max(var(--pad), env(safe-area-inset-left, 0px));
  --pad-r: max(var(--pad), env(safe-area-inset-right, 0px));
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* how much taller the full-bleed stage is than the visible area while the Safari toolbar is out */
  --tb: 0px;
  --spring: cubic-bezier(.2, .9, .2, 1);
  --font: "Switzer", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
@supports (height: 100lvh) { :root { --tb: calc(100lvh - 100svh); } }
html { background: #01030a; -webkit-text-size-adjust: 100%; overscroll-behavior-y: none; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  color: var(--ink); background: #01030a;
  font-family: var(--font); font-weight: 400; font-size: 18px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, video, canvas { display: block; }
::selection { background: var(--ink); color: #000; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

main { position: relative; z-index: 10; }
.scene { position: relative; }
/* A scene that holds the screen while you scroll through it: give the scene a height, put a .stage inside. */
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

/* type */
.display { font-weight: 800; letter-spacing: -0.04em; line-height: .95; font-size: clamp(44px, 7.2vw, 132px); }
.title   { font-weight: 700; letter-spacing: -0.035em; line-height: 1; font-size: clamp(34px, 4.6vw, 80px); }
.lead    { font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; font-size: clamp(19px, 1.7vw, 28px); color: var(--soft); }
.small   { font-size: 14px; font-weight: 500; color: var(--mute); }

a:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(13px + env(safe-area-inset-top, 0px)) var(--pad-r) 13px var(--pad-l);
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
}
/* one shared backing so nothing ever prints through the nav; main.js turns it on from About to the ending */
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(1, 3, 10, .94); border-bottom: 1px solid var(--line);
  opacity: 0; transition: opacity .5s ease;
}
.nav-solid .nav::before { opacity: 1; }
/* tap targets at least 44px tall, layout unchanged */
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
.nav-name { font-weight: 800; letter-spacing: -0.03em; font-size: 17px; margin-left: -8px; }
.nav-link { margin-right: -8px; }
.nav-link span { display: inline-block; margin-left: .3em; transition: transform .4s var(--spring); }
.nav-link:hover span { transform: translate(3px, -3px); }