/* ---- tarmac (Tappet — Motorcycle gear & workshop 57) — near-black tarmac and
   charcoal ground, warm off-white type, one petrol blue held back for the ghost
   border, the links and the price line.
   THE STRUCTURAL MOVE: three tile strips STEP WIDER as the page descends — four
   across, then six full-bleed, then six again below the catalogue — and the
   middle one flips to studio white so it lands as the only bright block on a
   dark page. The strips are picked out by ADJACENCY, never nth-of-type (the hero
   is always the first section, so a class-based nth would silently never fire):
   the bright band is the strip that FOLLOWS a strip, the closing machine rail is
   the strip that FOLLOWS the buy grid. Everything else is left to the shared
   sheet, which is the point — pictures only ever come in rows on this page, and
   words only ever come alone. ---- */
body.t-tarmac {
  background: #111214;
  color: #dcd8d1;
  --tm-blue: #74a4c6;
  --tm-signal: #2e5c7a;
  --surface: #17181b;
  --surface-2: #1b1d20;
  --line: #26282c;
  --line-strong: #383b41;
  --heading: #f3f0ea;
  --text: #dcd8d1;
  --muted: #888d93;
  --header-bg: rgba(17, 18, 20, 0.92);
  --radius: 0;
}
body.t-tarmac a { color: var(--tm-blue); }
body.t-tarmac .btn.brand { background: var(--tm-signal); border-color: var(--tm-signal); color: #f3f0ea; box-shadow: none; border-radius: 0; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 700; padding: 15px 30px; }

/* the opener: full bleed and viewport tall, but the copy is held to the same
   left edge the rest of the page uses, so nothing floats loose in the picture */
body.t-tarmac .sc-hero { min-height: 100vh; padding: 96px max(24px, calc(50vw - 520px)); }
body.t-tarmac .sc-hero h1 { font-weight: 700; font-size: clamp(34px, 6.4vw, 76px); line-height: 1.02; letter-spacing: -0.025em; max-width: 12ch; }
body.t-tarmac .sc-hero .btn.brand.sc-hero-ghost { background: transparent; border: 1px solid var(--tm-blue); color: #f3f0ea; }
body.t-tarmac .sc-hero .btn.brand.sc-hero-ghost:hover { background: var(--tm-signal); border-color: var(--tm-signal); color: #f3f0ea; }
body.t-tarmac .sc-h2 { text-transform: uppercase; letter-spacing: 0.24em; font-weight: 700; font-size: clamp(11px, 1.3vw, 13px); color: var(--muted); margin-bottom: 26px; }
body.t-tarmac .sc-strip .sc-h2, body.t-tarmac .sc-buygrid .sc-h2 { text-align: left; }

/* strip one — four across, contained and gapped, the narrow end of the descent */
body.t-tarmac .sc-strip { padding: 74px 20px 6px; }
body.t-tarmac .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
body.t-tarmac .sc-strip-img { border: 0; aspect-ratio: 4 / 3; }
body.t-tarmac .sc-strip-label { margin-top: 12px; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11.5px; font-weight: 600; color: var(--heading); }

/* strip two — the one bright thing on the page: edge to edge, studio white,
   six shallow squares, tighter than the row above it */
body.t-tarmac .sc-strip + .sc-strip { background: #f1efeb; max-width: none; margin: 44px 0 0; padding: 60px max(24px, calc(50vw - 520px)) 52px; }
body.t-tarmac .sc-strip + .sc-strip .sc-h2, body.t-tarmac .sc-strip + .sc-strip .sc-strip-label { color: #14161a; }
body.t-tarmac .sc-strip + .sc-strip .sc-strip-img { background: #ffffff; aspect-ratio: 1; }
body.t-tarmac .sc-strip + .sc-strip .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 18px; }
@media (min-width: 860px) {
  body.t-tarmac .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.t-tarmac .sc-strip + .sc-strip .sc-strip-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* the single block of words: narrow, centred, no photograph anywhere near it —
   the whitespace either side is doing the job a picture does elsewhere */
body.t-tarmac .sc-richtext { max-width: 540px; padding: 116px 20px 104px; }
body.t-tarmac .sc-richtext .sc-h2 { text-transform: none; letter-spacing: -0.015em; font-weight: 500; font-size: clamp(19px, 2.4vw, 26px); color: var(--heading); }

/* the catalogue, arriving late: three equal cards, one clean row, twice */
body.t-tarmac .sc-buy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 52px 32px; }
body.t-tarmac .sc-buy-cat { color: var(--muted); letter-spacing: 0.2em; }
body.t-tarmac .sc-buy-p { color: var(--tm-blue); }

/* strip three — the machine rail, ruled off from the goods it follows */
body.t-tarmac .sc-buygrid + .sc-strip { border-top: 1px solid var(--line); margin-top: 52px; padding-top: 58px; }

/* the page ends on a booking rather than a mailing list */
body.t-tarmac .sc-contact-band { background: #0a0b0c; padding: 90px 0 104px; margin-top: 72px; }

/* NIGHT — the roller door down: the ground drops to black, the petrol lifts so
   the price line and the ghost border still read, and the studio band comes off
   the boil so it stops glaring across a dark room. */
html[data-theme="dark"] body.t-tarmac {
  background: #08090a;
  color: #d5d1ca;
  --tm-blue: #8bb8d6;
  --tm-signal: #3a6f92;
  --surface: #101113;
  --surface-2: #141517;
  --line: #202225;
  --line-strong: #32353a;
  --heading: #f6f3ee;
  --text: #d5d1ca;
  --muted: #7d8288;
  --header-bg: rgba(8, 9, 10, 0.92);
}
html[data-theme="dark"] body.t-tarmac .sc-strip + .sc-strip { background: #e4e2de; }
html[data-theme="dark"] body.t-tarmac .sc-contact-band { background: #050506; }