/* ==========================================================================
   Teddy Musella — driver site

   Night livery. The page sits on deep navy with a single cyan accent, the
   way a pit lane reads under floodlight, and one typeface — Saira — does
   every job by moving along its width axis: condensed and uppercase for
   display, normal width for reading.

   The palette and type came from the reference build in Downloads; the
   structure, motion and content are this site's own.
   ========================================================================== */

:root {
  /* --- ground ---------------------------------------------------------- */
  --navy:       #061527;   /* the page itself */
  --navy-deep:  #04101f;   /* masthead, hero, page headers */
  --navy-pit:   #020b16;   /* the deepest bands */
  --panel:      rgba(13, 36, 66, .45);

  /* --- ink on navy ----------------------------------------------------- */
  --text:       #eaf2fa;
  --text-2:     #c3d2e2;
  --text-3:     #8fa5bf;
  --hair:       rgba(159, 190, 225, .14);
  --hair-soft:  rgba(159, 190, 225, .07);

  /* --- accent ---------------------------------------------------------- */
  --cyan:       #4cb6ea;
  --cyan-lt:    #7fcbf2;
  /* Off the car's front-wing endplates. Reserved for the current season's
     figure, so one number is unmistakably "now". */
  --gold:       #f3c14b;
  /* Half his passport. Used at 3px and nowhere else. */
  --it-green:   #008c45;
  --it-red:     #cd212a;

  /* The ground a partner mark sits on. Slightly off pure white so it reads
     as a plate rather than a hole punched in the page. */
  --plate:      #f2f5f8;

  /* --- the older names, kept as aliases --------------------------------
     These are referenced in ~160 places across the two stylesheets. Rather
     than rename every use and risk missing one, they now point at the
     tokens above. The names above are the source of truth; reach for those
     in anything new. */
  --ink:        var(--navy-deep);
  --ink-soft:   #0b1e35;
  --slate:      var(--text-3);
  --slate-pale: #6d8097;
  --rule:       var(--hair);
  --rule-soft:  var(--hair-soft);
  --paper:      var(--navy);
  --card:       rgba(10, 26, 46, .55);
  --blue:       var(--cyan);
  --blue-deep:  var(--cyan-lt);
  --sky:        var(--cyan-lt);

  --gut:  clamp(1.25rem, 4vw, 3.5rem);
  --page: 78rem;

  /* One family, two widths. Saira carries a real width axis, so the
     condensed display cut and the reading cut are the same font file at
     different `font-stretch` values — no second family to load, and the
     stretch values already written through this file keep working. */
  --display: "Saira", "Arial Narrow", Helvetica, sans-serif;
  --body:    "Saira", system-ui, -apple-system, sans-serif;

  /* The display width. Headings are condensed and set in caps. */
  --cond: 76%;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Tells the browser to draw form controls, scrollbars and the overscroll
   gutter dark too, so nothing flashes white at the edges of the page.

   `:root`, not `html`. A pseudo-class outranks a type selector, so when
   this page is wrapped in a host skeleton that sets `:root { color-scheme:
   light }` — which is what happens when it is published as an artifact —
   an `html` rule here loses and the scrollbars come back white against a
   navy page. At equal specificity this wins on document order instead. */
:root { color-scheme: dark; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--text-2);
  font-family: var(--body);
  font-size: clamp(1.0625rem, .35vw + 1rem, 1.1875rem);
  line-height: 1.55;
  font-synthesis: none;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

/* `img { display: block }` above out-specifies the UA [hidden] rule, so
   restate it — the masthead relies on [hidden] for the logo swap. */
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 0;
}

.wrap {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* Anchor targets have to clear the sticky masthead, which is 62px plus
   the 3px tricolore above it. Without this, following #results or
   #contact parks the heading underneath the bar and the section looks
   like it starts mid-sentence. This was wrong for every in-page link on
   the site, not just the new ones. */
main[id],
section[id] { scroll-margin-top: 5.25rem; }

/* --- ambient field -----------------------------------------------------
   One continuous wash of livery light sitting behind the whole document, so
   the page reads as a single surface instead of a stack of coloured bands.
   The light sections below are translucent to let it through; it drifts and
   brightens as you scroll, driven by a native scroll timeline (no JS).
   Kept at low alpha so text contrast is unaffected. */

.ambient {
  position: fixed;
  inset: -12% 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 46% 30% at 14% 10%, rgba(76, 182, 234, .13), transparent 70%),
    radial-gradient(ellipse 52% 34% at 88% 42%, rgba(18, 48, 90, .55), transparent 72%),
    radial-gradient(ellipse 42% 30% at 32% 78%, rgba(76, 182, 234, .09), transparent 70%),
    radial-gradient(ellipse 38% 26% at 78% 96%, rgba(18, 48, 90, .45), transparent 70%);
  will-change: transform;
}

@supports (animation-timeline: scroll()) {
  .ambient {
    animation: ambientdrift linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes ambientdrift {
  from { transform: translate3d(0, 2%, 0) scale(1.02); }
  to   { transform: translate3d(0, -7%, 0) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .ambient { animation: none; transform: none; }
}

.skip {
  position: absolute; left: -9999px;
  background: var(--cyan); color: var(--navy-deep);
  font-family: var(--display); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; font-size: .75rem;
  padding: .75rem 1rem; z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

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

h1, h2, h3, .num, .ledger, .statv, .navlink, .btn, .yr {
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
}

/* Headings are condensed caps. At 800 the cap height nearly fills the line
   box, so the line-height goes below 1 to close the gap between stacked
   lines — the same reason the hero's name sits as tightly as it does. */
h2 {
  font-size: clamp(1.875rem, 4vw, 3.4rem);
  font-weight: 800;
  font-stretch: var(--cond);
  line-height: .92;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 1.5rem;
  text-wrap: balance;
}

h3 {
  font-size: clamp(1.0625rem, 1.2vw, 1.25rem);
  font-weight: 700;
  font-stretch: 88%;
  line-height: 1.18;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 .5rem;
}

/* --- eyebrow ------------------------------------------------------------
   The small tracked-out label that introduces a section, with a short rule
   leading into it. Borrowed wholesale from the reference, because it does
   the job a heading alone cannot: says what kind of thing follows. */

.eyebrow {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--display);
  font-size: .6875rem;
  font-weight: 500;
  font-stretch: 100%;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 1.1rem;
  max-width: none;
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--cyan);
  flex: none;
}

/* Centred variant: a rule on both sides, which is how the reference sets
   the partner block. The trailing rule is the same pseudo-element idea,
   so the two stay the same length however the label is worded. */
.eyebrow-mid {
  justify-content: center;
  text-align: center;
}
.eyebrow-mid::after {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--cyan);
  flex: none;
}

.h2-mid { text-align: center; margin-inline: auto; }

/* A rule either side of a centred heading — the eyebrow's flanks, scaled
   up to sit against display type. The rules are `flex: none` so the
   heading keeps the width it wants and they do not stretch to fill. */
.h2-flank {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.9rem, 2vw, 1.5rem);
}
.h2-flank::before,
.h2-flank::after {
  content: "";
  flex: none;
  height: 2px;
  width: clamp(1.75rem, 5vw, 4rem);
  background: var(--cyan);
}

p { margin: 0 0 1.15em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

/* --- masthead ----------------------------------------------------------- */

/* --- tricolore ----------------------------------------------------------
   Three pixels of Italy across the very top of every page. He holds both
   passports and the American half is already all over the site — the flag
   on the Road America straight, the shield on the suit — so this is the
   other half, stated once and quietly. */

.tri {
  display: flex;
  height: 3px;
  position: relative;
  z-index: 60;
}
.tri span { flex: 1; }
.tri span:nth-child(1) { background: var(--it-green); }
.tri span:nth-child(2) { background: #f4f6f8; }
.tri span:nth-child(3) { background: var(--it-red); }

.mast {
  position: sticky; top: 0; z-index: 50;
  background: rgba(4, 16, 31, .84);
  backdrop-filter: saturate(130%) blur(16px);
  -webkit-backdrop-filter: saturate(130%) blur(16px);
  border-bottom: 1px solid var(--hair);
}
.mast-in {
  position: relative;
  max-width: var(--page);
  margin-inline: auto;
  padding: .7rem var(--gut);
  display: flex; align-items: center; gap: 1rem;
}

/* Nav centred in the bar rather than trailing the wordmark, which leaves the
   right end free for a standing call to action. */
@media (min-width: 821px) {
  .nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Square, not a pill: nothing on this page is rounded now. Cyan carries
   dark text — cyan under white would sit at about 2:1. */
.mast-cta {
  margin-left: auto;
  font-family: var(--display);
  font-size: .75rem;
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: .55rem 1.1rem;
  border-radius: 0;
  background: var(--cyan);
  color: var(--navy-deep);
  border: 1px solid var(--cyan);
  transition: background .15s, border-color .15s;
}
.mast-cta:hover { background: var(--cyan-lt); border-color: var(--cyan-lt); }

@media (max-width: 560px) { .mast-cta { display: none; } }

.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; }
/* The monogram is the masthead brand on its own, so it runs a little
   larger than it did when it sat beside a wordmark. */
.brand img { height: 34px; width: auto; }
@media (max-width: 560px) { .brand img { height: 28px; } }
.brand-fallback {
  font-family: var(--display);
  font-weight: 800; font-stretch: 80%;
  font-size: 1.125rem; letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1;
}
.brand-fallback span { color: var(--cyan); }

.nav { display: flex; align-items: center; gap: clamp(.9rem, 1.8vw, 1.9rem); }
.navlink {
  font-size: .75rem; font-weight: 500; font-stretch: 100%;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none; color: var(--text-3);
  padding: .3rem 0;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.navlink:hover { color: var(--text); border-bottom-color: var(--cyan); }
.navlink[aria-current="page"] { color: var(--text); border-bottom-color: var(--cyan); }

.navtoggle {
  display: none;
  font-family: var(--display); font-size: .75rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  background: none; border: 1px solid var(--hair); border-radius: 0;
  padding: .45rem .8rem; color: var(--text); cursor: pointer;
}

@media (max-width: 820px) {
  .navtoggle { display: block; }
  .nav {
    position: absolute; inset: 100% 0 auto;
    flex-direction: column; align-items: stretch; gap: 0;
    /* Opaque, not the translucent card: this panel drops over photographs. */
    background: var(--navy-deep);
    border-bottom: 1px solid var(--hair);
    padding: .5rem var(--gut) 1rem;
  }
  .nav[hidden] { display: none; }
  .navlink { padding: .7rem 0; border-bottom: 1px solid var(--rule-soft); font-size: .9375rem; }
  .navlink:hover, .navlink[aria-current="page"] { border-bottom-color: var(--rule-soft); }
}

/* --- hero --------------------------------------------------------------- */

.hero { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.hero-img {
  width: 100%;
  height: clamp(24rem, 78vh, 44rem);
  object-fit: cover;
  object-position: 58% 62%;
  filter: saturate(104%) contrast(104%);
}
/* On a phone the frame is much taller than it is wide, so bias the crop
   toward the car rather than the run-off behind it. */
@media (max-width: 700px) {
  .hero-img { object-position: 68% 76%; }
}
.hero-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(10,14,19,.92) 0%, rgba(10,14,19,.55) 34%, rgba(10,14,19,.05) 66%),
    /* protects the upper-left origin block and the masthead */
    linear-gradient(to bottom, rgba(10,14,19,.58) 0%, rgba(10,14,19,.12) 22%, transparent 34%),
    linear-gradient(to right, rgba(10,14,19,.7) 0%, rgba(10,14,19,0) 58%);
}
.hero-copy {
  position: absolute; inset: auto 0 0;
  max-width: var(--page);
  margin-inline: auto;
  padding: 0 var(--gut) clamp(1.75rem, 4vw, 3rem);
}

.hero-no {
  font-family: var(--display);
  font-weight: 800; font-stretch: var(--cond);
  font-size: clamp(3.5rem, 11vw, 8.5rem);
  line-height: .8;
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(76, 182, 234, .5);
  margin: 0 0 .1em;
}
h1 {
  font-weight: 800; font-stretch: var(--cond);
  font-size: clamp(2.5rem, 8.5vw, 6.25rem);
  /* Tight enough that the surname sits right under the given name — the
     line box is much taller than the cap height at this weight. */
  line-height: .84;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 0;
  text-transform: uppercase;
}
/* Both name lines are blocks so each can be clipped independently by the
   hero reveal in motion.css. */
h1 > span { display: block; }
h1 em {
  display: block;
  font-style: normal;
  color: var(--cyan);
}
.hero-line {
  font-family: var(--body);
  font-size: clamp(.9375rem, 1.2vw, 1.125rem);
  font-weight: 400; font-stretch: 100%;
  line-height: 1.55;
  color: var(--text-2);
  margin: 1.15rem 0 0;
  max-width: 46ch;
}

/* ---- season ledger ----------------------------------------------------
   Read as a pit-wall strip rather than a row of boxes: the car number on a
   plate at the left, then the facts, each under a sector bar that fills as
   the strip arrives. */

.ledger {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(180deg, #1b2430 0%, var(--ink-soft) 78%);
  border-top: 1px solid rgba(255, 255, 255, .09);
  border-bottom: 1px solid rgba(0, 0, 0, .5);
}

/* the hero's light bleeding down into the strip */
.ledger::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 260% at 10% 0%,
    rgba(86, 174, 228, .20), transparent 68%);
}

.ledger-in {
  position: relative;
  max-width: var(--page);
  margin-inline: auto;
  padding: 0 var(--gut);
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

/* the number plate */
.ledger-no {
  display: grid;
  place-items: center;
  padding: 1rem 1.5rem 1.1rem 0;
  margin-right: 1.5rem;
  border-right: 1px solid rgba(255, 255, 255, .14);
  font-family: var(--display);
  font-size: clamp(2.25rem, 5vw, 3.1rem);
  font-weight: 800;
  font-stretch: 125%;
  line-height: 1;
  letter-spacing: -.045em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .42);
}

.ledger-cell {
  position: relative;
  padding: 1.15rem 1.25rem 1.25rem 0;
}
.ledger-cell + .ledger-cell { padding-left: 1.25rem; border-left: 1px solid rgba(255, 255, 255, .12); }

/* sector bar: fills left to right, inheriting the reveal's own stagger */
.ledger-cell::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(to right, var(--sky), rgba(86, 174, 228, .25));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .6s var(--ease-out);
  transition-delay: inherit;
}
.ledger-cell.in::before { transform: scaleX(1); }
.ledger-cell + .ledger-cell::before { left: 1.25rem; width: calc(100% - 1.25rem); }

.ledger-k {
  display: block;
  font-size: .6875rem; font-weight: 550; font-stretch: 104%;
  letter-spacing: .07em;
  color: rgba(255, 255, 255, .55);
  margin-bottom: .3rem;
}
.ledger-v { font-size: 1.0625rem; font-weight: 650; font-stretch: 108%; letter-spacing: -.01em; }
.ledger-v small {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--sky);
  margin-left: .35rem;
  letter-spacing: 0;
}

@media (max-width: 760px) {
  .ledger-in { grid-template-columns: 1fr 1fr; }
  .ledger-no {
    grid-column: 1 / -1;
    place-items: center start;
    padding: .9rem 0 .8rem;
    margin-right: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }
  .ledger-cell { padding: 1rem 1rem 1.1rem 0; }
  .ledger-cell + .ledger-cell { padding-left: 1rem; }
  .ledger-cell:nth-child(2) { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .ledger-cell:nth-child(3) { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .ledger-cell:nth-child(4) { grid-column: 1 / -1; border-left: 0; padding-left: 0; }
  .ledger-cell:nth-child(4)::before { left: 0; width: 100%; }
}

/* --- sections ----------------------------------------------------------- */

.sect { padding: clamp(3.5rem, 7vw, 6.875rem) 0; position: relative; }

/* The deepest band. It used to be the only dark one on a light page; now
   the page is dark and this is what sits below it, so sections still
   alternate — just the other way round. */
.sect-dark {
  color: var(--text-2);
  background:
    radial-gradient(ellipse 70% 90% at 18% 0%, rgba(76, 182, 234, .10), transparent 68%),
    linear-gradient(180deg, var(--navy-pit) 0%, #010710 100%);
}
.sect-dark h2, .sect-dark h3 { color: var(--text); }
.sect-dark p { color: var(--text-2); }
.sect + .sect:not(.sect-dark):not(.sect-tint) { border-top: 1px solid var(--hair-soft); }

/* The raised panel: a lift off the page ground plus a fine diagonal hatch,
   which is what keeps a large flat navy area from reading as dead space.
   The hatch is drawn, not an image — 1px of cyan every 9px at 135°. */
.sect-tint {
  background:
    linear-gradient(rgba(20, 48, 86, .35), rgba(13, 36, 66, .10)),
    repeating-linear-gradient(135deg,
      rgba(76, 182, 234, .07) 0px, rgba(76, 182, 234, .07) 1px,
      transparent 1px, transparent 9px),
    var(--panel);
  border-top: 1px solid var(--hair-soft);
  border-bottom: 1px solid var(--hair-soft);
}

.lede {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  font-weight: 800;
  font-stretch: var(--cond);
  text-transform: uppercase;
  line-height: .98;
  letter-spacing: -.005em;
  color: var(--text);
  max-width: 20ch;
  margin: 0;
}
.lede-note {
  font-family: var(--display);
  font-size: .6875rem; font-weight: 500;
  font-stretch: 100%;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 1.25rem;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* --- career stat row ---------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: clamp(1rem, 3vw, 2.5rem);
  margin: 0;
}
.stat { margin: 0; }
/* The figure sits under its own hairline rather than over it: the rule
   reads as the top of a column on a timing sheet. */
.stat { padding-top: .9rem; border-top: 1px solid var(--hair); }
.statv {
  display: block;
  font-size: clamp(2.75rem, 6.5vw, 4.25rem);
  font-weight: 800; font-stretch: var(--cond);
  line-height: .86;
  letter-spacing: -.02em;
  color: var(--text);
}
.sect-dark .statv { color: var(--text); }
.statk {
  display: block;
  font-family: var(--display);
  font-size: .6875rem; font-weight: 500;
  font-stretch: 100%;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: .6rem;
  padding-top: 0;
  border-top: 0;
}
.sect-dark .statk { color: var(--text-3); }

/* --- results ticker -----------------------------------------------------
   A continuous strip of career results crossing the page. Two identical
   tracks sit side by side and each slides its own full width, so the loop
   is seamless with no JS driving it. */

.ticker {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  border-top: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 1px solid rgba(0, 0, 0, .45);
  padding: 1.15rem 0;
}
.ticker::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 200% at 50% 50%, rgba(86, 174, 228, .14), transparent 70%);
}

/* Fades the strip out at both edges so items enter and leave rather than
   being chopped off by the viewport. */
.ticker-mask {
  display: flex;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

.ticker-track {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: tickmove 44s linear infinite;
}

@keyframes tickmove {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}

.ticker-track li {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--display);
  font-size: clamp(.9375rem, 1.5vw, 1.125rem);
  font-weight: 600;
  font-stretch: 106%;
  letter-spacing: -.005em;
  color: rgba(255, 255, 255, .9);
  padding-inline: clamp(1rem, 2.4vw, 2rem);
}
.ticker-track b {
  font-weight: 700;
  color: var(--sky);
  margin-right: .5rem;
}

/* A leaning stroke between items — a slash reads as pace where a dot reads
   as a list. */
.ticker-track li::after {
  content: "";
  width: 1px;
  height: 1.05em;
  margin-left: clamp(1rem, 2.4vw, 2rem);
  background: rgba(86, 174, 228, .55);
  transform: skewX(-20deg);
  flex: none;
}

/* Pause on hover, on keyboard focus, and when off screen. There is no
   button — see "Stopping the strips" in the README. */
.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track,
.ticker.is-off .ticker-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  /* No looping motion; the strip becomes an ordinary scrollable row. */
  .ticker-track { animation: none; }
  .ticker-mask { overflow-x: auto; }
  .ticker-track[aria-hidden="true"] { display: none; }
}

/* --- pull quote --------------------------------------------------------- */

.sect-quote { background: var(--navy-pit); border-top: 1px solid var(--hair-soft); }

/* The quote hangs off a cyan upright rather than sitting in open space —
   the one place on the page that borrows the shape of a pull quote from
   print, so it needs an edge to hang from. */
.pull {
  margin: 0;
  max-width: 46rem;
  border-left: 2px solid var(--cyan);
  padding-left: clamp(1.25rem, 3vw, 2.25rem);
}
.pull blockquote { margin: 0; }
.pull blockquote p {
  font-family: var(--display);
  font-size: clamp(1.375rem, 3.2vw, 2.125rem);
  font-weight: 600;
  font-stretch: 86%;
  line-height: 1.22;
  letter-spacing: -.008em;
  font-style: normal;
  color: var(--text);
  margin: 0;
  max-width: none;
  text-indent: -.42em;
}
.pull figcaption {
  font-family: var(--display);
  font-size: .6875rem;
  font-weight: 500;
  font-stretch: 100%;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 1.35rem;
  padding-top: 0;
  border-top: 0;
  display: inline-block;
}

/* --- results table ------------------------------------------------------ */

.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.res {
  width: 100%;
  /* The min-width grows with the type, or the columns crush before
     the wrapper starts scrolling. */
  min-width: 48rem;
  border-collapse: collapse;
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1rem, 1.05vw, 1.1875rem);
  text-align: left;
}
table.res caption {
  text-align: left;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--text-3);
  padding-bottom: 1.15rem;
}
table.res th, table.res td {
  padding: 1.15rem .95rem;
  border-bottom: 1px solid var(--hair-soft);
  vertical-align: baseline;
  color: var(--text-2);
}
table.res thead th {
  font-size: .75rem; font-weight: 600;
  font-stretch: 100%;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--cyan);
  white-space: nowrap;
}
table.res tbody th { font-size: 1.1em; font-weight: 700; font-stretch: 88%; color: var(--text); white-space: nowrap; }
table.res td.n { font-weight: 550; }
table.res tr.win th, table.res tr.win td { background: rgba(76, 182, 234, .07); }
.pos { font-size: 1.15em; font-weight: 800; font-stretch: 86%; color: var(--text); }
.pos-1 { color: var(--cyan); }
.badge {
  display: inline-block;
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .2rem .45rem;
  border: 1px solid rgba(76, 182, 234, .55);
  color: var(--cyan);
  border-radius: 0;
  margin-left: .4rem;
  white-space: nowrap;
}

/* --- timeline ----------------------------------------------------------- */

.timeline { list-style: none; margin: 0; padding: 0; }
.tl {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: clamp(1rem, 3vw, 2.25rem);
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.tl:last-child { border-bottom: 1px solid var(--rule); }
.sect-dark .tl { border-top-color: rgba(255,255,255,.16); }
.sect-dark .tl:last-child { border-bottom-color: rgba(255,255,255,.16); }
.yr {
  font-size: 1.5rem; font-weight: 800; font-stretch: var(--cond);
  letter-spacing: -.01em;
  color: var(--cyan);
  line-height: 1.1;
}
.sect-dark .yr { color: var(--cyan); }
.tl p { margin: .25rem 0 0; font-size: 1rem; color: var(--text-3); }
.sect-dark .tl p { color: var(--text-3); }

/* --- hovering a year -----------------------------------------------------
   Each row lights as you pass it: a cyan wash that bleeds a little past the
   text column so it reads as a band across the entry rather than a box
   inside it, a rule down the left edge, and the year and its body text
   coming up. `:focus-within` as well as `:hover`, since the rows carry
   links and are reachable by tab. */

.tl { position: relative; }
/* The children have to be positioned too, or the wash paints over them:
   a positioned pseudo-element outranks static content in paint order. */
.tl > * { position: relative; z-index: 1; }

.tl::before {
  content: "";
  position: absolute;
  /* Laid exactly over the racing line. The line is a 2px stroke centred
     in a 3px box at --rail-x, so it covers rail-x + .5px to + 2.5px; this
     2px border starts at the same .5px offset and covers the same span.
     The right edge mirrors the left so the band sits evenly on the row. */
  inset: 0 calc(var(--rail-x, -.9rem) + .5px);
  z-index: 0;
  pointer-events: none;
  border-left: 2px solid transparent;
  background: rgba(76, 182, 234, 0);
  transition: background-color .28s var(--ease-out), border-color .28s var(--ease-out);
}
.tl:hover::before,
.tl:focus-within::before {
  background: rgba(76, 182, 234, .08);
  border-left-color: var(--cyan);
}

.yr, .tl h3, .tl p { transition: color .28s var(--ease-out); }
.tl:hover .yr,
.tl:focus-within .yr { color: var(--cyan-lt); }
.tl:hover p,
.tl:focus-within p { color: var(--text-2); }

@media (prefers-reduced-motion: reduce) {
  .tl::before, .yr, .tl h3, .tl p { transition: none; }
}
@media (max-width: 560px) { .tl { grid-template-columns: 1fr; gap: .35rem; } }

/* --- gallery rail ------------------------------------------------------- */

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78vw, 34rem);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Snap positions ignore the container's own padding, which lets the first
     frame scroll flush to the edge — scroll-padding puts the gutter back. */
  scroll-padding-left: var(--gut);
  padding: 0 var(--gut) 1.25rem;
  margin: 0;
  scrollbar-width: thin;
}
.rail figure { margin: 0; scroll-snap-align: start; }
.rail img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--rule); }
.rail figcaption {
  font-family: var(--display);
  font-size: .6875rem; font-weight: 500;
  font-stretch: 100%;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-top: .7rem;
}
.sect-dark .rail figcaption { color: var(--text-3); }
.railhead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.railhead h2 { margin-bottom: 0; }

/* --- partners ----------------------------------------------------------- */

.logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin: 0 0 2rem;
  padding: 0;
}
/* Cells are transparent: the partner marks have their own alpha, so they sit
   straight on the page ground with only hairlines between them. */
.logos li {
  list-style: none;
  background: transparent;
  display: grid;
  place-items: center;
  min-height: 9rem;
  padding: 1.25rem;
}
/* The three partner marks run from 1.6:1 to 4.8:1, so one shared max-height
   leaves the wide ones tiny and the square one looming. Each carries its own
   width as a custom property: the property sits on the element, so the grid
   and the partners page both size from one source of truth and neither has
   to out-specify the other.

   "Equal size" across three marks this differently shaped cannot mean
   equal width — Triarsi is 4.7:1 and B-Ready is 1.6:1, so matching widths
   would leave B-Ready towering and matching heights would leave it a
   stamp. They are matched on **area** instead, which is what the eye
   actually reads as equal presence. Solving w·h = 15500 at each mark's own
   aspect ratio gives:

     Triarsi   4.688:1  ->  270 x 58
     A-GAME    3.801:1  ->  243 x 64
     B-Ready   1.585:1  ->  157 x 99

   B-Ready was 97x60 before this and looked like an afterthought next to
   the other two. */
.l-agame   { --logo-w: 15.15rem; --logo-h: 4.00rem; }
.l-triarsi { --logo-w: 16.85rem; --logo-h: 3.60rem; }
.l-bready  { --logo-w: 9.80rem;  --logo-h: 6.20rem; }

.logos img {
  width: var(--logo-w, 8rem);
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* --- partner marks on a dark ground -------------------------------------
   Every mark in its own colours, on its own light plate.

   The plate is not decoration, it is the only way the colours survive.
   Measured against the band ground (rgb 5,18,35), compositing each mark's
   own alpha: A-GAME has **100%** of its ink below 3:1, worst 1.21:1 — the
   whole logo disappears. B-Ready loses 44.6% of its ink and Triarsi 13.7%,
   both bottoming out at 1.0:1 where the artwork is black.

   An earlier pass knocked all three out to flat white, which was legible
   but threw away three brands' colour. A plate keeps both. It is also what
   a sponsor expects: their mark, as drawn, on a clean ground. */
/* No box behind any individual mark. On the home page the whole band is
   the lit surface — see the jumbotron in motion.css — so nothing is drawn
   per logo at all. This rule only covers the plain grid that stands in
   when there is no JavaScript, where each cell carries its own light. */
.logos li {
  position: relative;
  background: none;
}
.logos:not(.is-banner) li::before {
  content: "";
  position: absolute;
  inset: -12% -6%;
  pointer-events: none;
  background: radial-gradient(ellipse 58% 62% at 50% 50%,
    rgba(255, 255, 255, .97) 0%,
    rgba(255, 255, 255, .95) 58%,
    rgba(255, 255, 255, .64) 76%,
    rgba(255, 255, 255, .24) 89%,
    transparent 100%);
}
.logos img {
  position: relative;
  z-index: 1;
  filter: none;
  opacity: 1;
  /* max-, not width/height: with an explicit width a max-height squashes a
     replaced element instead of scaling it. Capping both and leaving the
     dimensions auto lets each mark size at its own aspect ratio. */
  width: auto;
  height: auto;
  max-width: var(--logo-w, 8rem);
  max-height: var(--logo-h, 6.5rem);
}

/* The two calls to action under the partner band, centred, as the
   reference has them: one quiet, one cyan. */
.partner-acts {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .75rem;
  max-width: none;
  margin: 2.25rem 0 0;
}

/* --- buttons / links ---------------------------------------------------- */

.btn {
  display: inline-block;
  font-size: .75rem; font-weight: 700; font-stretch: 100%;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .85rem 1.4rem;
  background: var(--cyan);
  /* Dark text on cyan. White on cyan measures about 2:1. */
  color: var(--navy-deep);
  border: 1px solid var(--cyan);
  border-radius: 0;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--cyan-lt); border-color: var(--cyan-lt); }
.btn-ghost { background: none; color: var(--text); border-color: var(--hair); }
.btn-ghost:hover { background: none; color: var(--cyan); border-color: var(--cyan); }
.sect-dark .btn-ghost { color: var(--text); border-color: var(--hair); }
.sect-dark .btn-ghost:hover { background: none; color: var(--cyan); border-color: var(--cyan); }

/* --- the email address ---------------------------------------------------
   Shown as text, never as a `mailto:` link. A mailto inside an embedded
   or sandboxed page has nowhere to go: the browser navigates to it, no
   handler takes it, and the visitor is left on a blank screen with no way
   back. That happened on the Become a partner button.

   `user-select: all` means one click selects the whole address, so it is
   still a single gesture to copy. On a real host with a real mail handler
   a `mailto:` is better; see the README before restoring one. */
.addr {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 92%;
  font-size: clamp(1.0625rem, 2vw, 1.375rem);
  letter-spacing: -.01em;
  color: var(--cyan);
  user-select: all;
  -webkit-user-select: all;
  word-break: break-word;
}
.addr-inline {
  color: var(--text-2);
  user-select: all;
  -webkit-user-select: all;
  word-break: break-word;
}

.inline-link {
  color: var(--cyan);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.sect-dark .inline-link { color: var(--cyan); }

/* --- article cards ------------------------------------------------------ */

.cards { display: grid; gap: 1px; background: var(--hair-soft); border: 1px solid var(--hair-soft); margin: 0; padding: 0; }
.cards li { list-style: none; background: var(--card); }
.cards h3 { transition: color .15s; }
.cards a {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem;
  text-decoration: none;
  transition: background .15s;
}
.cards a:hover { background: rgba(76, 182, 234, .08); }
.cards a:hover h3 { color: var(--cyan); }
.meta {
  font-family: var(--display);
  font-size: .6875rem; font-weight: 500;
  font-stretch: 100%;
  color: var(--cyan);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.cards .src { font-family: var(--display); font-size: .8125rem; color: var(--text-3); margin-top: .35rem; }
.cards p { font-size: 1rem; color: var(--text-3); margin: .4rem 0 0; }
@media (max-width: 620px) { .cards a { grid-template-columns: 1fr; gap: .5rem; } }

/* --- footer ------------------------------------------------------------- */

.foot { background: rgba(2, 11, 22, .72); color: var(--text-3); padding: clamp(2.5rem, 5vw, 4rem) 0 2rem; border-top: 1px solid var(--hair); }
.foot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--hair);
}
.foot h3 { font-size: .6875rem; font-weight: 500; font-stretch: 100%; letter-spacing: .18em; color: var(--text-3); margin-bottom: .9rem; }
/* The cream monogram sits on the dark ground unchanged, as drawn. */
.foot-mark { height: 46px; width: auto; margin-bottom: 1rem; opacity: .95; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: .5rem; }
.foot a { color: var(--text-2); text-decoration: none; border-bottom: 1px solid transparent; }
.foot a:hover { border-bottom-color: var(--cyan); color: var(--cyan); }
.foot-base {
  display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  padding-top: 1.75rem;
  font-family: var(--display);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* --- page header (interior pages) --------------------------------------- */

.phead {
  background:
    radial-gradient(ellipse 60% 140% at 12% 0%, rgba(76, 182, 234, .13), transparent 70%),
    var(--navy-deep);
  color: var(--text);
  padding: clamp(2.75rem, 6vw, 5rem) 0 clamp(2.25rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--hair);
}
.phead h1 { font-size: clamp(2.25rem, 7vw, 4.5rem); }
.phead p { color: var(--text-2); margin: 1.1rem 0 0; max-width: 52ch; }

/* --- misc --------------------------------------------------------------- */

.note {
  border-left: 2px solid var(--cyan);
  padding: .1rem 0 .1rem 1.1rem;
  color: var(--text-3);
  font-size: 1rem;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================ hero social =============================== */
/* Sits opposite .stage-place, on the same page rails and the same top, so
   the two read as a pair across the top of the frame. It is deliberately
   NOT in .hero-copy: .stage-frame is 100vh beneath a sticky masthead, so
   the foot of the hero falls below the fold and anything parked there is
   cut in half. Square like .btn.

   Centred with left/right/margin rather than translateX(-50%), because the
   `rise` entrance in motion.css animates `transform` to `none` and would
   wipe a centring transform, throwing the mark off the right edge. */
.hero-social {
  position: absolute;
  top: clamp(4.75rem, 10vh, 7.5rem);
  left: 0;
  right: 0;
  margin-inline: auto;
  z-index: 3;
  width: 100%;
  max-width: var(--page);
  padding-inline: var(--gut);
  margin-block: 0;
  line-height: 0;
  /* A row of marks now, not one. flex-end keeps them against the right
     rail, opposite .stage-place, however many there are. */
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(.85rem, 2.2vw, 1.5rem);
}

/* No frame. Each mark used to sit in a 1px bordered square, which read as
   a little box drawn round the glyph rather than as the glyph itself. The
   hit area is kept at 2.5rem for touch; it is just no longer drawn. */
.hero-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  color: var(--text);
  transition: color .18s var(--ease-out), transform .18s var(--ease-out);
}
.hero-social a:hover,
.hero-social a:focus-visible {
  background: none;
  color: var(--cyan);
  transform: translateY(-2px);
}
/* 32px, up from 20px: with the box gone the glyph has to carry the weight
   on its own, and it is sitting over a photograph. */
.hero-social svg { display: block; width: 2rem; height: 2rem; }

@media (max-width: 700px) {
  /* Track .stage-place, which lifts at this width, and tuck the row in. */
  .hero-social { top: 4.5rem; gap: .6rem; }
  .hero-social a { width: 2.25rem; height: 2.25rem; }
  .hero-social svg { width: 1.6rem; height: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-social a { transition: none; }
  .hero-social a:hover { transform: none; }
}

/* =========================== footer social ============================== */
/* The same three marks as the hero, in the footer's Follow column. Laid out
   as a row rather than the stacked list the other columns use, because
   these are glyphs and not labels.

   `.foot a` carries a transparent bottom border that turns cyan on hover,
   which under a glyph reads as a stray rule rather than a text underline —
   so it is held transparent here and the colour change carries the hover. */
.foot-social { display: flex; align-items: center; gap: 1rem; }
.foot-social li { margin-bottom: 0; }
.foot-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--text-2);
  transition: color .18s ease, transform .18s ease;
}
.foot-social a:hover,
.foot-social a:focus-visible {
  color: var(--cyan);
  border-bottom-color: transparent;
  transform: translateY(-2px);
}
.foot-social svg { display: block; width: 1.5rem; height: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
  .foot-social a { transition: none; }
  .foot-social a:hover, .foot-social a:focus-visible { transform: none; }
}

/* =============================== phones ================================= */
/* Everything in this section sits inside a max-width query, so none of it
   can reach the desktop layout. */

@media (max-width: 560px) {
  /* .mast-cta carries the margin-left: auto that pushes the Menu button to
     the right edge. It is hidden at this width, the push went with it, and
     Menu drifted up against the monogram. */
  .navtoggle { margin-left: auto; }
  /* A taller hit area on the monogram without moving it. */
  .brand { padding-block: .5rem; margin-block: -.5rem; }

  /* The two calls to action under the partner band wrap onto separate lines
     here, and at their natural widths they stacked 203px over 195px. One
     shared basis keeps them equal, stacked or side by side. */
  .partner-acts .btn { flex: 1 1 13rem; max-width: 17rem; text-align: center; }
}

@media (max-width: 700px) {
  /* The figures are <dd>s and keep the browser's default 40px indent, so
     each number sat 40px to the right of its own label. */
  .statv { margin-inline-start: 0; }

  /* Footer links were 28px tall on 36px centres. An invisible hit area
     takes them to 44px without moving the underline off the text. */
  .foot ul:not(.foot-social) li { margin-bottom: 1rem; }
  .foot ul:not(.foot-social) a { position: relative; }
  .foot ul:not(.foot-social) a::after { content: ""; position: absolute; inset: -.5rem 0; }
  /* The social marks go from 32px to 40px squares; the gap and a nudge left
     keep the first glyph on the column's left edge, under "Follow". */
  .foot-social { gap: .5rem; margin-left: -.5rem; }
  .foot-social a { width: 2.5rem; height: 2.5rem; }
}

@media (max-width: 620px) {
  /* ---- results table as season cards -----------------------------------
     Nine columns do not fit a phone. The table used to scroll sideways
     inside its box, which cut the caption mid-word and left Points and
     Pos. off screen behind a thin scrollbar. Each season becomes a card:
     year and finishing position across the top, series and team below,
     the figures in a 3-up grid. Labels come from data-label; the column
     headings stay in the page for screen readers, and the ARIA roles in
     the markup keep the table semantics now that display has changed. */
  .tablewrap { overflow: visible; }
  table.res, table.res caption, table.res tbody { display: block; }
  table.res { min-width: 0; font-size: 1rem; }
  table.res caption { padding-bottom: 1rem; }
  /* display: block first: as a table-header-group the thead ignores
     overflow and clip-path, and the headings painted over the first card. */
  table.res { position: relative; }
  table.res thead {
    display: block; position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  table.res tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem .75rem;
    padding: 1.25rem 1rem;
    border-top: 1px solid var(--hair);
  }
  table.res tbody tr:last-child { border-bottom: 1px solid var(--hair); }
  table.res tbody th, table.res tbody td { display: block; padding: 0; border: 0; }
  /* The win highlight moves from the cells to the card, or it would paint
     as separate tiles with the gaps showing between them. */
  table.res tr.win th, table.res tr.win td { background: none; }
  table.res tr.win { background: rgba(76, 182, 234, .07); }

  table.res tbody th { grid-row: 1; grid-column: 1 / 3; align-self: end; font-size: 1.75rem; line-height: 1; }
  table.res tbody td:last-child {
    grid-row: 1; grid-column: 3; text-align: right;
    font-size: 1.75rem; font-weight: 800; font-stretch: 86%; line-height: 1; color: var(--text);
  }
  table.res tbody td:last-child.pos-1 { color: var(--cyan); }
  table.res tbody td:nth-of-type(1),
  table.res tbody td:nth-of-type(2),
  table.res tbody td[colspan] { grid-column: 1 / -1; }
  table.res tbody td:nth-of-type(1) { font-size: 1.125rem; color: var(--text); }

  table.res td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: .35rem;
    font-size: .6875rem; font-weight: 600; font-stretch: 100%;
    letter-spacing: .16em; line-height: 1.2; text-transform: uppercase;
    color: var(--text-3);
  }
}

/* ============================ contact link ============================== */
/* Where the full menu shows (821px and up), the cyan "Get in touch" button
   already goes to contact.html, and a second Contact item pushed the menu
   under that button by up to 33px between 821 and 920px. So the menu item
   only appears in the folded Menu panel, which is where phones need it:
   the header button is hidden below 561px. */
@media (min-width: 821px) {
  .nav .navlink[href="contact.html"] { display: none; }
}