/* Obby Studio. plain CSS, no build step. tokens first, then pages top to bottom. */

@font-face {
  font-family: "Geist";
  src: url("fonts/geist-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* dark, always. that's the look */
  --bg: #0a0a0c;
  --bg-tile: #151518;
  --ink: #f5f5f7;
  --ink-2: #a1a1a6;
  --ink-3: #86868b;
  --rule: #2c2c30;
  --link: #2997ff;
  --link-hover: #5cb0ff;
  --nav-bg: rgb(22 22 25 / 0.8);

  /* each project gets its own ground, the way each product does on apple.com */
  --fl-bg: #0b1426;
  --fl-accent: #d88a4a;
  --fl-rule: #2a3a55;
  --df-bg: #1c1409;
  --df-accent: #f0a640;
  --gm-bg: #0c1a15;
  --gm-accent: #5cc8a0;
  --oa-bg: #1a1020;
  --oa-accent: #c79bea;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Geist", system-ui, sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Geist", system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --page: 980px;
  --gutter: max(var(--space-4), calc((100vw - var(--page)) / 2));
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--ink-3) var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.47 var(--font-text);
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
  accent-color: var(--link);
}

::selection { background: var(--link); color: #fff; }

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, p, ul, ol, blockquote, figure { margin: 0; }

h1, h2, h3 {
  font-family: var(--font);
  font-weight: 600;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}

p { text-wrap: pretty; }

a {
  color: var(--link);
  text-decoration: none;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--link-hover); text-decoration: underline; }
a:active { opacity: 0.7; }
:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 20;
  padding: var(--space-2) var(--space-4);
  background: var(--ink);
  color: var(--bg);
  border-radius: 8px;
}
.skip:focus { top: var(--space-2); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* chevron link, the apple "Learn more >" */
.more {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  min-height: 44px;
  font-size: 19px;
  letter-spacing: -0.012em;
}
.more::after {
  content: "";
  width: 0.42em;
  height: 0.42em;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-0.08em, 0.08em);
  transition: transform 180ms var(--ease-out);
}
.more:hover { text-decoration: underline; }
.more:hover::after { transform: rotate(45deg) translate(0.06em, -0.06em); }

.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: var(--space-6);
  margin-top: var(--space-3);
  padding: 0;
  list-style: none;
}

/* things i haven't decided yet. meant to be obvious */
.placeholder {
  color: var(--ink-2);
  font-style: italic;
  outline: 1px dashed var(--ink-3);
  outline-offset: 2px;
  border-radius: 2px;
  padding: 0 0.2em;
}

/* status line: a dot and a word, never the dot alone */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 17px;
  font-weight: 500;
  color: var(--status, var(--ink-2));
}
.status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.num { font-variant-numeric: tabular-nums; }

/* ---------- global nav ---------- */

.globalnav {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--rule);
}
.globalnav nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: var(--page);
  min-height: 44px;
  margin: 0 auto;
  padding: 0 var(--space-4);
  font-size: 12px;
  letter-spacing: -0.01em;
}
.globalnav ul {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-4), 5vw, var(--space-8));
  margin: 0;
  padding: 0;
  list-style: none;
}
.globalnav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  opacity: 0.8;
  transition: opacity 150ms ease-out;
}
.globalnav a:hover { opacity: 1; text-decoration: none; }
.globalnav a[aria-current="page"] { opacity: 1; }
.globalnav .wordmark { font-weight: 600; font-size: 14px; opacity: 1; }

/* ---------- sticky local nav (product pages) ---------- */

.localnav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--rule);
}
.localnav nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: var(--page);
  min-height: 52px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}
.localnav .title { font: 600 21px/1 var(--font); letter-spacing: 0.011em; color: var(--ink); }
.localnav ul { display: flex; gap: var(--space-5); margin: 0; padding: 0; list-style: none; font-size: 12px; }
.localnav ul a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); }
.localnav ul a:hover { color: var(--ink); text-decoration: none; }

/* ---------- home: intro ---------- */

.intro {
  display: grid;
  align-content: center;
  min-height: min(75svh, 760px);
  padding: var(--space-8) var(--space-4) var(--space-9);
  text-align: center;
}
.intro h1 {
  font-size: clamp(48px, 9vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.intro .lede {
  margin-top: var(--space-4);
  font: 500 clamp(21px, 3vw, 28px)/1.2 var(--font);
  letter-spacing: -0.01em;
}
.intro .sub {
  margin-top: var(--space-2);
  color: var(--ink-2);
  font-size: clamp(17px, 2vw, 21px);
}

/* ---------- product tiles ---------- */

.tile {
  background: var(--tile-bg, var(--bg-tile));
  text-align: center;
  padding: var(--space-8) var(--space-4) var(--space-9);
  overflow: hidden;
}
.tile h2,
.tile h3 {
  font-size: clamp(40px, 7vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.tile .tagline {
  max-width: 36ch;
  margin: var(--space-3) auto 0;
  font: 400 clamp(19px, 2.4vw, 24px)/1.25 var(--font);
  letter-spacing: -0.01em;
}
.tile .meta {
  margin-top: var(--space-4);
  color: var(--ink-3);
  font-size: 14px;
  letter-spacing: -0.01em;
}
.tile .status { margin-top: var(--space-5); }

.tile--firstlight { --tile-bg: var(--fl-bg); --status: var(--fl-accent); padding-block: var(--space-9) var(--space-10); }
.tile--firstlight h2 { font-size: clamp(56px, 12vw, 128px); letter-spacing: -0.045em; }
.tile--defalt { --tile-bg: var(--df-bg); --status: var(--df-accent); }
.tile--garagemaster { --tile-bg: var(--gm-bg); --status: var(--gm-accent); }
.tile--openanvil { --tile-bg: var(--oa-bg); --status: var(--oa-accent); }

.tile .shot {
  width: 100%;
  max-width: 880px;
  margin: var(--space-7) auto 0;
  border-radius: 12px;
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.6);
}

.lineup {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
}
.lineup .tile--defalt { grid-column: 1 / -1; }
.lineup .tile { border-radius: 0; }
.lineup-head {
  padding: var(--space-9) var(--space-4) var(--space-6);
  text-align: center;
}
.lineup-head h2 { font-size: clamp(32px, 5vw, 48px); letter-spacing: -0.028em; line-height: 1.08; }
.lineup-head p { margin-top: var(--space-2); color: var(--ink-2); font-size: 19px; }

@media (max-width: 734px) {
  .lineup { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- milestone track (real roadmap, not decoration) ---------- */

.track {
  --done: 8;
  --total: 10;
  position: relative;
  max-width: 640px;
  margin: var(--space-8) auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(var(--total), minmax(0, 1fr));
}
.track::before,
.track::after {
  content: "";
  position: absolute;
  top: 5px;
  left: calc(100% / var(--total) / 2);
  height: 2px;
  border-radius: 1px;
}
.track::before { right: calc(100% / var(--total) / 2); background: var(--fl-rule); }
.track::after {
  width: calc((100% - 100% / var(--total)) * var(--done) / (var(--total) - 1));
  background: var(--fl-accent);
  transform-origin: left center;
}
.track li {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--ink-3);
}
.track li::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--fl-bg);
  border: 2px solid var(--fl-rule);
}
.track li.done::before { background: var(--fl-accent); border-color: var(--fl-accent); }
.track li.now::before { border-color: var(--fl-accent); }
.track li.now { color: var(--ink); font-weight: 500; }
.track-caption { margin-top: var(--space-4); color: var(--ink-3); font-size: 14px; }

/* ---------- product page sections ---------- */

.hero {
  padding: var(--space-9) var(--space-4) var(--space-10);
  text-align: center;
  background: var(--fl-bg);
}
.hero h1 {
  font-size: clamp(64px, 15vw, 160px);
  line-height: 0.95;
  letter-spacing: -0.05em;
}
.hero .tagline {
  max-width: 30ch;
  margin: var(--space-5) auto 0;
  font: 500 clamp(21px, 3vw, 32px)/1.2 var(--font);
  letter-spacing: -0.012em;
}
.hero .status { --status: var(--fl-accent); margin-top: var(--space-6); }
.hero .when { margin-top: var(--space-2); color: var(--ink-2); }

.chapter {
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--space-10) var(--space-4) var(--space-9);
  border-top: 1px solid var(--rule);
}
.hero + .chapter,
.page-head + .chapter { border-top: 0; }
.chapter > h2 {
  max-width: 16ch;
  font-size: clamp(40px, 6.4vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}
.chapter .prose {
  max-width: 62ch;
  margin-top: var(--space-6);
  color: var(--ink-2);
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.5;
}
.chapter .prose p + p { margin-top: var(--space-4); }
.chapter .prose strong { color: var(--ink); font-weight: 600; }

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--space-6) var(--space-7);
  margin-top: var(--space-8);
  padding: 0;
  list-style: none;
}
.facts li { border-top: 1px solid var(--rule); padding-top: var(--space-4); color: var(--ink-2); }
.facts strong { display: block; margin-bottom: var(--space-1); color: var(--ink); font: 600 21px/1.2 var(--font); letter-spacing: -0.012em; }

/* the two-layer diagram. real architecture, from the Firstlight readme */
.layers {
  display: grid;
  gap: 0;
  max-width: 720px;
  margin-top: var(--space-8);
  padding: 0;
  list-style: none;
  text-align: center;
}
.layer {
  padding: var(--space-6) var(--space-5);
  border-radius: 18px;
  background: var(--bg-tile);
  border: 1px solid var(--rule);
}
.layer strong { display: block; font: 600 24px/1.2 var(--font); letter-spacing: -0.015em; }
.layer span { display: block; margin-top: var(--space-2); color: var(--ink-2); font-size: 15px; }
.layer--sim { background: var(--fl-bg); border-color: var(--fl-rule); }
.door {
  justify-self: center;
  position: relative;
  padding: var(--space-4) var(--space-5);
  font: 500 15px/1.3 var(--font);
  color: var(--fl-accent);
}
.door::before {
  content: "";
  position: absolute;
  inset: 0 50%;
  border-left: 2px solid var(--fl-accent);
  z-index: -1;
}
.door code {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--fl-accent);
  font: 500 14px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0;
}

.ladder {
  max-width: 720px;
  margin-top: var(--space-8);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}
.ladder li {
  display: grid;
  grid-template-columns: 4.5em minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--rule);
}
.ladder .m { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 15px; }
.ladder .what { color: var(--ink); }
.ladder .status { font-size: 14px; --status: var(--ink-3); }
.ladder .done .status { --status: var(--ink-2); }
.ladder .now .status { --status: var(--fl-accent); }
.ladder .now .what { font-weight: 600; }

.script {
  max-width: 62ch;
  margin-top: var(--space-6);
  padding-left: 1.4em;
  color: var(--ink-2);
  font-size: 19px;
}
.script li { padding-left: var(--space-2); }
.script li + li { margin-top: var(--space-2); }
.script li::marker { color: var(--ink-3); font-variant-numeric: tabular-nums; }

.aside-line { margin-top: var(--space-6); color: var(--ink-3); font-size: 14px; }

.shot-slot {
  max-width: 62ch;
  margin-top: var(--space-5);
}

blockquote {
  max-width: 24ch;
  margin-top: var(--space-6);
  font: 500 clamp(28px, 4vw, 40px)/1.15 var(--font);
  letter-spacing: -0.025em;
  color: var(--ink);
}
blockquote p::before { content: "\201C"; }
blockquote p::after { content: "\201D"; }

/* concept art. labelled as concept art and nothing else */
.concept { margin: 0; }
.concept img { width: 100%; border-radius: 12px; }
.concept a { display: block; border-radius: 12px; }
.concept figcaption { margin-top: var(--space-2); color: var(--ink-3); font-size: 14px; }
.concept--tile { max-width: 880px; margin: var(--space-7) auto 0; }
.concept--tile img { box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.6); }
.concept-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
  margin-top: var(--space-7);
}
.concept--wide { grid-column: 1 / -1; }
@media (max-width: 734px) {
  .concept-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- about ---------- */

.page-head {
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--space-9) var(--space-4) var(--space-8);
}
.page-head h1 {
  max-width: 14ch;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 1;
  letter-spacing: -0.04em;
}
.page-head .lede {
  max-width: 34ch;
  margin-top: var(--space-5);
  font: 500 clamp(21px, 2.6vw, 28px)/1.25 var(--font);
  letter-spacing: -0.012em;
  color: var(--ink-2);
}
.about-me {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
  margin-top: var(--space-6);
}
.about-me .prose { margin-top: 0; }
.portrait { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 18px; }
@media (max-width: 734px) {
  .about-me { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .portrait { max-width: 200px; }
}
.contact { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-5); padding: 0; list-style: none; }

/* ---------- legal pages ---------- */

.page-head .effective { margin-top: var(--space-4); color: var(--ink-3); font-size: 14px; }
.legal .page-head { padding-bottom: var(--space-6); }
.legal-section {
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
  border-top: 1px solid var(--rule);
}
.legal-section:last-of-type { padding-bottom: var(--space-9); }
.legal-section h2 { font-size: 24px; line-height: 1.2; letter-spacing: -0.015em; }
.legal-section p,
.legal-section ul { max-width: 68ch; margin-top: var(--space-3); color: var(--ink-2); }
.legal-section ul { padding-left: 1.2em; }
.legal-section li + li { margin-top: var(--space-1); }
.legal-section a { text-decoration: underline; }

/* ---------- playtest form ---------- */

.pt-hero {
  padding: var(--space-9) var(--space-4) var(--space-8);
  background: var(--fl-bg);
  text-align: center;
}
.pt-hero h1 { font-size: clamp(48px, 9vw, 96px); line-height: 1; letter-spacing: -0.045em; }
.pt-hero .tagline {
  max-width: 30ch;
  margin: var(--space-4) auto 0;
  font: 500 clamp(21px, 2.8vw, 28px)/1.25 var(--font);
  letter-spacing: -0.012em;
}
.pt-hero .status { --status: var(--fl-accent); margin-top: var(--space-5); }
.pt-where { margin-top: var(--space-1); }

.pt-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-8);
  align-items: start;
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--space-8) var(--space-4) var(--space-9);
}
.pt-info { position: sticky; top: var(--space-6); }
.pt-info h2 { font-size: 28px; letter-spacing: -0.02em; }
.pt-info h3 { margin-top: var(--space-6); font-size: 17px; }
.pt-steps { margin: var(--space-4) 0 0; padding: 0; list-style: none; counter-reset: step; }
.pt-steps li {
  position: relative;
  padding: var(--space-4) 0 var(--space-4) 44px;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
  counter-increment: step;
}
.pt-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: var(--space-4);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--fl-bg);
  border: 1px solid var(--fl-rule);
  color: var(--fl-accent);
  font: 600 14px/1 var(--font);
  font-variant-numeric: tabular-nums;
}
.pt-steps strong { color: var(--ink); font-weight: 600; }
.pt-needs { margin: var(--space-3) 0 0; padding-left: 1.2em; color: var(--ink-2); }
.pt-needs li + li { margin-top: var(--space-1); }
.pt-fine { margin-top: var(--space-6); color: var(--ink-3); font-size: 14px; }
.pt-fine a { text-decoration: underline; }

.apply {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: 28px;
  background: var(--bg-tile);
  border: 1px solid var(--rule);
}
.apply-group {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-5);
  border: 0;
  border-radius: 20px;
  background: var(--bg);
}
.apply-group legend {
  float: left;
  width: 100%;
  margin-bottom: var(--space-1);
  padding: 0;
  font: 600 19px/1.2 var(--font);
  letter-spacing: -0.012em;
  color: var(--ink);
}
.apply-group legend + * { clear: both; }
.field { display: grid; gap: 6px; }
.field label { color: var(--ink-2); font-size: 14px; font-weight: 500; }
.opt { margin-left: var(--space-1); color: var(--ink-3); font-weight: 400; font-size: 13px; }
.apply-group legend .opt { font-family: var(--font-text); font-size: 13px; letter-spacing: -0.01em; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.hint { color: var(--ink-3); font-size: 13px; }

.apply input[type="text"],
.apply input[type="email"],
.apply textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) 14px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--bg-tile);
  color: var(--ink);
  font: 400 17px/1.35 var(--font-text);
  letter-spacing: -0.022em;
  transition: border-color 150ms ease-out, background-color 150ms ease-out, box-shadow 150ms ease-out;
}
.apply textarea { resize: vertical; }
.apply input::placeholder, .apply textarea::placeholder { color: var(--ink-3); opacity: 0.7; }
.apply input:hover, .apply textarea:hover { border-color: #3d3d42; }
.apply input:focus, .apply textarea:focus {
  outline: none;
  border-color: var(--link);
  background: var(--bg);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--link) 22%, transparent);
}
.apply input:user-invalid, .apply textarea:user-invalid { border-color: #ff6961; }

.check { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--ink-2); font-size: 15px; line-height: 1.4; cursor: pointer; }
.check a { text-decoration: underline; }
.check input {
  appearance: none;
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1.5px solid var(--ink-3);
  border-radius: 7px;
  background: var(--bg-tile);
  cursor: pointer;
  transition: background-color 120ms ease-out, border-color 120ms ease-out;
}
.check input::after {
  content: "";
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg) scale(0);
  transition: transform 120ms ease-out;
}
.check input:checked { background: var(--link); border-color: var(--link); }
.check input:checked::after { transform: translateY(-1px) rotate(45deg) scale(1); }
.check input:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }

.cf-turnstile { min-height: 65px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.apply button {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 14px;
  background: var(--link);
  color: #fff;
  font: 600 17px/1 var(--font-text);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background-color 150ms ease-out, transform 100ms ease-out;
}
.apply button:hover { background: var(--link-hover); }
.apply button:active { transform: scale(0.99); }
.apply button:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 834px) {
  .pt-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); padding-top: var(--space-7); }
  .pt-info { position: static; }
}
@media (max-width: 480px) {
  .apply { padding: var(--space-2); border-radius: 22px; }
  .apply-group { padding: var(--space-4); }
  .field-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- admin (served by the worker) ---------- */

.admin-badge {
  margin-left: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: 6px;
  background: var(--bg-tile);
  border: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 500;
  vertical-align: 1px;
}
.admin-main { max-width: var(--page); margin: 0 auto; padding: var(--space-8) var(--space-4) var(--space-9); }
.admin-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-4); }
.admin-head h1 { font-size: clamp(36px, 5vw, 48px); letter-spacing: -0.035em; line-height: 1.05; }
.admin-sub { margin-top: var(--space-2); color: var(--ink-3); font-size: 14px; }

.admin-btn {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--space-4);
  border: 1px solid var(--rule);
  border-radius: 980px;
  background: var(--bg-tile);
  color: var(--ink);
  font: 500 14px/1 var(--font-text);
  cursor: pointer;
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
a.admin-btn:hover, button.admin-btn:hover { background: #1f1f23; border-color: #3d3d42; color: var(--ink); text-decoration: none; }

.admin-tabs {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-6);
  padding: var(--space-1);
  border-radius: 12px;
  background: var(--bg-tile);
  border: 1px solid var(--rule);
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-tabs a {
  flex: 1 0 auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: 0 var(--space-4);
  border-radius: 9px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.admin-tabs a:hover { color: var(--ink); text-decoration: none; }
.admin-tabs a[aria-current="page"] { background: #2a2a2f; color: var(--ink); }
.admin-tabs .num { color: var(--ink-3); font-size: 13px; }
.admin-tabs a[aria-current="page"] .num { color: var(--ink-2); }

.app-list { display: grid; gap: var(--space-2); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.app { border: 1px solid var(--rule); border-radius: 16px; background: var(--bg-tile); scroll-margin-top: var(--space-6); }
.app details[open] { padding-bottom: var(--space-2); }
.app summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto 16px;
  align-items: center;
  gap: var(--space-5);
  min-height: 64px;
  padding: var(--space-3) var(--space-5);
  list-style: none;
  cursor: pointer;
  border-radius: 16px;
}
.app summary::-webkit-details-marker { display: none; }
.app summary:hover { background: #18181c; }
.app summary:focus-visible { outline-offset: -2px; }
.app-who { display: grid; min-width: 0; }
.app-name { color: var(--ink); font-weight: 600; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-contact { color: var(--ink-3); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-when { color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.app .status { font-size: 14px; }
.app-chev { width: 8px; height: 8px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg) translate(-2px, -2px); transition: transform 180ms var(--ease-out); }
.app details[open] .app-chev { transform: rotate(225deg) translate(-2px, -2px); }

.app-body { display: grid; gap: var(--space-5); padding: var(--space-3) var(--space-5) var(--space-4); border-top: 1px solid var(--rule); margin: 0 var(--space-2); padding-inline: var(--space-3); padding-top: var(--space-5); }
.app-specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.app-specs div { padding: var(--space-3); border-radius: 10px; background: var(--bg); }
.app-specs dt { color: var(--ink-3); font-size: 12px; }
.app-specs dd { margin: 2px 0 0; color: var(--ink); font-size: 15px; overflow-wrap: anywhere; }
.app-nospecs { color: var(--ink-3); font-size: 14px; }
.app-answer h3 { color: var(--ink-3); font-size: 13px; font-weight: 500; }
.app-answer p { max-width: 68ch; margin-top: var(--space-1); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }

.app-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--rule); }
.app-actions form { display: contents; }
.app-seg { display: inline-flex !important; gap: 2px; padding: 3px; border-radius: 980px; background: var(--bg); border: 1px solid var(--rule); margin-right: auto; }
.app-seg button {
  min-height: 32px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: 980px;
  background: transparent;
  color: var(--ink-2);
  font: 500 13px/1 var(--font-text);
  cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.app-seg button:hover { color: var(--ink); }
.app-seg button[aria-pressed="true"] { background: var(--status); color: #0a0a0c; }
.app-seg button[value="new"] { --status: var(--link); }
.app-seg button[value="shortlisted"] { --status: var(--fl-accent); }
.app-seg button[value="invited"] { --status: var(--gm-accent); }
.app-seg button[value="declined"] { --status: var(--ink-3); }
.app-delete { color: #ff6961; }
button.app-delete:hover { background: #2a1414; border-color: #5a2a2a; color: #ff8a84; }

.app-status-new { --status: var(--link); }
.app-status-shortlisted { --status: var(--fl-accent); }
.app-status-invited { --status: var(--gm-accent); }
.app-status-declined { --status: var(--ink-3); }

.admin-empty { margin-top: var(--space-5); padding: var(--space-8) var(--space-5); border: 1px dashed var(--rule); border-radius: 16px; text-align: center; }
.admin-empty h2 { font-size: 21px; }
.admin-empty p { margin-top: var(--space-2); color: var(--ink-3); }

@media (max-width: 734px) {
  .app summary { grid-template-columns: minmax(0, 1fr) auto 16px; gap: var(--space-3); padding-inline: var(--space-4); }
  .app-when { display: none; }
  .app-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-seg { width: 100%; margin-right: 0; }
  .app-seg button { flex: 1; }
}

/* ---------- footer ---------- */

.footer {
  background: var(--bg-tile);
  color: var(--ink-3);
  font-size: 12px;
  letter-spacing: -0.01em;
}
.footer .inner {
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-6);
}
.footer p + p { margin-top: var(--space-2); }
.footer .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
}
.footer ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; }
.footer a { color: var(--ink-2); display: inline-flex; align-items: center; min-height: 32px; }
.footer a:hover { color: var(--ink); }
.footer .legal-links { margin-top: var(--space-2); }
.footer .legal-links a[aria-current="page"] { color: var(--ink); }

/* ---------- motion ----------
   one moment: Firstlight's name comes into focus as it arrives, and the roadmap
   line draws to where the project actually is. everything is visible without it. */

@media (prefers-reduced-motion: no-preference) {
  .hero h1 { animation: focus-in 1.1s var(--ease-out) both; }
  .hero .tagline { animation: rise 1s var(--ease-out) 0.15s both; }

  @supports (animation-timeline: view()) {
    .tile--firstlight h2 {
      animation: focus-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
    .track::after {
      animation: draw linear both;
      animation-timeline: view();
      animation-range: entry 40% cover 55%;
    }
  }
}

@keyframes focus-in {
  from { opacity: 0.5; filter: blur(6px); transform: scale(1.04); }
  to { opacity: 1; filter: blur(0); transform: scale(1); }
}
@keyframes rise {
  from { opacity: 0.6; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (max-width: 734px) {
  .globalnav nav { flex-wrap: wrap; column-gap: var(--space-3); }
  .globalnav ul { gap: var(--space-4); }
  .localnav ul { gap: var(--space-4); }
  .track li span { font-size: 11px; }
  .ladder li { grid-template-columns: 3.5em minmax(0, 1fr); }
  .ladder .status { grid-column: 2; }
}