/* TuneRover
   Deep space. Black is true black. Gold comes from the record; small details
   take the colors real stars have, from hot blue to cool red.
   Space Grotesk carries the words, Oxanium the labels and numbers. */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(fonts/space-grotesk-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(fonts/space-grotesk-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oxanium';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/oxanium-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Oxanium';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/oxanium-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Light: observatory paper. Dark: space. The toggle in the nav sets data-theme;
   without it the page follows the system. */
:root {
  color-scheme: light;
  --mist: #F2EFE8;
  --deck: #FAF8F3;
  --ink: #0B0B0B;
  --ink-soft: #5B564E;
  --line: #CDC6B8;
  --sea: #8A6420;
  --sea-soft: #EAE0C8;
  --note: #B8862E;
  --note-soft: #EFE3C4;
  --hull: #FAF8F3;
  --livery: #B2412F;
  --livery-soft: #F1D9D2;
  --good: #2C4BB0;
  --check: #8A6420;
  --bad: #B2412F;
  --gold: #A67C2E;
  --gold-hi: #D9B260;
  --on-gold: #0B0B0B;
  --star-o: #6F8BEA; --star-a: #0B0B0B; --star-g: #B8862E; --star-k: #C8742E; --star-m: #B2412F;
  --font: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --tech: 'Oxanium', 'Space Grotesk', ui-monospace, monospace;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --settle: cubic-bezier(0.34, 1.4, 0.64, 1);
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235B564E' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E");
  --boat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23A67C2E'/%3E%3Ccircle cx='12' cy='12' r='3.2' fill='%230B0B0B'/%3E%3Ccircle cx='18.2' cy='6.4' r='2' fill='%23FAF8F3' stroke='%230B0B0B' stroke-width='.8'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --mist: #000000;
    --deck: #0A0A0A;
    --ink: #F2EEE6;
    --ink-soft: #9C978E;
    --line: #262626;
    --sea: #E9C979;
    --sea-soft: #231D10;
    --note: #FFD27D;
    --note-soft: #2B2412;
    --hull: #0A0A0A;
    --livery: #FF6B5A;
    --livery-soft: #2E1411;
    --good: #9DB4FF;
    --check: #FFD27D;
    --bad: #FF6B5A;
    --gold: #E9C979;
    --gold-hi: #FBE7B0;
    --on-gold: #000000;
    --star-o: #9DB4FF; --star-a: #FFFFFF; --star-g: #FFD27D; --star-k: #FFA75A; --star-m: #FF6B5A;
    --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239C978E' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E");
    --boat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23E9C979'/%3E%3Ccircle cx='12' cy='12' r='3.2' fill='%23000'/%3E%3Ccircle cx='18.2' cy='6.4' r='2' fill='%23FFF' stroke='%23000' stroke-width='.8'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --mist: #000000;
  --deck: #0A0A0A;
  --ink: #F2EEE6;
  --ink-soft: #9C978E;
  --line: #262626;
  --sea: #E9C979;
  --sea-soft: #231D10;
  --note: #FFD27D;
  --note-soft: #2B2412;
  --hull: #0A0A0A;
  --livery: #FF6B5A;
  --livery-soft: #2E1411;
  --good: #9DB4FF;
  --check: #FFD27D;
  --bad: #FF6B5A;
  --gold: #E9C979;
  --gold-hi: #FBE7B0;
  --on-gold: #000000;
  --star-o: #9DB4FF; --star-a: #FFFFFF; --star-g: #FFD27D; --star-k: #FFA75A; --star-m: #FF6B5A;
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239C978E' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E");
  --boat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23E9C979'/%3E%3Ccircle cx='12' cy='12' r='3.2' fill='%23000'/%3E%3Ccircle cx='18.2' cy='6.4' r='2' fill='%23FFF' stroke='%23000' stroke-width='.8'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--mist);
  color: var(--ink);
  font: 400 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
strong, b, th { font-weight: 500; }
h1, h2, h3 { font-weight: 400; }
h1, h2, .summary, .t-place, .t-head strong, .mark { font-family: var(--display); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px 140px; }
section[id], main[id] { scroll-margin-top: 84px; }

/* ---------- buttons: press sinks, nothing floats ---------- */
button, .btn {
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  height: 46px;
  padding: 0 20px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), translate 0.12s var(--ease);
}
.primary { background: var(--ink); color: var(--deck); }
.primary:hover:not(:disabled) { background: var(--sea); color: #fff; }
button:active:not(:disabled), .btn:active { translate: 0 1px; }
.secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.secondary:hover:not(:disabled) { border-color: var(--ink-soft); }
.ghost { height: 36px; padding: 0 14px; background: transparent; color: var(--ink-soft); border-color: var(--line); font-size: 14px; }
.ghost:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-soft); }
button:disabled { opacity: 0.4; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--sea); outline-offset: 3px; }

.icon-btn { width: 40px; height: 40px; padding: 0; background: transparent; color: var(--ink-soft); border-color: var(--line); }
.icon-btn:hover { color: var(--ink); }
.icon-btn svg { transition: rotate 0.6s var(--ease); }
.icon-btn:hover svg { rotate: 60deg; }

.link-btn {
  height: auto;
  padding: 2px 0;
  background: none;
  border: 0;
  color: var(--ink-soft);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line);
}
.link-btn:hover { color: var(--ink); text-decoration-color: currentColor; }

/* ---------- nav: solid once you scroll, no glass ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s, border-color 0.3s;
}
.nav.scrolled { background: var(--mist); border-bottom-color: var(--line); }
.nav-in { max-width: 1120px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; justify-content: space-between; }
.mark { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.mark img { border-radius: 7px; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { color: var(--ink-soft); text-decoration: none; font-size: 15px; transition: color 0.2s; }
.nav-links a:hover { color: var(--ink); }
.nav-links .nav-cta { padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); transition: border-color 0.25s, background-color 0.25s, color 0.25s; }
.nav-links .nav-cta:hover { background: var(--ink); border-color: var(--ink); color: var(--deck); }

/* ---------- hero: the headline walks across, the ticket answers the form ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  grid-template-areas: "text ticket" "intake intake";
  column-gap: 64px;
  row-gap: 56px;
  align-items: center;
  padding-top: 56px;
}
.hero-text { grid-area: text; }
.intake { grid-area: intake; }
.ticket-wrap { grid-area: ticket; }

.headline {
  margin: 0 0 28px;
  font-size: clamp(52px, 7.8vw, 104px);
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: -0.05em;
}
.ln { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.08em; }
.ln:nth-child(2) { padding-left: 0.9em; }
.ln:nth-child(3) { padding-left: 1.8em; }
.ln > span { display: inline-block; animation: board 1.05s var(--ease) both; }
.ln:nth-child(2) > span { animation-delay: 0.12s; }
.ln:nth-child(3) > span { animation-delay: 0.24s; }
.lede { margin: 0; max-width: 42ch; color: var(--ink-soft); font-size: 17px; line-height: 1.65; animation: rise 0.9s 0.45s var(--ease) both; }
@keyframes board { from { transform: translateY(104%); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* ---------- the ticket ---------- */
.ticket-wrap {
  position: relative;
  max-width: 470px;
  justify-self: end;
  width: 100%;
  perspective: 1300px;
  animation: dockIn 1.1s 0.35s var(--ease) both;
}
@keyframes dockIn { from { opacity: 0; transform: translateX(48px) rotate(2.5deg); } }
.ticket-wrap::before {
  content: "";
  position: absolute;
  left: 10%; right: 10%; bottom: -22px;
  height: 34px;
  border-radius: 50%;
  background: rgb(10 22 44 / 0.28);
  filter: blur(20px);
  pointer-events: none;
}
.tilt {
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.45s var(--ease);
}
.ticket { position: relative; aspect-ratio: 1.68; transform-style: preserve-3d; transition: transform 0.95s cubic-bezier(0.65, 0, 0.35, 1); }
.ticket-wrap[data-side="back"] .ticket { transform: rotateY(180deg); }

.face {
  --t-ink: #13284A;
  --t-soft: #5A6476;
  --t-sea: #1F6FD1;
  --cut:
    radial-gradient(circle 11px at calc(100% - 80px) 0, #0000 96%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle 11px at calc(100% - 80px) 100%, #0000 96%, #000) bottom / 100% 51% no-repeat;
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 80px;
  border-radius: 16px;
  overflow: hidden;
  color: var(--t-ink);
  /* Security print: two crossing waves, like the one on the icon. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='28'%3E%3Cpath d='M0 7Q20 1 40 7T80 7T120 7T160 7M0 21Q20 27 40 21T80 21T120 21T160 21' fill='none' stroke='%2313284A' stroke-opacity='.07'/%3E%3C/svg%3E") 0 0 / 160px 28px,
    var(--hull);
  -webkit-mask: var(--cut);
  mask: var(--cut);
  backface-visibility: hidden;
}
.face.back { transform: rotateY(180deg); }
/* Light catches the paper where the pointer is. */
.face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(40% 60% at calc(var(--mx, 50) * 1%) calc(var(--my, 50) * 1%), rgb(255 255 255 / 0.55), transparent 70%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 0.4s;
}
.ticket-wrap:hover .face::after { opacity: 1; }

.t-main { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 22px 24px 20px; }
.t-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--t-soft); font-size: 13px; }
.t-head strong { color: var(--t-ink); font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.t-route { display: grid; grid-template-columns: 1fr 1fr; row-gap: 12px; }
.t-route > div { grid-row: 2; min-width: 0; }
.t-route > div:last-child { text-align: right; }
.t-label { display: block; margin-bottom: 4px; color: var(--t-soft); font-size: 12px; }
.t-place { display: block; font-size: clamp(22px, 2.4vw, 31px); font-weight: 400; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
/* A new source rolls in like a departure board. */
.t-place.flap { animation: flap 0.55s var(--ease); transform-origin: 50% 60%; }
@keyframes flap { 0% { opacity: 0; transform: rotateX(-80deg); } 60% { opacity: 1; } }
/* The route runs the full width: hollow ring where you leave, filled dot where you arrive.
   Same marks as How it works below. */
.t-line {
  grid-row: 1;
  grid-column: 1 / -1;
  position: relative;
  height: 12px;
  background:
    radial-gradient(circle at 6px 50%, #0000 3.3px, var(--t-ink) 3.6px 5.1px, #0000 5.4px),
    radial-gradient(circle at calc(100% - 6px) 50%, var(--t-ink) 5px, #0000 5.4px);
}
.t-line::before { content: ""; position: absolute; left: 15px; right: 15px; top: 5.25px; border-top: 1.5px dashed color-mix(in srgb, var(--t-sea) 60%, transparent); }
.t-dot {
  position: absolute;
  top: 1px;
  left: calc(100% - 28px);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #F1BE48;
  box-shadow: 0 0 0 3px rgb(241 190 72 / 0.3);
}
/* The note sails over once on load, and again after each flip. */
.ticket-wrap[data-side="front"] .front .t-dot,
.ticket-wrap[data-side="back"] .back .t-dot { animation: sail 1.6s 0.9s var(--ease) both; }
@keyframes sail { from { left: 18px; } to { left: calc(100% - 28px); } }
.t-foot { display: flex; justify-content: space-between; gap: 12px; color: var(--t-soft); font-size: 13px; }

.t-stub {
  position: relative;
  display: grid;
  place-items: center;
  border-left: 1.5px dashed rgb(19 40 74 / 0.3);
  overflow: hidden;
  /* Golden ticket. */
  background: linear-gradient(160deg, #F8E3A1 0%, #EDC45A 34%, #D7A23E 64%, #F2D486 100%);
  color: #13284A;
}
/* The gold catches the light once when the ticket docks, and again when you pick it up. */
.t-stub::before {
  content: "";
  position: absolute;
  inset: -10% -80%;
  background: linear-gradient(100deg, transparent 40%, rgb(255 255 255 / 0.75) 50%, transparent 60%);
  transform: translateX(120%);
  pointer-events: none;
  animation: glint 1.3s 1.6s var(--ease) backwards;
}
.ticket-wrap:hover .t-stub::before { animation: glintAgain 1.1s var(--ease) backwards; }
@keyframes glint { from { transform: translateX(-120%); } }
@keyframes glintAgain { from { transform: translateX(-120%); } }
/* Punched when the playlist arrives. */
.t-stub::after {
  content: "";
  position: absolute;
  top: 20px; left: 50%;
  width: 14px; height: 14px;
  margin-left: -9px;
  border-radius: 50%;
  background: var(--mist);
  box-shadow: inset 0 1.5px 2px rgb(0 0 0 / 0.35);
  scale: 0;
  transition: scale 0.4s var(--settle);
}
.ticket-wrap[data-state="arrived"] .t-stub::after { scale: 1; }
.t-stub span { writing-mode: vertical-rl; transform: rotate(180deg); margin-right: 6px; font-size: 13px; letter-spacing: 0.04em; }

/* ---------- intake ---------- */
.intake {
  padding: 26px 28px 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--deck);
  animation: rise 0.9s 0.6s var(--ease) both;
}

.dest { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin-top: 26px; }
.dest-label, .field-label { min-width: 2.2em; }
.go-row { display: flex; gap: 12px; align-items: center; margin-top: 24px; }
.go-row .primary { height: 52px; padding: 0 28px; }
/* Home keeps one honest line about privacy. Behind the rover has the rest. */
.trust { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
.trust a, .note a { color: var(--ink); text-underline-offset: 4px; }
/* How it works is for the first visit. */
body.returning #how { display: none; }
.footer-fine { margin-top: 110px; }
.dest-label { color: var(--ink-soft); font-size: 14px; }
.modes {
  --i: 0;
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.modes:has(#modeYTM[aria-pressed="true"]) { --i: 1; }
.modes:has(#modeSP[aria-pressed="true"]) { --i: 2; }
.modes:has(#modeAM[aria-pressed="true"]) { --i: 3; }
/* The pill sails to the side you picked. */
.modes::before {
  content: "";
  position: absolute;
  top: 3px; bottom: 3px; left: 3px;
  width: calc((100% - 6px) / 4);
  border-radius: 9px;
  background: var(--ink);
  transform: translateX(calc(var(--i) * 100%));
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.mode { position: relative; z-index: 1; height: 38px; padding: 0 18px; border: 0; background: transparent; color: var(--ink-soft); font-weight: 400; transition: color 0.4s var(--ease); }
.mode[aria-pressed="true"] { color: var(--deck); }
.mode:hover:not([aria-pressed="true"]):not(:disabled) { color: var(--ink); }

.field-label { display: block; margin-bottom: 8px; font-size: 14px; color: var(--ink-soft); }
.field { display: flex; gap: 10px; }
.field input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--mist);
  color: var(--ink);
  font: inherit;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.field input::placeholder { color: color-mix(in srgb, var(--ink-soft) 70%, transparent); }
.field input:focus { outline: none; border-color: var(--sea); background: var(--deck); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sea) 18%, transparent); }
.field .primary { height: 52px; padding: 0 24px; }
.alt-row { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 14px; }
.src-hint { margin: 10px 0 0; color: var(--ink-soft); font-size: 14px; animation: rise 0.35s var(--ease); }
.src-hint.warn { color: var(--check); }

/* The Apple Music note: honest, up front, only when Apple Music is picked. */
.note {
  margin: 16px 0 0;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--note) 55%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--note-soft) 55%, transparent);
  font-size: 15px;
  line-height: 1.6;
  animation: rise 0.4s var(--ease) both;
}
.note p { margin: 0; max-width: 75ch; }
.note p + p { margin-top: 8px; color: var(--ink-soft); }
.note strong { font-weight: 500; }
.note-actions { margin-top: 12px; }
.intake > .note:first-child { margin: 0 0 24px; }

/* Apple Music list: opened songs fade back, so you can see where you are. */
.links li.am-wrap { display: block; }
.am-list { margin: 6px 0 0; padding: 4px 0 0 30px; max-height: 360px; overflow: auto; columns: 2 280px; column-gap: 40px; }
.links .am-list li { display: list-item; break-inside: avoid; padding: 4px 0; color: var(--ink-soft); }
.links .am-list .sub { flex-basis: auto; font-size: 14px; }
.am-list li::marker { font-variant-numeric: tabular-nums; }
.am-list a { color: var(--ink); text-decoration: none; margin-right: 8px; }
.am-list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.am-list li.done a { color: var(--ink-soft); }
.am-list li.done::marker { content: "✓  "; color: var(--sea); }

/* Empty status lines take no room. */
.msg-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.msg-row:has(.msg:empty):has(#fix[hidden]) { display: none; }
.msg { flex: 1; margin: 0; color: var(--ink-soft); font-size: 15px; animation: rise 0.35s var(--ease); }
.msg.error { color: var(--bad); }

.resume {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-bottom: 22px; padding: 12px 14px 12px 18px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--mist);
  animation: rise 0.5s var(--ease) both;
}
.resume span { flex: 1; min-width: 200px; font-size: 15px; }

/* ---------- sections that step aside while you work ---------- */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.sec-head h2 { margin: 0; font-size: clamp(30px, 4vw, 42px); font-weight: 300; line-height: 1.1; letter-spacing: -0.03em; }
.sec-head p { margin: 0; max-width: 38ch; color: var(--ink-soft); }

.fold {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows 0.7s var(--ease), opacity 0.45s var(--ease), visibility 0s;
}
.fold-in { min-height: 0; overflow: hidden; padding-top: 120px; }
body:has(#work:not([hidden])) .fold:not(:target) {
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows 0.7s var(--ease), opacity 0.3s var(--ease), visibility 0s 0.7s;
}

/* How it works is a route: leave, stop, arrive. */
.route { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.route li { position: relative; padding-top: 36px; }
.route li::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: var(--mist);
}
.route li:nth-child(2)::before { top: 3px; left: 3px; width: 8px; height: 8px; border: 0; background: var(--ink); }
.route li:last-child::before { background: var(--ink); }
.route li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 6px; left: 24px; right: -26px;
  border-top: 1.5px dashed color-mix(in srgb, var(--sea) 55%, transparent);
}
.route h3 { margin: 0 0 8px; font-size: 19px; letter-spacing: -0.01em; }
.route p { margin: 0; max-width: 34ch; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }

.pv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.pv h3 { margin: 0 0 8px; font-size: 19px; letter-spacing: -0.01em; }
.pv p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.fine { margin: 44px 0 0; color: var(--ink-soft); font-size: 13px; }

/* ---------- work: the progress line is the crossing ---------- */
.work { margin-top: 88px; animation: rise 0.6s var(--ease) both; }
.work-head h2 { margin: 0 0 22px; font-size: clamp(28px, 3.6vw, 38px); font-weight: 300; line-height: 1.15; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.track { position: relative; height: 24px; margin: 0 16px; }
.track::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 14px;
  border-top: 1.5px dashed color-mix(in srgb, var(--sea) 45%, transparent);
  transition: border-color 0.6s var(--ease);
}
#bar { position: absolute; left: 0; top: 13px; height: 3px; width: 0; border-radius: 3px; background: var(--sea); transition: width 0.7s var(--ease); }
/* The boat rides the end of its wake. */
#bar::after {
  content: "";
  position: absolute;
  right: -15px; bottom: -4px;
  width: 30px; height: 25px;
  background: var(--boat) center / contain no-repeat;
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob { 50% { translate: 0 -1.5px; rotate: -2deg; } }
/* Crossed: the dashes join up and the boat settles into the dock. */
.track.done::before { border-top-style: solid; border-color: var(--sea); }
.track.done #bar::after { animation: dock 0.7s var(--settle) both; }
@keyframes dock { from { translate: -10px 0; } }
.work-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 10px; color: var(--ink-soft); font-size: 15px; font-variant-numeric: tabular-nums; }
.work-meta span { flex: 1; }

.summary { margin: 28px 0 0; font-size: clamp(22px, 2.6vw, 27px); font-weight: 300; line-height: 1.35; letter-spacing: -0.02em; }
.summary:empty { display: none; }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 22px; }
.actions .sub { margin-left: 6px; }

/* Matches stay folded until you ask for them. */
.review { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease); }
.review[data-open="true"] { grid-template-rows: 1fr; }
.review-inner { overflow: hidden; min-height: 0; }
.review-tools { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 30px 0 12px; color: var(--ink-soft); font-size: 15px; }
.check { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.check input { width: 17px; height: 17px; margin: 0; accent-color: var(--sea); }

.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1.3fr) 112px;
  gap: 18px;
  align-items: center;
  padding: 14px 8px;
  border-bottom: 1px solid var(--line);
  transition: background-color 0.2s;
}
.row:hover { background: color-mix(in srgb, var(--deck) 75%, transparent); }
.review[data-open="true"] .row { animation: rise 0.45s var(--ease) both; }
.review[data-open="true"] .row:nth-child(2) { animation-delay: 0.03s; }
.review[data-open="true"] .row:nth-child(3) { animation-delay: 0.06s; }
.review[data-open="true"] .row:nth-child(4) { animation-delay: 0.09s; }
.review[data-open="true"] .row:nth-child(5) { animation-delay: 0.12s; }
.review[data-open="true"] .row:nth-child(n+6) { animation-delay: 0.15s; }
.row.hide { display: none; }
.num { text-align: right; color: var(--ink-soft); font-size: 13px; font-variant-numeric: tabular-nums; }
.song strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub { color: var(--ink-soft); font-size: 14px; }

.match { display: flex; gap: 12px; align-items: center; min-width: 0; }
.match a { flex: none; line-height: 0; border-radius: 8px; overflow: hidden; }
.match img, .thumb-empty { display: block; flex: none; width: 88px; height: 50px; border-radius: 8px; object-fit: cover; background: var(--line); transition: scale 0.4s var(--ease); }
.match a:hover img { scale: 1.06; }
.match img.square { width: 50px; }
.match select {
  width: 100%; min-width: 0; height: 38px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--deck) var(--chev) right 12px center / 12px 8px no-repeat;
  color: var(--ink);
  font: inherit; font-size: 14px;
  appearance: none;
  padding-right: 34px;
  text-overflow: ellipsis;
  cursor: pointer;
}
.match select:focus { outline: none; border-color: var(--sea); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sea) 18%, transparent); }
.placeholder { color: var(--ink-soft); font-size: 14px; }

/* Chip colors follow buoys: calm water, yellow caution, red stop. */
.chip { justify-self: end; padding: 4px 11px; border-radius: 999px; font-size: 13px; white-space: nowrap; }
.chip.good, .chip.picked { color: var(--good); background: var(--sea-soft); }
.chip.check { color: var(--check); background: var(--note-soft); }
.chip.weak, .chip.none, .chip.error { color: var(--bad); background: var(--livery-soft); }
.chip.wait, .chip.busy, .chip.skipped { color: var(--ink-soft); background: color-mix(in srgb, var(--line) 55%, transparent); }
.chip.busy { animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.55; } }

/* ---------- output: your ticket gets stamped ---------- */
.out { margin-top: 64px; padding: 30px 30px 26px; border: 1px solid var(--line); border-radius: 20px; background: var(--deck); animation: rise 0.5s var(--ease) both; }
.out-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 6px; }
.out h2 { margin: 0; font-size: clamp(26px, 3vw, 32px); font-weight: 300; letter-spacing: -0.03em; }
.stamp {
  display: inline-block;
  padding: 3px 12px 4px;
  border: 1.5px solid var(--livery);
  border-radius: 8px;
  outline: 1px solid color-mix(in srgb, var(--livery) 45%, transparent);
  outline-offset: 2px;
  color: var(--livery);
  font-size: 14px;
  letter-spacing: 0.06em;
  rotate: -7deg;
  opacity: 0.88;
  animation: stamp 0.55s 0.25s var(--settle) both;
}
@keyframes stamp { from { opacity: 0; scale: 1.7; rotate: -16deg; } }
.hint { margin: 0 0 22px; max-width: 62ch; color: var(--ink-soft); }
.links { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.links li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.links .label { flex: 1; min-width: 180px; font-weight: 500; }
.links .sub { flex-basis: 100%; }
.links li.create { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--mist); }
.privacy { appearance: none; padding-right: 34px !important; background: var(--deck) var(--chev) right 12px center / 12px 8px no-repeat !important; cursor: pointer; }
.name-in, .privacy {
  height: 46px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--deck); color: var(--ink); font: inherit;
}
.name-in { flex: 1; min-width: 180px; }
.other-ways { margin-top: 22px; }
.other-ways > summary, .spbox > summary, #spSetup > summary { width: fit-content; list-style: none; cursor: pointer; color: var(--ink-soft); }
.other-ways > summary::-webkit-details-marker, .spbox > summary::-webkit-details-marker, #spSetup > summary::-webkit-details-marker { display: none; }
.other-ways > summary::before, .spbox > summary::before, #spSetup > summary::before {
  content: "";
  display: inline-block;
  width: 12px; height: 8px;
  margin-right: 10px;
  vertical-align: 0.12em;
  background: var(--chev) center / contain no-repeat;
  rotate: -90deg;
  transition: rotate 0.35s var(--ease);
}
details[open] > summary::before { rotate: 0deg; }
.other-ways > summary:hover, .other-ways[open] > summary { color: var(--ink); }
.other-ways[open] > summary { margin-bottom: 16px; }
.other-ways[open] > *:not(summary) { animation: rise 0.4s var(--ease) both; }
.other-ways .links { margin-bottom: 14px; }

/* ---------- dialogs ---------- */
.dlg {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--deck);
  color: var(--ink);
  box-shadow: 0 40px 80px -40px rgb(10 22 44 / 0.5);
}
.dlg::backdrop { background: rgb(12 24 40 / 0.45); }
.dlg[open] { animation: rise 0.35s var(--ease); }
.dlg h2 { margin: 0 0 6px; font-size: 28px; font-weight: 300; letter-spacing: -0.03em; }
.dlg h3 { margin: 0 0 4px; font-size: 16px; font-weight: 500; }
.dlg .sub { margin: 0 0 12px; }
.dlg textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--mist); color: var(--ink);
  font: inherit; line-height: 1.55; resize: vertical;
}
.dlg textarea:focus { outline: none; border-color: var(--sea); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sea) 18%, transparent); }
.dlg-section { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.dlg-actions { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 22px; }
.dlg-actions .sub { flex: 1; margin: 0; }

/* Share card */
.share-btn { margin-left: auto; }
.share-dlg { width: min(560px, calc(100vw - 32px)); }
.share-img { display: block; width: 100%; aspect-ratio: 4 / 5; margin: 6px 0 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--mist); object-fit: cover; }

/* Behind the rover */
.about-wrap { max-width: 780px; }
.about-head { padding: 64px 0 8px; }
.about-title { margin: 0 0 18px; font-size: clamp(46px, 7vw, 84px); font-weight: 300; line-height: 0.96; letter-spacing: -0.045em; }
.toc { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 26px; font-size: 15px; }
.toc a { color: var(--ink-soft); text-underline-offset: 4px; }
.toc a:hover { color: var(--ink); }
.doc { padding-top: 84px; }
.doc h2 { margin: 0 0 18px; font-size: clamp(28px, 3.6vw, 38px); font-weight: 300; line-height: 1.12; letter-spacing: -0.03em; }
.doc h3 { margin: 30px 0 6px; font-size: 19px; letter-spacing: -0.01em; }
.doc p { margin: 0 0 12px; color: var(--ink-soft); }
.doc p strong { color: var(--ink); font-weight: 500; }
.svc { width: 100%; margin: 6px 0 8px; border-collapse: collapse; font-size: 15px; }
.svc th, .svc td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.svc th { color: var(--ink-soft); font-weight: 400; font-size: 14px; }
.svc td:first-child { color: var(--ink); }
.svc td { color: var(--ink-soft); }
.table-scroll { overflow-x: auto; }

/* ---------- narrow windows ---------- */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; grid-template-areas: "text" "ticket" "intake"; row-gap: 44px; padding-top: 36px; }
  .ticket-wrap { justify-self: start; max-width: 420px; }
  .route, .pv { grid-template-columns: 1fr; gap: 30px; }
  .route li { padding: 0 0 0 36px; }
  .route li:not(:last-child)::after { top: 22px; left: 6px; right: auto; bottom: -26px; border-top: 0; border-left: 1.5px dashed color-mix(in srgb, var(--sea) 55%, transparent); }
  .nav-links a:not(.nav-cta) { display: none; }
}
@media (max-width: 640px) {
  .modes { grid-template-columns: repeat(2, 1fr); }
  .modes::before { display: none; }
  .mode[aria-pressed="true"] { background: var(--ink); border-radius: 9px; }
  .wrap { padding: 0 18px 100px; }
  .nav-in { padding: 12px 18px; }
  .intake, .out { padding: 20px; }
  .field { flex-direction: column; }
  .field input { flex: none; width: 100%; }
  .row { grid-template-columns: 24px minmax(0, 1fr); }
  .match, .chip { grid-column: 2; }
  .chip { justify-self: start; }
  .fold-in { padding-top: 88px; }
}

/* Motion off: everything lands in its final place at once. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  [data-tilt] { transform: none !important; }
}

/* @dev-start */
body:not(.dev) .dev-only { display: none !important; }
.ver { cursor: default; user-select: none; }
body.dev .ver::after { content: " (developer mode)"; color: var(--sea); }
.spbox > summary { cursor: pointer; font-weight: 500; }
.spbox-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.spbox-head span { flex: 1; min-width: 180px; }
.spbox code { padding: 2px 6px; border-radius: 6px; background: var(--mist); font-size: 13px; word-break: break-all; }
.steps { margin: 12px 0 14px; padding-left: 20px; color: var(--ink-soft); }
#spSetup { margin-top: 12px; }
#spSetup > summary { cursor: pointer; color: var(--ink-soft); }
/* @dev-end */

/* =====================================================================
   Deep space layer. Square corners, hard rules, Oxanium labels,
   a live sky behind everything. Sits last so it wins.
   ===================================================================== */

body { background: var(--mist); }
#sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block; }

/* Labels, numbers and small print speak in instrument type. */
.field-label, .dest-label, .t-label, .t-head span, .t-foot, .t-stub span, .chip, .work-meta, .stamp,
.sec-head p, .route h3::before, .nav-links a, .footer-fine, .ver, .telemetry, .mode, .theme-btn span {
  font-family: var(--tech);
}
.field-label, .dest-label, .t-label, .t-head span, .t-foot, .t-stub span, .stamp, .nav-links a, .footer-fine {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
}

/* Square everything that holds or does something. */
button, .btn, .field input, .note, .dlg, .dlg textarea, .modes, .modes::before, .mode, .chip, .resume,
.nav-links .nav-cta, .match img, .match select, .icon-btn, .stamp, .face, .share-img, .mark img { border-radius: 0; }

/* Buttons: hard edges, gold on hover. */
button, .btn { height: 44px; font-weight: 500; letter-spacing: 0.01em; }
.primary { background: var(--ink); color: var(--mist); border-color: var(--ink); }
.primary:hover:not(:disabled) { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.secondary { border-color: var(--ink-soft); }
.secondary:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.ghost:hover:not(:disabled) { border-color: var(--gold); color: var(--ink); }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

/* Nav: a thin instrument bar. */
.nav.scrolled { background: color-mix(in srgb, var(--mist) 92%, transparent); }
.nav-links { gap: 22px; }
.nav-links .nav-cta { border-color: var(--ink-soft); padding: 9px 16px; }
.nav-links .nav-cta:hover { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.mark { font-weight: 600; letter-spacing: -0.02em; }
.theme-btn { width: auto; padding: 0 12px; gap: 8px; }
.theme-btn span { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.theme-btn svg { transition: rotate 0.6s var(--ease); }
.theme-btn:hover svg { rotate: 45deg; }

/* Headline: big, tight, the last word in gold. */
.headline { font-weight: 400; letter-spacing: -0.055em; line-height: 0.92; }
.headline .ln:nth-child(3) > span { color: var(--gold); }
.lede { font-size: 17px; }
.hero-tag { display: flex; gap: 14px; align-items: center; margin: 0 0 26px; color: var(--ink-soft); font: 500 12px/1 var(--tech); letter-spacing: 0.18em; text-transform: uppercase; animation: rise 0.9s 0.1s var(--ease) both; }
.hero-tag::before { content: ""; width: 36px; border-top: 1px solid var(--gold); }

/* Intake reads like a console: one hard frame, ruled sections. */
.intake { border: 1px solid var(--line); padding: 28px; background: color-mix(in srgb, var(--deck) 82%, transparent); }
.field input { border-color: var(--line); background: var(--mist); }
.field input:focus { border-color: var(--gold); }
.modes { padding: 0; border-color: var(--line); }
.modes::before { top: 0; bottom: 0; left: 0; width: 25%; background: var(--ink); }
.mode { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.mode[aria-pressed="true"] { color: var(--mist); }
.note { border: 1px solid var(--line); border-left: 2px solid var(--gold); background: transparent; }
.trust { font-size: 13px; }

/* The pass: black card in space, paper on paper, gold stub. */
.ticket-wrap::before { display: none; }
.face {
  --t-ink: var(--ink);
  --t-soft: var(--ink-soft);
  --t-sea: var(--gold);
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in srgb, var(--ink) 5%, transparent) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, color-mix(in srgb, var(--ink) 5%, transparent) 23px 24px),
    var(--deck);
  box-shadow: inset 0 0 0 1px var(--line);
}
.face::after { background: radial-gradient(40% 60% at calc(var(--mx, 50) * 1%) calc(var(--my, 50) * 1%), color-mix(in srgb, var(--gold) 30%, transparent), transparent 70%); mix-blend-mode: normal; }
.t-head strong { font-weight: 600; letter-spacing: -0.02em; }
.t-place { font-weight: 500; letter-spacing: -0.045em; }
.t-dot { background: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 30%, transparent), 0 0 14px var(--gold); }
.t-stub { background: linear-gradient(160deg, #FBE7B0 0%, #E6C171 30%, #C79B45 62%, #F2D486 100%); color: #000; border-left: 1px dashed rgb(0 0 0 / 0.4); }
.t-stub span { font-weight: 600; }

/* How it works: numbered, ruled, no soft dots. */
.route { counter-reset: step; gap: 0; border-top: 1px solid var(--line); }
.route li { counter-increment: step; padding: 22px 24px 0 0; }
.route li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.route li::before, .route li:not(:last-child)::after { display: none; }
.route h3::before { content: counter(step, decimal-leading-zero) " /"; display: block; margin-bottom: 14px; color: var(--gold); font-size: 12px; letter-spacing: 0.16em; }
.sec-head p { text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; }

/* Progress: a hard line and the record riding it. */
#bar { border-radius: 0; height: 2px; top: 13.5px; background: var(--gold); box-shadow: 0 0 10px color-mix(in srgb, var(--gold) 60%, transparent); }
#bar::after { width: 22px; height: 22px; right: -11px; bottom: -10px; animation: spin 6s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.track.done #bar::after { animation: none; }
.track::before { border-top: 1px dashed color-mix(in srgb, var(--ink) 30%, transparent); }
.telemetry { margin: 10px 16px 0; color: var(--ink-soft); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }

/* Status chips: square tags tinted like star classes. */
.chip { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 9px; border: 1px solid currentColor; background: transparent !important; }
.chip.good, .chip.picked { color: var(--star-o); }
.chip.check { color: var(--star-g); }
.chip.weak, .chip.none, .chip.error { color: var(--star-m); }
.row { border-radius: 0; }

/* Landed. */
.stamp { border-width: 1px; outline: 0; color: var(--gold); border-color: var(--gold); rotate: -4deg; padding: 4px 12px; }

.dlg { border: 1px solid var(--line); background: var(--deck); color: var(--ink); }
.dlg::backdrop { background: rgb(0 0 0 / 0.7); }
.footer-fine { font-size: 11px; }
.fb-link { color: var(--ink); }

/* Light mode keeps the same bones on paper. */
:root:not([data-theme="dark"]) .t-stub { color: #0B0B0B; }

@media (max-width: 640px) {
  .intake { padding: 18px; }
  .route { grid-template-columns: 1fr; }
  .route li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .theme-btn span { display: none; }
  .mode { font-size: 11px; letter-spacing: 0.02em; padding: 0 8px; }
}
.intake { border-radius: 0; }
.headline { font-size: clamp(46px, 5.9vw, 86px); }
.ln:nth-child(2) { padding-left: 0.6em; }
.ln:nth-child(3) { padding-left: 1.2em; }
@media (min-width: 861px) {
  .hero { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
}
.t-place { font-size: clamp(20px, 2.1vw, 28px); }
.t-foot { font-size: 10.5px; white-space: nowrap; }
.t-foot span { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .headline { font-size: clamp(40px, 12vw, 60px); }
  .ln:nth-child(2), .ln:nth-child(3) { padding-left: 0; }
  .hero-tag { font-size: 10.5px; }
  .nav-links { gap: 10px; }
  .t-foot span:last-child { display: none; }
}
@media (max-width: 860px) {
  .route { grid-template-columns: 1fr; gap: 0; }
  .route li, .route li + li { padding: 22px 0; border-left: 0; }
  .route li + li { border-top: 1px solid var(--line); }
}

/* ---------- accordions: one rule on top, a + that turns into a ×, smooth open ---------- */
:root { interpolate-size: allow-keywords; }
.acc { border-top: 1px solid var(--line); }
.acc:last-of-type { border-bottom: 1px solid var(--line); }
.acc > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 0; cursor: pointer; list-style: none;
  transition: color 0.25s var(--ease), padding-left 0.35s var(--ease);
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary h2, .acc > summary h3 { margin: 0; }
.acc > summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background: linear-gradient(currentColor 0 0) center / 14px 1.5px no-repeat, linear-gradient(currentColor 0 0) center / 1.5px 14px no-repeat;
  color: var(--ink-soft);
  transition: rotate 0.4s var(--ease), color 0.25s;
}
.acc[open] > summary::after { rotate: 45deg; color: var(--gold); }
.acc > summary:hover { padding-left: 8px; color: var(--gold); }
.acc > summary:hover::after { color: var(--gold); }
.acc::details-content { block-size: 0; overflow: clip; transition: block-size 0.45s var(--ease), content-visibility 0.45s allow-discrete; }
.acc[open]::details-content { block-size: auto; }
.acc-body { padding: 0 0 24px; animation: rise 0.5s var(--ease) both; }
.acc-body > :first-child { margin-top: 0; }
.doc.acc { padding: 0; margin: 0; }
.doc.acc > summary h2 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.03em; }
.limits .acc > summary h3 { font-size: 19px; letter-spacing: -0.01em; color: var(--ink); text-transform: none; font-family: var(--display); }
.limits .acc > summary:hover h3 { color: var(--gold); }
.limits .acc-body p { border-left: 0; padding-left: 0; }
.toc a { transition: color 0.2s; }
.toc a:hover { color: var(--gold); }
#contact { margin-top: 56px; }
#contact a { font: 500 clamp(20px, 3vw, 28px)/1.2 var(--tech); letter-spacing: 0.02em; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold); }
#contact a:hover { color: var(--gold); }

/* ---------- the probe: a golden record and its flight readout ----------
   Same hooks as before (.face front/back, .t-from, .t-to, .t-stub, data-state),
   so the page logic is unchanged. A new destination flips the record to its other side. */
.probe { max-width: 420px; }
.probe .ticket { aspect-ratio: 0.68; }
.probe .face {
  -webkit-mask: none; mask: none;
  background: none; box-shadow: none;
  display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 18px;
  overflow: visible;
}
.probe .face::after { display: none; }
.disc {
  position: relative; container-type: inline-size;
  width: 100%; aspect-ratio: 1; border-radius: 50%;
  background:
    repeating-radial-gradient(circle, rgb(70 50 15 / 0) 0 2.2px, rgb(70 50 15 / 0.16) 2.2px 3.2px),
    conic-gradient(from 210deg, rgb(255 250 225 / 0.5), rgb(120 86 28 / 0.25) 12%, rgb(255 240 200 / 0.3) 26%, rgb(110 80 25 / 0.3) 40%, rgb(255 245 215 / 0.45) 52%, rgb(120 88 30 / 0.25) 66%, rgb(255 236 190 / 0.3) 80%, rgb(255 250 225 / 0.5)),
    radial-gradient(circle at 36% 30%, #E9C67A 0%, #B98C3C 34%, #8A6526 64%, #5A4116 100%);
  background-blend-mode: normal, soft-light, normal;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.6), 0 30px 80px -20px rgb(0 0 0 / 0.7), 0 0 90px -10px color-mix(in srgb, var(--gold) 28%, transparent);
}
.disc img { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; pointer-events: none; }
/* Spindle hole and a bright rim. */
.disc::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, #000 0 2.2%, #6B4E1A 2.4% 3.4%, transparent 3.6%);
  box-shadow: inset 0 0 0 1.5px rgb(255 240 200 / 0.55), inset 0 0 0 5px rgb(60 42 12 / 0.4);
}
/* Light follows the pointer across the metal. */
.disc::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(35% 35% at calc(var(--mx, 35) * 1%) calc(var(--my, 30) * 1%), rgb(255 248 225 / 0.45), transparent 70%);
  mix-blend-mode: soft-light;
}
/* The rover rides the outer groove. */
.rover {
  position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px;
  border-radius: 50%; background: #FFFDF6;
  box-shadow: 0 0 0 1.5px rgb(0 0 0 / 0.5), 0 0 14px 4px rgb(255 240 200 / 0.75);
  transform: rotate(var(--ra, -62deg)) translateX(45.5cqw);
  transition: transform 1.2s var(--ease);
}
.probe[data-state="crossing"] .disc img { animation: spin 40s linear infinite; }
.probe[data-state="crossing"] .rover { animation: orbit 3.2s linear infinite; }
.probe[data-state="arrived"] .rover { --ra: -90deg; box-shadow: 0 0 0 1.5px rgb(0 0 0 / 0.5), 0 0 22px 7px color-mix(in srgb, var(--gold) 80%, transparent); }
@keyframes orbit { from { transform: rotate(-62deg) translateX(45.5cqw); } to { transform: rotate(298deg) translateX(45.5cqw); } }

.readout {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--deck) 86%, transparent);
  padding: 14px 16px; display: grid; gap: 12px; align-content: start;
}
.ro-head, .ro-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--ink-soft); font: 500 11px/1 var(--tech); letter-spacing: 0.14em; text-transform: uppercase; }
.ro-head strong { color: var(--ink); font: 600 15px/1 var(--display); letter-spacing: -0.02em; text-transform: none; }
.ro-route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 12px; }
.ro-route > div:last-child { text-align: right; }
.probe .t-place { font-size: clamp(18px, 1.9vw, 24px); }
.ro-line { position: relative; width: 56px; height: 12px; align-self: center; }
.ro-line::before { content: ""; position: absolute; left: 0; right: 0; top: 5.5px; border-top: 1px dashed color-mix(in srgb, var(--gold) 70%, transparent); }
.probe .t-dot { top: 1px; left: calc(100% - 10px); }
.probe[data-side="front"] .front .t-dot, .probe[data-side="back"] .back .t-dot { animation: sailShort 1.6s 0.9s var(--ease) both; }
@keyframes sailShort { from { left: 0; } to { left: calc(100% - 10px); } }
.probe .t-stub { display: inline; background: none; border: 0; color: var(--gold); overflow: visible; }
.probe .t-stub::before, .probe .t-stub::after { display: none; }
.probe .t-stub span { writing-mode: horizontal-tb; transform: none; margin: 0; font-size: 11px; letter-spacing: 0.14em; }
@media (max-width: 860px) { .probe { max-width: 360px; } }
.out, .links li, .work, .thumb-empty, .review-inner, .other-ways, .match a, .resume { border-radius: 0; }

/* ---------- copy pass: section labels, mission control, kickers ---------- */
.intake-title { margin: 0 0 22px; font: 500 12px/1 var(--tech); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.trust { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 20px; }
.trust-title { margin: 0 0 6px; font: 500 11px/1 var(--tech); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.trust p { margin: 0; color: var(--ink-soft); font-size: 13px; }
.kicker { display: block; margin: 0 0 6px; font: 500 11px/1 var(--tech); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.toc a .kicker { margin-bottom: 4px; }
.toc a { display: inline-flex; flex-direction: column; text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.ro-launch { height: 36px; width: 100%; background: transparent; color: var(--ink); border: 1px solid var(--ink-soft); font: 500 12px/1 var(--tech); letter-spacing: 0.14em; text-transform: uppercase; pointer-events: auto; }
.ro-launch:hover { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.probe[data-state="crossing"] .ro-launch, .probe[data-state="arrived"] .ro-launch { display: none; }