/* What we build — 84th Street. Loads after the shared @font-face rules in styles.css. */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken-var.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-roman-var.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #f2f0e9;
  --lavender: #e1e1f6;
  --ink: #1a1b1e;
  --body: #4b5055;
  --muted: #6e747b;
  --blue: #4a4fe0;
  --blue-deep: #383dc9;
  --hairline: #dcd8cb;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rail-gap: clamp(44px, 6vw, 88px);
  --bg: var(--paper);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { min-width: 320px; background: var(--paper); color: var(--body); font-family: var(--sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-synthesis: none; overflow-x: hidden; }
::selection { background: var(--blue); color: #fff; }
svg { display: block; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }
h1, h2 { font-family: var(--serif); font-weight: 500; color: var(--ink); line-height: 1.08; letter-spacing: 0.002em; font-optical-sizing: auto; text-wrap: balance; }

.defs-svg { position: absolute; width: 0; height: 0; }
.shell { max-width: 1264px; margin-inline: auto; padding-inline: clamp(20px, 4.5vw, 56px); }
.lined { position: relative; padding-left: var(--rail-gap); }

/* circuit grammar */
.rail { position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: var(--blue); }
.nd { position: absolute; left: 9px; transform: translateX(-50%); width: 15px; height: 15px; border: 2px solid var(--blue); border-radius: 50%; background: var(--bg); }
.dot { position: absolute; left: 9px; transform: translate(-50%, -50%); width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }

/* type */
.eyebrow { display: block; font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--blue); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: 0.002em; text-decoration: none; padding: 15px 26px; border-radius: 3px; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; }
.btn .ar { transition: transform 0.18s ease; }
.btn:hover .ar { transform: translateX(4px); }
.btn.outline { border: 1.5px solid var(--blue); color: var(--blue); background: transparent; }
.btn.outline:hover { background: var(--blue); color: #fff; }
.ar { font-family: var(--sans); }

/* header */
header { position: relative; z-index: 5; }
header .shell { display: flex; align-items: center; gap: 22px; padding-top: 34px; padding-bottom: 26px; }
.lockup { display: flex; align-items: center; gap: 22px; text-decoration: none; }
.lockup svg { width: 46px; height: 47px; color: var(--blue); stroke-width: 1.6; }
.lockup .bar { width: 1px; height: 44px; background: var(--hairline); }
.lockup .wm { font-size: 12.5px; font-weight: 700; letter-spacing: 0.3em; line-height: 1.55; color: var(--ink); text-transform: uppercase; white-space: nowrap; }
nav.main { margin-left: auto; display: flex; align-items: center; }
nav.main .cta { font-size: 15px; color: var(--blue); font-weight: 600; text-decoration: none; padding-bottom: 4px; border-bottom: 1.5px solid var(--blue); transition: color 0.15s ease, border-color 0.15s ease; }
nav.main .cta:hover { color: var(--blue-deep); border-color: var(--blue-deep); }

/* page head */
.phead { position: relative; overflow: hidden; }
.phead .lined { padding-top: clamp(40px, 6vw, 84px); padding-bottom: clamp(120px, 16vw, 200px); }
.phead .tnode { top: 0; }
.phead .rail { top: 15px; }
.phead h1 { font-size: clamp(40px, 5vw, 70px); line-height: 1.05; max-width: 15ch; margin-top: 18px; position: relative; z-index: 2; }
.hero-art { position: absolute; right: min(0px, calc((1264px - 100vw) / 2)); bottom: 0; top: 110px; width: min(40vw, 500px); pointer-events: none; z-index: 1; }
.hero-art svg { position: absolute; right: 0; bottom: 0; width: 100%; height: auto; color: var(--blue); }

/* definitions */
.defs .lined { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(72px, 9vw, 124px); }
.defs .dot { top: calc(clamp(56px, 7vw, 96px) + 10px); }
.register { max-width: 980px; }
.def { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); padding: clamp(28px, 3.4vw, 44px) 0; border-top: 1px solid var(--hairline); align-items: baseline; }
.def:first-child { padding-top: 0; border-top: 0; }
.def:last-child { border-bottom: 1px solid var(--hairline); }
.def .term { font-family: var(--serif); font-weight: 500; color: var(--ink); font-size: clamp(24px, 2.3vw, 32px); line-height: 1.2; text-wrap: balance; }
.def .body { font-size: clamp(16.5px, 1.3vw, 18.5px); line-height: 1.66; max-width: 52ch; color: var(--body); }

/* bands */
section { position: relative; }
.band-lav { background: var(--lavender); --bg: var(--lavender); }
.cta .lined { padding-top: clamp(52px, 6.5vw, 88px); padding-bottom: clamp(52px, 6.5vw, 88px); display: flex; align-items: center; gap: clamp(32px, 5vw, 80px); flex-wrap: wrap; }
.cta h2 { font-size: clamp(28px, 3.2vw, 42px); max-width: 18ch; }
.cta .btn { margin-left: auto; flex: none; }

/* footer */
footer { position: relative; }
footer .lined { padding-top: clamp(72px, 9vw, 120px); padding-bottom: clamp(40px, 5vw, 64px); }
.froot { position: absolute; left: 8px; top: 0; width: calc(var(--rail-gap) - 8px + 15px); height: calc(clamp(72px, 9vw, 120px) - 26px); border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); border-bottom-left-radius: 30px; }
.fdot { position: absolute; left: calc(var(--rail-gap) + 15px); top: calc(clamp(72px, 9vw, 120px) - 26px); transform: translate(-50%, -50%); width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }
.fbar { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; row-gap: 28px; }
.fbar .lockup svg { width: 42px; height: 43px; }
.fbar .tag { margin-left: auto; font-size: 15px; color: var(--muted); }
.fmeta { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--hairline); display: flex; gap: 24px; flex-wrap: wrap; justify-content: space-between; font-size: 13px; color: var(--muted); }
.fmeta a { color: inherit; text-decoration: none; }
.fmeta a:hover { color: var(--blue); }

/* responsive */
@media (max-width: 900px) {
  .phead .lined { padding-bottom: 0; }
  .hero-art { position: static; width: auto; margin-top: 56px; margin-right: calc(-1 * clamp(20px, 4.5vw, 56px)); }
  .hero-art svg { position: static; width: 100%; height: auto; }
}
@media (max-width: 760px) { .cta .btn { margin-left: 0; } }
@media (max-width: 680px) { .def { grid-template-columns: 1fr; gap: 10px; } }
@media (max-width: 560px) {
  .phead h1 { font-size: clamp(30px, 8.4vw, 36px); }
  .fbar .tag { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn .ar, .btn, nav.main .cta { transition: none; }
}
@media (forced-colors: active) {
  .lockup .bar { background: CanvasText; }
}