/* Page-level composition.
   Everything here is layout and treatment. Not one string of copy, not one
   colour value, not one route lives in this file: text comes from data.json
   through the templating engine, colour comes from the tokens in tokens.css.

   Layer order was declared in tokens.css:
   tokens, base, layout, components, pages, utilities. */

@layer pages {
  /* ======================================================================
     0. Shared plumbing
     ====================================================================== */

  /* One alias, no new colour. Cards, panels and the board sit on a surface
     that is lighter than the paper in daylight and darker than it at night.
     components.css does this per component with :root[data-theme="dark"];
     this covers the visitor who never touched the theme control and is
     reading in a dark operating system. */
  :root {
    --c-surface: var(--c-white);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --c-surface: var(--c-paper-alt);
    }
  }
  :root[data-theme="dark"] {
    --c-surface: var(--c-paper-alt);
  }

  /* Held back for the printer. print.css turns these on. */
  .print-only,
  .print-imprint {
    display: none;
  }

  /* Any wide agate table can be wrapped in this. It must carry tabindex="0"
     and an accessible name in the markup, or a keyboard user cannot scroll it. */
  .table-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  /* ======================================================================
     1. Hero — type block left, photograph off the right edge
     ====================================================================== */

  .hero {
    padding-block: var(--s-6) var(--s-7);
    border-block-end: var(--hairline);
    /* the media bleeds past the container; the page must never scroll sideways */
    overflow-x: clip;
  }

  .hero__grid {
    display: grid;
    gap: var(--s-5);
  }

  .hero__type .kicker {
    border-block-start: var(--rule-heavy);
    padding-block-start: var(--s-2);
  }

  .hero__type h1 {
    margin-block-end: var(--s-4);
    max-inline-size: 16ch;
  }

  .hero__lede {
    font-size: var(--fs-h3);
    line-height: 1.35;
    color: var(--c-ink-muted);
    max-inline-size: 38ch;
    margin-block-end: var(--s-5);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-block-end: var(--s-5);
  }

  .hero__note {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    border-block-start: var(--hairline);
    padding-block-start: var(--s-3);
    margin-block-end: 0;
    font-size: var(--fs-small);
    color: var(--c-ink-muted);
    max-inline-size: 46ch;
  }
  .hero__note .age-badge {
    flex: 0 0 auto;
    color: var(--c-ink);
  }

  .hero__media {
    margin-inline: calc(var(--gutter) * -1);
  }
  .hero__media img {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: 50% 42%;
  }

  @media (min-width: 60rem) {
    .hero {
      padding-block: var(--s-7) var(--s-8);
    }
    .hero__grid {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--s-6);
      align-items: center;
    }
    .hero__type {
      grid-column: 1 / span 7;
    }
    .hero__media {
      grid-column: 8 / -1;
      margin-inline-start: 0;
      /* run to the physical edge of the viewport: the negative margin is the
         distance from the container edge to the window edge, whichever the
         container is currently doing */
      margin-inline-end: min(
        calc(var(--gutter) * -1),
        calc((var(--container-max) - 100vw) / 2)
      );
    }
    .hero__media img {
      aspect-ratio: 4 / 3;
    }
  }

  @media (min-width: 84rem) {
    .hero__media img {
      aspect-ratio: 3 / 2;
    }
  }

  /* ======================================================================
     2. Home — steps column beside a standing side panel
     ====================================================================== */

  .how-grid {
    display: grid;
    gap: var(--s-6);
    align-items: start;
  }

  .side-panel {
    border-block-start: var(--rule-heavy);
    padding-block-start: var(--s-4);
    font-size: var(--fs-small);
  }
  .side-panel > :last-child {
    margin-block-end: 0;
  }
  .side-panel__head {
    font-family: var(--f-display);
    font-size: var(--fs-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: var(--lh-head);
    margin-block-end: var(--s-3);
  }

  @media (min-width: 62rem) {
    .how-grid {
      grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
      column-gap: var(--s-7);
    }
    .how-grid > .side-panel {
      border-inline-start: var(--hairline);
      padding-inline-start: var(--s-5);
    }
  }

  /* ======================================================================
     3. Responsible gambling block and the help line list
     ====================================================================== */

  .rg-grid {
    display: grid;
    gap: var(--s-5);
    align-items: start;
  }
  @media (min-width: 56rem) {
    .rg-grid {
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
      column-gap: var(--s-6);
    }
  }
  .rg-grid .card {
    border-block-start: var(--rule-brand);
  }
  .rg-grid .card h3 {
    font-family: var(--f-display);
    font-size: var(--fs-small);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-block-end: var(--s-3);
  }

  /* A definition-style list: place, service, number. It answers its own
     column width, not the window's, so it works in a card or a full row. */
  .helpline-list {
    container-type: inline-size;
    container-name: helplines;
    list-style: none;
    margin: 0 0 var(--s-4);
    padding: 0;
  }
  .helpline-list li {
    display: grid;
    gap: var(--s-1);
    padding-block: var(--s-3);
    border-block-start: var(--hairline);
  }
  .helpline-list li:first-child {
    border-block-start: 0;
    padding-block-start: 0;
  }
  .helpline-list__place {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: var(--fs-small);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    line-height: var(--lh-head);
  }
  .helpline-list__name {
    font-size: var(--fs-small);
    color: var(--c-ink-muted);
    line-height: 1.4;
  }
  .helpline-list__num {
    display: inline-flex;
    align-items: center;
    align-self: start;
    min-block-size: var(--touch-min);
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .helpline-list__note {
    border-block-start: var(--hairline);
    padding-block-start: var(--s-3);
    margin-block-end: 0;
    font-size: var(--fs-micro);
    color: var(--c-ink-muted);
  }

  @container helplines (inline-size >= 26rem) {
    .helpline-list li {
      grid-template-columns: minmax(0, 1fr) auto;
      column-gap: var(--s-4);
      align-items: start;
    }
    .helpline-list__num {
      grid-column: 2;
      grid-row: 1 / span 2;
      justify-self: end;
      align-self: center;
    }
  }

  /* ======================================================================
     4. Age gate
     ====================================================================== */

  .age-gate {
    max-inline-size: min(100% - 2rem, 36rem);
  }
  .age-gate .field {
    margin-block-end: var(--s-4);
  }

  /* This paragraph is a live region: it must not shove the buttons down the
     screen when it fills, so the room is reserved before it has anything in it. */
  .age-gate__requirement {
    min-block-size: calc(var(--s-7) + var(--s-1));
    margin-block: 0 var(--s-2);
    padding: var(--s-3) var(--s-4);
    border-inline-start: 4px solid var(--c-primary);
    background: var(--c-paper-alt);
    font-family: var(--f-display);
    font-weight: 600;
    font-size: var(--fs-small);
    line-height: var(--lh-body);
  }
  .age-gate__requirement:empty {
    border-inline-start-color: var(--c-rule);
    background: transparent;
  }

  .age-gate__small {
    margin-block: var(--s-3) 0;
    font-size: var(--fs-micro);
    line-height: var(--lh-body);
    color: var(--c-ink-muted);
    max-inline-size: 58ch;
  }
  .age-gate__small + .age-gate__small {
    margin-block-start: var(--s-2);
  }

  @media (max-width: 26rem) {
    .age-gate .dialog__actions {
      flex-direction: column;
      align-items: stretch;
    }
  }

  /* ======================================================================
     5. Legal documents — wide measure, hanging clause numbers, sticky contents
     ====================================================================== */

  .legal-layout {
    display: grid;
    gap: var(--s-6);
    align-items: start;
  }
  @media (min-width: 62rem) {
    .legal-layout {
      grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
      column-gap: var(--s-7);
    }
  }

  .legal-version {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-5);
    border-block-start: var(--rule-heavy);
    border-block-end: var(--hairline);
    padding-block: var(--s-3);
    margin-block: 0 var(--s-6);
    font-family: var(--f-mono);
    font-size: var(--fs-micro);
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-ink-muted);
  }
  .legal-version__item {
    display: flex;
    gap: var(--s-2);
  }
  .legal-version__value {
    color: var(--c-ink);
    font-weight: 600;
  }

  .legal-toc {
    font-size: var(--fs-small);
  }
  .legal-toc > h2,
  .legal-toc__head {
    font-family: var(--f-display);
    font-size: var(--fs-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--c-ink-muted);
    border-block-start: var(--rule-heavy);
    padding-block-start: var(--s-2);
    margin-block-end: var(--s-2);
  }
  .legal-toc ol,
  .legal-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .legal-toc li + li {
    border-block-start: var(--hairline);
  }
  .legal-toc a {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-block-size: var(--touch-min);
    padding-block: var(--s-2);
    padding-inline: var(--s-3) var(--s-2);
    border-inline-start: 3px solid transparent;
    text-decoration: none;
    color: var(--c-ink);
    line-height: 1.35;
  }
  .legal-toc a:hover {
    color: var(--c-primary-ink);
    background: var(--c-paper-alt);
  }
  .legal-toc a[aria-current] {
    border-inline-start-color: var(--c-primary);
    color: var(--c-primary-ink);
    background: var(--c-tint-primary);
  }
  .legal-toc__num {
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    color: var(--c-ink-muted);
    flex: 0 0 auto;
  }

  @media (min-width: 62rem) {
    .legal-toc {
      position: sticky;
      inset-block-start: var(--s-4);
      max-block-size: calc(100dvh - var(--s-7));
      overflow-y: auto;
      overscroll-behavior: contain;
      padding-inline-end: var(--s-3);
      border-inline-end: var(--hairline);
    }
  }

  article.prose {
    max-inline-size: var(--measure-legal);
    line-height: var(--lh-legal);
  }
  article.prose > h2 {
    border-block-start: var(--hairline);
    padding-block-start: var(--s-4);
  }
  article.prose > h2:first-child {
    border-block-start: 0;
    padding-block-start: 0;
    margin-block-start: 0;
  }
  .prose ol,
  .prose ul {
    padding-inline-start: var(--s-5);
  }
  .prose dt {
    font-family: var(--f-display);
    font-weight: 650;
    margin-block-start: var(--s-3);
  }
  .prose dd {
    margin-inline-start: 0;
    padding-inline-start: var(--s-4);
    border-inline-start: var(--hairline);
  }
  .prose table {
    font-size: var(--fs-small);
  }

  /* Clause numbers. Preferred form: the number is real text in the heading,
     inside a .clause-no, so a screen reader reads it and the contents list can
     anchor to the same string. */
  .prose .clause-no {
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--c-ink-muted);
  }
  .prose--clauses {
    --clause-hang: calc(var(--s-7) + var(--s-2));
  }
  @media (min-width: 48rem) {
    .prose--clauses {
      padding-inline-start: var(--clause-hang);
      max-inline-size: calc(var(--measure-legal) + var(--clause-hang));
    }
    .prose--clauses > h2,
    .prose--clauses > h3 {
      position: relative;
    }
    .prose--clauses > h2 > .clause-no,
    .prose--clauses > h3 > .clause-no {
      position: absolute;
      inset-inline-start: calc(var(--clause-hang) * -1);
      inline-size: var(--clause-hang);
      padding-inline-end: var(--s-3);
      text-align: end;
    }
  }

  /* Fallback for a document whose headings carry no number in the markup.
     Counters cannot be anchored to, so this is second choice, not first. */
  .prose--auto-clauses {
    counter-reset: clause;
  }
  .prose--auto-clauses > h2 {
    counter-increment: clause;
    counter-reset: subclause;
  }
  .prose--auto-clauses > h3 {
    counter-increment: subclause;
  }
  .prose--auto-clauses > h2::before,
  .prose--auto-clauses > h3::before {
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--c-ink-muted);
    margin-inline-end: var(--s-3);
  }
  .prose--auto-clauses > h2::before {
    content: counter(clause) ".";
  }
  .prose--auto-clauses > h3::before {
    content: counter(clause) "." counter(subclause);
  }

  /* ======================================================================
     6. Ticket builder — board on the left, coupon panel on the right
     ====================================================================== */

  .builder-grid {
    display: grid;
    gap: var(--s-6);
    align-items: start;
  }
  @media (min-width: 64rem) {
    .builder-grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
      column-gap: var(--s-6);
    }
  }

  /* --- filter bar ------------------------------------------------------- */
  .filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--s-3) var(--s-4);
    border-block-start: var(--rule-heavy);
    border-block-end: var(--hairline);
    padding-block: var(--s-3);
    margin-block-end: var(--s-5);
  }
  .filter-bar .field {
    flex: 1 1 12rem;
    min-inline-size: 0;
    margin-block-end: 0;
  }
  .filter-bar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
  }
  .filter-bar__count {
    margin-inline-start: auto;
    font-family: var(--f-mono);
    font-size: var(--fs-small);
    font-variant-numeric: tabular-nums;
    color: var(--c-ink-muted);
    white-space: nowrap;
  }

  /* --- the board -------------------------------------------------------- */
  /* An agate table. It answers the width of its own column, because on the
     builder that column is much narrower than the window. */
  .board {
    container-type: inline-size;
    container-name: board;
  }
  .board__table {
    inline-size: 100%;
    font-family: var(--f-mono);
    font-size: var(--fs-small);
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
  }
  .board__table caption {
    text-align: start;
    font-family: var(--f-display);
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--c-ink-muted);
    padding-block-end: var(--s-2);
  }
  /* The column heads follow the reader down the page. The rule under them is
     an inset shadow, not a border: collapsed table borders do not travel with
     a sticky cell. */
  .board__table thead th {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    background: var(--c-paper);
    border-block-end: 0;
    box-shadow: inset 0 -2px 0 var(--c-ink);
    padding-block: var(--s-2);
    font-family: var(--f-display);
    font-size: var(--fs-micro);
    letter-spacing: 0.1em;
  }
  /* keeps the head lined up with the body cells, which carry the sport stripe */
  .board__table thead th:first-child {
    padding-inline-start: calc(var(--s-3) + 4px);
  }

  .board__row {
    --accent: var(--c-ink);
  }
  .board__row > * {
    padding-block: var(--s-3);
    border-block-end: var(--hairline);
    vertical-align: top;
    transition: background-color var(--t-fast) var(--ease);
  }
  /* One stripe per sport, from sports[].accent through data-tpl-style-accent.
     It is a graphic mark only. No text is ever set in it, because the accents
     are tuned against paper and the reader may be on the dark palette. */
  .board__row > :first-child {
    border-inline-start: 4px solid var(--accent);
    padding-inline-start: var(--s-3);
  }
  .board__row:hover > * {
    background: var(--c-paper-alt);
  }
  .board__row:focus-within > * {
    background: var(--c-tint-primary);
  }

  /* The cells stay cells. Layout happens on a wrapper inside them, because
     a display change on a th or a td strips the row and cell roles that a
     screen reader uses to read the board. */
  .board__event {
    font-family: var(--f-body);
    font-size: var(--fs-body);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--c-ink);
  }
  .board__event-inner {
    display: block;
  }
  .board__match {
    display: block;
    font-weight: 650;
    line-height: var(--lh-head);
  }
  .board__time {
    display: block;
    font-family: var(--f-mono);
    font-size: var(--fs-micro);
    font-variant-numeric: tabular-nums;
    color: var(--c-ink-muted);
    white-space: nowrap;
  }
  .board__venue,
  .board__league {
    display: block;
    font-family: var(--f-display);
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--c-ink-muted);
  }

  .board__picks-inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
  }
  .board__pick {
    display: flex;
    flex: 1 1 6rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-1);
    min-block-size: var(--touch-min);
    padding: var(--s-2) var(--s-3);
    background: var(--c-surface);
    color: var(--c-ink);
    border: 1px solid var(--c-ink-muted);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background-color var(--t-fast) var(--ease),
      border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  }
  .board__pick:hover {
    border-color: var(--c-ink);
    background: var(--c-paper-alt);
  }
  /* ink-inverse, not white: the chosen state has to stay legible when the
     primary ink is the light cyan of the night palette. */
  .board__pick[aria-pressed="true"] {
    background: var(--c-primary-ink);
    border-color: var(--c-primary-ink);
    color: var(--c-ink-inverse);
  }
  .board__pick[disabled],
  .board__pick[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
  }
  .board__pick-label {
    font-family: var(--f-display);
    font-size: var(--fs-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    text-align: center;
  }
  .board__pick-odds {
    font-family: var(--f-mono);
    font-size: var(--fs-body);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }

  @container board (inline-size >= 34rem) {
    .board__event-inner {
      display: grid;
      grid-template-columns: 7.5rem minmax(0, 1fr);
      column-gap: var(--s-4);
      align-items: baseline;
    }
    .board__time {
      grid-column: 1;
      grid-row: 1 / span 3;
    }
    .board__picks-inner {
      flex-wrap: nowrap;
      justify-content: flex-end;
    }
    .board__pick {
      flex: 0 1 8rem;
    }
  }

  /* --- coupon panel ----------------------------------------------------- */
  .coupon-panel {
    border: var(--hairline);
    border-block-start: var(--rule-brand);
    background: var(--c-surface);
    padding: var(--s-4);
  }
  .coupon-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-2) var(--s-3);
    border-block-end: var(--hairline);
    padding-block-end: var(--s-3);
    margin-block-end: var(--s-3);
  }
  .coupon-panel__head h2 {
    font-size: var(--fs-h3);
    margin: 0;
  }
  .coupon-panel__count {
    font-family: var(--f-mono);
    font-size: var(--fs-small);
    font-variant-numeric: tabular-nums;
    color: var(--c-ink-muted);
  }
  /* The body is the query container, not the panel: the panel has to stay a
     plain block so the summary bar can leave it and pin to the window. */
  .coupon-panel__body {
    container-type: inline-size;
    container-name: coupon;
  }
  .coupon-panel__sticky {
    display: grid;
    gap: var(--s-3);
    border-block-start: var(--rule-heavy);
    padding-block-start: var(--s-3);
    margin-block-start: var(--s-4);
    background: var(--c-surface);
  }
  .coupon-panel__missing {
    font-size: var(--fs-small);
    color: var(--c-ink-muted);
    margin: 0;
  }

  @media (min-width: 64rem) {
    .coupon-panel {
      position: sticky;
      inset-block-start: var(--s-4);
      max-block-size: calc(100dvh - var(--s-6));
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    .coupon-panel__sticky {
      position: sticky;
      inset-block-end: 0;
      padding-block-end: var(--s-1);
    }
  }

  /* Narrow: the panel drops under the board and the running total becomes a
     bar across the bottom of the window. Room is reserved at the end of the
     document so the bar never sits on top of the last line of the footer. */
  @media (max-width: 63.999rem) {
    .coupon-panel__sticky {
      position: fixed;
      inset-inline: 0;
      inset-block-end: 0;
      z-index: var(--z-header);
      margin-block-start: 0;
      padding: var(--s-3) var(--gutter);
      background: var(--c-paper);
      box-shadow: 0 -10px 26px -20px rgba(0, 0, 0, 0.65);
    }
    body[data-page="builder"] {
      padding-block-end: calc(var(--s-9) + var(--s-5));
    }
  }

  /* --- one chosen selection --------------------------------------------- */
  .selection-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto var(--touch-min);
    column-gap: var(--s-3);
    align-items: start;
    padding-block: var(--s-3);
    border-block-start: var(--hairline);
  }
  .selection-row:first-child {
    border-block-start: 0;
    padding-block-start: 0;
  }
  .selection-row__match {
    grid-column: 1;
    font-size: var(--fs-small);
    font-weight: 650;
    line-height: var(--lh-head);
  }
  .selection-row__pick {
    grid-column: 1;
    font-family: var(--f-display);
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--c-ink-muted);
  }
  .selection-row__odds {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }
  .selection-row__remove {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--touch-min);
    block-size: var(--touch-min);
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    color: var(--c-ink-muted);
    cursor: pointer;
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  }
  /* The cross is drawn, not typed: no glyph, no icon font, no image request. */
  .selection-row__remove::before {
    content: "";
    inline-size: 0.85rem;
    block-size: 0.85rem;
    background: currentColor;
    clip-path: polygon(
      10% 0,
      50% 40%,
      90% 0,
      100% 10%,
      60% 50%,
      100% 90%,
      90% 100%,
      50% 60%,
      10% 100%,
      0 90%,
      40% 50%,
      0 10%
    );
  }
  .selection-row__remove:hover {
    color: var(--c-danger);
    border-color: var(--c-danger);
  }

  @container coupon (inline-size < 18rem) {
    .selection-row {
      grid-template-columns: minmax(0, 1fr) var(--touch-min);
    }
    .selection-row__odds {
      grid-column: 1;
      grid-row: auto;
    }
    .selection-row__remove {
      grid-column: 2;
      grid-row: 1 / span 3;
    }
  }

  /* --- the calculation -------------------------------------------------- */
  .payout-box {
    border-block-start: var(--rule-heavy);
    border-block-end: var(--hairline);
    background: var(--c-paper-alt);
    padding: var(--s-4);
    margin-block: var(--s-4);
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-small);
  }
  .payout-box dl,
  .payout-box p:last-child {
    margin-block-end: 0;
  }
  .payout-box__row {
    display: flex;
    justify-content: space-between;
    gap: var(--s-3);
    padding-block: var(--s-1);
  }
  .payout-box__row dt {
    color: var(--c-ink-muted);
  }
  .payout-box__row dd {
    margin: 0;
    font-weight: 600;
  }
  .payout-box__total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-2) var(--s-3);
    border-block-start: 2px solid currentColor;
    padding-block-start: var(--s-3);
    margin-block-start: var(--s-3);
  }
  .payout-box__label {
    font-family: var(--f-display);
    font-size: var(--fs-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .payout-box__note {
    font-family: var(--f-body);
    font-size: var(--fs-micro);
    line-height: var(--lh-body);
    color: var(--c-ink-muted);
    margin-block: var(--s-3) 0;
  }

  /* ======================================================================
     7. Coupon page
     ====================================================================== */

  .coupon-stage {
    display: grid;
    justify-items: center;
    gap: var(--s-5);
    padding-block: var(--s-6);
  }
  .coupon-stage .ticket {
    inline-size: 100%;
  }
  .coupon-stage__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    inline-size: min(100%, 30rem);
  }
  .coupon-stage__actions .btn {
    flex: 1 1 11rem;
  }
  .coupon-stage__note {
    inline-size: min(100%, 30rem);
    font-size: var(--fs-small);
    color: var(--c-ink-muted);
    margin-block-end: 0;
  }
  .coupon-stage__note + .coupon-stage__note {
    margin-block-start: calc(var(--s-3) * -1);
  }

  .ticket__qr {
    display: grid;
    justify-items: center;
    gap: var(--s-2);
    padding-block: var(--s-3);
    /* The ticket carries its own fixed ink, the way a printed stub does.
       Every rule inside it is mixed from that ink, never from a new value. */
    border-block-end: 1px dotted color-mix(in oklab, currentColor 24%, var(--c-white));
  }
  .ticket__qr canvas {
    inline-size: min(100%, 12rem);
    block-size: auto;
    image-rendering: pixelated;
  }
  .ticket__qr svg {
    inline-size: min(100%, 12rem);
    block-size: auto;
    shape-rendering: crispEdges;
  }
  .ticket__qr-note {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in oklab, currentColor 72%, var(--c-white));
  }
  .ticket__compliance {
    border-block-start: 1px solid currentColor;
    padding-block-start: var(--s-3);
    margin-block-start: var(--s-3);
    font-size: 0.6875rem;
    line-height: 1.45;
    color: color-mix(in oklab, currentColor 76%, var(--c-white));
  }
  .ticket__compliance p {
    margin-block-end: var(--s-2);
  }
  .ticket__compliance p:last-child {
    margin-block-end: 0;
  }

  /* ======================================================================
     8. Retailers
     ====================================================================== */

  .retailer-list {
    display: grid;
    gap: var(--s-4);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  @media (min-width: 52rem) {
    .retailer-list {
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
    }
  }

  .retailer-card {
    container-type: inline-size;
    container-name: retailer;
    display: grid;
    gap: var(--s-3);
    align-content: start;
    border: var(--hairline);
    border-block-start: var(--rule-heavy);
    background: var(--c-surface);
    padding: var(--s-4);
  }
  .retailer-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-2) var(--s-3);
  }
  .retailer-card__name {
    font-family: var(--f-display);
    font-size: var(--fs-h3);
    font-weight: 700;
    font-stretch: 92%;
    line-height: var(--lh-head);
    margin: 0;
  }
  .retailer-card__type {
    font-family: var(--f-display);
    font-size: var(--fs-micro);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-ink-muted);
  }
  .retailer-card__address {
    font-style: normal;
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    margin: 0;
  }
  .retailer-card__postal {
    font-family: var(--f-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .retailer-card__services {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .retailer-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
  }

  .retailer-hours {
    inline-size: 100%;
    font-family: var(--f-mono);
    font-size: var(--fs-micro);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    margin: 0;
  }
  .retailer-hours caption {
    text-align: start;
    font-family: var(--f-display);
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-ink-muted);
    padding-block-end: var(--s-1);
  }
  .retailer-hours th,
  .retailer-hours td {
    padding: var(--s-1) 0;
    border-block-end: 0;
    font: inherit;
    text-transform: none;
    letter-spacing: 0;
    color: inherit;
  }
  .retailer-hours th {
    inline-size: 7rem;
    color: var(--c-ink-muted);
    font-weight: 400;
  }
  .retailer-hours tr + tr th,
  .retailer-hours tr + tr td {
    border-block-start: 1px dotted var(--c-rule);
  }
  .retailer-hours__closed {
    color: var(--c-ink-muted);
  }
  .retailer-hours__exception {
    color: var(--c-warning);
    font-weight: 600;
  }

  @container retailer (inline-size >= 30rem) {
    .retailer-card__body {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
      column-gap: var(--s-5);
      align-items: start;
    }
  }

  /* ======================================================================
     9. Results — agate
     ====================================================================== */

  .results-table {
    inline-size: 100%;
    font-family: var(--f-mono);
    font-size: var(--fs-small);
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
  }
  .results-table caption {
    text-align: start;
    font-family: var(--f-display);
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--c-ink-muted);
    padding-block-end: var(--s-2);
  }
  .results-table thead th {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    background: var(--c-paper);
    border-block-end: 0;
    box-shadow: inset 0 -2px 0 var(--c-ink);
    padding-block: var(--s-2);
    font-size: var(--fs-micro);
    letter-spacing: 0.1em;
  }
  .results-table th,
  .results-table td {
    padding-block: var(--s-2);
    padding-inline: var(--s-3);
  }
  .results-table th:first-child,
  .results-table td:first-child {
    padding-inline-start: 0;
  }
  .results-table tbody th {
    font-family: var(--f-body);
    font-size: var(--fs-small);
    font-weight: 650;
    text-transform: none;
    letter-spacing: 0;
    color: var(--c-ink);
  }
  .results-table tbody tr:hover th,
  .results-table tbody tr:hover td {
    background: var(--c-paper-alt);
  }
  .results-table__score {
    font-weight: 600;
    white-space: nowrap;
  }
  .results-table__date {
    color: var(--c-ink-muted);
    white-space: nowrap;
  }
  .results-table__status {
    font-family: var(--f-display);
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  /* Inside a horizontal scroller there is no vertical scrollport for the head
     to stick to, so it goes back to being an ordinary rule. */
  .table-scroll .results-table thead th,
  .table-scroll .board__table thead th {
    position: static;
    box-shadow: none;
    border-block-end: var(--rule-heavy);
  }

  /* ======================================================================
     10. Account
     ====================================================================== */

  .account-grid {
    display: grid;
    gap: var(--s-6);
    align-items: start;
  }
  @media (min-width: 56rem) {
    .account-grid {
      grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
      column-gap: var(--s-7);
    }
  }
  .account-grid__main {
    container-type: inline-size;
    container-name: account;
    min-inline-size: 0;
  }

  .account-nav {
    border-block-start: var(--rule-heavy);
    padding-block-start: var(--s-2);
    font-size: var(--fs-small);
  }
  .account-nav__head {
    font-family: var(--f-display);
    font-size: var(--fs-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--c-ink-muted);
    margin-block-end: var(--s-2);
  }
  .account-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .account-nav li + li {
    border-block-start: var(--hairline);
  }
  .account-nav a {
    display: flex;
    align-items: center;
    min-block-size: var(--touch-min);
    padding-block: var(--s-2);
    padding-inline: var(--s-3) var(--s-2);
    border-inline-start: 3px solid transparent;
    font-family: var(--f-display);
    font-weight: 600;
    text-decoration: none;
    color: var(--c-ink);
    line-height: 1.3;
  }
  .account-nav a:hover {
    background: var(--c-paper-alt);
    color: var(--c-primary-ink);
  }
  .account-nav a[aria-current="page"] {
    border-inline-start-color: var(--c-primary);
    background: var(--c-tint-primary);
    color: var(--c-primary-ink);
  }

  .account-cards {
    display: grid;
    gap: var(--s-4);
  }
  .account-stat {
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: 600;
    line-height: 1.1;
    display: block;
  }
  .account-stat__label {
    font-family: var(--f-display);
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-ink-muted);
    display: block;
    margin-block-end: var(--s-1);
  }

  @container account (inline-size >= 32rem) {
    .account-cards--2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @container account (inline-size >= 46rem) {
    .account-cards--3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* ======================================================================
     11. Common questions
     ====================================================================== */

  .faq {
    border-block-start: var(--rule-heavy);
  }
  .faq__group + .faq__group {
    margin-block-start: var(--s-6);
  }
  .faq__topic {
    font-family: var(--f-display);
    font-size: var(--fs-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--c-ink-muted);
    border-block-start: var(--hairline);
    padding-block-start: var(--s-3);
    margin-block-end: var(--s-2);
  }
  .faq details {
    border-block-end: var(--hairline);
  }
  .faq summary {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    list-style: none;
    cursor: pointer;
    min-block-size: var(--touch-min);
    padding-block: var(--s-3);
    padding-inline-end: var(--s-2);
    font-family: var(--f-display);
    font-weight: 650;
    font-size: var(--fs-body);
    line-height: var(--lh-head);
  }
  .faq summary::-webkit-details-marker {
    display: none;
  }
  .faq summary:hover {
    color: var(--c-primary-ink);
  }
  .faq summary:focus-visible {
    outline: 3px solid var(--c-focus);
    outline-offset: -3px;
  }
  /* The marker is two borders on an empty box, turned 45 degrees. */
  .faq summary::after {
    content: "";
    flex: 0 0 auto;
    margin-inline-start: auto;
    inline-size: 0.6rem;
    block-size: 0.6rem;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: translateY(-0.15rem) rotate(45deg);
    transition: transform var(--t-base) var(--ease);
  }
  .faq details[open] > summary::after {
    transform: translateY(0.1rem) rotate(225deg);
  }
  .faq details > :not(summary) {
    max-inline-size: var(--prose-max);
    padding-block-end: var(--s-4);
  }
  .faq details > p:last-child {
    margin-block-end: 0;
  }

  /* ======================================================================
     12. Empty states
     ====================================================================== */

  /* .empty in components.css is the base. These are the shapes it takes in a
     column, in a panel and across the board. The words are always in the
     markup: an empty state has to say what to do next, and CSS cannot say it. */
  .empty--panel {
    border: var(--hairline);
    border-block-start: var(--rule-heavy);
    max-inline-size: none;
  }
  .empty--inline {
    padding: var(--s-4);
    font-size: var(--fs-small);
    max-inline-size: none;
  }
  .empty--board {
    padding-block: var(--s-8);
    max-inline-size: none;
  }
  .empty--centred {
    margin-inline: auto;
  }
  .empty p:last-child {
    margin-block-end: 0;
  }
  .empty__action {
    margin-block-start: var(--s-4);
  }
}

/* ==========================================================================
   Supplement.
   The page CSS and the page markup were authored in parallel, so these are the
   components whose class names were settled after the first pass: the event
   board the builder actually renders, the account surfaces, the retailer
   finder, and the clause and contents furniture the legal documents use.
   Same tokens, same rules, no new colours.
   ========================================================================== */
@layer pages {

  /* ---- the board ------------------------------------------------------- */
  .board-col {
    min-inline-size: 0;
  }
  .board-count {
    margin: 0;
    color: var(--c-ink-muted);
    font-size: var(--fs-small);
  }
  .board__day {
    font-family: var(--f-display);
    font-size: 0.9375rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin: var(--s-5) 0 0;
    padding-block: var(--s-2);
    border-block-end: 2px solid var(--c-ink);
    position: sticky;
    inset-block-start: 0;
    background: var(--c-paper);
    z-index: 2;
  }
  .board__day:first-child {
    margin-block-start: 0;
  }

  .board-row {
    --accent: var(--c-ink);
    display: grid;
    gap: var(--s-2);
    padding-block: var(--s-3);
    border-block-end: var(--hairline);
    border-inline-start: 4px solid var(--accent);
    padding-inline-start: var(--s-3);
  }
  .board-row__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s-3);
    font-size: var(--fs-micro);
    color: var(--c-ink-muted);
  }
  .board-row__sport {
    font-family: var(--f-display);
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent);
  }
  .board-row__time {
    font-variant-numeric: tabular-nums;
  }
  .board-row__venue {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .board-row__teams {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4em;
    font-family: var(--f-display);
    font-weight: 650;
    font-size: 1.0625rem;
    line-height: 1.2;
  }
  .board-row__at {
    font-family: var(--f-body);
    font-weight: 400;
    font-style: italic;
    color: var(--c-ink-muted);
  }
  .board-row__options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: var(--s-2);
    margin-block-start: var(--s-1);
  }

  /* a pick reads like a key on a betting terminal */
  .pick {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    min-block-size: var(--touch-min);
    padding: var(--s-2) var(--s-3);
    background: var(--c-white);
    border: 1px solid var(--c-rule);
    border-radius: var(--r-sm);
    cursor: pointer;
    text-align: start;
    font-family: var(--f-body);
    font-size: 0.9375rem;
    transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
  }
  :root[data-theme="dark"] .pick {
    background: var(--c-paper-alt);
  }
  .pick:hover {
    border-color: var(--c-ink);
  }
  .pick--on {
    border-color: var(--c-primary-ink);
    border-inline-start-width: 5px;
    background: var(--c-tint-primary);
  }
  .pick__label {
    min-inline-size: 0;
  }
  .pick__line {
    color: var(--c-ink-muted);
    margin-inline-start: 0.35em;
  }
  .pick__odds {
    flex: 0 0 auto;
    font-weight: 600;
  }

  /* ---- selections on the coupon panel ---------------------------------- */
  .selection-list {
    list-style: none;
    margin: 0 0 var(--s-4);
    padding: 0;
  }
  .selection-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: start;
    gap: var(--s-3);
    padding-block: var(--s-3);
    border-block-end: var(--hairline);
  }
  .selection-row__body {
    display: grid;
    gap: 0.15rem;
    min-inline-size: 0;
  }
  .selection-row__pick {
    font-family: var(--f-display);
    font-weight: 650;
    font-size: 0.9375rem;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
    color: var(--c-ink);
  }
  .selection-row__meta,
  .selection-row__when {
    font-size: var(--fs-micro);
    color: var(--c-ink-muted);
    line-height: 1.35;
  }
  /* Sizing only. The cross itself is the ::before drawn earlier in this layer. */
  .selection-row__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--touch-min);
    min-block-size: var(--touch-min);
    align-self: center;
  }

  .payout-box__net,
  .payout-box__odds-note {
    display: block;
    font-size: var(--fs-small);
    color: var(--c-ink-muted);
    margin-block-start: var(--s-2);
  }
  .coupon-panel__blocker {
    margin: var(--s-2) 0 0;
    font-size: var(--fs-small);
    color: var(--c-ink-muted);
  }
  .coupon-panel__note {
    margin-block-start: var(--s-4);
    padding-block-start: var(--s-3);
    border-block-start: var(--hairline);
    font-size: var(--fs-micro);
    color: var(--c-ink-muted);
  }
  .filter-bar__field {
    min-inline-size: 0;
  }
  .results-count {
    color: var(--c-ink-muted);
    font-size: var(--fs-small);
  }

  /* ---- the ticket ------------------------------------------------------ */
  .ticket__rows {
    margin: 0;
  }
  .ticket__row--sel {
    align-items: start;
  }
  .ticket__pick {
    display: block;
    font-weight: 600;
  }
  .ticket__event,
  .ticket__when {
    display: block;
    font-size: 0.75rem;
    color: var(--c-ticket-ink-soft);
    line-height: 1.35;
  }
  .ticket__qr {
    display: flex;
    justify-content: center;
    padding-block: var(--s-4);
  }
  .ticket__qr svg {
    inline-size: min(58%, 190px);
    block-size: auto;
  }
  .ticket__fine {
    font-size: 0.6875rem;
    line-height: 1.45;
    color: var(--c-ticket-ink-soft);
    margin-block: var(--s-2) 0;
  }
  .coupon-stage {
    display: grid;
    justify-items: center;
    gap: var(--s-5);
    padding-block: var(--s-6);
  }
  .coupon-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    justify-content: center;
  }
  .coupon-actions__note {
    max-inline-size: 46ch;
    text-align: center;
    font-size: var(--fs-small);
    color: var(--c-ink-muted);
  }

  /* ---- account --------------------------------------------------------- */
  .auth-wrap {
    max-inline-size: 34rem;
  }
  .auth-alt {
    margin-block-start: var(--s-5);
    padding-block-start: var(--s-4);
    border-block-start: var(--hairline);
    font-size: var(--fs-small);
  }
  .password-row {
    display: flex;
    gap: var(--s-2);
    align-items: stretch;
  }
  .password-row .field__control {
    flex: 1 1 auto;
  }
  .password-strength {
    margin: var(--s-2) 0 0;
    font-size: var(--fs-small);
    color: var(--c-ink-muted);
  }
  .password-strength[data-score="3"],
  .password-strength[data-score="4"] {
    color: var(--c-positive);
  }
  .recovery {
    border: var(--hairline);
    border-inline-start: 4px solid var(--c-primary);
    padding: var(--s-4);
    background: var(--c-paper-alt);
  }
  .recovery__phrase {
    font-family: var(--f-mono);
    font-size: 1.25rem;
    letter-spacing: 0.04em;
    padding: var(--s-3);
    background: var(--c-white);
    border: 1px dashed var(--c-rule);
    word-spacing: 0.4em;
  }
  :root[data-theme="dark"] .recovery__phrase {
    background: var(--c-paper);
  }
  .form-status {
    margin-block-start: var(--s-3);
    font-size: var(--fs-small);
    color: var(--c-positive);
    font-weight: 600;
  }

  .account-grid {
    display: grid;
    gap: var(--s-6);
    align-items: start;
  }
  @media (min-width: 56rem) {
    .account-grid {
      grid-template-columns: 14rem minmax(0, 1fr);
      gap: var(--s-7);
    }
  }
  .account-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border-block-start: var(--rule-heavy);
  }
  .account-nav li {
    border-block-end: var(--hairline);
  }
  .account-nav a {
    display: block;
    padding: var(--s-3) 0;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    color: var(--c-ink);
    min-block-size: var(--touch-min);
  }
  .account-nav a:hover {
    color: var(--c-primary-ink);
  }
  .account-nav a[aria-current="page"] {
    color: var(--c-primary-ink);
    box-shadow: inset 3px 0 0 var(--c-primary);
    padding-inline-start: var(--s-3);
  }

  .coupon-card {
    border: var(--hairline);
    border-block-start: 3px solid var(--c-ink);
    padding: var(--s-4);
    margin-block-end: var(--s-4);
    background: var(--c-white);
  }
  :root[data-theme="dark"] .coupon-card {
    background: var(--c-paper-alt);
  }
  .coupon-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-block-end: var(--s-3);
  }
  .coupon-card__code {
    font-family: var(--f-mono);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
  }
  .coupon-card__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
    gap: var(--s-3);
    margin: 0 0 var(--s-3);
    padding-block: var(--s-3);
    border-block: var(--hairline);
  }
  .coupon-card__facts dt {
    font-family: var(--f-display);
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--c-ink-muted);
  }
  .coupon-card__facts dd {
    margin: 0;
    font-weight: 600;
  }
  .coupon-card__selections {
    list-style: none;
    margin: 0 0 var(--s-3);
    padding: 0;
    font-size: var(--fs-small);
  }
  .coupon-card__selections li {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    justify-content: space-between;
    padding-block: var(--s-2);
    border-block-end: 1px dotted var(--c-rule);
  }

  .activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .activity-list li {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-4);
    justify-content: space-between;
    padding-block: var(--s-3);
    border-block-end: var(--hairline);
    font-size: 0.9375rem;
  }
  .activity-list__what {
    font-family: var(--f-display);
    font-weight: 600;
  }
  .activity-list__when {
    color: var(--c-ink-muted);
    font-size: var(--fs-small);
  }

  .limit-statuses {
    display: grid;
    gap: var(--s-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    margin: 0 0 var(--s-3);
  }
  .limit-status dt {
    font-family: var(--f-display);
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-ink-muted);
  }
  .limit-status dd {
    margin: var(--s-1) 0 0;
    font-weight: 600;
  }
  .limit-status__bar {
    display: block;
    block-size: 6px;
    margin-block-start: var(--s-2);
    background: var(--c-rule);
  }
  .limit-status__bar > span {
    display: block;
    block-size: 100%;
    background: var(--c-primary-ink);
  }
  .limit-row {
    display: grid;
    gap: var(--s-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  }
  .limit-row__item {
    min-inline-size: 0;
  }
  .consent-record {
    display: grid;
    gap: var(--s-3);
    margin-block: var(--s-5);
    padding-block: var(--s-4);
    border-block: var(--hairline);
  }
  .consent-record dt {
    font-family: var(--f-display);
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-ink-muted);
  }
  .consent-record dd {
    margin: 0;
  }

  /* ---- retailer finder ------------------------------------------------- */
  .retailer-layout {
    display: grid;
    gap: var(--s-6);
    align-items: start;
  }
  @media (min-width: 62rem) {
    .retailer-layout {
      grid-template-columns: minmax(0, 1fr) 20rem;
    }
    .retailer-map {
      order: 2;
      position: sticky;
      inset-block-start: var(--s-4);
    }
  }
  .retailer-map {
    border: var(--hairline);
    padding: var(--s-4);
    background: var(--c-paper-alt);
  }
  .map {
    inline-size: 100%;
    block-size: auto;
  }
  .map__area {
    fill: var(--c-rule);
    stroke: var(--c-paper-alt);
    stroke-width: 2;
    transition: fill var(--t-base) var(--ease);
  }
  .map__area--on {
    fill: var(--c-primary-ink);
  }
  .map__label {
    font-family: var(--f-display);
    font-size: 11px;
    font-weight: 700;
    fill: var(--c-paper-alt);
    text-anchor: middle;
    letter-spacing: 0.08em;
  }
  .retailer-group {
    font-family: var(--f-display);
    font-size: 1.125rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: var(--s-6) 0 var(--s-3);
    padding-block-end: var(--s-2);
    border-block-end: 2px solid var(--c-ink);
  }
  .retailer-card__note {
    font-size: var(--fs-small);
    color: var(--c-ink-muted);
    font-style: italic;
  }

  /* ---- legal furniture ------------------------------------------------- */
  .clause {
    margin-block-end: var(--s-4);
  }
  .clause--sub {
    padding-inline-start: var(--s-5);
  }
  .clause-num {
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--c-ink-muted);
    margin-inline-end: 0.5em;
  }
  .clause-list {
    padding-inline-start: var(--s-5);
  }
  .toc {
    border: var(--hairline);
    border-inline-start: 4px solid var(--c-primary);
    padding: var(--s-4) var(--s-5);
    margin-block-end: var(--s-6);
    background: var(--c-paper-alt);
  }
  .toc__head {
    font-family: var(--f-display);
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--c-ink-muted);
    margin-block-end: var(--s-3);
  }
  .toc__list {
    margin: 0;
    padding-inline-start: var(--s-5);
    font-size: 0.9375rem;
  }
  .toc__list li {
    margin-block-end: var(--s-2);
  }
  .legal-toc__note {
    font-size: var(--fs-small);
    color: var(--c-ink-muted);
    margin-block-start: var(--s-3);
    margin-block-end: 0;
  }
  .is-current {
    font-weight: 700;
    color: var(--c-primary-ink);
  }
  .data-table,
  .regulators,
  .worked,
  .storage-list,
  .defs,
  .facts {
    font-size: var(--fs-small);
  }
  .postal {
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
  }
  .page-note,
  .small {
    font-size: var(--fs-small);
    color: var(--c-ink-muted);
  }
  .status {
    font-weight: 600;
  }
  .contact-block {
    border: var(--hairline);
    padding: var(--s-4);
    margin-block-end: var(--s-5);
  }
  .route-list {
    padding-inline-start: var(--s-5);
  }
  .tool-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .tool {
    border-block-start: var(--hairline);
    padding-block: var(--s-4);
  }
  .tool h3 {
    margin-block-end: var(--s-2);
  }
  .card__meta {
    font-size: var(--fs-small);
    color: var(--c-ink-muted);
  }
  .table-wrap {
    overflow-x: auto;
    max-inline-size: 100%;
  }
  .legal-doc {
    max-inline-size: var(--measure-legal);
  }
  /* A date and the full stop after it are one unit; a line break between them
     leaves an orphaned period at the start of the next line. */
  .nowrap {
    white-space: nowrap;
  }

  /* ---- FAQ ------------------------------------------------------------- */
  .faq-topic {
    margin-block: var(--s-6) var(--s-3);
  }
  .faq-list {
    list-style: none;
    margin: 0 0 var(--s-5);
    padding: 0;
    border-block-start: var(--hairline);
  }
  .faq-list details,
  .faq details {
    border-block-end: var(--hairline);
  }
  .faq-list summary,
  .faq summary {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding-block: var(--s-3);
    min-block-size: var(--touch-min);
    cursor: pointer;
    font-family: var(--f-display);
    font-weight: 600;
    list-style: none;
  }
  .faq-list summary::-webkit-details-marker,
  .faq summary::-webkit-details-marker {
    display: none;
  }
  .faq-list summary::before,
  .faq summary::before {
    content: "";
    flex: 0 0 auto;
    inline-size: 0.6rem;
    block-size: 0.6rem;
    border-inline-end: 2px solid var(--c-primary-ink);
    border-block-end: 2px solid var(--c-primary-ink);
    transform: rotate(-45deg);
    transition: transform var(--t-fast) var(--ease);
  }
  .faq-list details[open] summary::before,
  .faq details[open] summary::before {
    transform: rotate(45deg);
  }
  .faq__answer {
    padding-block-end: var(--s-4);
    padding-inline-start: calc(0.6rem + var(--s-3));
    max-inline-size: 62ch;
  }
}

/* ==========================================================================
   Imagery.
   The photographs arrived at 1024px on the long edge, so every slot is sized in
   CSS with an aspect-ratio box and object-fit rather than trusting the file to
   be the shape the layout wants.
   ========================================================================== */
@layer pages {

  /* A band under the page head. Cropped by CSS, not by the file. */
  .page-banner {
    margin: 0 0 var(--s-6);
    border-block-end: var(--hairline);
    background: var(--c-paper-alt);
  }
  .page-banner img {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 5;
    object-fit: cover;
    object-position: 50% 45%;
  }
  @media (max-width: 48rem) {
    .page-banner img {
      aspect-ratio: 16 / 9;
    }
  }

  /* Sport tile: a photograph over the accent bar, the label block beneath it.
     Still not a rounded icon card. */
  .sport-tile {
    padding: 0;
    overflow: hidden;
  }
  .sport-tile__media {
    display: block;
    background: var(--c-paper-alt);
  }
  .sport-tile__media img {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease);
  }
  .sport-tile:hover .sport-tile__media img {
    transform: scale(1.03);
  }
  @media (prefers-reduced-motion: reduce) {
    .sport-tile__media img {
      transition: none;
    }
    .sport-tile:hover .sport-tile__media img {
      transform: none;
    }
  }
  .sport-tile__body {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    padding: var(--s-3);
    padding-block-end: var(--s-4);
  }
  .sport-tile__count {
    margin-block-start: var(--s-2);
  }

  /* The hero photograph runs off the right edge on a wide viewport and sits
     above the type on a narrow one. */
  .hero__media img,
  .hero__media picture {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }
  .hero__media img {
    object-fit: cover;
    object-position: 60% 50%;
    aspect-ratio: 16 / 9;
  }
  @media (min-width: 62rem) {
    .hero__media img {
      aspect-ratio: auto;
      min-block-size: 26rem;
    }
  }
  @media (max-width: 48rem) {
    .hero__media img {
      aspect-ratio: 3 / 4;
      max-block-size: 60vh;
    }
  }

  /* The age gate sits over a darkened photograph rather than a flat scrim. */
  .age-gate::backdrop {
    background-color: rgba(10, 14, 20, 0.82);
    background-image: var(--age-gate-bg, none);
    background-size: cover;
    background-position: 50% 50%;
    background-blend-mode: multiply;
  }
}

@layer pages {
  /* A step keeps its newspaper column and gains a small photograph on the end.
     Still a numbered list, not three cards in a row. */
  .steps__thumb {
    display: none;
  }
  @media (min-width: 48rem) {
    .steps li {
      grid-template-columns: 3.25rem minmax(0, 1fr) 11rem;
      align-items: start;
    }
    .steps__thumb {
      display: block;
      order: 3;
    }
    .steps__thumb img {
      inline-size: 100%;
      block-size: auto;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border: var(--hairline);
    }
  }

  .inline-figure {
    margin: var(--s-4) 0 var(--s-5);
  }
  .inline-figure img {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: var(--hairline);
  }
}

@layer pages {
  .inline-figure--wide {
    margin-block: var(--s-6);
  }
  .inline-figure figcaption {
    margin-block-start: var(--s-2);
    font-size: var(--fs-small);
    color: var(--c-ink-muted);
    max-inline-size: 60ch;
  }
}