/* ---- touchline (Touchline — Club kit & supporters' goods 88) --------------
   THE STRUCTURAL MOVE: the catalogue is the last, the widest and the only
   LIGHT block on the page. Eight showcase panels run FOUR across in two
   gapless rows on near-white, so the wall reads as a bank of lit cut-outs
   punched out of the charcoal ground — the shared sheet ships this layout two
   across, which would have made a tall ladder instead of a wall. Everything
   above it stays inside the container (strip → ledger → fixture card), so the
   page only bleeds out at the very bottom. Amber is the club colour and is
   rationed to the strip labels, the ledger heading and the buttons; on the
   white wall it survives only as the buy slab, because 11px amber on white
   cannot be read. */
body.t-touchline {
  background: #14150f;
  color: #cfcec4;
  --tl-amber: #f2a71b;
  --surface: #1b1c14;
  --surface-2: #21221a;
  --line: #2c2d23;
  --line-strong: #3d3e31;
  --heading: #f6f5f0;
  --text: #cfcec4;
  --muted: #8d8d81;
  --header-bg: #14150f;
  --radius: 0;
  --shadow: none;
}

/* tier two of the header: the bar keeps its own solid ground and never goes
   glassy over the slides, so white slide type can never collide with the menu */
body.t-touchline .sf-header, body.t-touchline .sf-head,
body.t-touchline .sf-footer, body.t-touchline .sf-foot {
  background: #14150f; border-color: #2c2d23;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* tier one: the thin charcoal utility strip that sits above the bar */
body.t-touchline .sf-announce { background: #1b1c14; color: #8d8d81; border-bottom: 1px solid #2c2d23; text-transform: uppercase; letter-spacing: 0.2em; font-size: 10.5px; }
body.t-touchline .btn.brand { background: var(--tl-amber); border-color: var(--tl-amber); color: #14150f; box-shadow: none; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; font-size: 11.5px; padding: 15px 30px; }

/* full viewport, three cross-fading slides, copy hard left and never centred */
body.t-touchline .sc-hero { min-height: 100vh; }
body.t-touchline .sc-hero h1 { font-weight: 800; font-size: clamp(34px, 6.2vw, 70px); line-height: 1.02; letter-spacing: -0.03em; max-width: 16ch; }

/* four tiles, one word under each, in the club colour */
body.t-touchline .sc-strip-label { margin-top: 12px; color: var(--tl-amber); text-transform: uppercase; letter-spacing: 0.2em; font-size: 11.5px; }

/* THE LEDGER — the only photograph-free block on the page: four figures in a
   narrow column, set left so the numerals stack under one another, opened by a
   hairline. The heading is the second of amber's two resting places. */
body.t-touchline .sc-richtext { max-width: 620px; padding: 84px 20px 18px; text-align: left; }
body.t-touchline .sc-richtext .sc-h2 { text-align: left; text-transform: uppercase; letter-spacing: 0.18em; font-size: clamp(12px, 1.6vw, 14px); color: var(--tl-amber); margin-bottom: 22px; }
body.t-touchline .sc-richtext p { color: var(--heading); font-size: clamp(15.5px, 1.9vw, 18px); line-height: 2; font-variant-numeric: tabular-nums; border-top: 1px solid #2c2d23; padding-top: 24px; }

/* the fixture card is CONTAINED — the shared sheet bleeds banners edge to edge,
   and on this page nothing is allowed to go wide above the wall */
body.t-touchline .sc-banner { margin: 46px 0 10px; width: auto; max-width: 100%; min-height: 42vh; display: flex; align-items: center; }

/* --- THE WALL: eight panels, four across, two rows, no gaps, lights on --- */
body.t-touchline .sc-show-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
@media (min-width: 1000px) { body.t-touchline .sc-show-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
body.t-touchline .sc-show-item { background: #ffffff; color: #14150f; }
body.t-touchline .sc-show-item:nth-child(4n + 2), body.t-touchline .sc-show-item:nth-child(4n + 3) { background: #f1efe8; }
body.t-touchline .sc-show-inner { min-height: 470px; padding: 40px 24px 44px; }
body.t-touchline .sc-show-cat { color: #6f6b5d; letter-spacing: 0.2em; }
body.t-touchline .sc-show-price { color: #14150f; font-weight: 800; font-size: clamp(19px, 1.9vw, 26px); }

/* the lights go off again for the last band */
body.t-touchline .sc-contact-band { background: #14150f; border-top: 1px solid #2c2d23; padding: 84px 0 96px; }

/* NIGHT — floodlights off. The ground drops to pitch black, the wall stays lit
   but comes off pure white so it stops glaring in a dark room, and the amber
   lifts a step to hold its contrast against the deeper charcoal. */
html[data-theme="dark"] body.t-touchline {
  background: #0a0b07;
  color: #c8c7bd;
  --tl-amber: #ffb733;
  --surface: #111207;
  --surface-2: #17180e;
  --line: #23241b;
  --line-strong: #33342a;
  --heading: #faf9f4;
  --text: #c8c7bd;
  --muted: #8f8f83;
  --header-bg: #0a0b07;
}
html[data-theme="dark"] body.t-touchline .sf-header, html[data-theme="dark"] body.t-touchline .sf-head,
html[data-theme="dark"] body.t-touchline .sf-footer, html[data-theme="dark"] body.t-touchline .sf-foot,
html[data-theme="dark"] body.t-touchline .sc-contact-band { background: #0a0b07; border-color: #23241b; }
html[data-theme="dark"] body.t-touchline .sf-announce { background: #111207; border-bottom-color: #23241b; }
html[data-theme="dark"] body.t-touchline .sc-show-item { background: #f3f1ea; }
html[data-theme="dark"] body.t-touchline .sc-show-item:nth-child(4n + 2), html[data-theme="dark"] body.t-touchline .sc-show-item:nth-child(4n + 3) { background: #e7e4db; }