/* © 2026 William C. Chesher. All Rights Reserved.
   front - glitch!'s front page (front_page.py), on top of glitch.css

   SPAWN'S SHAPE IN GLITCH!'S OWN BRAND (Maestro, 2026-11-06: "I want outright elegance and model it on spawn").
   A splash that fills the first screen (the lockup at display size, the line, the lede, the way in), one composed
   grid under it per audience, the reasons, and one closing row. The way in is the join box itself, because this
   address is where a room types the word off the projector: on a phone the box comes straight after the logo.

   Every colour is a skin token (app.page puts them on :root). One accent leads: the house magenta, with the three
   other tile colours as light, never as new hues. Motion is the house's: hard steps for the tear, the entrance
   curve for arrivals, nothing bounces, and reduced motion arrives settled (glitch.css's clamp). */

.front { --gutter: clamp(16px, 4vw, 56px); --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .16);
  --radius: 16px; --mono: "JetBrains Mono", ui-monospace, monospace; overflow-x: clip; }
.front a { color: inherit; }
.front h2, .front h3 { margin: 0; color: var(--ink); }

/* ---- the buttons: one control tall, like every glitch! page ---- */
.fp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-h); padding: 0 18px;
  border-radius: 10px; background: var(--accent); color: var(--accentink); font-weight: 600; font-size: 15px;
  text-decoration: none; white-space: nowrap; border: 1px solid var(--accent);
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.front .fp-btn { color: var(--accentink); }
.front .fp-btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.front .fp-btn.ghost:hover { border-color: var(--accent); color: var(--accenttext); }

/* ---- the splash ---- */
.fp-hero { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
  background:
    radial-gradient(40% 36% at 50% 40%, color-mix(in srgb, var(--a1) 12%, transparent), transparent 72%),
    radial-gradient(60% 50% at 50% 100%, color-mix(in srgb, var(--a4) 10%, transparent), transparent 72%); }
/* the broadcast: faint scan lines over the whole splash, and the house seam along its foot */
.fp-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 4px);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 85%); mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 85%); }
.fp-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--a1) 22%, var(--a2) 55%, var(--a4) 82%, transparent); opacity: .8; }

.fp-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px var(--gutter); }
.fp-motto { display: flex; align-items: center; gap: 14px; margin: 0; font: 400 12px/1 var(--mono); letter-spacing: .3em;
  text-transform: uppercase; color: var(--muted); }
.fp-motto::before { content: ""; width: 32px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent)); }
.fp-nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px clamp(14px, 2.4vw, 28px); font-size: 15px; }
.fp-nav a:not(.fp-btn) { color: var(--ink2); text-decoration: none; }
.fp-nav a:not(.fp-btn):hover { color: var(--ink); }

.fp-body { flex: 1; width: 100%; padding: 0 var(--gutter) clamp(36px, 6vh, 72px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }

/* the logo: the wordmark and the tiles mark at display size, held to the screen's height as well as its width so the
   splash and the join box fit a Chromebook's 1366 x 768 with nothing under the fold */
.fp-logo { --logo: min(15vw, 15vh, 168px); display: flex; align-items: center; justify-content: center; gap: .22em; margin: 0;
  font-size: var(--logo); line-height: 1; }
.fp-word { font-family: var(--display); color: var(--ink); letter-spacing: -.01em; line-height: .9; padding-bottom: .06em;
  text-shadow: -.016em 0 var(--a2); animation: fp-tear-in 520ms steps(2, end) 120ms both, fp-tear 9s steps(1, end) 2.4s infinite; }
.fp-logo .lockmark { width: 1.18em; height: auto; flex: none; animation: fp-mark 9s steps(1, end) 2.4s infinite; }
/* THE TEAR: the wordmark arrives as a beautiful error (the door's own shudder), then every nine seconds the signal
   slips for a quarter of a second and settles. Hard steps, never a wobble. */
@keyframes fp-tear-in {
  0%   { transform: translate(-3px, 1px); text-shadow: -.09em -.02em var(--a2), .07em .02em var(--accent); opacity: .4; }
  50%  { transform: translate(3px, -1px); text-shadow: .07em 0 var(--a2), -.06em 0 var(--accent); opacity: 1; }
  100% { transform: none; text-shadow: -.016em 0 var(--a2); }
}
@keyframes fp-tear {
  0%, 96.4%, 100% { transform: none; text-shadow: -.016em 0 var(--a2); clip-path: none; }
  97%   { transform: translate(-.03em, 0); text-shadow: -.07em 0 var(--a2), .05em 0 var(--accent); clip-path: inset(0 0 46% 0); }
  97.6% { transform: translate(.025em, 0); text-shadow: .05em 0 var(--a2), -.05em 0 var(--wrong); clip-path: none; }
  98.2% { transform: translate(-.01em, 0); text-shadow: -.03em 0 var(--a2), .02em 0 var(--accent); }
}
@keyframes fp-mark {
  0%, 96.8%, 100% { transform: none; filter: none; }
  97.2% { transform: translate(.04em, 0) skewX(-6deg); filter: hue-rotate(40deg); }
  97.8% { transform: translate(-.03em, 0); filter: none; }
}
@media (prefers-reduced-motion: reduce) { .fp-word, .fp-logo .lockmark { animation: none; } }

.fp-body h1 { margin: clamp(28px, 6vh, 72px) 0 0; font: 400 min(clamp(28px, 3.2vw, 50px), 8.6vw, 6vh)/1.02 var(--display);
  letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.fp-body h1 .tear { white-space: nowrap; color: var(--accenttext); text-shadow: -.03em 0 color-mix(in srgb, var(--a2) 70%, transparent); }
.fp-lede { margin: clamp(12px, 2.2vh, 22px) 0 0; max-width: 36em; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5;
  color: var(--ink2); text-wrap: balance; }

/* the way in: the door's form on a lit console */
/* the way in, Spawn's restraint (Maestro 2026-11-06: "make glitch look like spawn minimalistic"): no card, one slim row
   where Spawn has its two buttons. The labels stay for screen readers and the boxes carry them as placeholders. */
.fp-join { width: min(100%, 600px); margin-top: clamp(28px, 5vh, 56px); text-align: left; }
.fp-join .doorerr { margin-bottom: 14px; }
.fp-join .joinform { display: grid; grid-template-columns: minmax(0, 1fr) 104px auto; gap: 10px; align-items: stretch; }
.fp-signin .joinform { grid-template-columns: minmax(0, 1fr) auto; }
.fp-join .fp-fields, .fp-join .fp-field { display: contents; }
.fp-join label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.fp-join input:not([type="hidden"]) { min-width: 0; height: 52px; margin: 0; padding: 0 16px; font-size: 18px;
  background: color-mix(in srgb, var(--surface) 70%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fp-join #pin, .fp-join #tcode { font-family: var(--mono); letter-spacing: .14em; }
.fp-join #code { font-family: inherit; font-size: 18px; letter-spacing: 0; text-align: left; }
.fp-join #pin { text-align: center; padding: 0 8px; }
.fp-join input::placeholder { font-family: var(--body, inherit); letter-spacing: 0; color: var(--muted); }
.fp-join button[type="submit"] { grid-row: 1; grid-column: -2; width: auto; height: 52px; margin: 0; padding: 0 28px; font-size: 16px; }
.fp-join .joinform > :not(.fp-fields):not(button):not(input), .fp-join > .hint { grid-column: 1 / -1; }
.fp-join .hint { margin: 4px 0 0; font-size: 13px; line-height: 1.5; text-align: center; color: var(--muted); }
.fp-join .hint b { color: var(--ink); font-weight: 600; }
.fp-join .pinhelp { margin-top: 0; }
.fp-join > .hint { margin-top: 10px; }
.fp-signin .doorerr:only-child { margin-bottom: 0; }

/* ---- the scintillating backgrounds (static/front-field.js) ----
   A canvas of ASCII strokes fills the splash edge to edge and the closing row behind its words. The words always win:
   a soft pool of the void sits behind the splash's column, and the field fades toward every edge. */
.fp-copy { width: 100%; display: flex; flex-direction: column; align-items: center; }
.fp-sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 95% at 50% 45%, #000 45%, transparent 100%); mask-image: radial-gradient(120% 95% at 50% 45%, #000 45%, transparent 100%); }
.fp-sky canvas { display: block; }
.fp-body { position: relative; }
.fp-body::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(980px, 120%); height: 112%; pointer-events: none;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--surface) 88%, transparent) 40%, color-mix(in srgb, var(--surface) 55%, transparent) 72%, transparent); }

/* the ticker: the show's own words, running under the splash like a broadcast lower third */
.fp-ticker { overflow: hidden; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 30%, var(--surface));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.fp-ticker p { display: flex; width: max-content; margin: 0; padding: 13px 0; font: 400 12px/1 var(--mono); letter-spacing: .26em;
  text-transform: uppercase; color: var(--muted); animation: fp-ticker 48s linear infinite; }
.fp-ticker span { display: inline-flex; align-items: center; gap: 0; padding-right: 2.6em; white-space: nowrap; }
.fp-ticker span::after { content: "//"; margin-left: 2.6em; letter-spacing: .1em; color: var(--accenttext); }
.fp-ticker span:nth-child(3n + 2)::after { color: var(--a2); }
.fp-ticker span:nth-child(3n)::after { color: var(--a4); }
@keyframes fp-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .fp-ticker p { animation: none; } }

/* ---- the bands under the splash ---- */
.fp-band { max-width: 1440px; margin: 0 auto; padding: clamp(48px, 6vw, 88px) var(--gutter) 0; }
.fp-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 400 12px/1 var(--mono); letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted); }
.fp-eyebrow::before { content: ">_"; letter-spacing: 0; color: var(--accenttext); }
.fp-eyebrow.sky::before { color: var(--a2); }
.fp-band > h2 { max-width: 18em; margin-bottom: 32px; font: 400 clamp(30px, 3.6vw, 48px)/1.06 var(--display); letter-spacing: -.02em; text-wrap: balance; }

.fp-bento { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.fp-beats { display: contents; }
.fp-cell { --c: var(--accent); position: relative; min-width: 0; overflow: hidden; margin: 0; padding: 24px 26px 26px;
  background: color-mix(in srgb, var(--panel) 34%, var(--surface)); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color var(--fast) var(--ease); }
.fp-cell::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--c), transparent 75%); }
.fp-cell:hover { border-color: color-mix(in srgb, var(--c) 40%, var(--line)); }
.fp-cell .n { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 400 13px/1 var(--mono); color: var(--c); }
.fp-cell .n::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--c); box-shadow: 0 0 16px -2px var(--c); }
.fp-cell h3 { margin: 0 0 8px; font: 400 clamp(22px, 1.9vw, 28px)/1.1 var(--display); letter-spacing: -.01em; }
.fp-cell .say { margin: 0; max-width: 34em; font-size: 17px; line-height: 1.5; color: var(--ink2); text-wrap: pretty; }
.fp-cell .say b { color: var(--ink); font-weight: 600; }

/* how a game goes: the beats walk the four tile colours, the host holds the tall cell */
.fp-game { grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas: "lobby question question host" "reveal reveal final host" "credits credits credits credits"; }
.fp-cell.lobby { grid-area: lobby; --c: var(--a1); }
.fp-cell.question { grid-area: question; --c: var(--a2); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.fp-cell.reveal { grid-area: reveal; --c: var(--a3); }
.fp-cell.final { grid-area: final; --c: var(--a4); }
.fp-cell.credits { grid-area: credits; --c: var(--correct); }
.fp-cell.host { grid-area: host; --c: var(--a2); display: flex; flex-direction: column; gap: 12px;
  background: radial-gradient(70% 60% at 85% 100%, color-mix(in srgb, var(--a2) 14%, transparent), transparent 75%), color-mix(in srgb, var(--panel) 40%, var(--surface));
  border-color: color-mix(in srgb, var(--a2) 26%, var(--line)); }
.fp-cell.host .fp-eyebrow { margin: 0; }
.fp-cell.host h3 { margin: 0; font-size: clamp(26px, 2.4vw, 34px); }

/* the lobby's join line, as the projector draws it */
.fp-joinline { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; margin: 20px 0 0; padding: 8px 14px; border: 1px solid var(--line-2);
  border-radius: 999px; font: 400 14px/1.2 var(--mono); letter-spacing: .06em; color: var(--ink2); }
.fp-joinline b { color: var(--accenttext); font-weight: 600; }

.fp-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 18px 0 0; padding: 0; }
.fp-chips li { padding: 5px 10px; border-radius: 999px; font: 400 13px/1.2 var(--mono); color: var(--ink2);
  border: 1px solid color-mix(in srgb, var(--c) 40%, var(--line)); background: color-mix(in srgb, var(--c) 7%, transparent); }

/* the example phone: the real question screen, small (player.css's tiles: the ASCII face, the number, the answer) */
.fp-phone { width: 212px; padding: 16px 12px 12px; border-radius: 26px; border: 1px solid var(--line-2); background: var(--surface);
  box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--a2) 55%, transparent), inset 0 0 0 5px rgba(255, 255, 255, .025); }
.fp-chip { display: inline-block; padding: 3px 9px; border: 1px solid var(--line-2); border-radius: 999px; font: 400 10px/1.3 var(--mono); color: var(--muted); }
.fp-phone .q { margin: 12px 4px 16px; font: 400 17px/1.15 var(--display); color: var(--ink); text-align: center; }
.fp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fp-tile { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 64px; padding: 18px 6px 8px;
  border-radius: 6px; text-align: center; font: 600 13px/1.1 "Barlow", system-ui, sans-serif; }
.fp-tile .face { position: absolute; left: 7px; top: 5px; font: 600 10px/1 var(--mono); }
.fp-tile .num { position: absolute; right: 7px; top: 5px; font: 600 10px/1 var(--mono); }
.fp-tile.t1 { background: var(--a1); color: var(--a1ink); }
.fp-tile.t2 { background: var(--a2); color: var(--a2ink); }
.fp-tile.t3 { background: var(--a3); color: var(--a3ink); }
.fp-tile.t4 { background: var(--a4); color: var(--a4ink); }

/* the reveal: how the room split */
.fp-split { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; max-width: 560px; }
.fp-split li { display: grid; grid-template-columns: 92px minmax(0, 1fr) 28px; align-items: center; gap: 12px; font: 400 14px/1.2 var(--mono); color: var(--ink2); }
.fp-split .bar { height: 12px; border-radius: 3px; background: rgba(255, 255, 255, .05); overflow: hidden; }
.fp-split .bar i { display: block; height: 100%; width: calc(var(--share) * 100%); border-radius: 3px; background: var(--muted); opacity: .55; }
.fp-split .t1 .bar i { background: var(--a1); } .fp-split .t2 .bar i { background: var(--a2); }
.fp-split .t3 .bar i { background: var(--a3); } .fp-split .t4 .bar i { background: var(--a4); }
.fp-split .right .who { color: var(--ink); font-weight: 600; }
.fp-split .right .bar i { opacity: 1; box-shadow: 0 0 18px -2px var(--a1); }
.fp-split .count { text-align: right; color: var(--ink); }
.fp-goover { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 18px 0 0; font-size: 15px; color: var(--ink2); }
.fp-goover .tag, .fp-wager .lbl, .fp-prompt .lbl { padding: 3px 8px; border-radius: 6px; font: 600 11px/1.3 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--surface); background: var(--a3); }

/* the serious glitch: a wager */
.fp-wager { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: center; margin: 20px 0 0; }
.fp-wager .lbl { background: var(--a4); }
.fp-wager .track { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.fp-wager .track i { display: block; width: 32%; height: 100%; background: linear-gradient(90deg, var(--a4), var(--a1)); }
.fp-wager .amt { grid-column: 2; font: 400 13px/1 var(--mono); color: var(--ink2); }

/* the credits' titles */
.fp-titles { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; }
.fp-titles li { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.fp-titles b { font: 400 18px/1.2 var(--display); color: var(--ink); }
.fp-titles span { font-size: 15px; line-height: 1.45; color: var(--muted); }

/* the host's lines */
.fp-thread { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--a2) 28%, var(--line));
  box-shadow: 0 40px 90px -40px color-mix(in srgb, var(--a2) 45%, transparent); }
.fp-thread .line { margin: 0; padding: 9px 12px; border-radius: 10px; font-size: 16px; line-height: 1.4; color: var(--ink);
  background: color-mix(in srgb, var(--a2) 9%, transparent); }
.fp-thread .who { display: block; margin: 0 0 3px; font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--a2); }

/* for producers: one grid, the house magenta leading */
.fp-make { grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas: "describe describe station" "lineup rerun satellite"; }
.fp-make .describe { grid-area: describe; }
.fp-make .station { grid-area: station; --c: var(--a2); }
.fp-make .lineup { grid-area: lineup; --c: var(--a3); }
.fp-make .rerun { grid-area: rerun; --c: var(--a4); }
.fp-make .satellite { grid-area: satellite; --c: var(--a2); }
.fp-prompt { display: flex; align-items: center; gap: 12px; margin: 20px 0 0; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, .03); font: 400 15px/1.3 var(--mono); color: var(--ink); }
.fp-prompt .lbl { flex: none; background: var(--accent); color: var(--accentink); }
.fp-prompt .caret { flex: none; width: 2px; height: 1.1em; margin-left: -8px; background: var(--accent); animation: fp-caret 1.1s steps(1, end) infinite; }
@keyframes fp-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fp-prompt .caret { animation: none; } }
.fp-cellrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 18px 0 0; }
.fp-credit { padding: 6px 12px; border-radius: 8px; font: 600 15px/1 var(--mono); color: var(--ink);
  background: color-mix(in srgb, var(--correct) 12%, transparent); border: 1px solid color-mix(in srgb, var(--correct) 40%, var(--line)); }
.fp-credit i { font-style: normal; font-weight: 400; color: var(--muted); }
.fp-back { font: 400 14px/1.2 var(--mono); color: var(--correct); }

/* what glitch! sees: five cells, three over two, one tile colour each */
.fp-sees { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.fp-sees > li { grid-column: span 2; }
.fp-sees > li:nth-child(n+4) { grid-column: span 3; }
.fp-sees .think { --c: var(--a2); }
.fp-sees .sure { --c: var(--a3); }
.fp-sees .tried { --c: var(--a4); }
.fp-sees .talk { --c: var(--correct); }
.fp-sees .fp-goover .tag { background: var(--c); }
.fp-sees .fp-goover .tag.back { background: var(--correct); }

/* the fun counts: the credit promises, six on the seam */
.fp-counts > h2 { margin-bottom: 12px; }
.fp-counts > h2 .tear { color: var(--accenttext); text-shadow: -.025em 0 color-mix(in srgb, var(--a2) 80%, transparent); }
.fp-sub { max-width: 40em; margin: 0 0 32px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; color: var(--ink2); }
.fp-promises { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 28px; }
.fp-promises li { padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--correct) 45%, var(--line-2)); }
.fp-promises h3 { margin: 0 0 8px; font: 400 22px/1.15 var(--display); }
.fp-promises p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink2); }
.fp-promises p b { color: var(--ink); font-weight: 600; }
.fp-promises .fp-cellrow { margin-top: 14px; }

/* why glitch!: four reasons in a row, on the seam */
.fp-principles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.fp-principles li { padding-top: 18px; border-top: 1px solid var(--line-2); }
.fp-principles li:nth-child(1) { border-top-color: var(--a1); }
.fp-principles li:nth-child(2) { border-top-color: var(--a2); }
.fp-principles li:nth-child(3) { border-top-color: var(--a3); }
.fp-principles li:nth-child(4) { border-top-color: var(--a4); }
.fp-principles .n { margin: 0 0 10px; font: 400 13px/1 var(--mono); color: var(--muted); }
.fp-principles h3 { margin: 0 0 8px; font: 400 22px/1.15 var(--display); }
.fp-principles p:not(.n) { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink2); }

/* the mark: the brand's own moment, full bleed. The tiles drawn as a contour map in ASCII, the line over them. */
.fp-brand { position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(56px, 7vw, 96px); min-height: min(78vh, 720px);
  display: flex; align-items: center; padding: 64px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fp-brand .in { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }
.fp-brand .fp-sky { -webkit-mask-image: radial-gradient(60% 90% at 72% 50%, #000 45%, transparent 100%); mask-image: radial-gradient(60% 90% at 72% 50%, #000 45%, transparent 100%); }
.fp-brand h2 { margin: 0; max-width: 7em; font: 400 clamp(48px, 8.4vw, 132px)/.92 var(--display); letter-spacing: -.03em; color: var(--ink); }
.fp-brand h2 .tear { color: var(--accenttext); text-shadow: -.025em 0 color-mix(in srgb, var(--a2) 80%, transparent); }
.fp-brand .say { margin: 24px 0 0; max-width: 24em; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; color: var(--ink2); text-wrap: pretty; }
@media (max-width: 639px) {
  .fp-brand { min-height: 0; padding: 96px 0; text-align: center; }
  .fp-brand .fp-eyebrow { justify-content: center; }
  .fp-brand h2 { max-width: none; }
  .fp-brand .say { margin-left: auto; margin-right: auto; }
  .fp-brand .fp-sky { -webkit-mask-image: radial-gradient(90% 70% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(90% 70% at 50% 50%, #000 30%, transparent 100%); }
  .fp-brand::before { content: ""; position: absolute; z-index: -1; inset: 25% 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--surface) 80%, transparent) 40%, transparent); }
}

/* the close: one row, the two ways in */
.fp-close { position: relative; isolation: isolate; overflow: hidden; border-top: 1px solid var(--line);
  background: radial-gradient(40% 140% at 8% 100%, color-mix(in srgb, var(--a1) 12%, transparent), transparent 70%),
              radial-gradient(36% 140% at 94% 0%, color-mix(in srgb, var(--a2) 9%, transparent), transparent 70%); }
.fp-close .in { max-width: 1440px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "say go" "say links"; align-items: center; gap: 16px 48px; }
.fp-close p { grid-area: say; margin: 0; max-width: 40ch; font-size: 18px; line-height: 1.5; color: var(--ink2); }
.fp-close .go { grid-area: go; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.fp-links { grid-area: links; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 20px; font: 400 13px/1.4 var(--mono); }
.fp-links a { color: var(--muted); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.fp-links a:hover { color: var(--accenttext); }

/* ---- narrower ---- */
@media (max-width: 1099px) {
  .fp-game { grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "lobby final" "question question" "reveal reveal" "host host" "credits credits"; }
  .fp-cell.host { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 28px; align-content: start; }
  .fp-cell.host > :not(.fp-thread) { grid-column: 1; }
  .fp-cell.host .fp-thread { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; align-self: center; }
  .fp-make { grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "describe describe" "station lineup" "rerun satellite"; }
  .fp-sees { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-sees > li, .fp-sees > li:nth-child(n+4) { grid-column: auto; }
  .fp-sees > li:last-child { grid-column: 1 / -1; }
  .fp-promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-titles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .fp-close .in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "say" "go" "links"; }
  .fp-close .go, .fp-links { justify-content: flex-start; }
}
/* A PHONE: the join box straight after the logo. A contestant here has a word to type; the story waits below it. */
@media (max-width: 639px) {
  .fp-motto { display: none; }
  .fp-head { justify-content: center; padding-top: 14px; padding-bottom: 6px; }
  .fp-nav { flex-wrap: nowrap; gap: 18px; font-size: 14px; }
  .fp-logo { --logo: min(20vw, 96px); }
  .fp-join { margin-top: 28px; }

  .fp-game, .fp-make { grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none; }
  .fp-game > *, .fp-beats > *, .fp-make > * { grid-area: auto !important; }
  .fp-cell { padding: 20px 18px 22px; }
  .fp-cell.question { grid-template-columns: minmax(0, 1fr); }
  .fp-cell.question .fp-phone { justify-self: center; }
  .fp-cell.host { display: flex; }
  .fp-principles, .fp-titles, .fp-promises { grid-template-columns: minmax(0, 1fr); }
  .fp-sees { grid-template-columns: minmax(0, 1fr); }
  .fp-split li { grid-template-columns: 84px minmax(0, 1fr) 24px; }
  /* the suite's feedback corner is fixed at the bottom left: the last line of the page ends above it */
  .fp-close .in { padding-bottom: 64px; }
}
@media (max-width: 479px) {
  .front:not(.producer) .fp-join .joinform { grid-template-columns: minmax(0, 1fr) auto; }
  .front:not(.producer) .fp-join #code { grid-column: 1 / -1; }
  .front:not(.producer) .fp-join button[type="submit"] { grid-row: 2; }
}

/* THE ABOUT PAGE (/about, Maestro 2026-11-06: "we do need an about"): the front page's look, a shorter splash with
   the mark in the header, the pillars, the floor, the brand band, the close. */
.fp-short { min-height: 0; }
.fp-short .fp-body { padding-top: clamp(40px, 9vh, 120px); padding-bottom: clamp(56px, 10vh, 120px); }
.fp-short .fp-body h1 { margin-top: 0; font-size: min(clamp(34px, 4.4vw, 64px), 9vw); }
.fp-short .fp-eyebrow { justify-content: center; }
.fp-short .fp-lede { max-width: 30em; }
.fp-home { display: inline-flex; align-items: center; gap: .22em; font-size: 26px; text-decoration: none; color: var(--ink); }
.fp-home .lockmark { width: 1.18em; height: auto; }
.fp-home .fp-word { font-size: 1em; animation: none; }
.fp-principles.fp-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fp-floor .say { max-width: 40em; margin: 0; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; color: var(--ink2); }
.fp-floor .say a { color: var(--accenttext); text-underline-offset: 3px; }
@media (max-width: 899px) { .fp-principles.fp-three { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639px) {
  .front.about .fp-head { justify-content: space-between; }
  .front.about .fp-nav a[href="/#how"] { display: none; }
  .fp-home { font-size: 22px; }
}