/* sub.css: the pages behind the homepage (technology, commentary,
   partners and FAQ).

   They are the homepage without the stadium. The same bar runs along the
   top, the same plates carry the words, and the same match plays in the
   page head, drawn flat from straight above by src/js/pitch2d.js. The bar,
   the plates, the tabs, the buttons and the foot match page.css rule for
   rule; they are repeated here rather than shared so the homepage's layer
   can change without moving these pages.

   A page is a head and a run of sections:

     head      the flat pitch, full width, with the page's headline tab and
               a cream plate hung off the left edge over it, and the match's
               score bug in the top right corner
     sections  full width bands of solid colour, cream, pale, gold or deep,
               meeting with hard edges. Each opens with a deep headline tab
               hung off the left or the right edge of the screen.
     closing   "Send us one match." on night, then the foot

   No fades, veils, gradients or glass anywhere. Ink is deep green on light
   plates and cream on deep ones. Nothing moves in 3D. Things wipe in from
   the edge they hang from, the way the homepage's plates do, as they come
   into view. */

:root {
  /* The board: the pitch drawn flat. */
  --board-grass: #3E8A34;
  --board-grass-2: #357E2E;
  --board-line: #F4F1E6;
  --board-shadow: rgba(0, 46, 1, 0.28);
  /* The kits, as world/palette.js draws them. */
  --kit-home: #F6F1E6;
  --kit-away: var(--brand-orange);
  --kit-trim: #2A437E;
  --kit-home-keeper: #D9489A;
  --kit-away-keeper: #F4D63A;

  /* Where the edge of a band's contents sits: the gutter on a normal screen,
     and further in on a very wide one, so a tab hung off the screen edge
     still lines up with the words under it. */
  --inset: max(var(--gutter), calc(50vw - var(--maxw) / 2 + var(--gutter)));
  --sec-pad: clamp(64px, 10vh, 128px);
  --stagger: 70ms;
}

/* ---------------------------------------------------------------- base -- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--cream);
  scrollbar-color: var(--deep) var(--cream);
  scroll-padding-top: calc(var(--bar-h) + 12px);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--deep);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  caret-color: var(--orange);
  --ink: var(--deep);
  --ink-2: var(--moss);
  --rule: var(--rule-light);
  --focus: var(--deep);
}

[hidden] { display: none !important; }
img, video, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
a { color: inherit; }

::selection { background: var(--orange); color: var(--on-orange); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: fixed;
  z-index: 100;
  left: 16px;
  top: -80px;
  padding: 12px 18px;
  background: var(--deep);
  color: var(--cream);
  font-weight: 600;
  text-decoration: none;
  --focus: var(--orange);
}
.skip:focus { top: 12px; }

/* ----------------------------------------------------------------- bar --
   As on the homepage: a night strip with a hard gold rule, and the name of
   the section being read in a gold tab that runs into the rule. */

.bar {
  position: fixed;
  z-index: 20;
  inset: 0 0 auto 0;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  padding-inline: var(--gutter);
  background: var(--night);
  border-bottom: 4px solid var(--gold);
  color: var(--cream);
  --ink: var(--cream);
  --focus: var(--cream);
}

.wordmark {
  flex: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-mark);
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--ink);
}
.wordmark__dot { color: var(--orange); }
.bar .wordmark__dot { color: var(--orange); }

.bar__now {
  margin-right: auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-inline: 14px 18px;
  background: var(--gold);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-ui);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--deep);
}
.bar__now [data-readout] { overflow: hidden; text-overflow: ellipsis; }
.bar__now [data-readout].is-swapping { animation: readout 360ms var(--ease-expo); }
@keyframes readout {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

.bar__pin { flex: none; position: relative; width: 12px; height: 20px; }
.bar__pin::before {
  content: "";
  position: absolute;
  left: 1px; top: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--orange);
}
.bar__pin::after {
  content: "";
  position: absolute;
  left: 5px; top: 10px;
  width: 2px; height: 8px;
  background: var(--gold);
}

.nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); }
.nav a {
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  color: var(--cream);
  padding-block: 6px;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}
.nav a:hover { text-decoration: underline; text-decoration-color: var(--orange); }
.nav a[aria-current="page"] {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 3px;
}
.nav .nav__contact { padding: 8px 16px; background: var(--cream); color: var(--deep); --focus: var(--cream); }
.nav .nav__contact:hover { background: var(--pale); text-decoration: none; }

.burger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.burger__lines,
.burger__lines::before,
.burger__lines::after {
  display: block;
  width: 22px;
  height: 2px;
  margin-inline: auto;
  background: var(--cream);
  transition: transform var(--dur-state) ease;
}
.burger__lines { position: relative; }
.burger__lines::before,
.burger__lines::after { content: ""; position: absolute; left: 0; }
.burger__lines::before { top: -7px; }
.burger__lines::after { top: 7px; }
.burger[aria-expanded="true"] .burger__lines { background: transparent; }
.burger[aria-expanded="true"] .burger__lines::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines::after { transform: translateY(-7px) rotate(-45deg); }

/* -------------------------------------------------------------- plates -- */

.plate {
  position: relative;
  padding: clamp(22px, 2.6vw, 34px) clamp(22px, 3vw, 40px);
  background: var(--cream);
  color: var(--ink);
  --ink: var(--deep);
  --ink-2: var(--moss);
  --rule: var(--rule-light);
  --focus: var(--deep);
}
.plate--pale { background: var(--pale); }
.plate--gold { background: var(--gold); --ink-2: var(--deep); }
.plate--deep {
  background: var(--night);
  --ink: var(--cream);
  --ink-2: var(--pale);
  --rule: var(--night-rule);
  --focus: var(--cream);
}

/* The heading tab: night, cream letters, as wide as its words, so it is
   the same dark as the bar, the heads and the deep bands. It hangs off the
   screen edge, so its padding on that side is the inset. */
.tab {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0.3em 0.55em 0.26em var(--inset);
  background: var(--night);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: none;
  text-wrap: balance;
  --focus: var(--cream);
}
.tab--hero {
  font-size: var(--fs-h1);
  line-height: 0.98;
  max-width: min(100%, calc(11.5em + var(--inset)));
  padding-block: 0.26em 0.24em;
}
.hl { color: var(--orange); }

/* ---------------------------------------------------------------- type -- */

.h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3-lg);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: none;
  text-wrap: balance;
  color: var(--ink);
}
/* The small name inside a card. It used to be uppercase with the wide
   tracking of a label, which is why it read as a label rather than as the
   bottom step of the heading scale. In sentence case that tracking is wrong,
   so it comes back to the same 0.02em the steps above it use.

   The owner asked on 2026-09-16 for this level in orange, to lift it off the
   paragraph under it. Orange has to change value with its ground: the brand
   orange is 5.9:1 on night and 2.2:1 on cream, which no reader could use. So
   a light plate takes the deeper orange and a dark one takes the brand
   orange, through --accent-ink. On cream the deeper orange measures 4.31:1,
   which clears the bar for large text and misses the small text bar of 4.5:1
   by a fifth of a point. That is the closest a light plate gets to orange
   ink, and the limit is the plate rather than the choice of orange. */
.h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--accent-ink);
}

/* Cream ink means a dark ground, and on a dark ground the card name takes
   the brand orange at 5.9:1 rather than the deeper orange, which measures
   only 3.07:1 there. So the two tokens move together: every block on the
   site that sets --ink to cream either appears in this list or sets
   --accent-ink itself. Technology's uncertainty panel is the one that
   caught this, because it is a night panel that is not a deep band, so an
   earlier version of this rule missed it and shipped its three card names
   at 3.07:1. If you add a dark ground anywhere, add it here too. */
.bar,
.plate--deep,
.sec--deep,
.hs--deep,
.hero__in,
.chead,
.desk,
.mast,
.post-head,
.head .head__plate { --accent-ink: var(--orange); }
.label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.lede {
  font-size: var(--fs-lede);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  max-width: 44ch;
  text-wrap: pretty;
}

.copy { max-width: var(--measure); }
.copy p {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
.copy p:first-child { color: var(--ink); font-weight: 500; }
.copy p + p { margin-top: 0.75em; }

.hint { margin-top: 14px; font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); }
.optional { font-weight: 700; color: var(--ink); }

/* ------------------------------------------------------------- actions -- */

.actions { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 24px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 12px 24px;
  border: 2px solid transparent;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-btn);
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  background: none;
  transition: background-color var(--dur-state) ease, border-color var(--dur-state) ease, color var(--dur-state) ease;
}
.btn svg { flex: none; width: 0.95em; height: 0.95em; fill: currentColor; }
.btn--primary { background: var(--orange); color: var(--on-orange); }
.btn--primary:hover { background: var(--orange-hover); }
.btn--line { border-color: var(--ink); color: var(--ink); }
.btn--line:hover { background: color-mix(in oklab, var(--ink), transparent 88%); }
.btn--deep { background: var(--deep); color: var(--cream); }
.btn--deep:hover { background: var(--green); }

/* ---------------------------------------------------------------- head --
   The flat pitch, full width under the bar, with the match playing. The
   headline tab and a cream plate hang off the left edge and sit on the
   bottom of the head, so the cream of the plate carries on into the page
   below it. The score bug stands in the top right corner. */

.head {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(84svh, 860px);
  padding-top: var(--bar-h);
  background: var(--board-grass-2);
  isolation: isolate;
}
.head__board {
  position: absolute;
  inset: var(--bar-h) 0 0 0;
  z-index: -1;
  width: 100%;
  height: calc(100% - var(--bar-h));
  /* The pitch keeps clear of the plates on the left and the bug above. */
  --inset-l: 0.34;
  --inset-r: 0.02;
  --inset-t: 0.12;
  --inset-b: 0.04;
}
.head__stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: min(100%, calc(var(--inset) + 46rem));
}
.head__plate {
  width: 100%;
  padding: clamp(20px, 2.4vw, 32px) clamp(24px, 3vw, 44px) clamp(28px, 3.4vw, 44px) var(--inset);
}
.head__plate .lede { max-width: 38ch; }

/* The score bug: team, score, team, clock, like the one on a broadcast. */
.bug {
  position: absolute;
  top: calc(var(--bar-h) + clamp(14px, 2.4vh, 26px));
  right: var(--inset);
  display: flex;
  align-items: stretch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.9375rem, 1.1vw, 1.125rem);
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.bug > span { display: flex; align-items: center; padding: 0.55em 0.7em; }
.bug__team { background: var(--deep); color: var(--cream); }
.bug__team--away { background: var(--orange); color: var(--on-orange); }
.bug__score { background: var(--cream); color: var(--deep); gap: 0.45em; }
.bug__clock { background: var(--gold); color: var(--deep); min-width: 4.2em; justify-content: center; }
.bug__live { background: var(--deep); color: var(--cream); gap: 0.45em; }
.bug__live::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--orange);
  animation: live 1.6s steps(2, jump-none) infinite;
}
@keyframes live { 50% { background: var(--cream); } }

/* ------------------------------------------------------------ sections --
   Full width bands of one solid colour. Where two meet, the change of
   colour is the edge. */

.sec {
  position: relative;
  padding-block: var(--sec-pad);
  background: var(--cream);
  color: var(--ink);
  --ink: var(--deep);
  --ink-2: var(--moss);
  --rule: var(--rule-light);
  --focus: var(--deep);
}
.sec--pale { background: var(--pale); }
.sec--gold { background: var(--gold); --ink-2: var(--deep); }
.sec--deep {
  background: var(--night);
  --ink: var(--cream);
  --ink-2: var(--pale);
  --rule: var(--night-rule);
  --focus: var(--cream);
}
/* On a deep band the tab turns cream, so it still stands out. */
.sec--deep .tab { background: var(--cream); color: var(--deep); --focus: var(--deep); }
.sec--deep .plate:not(.plate--pale):not(.plate--gold):not(.plate--deep) { background: var(--green); --ink: var(--cream); --ink-2: var(--pale); --rule: var(--rule-deep); --focus: var(--cream); }

/* A tab and the line under it, hung off the left edge. */
.sec__head { display: flex; flex-direction: column; align-items: flex-start; }
.sec__lede {
  margin-top: clamp(18px, 2.4vw, 28px);
  padding-left: var(--inset);
  padding-right: var(--gutter);
  max-width: calc(var(--inset) + 46rem);
}
/* The same, hung off the right edge. */
.sec--right .sec__head { align-items: flex-end; }
.sec--right .sec__head .tab { padding: 0.3em var(--inset) 0.26em 0.55em; }
.sec--right .sec__lede { padding-left: var(--gutter); padding-right: var(--inset); text-align: right; }
.sec--right .sec__lede .lede { margin-left: auto; }

/* The contents of a band, lined up with the tab's words. */
.sec__in {
  margin-top: clamp(32px, 5vh, 56px);
  padding-inline: var(--inset);
}

/* ------------------------------------------------------------ closing --
   "Send us one match." on night, the last band on every page. */

.closing .sec__in { margin-top: 0; }
.closing__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
}
.closing__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-close);
  line-height: 0.95;
  text-transform: none;
  color: var(--cream);
  text-wrap: balance;
}
.closing .lede { margin-top: 20px; color: var(--pale); }
.contact {
  display: grid;
  gap: 18px;
  padding-top: 20px;
  border-top: 2px solid var(--rule);
}
.contact dt {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.contact dd { margin-top: 2px; font-size: var(--fs-lede); font-weight: 500; color: var(--cream); }
.contact a {
  display: inline-block;
  padding-block: 8px;
  margin-block: -8px;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.contact a:hover { text-decoration-color: var(--orange); }

/* ---------------------------------------------------------------- foot -- */

.foot { background: var(--night-deep); color: var(--cream); border-top: 2px solid var(--gold); --focus: var(--cream); }
.foot__in {
  max-width: var(--maxw);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px clamp(20px, 3vw, 44px);
  padding: 18px var(--gutter);
}
.foot .wordmark { color: var(--cream); }
.foot__links { display: flex; flex-wrap: wrap; gap: 0 22px; }
.foot__links a {
  display: inline-block;
  padding-block: 11px;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--cream);
  text-decoration: none;
  text-underline-offset: 5px;
}
.foot__links a:hover,
.foot__links a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--orange); }
.foot__note { margin-left: auto; font-size: var(--fs-note); color: var(--pale); }

/* ------------------------------------------------------ shared pieces --
   Parts more than one page uses. */

/* A well for real Liat output: footage or a still, framed in solid colour. */
.well {
  position: relative;
  background: var(--well);
  border: 4px solid var(--deep);
  overflow: hidden;
}
.sec--deep .well { border-color: var(--cream); }
.well > img,
.well > video {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* A caption tab on the well's corner. */
.well__tag {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 6px 12px 7px;
  background: var(--deep);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Options: big plain buttons, one chosen at a time, as on the homepage. The
   chosen one is deep green, and while they take turns an orange bar along
   its foot runs out the time until the next. */
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 4px; }
.option {
  position: relative;
  min-height: 64px;
  padding: 14px 18px 16px;
  border: 0;
  background: var(--pale);
  color: var(--deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-option);
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--dur-state) ease, color var(--dur-state) ease;
}
.sec--pale .option { background: var(--cream); }
.option:hover { background: var(--pale-2); }
.sec--pale .option:hover { background: var(--cream-2); }
.option[aria-pressed="true"],
.option[aria-selected="true"] { background: var(--night); color: var(--cream); }
/* The ring takes the band's focus colour, deep on light and cream on night.
   Orange on cream or pale is only about 2.3:1. */
.option:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; z-index: 1; }
.option small {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: 0;
  text-transform: none;
  color: var(--moss);
}
.option[aria-pressed="true"] small,
.option[aria-selected="true"] small { color: var(--pale); }
.option__timer { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; display: none; }
.option[aria-pressed="true"] .option__timer,
.option[aria-selected="true"] .option__timer { display: block; background: var(--green); }
.option__timer i {
  display: block;
  height: 100%;
  background: var(--orange);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
}
.calm .option__timer { display: none !important; }
/* Once the reader has chosen, the turns stop, so the timer goes too. */
.is-picked .option[aria-pressed] .option__timer,
.is-picked .option[aria-selected] .option__timer { display: none; }

/* A panel shown by an option. The one coming in wipes from the left. */
[data-panel].is-entering { animation: wipe-in 560ms var(--ease-expo) both; }
@keyframes wipe-in {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* A list with square green markers, for short items in running order. */
.dots { display: flex; flex-wrap: wrap; row-gap: 2px; }
.dots li { font-size: var(--fs-body); line-height: 1.7; color: var(--ink); }
.dots li + li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-inline: 0.7em;
  vertical-align: 0.18em;
  background: var(--green);
}
.sec--deep .dots li + li::before { background: var(--orange); }

/* A list of full sentences, each on a green square. */
.ticks li { position: relative; padding-left: 24px; color: var(--ink); max-width: 62ch; }
.ticks li + li { margin-top: 10px; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 9px;
  height: 9px;
  background: var(--green);
}
.sec--deep .ticks li::before { background: var(--orange); }

/* -------------------------------------------------------- choreography --
   Everything is visible without JS. With JS (html.js), a .reveal waits
   clipped to nothing at the edge it hangs from, and wipes out from that
   edge when it comes into view, on the homepage's exponential ease out.
   Pieces that come into view together go 70ms apart. A .rise lifts a
   little into place instead, for pictures and blocks that are not hung
   from an edge. */

.js .reveal {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}
.js .reveal--right,
.js .sec--right .sec__head .reveal { clip-path: inset(0 0 0 100%); }
.js .reveal.is-on,
.js .sec--right .sec__head .reveal.is-on {
  opacity: 1;
  clip-path: inset(-12px -12px -12px -12px);
  transition:
    opacity 90ms linear calc(var(--i, 0) * var(--stagger)),
    clip-path 720ms var(--ease-expo) calc(var(--i, 0) * var(--stagger));
}

.js .rise { opacity: 0; transform: translate3d(0, 22px, 0); }
.js .rise.is-on {
  opacity: 1;
  transform: none;
  transition:
    opacity 380ms linear calc(var(--i, 0) * var(--stagger)),
    transform 820ms var(--ease-expo) calc(var(--i, 0) * var(--stagger));
}

/* Reduced motion: things appear with a short change of opacity. */
.calm.js .reveal,
.calm.js .rise { clip-path: none !important; transform: none !important; }
.calm.js .reveal.is-on,
.calm.js .rise.is-on { transition: opacity 200ms linear; }
.calm [data-panel].is-entering { animation: none; }
.calm .bug__live::before { animation: none; }

/* ------------------------------------------------------------- stacked --
   Below 900px the head stacks: the pitch first, then the tab and the plate
   at full width. Bands keep their order. */

@media (max-width: 899.98px) {
  :root { --bar-h: 58px; }

  .bar { padding-inline: 16px 8px; gap: 12px; }
  .bar__now { font-size: var(--fs-note); letter-spacing: 0.05em; padding-inline: 10px 12px; }
  .burger { display: block; }
  .nav {
    position: absolute;
    top: calc(var(--bar-h) - 4px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 16px 18px;
    background: var(--night);
    border-top: 4px solid var(--gold);
    border-bottom: 4px solid var(--gold);
  }
  .nav:not(.is-open) { display: none; }
  .nav a { padding-block: 13px; font-size: 1.0625rem; border-bottom: 1px solid var(--night-rule); }
  .nav .nav__contact { margin-top: 14px; text-align: center; border-bottom: 0; }

  .head { min-height: 0; padding-top: calc(var(--bar-h) + 46svh); }
  .head__board {
    height: 46svh;
    bottom: auto;
    --inset-l: 0.02;
    --inset-r: 0.02;
    --inset-t: 0.2;
    --inset-b: 0.04;
  }
  .head__stack { max-width: none; }
  .head__plate { padding-inline: var(--inset) 20px; }
  .bug { font-size: 0.8125rem; }

  .closing__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .btn { width: 100%; }
  .actions { flex-direction: column; }
  .foot__note { margin-left: 0; width: 100%; }
  .bug__live { display: none !important; }
}

/* A page head used to take its own size below 380px, which put a third
   private scale under the same class name on the smallest screens. It is gone
   and the token governs there too: at 380px a page head is the 2rem floor of
   --fs-h1, which still stands a clear step above the 1.625rem floor of a
   section heading. If a page head is ever too small on a phone, raise the
   token's floor so every page moves together, rather than reinstating a rule
   that only one width can see. */

/* ------------------------------------------------------------- compact --
   The owner, 2026-09-15, on every page but the homepage: the UI and the
   spaces were too big, and everything should be concise and small so people
   do not lose the thread. The pages behind the homepage take a tighter
   scale here. The homepage (and the explore copies of it) carry body.home
   and load this file too, so every rule below skips them and they keep the
   scale above. Page stylesheets that read these tokens shrink with them. */

/* The heading sizes are deliberately NOT re-declared here any more. They
   used to be, and that is what broke the hierarchy: the same class rendered
   at 50px on the homepage and 35px on every page behind it, and the closing
   line came out larger than the hero. Headings now come from the one scale
   in tokens.css. Body text still tightens here, which is what the owner
   asked for on 2026-09-15 and is not what went wrong. */
body:not(.home) {
  --sec-pad: clamp(40px, 6vh, 72px);
  --fs-lede: clamp(1.0625rem, 1.15vw, 1.1875rem);
  --fs-body: clamp(1rem, 1.05vw, 1.0625rem);
  --fs-option: clamp(1.125rem, 1.3vw, 1.3125rem);
  --fs-btn: 1.0625rem;
  --stagger: 60ms;
}

body:not(.home) .plate { padding: clamp(16px, 1.8vw, 24px) clamp(18px, 2.2vw, 28px); }

body:not(.home) .copy p + p { margin-top: 0.6em; }
body:not(.home) .hint { margin-top: 10px; }

body:not(.home) .actions { gap: 10px 12px; margin-top: 18px; }
body:not(.home) .btn { min-height: 46px; padding: 10px 20px; gap: 8px; }

body:not(.home) .head { min-height: min(56svh, 540px); }
body:not(.home) .head__stack { max-width: min(100%, calc(var(--inset) + 40rem)); }
body:not(.home) .head__plate { padding: clamp(14px, 1.6vw, 22px) clamp(20px, 2.4vw, 32px) clamp(18px, 2.2vw, 28px) var(--inset); }
body:not(.home) .bug { top: calc(var(--bar-h) + clamp(10px, 1.6vh, 18px)); font-size: clamp(0.8125rem, 0.95vw, 1rem); }

body:not(.home) .sec__lede {
  margin-top: clamp(12px, 1.5vw, 18px);
  max-width: calc(var(--inset) + 40rem);
}
body:not(.home) .sec__in { margin-top: clamp(20px, 3vh, 32px); }

body:not(.home) .closing .sec__in { margin-top: 0; }
body:not(.home) .closing__grid { gap: clamp(20px, 3.4vw, 52px); }
body:not(.home) .closing .lede { margin-top: 12px; }
body:not(.home) .contact { gap: 12px; padding-top: 14px; }
body:not(.home) .contact dd { font-size: var(--fs-body); }

body:not(.home) .foot__in { padding-block: 10px; gap: 4px clamp(18px, 2.6vw, 36px); }
body:not(.home) .foot__links { gap: 0 18px; }
body:not(.home) .foot__links a { padding-block: 9px; }

body:not(.home) .options { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
body:not(.home) .option { min-height: 52px; padding: 10px 16px 12px; }
body:not(.home) .option__timer { height: 5px; }
body:not(.home) .ticks li + li { margin-top: 8px; }
body:not(.home) .well__tag { padding: 5px 10px 6px; font-size: var(--fs-note); }

@media (max-width: 899.98px) {
  body:not(.home) { --sec-pad: clamp(36px, 5vh, 52px); }
  body:not(.home) .head { min-height: 0; padding-top: calc(var(--bar-h) + 34svh); }
  body:not(.home) .head__board { height: 34svh; }
  body:not(.home) .head__stack { max-width: none; }
  body:not(.home) .head__plate { padding-inline: var(--inset) 20px; }
  body:not(.home) .bug { font-size: 0.75rem; }
}

/* The sub-page copy of the same below-380px override, removed for the same
   reason. See the note further up this file. */

/* ------------------------------------------------------------- centred --
   The owner, 2026-09-16: the whole site was left aligned, and the headings
   read better centred. Every heading on a page behind the homepage is
   centred here, together with the one line that sits under it. The
   homepage hero is the one the owner kept as it was, and the homepage and
   the explore copies carry body.home, so nothing below reaches them.
   What sits under a heading stays left aligned: lists, cards, options,
   copy and buttons. Page stylesheets centre their own heads. */

/* The headline tab no longer hangs off the left screen edge, so its
   padding is even on both sides and it centres in its band. */
body:not(.home) .tab {
  margin-inline: auto;
  padding-inline: 0.55em;
}
body:not(.home) .tab--hero { padding-inline: 0.5em; }

/* The head at the top of a page carries no block behind it. Four of the five
   page heads already had none, because each page's own pitch-*.css turned it
   off one at a time, and the FAQ was the one left standing on a night plate.
   The owner asked on 2026-09-16 why the FAQ had one when the commentary head
   did not. So the odd one out is the one that changes, and it changes here
   rather than in five page stylesheets. Cream on the night head reads at
   13.26 to 1. */
body:not(.home) .tab--hero {
  background: transparent;
  color: var(--cream);
  --focus: var(--cream);
}

body:not(.home) .sec__head { align-items: center; text-align: center; }

/* ---- The heading is the panel's own top edge ----
   Chosen by the owner on 2026-09-16 out of nine treatments, and asked for on
   every page. The night block is no longer a tab laid on top of a panel: it
   is as wide as the panel, it carries the panel's corner radius on its top
   two corners, and it sits flush at the panel's top. So a panel begins with
   a dark bar instead of having one dropped onto it.

   The panel behind it is drawn by the page's own pitch-*.css as
   `.sec:not(.sec--deep)::before`, inset by `--gap / 2` down and `--fg` in.
   The bar matches that inset and is pulled up through the section's top
   padding to meet it. Those files load after this one and belong to another
   session, so the geometry is mirrored here rather than edited there, and
   the selectors below are a class heavier than theirs so they win anyway.
   Every fallback is 0px, so a page that sets none of those tokens gets a
   bar flush to its own edges rather than a broken offset. */

/* Where the panel's own edges are, measured from the section's box. The
   pages take two different shapes here and the bar has to meet both:

     partners, technology, commentary: the section runs full bleed and the
     panel is a `::before` inset by `--gap / 2` down and `--fg` in, so the
     bar has to come in by the same amounts to sit on it.

     faq, blog: the section IS the panel. Its own margin and radius make it
     one, so the panel's edges are the section's edges and the bar must not
     be inset at all.

   The first shape is the default below. A page of the second kind sets both
   of these to 0 in its own stylesheet, which is the only line it needs. The
   bar was built assuming the first shape everywhere, which inset it twice on
   faq and blog and pushed it down instead of capping the panel. */
body:not(.home) {
  --bar-x: var(--fg, 0px);
  --bar-y: calc(var(--gap, 0px) / 2);
}

/* The fill is --night-raised rather than --night, and the bar carries a
   hairline on all four sides. Both are there for the same reason: on
   technology, the FAQ and the blog the section carries no fill of its own,
   so the bar can sit straight on the pitch, and the pitch's darker mowing
   stripe is #0D2111, which is exactly --night. A bar the same colour as the
   ground behind it has no silhouette, which is what the owner meant on
   2026-09-16 by the heading not being visible. Raising the fill one step is
   worth only 1.17:1 on its own, so the hairline is the part doing the work,
   and the two together give the bar an edge on a light panel and on the
   grass alike. The inset shadow is deliberate: a border would add 2px to a
   box whose margins are calculated to meet the panel exactly. */
body:not(.home) .sec:not(.sec--deep) > .sec__head {
  margin-inline: var(--bar-x);
  margin-top: calc(var(--bar-y) - var(--sec-pad));
  margin-bottom: clamp(22px, 2.8vw, 38px);
  padding: clamp(15px, 1.7vw, 24px) clamp(20px, 2.4vw, 36px);
  background: var(--night-raised);
  box-shadow: inset 0 0 0 1px var(--bar-edge);
  border-radius: var(--panel-r, 0px) var(--panel-r, 0px) 0 0;
  color: var(--cream);
  --ink: var(--cream);
  --ink-2: var(--pale);
  --rule: var(--rule-deep);
  --accent-ink: var(--orange);
  --focus: var(--cream);
}
/* Inside the bar the heading carries no block of its own: the bar is the
   block now. Without this the old tab would paint a second night rectangle
   on top of the first one. */
body:not(.home) .sec:not(.sec--deep) > .sec__head .tab {
  padding: 0;
  background: transparent;
  color: var(--cream);
  --focus: var(--cream);
}
body:not(.home) .sec:not(.sec--deep) > .sec__head .sec__lede {
  margin-top: 8px;
  padding-inline: 0;
  max-width: 54ch;
}
body:not(.home) .sec:not(.sec--deep) > .sec__head .sec__lede .lede { color: var(--pale); }
body:not(.home) .sec__lede {
  padding-inline: var(--gutter);
  margin-inline: auto;
  max-width: calc(var(--gutter) + 40rem);
  text-align: center;
}
body:not(.home) .sec__lede .lede { margin-inline: auto; }

/* The head at the top of a page: the tab and the plate under it both
   centre, and the pitch behind them sits even on both sides instead of
   keeping clear of a left hand column. */
body:not(.home) .head__stack {
  align-items: center;
  margin-inline: auto;
  text-align: center;
}
body:not(.home) .head__plate {
  padding-inline: clamp(24px, 3vw, 44px);
  text-align: center;
}
body:not(.home) .head__plate .lede { margin-inline: auto; }
body:not(.home) .head__board { --inset-l: 0.04; --inset-r: 0.04; --inset-b: 0.12; }

/* A centred heading waits clipped at its middle and wipes open from there,
   rather than from the left edge it used to hang off. Only the waiting
   state is set here: an .is-on heading is left to the rule above, which is
   less specific than this one and would otherwise never get to open it. */
.js body:not(.home) .sec__head .reveal:not(.is-on),
.js body:not(.home) .head__stack .reveal:not(.is-on) { clip-path: inset(0 50% 0 50%); }

/* The closing band ends every page the same way, so it centres too and
   the contact list comes below the words instead of beside them. The
   homepage joins in here: on 2026-09-16 the owner asked for the closing
   call to run on one line with the contact details under it, centred, and
   that is the same shape every other page had already taken. So these
   rules are no longer held back from body.home. */
.closing__grid {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}
.closing .lede { margin-inline: auto; }
.closing .actions { justify-content: center; }
/* Standing under the words rather than beside them, the three contact
   details run across in one row, so the band ends no taller than it was
   when it had two columns. They go back to a stack on a narrow screen. */
.closing .contact {
  grid-auto-flow: column;
  justify-content: center;
  gap: clamp(24px, 4vw, 64px);
}
@media (max-width: 599.98px) {
  .closing .contact { grid-auto-flow: row; gap: 14px; }
}