/* ==========================================================================
   IAME Series Egypt — scoped navy register (direction C)
   Loaded only by iame-series/*. Tokens live on .series, never :root, so the
   navy cannot leak into the Race Line pages if this file is ever included
   elsewhere. Race Line's lime is deliberately absent.
   ========================================================================== */

/* Self-hosted so the section makes no third-party request. Variable fonts, so
   one file covers every weight the section uses. */
@font-face {
  font-family: "Archivo Series";
  src: url("/fonts/archivo-latin-var.woff2") format("woff2-variations");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono Series";
  src: url("/fonts/jetbrains-mono-latin-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

.series {
  --series-bg: #00122E;
  --series-panel: #001B3A;
  --series-panel-2: #002145;
  --series-navy: #002F6C;
  --series-line: rgba(255, 255, 255, 0.1);
  --series-text: #EDF2F8;
  --series-dim: #7F97B5;
  --series-aqua: #00E5FF;
  --series-red: #D80018;
  --series-gold: #C9A227;
  --series-green: #32D296;

  --series-pad: clamp(1.25rem, 4vw, 4rem);
  --series-sect: clamp(3rem, 7vw, 5.5rem);
  --series-ease: cubic-bezier(0.2, 0.9, 0.2, 1);

  --series-display: "Archivo Series", system-ui, sans-serif;
  --series-mono: "JetBrains Mono Series", ui-monospace, monospace;

  background: var(--series-bg);
  color: var(--series-text);
  font-family: var(--series-display);
}

/* css/main.css declares background, color and font-family on a bare `body`
   selector. An inherited value never beats a declaration, so without this rule
   every series page would paint Race Line's olive-black behind the navy shell
   and fall back to Inter. `.series body` (0,1,1) outranks `body` (0,0,1), and
   series.css loads after main.css. */
.series body {
  background: var(--series-bg);
  color: var(--series-text);
  font-family: var(--series-display);
  /* css/main.css puts .site-nav in position: fixed so it can overlay the
     homepage's full-height hero. These pages lead with the status rail, so they
     must start below it. 4.5rem is the same clearance css/main.css already uses
     for `.section { scroll-margin-top }`, measured against the same nav. */
  padding-top: 4.5rem;
}

/* The shared nav's gradient is built to fade over a photo hero. On these pages
   it sits on flat navy, so give it a solid bar instead. */
.series .site-nav {
  background: var(--series-panel-2);
  border-bottom: 1px solid var(--series-line);
}

.series h1, .series h2, .series h3 {
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.9;
}

/* css/main.css's global :focus-visible ring is Race Line's lime, which is
   deliberately absent from this navy palette (see file header). Every
   interactive element in this section — the six sub-nav links, .series-btn,
   .series-tabs buttons — otherwise renders with no visible focus indicator
   at all, so give the section its own ring in the aqua accent instead.
   Checked every ancestor with non-visible overflow (.series-subnav's
   overflow-x: auto, which also computes overflow-y to auto; .series-hero__l's
   overflow: hidden) against the actual rendered padding around each
   focusable element — all clear the outside ring by a wide margin, so no
   element here needs an inward offset the way the homepage's clipped
   .btn does. */
.series :focus-visible {
  outline: 2px solid var(--series-aqua);
  outline-offset: 2px;
}

/* A class that sets `display` outranks the user agent's `[hidden]` rule, so
   any component in this section that carries `hidden` would still paint.
   This restores the attribute's meaning without needing !important. */
.series [hidden] {
  display: none;
}

.series .container {
  padding-left: var(--series-pad);
  padding-right: var(--series-pad);
}

.series-section { padding: var(--series-sect) 0; }
.series-section--alt { background: var(--series-panel-2); }

/* ---- status rail ---- */
.series-status {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 32px;
  padding: 0.35rem var(--series-pad);
  background: var(--series-panel-2);
  border-bottom: 1px solid var(--series-line);
  font-family: var(--series-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--series-dim);
  flex-wrap: wrap;
}
.series-status b { color: var(--series-text); font-weight: 500; }
.series-status__live { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--series-aqua); }
.series-status__live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: series-ping 1.8s infinite;
}
@keyframes series-ping {
  70% { box-shadow: 0 0 0 8px rgba(0, 229, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0); }
}
.series-status__right { margin-inline-start: auto; display: flex; gap: 1.25rem; }

/* ---- section sub-navigation ---- */
.series-subnav {
  display: flex;
  gap: 1.5rem;
  padding: 0.75rem var(--series-pad);
  background: var(--series-navy);
  font-family: var(--series-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  overflow-x: auto;
}
.series-subnav a {
  color: #A9C4E4;
  white-space: nowrap;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.series-subnav a:hover { color: #fff; }
.series-subnav a[aria-current="page"] { color: #fff; border-color: var(--series-aqua); }

/* ---- hero ---- */
.series-hero { display: grid; grid-template-columns: 1.12fr 0.88fr; min-height: 58svh; }
.series-hero__l {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(2rem, 4vw, 3.25rem) var(--series-pad);
  overflow: hidden;
}
.series-hero__l::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Framing and strength are variables because the right values depend on the
     photo, not the layout. The defaults (50% 46% / cover, 0.3) suit the portrait
     shots the other pages use. A landscape photo with an off-centre subject
     needs its own crop, set next to the image on the page itself. */
  background: var(--series-hero-image) var(--series-hero-pos, 50% 46%) / var(--series-hero-size, cover);
  opacity: var(--series-hero-opacity, 0.3);
}
.series-hero__l::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 18, 46, 0.6), rgba(0, 18, 46, 0.94) 88%);
}
.series-hero__l > * { position: relative; z-index: 2; }
.series-badge { align-self: flex-start; height: clamp(88px, 11vw, 142px); width: auto; margin-bottom: 0.9rem; }
.series-hero h1 { font-size: clamp(1.9rem, 4.4vw, 3.3rem); }
.series-lede { max-width: 44ch; margin: 0.9rem 0 0; font-size: 0.95rem; line-height: 1.6; color: #B7C8DC; }
.series-lede b { color: #fff; font-weight: 700; }

.series-eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0 0 0.8rem;
  font-family: var(--series-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--series-aqua);
}
.series-eyebrow span + span::before { content: "·"; margin-inline-end: 1rem; color: var(--series-dim); }

.series-hero__r {
  background: var(--series-panel);
  border-inline-start: 1px solid var(--series-line);
  padding: clamp(1.5rem, 3vw, 2.25rem) var(--series-pad);
  display: flex;
  flex-direction: column;
}
.series-tag {
  align-self: flex-start;
  padding: 0.3rem 0.55rem;
  background: var(--series-red);
  font-family: var(--series-mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.series-hero__r h2 { margin-top: 0.85rem; font-size: clamp(1.2rem, 2.2vw, 1.75rem); }

.series-meta { margin-top: 1.1rem; border-top: 1px solid var(--series-line); }
.series-meta div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--series-line);
  font-family: var(--series-mono);
  font-size: 0.7rem;
}
.series-meta dt { color: var(--series-dim); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.6rem; }
.series-meta dd { margin: 0; }

.series-label {
  font-family: var(--series-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--series-dim);
  margin: 0 0 0.5rem;
}
.series-chips { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.series-chip {
  padding: 0.45rem 0.2rem;
  text-align: center;
  background: var(--series-panel-2);
  border: 1px solid var(--series-line);
  font-family: var(--series-mono);
  font-size: 0.6rem;
  color: var(--series-dim);
}
/* #728BAB measures 4.60:1 against --series-panel-2 (the chip's own background) —
   the WCAG AA floor for normal text is 4.5:1. Same hue/saturation as the
   original #5C7799, just lightened until it cleared the floor. */
.series-chip--done { color: #728BAB; border-color: rgba(255, 255, 255, 0.06); }
.series-chip--now { background: var(--series-red); border-color: var(--series-red); color: #fff; font-weight: 700; }

.series-clock { margin-top: auto; padding-top: 1.4rem; }
.series-clock__v {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--series-mono);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.series-clock__v s { text-decoration: none; color: var(--series-dim); font-weight: 400; }
.series-clock__v u {
  text-decoration: none;
  font-size: 0.32em;
  color: var(--series-dim);
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-inline-start: -0.3rem;
}

/* ---- buttons. No clip-path here: the homepage .btn notch clips its focus
   ring, which is why that rule needs outline-offset: -4px. These are square,
   so a normal outside ring works. ---- */
.series-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.5rem;
  background: var(--series-red);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.2s, transform 0.2s var(--series-ease);
}
.series-btn:hover { background: #F00220; transform: translateY(-2px); }
.series-btn--ghost { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }
.series-btn--ghost:hover {
  background: rgba(0, 229, 255, 0.1);
  color: var(--series-aqua);
  box-shadow: inset 0 0 0 1px var(--series-aqua);
}
.series-acts { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.4rem; }

/* ---- section head + class tabs ---- */
.series-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.1rem; }
.series-head h1,
.series-head h2 { font-size: clamp(1.2rem, 2.6vw, 1.75rem); }
.series-head em {
  font-style: normal;
  font-family: var(--series-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--series-dim);
}
.series-tabs { display: flex; gap: 0.3rem; margin-inline-start: auto; }
.series-tabs button {
  padding: 0.42rem 0.8rem;
  background: transparent;
  border: 1px solid var(--series-line);
  color: var(--series-dim);
  font-family: var(--series-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.series-tabs button:hover { color: var(--series-text); border-color: rgba(255, 255, 255, 0.3); }
.series-tabs button[aria-pressed="true"] {
  background: var(--series-text);
  color: var(--series-bg);
  border-color: var(--series-text);
}

/* ---- tables ---- */
.series-scroller { overflow-x: auto; }
.series-tbl {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-family: var(--series-mono);
  font-variant-numeric: tabular-nums;
}
.series-tbl th {
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--series-dim);
  text-align: start;
  padding: 0 0.6rem 0.55rem;
  border-bottom: 1px solid var(--series-line);
  white-space: nowrap;
}
.series-tbl td {
  padding: 0.62rem 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  font-size: 0.76rem;
  white-space: nowrap;
}
.series-tbl tbody tr { transition: background 0.2s; }
.series-tbl tbody tr:hover { background: var(--series-panel); }
.series-tbl .num, .series-tbl th.num { text-align: end; }
.series-tbl .pos { width: 2.4rem; font-weight: 700; font-size: 0.88rem; }
.series-tbl tr.is-leader .pos { color: var(--series-gold); }
.series-tbl tr.is-next { background: rgba(0, 47, 108, 0.55); }
.series-tbl tr.is-next .round { color: var(--series-aqua); }
/* #728BAB measures 4.60:1 against --series-panel-2 and 5.33:1 against
   --series-bg — this calendar table renders on both (plain section on the
   calendar page, .series-section--alt on the homepage), so it's fixed
   against the harder of the two backgrounds. */
.series-tbl tr.is-done td { color: #728BAB; }
.series-tbl .round { font-family: var(--series-display); font-weight: 800; font-size: 0.92rem; width: 3.4rem; }
/* #5E81AC measures 4.63:1 against --series-bg, the only background this
   table ever renders on (the standings table never sits in an --alt section). */
.series-tbl .score-none { color: #5E81AC; }
.series-tbl .score-zero { color: #6E88A8; }
.series-tbl .total { font-weight: 700; font-size: 0.86rem; }

.series-plate {
  display: inline-block;
  min-width: 2.6rem;
  padding: 0.1rem 0.34rem;
  background: var(--series-panel-2);
  border: 1px solid var(--series-line);
  font-weight: 700;
  font-size: 0.7rem;
  text-align: center;
}
.series-driver { font-family: var(--series-display); font-weight: 700; font-size: 0.82rem; letter-spacing: -0.01em; }

.series-pill {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid currentColor;
}
/* Same fix and same reasoning as .series-tbl tr.is-done td above — this pill
   renders in the same calendar table, on the same two backgrounds. */
.series-pill--done { color: #728BAB; }
.series-pill--next { color: #fff; background: var(--series-red); border-color: var(--series-red); }
.series-pill--up { color: var(--series-dim); }

/* ---- points-gap bars ---- */
.series-under {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--series-line);
}
.series-under h2,
.series-under h3 {
  margin: 0 0 0.85rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--series-dim);
}
.series-gap { display: grid; gap: 0.5rem; }
.series-gap__r {
  display: grid;
  grid-template-columns: 1.1rem 1fr auto;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--series-mono);
  font-size: 0.72rem;
}
.series-gap__r > span:first-child { color: var(--series-dim); }
.series-gap__r--1 > span:first-child { color: var(--series-gold); }
.series-gap__bar {
  position: relative;
  height: 19px;
  display: flex;
  align-items: center;
  padding-inline-start: 0.5rem;
  font-family: var(--series-display);
  font-weight: 700;
  font-size: 0.76rem;
  overflow: hidden;
}
.series-gap__bar::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: var(--w);
  background: linear-gradient(90deg, rgba(0, 47, 108, 0.95), rgba(0, 47, 108, 0.12));
}
.series-gap__r--1 .series-gap__bar::before {
  background: linear-gradient(90deg, rgba(201, 162, 39, 0.5), rgba(201, 162, 39, 0.05));
}
.series-gap__bar i { position: relative; z-index: 1; font-style: normal; }
.series-gap__pt { font-weight: 700; }

/* ---- notes and legend ---- */
.series-note {
  display: inline-block;
  margin: 0 0 1.2rem;
  padding: 0.5rem 0.8rem;
  background: rgba(216, 0, 24, 0.14);
  border-inline-start: 3px solid var(--series-red);
  font-size: 0.72rem;
  color: #F0C9CF;
}
.series-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin-top: 0.9rem;
  font-family: var(--series-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--series-dim);
}
.series-legend i { display: inline-block; width: 8px; height: 8px; margin-inline-end: 0.4rem; }
/* Class colour swatch. The colour comes from a data file, so it is expressed as
   a class rather than an inline style — a style attribute is a CSS declaration
   list, and escaping cannot make an untrusted value safe there. Adding a class
   to data/series.js means adding a modifier here. */
.series-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-inline-end: 0.5rem;
}
.series-dot--red { background: var(--series-red); }
.series-dot--aqua { background: var(--series-aqua); }
.series-dot--green { background: var(--series-green); }
.series-dot--gold { background: var(--series-gold); }
.series-dot--white { background: var(--series-text); }
.series-footnote {
  margin: 1.25rem 0 0;
  font-family: var(--series-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--series-dim);
}

/* ---- cards, used by the classes and register pages ---- */
.series-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--series-line); }
.series-card { background: var(--series-panel); padding: 1.5rem 1.4rem 1.7rem; }
.series-card h2 { font-size: 1.05rem; margin-bottom: 0.9rem; }
.series-card__spec { margin: 0; border-top: 1px solid var(--series-line); }
.series-card__spec div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--series-line);
  font-family: var(--series-mono);
  font-size: 0.72rem;
}
.series-card__spec dt { color: var(--series-dim); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.6rem; }
.series-card__spec dd { margin: 0; }

/* ---- forms, used by the entry page (iame-series/register/entry/) ----
   Native controls throughout — accent-color reskins radios/checkboxes to the
   section's aqua instead of the browser's default blue, everything else
   relies on required/type/min/max/autocomplete for validation rather than a
   script. Contrast: --series-text on --series-panel-2 and --series-dim on
   --series-panel-2 both clear 4.5:1 (see the entry-form report for the
   numbers), so no new colour was introduced for this. */
.series-form { max-width: 760px; }

/* Honeypot: visually hidden but still present in the raw HTML Netlify's
   build-time form parser reads, and still in the DOM for naive bots that
   skip CSS — that is the entire point of this technique. Real keyboard users
   never land on it (tabindex="-1") and screen readers skip it (aria-hidden
   on the wrapping <p>). */
.series-form__bot { position: absolute; inset-inline-start: -9999px; }

.series-form__key {
  margin: 1.5rem 0 0;
  font-size: 0.78rem;
  color: var(--series-dim);
}
.series-form__key b { color: var(--series-text); }

.series-form__section {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
  border-top: 1px solid var(--series-line);
}
.series-form__section:first-of-type { margin-top: 1.5rem; }
.series-form__section h2 { font-size: clamp(1.1rem, 2.2vw, 1.5rem); margin-bottom: 1.25rem; }

.series-form__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 1.25rem;
  margin-top: 1.5rem;
}
.series-form__grid:first-child { margin-top: 0; }
.series-form__field--full { grid-column: 1 / -1; }

.series-form__field { display: flex; flex-direction: column; gap: 0.4rem; }
fieldset.series-form__field { border: 0; padding: 0; margin: 1.75rem 0 0; }
fieldset.series-form__field:first-child { margin-top: 0; }

.series-form label,
.series-form legend {
  font-family: var(--series-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--series-text);
}
.series-form__optional { color: var(--series-dim); text-transform: none; letter-spacing: normal; }

.series-form__hint {
  margin: 0;
  font-family: var(--series-mono);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--series-dim);
}

.series-form input[type="text"],
.series-form input[type="tel"],
.series-form input[type="email"],
.series-form input[type="number"],
.series-form input[type="date"],
.series-form input[type="file"],
.series-form textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  background: var(--series-panel-2);
  border: 1px solid var(--series-line);
  color: var(--series-text);
  font-family: var(--series-display);
  font-size: 0.85rem;
}
.series-form textarea { min-height: 5.5rem; resize: vertical; }
/* color-scheme so the native date picker + file-picker chrome render for a
   dark field on browsers that support the hint, instead of a jarring white
   popover on navy. */
.series-form input[type="date"] { color-scheme: dark; }

.series-form input[type="file"] { font-family: var(--series-mono); font-size: 0.72rem; padding: 0.5rem 0.6rem; }
.series-form input[type="file"]::file-selector-button {
  margin-inline-end: 0.75rem;
  padding: 0.45rem 0.8rem;
  background: var(--series-red);
  color: #fff;
  border: 0;
  font-family: var(--series-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.series-form input[type="radio"],
.series-form input[type="checkbox"] {
  accent-color: var(--series-aqua);
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.series-form__radios { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 0.75rem; }
.series-form__radio {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-family: var(--series-display);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--series-text);
}
.series-form__radio input { margin-top: 0.2rem; }

.series-form__declaration {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 1.75rem;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--series-text);
}
.series-form__declaration input { margin-top: 0.25rem; }
.series-form__declaration a { color: var(--series-aqua); text-decoration: underline; text-underline-offset: 2px; }

.series-form__privacy {
  margin: 2rem 0 0;
  padding: 1rem 1.1rem;
  background: var(--series-panel-2);
  border-inline-start: 3px solid var(--series-aqua);
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--series-dim);
}
.series-form__privacy a { color: var(--series-aqua); text-decoration: underline; text-underline-offset: 2px; }

.series-form__actions { margin-top: 1.5rem; }

@media (max-width: 780px) {
  .series-form__grid { grid-template-columns: 1fr; }
}

/* ---- entrance animation. The hidden state lives ONLY inside
   no-preference, so a reduced-motion visitor sees the finished layout
   instead of a blank page. ---- */
@media (prefers-reduced-motion: no-preference) {
  .series [data-series-reveal] { opacity: 0; transform: translateY(16px); }
  .series [data-series-reveal].is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s var(--series-ease), transform 0.7s var(--series-ease);
  }
  .series .series-gap__bar::before { transform: scaleX(0); transform-origin: left; }
  .series .is-in .series-gap__bar::before,
  .series .series-gap__bar.is-in::before { transform: scaleX(1); transition: transform 0.9s var(--series-ease); }
}

@media (max-width: 900px) {
  .series-hero { grid-template-columns: 1fr; }
  .series-hero__r { border-inline-start: 0; border-top: 1px solid var(--series-line); }
  .series-under { grid-template-columns: 1fr; }
  .series .hide-sm { display: none; }
}

/* RTL: the table must keep round order R1..R6 reading right-to-left, which
   `text-align: start/end` and the logical padding above already give us.
   Numerals stay Latin — see data/i18n.js. */
[dir="rtl"] .series-gap__bar::before { background: linear-gradient(270deg, rgba(0, 47, 108, 0.95), rgba(0, 47, 108, 0.12)); }
[dir="rtl"] .series-gap__r--1 .series-gap__bar::before { background: linear-gradient(270deg, rgba(201, 162, 39, 0.5), rgba(201, 162, 39, 0.05)); }
/* Bar anchor is inset-inline-start (right in RTL), so scale-from-left would
   sweep the bar from tip to anchor—backwards. Flip to match LTR intent. */
[dir="rtl"] .series-gap__bar::before { transform-origin: right; }

/* ==========================================================================
   Road to the Middle East Cup (/iame-series/middle-east-cup/)
   Two components only. Everything else on that page reuses the series shell.
   ========================================================================== */

/* ---- two routes out of Egypt ----
   Deliberately NOT a single linear ladder. IAME Series Egypt -> World Finals and
   Road to the ME Cup -> Middle East Cup are parallel competitions that share
   only their starting point, and rendering them as one chain would misstate the
   business. The World Finals card leads because that route is the season's
   headline. */
.mec-routes__start {
  max-width: 68ch;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--series-dim);
}

.mec-routes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--series-line);
  border: 1px solid var(--series-line);
}

.mec-route {
  background: var(--series-panel);
  padding: clamp(1.25rem, 2.6vw, 2rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
}
/* Gold marks the headline route, aqua marks "the page you are on". Different
   jobs, so different colours — aqua is already this section's current-page
   accent on the subnav, and reusing it for "most important" would collapse two
   meanings into one. */
.mec-route--headline { box-shadow: inset 3px 0 0 var(--series-gold); }
.mec-route--now { background: var(--series-panel-2); box-shadow: inset 3px 0 0 var(--series-aqua); }
[dir="rtl"] .mec-route--headline { box-shadow: inset -3px 0 0 var(--series-gold); }
[dir="rtl"] .mec-route--now { box-shadow: inset -3px 0 0 var(--series-aqua); }

.mec-route__tag {
  font-family: var(--series-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--series-dim);
}
.mec-route--headline .mec-route__tag { color: var(--series-gold); }
.mec-route--now .mec-route__tag { color: var(--series-aqua); }

.mec-route__name {
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 800;
  line-height: 1.2;
}

.mec-route__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.mec-route__steps li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-inline-start: 0.9rem;
  border-inline-start: 1px solid var(--series-line);
}
.mec-route__step-label { font-weight: 700; font-size: 0.92rem; }
.mec-route__step-meta {
  font-family: var(--series-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--series-dim);
}

.mec-route__copy {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--series-dim);
}

/* Two routes read as a comparison, so they stack rather than shrink. */
@media (max-width: 780px) { .mec-routes { grid-template-columns: 1fr; } }

/* ---- calendar not-yet-published state ----
   A published calendar and an unpublished one are different states, not a
   present/absent pair — this panel is what "not yet announced" looks like, and
   it must never be mistaken for an empty table that failed to load. */
.mec-tbc {
  border: 1px dashed var(--series-line);
  background: var(--series-panel);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
}
.mec-tbc__title {
  font-family: var(--series-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--series-aqua);
  margin-bottom: 0.6rem;
}
.mec-tbc__copy {
  max-width: 46ch;
  margin: 0 auto;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--series-dim);
}

/* ==========================================================================
   World Finals destination band (/iame-series/)
   Sits between the hero and the standings. Gold throughout — the same token the
   Middle East Cup page uses for "the headline route", so the two pages agree on
   what gold means. Aqua stays reserved for "current".
   ========================================================================== */
.series-dest {
  background: var(--series-panel-2);
  border-top: 1px solid var(--series-line);
  border-bottom: 1px solid var(--series-line);
  padding-block: clamp(2rem, 4.5vw, 3.25rem);
}

.series-dest__grid {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.series-dest__title {
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  font-weight: 800;
  line-height: 1.05;
  margin-top: 0.35rem;
}

.series-dest__meta {
  font-family: var(--series-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--series-gold);
  margin-top: 0.6rem;
}

.series-dest__copy {
  max-width: 52ch;
  margin-top: 0.9rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--series-dim);
}

.series-dest__side {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-inline-start: clamp(1rem, 2.5vw, 2rem);
  border-inline-start: 1px solid var(--series-line);
}

.series-dest__days {
  font-family: var(--series-mono);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--series-gold);
  margin-top: 0.3rem;
}
.series-dest__days u {
  text-decoration: none;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--series-dim);
  margin-inline-start: 0.5rem;
}

.series-dest__q {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  margin-top: 0.4rem;
  font-size: 0.9rem;
}
.series-dest__q span {
  font-family: var(--series-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--series-dim);
}

/* "Not decided yet" is a real answer, not an empty slot — it reads as copy
   rather than as a missing value. */
.series-dest__pending {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--series-dim);
}

@media (max-width: 860px) {
  .series-dest__grid { grid-template-columns: 1fr; }
  .series-dest__side {
    padding-inline-start: 0;
    border-inline-start: 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--series-line);
  }
}