/* ==========================================================================
   MX-5 Mk4 Trophy
   Tarmac black and concrete grey, with the yellow and red taken from the
   championship logo artwork.
   ========================================================================== */

:root{
  /* palette, sampled from the MX-5 Mk4 Trophy logo artwork.
     Yellow is the action colour, red the emphasis colour, exactly as the
     logo uses them. Red has a light-ground variant because the artwork
     does too. */
  --tarmac:#0D0C0F;
  --tarmac-2:#17161A;
  --tarmac-3:#26242A;
  --tarmac-deep:#08070A;
  --concrete:#E8E8E3;
  --concrete-2:#F7F7F3;
  --concrete-line:#CFCFC6;
  --yellow:#FFD400;
  --yellow-hi:#FFE14D;
  --red:#E8253D;
  --red-ink:#C9102E;
  --cream:#F6F1E7;
  --grit:#A7A49A;
  --grit-2:#6B6860;
  --white:#FFFFFF;

  /* type */
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --data:"Barlow Semi Condensed","Barlow","Helvetica Neue",Arial,sans-serif;

  /* layout */
  --gut:46px;
  --maxw:1280px;
  --nav-h:82px;
}

@media (max-width:900px){ :root{ --gut:22px; --nav-h:68px; } }

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 12px);
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--tarmac);
  color:var(--white);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

a{color:var(--yellow);text-decoration:none}
a:hover{color:var(--yellow-hi)}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:900;
  font-style:italic;
  font-variation-settings:"wdth" 112;
  letter-spacing:-.028em;
  line-height:.95;
  margin:0;
  text-wrap:balance;
}

:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--yellow);color:#0D0C0F;padding:12px 20px;
  font-family:var(--data);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.skip:focus{left:0}

.num{font-variant-numeric:tabular-nums}
.vh{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.shell{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

.eyebrow{
  font-family:var(--data);font-weight:700;font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;
}

/* --------------------------------------------------------------- logo --- */
.logo{display:inline-flex;align-items:center;flex:none}
.logo img{display:block;width:auto;height:58px}
.logo--foot img{height:74px}
@media (max-width:900px){ .logo img{height:46px} .logo--foot img{height:56px} }

/* -------------------------------------------------------------- button --- */
.btn{
  display:inline-block;border:0;cursor:pointer;
  background:var(--yellow);color:#0D0C0F;
  font-family:var(--data);font-weight:700;font-size:13px;
  letter-spacing:.13em;text-transform:uppercase;
  padding:13px 22px;
  clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%);
  transition:background .18s ease,transform .18s ease;
}
.btn:hover{background:var(--yellow-hi);color:#0D0C0F}
.btn:active{transform:translateY(1px)}
.btn--lg{font-size:14px;padding:16px 30px}
.btn--ghost{
  background:transparent;color:var(--white);
  box-shadow:inset 0 0 0 1px var(--tarmac-3);clip-path:none;
}
.btn--ghost:hover{background:rgba(255,255,255,.06);color:var(--white)}
.btn--block{display:block;width:100%;text-align:center;clip-path:none}
.btn--ink{background:#0D0C0F;color:var(--yellow)}
.btn--ink:hover{background:#000;color:var(--yellow)}
@media (prefers-reduced-motion:reduce){ .btn{transition:none} }

.lnk{
  font-family:var(--data);font-weight:700;font-size:12.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--yellow);
  display:inline-flex;align-items:center;gap:6px;
}
.lnk:hover{color:var(--yellow-hi)}
.lnk::after{content:"\203A";font-size:1.25em;line-height:0}

/* ----------------------------------------------------------------- nav --- */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(13,12,15,.94);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--tarmac-3);
}
.nav__in{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
  height:var(--nav-h);display:flex;align-items:center;gap:30px;
}
.nav__list{
  list-style:none;display:flex;gap:24px;margin:0;padding:0;margin-left:auto;
}
.nav__list a{
  color:#CFCCC4;font-family:var(--data);font-weight:600;font-size:13.5px;
  letter-spacing:.1em;text-transform:uppercase;padding:6px 0;display:block;
}
.nav__list a:hover,.nav__list a[aria-current="page"]{color:var(--yellow)}
.nav__cta{flex:none}

.nav__burger{
  display:none;margin-left:auto;background:none;border:0;cursor:pointer;
  padding:10px;flex-direction:column;gap:5px;
}
.nav__burger span{display:block;width:22px;height:2px;background:var(--white);transition:.2s}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:980px){
  .nav__burger{display:flex}
  .nav__cta{display:none}
  .nav__list{
    position:fixed;inset:var(--nav-h) 0 auto 0;
    flex-direction:column;gap:0;margin:0;
    background:var(--tarmac);border-bottom:1px solid var(--tarmac-3);
    padding:8px var(--gut) 24px;
    transform:translateY(-120%);transition:transform .28s ease;
    max-height:calc(100vh - var(--nav-h));overflow-y:auto;
  }
  .nav__list[data-open="true"]{transform:translateY(0)}
  .nav__list a{padding:15px 0;font-size:16px;border-bottom:1px solid var(--tarmac-3)}
  .nav__list li:last-child a{border-bottom:0}
}
@media (prefers-reduced-motion:reduce){ .nav__list,.nav__burger span{transition:none} }

/* ---------------------------------------------------------------- hero --- */
.hero{
  padding:64px 0 52px;
  background:
    linear-gradient(180deg,rgba(255,212,0,.06),rgba(255,212,0,0) 42%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 78px),
    var(--tarmac);
}
.hero__in{display:grid;grid-template-columns:1.35fr .95fr;gap:44px;align-items:end}
/* the h1 is the championship name, so the page states what it is; the
   slogan below keeps the visual weight without pretending to be the
   document heading */
.hero__kicker{
  margin:0 0 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
/* the kicker is a label; the h1 is the display line below, which opens
   with the championship name for screen readers and search engines */
.hero__kicker span{
  font-family:var(--data);font-weight:700;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;line-height:1.2;margin:0;font-style:normal;
  font-variation-settings:normal;
}
.hero__kicker span{color:var(--yellow)}
.hero__kicker::after{
  content:"";height:3px;width:86px;flex:none;
  background:linear-gradient(90deg,var(--yellow) 0 68%,transparent 68% 74%,var(--red) 74% 100%);
}
.hero__display{
  font-family:var(--display);font-weight:900;font-style:italic;
  font-variation-settings:"wdth" 112;letter-spacing:-.028em;
  font-size:clamp(34px,7.5vw,62px);line-height:.92;margin:0;text-wrap:balance;
}
/* only the direct children are lines; nested spans stay inline, or an
   accent word would push the rest of its line down */
.hero__display > span{display:block}
/* a model name must never break across lines at its hyphen */
.nb{white-space:nowrap}
.hero__display .accent{color:var(--red)}
.hero__lede{color:#B6B6AC;max-width:44ch;margin:22px 0 28px;font-size:clamp(16px,1.6vw,17px)}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap}

@media (max-width:900px){
  .hero{padding:38px 0 34px}
  .hero__in{grid-template-columns:1fr;gap:30px;align-items:stretch}
  .hero__cta .btn{width:100%;text-align:center;clip-path:none}
}

/* ---------------------------------------------------------- next round --- */
.next{background:var(--tarmac-2);box-shadow:inset 0 0 0 1px var(--tarmac-3);padding:22px 24px 24px}
.next__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.next__top .eyebrow{color:var(--yellow)}
.next__count{
  font-family:var(--data);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#0D0C0F;background:var(--yellow);padding:4px 9px;
}
.next__ct{font-size:clamp(28px,4vw,34px);margin-bottom:4px}
.next__date{font-family:var(--data);font-size:17px;color:#C9C9C0;letter-spacing:.04em;margin-bottom:20px}
.next__facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0 0 20px;
  border-top:1px solid var(--tarmac-3);padding-top:14px;
}
.next__facts dt{
  font-family:var(--data);font-size:10.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--grit);margin:0 0 2px;
}
.next__facts dd{
  margin:0;font-family:var(--display);font-weight:800;font-style:italic;
  font-size:22px;font-variation-settings:"wdth" 105;
}

/* ---------------------------------------------------- governing body --- */
/* BRSCC artwork is the reversed (white) version, so it only ever sits on
   a dark ground. Never place it on the concrete bands. */
.credential{
  display:flex;align-items:center;gap:15px;margin:30px 0 0;
  font-family:var(--data);font-size:11.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--grit);
}
.credential img{width:112px;height:auto;opacity:.92;transition:opacity .18s ease}
.credential a:hover img{opacity:1}
@media (prefers-reduced-motion:reduce){ .credential img{transition:none} }

.foot__gov{display:inline-block;margin-top:20px}
.foot__gov img{width:136px;height:auto;opacity:.85;transition:opacity .18s ease}
.foot__gov:hover img{opacity:1}
@media (prefers-reduced-motion:reduce){ .foot__gov img{transition:none} }

/* -------------------------------------------------------------- ticker --- */
.ticker{
  background:var(--yellow);color:#0D0C0F;padding:11px 0;overflow:hidden;
  font-family:var(--display);font-weight:900;font-style:italic;font-size:14px;
  letter-spacing:.06em;font-variation-settings:"wdth" 108;
  white-space:nowrap;position:relative;
}
.ticker__track{display:inline-flex;gap:0;will-change:transform;animation:slide 34s linear infinite}
.ticker__track span{padding:0 22px;flex:none}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .ticker__track{animation:none}
  .ticker{text-overflow:ellipsis}
}

/* ---------------------------------------------------------------- band --- */
.band{background:var(--concrete);color:var(--tarmac);padding:clamp(38px,6vw,58px) 0}
.band--dark{background:var(--tarmac);color:var(--white)}
.band--deep{background:var(--tarmac-deep);color:var(--white)}

.band__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;margin-bottom:28px;flex-wrap:wrap;
}
.band__head .eyebrow{color:var(--red-ink);display:block;margin-bottom:9px}
.band--dark .band__head .eyebrow,.band--deep .band__head .eyebrow{color:var(--yellow)}
.band__head h2{font-size:clamp(27px,4.4vw,38px)}
.band__head .lnk{color:var(--red-ink);padding-bottom:5px}
.band--dark .band__head .lnk,.band--deep .band__head .lnk{color:var(--yellow)}

/* ------------------------------------------------------------ calendar --- */
.cal{border-top:1px solid var(--concrete-line)}
.cal__row{
  display:grid;grid-template-columns:62px 1.5fr 1fr 130px 104px;
  gap:18px;align-items:center;padding:15px 0;
  border-bottom:1px solid var(--concrete-line);
}
.cal__no{
  font-family:var(--display);font-weight:900;font-style:italic;font-size:20px;
  font-variation-settings:"wdth" 105;color:var(--grit);
}
.cal__ct{
  font-family:var(--display);font-weight:800;font-style:italic;font-size:21px;
  font-variation-settings:"wdth" 106;letter-spacing:-.02em;
}
.cal__loc{
  font-family:var(--data);font-size:14px;letter-spacing:.05em;
  color:var(--grit-2);text-transform:uppercase;
}
.cal__dt{font-family:var(--data);font-weight:600;font-size:15.5px;letter-spacing:.03em}
.pill{
  font-family:var(--data);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:5px 9px;text-align:center;
  border:1px solid var(--concrete-line);color:var(--grit-2);
}
/* dimmed, but still 4:1 against the concrete band */
.cal__row.is-done .cal__ct,.cal__row.is-done .cal__no{color:#6E6E64}
.cal__row.is-next{
  background:rgba(255,212,0,.13);box-shadow:inset 3px 0 0 var(--yellow);
  padding-left:12px;grid-template-columns:50px 1.5fr 1fr 130px 104px;
}
.cal__row.is-next .pill{background:var(--yellow);border-color:var(--yellow);color:#0D0C0F}

@media (max-width:820px){
  .cal__row,.cal__row.is-next{grid-template-columns:40px 1fr auto;gap:10px;row-gap:2px}
  .cal__loc{display:none}
  .cal__ct{font-size:18px}
  .cal__dt{font-size:13.5px}
  .cal__row .pill{grid-column:2 / -1;justify-self:start;margin-top:4px}
}

/* ----------------------------------------------------------- standings --- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:560px}
.table th{
  font-family:var(--data);font-size:10.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--grit);text-align:left;
  padding:0 12px 9px 0;border-bottom:1px solid var(--tarmac-3);
}
.table td{padding:12px 12px 12px 0;border-bottom:1px solid var(--tarmac-3);font-size:15px}
.table .pos{
  font-family:var(--display);font-weight:900;font-style:italic;font-size:19px;
  font-variation-settings:"wdth" 104;width:44px;
}
.table tbody tr:first-child .pos{color:var(--yellow)}
.table .car{font-family:var(--data);font-weight:700;color:var(--grit);width:52px;letter-spacing:.04em}
.table .nm{font-weight:600}
.table .team{color:var(--grit);font-family:var(--data);letter-spacing:.03em}
.table .w{text-align:center;width:56px;color:var(--grit);font-family:var(--data);font-weight:600}
.table .pts{
  text-align:right;font-family:var(--display);font-weight:800;font-style:italic;
  font-size:18px;font-variation-settings:"wdth" 104;width:80px;
}
.footnote{
  color:var(--grit);font-size:13.5px;margin:14px 0 0;
  font-family:var(--data);letter-spacing:.05em;
}

/* ------------------------------------------------------- image holders --- */
.imgph{
  position:relative;
  background:
    repeating-linear-gradient(-45deg,rgba(140,140,130,.16) 0 1px,transparent 1px 9px),
    rgba(140,140,130,.09);
  border:1px solid rgba(140,140,130,.32);
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:16px;min-height:120px;
}
.imgph span{
  font-family:var(--data);font-size:11.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:#8C8C82;line-height:1.45;
}

/* ------------------------------------------------------------- the car --- */
.car{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.car__media{min-height:330px}
.spec{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--concrete-line)}
.spec li{
  display:flex;justify-content:space-between;gap:16px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--concrete-line);font-size:15px;
}
.spec .k{
  font-family:var(--data);font-size:12px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--grit-2);
}
.spec .v{font-weight:600;text-align:right}
@media (max-width:820px){ .car{grid-template-columns:1fr;gap:26px} .car__media{min-height:220px} }

/* --------------------------------------------------------------- steps --- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--tarmac-3);margin-top:8px}
.step{background:var(--tarmac);padding:26px 24px 28px}
.step__n{
  font-family:var(--display);font-weight:900;font-style:italic;font-size:15px;
  font-variation-settings:"wdth" 108;color:var(--yellow);margin-bottom:14px;display:block;
}
.step h3{font-size:22px;margin-bottom:10px}
.step p{color:#A8A89E;font-size:14.5px;margin:0}
@media (max-width:820px){ .steps{grid-template-columns:1fr} }

/* ----------------------------------------------------------- cta band --- */
.cta{
  background:var(--yellow);color:#0D0C0F;padding:clamp(30px,5vw,46px) 0;
}
.cta__in{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.cta h2{font-size:clamp(25px,3.8vw,34px);color:#0D0C0F;max-width:20ch}
.cta p{margin:8px 0 0;font-weight:500;max-width:46ch}
@media (max-width:820px){
  .cta__in{flex-direction:column;align-items:flex-start}
  .cta .btn{width:100%;text-align:center;clip-path:none}
}

/* ------------------------------------------------------------ partners --- */
.plogos{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.ptile{
  background:var(--white);border:1px solid rgba(13,12,15,.12);
  display:flex;align-items:center;justify-content:center;
  min-height:98px;padding:18px 14px;
}
/* logo wall: sized for optical balance, not mechanical equality, so a wide
   mark and a squarer one carry the same weight */
.ptile img{width:auto;height:auto;max-width:78%;max-height:52px;object-fit:contain}
.ptile img.is-wide{max-height:44px}
.ptile img.is-tall{max-height:62px}
a.ptile{transition:border-color .18s ease}
a.ptile:hover{border-color:rgba(13,12,15,.34)}
@media (prefers-reduced-motion:reduce){ a.ptile{transition:none} }
.ptile b{
  font-family:var(--display);font-weight:800;font-style:italic;
  font-variation-settings:"wdth" 104;font-size:17px;letter-spacing:-.022em;
  color:var(--tarmac);text-align:center;line-height:1.05;
}
.ptile--dark{background:var(--tarmac);border-color:rgba(255,255,255,.14)}
.ptile--dark:hover{border-color:rgba(255,212,0,.5)}
.ptile--open{background:transparent;border-style:dashed;border-color:rgba(13,12,15,.28)}
.ptile--open b{
  color:var(--grit-2);font-family:var(--data);font-weight:700;font-style:normal;
  font-size:13px;letter-spacing:.13em;text-transform:uppercase;
}
.ptile--open:hover{border-color:var(--yellow);background:rgba(255,212,0,.10)}
@media (max-width:1100px){ .plogos{grid-template-columns:repeat(3,1fr)} }
@media (max-width:820px){ .plogos{grid-template-columns:1fr 1fr} }

.partner{display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:start}
@media (max-width:900px){ .partner{grid-template-columns:1fr;gap:30px} }
.packs{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--tarmac-3)}
.packs li{display:flex;gap:18px;padding:13px 0;border-bottom:1px solid var(--tarmac-3);flex-wrap:wrap}
.packs .pk{
  font-family:var(--data);font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--yellow);width:126px;flex:none;padding-top:3px;
}
.packs .pd{color:#A8A89E;font-size:14.5px;flex:1;min-width:220px}

/* ---------------------------------------------------------------- form --- */
.form{background:var(--tarmac-2);box-shadow:inset 0 0 0 1px var(--tarmac-3);padding:26px 26px 28px}
.form h3{font-size:23px;margin-bottom:4px}
.form__note{color:var(--grit);font-size:14px;margin:0 0 20px}
.field{display:block;margin-bottom:13px}
.field > span{
  font-family:var(--data);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grit);display:block;margin-bottom:5px;
}
.field input,.field textarea,.field select{
  display:block;width:100%;height:44px;padding:10px 12px;
  background:var(--tarmac-deep);color:var(--white);
  border:1px solid var(--tarmac-3);border-radius:0;
  font-family:var(--body);font-size:15px;
}
.field textarea{height:96px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--yellow);box-shadow:0 0 0 2px rgba(255,212,0,.28);
}
.field input::placeholder,.field textarea::placeholder{color:#5D5D55}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
@media (max-width:520px){ .row2{grid-template-columns:1fr} }
.form__legal{color:var(--grit);font-size:12.5px;margin:14px 0 0;line-height:1.5}
.hp{position:absolute;left:-9999px}

/* --------------------------------------------------------------- media --- */
.media{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}
@media (max-width:820px){ .media{grid-template-columns:1fr 1fr} .media > :first-child{grid-column:1 / -1} }

/* -------------------------------------------------------------- footer --- */
.foot{background:var(--tarmac-deep);padding:40px 0 26px;border-top:1px solid var(--tarmac-3)}
.foot__top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:30px}
.foot__blurb{color:var(--grit);font-size:14px;margin:14px 0 0;max-width:36ch}
.foot__cols{display:flex;gap:56px;flex-wrap:wrap}
.foot__h{
  font-family:var(--data);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grit);margin:0 0 12px;
}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.foot li a{color:#B6B6AC;font-size:14px}
.foot li a:hover{color:var(--yellow)}
.foot__bar{
  border-top:1px solid var(--tarmac-3);padding-top:16px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-family:var(--data);font-size:12px;letter-spacing:.06em;
  color:#6E6E66;text-transform:uppercase;
}
.foot__bar a{color:#6E6E66}
.foot__bar a:hover{color:var(--yellow)}

/* ------------------------------------------------------------- reveals --- */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
}

/* ==========================================================================
   NEWS
   Lead story then a card grid, after the BTCC pattern: headline, short
   excerpt, date. Category chips and search filter client side, so there is
   no backend and the page still works with JS off (everything is rendered).
   ========================================================================== */

.shell--narrow{max-width:760px}

.newshead{padding-bottom:clamp(26px,4vw,34px)}
.newshead__h{font-size:clamp(40px,8vw,76px);margin:8px 0 10px}
.newshead__count{
  font-family:var(--data);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grit);margin:0 0 26px;
}

.newsfilter{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.newsfilter__search{flex:0 1 300px}
.newsfilter__search input{
  width:100%;height:44px;padding:10px 14px;
  background:var(--tarmac-deep);color:var(--white);
  border:1px solid var(--tarmac-3);border-radius:0;
  font-family:var(--body);font-size:15px;
}
.newsfilter__search input:focus{
  outline:none;border-color:var(--yellow);box-shadow:0 0 0 2px rgba(255,212,0,.28);
}
.newsfilter__search input::placeholder{color:var(--grit-2)}
.newsfilter__cats{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  border:1px solid var(--tarmac-3);background:transparent;color:#CFCCC4;
  font-family:var(--data);font-weight:600;font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;padding:9px 14px;cursor:pointer;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.chip:hover{border-color:var(--grit-2);color:var(--white)}
.chip.is-on{background:var(--yellow);border-color:var(--yellow);color:#0D0C0F}
@media (prefers-reduced-motion:reduce){ .chip{transition:none} }

/* lead story */
.lead{
  display:grid;grid-template-columns:1.15fr 1fr;gap:34px;align-items:center;
  color:inherit;padding-bottom:34px;margin-bottom:34px;
  border-bottom:1px solid var(--concrete-line);
}
.lead:hover .lead__title{color:var(--red-ink)}
.lead__media{aspect-ratio:16/10;overflow:hidden;background:rgba(140,140,130,.09)}
.lead__media img{width:100%;height:100%;object-fit:contain;object-position:center}
.lead__media .imgph{width:100%;height:100%}
.lead__title{
  font-size:clamp(26px,3.4vw,38px);margin:10px 0 12px;color:var(--tarmac);
  transition:color .15s ease;
}
.lead__excerpt{color:var(--grit-2);font-size:16.5px;margin:0 0 18px;max-width:46ch}

/* card grid */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 26px}
.card{color:inherit;display:flex;flex-direction:column}
.card:hover .card__title{color:var(--red-ink)}
.card__media{aspect-ratio:16/10;overflow:hidden;background:rgba(140,140,130,.09);margin-bottom:14px}
.card__media img{width:100%;height:100%;object-fit:contain}
.card__media .imgph{width:100%;height:100%;min-height:0}
.card__meta{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 8px;
  font-family:var(--data);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grit-2);
}
.card__cat{color:var(--red-ink);font-weight:700}
.card__title{
  font-size:20px;margin:0 0 8px;color:var(--tarmac);line-height:1.08;
  transition:color .15s ease;
}
.card__excerpt{color:var(--grit-2);font-size:14.5px;margin:0}
@media (prefers-reduced-motion:reduce){ .lead__title,.card__title{transition:none} }

.newsempty{
  font-family:var(--data);letter-spacing:.06em;color:var(--grit-2);
  padding:30px 0;margin:0;
}
.linkbtn{
  background:none;border:0;padding:0;cursor:pointer;color:var(--red-ink);
  font:inherit;text-decoration:underline;
}

@media (max-width:900px){
  .lead{grid-template-columns:1fr;gap:20px}
  .cards{grid-template-columns:1fr 1fr;gap:26px 20px}
}
@media (max-width:560px){
  .cards{grid-template-columns:1fr}
  .newsfilter__search{flex:1 1 100%}
}

/* ------------------------------------------------------------ post page --- */
.post{background:var(--concrete);color:var(--tarmac);padding:clamp(34px,5vw,56px) 0}
.post__meta{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 14px;
  font-family:var(--data);font-size:11.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--grit-2);
}
.post__cat{color:var(--red-ink);font-weight:700}
.post__title{font-size:clamp(30px,5.2vw,52px);margin:0 0 16px}
.post__standfirst{
  font-size:clamp(17px,2vw,20px);color:var(--grit-2);margin:0 0 30px;
  max-width:52ch;line-height:1.45;
}
.post__hero{
  width:100%;max-height:520px;object-fit:contain;
  background:rgba(140,140,130,.09);margin-bottom:34px;
}
.post__back{margin:38px 0 0;padding-top:22px;border-top:1px solid var(--concrete-line)}
.post__back .lnk{color:var(--red-ink)}

/* body copy from markdown */
.prose{font-size:17px;line-height:1.65;color:var(--tarmac)}
/* reset and spacing must share specificity, or the reset wins and every
   paragraph runs into the one above it */
.prose > *{margin:0}
.prose > * + *{margin-top:1.15em}
.prose p{max-width:66ch}
.prose h2{
  font-size:clamp(21px,2.8vw,27px);margin-top:1.8em;
  padding-top:.5em;border-top:1px solid var(--concrete-line);
}
.prose h3{font-size:19px;margin-top:1.6em}
.prose a{color:var(--red-ink);text-decoration:underline}
.prose a:hover{color:var(--tarmac)}
.prose strong{font-weight:600}
.prose ul,.prose ol{padding-left:22px;max-width:62ch}
.prose li + li{margin-top:.4em}
.prose blockquote{
  margin:1.4em 0;padding:16px 20px;background:rgba(255,212,0,.16);
  border-left:3px solid var(--yellow);
}
.prose blockquote p{margin:0}
.prose img{width:100%;height:auto;margin:1.6em 0}
.prose hr{border:0;border-top:1px solid var(--concrete-line);margin:2em 0}

/* ==========================================================================
   TEAMS
   A directory, not a sales page: logo, where they are, what they do,
   and a way to contact them without going through us.
   ========================================================================== */

.teamsintro{color:#A8A89E;max-width:58ch;margin:14px 0 0;font-size:16.5px}

.teams{display:flex;flex-direction:column;gap:1px;background:var(--concrete-line)}
.teams .team{
  display:grid;grid-template-columns:200px 1fr;gap:32px;align-items:start;
  background:var(--concrete);padding:28px 0;
}
.teams .team__logo{
  display:flex;align-items:center;justify-content:center;
  background:var(--white);border:1px solid rgba(13,12,15,.12);
  min-height:110px;padding:18px;
}
.teams .team__logo img{max-width:84%;max-height:62px;width:auto;height:auto;object-fit:contain}
.teams .team__mark{
  font-family:var(--data);font-weight:700;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grit-2);text-align:center;line-height:1.4;
}
.teams .team__name{font-size:clamp(22px,2.8vw,28px);margin:0 0 4px}
.teams .team__base{
  font-family:var(--data);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grit-2);margin:0 0 14px;
}
.teams .team__tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0}
.teams .team__tags li{
  font-family:var(--data);font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;padding:5px 10px;
  background:rgba(255,212,0,.22);color:#6B5200;
}
.teams .team__blurb{color:var(--grit-2);margin:0 0 16px;max-width:60ch;font-size:15.5px}
.teams .team__contact{
  list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;
  font-family:var(--data);font-size:14px;letter-spacing:.05em;
}
.teams .team__contact a{color:var(--red-ink);text-decoration:underline}
.teams .team__contact a:hover{color:var(--tarmac)}
.teams .team__nocontact{color:var(--grit-2)}

@media (max-width:760px){
  .teams .team{grid-template-columns:1fr;gap:18px;padding:24px 0}
  .teams .team__logo{min-height:92px}
}

/* --------------------------------------------------------------- TBC --- */
/* An honest holding state that still converts, rather than an empty page
   or a list of invented placeholder teams. */
.tbc{
  border:1px dashed var(--concrete-line);
  padding:clamp(28px,5vw,48px);
  max-width:62ch;
}
.tbc__flag{
  font-family:var(--data);font-size:11.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red-ink);margin:0 0 14px;
}
.tbc__h{font-size:clamp(23px,3.4vw,32px);margin:0 0 16px}
.tbc__p{color:var(--grit-2);margin:0 0 16px;font-size:16px}
.tbc__p + .tbc__p{margin-bottom:24px}

/* ==========================================================================
   CHAMPIONSHIP PARTNER BAR
   Above the footer on every page. Light ground, and every mark now sits on
   it natively: Goodyear supply an official yellow-on-blue lockup, and the
   other two are dark artwork. No chips, no exceptions.
   The BRSCC is deliberately not here. They sanction the championship
   rather than sponsor it, and they already appear in the footer and under
   the hero.
   ========================================================================== */

.pbar{background:var(--white);color:var(--tarmac);padding:32px 0 36px}
.pbar__label{
  font-family:var(--data);font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grit-2);text-align:center;margin:0 0 24px;
}
.pbar__row{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:20px 52px;
}
.pbar__item{display:flex;align-items:center;justify-content:center}
.pbar__item img{
  width:auto;height:auto;max-height:42px;max-width:190px;object-fit:contain;
  opacity:.9;transition:opacity .18s ease;
}
.pbar__item a:hover img{opacity:1}
@media (prefers-reduced-motion:reduce){ .pbar__item img{transition:none} }

@media (max-width:640px){
  .pbar{padding:24px 0 26px}
  .pbar__row{gap:18px 30px}
  .pbar__item img{max-height:32px;max-width:140px}
}

/* a quieter aside inside a band, for context rather than pitch */
.note{
  margin:0;max-width:52ch;font-size:14.5px;line-height:1.6;
  color:var(--grit-2);padding-left:16px;border-left:2px solid var(--yellow);
}

/* ==========================================================================
   GENERATED CARD ARTWORK
   Stands in for a photograph when a post has none. Built from the brand
   rather than a grey box: tarmac ground, the hero's faint grid, the
   headline set in the display face, and the logo's yellow and red rule.
   Category tints the accent so a race report does not look like a partner
   announcement at a glance.
   ========================================================================== */

.cardart{
  display:flex;flex-direction:column;justify-content:flex-end;
  width:100%;height:100%;position:relative;overflow:hidden;
  background:
    linear-gradient(158deg,rgba(255,212,0,.12),rgba(255,212,0,0) 58%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 46px),
    var(--tarmac);
  padding:22px 22px 20px;
  --art-accent:var(--yellow);
}
.cardart[data-cat="Race report"]{--art-accent:var(--red)}
.cardart[data-cat="Partners"]{--art-accent:var(--yellow)}
.cardart[data-cat="Drivers"]{--art-accent:var(--cream)}

.cardart__cat{
  font-family:var(--data);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--art-accent);
  font-size:10px;margin-bottom:auto;
}
.cardart__title{
  font-family:var(--display);font-weight:900;font-style:italic;
  font-variation-settings:"wdth" 108;letter-spacing:-.025em;line-height:1.02;
  color:var(--cream);margin-top:14px;
  display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
  -webkit-line-clamp:4;
  font-size:19px;
}
.cardart__rule{
  display:block;height:3px;width:68px;margin-top:14px;flex:none;
  background:linear-gradient(90deg,var(--yellow) 0 64%,transparent 64% 72%,var(--red) 72% 100%);
}

/* lead story on the news index */
.cardart--lg{padding:32px 32px 30px}
.cardart--lg .cardart__cat{font-size:11px}
.cardart--lg .cardart__title{font-size:clamp(24px,3vw,34px);-webkit-line-clamp:4;margin-top:18px}
.cardart--lg .cardart__rule{width:88px;height:4px}

@media (max-width:560px){
  .cardart__title{font-size:17px}
}

/* pre-season panel on a dark band */
.tbc--dark{border-color:var(--tarmac-3);max-width:58ch}
.tbc--dark .tbc__flag{color:var(--yellow)}
.tbc--dark .tbc__h{color:var(--white)}
.tbc--dark .tbc__p{color:#A8A89E}

/* pre-season variant of the hero card: a call to action, not a dead scoreboard */
.next--pre .next__top{margin-bottom:14px}
.next--pre .next__top .eyebrow{color:var(--yellow)}
.next__pre{color:#A8A89E;font-size:15px;margin:0 0 22px;padding-top:16px;border-top:1px solid var(--tarmac-3)}
.next--pre .btn{clip-path:none}

/* ==========================================================================
   BADGE WATERMARK
   The pennant used quietly, as a ghost behind generated artwork and the
   holding panels. Low enough not to fight the type, present enough that a
   page with no photography on it still looks like ours.
   ========================================================================== */

.cardart::after{
  content:"";position:absolute;right:-30px;bottom:-44px;
  width:140px;height:166px;opacity:.12;pointer-events:none;
  background:url("/assets/brand/badge-light.png") center/contain no-repeat;
}
.cardart--lg::after{right:-44px;bottom:-60px;width:220px;height:260px;opacity:.14}

/* The badge sits wholly inside these panels. Bleeding it off the corner
   gets clipped against the dashed border, and a hard cut across a dashed
   edge reads as a broken image rather than a deliberate crop. */
.tbc{position:relative;overflow:clip}
.tbc::after{
  content:"";position:absolute;right:26px;bottom:24px;
  width:116px;height:137px;opacity:.1;pointer-events:none;
  background:url("/assets/brand/badge-light.png") center/contain no-repeat;
}
.tbc--dark::after{opacity:.13}
@media (max-width:640px){ .tbc::after{right:16px;bottom:16px;width:84px;height:99px} }
.tbc > *{position:relative;z-index:1}

@media (max-width:640px){
  .cardart--lg::after{width:150px;height:178px}
}

/* ------------------------------------------------------------------ faq --- */
/* Collapsed by default. Native details/summary, so it is keyboard operable
   without script and the answers stay in the HTML for crawlers. */
.faq{max-width:860px}
.faq__item{border-bottom:1px solid var(--concrete-line)}
.faq__item:first-child{border-top:1px solid var(--concrete-line)}

.faq__q{
  cursor:pointer;list-style:none;display:flex;align-items:flex-start;gap:20px;
  padding:18px 0;
}
.faq__q::-webkit-details-marker{display:none}
.faq__q h3{
  font-family:var(--display);font-weight:800;font-style:italic;
  font-variation-settings:"wdth" 106;letter-spacing:-.02em;
  font-size:clamp(17px,2vw,20px);line-height:1.15;margin:0;color:var(--tarmac);
  flex:1;
}
.faq__q:hover h3{color:var(--red-ink)}
/* the open/closed indicator */
.faq__q::after{
  content:"";flex:none;width:14px;height:14px;margin-top:.3em;
  background:
    linear-gradient(var(--red-ink),var(--red-ink)) center/100% 2px no-repeat,
    linear-gradient(var(--red-ink),var(--red-ink)) center/2px 100% no-repeat;
  transition:transform .18s ease;
}
.faq__item[open] .faq__q::after{
  background:linear-gradient(var(--red-ink),var(--red-ink)) center/100% 2px no-repeat;
  transform:rotate(180deg);
}
.faq__q:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
@media (prefers-reduced-motion:reduce){ .faq__q::after{transition:none} }

.faq__a{color:var(--grit-2);font-size:15.5px;margin:0 0 22px;max-width:62ch;padding-right:34px}

/* the championship crest, shown properly in the hero rather than only as a
   watermark elsewhere */
/* stays first in the source so a phone sees it before the headline, but
   floats to the top right of the hero once there is room for it */
.hero__badge{height:clamp(140px,17vw,196px);width:auto;display:block;margin:0 0 26px}
@media (max-width:900px){ .hero__badge{height:118px;margin-bottom:20px} }
@media (min-width:901px){
  .hero__in{position:relative}
  /* right:0 would sit in the shell's gutter, so offset by it */
  .hero__badge{
    position:absolute;top:-6px;right:var(--gut);margin:0;z-index:2;
    height:clamp(132px,14.5vw,168px);
  }
}

/* the slogan sits under the name, clearly subordinate to it */
.hero__slogan{
  font-family:var(--display);font-weight:700;font-style:italic;
  font-variation-settings:"wdth" 106;letter-spacing:-.015em;
  font-size:clamp(17px,2.1vw,25px);line-height:1.15;
  color:var(--cream);margin:16px 0 0;max-width:22ch;
}