/* =============================================================
   World School Sports News - site stylesheet
   Identity: navy ground from the WSSN crest, electric blue as the
   action accent, gold as the global/editorial accent.
   ============================================================= */

:root {
  /* Brand */
  --navy-900: #071226;
  --navy-800: #0d2244;
  --navy-700: #163a6d;
  --navy-600: #214e92;
  --blue: #2b74d4;
  --blue-dark: #1f5bab;
  --gold: #e8b23c;
  --gold-soft: #f3d388;

  /* Neutrals - cool bias toward the navy */
  --paper: #f5f7fa;
  --paper-2: #ffffff;
  --ink: #0c1626;
  --ink-soft: #4a5769;
  --ink-faint: #7d8899;
  --rule: #dfe3ea;
  --rule-strong: #c6ccd7;

  /* Type */
  --display: "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
  --wordmark: "Montserrat", "Archivo", "Segoe UI", Arial, sans-serif;
  --ui: "Archivo", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --shadow-sm: 0 1px 2px rgba(7, 18, 38, 0.06), 0 4px 12px -6px rgba(7, 18, 38, 0.14);
  --shadow-md: 0 2px 4px rgba(7, 18, 38, 0.08), 0 18px 40px -20px rgba(7, 18, 38, 0.35);

  --wrap: 1200px;
  --radius: 3px;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--navy-900);
  padding: 10px 16px;
  font-weight: 700;
  z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------
   Header
   ------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--navy-800);
  border-bottom: 3px solid var(--blue);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 76px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
.brand img {
  height: 46px;
  width: auto;
  /* soft white halo so the navy crest lifts off the navy header */
  /* strong white halo so the crest reads as one lockup with the wordmark */
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.95))
          drop-shadow(0 0 3px rgba(255, 255, 255, 0.85))
          drop-shadow(0 0 7px rgba(255, 255, 255, 0.55));
}
.brand-name {
  display: flex;
  flex-direction: column;
  font-family: var(--wordmark);
  font-weight: 900;
  font-size: 19px;
  letter-spacing: 0.01em;
  color: #fff;
  line-height: 1.08;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand-name .l2 { font-size: 1em; color: #fff; letter-spacing: 0.01em; }
.brand-name .hl { color: #fff; }

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}
.site-nav a {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #c3cede;
  text-decoration: none;
  padding: 10px 13px;
  border-radius: var(--radius);
  transition: color 0.15s ease, background 0.15s ease;
}
.site-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.site-nav a.is-current { color: #fff; box-shadow: inset 0 -3px 0 var(--gold); }

.btn-cta {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  background: var(--blue);
  color: #fff !important;
  padding: 12px 18px !important;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.15s ease;
  white-space: nowrap;
}
.btn-cta:hover { background: var(--blue-dark) !important; }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  font-family: var(--ui);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 14px;
  border-radius: var(--radius);
  cursor: pointer;
}

@media (max-width: 980px) {
  .site-header .wrap { height: 66px; gap: 12px; }
  .brand-name { font-size: 17px; }
  .brand img { height: 36px; }
  .nav-toggle { display: block; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--navy-700);
    border-bottom: 3px solid var(--blue);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px;
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 13px 14px; }
  .site-nav a.is-current { box-shadow: inset 3px 0 0 var(--gold); }
  .btn-cta { text-align: center; margin-top: 6px; }
}

/* -------------------------------------------------------------
   Buttons / small type
   ------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--blue-dark); }
.btn-ghost { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }
.btn-navy { background: var(--navy-800); color: #fff; }
.btn-navy:hover { background: var(--navy-700); }
.btn-outline { border-color: var(--rule-strong); color: var(--ink); background: #fff; }
.btn-outline:hover { border-color: var(--navy-800); }

.eyebrow {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 10px;
}

/* -------------------------------------------------------------
   Page head (interior pages)
   ------------------------------------------------------------- */
.page-head {
  /* the same blue the story banner carries, so the two read as one site */
  background: var(--blue);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 360px at 80% -20%, rgba(7, 18, 38, 0.42), transparent 62%);
}
.page-head .wrap { position: relative; padding: 46px 24px 44px; }
.page-head .eyebrow { color: #fff; }
.page-head h1 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1;
  margin: 0;
}
.page-head p {
  margin: 14px 0 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: #fff;
  max-width: 62ch;
}

/* -------------------------------------------------------------
   Section heads
   ------------------------------------------------------------- */
.section { padding: 58px 0; }
.section-alt { background: #fff; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 26px;
  border-bottom: 2px solid var(--navy-800);
  padding-bottom: 12px;
}
.section-head h2 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1;
  margin: 0;
  color: var(--navy-900);
}
.section-head .more {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--navy-700);
  text-decoration: none;
  white-space: nowrap;
}
.section-head .more::after { content: " \2192"; }
.section-head .more:hover { color: var(--blue); }

/* Same treatment as .more, but it is a count rather than a link. */
.section-head .result-count {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* -------------------------------------------------------------
   Chips
   ------------------------------------------------------------- */
.chip {
  display: inline-block;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #fff;
  background: var(--navy-700);
  padding: 5px 10px;
  border-radius: 2px;
  white-space: nowrap;
}
.chip-sport { background: var(--blue); }
.chip-place { background: rgba(7, 18, 38, 0.72); }

/* -------------------------------------------------------------
   Story cards
   ------------------------------------------------------------- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 980px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .news-grid { grid-template-columns: 1fr; } }

.story-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.story-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--rule-strong);
}
.story-card .shot {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--navy-800);
}
.story-card .shot > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Faces sit high in most team and podium shots, so bias the crop upward
     rather than taking the middle, which cuts heads off. */
  object-position: 50% 28%;
  transition: transform 0.4s ease;
}
.story-card:hover .shot > img { transform: scale(1.04); }
.story-card .shot .pills {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  max-width: calc(100% - 20px);
}
.story-card .body { padding: 16px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.story-card h3 {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 17.5px;
  line-height: 1.28;
  margin: 0 0 9px;
  color: var(--navy-900);
}
.story-card:hover h3 { color: var(--blue-dark); }
.story-card .stand {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.story-card .meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.story-card .meta .dot { color: var(--rule-strong); }
.flag, .chip .flag, .shot .flag {
  display: inline-block;
  width: 17px;
  height: 12.75px;
  margin-right: 6px;
  vertical-align: -1px;
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
  object-fit: cover;
}

/* No-photo fallback */
.shot.no-photo {
  display: grid;
  place-items: center;
  background:
    radial-gradient(420px 220px at 70% 0%, rgba(43, 116, 212, 0.55), transparent 65%),
    var(--navy-800);
}
/* The badge stands in for the photograph. It is sized off the frame so it
   fills a card and a lead card alike, and kept clear of the pills below. */
.shot.no-photo .mark {
  width: auto;
  height: 66%;
  max-width: 64%;
  object-fit: contain;
  opacity: 0.9;
  transform: translateY(-6%);
}

/* The same badge in the small rail thumbnails, which have no pills over them. */
.side-story .thumb.no-photo {
  display: grid;
  place-items: center;
  background:
    radial-gradient(160px 90px at 70% 0%, rgba(43, 116, 212, 0.55), transparent 65%),
    var(--navy-800);
}
.side-story .thumb.no-photo .mark {
  width: auto;
  height: 74%;
  max-width: 74%;
  object-fit: contain;
  opacity: 0.9;
}

/* Lead story */
.lead-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  margin-bottom: 26px;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.lead-card:hover { box-shadow: var(--shadow-md); border-color: var(--rule-strong); }
.lead-card .shot { aspect-ratio: 16 / 10; overflow: hidden; position: relative; background: var(--navy-800); }
.lead-card .shot > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transition: transform 0.4s ease; }
.lead-card:hover .shot > img { transform: scale(1.03); }
.lead-card .body { padding: 32px 36px; display: flex; flex-direction: column; justify-content: center; }
.lead-card .pills { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.lead-card h2 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(25px, 3.3vw, 38px);
  line-height: 1.03;
  margin: 0 0 14px;
  color: var(--navy-900);
}
.lead-card:hover h2 { color: var(--navy-700); }
.lead-card .stand { font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 18px; }
.lead-card .meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-faint);
}
@media (max-width: 860px) {
  .lead-card { grid-template-columns: 1fr; }
  .lead-card .body { padding: 24px 22px 28px; }
}

/* -------------------------------------------------------------
   Filter bar
   ------------------------------------------------------------- */
.filter-bar {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
}
.filter-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 860px) { .filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .filter-row { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.field select,
.field input[type="search"] {
  font-family: var(--ui);
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 11px 12px;
  width: 100%;
  appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%234a5769' stroke-width='1.8' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 34px;
  cursor: pointer;
}
.field select:hover,
.field input[type="search"]:hover { border-color: var(--navy-700); }
.field select:focus,
.field input[type="search"]:focus { border-color: var(--navy-900); background-color: #fff; }

/* ---- compact filter bar, home page only ---------------------
   The same four controls as the archive, on one line and without
   the stacked labels. Dropping the labels is what keeps it slim,
   so each control says what it filters in its own first option. */
.home-filter-band { background: #fff; border-bottom: 1px solid var(--rule); }

.home-filter {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 14px;
  padding: 14px 0 0;
  /* Stretch, so the school field matches the height of the two selects. */
  align-items: stretch;
}

/* Each filter is a label stacked over its control, so the three line up. */
.filter-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.filter-field > .typeahead { flex: 1; }
.filter-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.filter-label svg { width: 15px; height: 15px; flex: none; color: var(--navy-700); }

.home-filter select,
.home-filter input[type="search"] {
  font-family: var(--ui);
  font-size: 14px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 9px 11px;
  width: 100%;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  /* A select centres its own text and a text input does not, which left the
     school field reading a couple of pixels low against the two dropdowns. */
  line-height: 1.1;
  align-items: center;
}

.home-filter select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%234a5769' stroke-width='1.8' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 11px;
  padding-right: 30px;
  cursor: pointer;
}

.home-filter select:hover,
.home-filter input[type="search"]:hover { border-color: var(--navy-700); }
.home-filter select:focus,
.home-filter input[type="search"]:focus { border-color: var(--navy-900); background-color: #fff; }
/* School type-ahead. The list of schools runs to thousands, so the field
   takes what you type and offers the matches underneath. */
.typeahead { position: relative; min-width: 0; display: flex; }
.typeahead input[type="search"] { width: 100%; height: 100%; }
.typeahead input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

.typeahead-list {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(16, 28, 48, 0.16);
  max-height: 272px;
  overflow-y: auto;
}
.typeahead-list li {
  padding: 8px 10px;
  font-family: var(--ui);
  font-size: 14px;
  color: var(--ink);
  border-radius: 2px;
  cursor: pointer;
}
.typeahead-list li.is-active,
.typeahead-list li:hover { background: var(--paper); }
.typeahead-list li.is-empty { color: var(--ink-faint); cursor: default; }
.typeahead-list li.is-empty:hover { background: none; }

/* The filters that are switched on, each one removable on its own. */
.filter-active {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0 14px;
}
.filter-active:not([hidden]) + * { margin-top: 0; }

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
}
.filter-chip .k {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.filter-chip .x { font-size: 15px; line-height: 1; color: var(--ink-faint); }
.filter-chip:hover { border-color: var(--navy-700); }
.filter-chip:hover .x { color: var(--ink); }
.filter-chip.is-clear { background: #fff; color: var(--blue); }

.no-results {
  margin: 8px 0 0;
  color: var(--ink-faint);
  font-size: 15px;
}

.more-wrap { display: flex; justify-content: center; margin-top: 26px; }
.more-wrap .btn[hidden] { display: none; }

@media (max-width: 760px) {
  .home-filter { grid-template-columns: 1fr; gap: 8px; }
}

.filter-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  border-top: 1px solid var(--rule);
  padding-top: 13px;
  font-size: 14px;
  color: var(--ink-soft);
}
.filter-status strong { color: var(--navy-900); }
.reset {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  background: #fff;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--ink-soft);
  padding: 9px 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.reset:hover { border-color: var(--blue); color: var(--blue); }

.active-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-900);
  cursor: pointer;
}
.chip-filter .chip-k {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.chip-filter .chip-x { font-size: 16px; line-height: 1; color: var(--ink-soft); }
.chip-filter:hover { border-color: var(--blue); background: #fff; }
.chip-filter:hover .chip-x { color: var(--blue); }

/* Quick filter pills */
.quick-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.quick {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  background: #fff;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 8px 15px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.quick:hover { border-color: var(--navy-700); color: var(--navy-900); }
.quick.is-active { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

.empty {
  background: #fff;
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  padding: 54px 24px;
  text-align: center;
  color: var(--ink-soft);
}
.empty strong { display: block; color: var(--navy-900); font-size: 18px; margin-bottom: 6px; }

.load-more { display: flex; justify-content: center; margin-top: 34px; }

/* -------------------------------------------------------------
   Explore tiles (by continent / sport)
   ------------------------------------------------------------- */
.explore-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 860px) { .explore-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .explore-grid { grid-template-columns: 1fr; } }

.explore-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-left-color 0.15s ease;
}
.explore-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-left-color: var(--gold); }
.explore-tile .t {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 16px;
  color: var(--navy-900);
  display: flex;
  align-items: center;
  gap: 9px;
}
.explore-tile .c {
  font-family: var(--display);
  font-size: 22px;
  color: var(--blue);
  line-height: 1;
}

/* -------------------------------------------------------------
   Article page
   ------------------------------------------------------------- */
.article-head { background: var(--blue); color: #fff; padding: 40px 0 0; position: relative; overflow: hidden; }
.article-head::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 340px at 82% -20%, rgba(7, 18, 38, 0.42), transparent 62%);
}
/* The chips swap with the banner: the sport takes the navy the banner gave up.
   On the story banner they become pills, each led by a white disc carrying
   either the sport's mark or the country's flag cropped to a circle. */
.article-head .chip-sport { background: var(--navy-900); }
.article-head .chip-place { background: rgba(7, 18, 38, 0.42); }
/* Three chips have to fit one line in a card a third of the grid wide,
   so a card's pills run tighter than the banner's. */
.story-card .shot .pills { gap: 5px; }
.story-card .shot .pills .chip {
  font-size: 10px;
  letter-spacing: 0.05em;
  gap: 5px;
  padding: 2px 9px 2px 2px;
}
.story-card .shot .pills .chip-ic { width: 17px; height: 17px; }
.story-card .shot .pills .chip-ic svg { width: 10px; height: 10px; }

/* The pill treatment is shared by the story banner and every card. */
.pills .chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 12px 3px 3px;
  border-radius: 999px;
  line-height: 1;
  text-decoration: none;
  /* the cards sit these on a photograph, so a hairline of white
     keeps the pill edge from dissolving into whatever is behind */
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.65);
}
.pills .chip-ic {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.pills .chip-ic svg { width: 12px; height: 12px; color: var(--navy-800); }
.pills .chip-ic .flag-round {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
/* The banner carries them larger, and they are links there. */
.article-head .pills .chip {
  gap: 9px;
  padding: 4px 16px 4px 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: border-color 0.15s, transform 0.15s;
}
.article-head .pills .chip:hover { border-color: rgba(255, 255, 255, 0.65); transform: translateY(-1px); }
.article-head .pills .chip-ic { width: 26px; height: 26px; }
.article-head .pills .chip-ic svg { width: 15px; height: 15px; }
.article-head .wrap { position: relative; }
.article-head .inner { max-width: 830px; padding-bottom: 36px; }
.article-head .back {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Pure white is the only value that clears 4.5:1 on the blue banner, so the
     hierarchy here comes from size and letter-spacing, not from fading text out. */
  color: #fff;
  text-decoration: none;
  margin-bottom: 18px;
}
.article-head .back::before { content: "\2190  "; }
.article-head .back:hover { text-decoration: underline; }
.article-head .pills { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 15px; }
.article-head h1 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(29px, 4.4vw, 52px);
  line-height: 1.02;
  margin: 0 0 16px;
}
.article-head .standfirst {
  font-size: 18px;
  line-height: 1.6;
  color: #fff;
  margin: 0 0 18px;
  max-width: 62ch;
}
.article-head .byline {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 48px;
  padding: 40px 0 64px;
  align-items: start;
}
@media (max-width: 960px) { .article-layout { grid-template-columns: 1fr; gap: 36px; } }

.article-shot figure { margin: 0 0 28px; }
.article-shot .frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--navy-800);
}
.article-shot .frame > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.article-shot figcaption {
  font-size: 13px;
  color: var(--ink-faint);
  padding: 9px 2px 0;
  line-height: 1.5;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 12px;
}

.article-body p {
  font-size: 17.5px;
  line-height: 1.68;
  color: var(--ink);
  margin: 0 0 20px;
}
.article-body p:last-child { margin-bottom: 0; }

.source-box {
  margin-top: 30px;
  background: #fff;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.source-box .k {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.source-box a { color: var(--navy-700); font-weight: 600; }
.source-box a:hover { color: var(--blue); }
.source-box p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }

/* ---- World School Games promo -------------------------------
   One card, two slots: the rail above "More in this sport" on
   desktop, inline above the share box on mobile. Each event sets
   its own --wsg-bg and the --wsg-ink that reads on it. */
.wsg {
  margin-bottom: 26px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.wsg-link {
  display: block;
  text-decoration: none;
  background: var(--wsg-bg);
  color: var(--wsg-ink);
}
.wsg-flash {
  margin: 0;
  /* a white strip disappeared into the page, so the flash carries its
     own red rather than the event colour */
  background: #d0021b;
  color: #fff;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-align: center;
  padding: 8px 10px;
}
.wsg-shot { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--wsg-bg); }
.wsg-shot > img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  transition: transform 0.4s ease;
}
.wsg-link:hover .wsg-shot > img:first-child { transform: scale(1.04); }
.wsg-shot::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 56%;
  background: linear-gradient(to top, var(--wsg-bg) 6%, rgba(0, 0, 0, 0) 92%);
}
.wsg-mark {
  position: absolute;
  left: 14px;
  bottom: 11px;
  width: 52px;
  height: 52px;
  z-index: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 2px 7px rgba(0, 0, 0, 0.35);
}
.wsg-body { padding: 15px 18px 18px; }
.wsg-eyebrow {
  font-family: var(--ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wsg-ink);
  opacity: 0.9;
  margin: 0 0 7px;
}
.wsg-body h3 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 21px;
  line-height: 1.04;
  margin: 0 0 11px;
  color: var(--wsg-ink);
}
.wsg-where {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 9px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--wsg-ink);
}
.wsg-dates { font-weight: 700; }
.wsg-grades {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--wsg-ink);
  opacity: 0.82;
}
.wsg-cta {
  display: inline-block;
  background: var(--wsg-ink);
  color: var(--wsg-cta-ink);
  font-family: var(--ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 999px;
}
.wsg-link:hover .wsg-cta { filter: brightness(0.94); }

/* which slot is live */
.wsg-inline-slot { display: none; }
@media (max-width: 960px) {
  .wsg-rail-slot { display: none; }
  .wsg-inline-slot { display: block; margin: 26px 0 0; }
  .wsg-inline-slot .wsg-link { display: grid; grid-template-columns: 40% 1fr; align-items: stretch; }
  .wsg-inline-slot .wsg-flash { grid-column: 1 / -1; }
  .wsg-inline-slot .wsg-shot { aspect-ratio: auto; height: 100%; min-height: 150px; }
  .wsg-inline-slot .wsg-shot::after { inset: 0 auto 0 auto; width: 0; }
}
@media (max-width: 560px) {
  .wsg-inline-slot .wsg-link { grid-template-columns: 1fr; }
  .wsg-inline-slot .wsg-shot { aspect-ratio: 16 / 9; min-height: 0; }
  .wsg-inline-slot .wsg-shot::after { inset: auto 0 0 0; height: 56%; width: auto; }
}

/* ---- Twedex sports tours carousel ----------------------------
   Shown in place of the WSG card on stories whose sport has no
   World School Games event. Deliberately the same silhouette as
   .wsg - flash strip, 16:9 shot, body, pill - so the two read as
   siblings rather than as two different kinds of advert. Twedex
   navy throughout, since no single destination owns a colour. */
.tours {
  --tours-bg: #1b2166;
  --tours-ink: #ffffff;
  margin-bottom: 26px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--tours-bg);
  color: var(--tours-ink);
}
.tours-flash {
  margin: 0;
  background: #d0021b;
  color: #fff;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 8px 10px;
  line-height: 1.35;
}
/* All twelve slides share one grid cell, so the card is always as tall
   as the wordiest destination instead of resizing under the reader as
   they flick: the UAE lists eight sports and wraps to two lines, Germany
   lists one and wraps to none. */
.tours-window { position: relative; display: grid; }

/* One slide at a time. The hidden ones are visibility:hidden rather than
   display:none so they still hand the cell their height; that also keeps
   them out of the tab order and off the accessibility tree, and their
   lazy images stay unfetched because the src is swapped in at show. */
.tours-slide {
  grid-area: 1 / 1;
  visibility: hidden;
  text-decoration: none;
  color: inherit;
}
.tours-slide.is-on { visibility: visible; }

.tours-shot { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.tours-shot > img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.tours-slide:hover .tours-shot > img:first-child { transform: scale(1.04); }
.tours-shot::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 56%;
  background: linear-gradient(to top, var(--tours-bg) 6%, rgba(0, 0, 0, 0) 92%);
}
.tours-mark {
  position: absolute;
  left: 14px;
  bottom: 11px;
  width: 52px;
  height: 52px;
  z-index: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 2px 7px rgba(0, 0, 0, 0.35);
}
.tours-body { display: block; padding: 15px 18px 18px; }
.tours-eyebrow {
  display: block;
  font-family: var(--ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.9;
  margin: 0 0 7px;
}
.tours-name {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 21px;
  line-height: 1.04;
  margin: 0 0 9px;
}
.tours-sports {
  display: block;
  font-size: 12.5px;
  line-height: 1.5;
  opacity: 0.86;
  margin: 0 0 14px;
}
.tours-cta {
  display: inline-block;
  background: #fff;
  color: var(--tours-bg);
  font-family: var(--ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 999px;
}
.tours-slide:hover .tours-cta { filter: brightness(0.94); }

/* arrows sit on the photo, which is the only part tall enough for them */
.tours-arrow {
  position: absolute;
  top: calc(28.125% - 17px); /* half of the 16:9 shot */
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(7, 18, 38, 0.55);
  color: #fff;
  cursor: pointer;
  z-index: 2;
  transition: background 0.15s;
}
.tours-arrow:hover { background: rgba(7, 18, 38, 0.8); }
.tours-arrow svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.tours-prev { left: 8px; }
.tours-next { right: 8px; }

.tours-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 0 14px 14px;
}
.tours-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.34);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.tours-dot:hover { background: rgba(255, 255, 255, 0.6); }
.tours-dot.is-on { background: #fff; transform: scale(1.25); }

/* which slot is live - mirrors the .wsg rules above */
.tours-inline-slot { display: none; }
@media (max-width: 960px) {
  .tours-rail-slot { display: none; }
  .tours-inline-slot { display: block; margin: 26px 0 0; }
}

/* ---- Unite Teamwear advert ------------------------------------
   Runs in the same promo slot as the WSG card and the tours carousel,
   on UK and Middle East stories whose sport has no World School Games
   event, so it never displaces a WSG card.

   Same silhouette as its two siblings - flash strip, picture, body,
   pill - except the picture is a square that turns over, because the
   thing being advertised is a reversible shirt and one flat photo
   cannot show that. Three pictures on a two-sided card: the hidden
   face is loaded with the next one just before each turn. */
.unite {
  --unite-bg: #101114;
  --unite-ink: #ffffff;
  --unite-red: #e01219;
  margin-bottom: 26px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--unite-bg);
  color: var(--unite-ink);
}
/* The brand word carries the strip, on both promo cards. Archivo 800
   is requested alongside 700 for exactly this. */
.flash-brand { font-weight: 800; }

.unite-flash {
  margin: 0;
  background: var(--unite-red);
  color: #fff;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 8px 10px;
  line-height: 1.35;
}

/* the whole square is the control, so the flip is found by clicking
   the shirt rather than by hunting for a button */
.unite-stage {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  margin: 0;
  padding: 0;
  border: 0;
  background: #f2f1ef;
  color: inherit;
  font: inherit;
  cursor: pointer;
  perspective: 1200px;
}
.unite-flipper {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.62s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.unite-flipper.is-turned { transform: rotateY(180deg); }
.unite-face {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.unite-face-b { transform: rotateY(180deg); }
.unite-face img { display: block; width: 100%; height: 100%; object-fit: cover; }

.unite-caption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 17, 20, 0.74);
  color: #fff;
  font-family: var(--ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  pointer-events: none;
}
.unite-caption svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.unite-stage:hover .unite-caption { background: var(--unite-red); }

/* The mark sits opposite the caption and changes with the picture
   behind it - black on the two studio shots, white on the team photo.
   Outside the flipper, so it holds still while the card turns. */
.unite-mark {
  display: block;
  height: 34px;
  width: auto;
  margin: 0 0 11px;
}
.unite-stage:focus-visible { outline: 3px solid var(--unite-red); outline-offset: -3px; }

.unite-body { display: block; padding: 15px 18px 18px; }
.unite-eyebrow {
  display: block;
  font-family: var(--ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.9;
  margin: 0 0 7px;
}
.unite-link { display: block; text-decoration: none; color: inherit; }
.unite-name {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 21px;
  line-height: 1.04;
  margin: 0 0 9px;
}
.unite-copy {
  display: block;
  font-size: 12.5px;
  line-height: 1.5;
  opacity: 0.86;
  margin: 0 0 14px;
}
.unite-cta {
  display: inline-block;
  background: #fff;
  color: var(--unite-bg);
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 999px;
}
.unite-link:hover .unite-cta { background: var(--unite-red); color: #fff; }

.unite-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 0 14px 14px;
}
.unite-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.34);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.unite-dot:hover { background: rgba(255, 255, 255, 0.6); }
.unite-dot.is-on { background: #fff; transform: scale(1.25); }

/* a turning card is exactly the motion this asks to be spared */
@media (prefers-reduced-motion: reduce) {
  .unite-flipper { transition: none; }
}

/* which slot is live - mirrors the .wsg rules above */
.unite-inline-slot { display: none; }
@media (max-width: 960px) {
  .unite-rail-slot { display: none; }
  .unite-inline-slot { display: block; margin: 26px 0 0; }
}

/* ---- the International events filter and chip ----------------
   A second dimension, not a country: these stories keep the country
   they are focused on and carry this as well. */
.chip-intl { text-decoration: none; }

/* A prepared block under the article - the standings table brings its
   own scoped styling, so this only has to give it room. */
.article-embed { margin: 26px 0 0; }
.article-embed > * { max-width: 100%; }

/* ---- share this story --------------------------------------- */
.share-box {
  margin-top: 28px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 20px 22px 22px;
}
.share-box h2 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 19px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--navy-900);
  margin: 0 0 14px;
}
.share-row { display: flex; flex-wrap: wrap; gap: 9px; }
.share-btn {
  font-family: var(--ui);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--rule-strong);
  background: #fff;
  color: var(--navy-900);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.share-btn:hover { border-color: var(--navy-800); }
.share-btn.is-primary { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.share-btn.is-primary:hover { background: var(--navy-700); border-color: var(--navy-700); }
.share-btn.is-done { border-color: var(--blue); color: var(--blue); }
@media (max-width: 560px) {
  .share-box { padding: 16px 16px 18px; }
  .share-btn { padding: 10px 14px; font-size: 13px; }
}

.article-tags { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tag {
  font-size: 12.5px;
  font-weight: 600;
  background: #fff;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 6px 13px;
  color: var(--ink-soft);
  text-decoration: none;
}
.tag:hover { border-color: var(--blue); color: var(--blue); }

.rail { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); padding: 22px; }
.rail + .rail { margin-top: 20px; }
.rail h2 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 19px;
  line-height: 1;
  margin: 0 0 16px;
  color: var(--navy-900);
  border-bottom: 2px solid var(--navy-800);
  padding-bottom: 10px;
}
.side-list { display: flex; flex-direction: column; }
.side-story {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 13px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
}
.side-story:first-child { padding-top: 0; }
.side-story:last-child { border-bottom: 0; padding-bottom: 0; }
.side-story .thumb { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--navy-800); }
.side-story .thumb > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.side-story .cat {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  display: block;
  margin-bottom: 4px;
}
.side-story .t { font-size: 14.5px; font-weight: 600; line-height: 1.33; color: var(--navy-900); }
.side-story:hover .t { color: var(--blue-dark); }

/* -------------------------------------------------------------
   Videos
   ------------------------------------------------------------- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}
@media (max-width: 820px) { .video-grid { grid-template-columns: 1fr; } }

.video-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.video-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-card .body { padding: 20px 22px 24px; }
.video-card h3 {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.28;
  margin: 0 0 9px;
  color: var(--navy-900);
}
.video-card p { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.video-card .meta {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint);
}

.video-feature {
  background: var(--navy-900);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.video-feature::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 400px at 12% -10%, rgba(43, 116, 212, 0.45), transparent 62%);
}
.video-feature .wrap {
  position: relative;
  padding: 56px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 44px;
  align-items: center;
}
@media (max-width: 900px) { .video-feature .wrap { grid-template-columns: 1fr; gap: 30px; } }
.video-feature h2 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.02;
  margin: 0 0 14px;
}
.video-feature p { font-size: 16.5px; line-height: 1.62; color: rgba(255, 255, 255, 0.84); margin: 0 0 22px; }
.video-feature .eyebrow { color: var(--gold); }

/* -------------------------------------------------------------
   Newsletter / CTA bands
   ------------------------------------------------------------- */
.cta-band {
  background: var(--navy-800);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(800px 340px at 88% 120%, rgba(232, 178, 60, 0.22), transparent 60%);
}
.cta-band .wrap {
  position: relative;
  padding: 50px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
@media (max-width: 860px) { .cta-band .wrap { grid-template-columns: 1fr; gap: 26px; } }
.cta-band h2 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.03;
  margin: 0 0 12px;
}
.cta-band p { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.82); max-width: 50ch; }
.cta-band .eyebrow { color: var(--gold); }

.signup { display: flex; gap: 10px; flex-wrap: wrap; }
.signup input {
  flex: 1 1 220px;
  font-family: var(--ui);
  font-size: 15px;
  padding: 14px 15px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-radius: var(--radius);
  min-width: 0;
}
.signup input::placeholder { color: rgba(255, 255, 255, 0.55); }
.signup input:focus { border-color: var(--gold); background: rgba(255, 255, 255, 0.14); }
.signup .btn { flex: 0 0 auto; }
.signup-note { margin-top: 11px; font-size: 13px; color: rgba(255, 255, 255, 0.58); }

/* -------------------------------------------------------------
   Routes / about blocks
   ------------------------------------------------------------- */
.routes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 860px) { .routes { grid-template-columns: 1fr; } }
.route {
  background: #fff;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--blue);
  border-radius: var(--radius);
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
}
.route:nth-child(2) { border-top-color: var(--gold); }
.route:nth-child(3) { border-top-color: var(--navy-700); }
.route h3 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 21px;
  line-height: 1.05;
  margin: 0 0 11px;
  color: var(--navy-900);
}
.route p { margin: 0 0 14px; font-size: 15px; line-height: 1.62; color: var(--ink-soft); }
.route ul { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.route ul li { position: relative; padding-left: 20px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; }
.route ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 7px; height: 7px;
  background: var(--blue);
  border-radius: 50%;
}
.route .btn { margin-top: auto; align-self: flex-start; }

.prose { max-width: 70ch; }
.prose h2 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.05;
  margin: 36px 0 14px;
  color: var(--navy-900);
}
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: 16.5px; line-height: 1.68; color: var(--ink); margin: 0 0 18px; }
.prose ul { padding-left: 20px; margin: 0 0 18px; }
.prose li { font-size: 16.5px; line-height: 1.66; margin-bottom: 8px; }
.prose a { color: var(--navy-700); font-weight: 600; }
.prose a:hover { color: var(--blue); }

/* -------------------------------------------------------------
   Footer
   ------------------------------------------------------------- */
.site-footer {
  background: var(--navy-900);
  color: rgba(255, 255, 255, 0.68);
  padding: 50px 0 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 36px;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; text-decoration: none; }
.footer-brand img {
  height: 52px;
  width: auto;
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.9))
          drop-shadow(0 0 3px rgba(255, 255, 255, 0.8))
          drop-shadow(0 0 7px rgba(255, 255, 255, 0.5));
}
.footer-brand .brand-name { font-size: 21px; }
.site-footer p { font-size: 15px; line-height: 1.62; margin: 0; max-width: 42ch; }
.site-footer h3 {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 14px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }

/* the accounts, under the masthead rather than in the WSSN list */
.site-footer ul.footer-social {
  flex-direction: row;
  gap: 10px;
  margin-top: 16px;
}
/* Outranks .site-footer ul a:hover, which is (0,2,2) and would
   otherwise paint the icon white on a white disc. */
.site-footer ul.footer-social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.26);
  color: rgba(255, 255, 255, 0.82);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.site-footer ul.footer-social a:hover,
.site-footer ul.footer-social a:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--navy-900);
}
.footer-social svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.footer-social svg .ink { fill: currentColor; stroke: none; }
.site-footer ul a { text-decoration: none; font-size: 15px; }
.site-footer ul a:hover { color: #fff; }
.site-footer .legal {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.45);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* -------------------------------------------------------------
   Supporter line - a quiet credit, not a co-brand
   ------------------------------------------------------------- */
.supporter {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 26px 0;
  text-align: center;
}
.supporter .eyebrow { color: var(--ink-faint); margin-bottom: 8px; }
.supporter p:last-child {
  margin: 0;
  font-size: 16.5px;
  color: var(--ink-soft);
}
.supporter strong { color: var(--navy-900); font-weight: 700; }

/* -------------------------------------------------------------
   Submit form (Netlify)
   ------------------------------------------------------------- */
.submit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 44px;
  align-items: start;
}
@media (max-width: 900px) { .submit-layout { grid-template-columns: 1fr; gap: 30px; } }

.form-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--blue);
  border-radius: var(--radius);
  padding: 26px 26px 28px;
  box-shadow: var(--shadow-sm);
}
.site-form { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

.site-form .field > span {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.site-form .req { color: var(--blue); font-style: normal; }
.site-form input,
.site-form textarea {
  font-family: var(--ui);
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 11px 12px;
  width: 100%;
}
.site-form textarea { resize: vertical; line-height: 1.55; }
.site-form input::placeholder,
.site-form textarea::placeholder { color: var(--ink-faint); }
.site-form input:hover,
.site-form textarea:hover { border-color: var(--navy-700); }
.site-form input:focus,
.site-form textarea:focus { border-color: var(--navy-900); background: #fff; }
.site-form input[type="file"] { padding: 9px 10px; font-size: 13.5px; }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.check input { width: auto; margin-top: 3px; flex: none; }
.site-form .btn { align-self: flex-start; border: 0; }

/* Netlify honeypot - hidden from people, visible to bots. */
.hp { position: absolute; left: -9999px; }

/* Article lead panel when no photograph is available */
.article-shot .frame-blank {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background:
    radial-gradient(620px 300px at 72% 0%, rgba(43, 116, 212, 0.5), transparent 68%),
    var(--navy-800);
}
.article-shot .frame-blank .mark { width: 92px; height: auto; opacity: 0.9; }
.article-shot .frame-blank .where {
  display: flex;
  align-items: center;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}