@charset "utf-8";
/* ==========================================================================
   WOLF GAME
   Palette lifted verbatim from working/03_art/flock_compositor.py
   (SHEEP_BG / WOLF_BG / FLEECE / OUTLINE). Nothing here is invented.
   Day at the top, dusk from the Pack down. Flat blocks, hard edges,
   no soft shadows, no gradients on type.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts -- */
@font-face {
  font-family: "Silkscreen";
  src: url("/fonts/silkscreen-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Silkscreen";
  src: url("/fonts/silkscreen-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/fonts/plexmono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/fonts/plexmono-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------- tokens -- */
:root {
  /* SHEEP_BG */
  --sky:       #6ecbf5;
  --grass:     #7acd54;
  --barn:      #e8564a;
  --sun:       #ffc53d;
  --pink:      #ff9ac4;
  --lav:       #b29af8;
  --mint:      #6fe3c1;
  --peach:     #ffa25e;
  /* WOLF_BG */
  --night:     #23365c;
  --blood:     #8c2428;
  --forest:    #1e563a;
  --dusk:      #624aa8;
  --twilight:  #3a6e7c;
  --hay:       #c49630;
  /* OUTLINE + FLEECE */
  --ink:       #2b2320;
  --ink-deep:  #1a1513;
  --ink-black: #12100f;
  --cloud:     #f5f1e6;
  --cream:     #f2e3b3;

  --fg: var(--ink);
  --focus: var(--ink);

  --face-display: "Silkscreen", ui-monospace, monospace;
  --face-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --face-mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* monotonic step scale */
  --sp-1: 0.375rem;
  --sp-2: 0.75rem;
  --sp-3: 1.125rem;
  --sp-4: 1.75rem;
  --sp-5: 2.5rem;
  --sp-6: 3.5rem;
  --sp-7: 5rem;

  --edge: 4px;
  --pop: 7px;
  --wrap: 1180px;
}

/* ---------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink-black);
  color: var(--fg);
  font-family: var(--face-body);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-weight: 420;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, select { font: inherit; color: inherit; }
code, .num { font-family: var(--face-mono); font-size: 0.92em; }
code { font-weight: 600; overflow-wrap: anywhere; }

:where(a, button, select, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* A grid item's default `min-width: auto` takes the min-content width of its
   deepest child, so ONE `min-width: 400px` table 3 levels down pushed the whole
   Pack column to 408px inside a 360px viewport and gave the BODY a horizontal
   scrollbar. Every single-column grid is pinned to minmax(0, 1fr) and every grid
   item is allowed to shrink; the wide table then scrolls inside its own box,
   which is where the sideways scroll belongs. */
.hero__grid, .side, .flow, .two, .tiers, .files, .facts, .sheet__in, .stats {
  grid-template-columns: minmax(0, 1fr);
}
.hero__grid > *, .side > *, .flow > *, .two > *, .tiers > *,
.files > *, .facts > *, .sheet__in > *, .stats > *, .scroller { min-width: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--sun); color: var(--ink); padding: var(--sp-2) var(--sp-3);
  font-family: var(--face-display); text-decoration: none; border: var(--edge) solid var(--ink);
}
.skip-link:focus { left: var(--sp-3); top: var(--sp-3); }

/* ------------------------------------------------------------- topbar --- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: var(--ink);
  color: var(--cloud);
  border-bottom: var(--edge) solid var(--ink-black);
  --focus: var(--sun);
}
.topbar__in {
  max-width: var(--wrap); margin: 0 auto;
  padding: var(--sp-2) var(--sp-3);
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: nowrap;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; }
.brand__mark { width: 28px; height: 28px; image-rendering: pixelated; border: 2px solid var(--cloud); }
.brand__name { font-family: var(--face-display); font-weight: 700; font-size: 13px; letter-spacing: 0.02em; }
.nav { flex: 1 1 auto; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.nav__list { display: flex; gap: var(--sp-3); white-space: nowrap; padding-bottom: 2px; }
.nav a {
  text-decoration: none; font-size: 0.9rem; font-weight: 600;
  border-bottom: 2px solid transparent; padding-bottom: 2px;
}
.nav a:hover { border-bottom-color: var(--sun); }
.pill {
  flex: 0 0 auto;
  font-family: var(--face-display); font-size: 11px;
  padding: 6px 9px; border: 2px solid var(--ink);
}
.pill--warn { background: var(--sun); color: var(--ink); }

/* On one row at 390px the brand and the pill leave the nav a 54px scroll window,
   which is a scroller nobody can use; at 768 the last link is still clipped
   behind the pill. The seven links need 459px, so the bar stays one row only
   where brand + nav + pill genuinely fit (900px and up). Below that it becomes
   two rows and stops being sticky, which also keeps it from eating 12% of a
   phone viewport for the whole scroll. */
@media (max-width: 899px) {
  .topbar { position: static; }
  .topbar__in { flex-wrap: wrap; row-gap: var(--sp-2); column-gap: var(--sp-2); }
  .brand { flex: 1 1 auto; }
  .pill { order: 2; }
  .nav { order: 3; flex: 1 0 100%; }
  .nav__list { gap: var(--sp-2); }
  .nav a { font-size: 0.95rem; }
}

/* -------------------------------------------------------------- bands --- */
.band { padding: var(--sp-6) var(--sp-3); }
.wrap { max-width: var(--wrap); margin: 0 auto; }

.band--sky      { background: var(--sky);       --fg: var(--ink); color: var(--ink); }
.band--cream    { background: var(--cream);     --fg: var(--ink); color: var(--ink); }
.band--grass    { background: var(--grass);     --fg: var(--ink); color: var(--ink); }
.band--night    { background: var(--night);     color: var(--cloud); }
.band--blood    { background: var(--blood);     color: var(--cloud); }
.band--twilight { background: var(--twilight);  color: var(--cloud); }
.band--ink      { background: var(--ink);       color: var(--cloud); }
.band--black    { background: var(--ink-deep);  color: var(--cloud); }
.dark { --fg: var(--cloud); --focus: var(--sun); }

/* ------------------------------------------------- dither transitions --- */
/* An 8-bit dither ramp between two flat fields: 25% / 50% / 75% coverage,
   built from conic-gradient quadrants on a 32px cell. Purely decorative. */
.dither { display: grid; grid-template-rows: repeat(3, 14px); }
.dither i { display: block; }
.dither i:nth-child(1) {
  background: conic-gradient(var(--to) 0 25%, var(--from) 0) 0 0 / 28px 28px;
}
.dither i:nth-child(2) {
  background: conic-gradient(var(--to) 0 25%, var(--from) 0 50%, var(--to) 0 75%, var(--from) 0) 0 0 / 28px 28px;
}
.dither i:nth-child(3) {
  background: conic-gradient(var(--from) 0 25%, var(--to) 0) 0 0 / 28px 28px;
}
.dither--sky-cream      { --from: var(--sky);       --to: var(--cream); }
.dither--cream-grass    { --from: var(--cream);     --to: var(--grass); }
.dither--grass-night    { --from: var(--grass);     --to: var(--night); }
.dither--night-blood    { --from: var(--night);     --to: var(--blood); }
.dither--blood-twilight { --from: var(--blood);     --to: var(--twilight); }
.dither--twilight-ink   { --from: var(--twilight);  --to: var(--ink); }
.dither--ink-black      { --from: var(--ink);       --to: var(--ink-deep); }

/* ----------------------------------------------------------- typography - */
/* The eyebrow lines are SPOKEN, so they stay in the body face and stay lowercase.
   NB: this class is NOT `.chant` -- that name belongs to the scrolling AWOO ticker
   band further down, and reusing it silently handed these paragraphs the ticker's
   negative margins, which dropped them on top of the h2.
   Silkscreen has no true lowercase (it maps a-z to capital forms), which would
   turn every spoken line into a shout. Silkscreen is therefore signage only:
   the wordmark, section plates, step names, numerals, readouts. */
.eyebrow {
  display: inline-block;
  font-weight: 700; font-size: 0.95rem; line-height: 1.35;
  background: var(--sun); color: var(--ink);
  border: 3px solid var(--ink);
  padding: 7px 11px;
  margin-bottom: var(--sp-3);
}
.wordmark {
  font-family: var(--face-display); font-weight: 700;
  line-height: 0.92; letter-spacing: -0.01em;
  font-size: 70px;
  margin: 0 0 var(--sp-3);
  text-shadow: 5px 5px 0 var(--ink);
  color: #fff;
}
.wordmark span { display: block; }
.h2 {
  font-family: var(--face-display); font-weight: 700;
  font-size: 28px; line-height: 1.15; margin-bottom: var(--sp-3);
}
.h3 {
  font-family: var(--face-display); font-weight: 700;
  font-size: 16px; line-height: 1.3;
  margin: var(--sp-5) 0 var(--sp-2);
}
.lede { font-size: 1.2rem; font-weight: 500; line-height: 1.38; max-width: 36ch; }
.kicker { margin-top: var(--sp-2); font-weight: 600; }
.intro { max-width: 62ch; font-size: 1.1rem; margin-bottom: var(--sp-4); }
/* The number is the loud part; the words stay lowercase in the body face.
   Setting the whole line in Silkscreen would render "90% OF YOU." as a second
   shouted headline directly under the h2, which flattens the hierarchy and
   breaks the account's lowercase rule at the same time. */
.big {
  display: flex; align-items: baseline; gap: 0.55em; flex-wrap: wrap;
  margin-bottom: var(--sp-3); color: var(--fg);
}
/* Silkscreen has no usable percent sign: at display size its "%" reads as a Z
   ("90% of you" rendered "90Z of you"). Every numeric VALUE therefore sits in the
   mono face, which is also the face the contract constants use elsewhere on the
   page. Silkscreen keeps words, names and the step ordinals. */
.big b { font-family: var(--face-mono); font-weight: 600; font-size: 40px; line-height: 1; letter-spacing: -0.03em; }
.big span { font-size: 1.15rem; font-weight: 600; }
.aside {
  margin-top: var(--sp-4);
  border-left: var(--edge) solid currentColor;
  padding-left: var(--sp-3);
  font-weight: 600; font-size: 1.05rem; max-width: 58ch;
}
.fineprint { margin-top: var(--sp-3); font-size: 0.94rem; max-width: 64ch; }

/* Silkscreen is a pixel face: it is crisp at whole-pixel steps and mushy at the
   arbitrary sizes a clamp() would hand it, so the display scale is stepped, not
   fluid. The wordmark widths are measured, not guessed. Re-measured 2026-09-01 for
   the rename: the longest line is now "GAME", which advances 3.50em in Silkscreen
   Bold (the old "MACDONALD" advanced 8.00em), so every step was recomputed -- left
   at the old sizes the wordmark filled less than half the hero. Each step is the
   largest whole-pixel size whose 3.50em still fits that breakpoint's column. */
@media (min-width: 360px) { .wordmark { font-size: 80px; } }
@media (min-width: 480px) { .wordmark { font-size: 110px; } }
@media (min-width: 620px) {
  .wordmark { font-size: 140px; text-shadow: 7px 7px 0 var(--ink); }
  .h2 { font-size: 36px; }
  .h3 { font-size: 18px; }
  .big b { font-size: 52px; }
  .lede { font-size: 1.35rem; }
}
@media (min-width: 1000px) {
  .band { padding: var(--sp-7) var(--sp-4); }
  body { font-size: 1.125rem; }
  .wordmark { font-size: 200px; text-shadow: 10px 10px 0 var(--ink); }
  .h2 { font-size: 48px; }
  .h3 { font-size: 20px; }
  .big b { font-size: 66px; }
  .big span { font-size: 1.3rem; }
  .lede { font-size: 1.5rem; }
  .eyebrow { font-size: 1.05rem; }
}
@media (min-width: 1400px) {
  .wordmark { font-size: 240px; text-shadow: 12px 12px 0 var(--ink); }
}

/* -------------------------------------------------------------- buttons - */
.btn {
  display: inline-block;
  font-family: var(--face-display); font-size: 13px;
  background: var(--ink); color: var(--cloud);
  border: 3px solid var(--ink);
  padding: 12px 16px; text-decoration: none; cursor: pointer;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.35);
  transition: transform 90ms linear, box-shadow 90ms linear;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35); }
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 rgba(0, 0, 0, 0.35); }
.btn--ghost { background: #fff; color: var(--ink); }
.dark .btn--ghost { background: var(--cloud); color: var(--ink); }
.btn--sm { font-size: 11px; padding: 9px 12px; }

/* ---------------------------------------------------------------- hero -- */
.hero__head { margin-bottom: var(--sp-5); }
.hero__grid { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); gap: var(--sp-6); }
}
.hero__jump { margin-top: var(--sp-4); display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.notice {
  margin-top: var(--sp-4);
  background: #fff; color: var(--ink);
  border: var(--edge) solid var(--ink);
  border-top: 14px solid var(--barn);
  padding: var(--sp-3);
  box-shadow: var(--pop) var(--pop) 0 var(--ink);
  max-width: 46ch;
}
.notice--dark { background: var(--cloud); margin-top: var(--sp-6); max-width: 62ch; }
.notice__h {
  font-family: var(--face-display); font-weight: 700;
  font-size: 15px; margin-bottom: var(--sp-2);
}

.hero__art {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3); max-width: 460px;
}
.portrait { margin: 0; }
.portrait img {
  width: 100%; height: auto;
  image-rendering: pixelated;
  border: var(--edge) solid var(--ink);
  box-shadow: var(--pop) var(--pop) 0 var(--ink);
  background: var(--ink);
}
.portrait figcaption {
  margin-top: calc(var(--sp-2) + 4px);
  font-family: var(--face-display); font-size: 11px;
  line-height: 1.5;
}
/* mono, not Silkscreen: see the percent-sign note on .big */
.portrait figcaption b { font-family: var(--face-mono); font-weight: 600; font-size: 17px; letter-spacing: -0.02em; }
.portrait--dusk img { border-color: var(--ink); box-shadow: var(--pop) var(--pop) 0 var(--ink-black); }
.dark .portrait img { box-shadow: var(--pop) var(--pop) 0 var(--ink-black); border-color: var(--cloud); }
/* Integer pixel scales only: 32px source at 12x = 384, herd tiles at 2x = 64.
   A fractional scale under image-rendering:pixelated gives uneven pixel rows. */
.side__art .portrait img { width: 100%; max-width: 384px; }
.herd { margin-top: var(--sp-4); }
.herd__row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.herd__row img {
  width: 64px; height: 64px; image-rendering: pixelated;
  border: 3px solid var(--ink);
}
.dark .herd__row img { border-color: var(--cloud); }
.herd figcaption {
  margin-top: var(--sp-2);
  font-family: var(--face-mono); font-size: 0.78rem; font-weight: 600;
}

/* --------------------------------------------------------------- chant -- */
.chant {
  margin: var(--sp-6) calc(var(--sp-3) * -1) calc(var(--sp-6) * -1);
  background: var(--sun);
  border-top: var(--edge) solid var(--ink);
  border-bottom: var(--edge) solid var(--ink);
  overflow: hidden;
  padding: 10px 0;
}
.chant__track {
  display: flex; gap: 2.5rem; width: max-content;
  font-family: var(--face-display); font-size: 20px; color: var(--ink);
  animation: chant-slide 26s linear infinite;
}
@keyframes chant-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (min-width: 1000px) {
  .chant { margin-left: calc(var(--sp-4) * -1); margin-right: calc(var(--sp-4) * -1); }
  .chant__track { font-size: 26px; }
}

/* ---------------------------------------------------------------- flow -- */
.flow { display: grid; gap: var(--sp-3); counter-reset: none; }
@media (min-width: 700px)  { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .flow { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-2); } }
.step {
  background: #fff; color: var(--ink);
  border: var(--edge) solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  padding: var(--sp-3);
  display: flex; flex-direction: column;
}
.step--wolf { background: var(--night); color: var(--cloud); }
.step__n {
  font-family: var(--face-display); font-weight: 700; font-size: 28px;
  line-height: 1; color: var(--barn);
}
.step--wolf .step__n { color: var(--sun); }
.step__h {
  font-family: var(--face-display); font-weight: 700; font-size: 17px;
  margin: var(--sp-2) 0; text-transform: lowercase;
}
.step__body { font-size: 0.98rem; flex: 1 1 auto; }
.step__tag {
  margin-top: var(--sp-3);
  font-family: var(--face-mono); font-size: 0.78rem; font-weight: 600;
  border-top: 2px solid currentColor; padding-top: 6px;
}

/* -------------------------------------------------------------- ledger -- */
.scroller {
  overflow-x: auto; overscroll-behavior-x: contain;
  border: var(--edge) solid var(--ink);
  background: #fff;
  max-width: 100%;
}
.dark .scroller { border-color: var(--cloud); background: var(--ink-black); }
.ledger { border-collapse: collapse; width: 100%; min-width: 520px; color: var(--ink); }
.dark .ledger { color: var(--cloud); }
.ledger th, .ledger td {
  text-align: left; padding: 11px 14px;
  border-bottom: 2px solid var(--ink);
  vertical-align: baseline;
}
.dark .ledger th, .dark .ledger td { border-bottom-color: #4a5a76; }
.ledger thead th {
  background: var(--ink); color: var(--cloud);
  font-family: var(--face-display); font-size: 11px; font-weight: 400;
}
.dark .ledger thead th { background: var(--ink-black); }
.ledger tbody th { font-weight: 600; }
.ledger td.num { font-weight: 600; white-space: nowrap; }
.ledger tbody tr:last-child th, .ledger tbody tr:last-child td { border-bottom: 0; }
.ledger--tight { min-width: 360px; }

/* ---------------------------------------------------------- flock/pack -- */
.side { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 900px) {
  .side { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: var(--sp-6); }
  /* The flip moves the art to the right, so the TRACKS have to swap too or the
     copy inherits the narrow art column and the art gets a field of empty navy. */
  .side--flip { grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr); }
  .side--flip .side__art { order: 2; }
}
.facts { margin-top: var(--sp-4); display: grid; gap: var(--sp-2); }
.facts > div {
  display: grid; gap: 2px;
  border-top: 3px solid currentColor; padding-top: var(--sp-2);
}
@media (min-width: 560px) { .facts > div { grid-template-columns: 7rem 1fr; gap: var(--sp-3); } }
.facts dt { font-family: var(--face-display); font-size: 12px; }
.facts dd { margin: 0; font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-4); }
.chips li {
  font-family: var(--face-mono); font-size: 0.8rem; font-weight: 600;
  border: 2px solid currentColor; padding: 5px 9px;
}

/* --------------------------------------------------------------- tiers -- */
.tiers { display: grid; gap: var(--sp-3); }
@media (min-width: 760px) { .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tier {
  background: var(--cloud); color: var(--ink);
  border: var(--edge) solid var(--ink-black);
  box-shadow: 6px 6px 0 var(--ink-black);
  padding: var(--sp-3);
}
.tier__range { font-family: var(--face-mono); font-size: 0.85rem; font-weight: 600; }
.tier__cost {
  font-family: var(--face-mono); font-weight: 600; letter-spacing: -0.03em;
  font-size: 38px; line-height: 1.1; margin-top: var(--sp-2);
}
.tier__unit { font-family: var(--face-display); font-size: 12px; }
@media (min-width: 1000px) { .tier__cost { font-size: 50px; } }

.callout {
  margin-top: var(--sp-5);
  border: var(--edge) solid currentColor;
  padding: var(--sp-4) var(--sp-3);
  display: grid; gap: var(--sp-3);
  max-width: 74ch;
}
.callout .h3 { margin-top: 0; }
.callout__note { font-family: var(--face-mono); font-size: 0.88rem; font-weight: 600; }

/* --------------------------------------------------------------- stats -- */
.stats { display: grid; gap: var(--sp-2); }
@media (min-width: 420px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 700px)  { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .stats { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.stats li {
  border: 3px solid currentColor; padding: var(--sp-2);
  display: flex; flex-direction: column; gap: 4px;
}
.stats b { font-family: var(--face-mono); font-weight: 600; font-size: 24px; line-height: 1.1; letter-spacing: -0.03em; color: var(--sun); }
.stats span { font-size: 0.82rem; line-height: 1.35; }

.two { display: grid; gap: var(--sp-4); margin-top: var(--sp-4); }
@media (min-width: 800px) { .two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); } }
.two p { max-width: 52ch; }

/* --------------------------------------------------------------- files -- */
.files { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
@media (min-width: 760px) { .files { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.files li { border: 3px solid currentColor; padding: var(--sp-3); }
.files__n {
  font-family: var(--face-display); font-size: 15px;
  margin-bottom: var(--sp-2); color: var(--sun);
}
.files__n code { font-family: inherit; font-size: inherit; }
.files p:last-child { max-width: 46ch; }

/* ------------------------------------------------------------- gallery -- */
.gallery { margin-top: var(--sp-4); }
.controls {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
  margin-bottom: var(--sp-3);
}
/* The dividers are GAPS with the border colour showing through, not per-button
   border-rights. Same picture; impeccable's side-tab rule reads a 3px one-sided
   border as the AI-UI tell it usually is, and it is not worth arguing with. */
.seg {
  display: flex; gap: 3px; padding: 3px;
  background: var(--cloud); border: 3px solid var(--cloud);
}
.seg__btn {
  font-family: var(--face-display); font-size: 12px;
  background: var(--ink); color: var(--cloud);
  border: 0; padding: 10px 14px; cursor: pointer;
}
.seg__btn.is-on { background: var(--sun); color: var(--ink); }
.selects { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.selects label {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--face-mono); font-size: 0.78rem; font-weight: 600;
}
.selects label { flex: 0 0 auto; }
.selects select {
  appearance: none;
  background-color: var(--ink-black); color: var(--cloud);
  background-image:
    linear-gradient(var(--sun) 0 0), linear-gradient(var(--sun) 0 0), linear-gradient(var(--sun) 0 0);
  background-repeat: no-repeat;
  background-size: 12px 3px, 6px 3px, 3px 3px;
  background-position: right 10px top 17px, right 13px top 20px, right 14.5px top 23px;
  border: 3px solid var(--cloud); padding: 8px 34px 8px 10px;
  font-family: var(--face-mono); font-size: 0.8rem; cursor: pointer;
  max-width: 17ch; text-overflow: ellipsis;
}
.count {
  font-family: var(--face-display); font-size: 12px;
  margin-bottom: var(--sp-1);
}
.peek {
  font-family: var(--face-mono); font-size: 0.82rem; font-weight: 600;
  min-height: 1.6em; margin-bottom: var(--sp-2);
  color: var(--sun);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.wall {
  border: var(--edge) solid var(--cloud);
  background: var(--ink-black);
  overflow: auto; overscroll-behavior: contain;
  max-height: 66vh;
  min-height: 300px;
  padding: 3px;
}
.wall__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 3px;
}
@media (min-width: 700px) {
  .wall__grid { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }
}
.tile {
  aspect-ratio: 1;
  border: 0; padding: 0; margin: 0; cursor: pointer;
  background-color: var(--ink-black);
  background-image: url("/gallery-atlas.png");
  background-repeat: no-repeat;
  background-size: 2500% 2400%;
  image-rendering: pixelated;
  position: relative;
  transition: transform 90ms linear;
}
.tile:hover, .tile:focus-visible {
  transform: scale(1.55);
  z-index: 4;
  outline: 3px solid var(--sun);
  outline-offset: 0;
}
.tile.is-hidden { display: none; }
.wall:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }

.empty {
  font-family: var(--face-display); font-size: 13px;
  padding: var(--sp-5) var(--sp-3); text-align: center; grid-column: 1 / -1;
}

/* ---------------------------------------------------------- token sheet - */
.sheet {
  border: var(--edge) solid var(--ink);
  background: var(--cloud); color: var(--ink);
  padding: 0; max-width: 620px; width: calc(100% - 2rem);
  box-shadow: 10px 10px 0 var(--ink-black);
}
.sheet::backdrop { background: rgba(18, 16, 15, 0.82); }
.sheet__in { display: grid; gap: var(--sp-3); padding: var(--sp-4) var(--sp-3) var(--sp-3); }
@media (min-width: 560px) {
  .sheet__in { grid-template-columns: 200px minmax(0, 1fr); align-items: start; }
}
.sheet__x {
  position: absolute; top: 0; right: 0;
  font-family: var(--face-display); font-size: 11px;
  background: var(--ink); color: var(--cloud);
  border: 0; padding: 9px 12px; cursor: pointer;
}
.sheet__art img {
  width: 100%; height: auto; image-rendering: pixelated;
  border: var(--edge) solid var(--ink);
}
.sheet__eyebrow { font-family: var(--face-display); font-size: 11px; }
.sheet__h { font-family: var(--face-display); font-size: 22px; margin: 6px 0 var(--sp-3); }
.sheet__traits { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.sheet__traits > div {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  gap: var(--sp-2); align-items: baseline;
  border-bottom: 2px solid var(--ink); padding: 7px 0;
}
.sheet__traits dt { font-family: var(--face-mono); font-size: 0.76rem; font-weight: 600; }
.sheet__traits dd { margin: 0; font-weight: 600; font-size: 0.95rem; }
.sheet__traits .rare { font-family: var(--face-mono); font-size: 0.72rem; white-space: nowrap; }
.sheet__nav { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }

/* -------------------------------------------------------------- footer -- */
.footer {
  background: var(--ink-black); color: var(--cloud);
  padding: var(--sp-6) var(--sp-3);
  border-top: 8px solid var(--barn);
  --focus: var(--sun);
}
.footer__mark { font-family: var(--face-display); font-size: 20px; margin-bottom: var(--sp-4); }
.disclaimers { display: grid; gap: var(--sp-2); max-width: 76ch; }
.disclaimers li {
  position: relative; padding-left: var(--sp-4);
  font-size: 0.98rem;
}
.disclaimers li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 11px; height: 11px; background: var(--sun);
}
.footer__chant {
  margin-top: var(--sp-5);
  font-family: var(--face-display); font-size: 28px; color: var(--sun);
}
@media (min-width: 1000px) {
  .footer { padding: var(--sp-7) var(--sp-4); }
  .footer__chant { font-size: 44px; }
}

/* --------------------------------------------------------- motion ----- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .chant__track { animation: none; }
  .btn, .tile { transition: none; }
  .btn:hover, .btn:active { transform: none; box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.35); }
  .tile:hover, .tile:focus-visible { transform: none; }
}

/* ------------------------------------------------------------------ film - */
/* aspect-ratio holds the box before metadata loads so the poster swap costs no
   layout shift. The width/height attributes on the video element are paired with
   height:auto, for the same reason image elements need that pairing. */
.film {
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 1rem;
  border: 4px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  background: var(--ink);
  line-height: 0;
}
.film__v {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  image-rendering: pixelated;   /* it is a pixel film; never let it smooth */
}