/* ==========================================================================
   MEDIA: LIVE (/live.html) AND NEWS (/news.html, /news/<slug>.html)

   Two pages, one band file: they share the card and the frame, and splitting
   them would mean two sheets for one small set of components.
   ========================================================================== */
.is-live .pageaura{--pa-mul: 0.32;}
.is-news .pageaura{--pa-mul: 0.26;}

/* ---- Shared hero -------------------------------------------------------- */
.lv-hero, .nw-hero{padding: clamp(20px, 4vw, 48px) 0 clamp(20px, 3vw, 40px);}
.lv-hero__title, .nw-hero__title{margin: 12px 0 0;
  font-family: var(--display); font-weight: 300;
  font-size: clamp(48px, 8vw, 116px); line-height: 0.9; letter-spacing: -0.045em;
  color: var(--fg);}
.lv-hero__lede, .nw-hero__lede{margin: 20px 0 0; max-width: 58ch;
  font-size: clamp(15px, 1.4vw, 18px); line-height: 1.68; color: var(--ink-2);}
.lv-hero__btns{display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(20px, 3vw, 28px) 0 0;}

/* ---- Live: the player frame --------------------------------------------- */
.lv-frame{margin-top: clamp(18px, 2.4vw, 26px);
  border-radius: 24px; border: 1px solid rgba(var(--volt-rgb), 0.28);
  background: linear-gradient(158deg, rgba(var(--volt-rgb), 0.1), rgba(var(--sink), 0.6) 70%);
  /* 16:9, the shape a stream will actually be, so the page does not jump
     when a player replaces this panel. */
  aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden;}
.lv-frame__inner{max-width: 62ch; padding: clamp(22px, 3.4vw, 46px); text-align: center;}
.lv-frame__crest{width: clamp(56px, 7vw, 92px); height: auto; margin: 0 auto; opacity: 0.9;}
.lv-frame__k{margin-top: 16px; font-family: var(--ui); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--volt-text);}
.lv-frame__t{margin-top: 10px;
  font-family: var(--display); font-weight: 400; font-size: clamp(23px, 3.2vw, 36px);
  line-height: 1.06; letter-spacing: -0.032em; color: var(--fg);}
.lv-frame__b{margin: 14px auto 0; max-width: 54ch;
  font-size: 14.5px; line-height: 1.7; color: var(--ink-2);}
.lv-frame__btns{display: flex; justify-content: center; margin-top: 20px;}
@media (max-width: 720px){
  .lv-frame{aspect-ratio: auto;}
}

/* ---- Live: next fixture -------------------------------------------------- */
.lv-next{margin-top: 14px; padding: 20px 22px; border-radius: 18px;
  border: 1px solid var(--line-d); background: rgba(var(--lift), 0.03); text-align: center;}
.lv-next__k{font-family: var(--ui); font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);}
.lv-next__row{display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px; margin-top: 12px;}
.lv-next__side{display: flex; align-items: center; gap: 11px;
  font-family: var(--display); font-weight: 500; font-size: clamp(15px, 1.8vw, 19px);
  letter-spacing: -0.018em; color: var(--fg);}
.lv-next__v{font-family: var(--ui); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);}
.lv-next__meta{margin-top: 10px; font-family: var(--ui); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3);}
.lv-badge{flex: 0 0 auto; width: 34px; height: 34px; min-width: 34px; max-width: 34px;
  padding: 5px; border-radius: 50%; object-fit: contain;
  background: rgba(var(--lift), 0.06); border: 1px solid var(--line-d);}
.lv-badge.is-us{padding: 4px;}

/* ---- Live: replays ------------------------------------------------------- */
.lv-grid{list-style: none; margin: clamp(18px, 2.4vw, 26px) 0 0; padding: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));}
.lv-card__link{display: grid; text-decoration: none; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line-d); background: var(--slab);
  transition: border-color 0.25s, transform 0.3s var(--ease-out-expo);}
.lv-card__link:hover{border-color: rgba(var(--volt-rgb), 0.34); transform: translateY(-2px);}
.lv-card__thumb img:not(.lv-card__crest){width: 100%; height: auto; display: block; aspect-ratio: 16/9; object-fit: cover;}
.lv-card__body{display: grid; gap: 4px; padding: 16px 18px;}
.lv-card__body b{font-family: var(--display); font-weight: 500; font-size: 15.5px;
  letter-spacing: -0.016em; color: var(--fg);}
.lv-card__body span{font-family: var(--ui); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3);}

.lv-empty{margin-top: clamp(18px, 2.4vw, 26px); padding: clamp(24px, 3.4vw, 40px);
  border-radius: 22px; border: 1px dashed rgba(var(--volt-rgb), 0.3);
  background: rgba(var(--volt-rgb), 0.04);}
.lv-empty__t{font-family: var(--display); font-weight: 400; font-size: clamp(21px, 2.6vw, 28px);
  letter-spacing: -0.028em; color: var(--fg);}
.lv-empty__b{margin-top: 12px; max-width: 64ch; font-size: 14.5px; line-height: 1.7; color: var(--ink-2);}
.lv-empty__btns{display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px;}

/* ---- News: the feed ------------------------------------------------------ */
.nw-grid{list-style: none; margin: clamp(18px, 2.4vw, 26px) 0 0; padding: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));}
/* The most recent piece runs full width at the top of the feed. */
.nw-card.is-lead{grid-column: 1 / -1;}
.nw-card.is-lead .nw-card__link{grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;}
.nw-card.is-lead .nw-card__top{aspect-ratio: auto; min-height: 260px;}
.nw-card.is-lead .nw-card__title{font-size: clamp(22px, 2.7vw, 32px);}
.nw-card.is-lead .nw-card__body{padding: clamp(22px, 2.8vw, 34px);}
@media (max-width: 760px){
  .nw-card.is-lead .nw-card__link{grid-template-columns: 1fr;}
  .nw-card.is-lead .nw-card__top{min-height: 0;}
}

.nw-card__link{display: grid; height: 100%; text-decoration: none;
  border-radius: 20px; overflow: hidden;
  border: 1px solid var(--line-d); background: var(--slab);
  transition: border-color 0.25s, transform 0.3s var(--ease-out-expo);}
.nw-card__link:hover{border-color: rgba(var(--volt-rgb), 0.34); transform: translateY(-3px);}
.nw-card__link:focus-visible{outline: 2px solid var(--volt); outline-offset: 3px;}
/* The crest panel is the deliberate fallback, not a missing image: it is
   composed, captioned and dated, so a coverless article still reads as
   finished rather than as a hole in the grid. */
.nw-card__top{position: relative; display: grid; place-items: center;
  aspect-ratio: 16 / 10; overflow: hidden;
  background: linear-gradient(168deg, rgba(var(--volt-rgb), 0.13), rgba(var(--sink), 0.66) 72%);}
.nw-card__img{width: 100%; height: 100%; object-fit: cover;}
.nw-card__crest{width: clamp(52px, 6vw, 76px); height: auto; opacity: 0.9;}
.nw-card__cat{position: absolute; top: 14px; left: 16px;
  font-family: var(--ui); font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-on-brand);
  padding: 5px 11px; border-radius: var(--pillr); background: var(--volt);}
.nw-card__date{position: absolute; bottom: 14px; left: 16px;
  font-family: var(--ui); font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2);}
.nw-card__body{display: grid; align-content: start; gap: 8px; padding: 20px;}
.nw-card__title{font-family: var(--display); font-weight: 500; font-size: 17.5px;
  line-height: 1.2; letter-spacing: -0.022em; color: var(--fg);}
.nw-card__link:hover .nw-card__title{text-decoration: underline; text-underline-offset: 3px;}
.nw-card__lede{font-size: 14px; line-height: 1.66; color: var(--ink-2);}
.nw-card__meta{font-family: var(--ui); font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);}
html.js .nw-card[hidden]{display: none;}
.nw-empty{font-size: 15px; color: var(--ink-2);}

/* ---- News: one article ---------------------------------------------------- */
.nw-art__title{margin: 12px 0 0;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(30px, 4.6vw, 54px); line-height: 1.04; letter-spacing: -0.032em;
  color: var(--fg);}
.nw-art__meta{margin-top: 16px; font-family: var(--ui); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);}
.nw-art__back{margin-top: clamp(26px, 3.4vw, 42px);
  padding-top: 20px; border-top: 1px solid var(--line-d);}
.nw-art__back a{font-family: var(--ui); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--volt-text);
  text-decoration: none;}
.nw-art__back a:hover{text-decoration: underline; text-underline-offset: 4px;}

@media (prefers-reduced-motion: reduce){
  .lv-card__link, .nw-card__link{transition: none;}
}

/* A match report in the feed leads with its scoreline rather than the crest:
   the result IS the headline, and it tells the two card kinds apart at a
   glance without needing a second colour. */
.nw-card__score{display: grid; justify-items: center; gap: 8px; text-align: center; padding: 0 16px;}
.nw-card__score b{font-family: var(--display); font-weight: 500;
  font-size: clamp(30px, 4vw, 46px); line-height: 1; letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums; color: var(--fg);}
.nw-card__score i{font-style: normal; font-family: var(--ui); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3);}
.nw-card.is-report .nw-card__top{
  background: linear-gradient(168deg, rgba(var(--lift), 0.05), rgba(var(--sink), 0.62) 72%);}

.is-videos .pageaura{--pa-mul: 0.3;}

/* ---- Videos: where the rest of it lives ---------------------------------- */
.vd-else__list{list-style: none; margin: clamp(18px, 2.4vw, 26px) 0 0; padding: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));}
.vd-else__card{padding: clamp(22px, 2.8vw, 32px); border-radius: 20px;
  border: 1px solid var(--line-d); background: var(--slab);}
.vd-else__k{font-family: var(--ui); font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);}
.vd-else__t{margin-top: 10px;
  font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.8vw, 30px);
  letter-spacing: -0.03em; color: var(--fg);}
.vd-else__b{margin-top: 12px; max-width: 46ch; font-size: 14.5px; line-height: 1.68; color: var(--ink-2);}
.vd-else__go{margin-top: 16px;}
.vd-else__go a{font-family: var(--ui); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--volt-text); text-decoration: none;}
.vd-else__go a:hover{text-decoration: underline; text-underline-offset: 4px;}


/* ---- Video card thumbnail ------------------------------------------------
   Deliberately NOT the YouTube thumbnail. i.ytimg.com is not in the site's
   img-src, so a hotlinked still would have rendered as a broken image the
   moment a video was filed; and it would have handed Google a request from
   every visitor to this page before they pressed anything. The crest costs
   nothing, is already cached, and the card still links straight to YouTube. */
.lv-card__thumb{position: relative; display: grid; place-items: center;
  aspect-ratio: 16 / 9; overflow: hidden;
  background: linear-gradient(152deg, rgba(var(--volt-rgb), 0.18), rgba(var(--sink), 0.72) 72%);}
/* A viewport clamp, not a percentage: the thumb sizes itself from an
   aspect-ratio, so it has no definite height for a % to resolve against and
   the crest collapsed to a dot. */
.lv-card__thumb .lv-card__crest{width: auto; height: clamp(52px, 4.4vw, 76px);
  display: block; opacity: 0.92; aspect-ratio: auto; object-fit: contain;}
.lv-card__play{position: absolute; right: 14px; bottom: 14px; width: 42px; height: 42px;
  border-radius: 50%; background: var(--volt); box-shadow: 0 6px 22px rgba(var(--volt-rgb), 0.42);}
.lv-card__play::after{content: ''; position: absolute; left: 16px; top: 12px;
  border-style: solid; border-width: 9px 0 9px 13px;
  border-color: transparent transparent transparent var(--text-on-brand);}