/* ==========================================================================
   Klaassen Motorsport
   Self-hosted fonts, no third-party requests, no cookies.
   ========================================================================== */

/* --- Fonts ------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/jetbrainsmono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/jetbrainsmono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens ------------------------------------------------------------ */

:root {
  /* ---------------------------------------------------------------------
     Black and green, confirmed by David Klaassen.

     Two colours do the whole job. The green is the fluoro off the team's own
     bodywork, unchanged. The black is a true near-black carrying a trace of
     that same green, so the darks read as one family rather than as grey
     with a green sticker on it. The ink ramp climbs from black in four
     steps, so surfaces separate from each other by tone rather than by
     borders alone.

     Every tone step and every text pair here was measured, not eyeballed.
     Ratios are noted where they matter. Nothing on the page is below 4.5:1.

     Named by JOB, not by colour. `--surface` is "the thing a card sits on",
     so a card does not have to know what colour the theme is. Anything that
     needs the literal colours still has --ink-* and --green.
     --------------------------------------------------------------------- */
  --ink-900: #080b08;  /* the brand black: text and buttons on green */
  --ink-800: #131914;  /* its hover */
  --ink-700: #212d24;
  --ink-600: #314235;

  /* The green, chosen by David Klaassen as a gradient from #00bf63 to
     #0dff00. It is a rare pick: EVERY point along it clears 4.5:1 both as a
     fill under --ink-900 text (worst 8.1:1, at the deep end) and as text on
     --bg (worst 8.0:1). So the gradient can run anywhere without a legibility
     trap at one end. Measured across 101 samples, not at the two stops.

     --green is the exact sRGB midpoint of the gradient, which is what a
     browser paints in the middle of it. Flat green elements therefore match
     the gradient ones instead of drifting against them.

     Gradient for brand surfaces, flat green for structural work. Rules,
     markers, small links and focus rings stay flat: a gradient on a 3px rule
     is invisible, and on small text it costs legibility for nothing. */
  --green-deep: #00bf63;   /* gradient start */
  --green-bright: #0dff00; /* gradient end */
  --green: #07df32;        /* flat: the gradient's midpoint */
  --green-700: #06be2b;    /* flat hover; 7.9:1 under --ink-900 */

  /* One angle everywhere, so every green surface reads as the same object
     lit the same way. */
  --grad-green: linear-gradient(100deg, var(--green-deep), var(--green-bright));
  --grad-green-hover: linear-gradient(100deg, #00a254, #0bd900);

  /* Backgrounds, darkest first. Each step is a measured tone apart. */
  --bg: #0a0e0b;          /* the page */
  --bg-alt: #121813;      /* alternating band */
  --hero-bg: #111612;     /* hero and page headers */
  --surface: #1a231c;     /* cards, tables, form fields */
  --surface-2: #1f2921;   /* striped table rows, notes */
  --surface-3: #243027;   /* chips, row headers */

  /* Text. Warm-neutral white rather than pure white: 17:1 on the page
     background, and easier to read for long stretches than #fff on black. */
  --text: #eef3ef;
  --text-muted: #a7b4a9;  /* 9.0:1 on --bg, 6.4:1 on --surface-3 */
  --white: #ffffff;       /* literal white, for text and borders on dark */
  --on-dark: #ffffff;
  --on-dark-muted: #a7b4a9;

  --red: #ff5a6e;      /* race-number plate red, lifted to read on dark */

  /* Borders are light at low alpha, so they sit correctly on any surface. */
  --border: rgba(255, 255, 255, 0.13);
  --border-soft: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.22);
  --rule-dark: rgba(255, 255, 255, 0.16);

  --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas,
    'Liberation Mono', monospace;

  --gutter: 20px;
  --maxw: 1200px;
  --radius: 4px;

  /* On a dark page a tinted shadow does nothing. Depth comes from black at
     real alpha, and from the border lifting on hover. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 10px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 10px 34px rgba(0, 0, 0, 0.5);

  --header-h: 68px;

  /* Tells the browser this is a dark UI, so native form controls, the
     <select> drop-down, scrollbars and autofill all render dark instead of
     punching a white hole in the page. */
  color-scheme: dark;
}

@media (min-width: 900px) {
  :root {
    --gutter: 40px;
    --header-h: 84px;
  }
}

/* --- Reset ------------------------------------------------------------- */

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

html {
  /* clip, never hidden: `hidden` turns <body> into a scroll container and
     breaks position:sticky and window scroll listeners */
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible { outline-color: var(--green); }

/* Every number on this site is monospaced with lining, tabular figures,
   the way a real timing sheet sets them. */
.mono,
time,
.stat__value,
.tnum,
table.data td,
table.data th {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* --- Layout ------------------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 760px; }

.section { padding-block: clamp(48px, 8vw, 96px); }
.section--tight { padding-block: clamp(36px, 5vw, 64px); }

.on-dark {
  background: var(--bg-alt);
  color: var(--on-dark);
}
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--on-dark); }
.on-dark p { color: var(--on-dark-muted); }

.tint { background: var(--bg-alt); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--green);
  color: var(--ink-900);
  padding: 12px 20px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
}
.skip:focus { left: 0; }

/* --- Eyebrow ----------------------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.eyebrow::before {
  content: '';
  flex: none;
  width: 22px;
  height: 3px;
  background: var(--grad-green);
}
/* Every dark context, so an eyebrow can never fall back to the light-mode
   muted ink and land at 2.2:1 on the black. */
.on-dark .eyebrow,
.hero .eyebrow,
.page-head .eyebrow,
.cta-band .eyebrow { color: var(--on-dark-muted); }
.cta-band .eyebrow { color: rgba(8, 11, 8, 0.72); }
.cta-band .eyebrow::before { background: var(--ink-900); }

.section-head { max-width: 62ch; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head h2 { font-size: clamp(1.75rem, 4.4vw, 2.75rem); }
.section-head p { font-size: 1.0625rem; }
.section-head .lede { font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); color: var(--text-muted); }
.on-dark .section-head .lede { color: var(--on-dark-muted); }

/* --- Buttons ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease, transform 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }

.btn--primary {
  background: var(--grad-green);
  color: var(--ink-900);
  border-color: var(--green-deep);
}
.btn--primary:hover { background: var(--grad-green-hover); border-color: #00a254; }

.btn--ghost { border-color: var(--border-strong); color: var(--text); background: transparent; }
.btn--ghost:hover { background: var(--white); color: var(--ink-900); }

/* Every dark context is listed together so a ghost button can never end up
   black-on-black and disappear. */
.on-dark .btn--ghost,
.hero .btn--ghost,
.page-head .btn--ghost,
.site-footer .btn--ghost {
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--white);
}
.on-dark .btn--ghost:hover,
.hero .btn--ghost:hover,
.page-head .btn--ghost:hover,
.site-footer .btn--ghost:hover {
  background: var(--white);
  color: var(--ink-900);
  border-color: var(--white);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* --- Header ------------------------------------------------------------ */

/* A sticky header must never change `position` between states, or the page
   jumps by the header height mid-scroll. Only paint changes below. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--hero-bg);
  color: var(--white);
  border-bottom: 1px solid transparent;
  transition: background-color 0.2s ease, box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.site-header.is-stuck {
  background: rgba(8, 11, 8, 0.97);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom-color: var(--rule-dark);
  box-shadow: 0 6px 24px rgba(8, 11, 8, 0.28);
}

.header-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--header-h);
}
.header-bar > * { min-width: 0; }

/* The logo is one lossless alpha file used as a CSS mask, so it inherits
   currentColor: light header, dark header and print, from one asset. */
.brand {
  display: flex;
  align-items: center;
  flex: none;
  min-height: 44px;
  text-decoration: none;
  color: var(--white);
}
.brand__mark {
  width: clamp(150px, 20vw, 196px);
  aspect-ratio: 501 / 112;
  background-color: currentColor;
  -webkit-mask: url('../img/logo-mask.png') no-repeat center / contain;
  mask: url('../img/logo-mask.png') no-repeat center / contain;
  transition: background-color 0.2s ease;
}
.brand__fallback { position: absolute; left: -9999px; }

.nav { margin-left: auto; min-width: 0; }
.nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 14px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.86);
  transition: color 0.15s ease, background-color 0.15s ease;
}
.nav__link:hover { color: var(--white); background: rgba(255, 255, 255, 0.08); }
.nav__link[aria-current='page'] {
  color: var(--green);
  font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--green);
  border-radius: 0;
}

/* The phone number is this site's "live timing" slot: the one link a
   competitor or a parent wants most, permanently visible in the header. */
.header-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: var(--radius);
  background: var(--grad-green);
  color: var(--ink-900);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}
.header-call:hover { background: var(--grad-green-hover); }
.header-call__label { display: none; }
.header-call svg { width: 18px; height: 18px; display: none; }

.nav-toggle {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-left: auto;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius);
  background: transparent;
  color: var(--white);
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded='true'] .icon-close { display: block; }
.nav-toggle[aria-expanded='true'] .icon-open { display: none; }

@media (max-width: 1023px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: 0;
    background: var(--bg);
    border-top: 1px solid var(--rule-dark);
    border-bottom: 1px solid var(--rule-dark);
    display: none;
  }
  .nav.is-open { display: block; }
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 20px;
  }
  .nav__link {
    min-height: 52px;
    padding-inline: 0;
    border-bottom: 1px solid var(--rule-dark);
    border-radius: 0;
    font-size: 0.9375rem;
  }
  .nav__link[aria-current='page'] { box-shadow: none; }
  .nav__link[aria-current='page']::before {
    content: '';
    width: 3px;
    height: 20px;
    background: var(--green);
    margin-right: 12px;
  }
}

@media (max-width: 479px) {
  .header-call { padding: 8px 12px; font-size: 0.8125rem; }
  .brand__mark { width: 128px; }
  .header-bar { gap: 10px; }
}
/* Below 360px the number will not fit beside the wordmark and the menu
   button, so the call button becomes a 44px icon. The accessible name still
   reads the full number. Measured: 128 + 10 + 46 + 10 + 118 = 312px of
   content needs 352px of viewport once the gutters are paid for. */
@media (max-width: 359px) {
  .header-call { width: 44px; padding: 0; justify-content: center; }
  .header-call__num { display: none; }
  .header-call svg { display: block; }
}
@media (min-width: 1024px) {
  .header-call__label { display: inline; opacity: 0.7; }
}

/* --- Hero -------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--hero-bg);
  color: var(--white);
  overflow: clip;
}
/* Tiled wordmark, the way it is printed across the team's own bodywork.
   One lossless alpha file used as a repeating CSS mask filled with a flat
   tint, so it costs one request and inherits nothing from the photograph. */
.hero::before {
  content: '';
  position: absolute;
  /* Oversized, because the layer is rotated inside its own box. */
  inset: -30%;
  background-color: rgba(255, 255, 255, 0.055);
  -webkit-mask-image: url('../img/logo-mask.png');
  mask-image: url('../img/logo-mask.png');
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: clamp(230px, 30vw, 430px) auto;
  mask-size: clamp(230px, 30vw, 430px) auto;
  transform: rotate(-14deg);
  pointer-events: none;
}
/* The diagonal "timing tape" hatch sits under the wordmark. */
.hero {
  background-image: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.035) 0 2px,
    transparent 2px 9px
  );
}
.hero::after {
  content: '';
  position: absolute;
  right: -10%;
  top: -20%;
  width: 70%;
  height: 140%;
  background: radial-gradient(
    closest-side,
    rgba(183, 217, 0, 0.18),
    transparent 70%
  );
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  padding-block: clamp(40px, 6vw, 72px) 0;
}
.hero__inner > * { min-width: 0; }

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: 32px;
    padding-block: clamp(48px, 5vw, 80px);
  }
}

.hero h1 {
  /* Floor set from the longest word actually set here: "Championship",
     12 characters in an expanded face at 375px. */
  font-size: clamp(2.0625rem, 7.2vw, 4.25rem);
  letter-spacing: -0.025em;
  margin-bottom: 0.4em;
}
.hero h1 em {
  font-style: normal;
  color: var(--green);
}
/* The one place the gradient is the point rather than the finish. The colour
   above is the fallback and stays in force wherever background-clip: text is
   not supported, so the word can never come out invisible. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero h1 em {
    background-image: var(--grad-green);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.hero__lede {
  font-size: clamp(1.0625rem, 1.9vw, 1.3125rem);
  color: rgba(255, 255, 255, 0.82);
  max-width: 46ch;
  margin-bottom: 0;
}

.hero__figure {
  position: relative;
  margin: 0;
  align-self: end;
}
.hero__figure img {
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
  filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.5));
}
@media (max-width: 899px) {
  .hero__figure { margin-top: 24px; }
  .hero__figure img { max-width: 440px; }
}

/* Honours strip sits at the foot of the hero */
.record {
  position: relative;
  z-index: 1;
  background: var(--bg);
  border-top: 3px solid var(--green);
}
.record__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule-dark);
}
@media (min-width: 720px) {
  .record__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.stat {
  min-width: 0;
  background: var(--bg);
  padding: 22px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stat__value {
  font-size: clamp(2.25rem, 6vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  color: var(--green);
  letter-spacing: -0.02em;
}
.stat__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  overflow-wrap: anywhere;
}

/* --- Three ways in ----------------------------------------------------- */

.routes {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.routes > * { min-width: 0; }

.route {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 26px 24px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    border-top-color 0.18s ease;
}
.route:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-top-color: var(--green);
}
.route__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.route h3 {
  font-size: 1.375rem;
  font-stretch: 105%;
  margin-bottom: 0.4em;
}
.route p {
  color: var(--text-muted);
  font-size: 0.9875rem;
  margin-bottom: 16px;
}
.route__go {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.route:hover .route__go { color: var(--green-700); }
.route__go::after { content: '\2192'; transition: transform 0.18s ease; }
.route:hover .route__go::after { transform: translateX(4px); }

/* --- Class cards (text over photography) ------------------------------- */

.classes {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}
.classes > * { min-width: 0; }

.class-card {
  position: relative;
  min-width: 0;
  overflow: clip;
  border-radius: var(--radius);
  background: var(--bg);
  isolation: isolate;
}
.class-card__media {
  position: relative;
  /* No min-height alongside aspect-ratio: the ratio would then drive the
     element's intrinsic width and push the grid track sideways on a phone. */
  aspect-ratio: 4 / 3;
}
.class-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Measured scrim. These are daylight, high-contrast photographs; the text
   region is composited over a near-opaque black base so the contrast figure
   does not depend on the picture. */
.class-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(8, 11, 8, 0.97) 0%,
    rgba(8, 11, 8, 0.93) 26%,
    rgba(8, 11, 8, 0.58) 52%,
    rgba(8, 11, 8, 0.12) 100%
  );
}
.class-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 20px 22px 22px;
  min-width: 0;
}
.class-card h3 {
  font-size: 1.5rem;
  font-stretch: 118%;
  letter-spacing: 0.01em;
  color: var(--white);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.class-card__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.class-card__list li {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-900);
  background: var(--green);
  padding: 4px 9px;
  border-radius: 2px;
  overflow-wrap: anywhere;
}
/* --- Photo band --------------------------------------------------------- */

.shots {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.shots > * { min-width: 0; }

.shot {
  margin: 0;
  min-width: 0;
  overflow: clip;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
}
/* No min-height alongside this: the ratio would then drive the element's
   intrinsic width and push the grid track sideways on a phone. */
.shot picture { display: block; aspect-ratio: 3 / 2; }
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.shot:hover img { transform: scale(1.03); }

/* One credit for the set, rather than a chip stamped on every photograph. */
.credit-line {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.on-dark .credit-line { color: var(--on-dark-muted); }

/* --- Service list (entry-list styling) --------------------------------- */

.services {
  display: grid;
  gap: 1px;
  /* White, not rule colour: with ten cards in a three-up grid the last row
     is short, and a tinted container would paint the empty cells grey. The
     separators are drawn by each card instead. */
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: clip;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.services > * { min-width: 0; }

.service {
  min-width: 0;
  background: var(--surface);
  box-shadow: 1px 0 0 0 var(--border), 0 1px 0 0 var(--border);
  padding: 22px 22px 24px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 2px;
  align-content: start;
}
.service__num {
  grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--green);
  background: var(--surface-3);
  border-radius: 2px;
  padding: 4px 8px;
  height: fit-content;
  line-height: 1.3;
}
.service h3 {
  font-size: 1.125rem;
  font-stretch: 100%;
  letter-spacing: -0.005em;
  margin-bottom: 4px;
}
.service p {
  color: var(--text-muted);
  font-size: 0.9375rem;
  margin: 0;
  overflow-wrap: anywhere;
}

/* --- Data tables ------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  background: var(--surface);
  /* Set explicitly: a table dropped inside .on-dark would otherwise inherit
     white text onto its own white background and vanish. */
  color: var(--text);
}
table.data th,
table.data td {
  /* A classification table is the likeliest thing on a motorsport site to
     blow out a 375px layout. Long class codes must break. */
  overflow-wrap: anywhere;
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
table.data thead th {
  background: var(--surface-3);
  color: var(--white);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: none;
}
/* Headers may only refuse to wrap once the viewport can afford it, or a
   three-word column head drags the table past 375px. */
@media (min-width: 560px) {
  table.data thead th { white-space: nowrap; }
}
table.data tbody tr:last-child td,
table.data tbody tr:last-child th { border-bottom: none; }
table.data tbody tr:nth-child(even) td,
table.data tbody tr:nth-child(even) th { background: var(--surface-2); }
table.data tbody th[scope='row'],
table.data td:first-child {
  font-weight: 700;
  color: var(--green);
  background: var(--surface);
}
table.data tbody tr:nth-child(even) th[scope='row'] { background: var(--surface-2); }
.on-dark table.data caption { color: var(--text-muted); }
table.data caption {
  caption-side: bottom;
  text-align: left;
  padding: 10px 14px;
  font-size: 0.8125rem;
  color: var(--text-muted);
  background: var(--surface);
  border-top: 1px solid var(--border);
}

/* A classification table is the single most likely thing on a motorsport
   site to blow out a phone layout. Below 760px each row becomes a labelled
   block instead of scrolling sideways, so nothing is hidden and nothing is
   lost. Labels come from data-label on the cells. */
.table-stack { border: 0; }
@media (max-width: 759px) {
  /* Flex column so the caption can keep its caption-side: bottom position
     once the table stops being a table. */
  .table-stack table.data { display: flex; flex-direction: column; }
  .table-stack table.data tbody { display: contents; }
  .table-stack table.data caption { order: 99; }

  .table-stack table.data tr,
  .table-stack table.data td,
  .table-stack table.data th,
  .table-stack table.data caption {
    display: block;
    width: 100%;
  }
  .table-stack table.data thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .table-stack table.data tr {
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-strong);
    border-radius: var(--radius);
    margin-bottom: 10px;
    background: var(--surface);
    overflow: clip;
  }
  .table-stack table.data tbody tr:nth-child(even) td,
  .table-stack table.data tbody tr:nth-child(even) th { background: var(--surface); }
  .table-stack table.data tbody th[scope='row'] {
    background: var(--surface-3);
    font-size: 1rem;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
  }
  .table-stack table.data td {
    display: grid;
    grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr);
    gap: 10px;
    padding: 7px 14px;
    border-bottom: 1px solid var(--border-soft);
  }
  .table-stack table.data td:last-child { border-bottom: none; }
  .table-stack table.data td::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-top: 0.25em;
    overflow-wrap: anywhere;
  }
  .table-stack table.data caption {
    border: 0;
    padding: 6px 2px 0;
    background: transparent;
  }
}
@media print {
  .table-stack table.data thead { position: static; clip: auto; clip-path: none; }
  .table-stack table.data td::before { content: none; }
}

/* Row emphasis for the classes the team actually runs. */
table.data tr.is-run th[scope='row'] { box-shadow: inset 3px 0 0 var(--green); }
.run-key {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.run-key::before {
  content: '';
  width: 14px;
  height: 14px;
  background: var(--green);
  border-radius: 2px;
  flex: none;
}

/* Footnote key beneath a governing-body table. */
.key-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.key-list li {
  display: grid;
  grid-template-columns: 2.5em minmax(0, 1fr);
  gap: 12px;
  font-size: 0.875rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.key-list b {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--green);
}
.on-dark .key-list li { color: var(--on-dark-muted); }
.on-dark .key-list b { color: var(--green); }

.source-note {
  margin: 16px 0 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* --- Feature bands ----------------------------------------------------- */

.split {
  display: grid;
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
}
.split > * { min-width: 0; }
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
.split__media { margin: 0; }
.split__media img {
  width: 100%;
  border-radius: var(--radius);
}
.split__media figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.on-dark .split__media figcaption { color: var(--on-dark-muted); }

.tick-list { list-style: none; margin: 20px 0 0; padding: 0; }
.tick-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  overflow-wrap: anywhere;
}
.tick-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 16px;
  height: 3px;
  background: var(--green);
}

/* --- Partner cards ----------------------------------------------------- */

.partners {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.partners > * { min-width: 0; }
.partner {
  min-width: 0;
  padding: 26px 24px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--rule-dark);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
}
.partner h3 { font-size: 1.1875rem; font-stretch: 102%; margin-bottom: 0.5em; }
.partner p { font-size: 0.9375rem; margin-bottom: 0; }

/* --- Callout / CTA ----------------------------------------------------- */

.cta-band {
  background: var(--grad-green);
  color: var(--ink-900);
}
.cta-band h2 { font-size: clamp(1.625rem, 4vw, 2.5rem); color: var(--ink-900); }
.cta-band p { color: rgba(8, 11, 8, 0.78); max-width: 52ch; }
.cta-band .btn--primary {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: var(--green);
}
.cta-band .btn--primary:hover { background: var(--ink-800); border-color: var(--ink-800); }
.cta-band .btn--ghost { border-color: rgba(8, 11, 8, 0.5); color: var(--ink-900); }
.cta-band .btn--ghost:hover { background: var(--ink-900); color: var(--green); border-color: var(--ink-900); }
.cta-band :focus-visible { outline-color: var(--ink-900); }

.note {
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  background: var(--surface-2);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  color: var(--text-muted);
}
.note strong { color: var(--text); }
.note a { color: var(--green); text-underline-offset: 3px; }

/* --- Contact ----------------------------------------------------------- */

.contact-grid {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
}
.contact-grid > * { min-width: 0; }
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); align-items: start; }
}

.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li {
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.contact-list li:first-child { padding-top: 0; }
.contact-list dt,
.contact-list .contact-list__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.contact-list a {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--green);
  text-decoration: none;
  overflow-wrap: anywhere;
  display: inline-block;
}
.contact-list a:hover { text-decoration: underline; text-underline-offset: 3px; }

.form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 12px 14px;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
/* Chrome paints autofilled fields with its own near-white background,
   which puts light text on a light field. The inset shadow is the only
   supported way to override it. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 40px var(--surface) inset;
  caret-color: var(--text);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(20, 89, 124, 0.15);
}
.field--row { display: grid; gap: 18px; }
@media (min-width: 560px) {
  .field--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.form__hint { font-size: 0.875rem; color: var(--text-muted); margin: 0; }
.form__status {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text);
  font-weight: 600;
}

/* --- News -------------------------------------------------------------- */

.post-list { display: grid; gap: 18px; list-style: none; margin: 0; padding: 0; }
.post-card {
  min-width: 0;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
}
.post-card h3 { font-size: 1.3125rem; font-stretch: 104%; margin-bottom: 0.35em; }
.post-card h3 a {
  display: inline-block;
  padding: 3px 0;
  min-height: 26px;
  text-decoration: none;
}
.post-card h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.post-meta {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.375rem, 3vw, 1.875rem); margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: 1.0625rem; }
/* :not(.btn) matters. `.prose a` is more specific than `.btn--primary`,
   so without it a button inside a news post gets green text on its green
   fill and disappears completely. */
.prose a:not(.btn) { color: var(--green); text-underline-offset: 3px; }

.page-head {
  background: var(--hero-bg);
  color: var(--white);
  padding-block: clamp(36px, 6vw, 68px);
  position: relative;
  overflow: clip;
}
.page-head {
  background-image: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.035) 0 2px,
    transparent 2px 9px
  );
}
.page-head::before {
  content: '';
  position: absolute;
  inset: -40%;
  background-color: rgba(255, 255, 255, 0.05);
  -webkit-mask-image: url('../img/logo-mask.png');
  mask-image: url('../img/logo-mask.png');
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: clamp(210px, 26vw, 380px) auto;
  mask-size: clamp(210px, 26vw, 380px) auto;
  transform: rotate(-14deg);
  pointer-events: none;
}
.page-head .wrap { position: relative; z-index: 1; }
.page-head h1 { font-size: clamp(2rem, 5.6vw, 3.25rem); }
.page-head p {
  color: rgba(255, 255, 255, 0.82);
  max-width: 56ch;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  margin-bottom: 0;
}

.breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 14px;
}
.breadcrumb a {
  display: inline-block;
  padding: 3px 0;
  min-height: 24px;
  color: inherit;
  text-decoration: none;
}
.breadcrumb a:hover { color: var(--green); text-decoration: underline; }

/* --- Footer ------------------------------------------------------------ */

.site-footer {
  background: #050605;
  color: var(--on-dark-muted);
  padding-block: clamp(40px, 5vw, 56px) 28px;
  font-size: 0.9375rem;
}
.footer-grid {
  display: grid;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--rule-dark);
}
.footer-grid > * { min-width: 0; }
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
}
.site-footer h2 {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  font-stretch: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 14px;
}
.footer-nav { list-style: none; margin: 0; padding: 0; }
.footer-nav li { margin-bottom: 2px; }
.footer-nav a {
  display: inline-block;
  padding: 5px 0;
  min-height: 24px;
  text-decoration: none;
  color: var(--on-dark-muted);
  transition: color 0.15s ease;
  overflow-wrap: anywhere;
}
.footer-nav a:hover { color: var(--green); }
.footer-brand .brand__mark { width: 176px; color: var(--white); }
.footer-brand p { margin-top: 16px; max-width: 34ch; font-size: 0.9375rem; }

.social {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  list-style: none;
  padding: 0;
}
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  color: var(--white);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.social a:hover { background: var(--green); color: var(--ink-900); border-color: var(--green); }
.social svg { width: 20px; height: 20px; fill: currentColor; }

.legal {
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: rgba(159, 184, 198, 0.8);
}
.legal p { margin: 0; overflow-wrap: anywhere; }
.legal a { color: inherit; }

/* --- Print ------------------------------------------------------------- */
/* Regs and contact details get printed and taken to the paddock. */

@media print {
  /* Paper is white and ink is expensive. Because every component references
     tokens rather than literal colours, flipping the tokens here turns the
     whole dark theme back into something you would hand to a competitor,
     without touching a single component rule. */
  :root {
    --gutter: 0;
    color-scheme: light;

    --bg: #ffffff;
    --bg-alt: #ffffff;
    --hero-bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #ffffff;
    --surface-3: #eeeeee;

    --text: #000000;
    --text-muted: #333333;
    --on-dark: #000000;
    --on-dark-muted: #333333;
    --white: #ffffff;

    --border: #999999;
    --border-soft: #cccccc;
    --border-strong: #666666;
    --rule-dark: #999999;

    /* The accent is used for small text as well as for rules. The green on
       white is 1.6:1 at its deep end and worse at its bright end, so on paper
       the whole thing becomes black. The gradients collapse to flat black for
       the same reason, and because a gradient is wasted ink. */
    --green: #000000;
    --green-700: #000000;
    --green-deep: #000000;
    --green-bright: #000000;
    --grad-green: none;
    --grad-green-hover: none;

    --shadow-sm: none;
    --shadow-md: none;
  }
  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
    line-height: 1.45;
  }
  .site-header,
  .site-footer,
  .nav,
  .nav-toggle,
  .header-call,
  .skip,
  .hero__figure,
  /* Supporting photography: it is what turns a 150 KB printout into a 2 MB
     one, and nobody takes a picture of a podium to the paddock. */
  .split__media,
  .classes,
  .credit-line,
  .cta-band,
  .btn,
  .btn-row,
  .social,
  .class-card__media img,
  .no-print { display: none !important; }

  /* An empty form is not worth the ink; the phone number above it is. */
  .form { display: none !important; }

  .hero,
  .page-head,
  .on-dark,
  .tint,
  .record,
  .stat,
  .class-card,
  .note,
  .partner {
    background: #fff !important;
    color: #000 !important;
    border-color: #999 !important;
    box-shadow: none !important;
  }
  .hero::before, .hero::after, .page-head::before,
  .class-card__media::after { display: none !important; }
  /* Without this the gradient headline prints as a blank space: the glyphs
     are transparent and the gradient painting through them is gone. */
  .hero h1 em {
    -webkit-text-fill-color: #000 !important;
    background-image: none !important;
    color: #000 !important;
  }
  .on-dark p, .on-dark h1, .on-dark h2, .on-dark h3,
  .page-head p, .stat__label, .partner p { color: #000 !important; }
  .stat__value { color: #000 !important; }
  .class-card__media { aspect-ratio: auto; height: auto; }
  .class-card__body { position: static; padding: 0; }
  .class-card__list li { background: none; border: 1px solid #666; color: #000; }

  .section { padding-block: 12pt; }
  a { text-decoration: underline; }
  main a[href^='http']::after,
  main a[href^='mailto']::after,
  main a[href^='tel']::after {
    content: ' (' attr(href) ')';
    font-family: monospace;
    font-size: 9pt;
    word-break: break-all;
  }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  table.data, .service, .route, .note { break-inside: avoid; page-break-inside: avoid; }
  .table-scroll { overflow: visible; }
  /* On screen at 375px a class code has to break anywhere or it blows out
     the layout. On paper there is room, so let words break only when they
     genuinely do not fit, or "Blue/White" splits across two lines. */
  table.data th,
  table.data td {
    overflow-wrap: break-word;
    word-break: normal;
    padding: 5pt 7pt;
  }
  table.data { font-size: 8.5pt; }
  table.data thead th { background: #eee !important; color: #000 !important; }
  .print-only { display: block !important; }
}

.print-only { display: none; }