/* ══ JIBBICK STUDIOS ════════════════════════════════════════════════════
   One stylesheet for every page. Tokens first; everything below reads them.
   The site wears ALBEE-9's own UI: ink for the ground, cream for every word,
   amber for the one thing on a screen that wants pressing. See DESIGN.md.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;
  /* ALBEE-9's UI roles (the game's UI system sheet, H-182). Ink is the ground, as in the game. */
  --ink: #0b0f15;          /* the ground; every plate */
  --ink-2: #131922;        /* a raised plate */
  --ink-3: #1b2330;        /* a frosted band; hairlines */
  --cream: #f2e6d4;        /* all text. 15.6:1 on ink */
  --cream-2: #c9bfb0;      /* secondary text. 10.6:1 */
  --cream-3: #9a9184;      /* captions, unavailable. 6.2:1 on ink, 5.1:1 on ink-3 */
  --amber: #f29e40;        /* the one thing that wants pressing. 8.9:1 */
  --amber-soft: #f2c58c;   /* tags, the speaker, hover on amber */
  --on-amber: #0b0f15;     /* text on amber */
  --course: #8cd2f0;       /* kickers, the dev log, charts */
  --slate: #4e6670;        /* dividers and chart lines only (3.2:1, never text) */

  /* type: the game's font pairing A (D-180) */
  --display: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --sans: var(--display);
  --mono: "B612 Mono", "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --story: "Newsreader", "Iowan Old Style", Georgia, serif;

  --t-xs: .75rem;
  --t-s: .9375rem;
  --t-m: 1rem;
  --t-l: 1.125rem;
  --t-xl: clamp(1.9rem, 6vw, 2.75rem);
  --t-xxl: clamp(2.5rem, 9vw, 4.9rem);

  /* space and shape */
  --pad: clamp(1.25rem, 5vw, 2.5rem);
  --gap: 1rem;
  --radius: 10px;
  --pill: 999px;
  --tap: 44px;
  --max: 72rem;
  --header-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }  /* the attribute always wins over a layout rule */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font: 400 var(--t-m)/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vh:focus { position: fixed !important; top: .5rem; left: .5rem; z-index: 50; width: auto; height: auto; clip: auto; padding: .75rem 1rem; background: var(--cream); color: var(--ink); border-radius: 8px; }

/* ── type ─────────────────────────────────────────────────────────────── */
/* Headings in the game's UI face, bold and tight. Lamplighter is the wordmark only:
   it has ten letters, so it never sets a heading. */
.display, h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.02;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--t-xxl); line-height: .98; letter-spacing: -.02em; }
h2 { font-size: var(--t-xl); line-height: 1.05; }
h3 { font-size: 1.35rem; line-height: 1.15; letter-spacing: -.005em; }
p { margin: 0; }
.lede { font-size: var(--t-l); line-height: 1.5; color: var(--cream-2); max-width: 44ch; }
/* the kicker above a heading: the game's caps tag, in mono */
.eyebrow {
  font: 700 var(--t-xs)/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--course);
}
/* a name set as a tag: game names, record headers */
.caps {
  font-family: var(--mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.1;
}
/* the storyteller's voice (the game's Newsreader card) */
.hand, .story { font: italic 400 1.35rem/1.35 var(--story); color: var(--cream); }

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  min-height: 48px;
  padding: 0 1.4rem;
  border-radius: var(--pill);
  border: 1.5px solid transparent;
  font: 700 var(--t-m)/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.btn .arr { transition: transform .15s; }
.btn:hover .arr { transform: translateX(3px); }
/* amber: the one thing on a screen that wants pressing, as in the game */
.btn-go { background: var(--amber); color: var(--on-amber); }
.btn-go:hover { background: var(--amber-soft); }
.btn-line { border-color: var(--cream-3); color: var(--cream); background: transparent; }
.btn-line:hover { border-color: var(--amber); }
/* the key cap the game prints beside an action */
.key {
  font: 700 .75rem/1 var(--mono); padding: .3rem .4rem; border-radius: 5px;
  background: var(--on-amber); color: var(--amber);
}
/* a status chip: the lit dot and a mono caps label */
.status {
  display: inline-flex; align-items: center; gap: .55rem; width: fit-content;
  font: 700 var(--t-xs)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--amber-soft); padding: .45rem .6rem; border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--amber-soft) 50%, transparent);
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.circle-arrow {
  display: inline-grid; place-items: center;
  width: var(--tap); height: var(--tap); flex: none;
  border-radius: 50%; border: 1.5px solid currentColor;
}
@media (prefers-reduced-motion: reduce) { .btn, .btn .arr { transition: none; } .btn:hover .arr { transform: none; } }

/* ── header ───────────────────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: .75rem;
  height: var(--header-h);
  padding: 0 var(--pad);
  background: color-mix(in srgb, var(--ink) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink-3);
}
.back {
  display: grid; place-items: center;
  width: var(--tap); height: var(--tap); margin-left: -.75rem;
  color: inherit; text-decoration: none; font-size: 1.4rem;
}
/* the small lockup: the creature beside the Lamplighter name, baselines on its feet */
.brand { display: flex; align-items: flex-end; gap: .6rem; text-decoration: none; color: var(--cream); min-height: var(--tap); padding-bottom: 6px; }
.brand img { width: 36px; height: auto; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--slate) 85%, transparent)); }
.brand .lamp { height: 15px; width: auto; margin-bottom: 3px; }
.top .spacer { flex: 1; }
.nav-inline { display: none; gap: .25rem; align-items: center; }
.nav-inline a {
  font: 500 var(--t-s)/1 var(--sans); color: var(--cream-2);
  text-decoration: none; padding: 0 .8rem;
  display: inline-flex; align-items: center; min-height: var(--tap);
}
.nav-inline a:hover { color: var(--cream); }
.nav-inline a[aria-current="page"] { color: var(--cream); box-shadow: inset 0 -2px 0 var(--amber); }
.nav-inline a.nav-signin { margin-left: .5rem; padding: 0 1.1rem; border: 1.5px solid var(--amber); border-radius: var(--pill); color: var(--cream); }
.nav-inline a.nav-signin:hover { background: var(--amber); color: var(--on-amber); }
.menu-btn {
  display: grid; place-items: center;
  width: var(--tap); height: var(--tap); margin-right: -.4rem;
  background: none; border: 1px solid var(--slate); border-radius: 50%; color: var(--cream); cursor: pointer;
}
.menu-btn svg { width: 20px; height: 20px; }
.menu {
  position: fixed; inset: var(--header-h) 0 auto 0; z-index: 19;
  padding: 1rem var(--pad) 2rem;
  background: var(--ink-2);
  border-bottom: 1px solid var(--ink-3);
  box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .7);
}
.menu[hidden] { display: none; }
.menu a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px;
  font: 700 1.45rem/1 var(--display); letter-spacing: -.01em;
  text-decoration: none;
  border-bottom: 1px solid var(--ink-3);
}
.menu a::after { content: "→"; font: 400 1.1rem var(--sans); color: var(--amber); }
.menu .menu-door { margin-top: 1.25rem; border: 0; justify-content: center; font: 700 var(--t-m)/1 var(--sans); }
.menu .menu-door::after { content: none; }
@media (min-width: 960px) {
  .nav-inline { display: flex; }
  .menu-btn, .menu { display: none !important; }
}

/* ── layout ───────────────────────────────────────────────────────────── */
main { display: block; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.stack > * + * { margin-top: var(--gap); }
.section { padding-top: clamp(2.5rem, 8vw, 5rem); padding-bottom: clamp(2.5rem, 8vw, 5rem); }

/* ── page head (inner pages) ──────────────────────────────────────────── */
.page-head { padding-top: clamp(1.75rem, 6vw, 3.5rem); padding-bottom: 1.5rem; }
.page-head h1 { font-size: clamp(2.4rem, 10vw, 4.6rem); max-width: 12ch; }
.page-head .lede { margin-top: 1rem; }
.page-head .eyebrow { display: block; margin-bottom: .9rem; }

/* game glyph (a typographic stand-in until the games' own marks land) */
.glyph {
  display: inline-grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1.5px solid var(--slate); color: var(--amber-soft);
  font: italic 400 1.6rem/1 var(--story);
}

/* ── footer: the splash's last frame ──────────────────────────────────── */
.foot {
  padding: 3.5rem 0 2.5rem; margin-top: 2rem; text-align: center;
  border-top: 1px solid var(--ink-3);
  background: radial-gradient(60% 70% at 50% 25%, var(--ink-3), var(--ink) 70%);
}
.foot .wrap { display: grid; gap: 1.75rem; justify-items: center; }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.25rem; }
.foot nav a { font-size: var(--t-s); color: var(--cream-2); text-decoration: none; min-height: var(--tap); display: inline-flex; align-items: center; }
.foot nav a:hover { color: var(--cream); text-decoration: underline; text-underline-offset: .2em; }
.foot small { color: var(--cream-3); font-size: var(--t-xs); letter-spacing: .04em; }

/* the studio lockup: the creature standing on JIBBICK, STUDIOS beneath (D-295) */
.lockup { display: grid; justify-items: center; width: min(100%, 280px); color: var(--cream); text-decoration: none; }
.lockup img { width: 50%; height: auto; margin-bottom: -2px; filter: drop-shadow(0 0 40px color-mix(in srgb, var(--slate) 60%, transparent)); }
.lockup .lamp-jibbick { width: 100%; height: auto; }
.lockup .lamp-studios { width: 100%; height: auto; margin-top: 10px; color: var(--cream-2); }

/* ══ PHASE 2 ═════════════════════════════════════════════════════════════ */

/* section heads */
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.sec-head .eyebrow { display: block; margin-bottom: .6rem; }
.more {
  font: 700 var(--t-xs)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--amber); text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .5em; min-height: var(--tap);
}
.more:hover .arr { transform: translateX(3px); }
.more .arr { transition: transform .15s; }

/* notes */
.notes { display: grid; gap: 2.5rem; }
.note { display: grid; gap: 1rem; }
.note figure { margin: 0; }
.note img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--ink); }
.note .meta { font: 700 var(--t-xs)/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cream-3); }
.note .meta b { color: var(--amber); font-weight: 700; }
.note h3 { margin-top: .5rem; }
.note p { margin-top: .6rem; color: var(--cream-2); max-width: 60ch; }
@media (min-width: 840px) {
  .note { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 2.25rem; }
  .notes.compact .note { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}
.notes.compact { gap: 1.75rem; }
@media (min-width: 840px) { .notes.compact { grid-template-columns: 1fr 1fr; } .notes.compact .note { grid-template-columns: 1fr; } }

/* ══ PHASE 3: game pages ═════════════════════════════════════════════════ */
.game-head .glyph { margin-bottom: 1rem; }
.game-head h1 { font-size: clamp(2rem, 9vw, 3.6rem); max-width: 14ch; }
.actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* the section index: a line, a dot on the section you're reading */
.index { margin: 2rem 0 0; padding: 0; list-style: none; border-left: 1.5px solid var(--ink-3); }
.index a {
  position: relative; display: flex; align-items: center; min-height: var(--tap);
  padding-left: 1.25rem; text-decoration: none; color: var(--cream-3); font-size: var(--t-m);
}
.index a::before {
  content: ""; position: absolute; left: -5.75px; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  border-radius: 50%; background: var(--amber); transform: scale(0); transition: transform .2s;
}
.index a[aria-current="true"] { color: var(--cream); font-weight: 600; }
.index a[aria-current="true"]::before { transform: scale(1); }
.index a:hover { color: var(--cream); }
@media (prefers-reduced-motion: reduce) { .index a::before { transition: none; } }

.game-body { padding-bottom: 3rem; }
.game-body > section { padding-top: clamp(2.5rem, 8vw, 4rem); scroll-margin-top: calc(var(--header-h) + 1rem); }
.game-body h2 { font-size: clamp(1.8rem, 7vw, 2.6rem); max-width: 18ch; }
.game-body .body-l { margin-top: 1rem; font-size: var(--t-l); line-height: 1.55; color: var(--cream-2); max-width: 58ch; }
@media (min-width: 960px) {
  .game-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 3rem; align-items: start; }
  .game-layout .index { position: sticky; top: calc(var(--header-h) + 2rem); margin-top: clamp(2.5rem, 8vw, 4rem); }
}

/* facts */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .7rem 1.5rem; margin: 1.75rem 0 0; max-width: 40rem; }
.facts dt { font: 700 var(--t-xs)/1.9 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cream-3); }
.facts dd { margin: 0; }

/* steps */
.steps { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1.25rem; counter-reset: step; }
@media (min-width: 720px) { .steps { grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; } }
.steps li { counter-increment: step; display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; }
.steps li::before {
  content: counter(step); grid-row: span 2;
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--amber); color: var(--on-amber); font: 600 1.05rem/1 var(--display);
}
.steps h3 { font-size: 1.25rem; align-self: center; }
.steps p { color: var(--cream-2); }

/* names (tribes) */
.names { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.names li { padding: .55rem 1rem; border-radius: var(--pill); border: 1.5px solid var(--ink-3); font: 700 1rem/1.2 var(--display); }

/* people (residents) */
.people { display: grid; gap: 1rem; margin-top: 1.75rem; }
@media (min-width: 720px) { .people { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .people { grid-template-columns: 1fr 1fr 1fr; } }
.person { padding: 1.25rem 1.25rem 1.4rem; border-radius: var(--radius); background: var(--ink-2); border: 1px solid var(--ink-3); }
.person h3 { font-size: 1.2rem; color: var(--cream); }
.person .trade { display: block; margin-top: .35rem; font: 700 var(--t-xs)/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }
.person p { margin-top: .7rem; color: var(--cream-2); font-style: italic; }

/* gallery */
.gallery { display: grid; gap: 1.25rem; margin-top: 1.75rem; }
@media (min-width: 720px) { .gallery { grid-template-columns: 1fr 1fr; } }
.gallery.phones { grid-template-columns: 1fr 1fr; }
@media (min-width: 720px) { .gallery.phones { grid-template-columns: repeat(4, 1fr); } }
.gallery figure { margin: 0; }
.gallery img { width: 100%; border-radius: var(--radius); background: var(--ink); }
.gallery figcaption { margin-top: .6rem; font-size: var(--t-s); color: var(--cream-2); }
.gallery figcaption b { display: block; font: 700 var(--t-xs)/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cream-3); margin-bottom: .2rem; }
.wide-shot { margin: 1.75rem 0 0; }
.wide-shot img { width: 100%; border-radius: var(--radius); }


.play-again { margin-top: clamp(2.5rem, 8vw, 4rem); padding: 2rem 1.5rem; border-radius: var(--radius); text-align: center; background: var(--ink-2); }
.play-again h2 { margin: 0 auto 1.25rem; }
/* one shape per gallery, whatever the source crop */
.gallery:not(.phones) img { aspect-ratio: 5 / 3; object-fit: contain; }
.gallery.phones img { aspect-ratio: 4 / 5; object-fit: cover; }

/* ══ PHASE 4: signed in ══════════════════════════════════════════════════ */
[data-signed-in="yes"] .nav-signin { display: none !important; }
.who {
  display: grid; place-items: center; flex: none;
  width: var(--tap); height: var(--tap); border-radius: 50%;
  background: var(--cream); color: var(--ink); text-decoration: none;
  font: 600 1.15rem/1 var(--display); border: 2px solid var(--ink-3);
}
.who[hidden] { display: none; }
.who:hover { border-color: var(--amber); }
@media (max-width: 959px) { .who { margin-right: .25rem; } }

/* your games */
.your-list { display: grid; gap: .75rem; }
@media (min-width: 720px) { .your-list { grid-template-columns: 1fr 1fr; } }
.your-game {
  display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 1rem;
  padding: .75rem; border-radius: var(--radius); text-decoration: none;
  background: var(--ink-2); color: var(--cream); border: 1.5px solid transparent;
  transition: border-color .15s;
}
.your-game:hover { border-color: var(--amber); }
.your-thumb { width: 72px; height: 72px; border-radius: 10px; display: grid; place-items: center; }
.your-glyph { font: 600 1.6rem/1 var(--display); color: var(--cream); position: relative; }
.your-text { display: grid; gap: .3rem; min-width: 0; }
.your-text .caps { font-size: 1.05rem; }
.your-status { font-size: var(--t-s); color: var(--cream-3); }
.your-game.is-turn .your-status { color: var(--amber); font-weight: 600; }
.your-game.is-gone .your-status { font-style: italic; }
.your-empty { color: var(--cream-3); }

/* the door */
.door-form { display: grid; gap: 1rem; max-width: 26rem; margin-top: 1.75rem; }
.door-form label { display: grid; gap: .4rem; font: 700 var(--t-xs)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cream-3); }
.door-form input {
  min-height: 48px; padding: 0 1rem; border-radius: 10px;
  border: 1.5px solid var(--slate); background: var(--ink-2); color: var(--cream);
  font: 400 1rem/1 var(--sans); letter-spacing: 0; text-transform: none;
}
.door-form input:focus { outline: 2px solid var(--amber); outline-offset: 1px; border-color: transparent; }
.door-form .btn { justify-content: center; margin-top: .25rem; }
.door-form .btn[disabled] { opacity: .6; cursor: progress; }
.door-msg { min-height: 1.4em; color: var(--amber-soft); font-size: var(--t-s); }
.door-links { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.door-links a { display: inline-flex; align-items: center; min-height: var(--tap); font-size: var(--t-s); color: var(--cream-2); }
.door-note { font-size: var(--t-s); color: var(--cream-3); }
.door-already { margin-top: 1.75rem; display: grid; gap: 1rem; max-width: 30rem; }
.door-already[hidden], #door-form[hidden] { display: none; }

/* ══ ALBEE-9 REWORK, PHASE 2: home and the ALBEE-9 page ═════════════════ */
p { text-wrap: pretty; }
.btn:active { transform: translateY(1px); }

/* a screenshot hero: the picture fills the band, the copy sits on its dark end */
.feature { position: relative; display: grid; isolation: isolate; }
.feature > img {
  grid-area: 1 / 1; z-index: -2;
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 66% 50%;
}
.feature::after {
  content: ""; grid-area: 1 / 1; z-index: -1;
  background: linear-gradient(180deg, transparent 60%, var(--ink) 100%);
}
/* On a phone the copy sits under the picture; from 960px it sits on the picture's dark side. */
.feature-copy { grid-area: 2 / 1; display: grid; gap: 1rem; margin-top: -1.5rem; padding-bottom: 2rem; }
.feature-copy > * { max-width: 34rem; }
.feature h1 { max-width: 12ch; }
.feature .actions { margin-top: .5rem; }
.album > img { object-position: 58% 50%; }
@media (min-width: 960px) {
  .feature > img { aspect-ratio: 16 / 9; max-height: 78svh; object-position: 50% 50%; }
  .feature::after {
    background:
      linear-gradient(90deg, var(--ink) 0%, color-mix(in srgb, var(--ink) 82%, transparent) 28%, transparent 56%),
      linear-gradient(180deg, transparent 70%, var(--ink) 100%);
  }
  .feature-copy { grid-area: 1 / 1; align-self: center; margin-top: 0; padding-block: 4rem; }
  /* The title screen carries the game's own name in its window: keep it clear,
     and set the copy beneath the picture instead of over it. */
  .title-hero::after { background: linear-gradient(180deg, transparent 64%, var(--ink) 100%); }
  .title-hero .feature-copy {
    grid-area: 2 / 1; align-self: start; margin-top: -4rem; padding-block: 0 3rem;
    grid-template-columns: 1.1fr 1fr; column-gap: 3rem; align-items: end;
  }
  .title-hero .feature-copy > * { max-width: none; }
  .title-hero .status { grid-column: 1; }
  .title-hero h1 { grid-column: 1; grid-row: 2 / 4; align-self: start; }
  .title-hero .lede { grid-column: 2; grid-row: 2; }
  .title-hero .actions { grid-column: 2; grid-row: 3; }
}

/* the studio in one paragraph, beside the lockup */
.studio-line { display: grid; gap: 2rem; align-items: center; }
.studio-line .lede { margin-top: 1rem; }
.studio-line .more { margin-top: 1rem; }
.studio-line .lockup { justify-self: center; }
@media (min-width: 840px) { .studio-line { grid-template-columns: 1.3fr 1fr; } .studio-line .lockup { width: min(100%, 320px); } }

/* the three things ALBEE-9 is about */
.pillars { display: grid; gap: 2rem; margin-top: .5rem; }
@media (min-width: 840px) { .pillars { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.pillar { display: grid; gap: .75rem; align-content: start; min-width: 0; }
.pillar img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--ink-3); }
.pillar h3 { margin-top: .25rem; }
.pillar p { color: var(--cream-2); }

/* the small games shelf */
.shelf { display: grid; gap: .75rem; margin-top: 1.5rem; }
@media (min-width: 720px) { .shelf { grid-template-columns: 1fr 1fr; } }
.small-game {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center;
  padding: .75rem 1rem; border-radius: var(--radius); text-decoration: none;
  background: var(--ink-2); border: 1px solid var(--ink-3); transition: border-color .15s;
}
.small-game:hover { border-color: var(--amber); }
.small-game b { display: block; font: 700 var(--t-l)/1.3 var(--sans); }
.small-game .desc { display: block; text-wrap: pretty; margin-top: .25rem; color: var(--cream-2); font-size: var(--t-s); line-height: 1.4; }
.small-game .circle-arrow { color: var(--cream-2); border-color: var(--slate); }

/* ALBEE-9's page */
.ruled > .section + .section { border-top: 1px solid var(--ink-3); }
.ruled .section > .lede, .split .lede { margin-top: 1rem; }
.ruled h2 { margin-top: .75rem; max-width: 20ch; }
.split { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1.2fr 1fr; gap: 3rem; } }

/* the thought line, as the game draws it: the speaker tag, then the line on a plate */
.thoughts { display: grid; gap: 1rem; }
.thought { display: grid; gap: .5rem; justify-items: start; margin: 0; }
.speaker {
  font: 700 var(--t-xs)/1 var(--mono); letter-spacing: .06em; color: var(--amber-soft);
  border: 1px solid var(--amber-soft); border-radius: 6px; padding: .375rem .5rem;
}
.line {
  display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem;
  border-radius: 12px; background: var(--ink-2); border: 1px solid var(--ink-3);
  font-size: var(--t-l); line-height: 1.4;
}
.line::before {
  content: ""; flex: none; width: 40px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--amber) 0 14px, transparent 14px 18px, var(--amber) 18px 22px, transparent 22px 26px, var(--amber) 26px);
}

/* the loop: a list on a phone, the ship's course chart from 720px */
.course { margin-top: 2rem; }
.loop { list-style: none; margin: 0; padding: 0 0 0 1.5rem; border-left: 2px solid var(--course); display: grid; gap: 1rem; }
.loop li { position: relative; font-weight: 700; }
.loop li::before {
  content: ""; position: absolute; left: calc(-1.5rem - 8px); top: .3em; width: 14px; height: 14px;
  border-radius: 50%; background: var(--ink); border: 2px solid var(--course);
}
.course svg { display: none; width: 100%; height: auto; }
.course .orbit { fill: none; stroke: var(--slate); stroke-width: 1.5; stroke-dasharray: 3 7; }
.course .inner { fill: none; stroke: var(--course); stroke-opacity: .25; }
.course .path { fill: none; stroke: var(--course); stroke-width: 2; }
.course .node { fill: var(--ink); stroke: var(--course); stroke-width: 2; }
.course .here-ring { fill: none; stroke: var(--amber); stroke-width: 2.5; }
.course .here-dot { fill: var(--amber); }
.course text { font: 400 14px var(--sans); fill: var(--cream); }
.course text.tag { font: 700 11px var(--mono); fill: var(--cream-3); letter-spacing: .06em; }
@media (min-width: 720px) {
  .course svg { display: block; }
  .course .loop { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* what it is not, and the facts as a records readout */
.not-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .75rem; }
.not-list li {
  position: relative; padding: .75rem 1rem .75rem 2.25rem;
  border-radius: var(--radius); background: var(--ink-2); border: 1px solid var(--ink-3);
  color: var(--cream-2);
}
.not-list li::before { content: ""; position: absolute; left: 1rem; top: 1.25rem; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.not-list b { color: var(--cream); }
.readout { display: grid; margin: 0; border: 1px solid var(--ink-3); border-radius: var(--radius); overflow: hidden; }
.readout div { display: grid; grid-template-columns: 11ch 1fr; gap: 1rem; padding: .75rem 1rem; background: var(--ink-2); border-top: 1px solid var(--ink-3); }
.readout div:first-child { border-top: 0; }
.readout dt { font: 700 var(--t-xs)/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cream-3); }
.readout dd { margin: 0; font-weight: 500; }

/* screenshots */
.shots { display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 720px) { .shots { grid-template-columns: 1fr 1fr; } .shots figure:first-child { grid-column: 1 / -1; } }
.shots figure { margin: 0; }
.shots img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--ink-3); }
.shots figcaption { margin-top: .5rem; color: var(--cream-2); font-size: var(--t-s); }
@media (prefers-reduced-motion: reduce) { .small-game, .btn:active { transition: none; transform: none; } }

/* ══ ALBEE-9 REWORK, PHASE 3: studio, small games, dev log ═══════════════ */
@media (prefers-reduced-motion: reduce) { .more .arr { transition: none; } }

/* a game page's banner: a real screenshot where the painting slot was */
.shot-band { background: var(--ink-2); border-bottom: 1px solid var(--ink-3); }
.shot-band img { width: 100%; aspect-ratio: 16 / 10; max-height: 64svh; object-fit: cover; }
@media (min-width: 960px) { .shot-band img { aspect-ratio: 3 / 1; } }
/* Monument's board is a cut-out: show the whole island on the band rather than crop it */
.shot-band.whole img { object-fit: contain; padding-block: 1rem; }

/* the studio page */
.studio-line h1 { margin-top: .75rem; font-size: clamp(2.25rem, 7vw, 3.75rem); max-width: 14ch; }
.studio-line .actions { margin-top: 1.5rem; }
.contact { margin-top: .75rem; font: 400 var(--t-s)/1.4 var(--mono); color: var(--cream-3); user-select: all; }
.making {
  display: grid; gap: 1rem; margin: 1.5rem 0 .75rem; padding: .75rem; text-decoration: none;
  border-radius: var(--radius); background: var(--ink-2); border: 1px solid var(--ink-3); transition: border-color .15s;
}
.making:hover { border-color: var(--amber); }
.making img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }
.making-text { display: grid; gap: .5rem; justify-items: start; padding: 0 .25rem .25rem; }
.making-text b { font: 700 var(--t-xl)/1.05 var(--display); }
.making .desc { color: var(--cream-2); max-width: 46ch; text-wrap: pretty; }
.making .circle-arrow { display: none; }
@media (min-width: 840px) {
  .making { grid-template-columns: 1.2fr 1fr auto; align-items: center; gap: 1.5rem; padding-right: 1.5rem; }
  .making .circle-arrow { display: inline-grid; color: var(--cream-2); border-color: var(--slate); }
}

/* the small games page: a tile per game, its real board or town on top */
.tiles { display: grid; gap: 1.5rem; padding-bottom: 1rem; }
@media (min-width: 840px) { .tiles { grid-template-columns: 1fr 1fr; } }
.tile {
  display: grid; text-decoration: none; overflow: hidden;
  border-radius: var(--radius); background: var(--ink-2); border: 1px solid var(--ink-3); transition: border-color .15s;
}
.tile:hover { border-color: var(--amber); }
.tile img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ink); }
.tile-text { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding: 1rem; }
.tile-text b { display: block; font: 700 var(--t-l)/1.3 var(--display); }
.tile .desc { display: block; margin-top: .25rem; color: var(--cream-2); font-size: var(--t-s); line-height: 1.5; text-wrap: pretty; }

/* the dev log: Records, as the game keeps them */
.posts { display: grid; gap: 3rem; padding-block: 1rem 3rem; }
.post { display: grid; gap: 1.5rem; align-items: start; }
.post figure { margin: 0; }
.post img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--ink-3); }
.post-head, .record-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  font: 400 var(--t-xs)/1.4 var(--mono); letter-spacing: .04em; color: var(--cream-3);
}
.post-head b, .record-head b { color: var(--course); font-weight: 700; }
.post h2 { margin-top: .75rem; font-size: clamp(1.5rem, 4vw, 2.25rem); }
.post-body p:not(.post-head) { margin-top: 1rem; color: var(--cream-2); max-width: 62ch; }
@media (min-width: 840px) { .post { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2.5rem; } }
.posts > .post + .post { border-top: 1px solid var(--ink-3); padding-top: 3rem; }
/* a draft is visibly a draft; `build.mjs --check` refuses to pass while one exists */
.draft-chip {
  font: 700 var(--t-xs)/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); background: var(--amber-soft); border-radius: 6px; padding: .3rem .45rem;
}

/* the latest records, on the home page */
.draft-note { margin-bottom: .75rem; }
.records { display: grid; gap: .75rem; }
@media (min-width: 840px) { .records { grid-template-columns: repeat(3, 1fr); } }
.record {
  display: grid; gap: .5rem; align-content: start; padding: 1rem; text-decoration: none; min-width: 0;
  border-radius: var(--radius); background: var(--ink-2); border: 1px solid var(--ink-3); transition: border-color .15s;
}
.record:hover { border-color: var(--course); }
.record img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; margin-bottom: .25rem; }
.record-title { font: 700 var(--t-l)/1.3 var(--display); }
.record-line { color: var(--cream-2); font-size: var(--t-s); line-height: 1.5; text-wrap: pretty; }

/* your games: a thumbnail of its own now the painting washes are gone */
.your-thumb { background: radial-gradient(80% 70% at 50% 25%, var(--slate), var(--ink-3) 70%); border: 1px solid var(--ink-3); }

/* the 404 */
.lost { padding-block: 4rem 6rem; }
.lost .actions { margin-top: 2rem; }
@media (prefers-reduced-motion: reduce) { .making, .tile, .record { transition: none; } }