/*
 * The title screen (/). Loaded after site.css and built from its tokens and
 * components; like site.css it writes no colour, font or raw pixel length.
 */

/* ---------------------------------------------------------------------------
 * Title screen: a dark screen inside the green frame, in both themes. The
 * theme tokens are pointed at the fixed screen tokens, so the shared
 * components (menu, tags) inside it draw in dark colours on the light theme too.
 * ------------------------------------------------------------------------- */

.title-screen {
  --ground: var(--screen);
  --surface: var(--screen);
  --ink: var(--on-screen);
  --mute: var(--screen-mute);
  --brand: var(--screen-brand);
  --on-brand: var(--screen);
  --link: var(--screen-brand);
  --gold-ink: var(--gold);

  /* One column on phones: the copy, centred, then the scene. Two columns from
     60em: a 520px copy column, left-aligned, with the scene beside it. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: calc(var(--px) * 8);
  margin-block: calc(var(--px) * 8) calc(var(--px) * 6);
  padding: calc(var(--px) * 10) calc(var(--px) * 4);
  background: var(--screen);
  color: var(--ink);
  text-align: center;
}

/* Rhythm: 16px inside a group (lockup and tagline), 32px between groups. */
.title-screen__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--px) * 8);
  width: 100%;
  max-width: 32.5rem;
}

.title-screen__masthead {
  display: flex;
  flex-direction: column;
  align-items: inherit;
  gap: calc(var(--px) * 4);
}

.title-screen h1 {
  margin: 0;
  line-height: 0;
}

/* Half size on phones and full size above, so each lockup pixel stays whole. */
.title-screen__logo {
  display: block;
  width: 13.8125rem;
  height: auto;
}

.title-screen__tagline {
  margin: 0;
  color: var(--gold);
  font-family: var(--f-ui);
  font-size: clamp(1rem, 0.85rem + 0.75vw, 1.375rem);
  font-weight: 700;
  line-height: 1.5;
}

.title-screen__lede {
  max-width: 44ch;
  margin: 0;
  font-family: var(--f-body);
  font-size: 1.125rem;
}

.title-screen__menu {
  width: max-content;
  max-width: 100%;
  font-size: 1.25rem;
}

.free-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--px) * 2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.free-strip .tag {
  padding: var(--px) calc(var(--px) * 2);
  font-size: 0.875rem;
}

/* An outlined gold tag, for the free strip beside the filled FREE. */
.tag--outline {
  background: transparent;
  color: var(--gold-ink);
  box-shadow: inset 0 0 0 calc(var(--px) / 2) var(--gold-ink);
}

@media (min-width: 36em) {
  .title-screen {
    padding-block: calc(var(--px) * 14);
  }

  .title-screen__logo {
    width: 27.625rem;
  }
}

@media (min-width: 60em) {
  .title-screen {
    grid-template-columns: minmax(0, 32.5rem) minmax(0, 26.25rem);
    justify-content: center;
    align-items: center;
    column-gap: calc(var(--px) * 16);
    padding-inline: calc(var(--px) * 14);
    text-align: left;
  }

  .title-screen__copy {
    align-items: flex-start;
  }

  .title-screen__lede {
    max-width: none;
  }

  .free-strip {
    justify-content: flex-start;
  }
}

/* ---------------------------------------------------------------------------
 * The newsboy: pixel art drawn as SVG rects (one SVG unit is four CSS pixels),
 * filled from the fixed screen tokens. He waves the paper and calls out the
 * lines in content/site.json, one every 3 seconds. Decorative: the scene's
 * role="img" label describes it, and reduced motion holds the first line still.
 * ------------------------------------------------------------------------- */

.newsboy {
  position: relative;
  width: 100%;
  max-width: 26.25rem;
  container-type: inline-size;
}

@media (min-width: 60em) {
  .newsboy {
    order: 2;
  }
}

.newsboy__art {
  display: block;
  width: 100%;
  height: auto;
}

.nb-paper { fill: var(--on-screen); }
.nb-ink { fill: var(--screen); }
.nb-line { fill: var(--screen-line); }
.nb-mute { fill: var(--screen-mute); }
.nb-surface { fill: var(--screen-surface); }
.nb-brand { fill: var(--screen-brand); }
.nb-field { fill: var(--frame); }
.nb-leather { fill: var(--leather); }
.nb-leather-dark { fill: var(--leather-dark); }
.nb-skin { fill: var(--skin); }

/* The bubble's text sits over the white of the drawn bubble (8,12 to 276,72 of 420x320). */
.newsboy__bubble {
  position: absolute;
  top: 3.75%;
  left: 1.905%;
  width: 63.81%;
  height: 18.75%;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--screen);
  font-family: var(--f-ui);
  font-size: max(0.8125rem, 3.8cqi);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.newsboy__line {
  grid-area: 1 / 1;
  opacity: 0;
  text-wrap: balance;
}

.newsboy__line strong {
  font-weight: 700;
}

.newsboy__line:first-child {
  opacity: 1;
}

@keyframes nb-wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(var(--px) * -0.5)); }
}

@keyframes nb-shout {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Each line is shown for its share of the cycle: 1/n of 3n seconds. */
@keyframes nb-cycle-2 { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes nb-cycle-3 { 0%, 33.2% { opacity: 1; } 33.3%, 100% { opacity: 0; } }
@keyframes nb-cycle-4 { 0%, 24.9% { opacity: 1; } 25%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  .nb-arm {
    animation: nb-wave 0.8s steps(2) infinite;
  }

  .nb-mouth {
    animation: nb-shout 0.4s steps(1) infinite;
  }

  .newsboy__bubble--2 .newsboy__line { animation: nb-cycle-2 6s steps(1) infinite; }
  .newsboy__bubble--3 .newsboy__line { animation: nb-cycle-3 9s steps(1) infinite; }
  .newsboy__bubble--4 .newsboy__line { animation: nb-cycle-4 12s steps(1) infinite; }

  .newsboy__line:nth-child(2) { animation-delay: 3s; }
  .newsboy__line:nth-child(3) { animation-delay: 6s; }
  .newsboy__line:nth-child(4) { animation-delay: 9s; }
}

/* ---------------------------------------------------------------------------
 * Stat strip
 * ------------------------------------------------------------------------- */

.home-stats {
  justify-content: center;
}

.home-stats__note {
  margin: calc(var(--px) * 2) 0 0;
  color: var(--mute);
  font-size: 0.875rem;
  text-align: center;
}

/* ---------------------------------------------------------------------------
 * Sections
 * ------------------------------------------------------------------------- */

.home-section {
  position: relative;
  padding-top: calc(var(--px) * 16);
}

/* A hash-mark divider above each section: the line a football crosses. */
.home-section::before {
  content: '';
  position: absolute;
  top: calc(var(--px) * 5);
  right: var(--gutter);
  left: var(--gutter);
  height: var(--tick-tall);
  background: url('/assets/brand/hash-rule.svg') repeat-x left top / auto 100%;
  image-rendering: pixelated;
}

/* Ball crossings (site.js): a football spirals across the divider once, as it
   comes into view. Without JavaScript, or with reduced motion, nothing moves. */
.crossing {
  position: absolute;
  top: 0;
  right: var(--gutter);
  left: var(--gutter);
  height: calc(var(--px) * 11);
  pointer-events: none;
}

.crossing__arc {
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
}

.crossing__lift {
  display: block;
}

.crossing__ball {
  display: block;
  width: calc(var(--px) * 14);
  height: calc(var(--px) * 8);
  image-rendering: pixelated;
}

@keyframes cross-x {
  0% { left: 0; opacity: 1; }
  96% { opacity: 1; }
  100% { left: calc(100% - var(--px) * 14); opacity: 0; }
}

@keyframes cross-lift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(var(--px) * -12)); }
}

@keyframes cross-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: no-preference) {
  .crossing.is-crossing .crossing__arc {
    animation: cross-x 1.6s linear forwards;
  }

  .crossing.is-crossing .crossing__lift {
    animation: cross-lift 1.6s ease-in-out forwards;
  }

  .crossing.is-crossing .crossing__ball {
    animation: cross-spin 0.4s steps(8) 4;
  }
}

.home-section h2 {
  margin: 0 0 calc(var(--px) * 3);
}

.home-section h3 {
  margin: 0 0 calc(var(--px) * 2);
  font-size: 1.25rem;
}

.home-section__lede {
  max-width: 60ch;
  margin: 0 0 calc(var(--px) * 6);
  color: var(--mute);
  font-size: 1.125rem;
}

.home-section p,
.home-section li {
  max-width: 70ch;
}

.home-section .pixel-frame > :last-child {
  margin-bottom: 0;
}

/* How to play: numbered cards. The list already says the number aloud. */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: calc(var(--px) * 6);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step {
  counter-increment: step;
}

.step h3::before {
  content: counter(step);
  content: counter(step) / '';
  display: inline-block;
  min-width: 1.5em;
  margin-right: calc(var(--px) * 2);
  font-family: var(--f-num);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--gold);
  color: var(--on-gold);
  text-align: center;
}

.step p {
  margin: 0;
}

/* A week covered */
.week__banner {
  margin: 0 0 calc(var(--px) * 6);
}

.week__banner .stepped__text {
  font-size: clamp(0.875rem, 0.75rem + 0.6vw, 1.25rem);
}

/* How a ranking is weighed: one bar, a segment per factor, widths in proportion. */
.weights {
  margin: calc(var(--px) * 10) 0 0;
}

.weights__title {
  margin-bottom: calc(var(--px) * 3);
  color: var(--gold-ink);
  font-family: var(--f-ui);
  font-size: 0.9375rem;
  font-weight: 700;
}

.weights__bar {
  display: flex;
  gap: var(--px);
  height: calc(var(--px) * 6);
}

.weights__seg {
  flex: 1 1 0;
  min-width: var(--px);
}

.weights__seg--w5 { flex-grow: 5; }
.weights__seg--w10 { flex-grow: 10; }
.weights__seg--w15 { flex-grow: 15; }
.weights__seg--w25 { flex-grow: 25; }
.weights__seg--w30 { flex-grow: 30; }

.weights__seg--1 { background: var(--brand); }
.weights__seg--2 { background: var(--gold); }
.weights__seg--3 { background: var(--leather); }
.weights__seg--4 { background: var(--mute); }
.weights__seg--5 { background: var(--hot); }
.weights__seg--6 { background: var(--ink); }
.weights__seg--7 { background: var(--line); }

.weights__legend {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--px) * 2) calc(var(--px) * 6);
  margin: calc(var(--px) * 4) 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}

.weights__legend li {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--px) * 2);
}

.weights__key {
  display: inline-block;
  width: calc(var(--px) * 3);
  height: calc(var(--px) * 3);
}

.weights__pct {
  font-family: var(--f-num);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.weights__note {
  margin: calc(var(--px) * 4) 0 0;
  color: var(--mute);
}

.posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: calc(var(--px) * 6);
  /* Cards in one row share one height (owner rule, 2026-10-13). */
  align-items: stretch;
}

.posts .dialogue p {
  margin: 0 0 0.75em;
}

/* Red marks the roast: the decision, never the manager. */
.roast {
  color: var(--hot);
  font-weight: 600;
}

/* Select mode */
.modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: calc(var(--px) * 6);
  /* Cards in one row share one height (owner rule, 2026-10-13). */
  align-items: stretch;
}

.mode__about,
.mode__note {
  margin: 0 0 calc(var(--px) * 3);
  color: var(--mute);
}

.mode__note {
  margin: calc(var(--px) * 3) 0 0;
  font-size: 0.9375rem;
}

.editions {
  display: grid;
  gap: calc(var(--px) * 2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--f-ui);
}

.editions li {
  position: relative;
  padding-left: calc(var(--px) * 5);
}

/* A square pixel bullet. */
.editions li::before {
  content: '';
  position: absolute;
  top: 0.55em;
  left: 0;
  width: calc(var(--px) * 2);
  height: calc(var(--px) * 2);
  background: var(--brand);
}

/* Tables: house rules and website or CLI */
.home-table {
  width: 100%;
  border-collapse: collapse;
}

.home-table th,
.home-table td {
  padding: calc(var(--px) * 3) calc(var(--px) * 4) calc(var(--px) * 3) 0;
  border-bottom: calc(var(--px) / 2) solid var(--line);
  text-align: left;
  vertical-align: top;
}

.home-table thead th {
  color: var(--mute);
  font-family: var(--f-ui);
  font-weight: 400;
}

/* Row heads keep their weight at 400 (th is bold by default) and stand out by colour. */
.home-table tbody th {
  color: var(--ink);
  font-family: var(--f-ui);
  font-weight: 400;
}

/* A flag or command name never splits at its own hyphens; only a whole
   command line (.command) may wrap, between its words. */
.home-section code {
  white-space: nowrap;
}

.home-section code.command {
  white-space: normal;
}

/* Free to use */
.free-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: calc(var(--px) * 6);
  /* Cards in one row share one height (owner rule, 2026-10-13). */
  align-items: stretch;
}

.free-list {
  margin: 0;
  padding-left: 1.25em;
}

.free-list li + li {
  margin-top: calc(var(--px) * 2);
}

/* Closing call to action */
.cta {
  text-align: center;
}

.cta p {
  margin-inline: auto;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--px) * 4);
  margin-top: calc(var(--px) * 4);
}