/* ============================================================
   elliotroth.me — a portfolio that grows while you read it
   Palette: culture medium (near-black green), spirulina, mCherry
   ============================================================ */

:root {
  --bg:        #05100d;
  --bg-2:      #081813;
  --bg-3:      #0b211a;
  --line:      #16382c;
  --line-soft: #102a21;
  --ink:       #dff3e9;
  --ink-2:     #8fb3a4;
  --ink-3:     #5b7d70;
  --algae:     #3defa4;
  --algae-dim: #1fa974;
  --cherry:    #ff5fa2;
  --amber:     #ffc46b;
  --violet:    #9b8cff;

  --accent:    var(--algae);

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1180px;
  --r: 10px;
}

/* Moon mode: unlocked at OD 0.60. Regolith grey, earthlight blue. */
html[data-mode="moon"] {
  --bg:        #0a0b0f;
  --bg-2:      #101218;
  --bg-3:      #16181f;
  --line:      #2a2d38;
  --line-soft: #1d1f28;
  --ink:       #e6e9f2;
  --ink-2:     #9aa1b4;
  --ink-3:     #6a7285;
  --algae:     #8fd4ff;
  --algae-dim: #4b8fc4;
  --accent:    var(--algae);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .6s ease, color .6s ease;
}

a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

kbd {
  font-family: var(--mono); font-size: .82em;
  border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 4px; padding: 1px 5px; color: var(--ink-2);
  background: var(--bg-2);
}
code { font-family: var(--mono); font-size: .88em; color: var(--ink-2); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--bg); padding: 10px 16px; font-family: var(--mono);
}
.skip:focus { left: 8px; top: 8px; }

/* ---------- HERO ---------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 14vh var(--gutter) 12vh;
  overflow: hidden;
  isolation: isolate;
}
#dish {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: -2;
  display: block;
  opacity: .72;
  touch-action: pan-y;
}
.hero__vignette {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 62% 58% at 34% 48%, color-mix(in srgb, var(--bg) 82%, transparent) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 45%, transparent 72%),
    radial-gradient(ellipse 92% 72% at 50% 45%, transparent 0%, color-mix(in srgb, var(--bg) 60%, transparent) 66%, var(--bg) 100%),
    linear-gradient(to bottom, color-mix(in srgb, var(--bg) 60%, transparent), transparent 22%, transparent 68%, var(--bg));
}
.hero__inner { position: relative; max-width: 760px; margin-inline: auto; width: 100%; }

.hero__eyebrow {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-2); margin: 0 0 1.6rem; display: flex; align-items: center; gap: .55rem;
}
.blip {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent);
  animation: blip 2.6s ease-out infinite;
}
@keyframes blip {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); }
  70%  { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.hero__name {
  font-size: clamp(3.4rem, 13vw, 9rem);
  line-height: .88;
  font-weight: 700;
  letter-spacing: -.045em;
  margin: 0 0 1.4rem;
  color: var(--ink);
  text-shadow: 0 0 60px color-mix(in srgb, var(--bg) 85%, transparent);
}
.hero__break { display: inline; }
@media (max-width: 640px) { .hero__break { display: block; height: 0; } }

.hero__strap {
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
  color: var(--ink);
  margin: 0 0 .8rem;
  max-width: 40ch;
  font-weight: 500;
}
.hero__objective {
  color: var(--ink-2); margin: 0 0 2rem; max-width: 52ch; font-size: 1rem;
}
.hero__links { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0 0 2.4rem; }
.hero__links a, .foot__links a {
  display: inline-block; font-family: var(--mono); font-size: .78rem;
  padding: .4rem .8rem; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-2); text-decoration: none; background: color-mix(in srgb, var(--bg-2) 70%, transparent);
  transition: border-color .2s, color .2s, transform .2s;
}
.hero__links a:hover, .foot__links a:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }

.hero__hint { font-family: var(--mono); font-size: .72rem; color: var(--ink-3); margin: 0; }

.hero__scroll {
  position: absolute; left: 50%; bottom: 3vh; transform: translateX(-50%);
  width: 26px; height: 42px; border: 1px solid var(--line); border-radius: 14px;
  display: grid; place-items: start center; padding-top: 7px;
}
.hero__scroll span { width: 3px; height: 7px; border-radius: 2px; background: var(--accent); animation: drip 1.9s ease-in-out infinite; }
@keyframes drip { 0%,100% { transform: translateY(0); opacity: 1 } 60% { transform: translateY(14px); opacity: 0 } }

/* ---------- RAIL NAV ------------------------------------------------ */

.rail { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 40; }
.rail ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rail a {
  display: flex; align-items: center; gap: 9px; justify-content: flex-end;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); text-decoration: none;
}
.rail a i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--ink-3); flex: none; transition: all .25s; }
.rail a span { opacity: 0; transform: translateX(6px); transition: all .25s; }
.rail a:hover span, .rail a[aria-current="true"] span { opacity: 1; transform: none; }
.rail a:hover i, .rail a[aria-current="true"] i { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 10px var(--accent); }
.rail a[aria-current="true"] { color: var(--accent); }
@media (max-width: 900px) { .rail { display: none; } }

/* ---------- SECTIONS ------------------------------------------------ */

.sec {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(64px, 10vh, 120px) var(--gutter);
  border-top: 1px solid var(--line-soft);
}
.sec__head { margin-bottom: 2.6rem; }
.sec h2 {
  font-size: clamp(1.7rem, 4.5vw, 2.7rem); letter-spacing: -.03em; margin: 0 0 .5rem; font-weight: 700;
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
}
.sec__idx { font-family: var(--mono); font-size: .7rem; color: var(--accent); letter-spacing: .2em; font-weight: 400; }
.sec__sub { color: var(--ink-2); margin: 0; max-width: 62ch; }
.count { font-family: var(--mono); font-size: .78rem; color: var(--ink-3); }

.subhead {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-2); margin: 2.6rem 0 1rem; font-weight: 700;
  display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap;
}
.subhead__note { font-weight: 400; text-transform: none; letter-spacing: .02em; color: var(--ink-3); font-size: .72rem; }

/* ---------- BIO ----------------------------------------------------- */

.bio { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); gap: clamp(24px,4vw,56px); align-items: start; }
@media (max-width: 800px) { .bio { grid-template-columns: 1fr; } }
.bio__long { font-size: 1.06rem; margin: 0; color: var(--ink); }
.bio__facts { margin: 0; font-family: var(--mono); font-size: .8rem; display: grid; gap: .9rem; }
.bio__facts dt { color: var(--ink-3); letter-spacing: .1em; text-transform: uppercase; font-size: .66rem; }
.bio__facts dd { margin: .2rem 0 0; color: var(--ink-2); }

.genotype { display: flex; flex-wrap: wrap; gap: .4rem; }
.trait {
  font-family: var(--mono); font-size: .74rem; padding: .32rem .7rem; border-radius: 4px;
  border: 1px solid var(--line); color: var(--ink-2); background: var(--bg-2);
  cursor: default; transition: transform .18s, border-color .18s, color .18s;
}
.trait:hover { transform: translateY(-2px); }
.trait[data-class="wet"]  { border-color: color-mix(in srgb, var(--algae) 40%, var(--line)); color: var(--algae); }
.trait[data-class="hard"] { border-color: color-mix(in srgb, var(--amber) 32%, var(--line)); color: var(--amber); }
.trait[data-class="soft"] { border-color: color-mix(in srgb, var(--violet) 32%, var(--line)); color: var(--violet); }

/* ---------- GROWTH CURVE -------------------------------------------- */

.curve { position: relative; margin: 0 0 3rem; }
.curve svg { display: block; width: 100%; height: auto; overflow: visible; }
.curve .grid-line { stroke: var(--line-soft); stroke-width: 1; }
.curve .axis-lab { font-family: var(--mono); font-size: 9px; fill: var(--ink-3); letter-spacing: .12em; text-transform: uppercase; }
.curve .phase-lab { font-family: var(--mono); font-size: 8.5px; fill: var(--ink-3); letter-spacing: .14em; }
/* Marks: a thin duration bar with a start dot. One series, so one hue —
   current roles read brighter rather than differently coloured. */
.curve .bar { cursor: pointer; }
.curve .bar__hit { fill: transparent; }
.curve .bar__span {
  fill: var(--accent); opacity: .34;
  transition: opacity .2s;
  /* a 2px surface ring keeps overlapping bars legible where they cross */
  stroke: var(--bg); stroke-width: 2; paint-order: stroke;
}
.curve .bar__dot {
  fill: var(--bg); stroke: var(--accent); stroke-width: 2;
  transition: fill .2s, r .2s;
}
.curve .bar.is-current .bar__span { opacity: .6; }
.curve .bar.is-current .bar__dot { fill: var(--accent); }
.curve .bar__lab {
  font-family: var(--mono); font-size: 8.5px; fill: var(--ink-2);
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.curve .bar:hover .bar__span,
.curve .bar:focus-visible .bar__span,
.curve .bar.is-live .bar__span { opacity: .95; }
.curve .bar:hover .bar__dot,
.curve .bar:focus-visible .bar__dot,
.curve .bar.is-live .bar__dot { fill: var(--accent); }
.curve .bar:hover .bar__lab,
.curve .bar:focus-visible .bar__lab,
.curve .bar.is-live .bar__lab { opacity: 1; }

.curve .playhead {
  stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0;
  transition: opacity .25s;
}

/* The experience the playhead has reached. */
.nowcard {
  margin-top: 1rem; border: 1px solid var(--line-soft); border-left: 2px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0; padding: 1rem 1.2rem 1.1rem;
  background: linear-gradient(100deg, var(--bg-2), var(--bg) 70%);
  min-height: 8.5rem;
}
.nowcard.is-in { animation: nowcard-in .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes nowcard-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.nowcard__meta {
  margin: 0 0 .5rem; display: flex; justify-content: space-between; gap: 1rem;
  align-items: baseline; flex-wrap: wrap;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
}
.nowcard__when { color: var(--ink-3); }
.nowcard__impact { color: var(--accent); }
.nowcard__impact span { color: var(--ink-3); }
.nowcard__org {
  margin: 0 0 .5rem; font-size: 1.25rem; letter-spacing: -.02em; line-height: 1.2;
  display: flex; gap: .7rem; align-items: baseline; flex-wrap: wrap;
}
.nowcard__org span { font-size: .88rem; font-weight: 400; color: var(--ink-2); letter-spacing: 0; }
.nowcard__tag { margin: 0 0 .6rem; color: var(--ink-2); font-size: .95rem; }
.nowcard__why { margin: 0; color: var(--ink-3); font-size: .84rem; }
.nowcard__why span {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin-right: .5rem;
}
.nowcard__idle { margin: 0; color: var(--ink-3); font-family: var(--mono); font-size: .8rem; }

@media (prefers-reduced-motion: reduce) {
  .nowcard.is-in { animation: none; }
}

.roles { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r); overflow: hidden; }
.role { background: var(--bg); transition: background .2s; }
.role:hover { background: var(--bg-2); }
.role__btn {
  width: 100%; background: none; border: 0; color: inherit; font: inherit; text-align: left;
  padding: 1.05rem clamp(14px,2.5vw,22px); cursor: pointer;
  display: grid; grid-template-columns: 8.5rem minmax(0,1fr) auto; gap: 1rem; align-items: baseline;
}
@media (max-width: 720px) { .role__btn { grid-template-columns: 1fr; gap: .3rem; } }
.role__when { font-family: var(--mono); font-size: .72rem; color: var(--ink-3); white-space: nowrap; }
.role__org { font-weight: 700; letter-spacing: -.01em; }
.role__role { color: var(--ink-2); font-size: .92rem; display: block; }
.role__kind { font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.role.is-current .role__when { color: var(--accent); }
.role.is-current .role__when::after { content: " ●"; }
.role__panel { display: none; padding: 0 clamp(14px,2.5vw,22px) 1.4rem; }
.role.is-open .role__panel { display: block; }
.role__panel p { margin: 0 0 .8rem; color: var(--ink-2); font-size: .95rem; }
.role__panel ul { margin: 0; padding-left: 1.1rem; color: var(--ink-2); font-size: .93rem; }
.role__panel li { margin-bottom: .35rem; }
.role__panel li::marker { color: var(--accent); }
.role__tags { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: 1rem; }
.role__tags span { font-family: var(--mono); font-size: .66rem; color: var(--ink-3); border: 1px solid var(--line); padding: .15rem .5rem; border-radius: 3px; }

/* ---------- ARTIFACTS ----------------------------------------------- */

.artifacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 14px; }
.art {
  border: 1px solid var(--line-soft); border-radius: var(--r); padding: 1.2rem 1.25rem 1.3rem;
  background: linear-gradient(160deg, var(--bg-2), var(--bg));
  display: flex; flex-direction: column; gap: .55rem; position: relative; overflow: hidden;
  transition: border-color .25s, transform .25s;
}
.art::after {
  content: ""; position: absolute; inset: auto -30% -60% auto; width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%);
  opacity: 0; transition: opacity .4s, transform .6s; transform: scale(.6);
}
.art:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); transform: translateY(-3px); }
.art:hover::after { opacity: 1; transform: scale(1); }
.art__meta { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); display: flex; justify-content: space-between; gap: .6rem; }
.art__name { font-size: 1.06rem; font-weight: 700; margin: 0; letter-spacing: -.015em; }
.art__name a { text-decoration: none; color: var(--ink); }
.art__name a:hover { color: var(--accent); }
.art__blurb { margin: 0; color: var(--ink-2); font-size: .9rem; }
.art[data-class="wet"]   { --accent-l: var(--algae); }
.art[data-class="hard"]  { --accent-l: var(--amber); }
.art[data-class="infra"] { --accent-l: var(--violet); }
.art[data-class="soft"]  { --accent-l: var(--cherry); }
.art__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-l, var(--accent)); display: inline-block; }

/* ---------- PRESS --------------------------------------------------- */

.filters { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.filters button {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  padding: .36rem .8rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg-2); color: var(--ink-2); cursor: pointer; transition: all .18s;
}
.filters button:hover { border-color: var(--accent); color: var(--accent); }
.filters button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 700; }

.press { list-style: none; margin: 0; padding: 0; }
.press li { border-bottom: 1px solid var(--line-soft); }
.press li[hidden] { display: none; }
.press a {
  display: grid; grid-template-columns: 10.5rem minmax(0,1fr) auto; gap: 1.2rem; align-items: baseline;
  padding: .95rem 0; text-decoration: none; color: var(--ink);
  transition: padding-left .22s, color .2s;
}
.press a:hover { padding-left: .6rem; color: var(--accent); }
@media (max-width: 720px) { .press a { grid-template-columns: 1fr; gap: .2rem; } }
.press__outlet { font-family: var(--mono); font-size: .7rem; color: var(--ink-3); letter-spacing: .06em; }
.press a:hover .press__outlet { color: var(--ink-2); }
.press__title { font-size: .99rem; line-height: 1.45; }
.press__tail { font-family: var(--mono); font-size: .68rem; color: var(--ink-3); white-space: nowrap; letter-spacing: .1em; text-transform: uppercase; }
.press__new { color: var(--cherry); font-weight: 700; }

/* ---------- AWARDS -------------------------------------------------- */

.awards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px,1fr)); gap: 10px; }
.awards li a, .awards li > span {
  display: flex; gap: .8rem; align-items: baseline;
  border: 1px solid var(--line-soft); border-radius: 7px; padding: .75rem .9rem;
  text-decoration: none; color: var(--ink-2); font-size: .88rem; height: 100%;
  transition: border-color .2s, color .2s, background .2s;
}
.awards li a:hover { border-color: var(--accent); color: var(--ink); background: var(--bg-2); }
.award__year { font-family: var(--mono); font-size: .7rem; color: var(--accent); flex: none; }

/* ---------- PLAIN LISTS --------------------------------------------- */

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,56px); align-items: start; }
.two-col > * { min-width: 0; }
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } }
.plainlist { list-style: none; margin: 0; padding: 0; }
.plainlist li { padding: .55rem 0; border-bottom: 1px solid var(--line-soft); font-size: .92rem; display: flex; gap: .8rem; justify-content: space-between; align-items: baseline; }
/* Without min-width:0 a flex item refuses to shrink below its content, so a
   long talk title shoves the nowrap year column off the side of the page. */
.plainlist li > :first-child { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.plainlist li > .meta { flex: 0 0 auto; }
.plainlist a { text-decoration: none; }
.plainlist a:hover { text-decoration: underline; }
.plainlist .meta { font-family: var(--mono); font-size: .68rem; color: var(--ink-3); }
/* Only the trailing year resists wrapping. A venue nested inside the title cell
   must be free to wrap, or it sets the whole column's minimum width. */
.plainlist li > .meta { white-space: nowrap; }

/* ---------- CLOUD --------------------------------------------------- */

.cloud { display: flex; flex-wrap: wrap; gap: .5rem; }
.cloud a {
  font-family: var(--mono); font-size: .78rem; padding: .45rem .85rem; border-radius: 999px;
  border: 1px dashed var(--line); color: var(--ink-2); text-decoration: none;
  transition: all .2s;
}
.cloud a:hover { border-style: solid; border-color: var(--accent); color: var(--accent); transform: translateY(-2px) rotate(-1deg); }

/* ---------- FOOTER -------------------------------------------------- */

.foot { border-top: 1px solid var(--line-soft); padding: clamp(48px,8vh,90px) var(--gutter); }
.foot__inner { max-width: var(--maxw); margin-inline: auto; }
.foot__name { font-size: 1.3rem; font-weight: 700; margin: 0 0 1rem; letter-spacing: -.02em; }
.foot__links { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0 0 1.4rem; }
.foot__fine { color: var(--ink-3); font-size: .8rem; margin: 0; font-family: var(--mono); }

/* ---------- HUD ----------------------------------------------------- */

.hud {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: flex; align-items: flex-end; gap: 8px;
}
.hud__meter {
  display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto auto; gap: 2px 8px;
  align-items: center;
  background: color-mix(in srgb, var(--bg-2) 88%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 9px; padding: .5rem .7rem;
  font-family: var(--mono); cursor: pointer; color: var(--ink-2); text-align: left;
  transition: border-color .2s, transform .12s;
}
.hud__meter:hover { border-color: var(--accent); }
.hud__meter:active { transform: scale(.97); }
.hud__label { font-size: .6rem; letter-spacing: .1em; color: var(--ink-3); }
.hud__value { font-size: .82rem; color: var(--accent); font-weight: 700; justify-self: end; }
.hud__bar { grid-column: 1 / -1; width: 110px; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.hud__bar i { display: block; height: 100%; width: 2%; background: var(--accent); border-radius: 2px; transition: width .5s cubic-bezier(.2,.8,.2,1); box-shadow: 0 0 8px var(--accent); }
.hud__phase { grid-column: 1 / -1; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.hud__buttons { display: flex; gap: 5px; order: -1; }
body.term-open .hud { opacity: 0; pointer-events: none; transform: translateY(6px); }
.hud { transition: opacity .2s, transform .2s; }
.hud__btn {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-2) 88%, transparent); backdrop-filter: blur(10px);
  color: var(--ink-2); font-family: var(--mono); font-size: .8rem; cursor: pointer;
  display: grid; place-items: center; transition: all .2s;
}
.hud__btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.hud__btn.is-locked { opacity: .35; cursor: not-allowed; }
.hud__btn.is-on { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.hud__btn.is-ready { border-color: var(--accent); color: var(--accent); animation: blip 2.6s ease-out infinite; }
@media (max-width: 700px) {
  .hud__bar, .hud__phase { display: none; }
  .hud__meter { grid-template-columns: auto auto; padding: .42rem .6rem; gap: 0 6px; }
}

/* ---------- TERMINAL ------------------------------------------------ */

.terminal {
  position: fixed; left: 16px; bottom: 16px; z-index: 90;
  width: min(620px, calc(100vw - 32px)); height: min(430px, 66vh);
  display: flex; flex-direction: column;
  background: color-mix(in srgb, #020806 94%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 11px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
  font-family: var(--mono); font-size: .8rem;
}
.terminal[hidden] { display: none; }
.terminal__bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: .5rem .75rem; border-bottom: 1px solid var(--line-soft); color: var(--ink-3); font-size: .68rem;
  letter-spacing: .08em;
}
.terminal__bar button { background: none; border: 0; color: var(--ink-3); cursor: pointer; font-size: .8rem; padding: 2px 6px; }
.terminal__bar button:hover { color: var(--cherry); }
.terminal__out { flex: 1; overflow-y: auto; padding: .8rem .9rem; white-space: pre-wrap; word-break: break-word; line-height: 1.55; color: var(--ink-2); }
.terminal__out .t-ok { color: var(--accent); }
.terminal__out .t-warn { color: var(--amber); }
.terminal__out .t-err { color: var(--cherry); }
.terminal__out .t-dim { color: var(--ink-3); }
.terminal__out .t-echo { color: var(--ink); }
.terminal__out a { color: var(--accent); }
.terminal__form { display: flex; gap: .5rem; align-items: center; border-top: 1px solid var(--line-soft); padding: .55rem .9rem; }
.terminal__prompt { color: var(--accent); flex: none; }
.terminal__form input { flex: 1; background: none; border: 0; color: var(--ink); font: inherit; outline: none; caret-color: var(--accent); }

/* ---------- DRAWER -------------------------------------------------- */

.drawer {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); color: var(--ink);
  max-width: min(620px, calc(100vw - 32px)); padding: 1.8rem; position: relative;
}
.drawer::backdrop { background: rgba(2,8,6,.72); backdrop-filter: blur(3px); }
.drawer__close { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: var(--ink-3); cursor: pointer; font-size: .95rem; }
.drawer__close:hover { color: var(--cherry); }
.drawer h3 { margin: 0 0 .3rem; font-size: 1.3rem; letter-spacing: -.02em; }
.drawer .meta { font-family: var(--mono); font-size: .72rem; color: var(--ink-3); margin: 0 0 1rem; }

/* ---------- STATES -------------------------------------------------- */

html[data-contaminated="true"] { --accent: var(--cherry); }
html[data-contaminated="true"] .hero__name { animation: jitter 6s steps(2) infinite; }
@keyframes jitter { 0%,96%,100% { transform: none } 97% { transform: translate(1px,-1px) skewX(.6deg) } 98% { transform: translate(-1px,1px) } }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .blip, .hero__scroll span, html[data-contaminated="true"] .hero__name { animation: none; }
  .art:hover, .cloud a:hover, .trait:hover, .hero__links a:hover { transform: none; }
}

/* The HUD lives where the scroll cue does on small screens. HUD wins. */
@media (max-width: 620px) {
  .hero__scroll { display: none; }
  .hero { padding-bottom: 18vh; }
}

/* ---------- IN VITRO (built with Claude) ---------------------------- */

.workbench { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 14px; }
.workbench .wb[hidden] { display: none; }
.wb {
  border: 1px solid var(--line-soft); border-radius: var(--r);
  padding: 1.1rem 1.2rem 1.25rem;
  background: linear-gradient(160deg, var(--bg-2), var(--bg));
  display: flex; flex-direction: column; gap: .5rem;
  position: relative; overflow: hidden;
  transition: border-color .25s, transform .25s;
}
/* A faint culture-plate ring, so these read as siblings of "things built"
   without duplicating that section's glow. */
.wb::before {
  content: ""; position: absolute; top: -42px; right: -42px;
  width: 104px; height: 104px; border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--accent) 26%, transparent);
  opacity: .5; transition: transform .6s ease, opacity .4s;
}
.wb:hover { border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); transform: translateY(-3px); }
.wb:hover::before { transform: scale(1.18) rotate(22deg); opacity: 1; }

.wb__meta {
  margin: 0; display: flex; justify-content: space-between; gap: .6rem; align-items: baseline;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3);
}
.wb__kind { color: var(--accent); }
.wb[data-kind="playbook"] .wb__kind { color: var(--amber); }
.wb[data-kind="research"] .wb__kind { color: var(--violet); }
.wb[data-kind="toy"] .wb__kind { color: var(--cherry); }
.wb[data-kind="site"] .wb__kind { color: var(--algae); }

.wb__tags { display: inline-flex; align-items: center; gap: .5rem; }
.wb__name {
  margin: 0; font-size: 1.04rem; font-weight: 700; letter-spacing: -.015em;
}
.wb__name a { color: var(--ink); text-decoration: none; }
.wb__name a:hover { color: var(--accent); text-decoration: underline; }
.wb__lock {
  font-family: var(--mono); font-size: .56rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--line); border-radius: 3px;
  padding: .1rem .4rem; font-weight: 400; white-space: nowrap;
}
.wb__blurb { margin: 0; color: var(--ink-2); font-size: .9rem; }

@media (prefers-reduced-motion: reduce) {
  .wb:hover { transform: none; }
  .wb:hover::before { transform: none; }
}

/* ---------- COLLAPSE: recent first, the rest behind a toggle -------- */

/* Marked overflow items vanish while the list is collapsed. Using a class on
   the container (rather than inline display) keeps each element's natural
   display value intact when it comes back. */
[data-collapsed="true"] .is-extra { display: none !important; }

.more {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.1rem;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .06em;
  padding: .5rem .95rem; border-radius: 999px;
  border: 1px dashed var(--line); background: transparent; color: var(--ink-2);
  cursor: pointer; transition: border-color .2s, color .2s, background .2s, transform .15s;
}
.more:hover { border-style: solid; border-color: var(--accent); color: var(--accent); background: var(--bg-2); }
.more:active { transform: scale(.98); }
.more__sign {
  display: inline-grid; place-items: center;
  width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid currentColor; font-size: .62rem; line-height: 1;
}

/* The press list is flush to its rows, so its toggle needs a little air. */
#press + .more { margin-top: 1.4rem; }

@media (prefers-reduced-motion: reduce) {
  .more:active { transform: none; }
}

/* ---------- SCRUB: the timeline, played by hand ---------------------- */

.scrub { margin-top: .6rem; }

.scrub input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; background: transparent; cursor: ew-resize; display: block;
}
.scrub input[type="range"]:focus { outline: none; }
.scrub input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

/* track */
.scrub input[type="range"]::-webkit-slider-runnable-track {
  height: 2px; border-radius: 2px;
  background: linear-gradient(to right, var(--line) 0%, var(--line) 100%);
}
.scrub input[type="range"]::-moz-range-track { height: 2px; border-radius: 2px; background: var(--line); }
.scrub input[type="range"]::-moz-range-progress { height: 2px; border-radius: 2px; background: var(--accent); }

/* thumb — a colony being pushed along the axis */
.scrub input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; margin-top: -6px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent), 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent);
  transition: transform .15s;
}
.scrub input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent), 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent);
}
.scrub input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.25); }

.scrub__read {
  display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap;
  margin: .3rem 0 0; min-height: 1.3em;
  font-family: var(--mono); font-size: .72rem;
}
.scrub__year { color: var(--accent); letter-spacing: .1em; flex: none; }
.scrub__what { color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  .scrub input[type="range"]:active::-webkit-slider-thumb { transform: none; }
  .curve .node { transition: none; }
}

/* ---------- ORG MARKS ------------------------------------------------ */

.mark {
  flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 6px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--line);
  background: var(--bg-2);
  font-family: var(--mono); font-size: .64rem; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-2);
  transition: border-color .2s, color .2s, background .2s;
}
/* A real logo file is painted, not drawn: the mask takes the artwork's alpha
   and fills it with currentColor, so any source image lands monochrome and
   follows the palette — moon mode included. */
.mark--img {
  background: currentColor;
  color: var(--ink-2);
  border-color: transparent;
  -webkit-mask: var(--mark-src) center / 78% 78% no-repeat;
  mask: var(--mark-src) center / 78% 78% no-repeat;
}
.mark--lg { width: 34px; height: 34px; border-radius: 8px; font-size: .78rem; }

.role:hover .mark, .role.is-open .mark { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--accent); }
.role.is-current .mark { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.nowcard .mark { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }

.role__id { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.nowcard__org { align-items: center; }