/* ============================================================================
   NOAH W FOOTBALL 2.0
   Global shell, navigation and editorial design system.

   Loaded after css/styles.css on every public page. This file owns the site
   chrome (header, navigation, footer), the shared editorial components, and
   the desktop layout. css/styles.css keeps ownership of the transfer and
   World Cup components it already styles.

   The purple/pink gradient is a signature accent here, not a surface. It is
   used only on the brand mark, the active navigation indicator, primary
   calls to action and small highlight details.
   ========================================================================= */

/* ── 2.0 tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Layout */
  --nw-max:        1180px;
  --nw-gutter:     20px;
  --nw-gutter-lg:  40px;
  --nw-header-h:   64px;

  /* Spacing scale */
  --nw-1:  4px;
  --nw-2:  8px;
  --nw-3:  12px;
  --nw-4:  16px;
  --nw-5:  24px;
  --nw-6:  32px;
  --nw-7:  48px;
  --nw-8:  64px;

  /* Editorial surfaces — quieter than the 1.0 card set */
  --nw-surface:      #07070e;
  --nw-card:         #0e0e1a;
  --nw-card-raised:  #14142440;
  --nw-line:         #1e1e34;
  --nw-line-soft:    #17172a;

  /* Prediction states */
  --nw-exact:   #fbbf24;
  --nw-correct: #22c55e;
  --nw-missed:  #ef4444;
  --nw-pending: #64748b;

  /* Motion */
  --nw-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Layout primitives ──────────────────────────────────────────────────── */

.nw-container {
  width: 100%;
  max-width: var(--nw-max);
  margin-inline: auto;
  padding-inline: var(--nw-gutter);
}

/* The 1.0 shell reserved space for a floating desktop nav pill that 2.0
   replaces with a real header. Reclaim it. */
.nw-page .app-shell,
body.nw-page {
  padding-bottom: 0;
}

.nw-main {
  display: block;
  padding-bottom: var(--nw-7);
}

/* Visible to screen readers only. */
.nw-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;
}

/* The Transfers section keeps "There You Have It" as its own identity. */
.nw-transfers-tagline {
  font-family: var(--font-display);
  font-size: clamp(20px, 4vw, 28px);
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-top: 2px;
}

/* ── Skip link ──────────────────────────────────────────────────────────── */

.nw-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border-2);
  border-radius: 0 0 var(--r) 0;
  font-weight: 700;
}

.nw-skip:focus {
  left: 0;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.nw-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(7, 7, 14, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--nw-line);
}

/* Lifts off the page once the reader scrolls, so the header reads as a layer
   above the content rather than part of it. */
.nw-header.is-scrolled {
  border-bottom-color: var(--border-2);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.nw-header-inner {
  width: 100%;
  max-width: var(--nw-max);
  margin-inline: auto;
  padding: 10px var(--nw-gutter);
  display: flex;
  align-items: center;
  gap: var(--nw-4);
  min-height: var(--nw-header-h);
}

/* Brand */
.nw-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
  border-radius: var(--r);
}

.nw-brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--grad);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 3px 14px rgba(124, 58, 237, 0.35);
}

.nw-brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.nw-brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.nw-brand-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1.05;
  color: var(--text);
  white-space: nowrap;
}

.nw-brand-tagline {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-soft);
  white-space: nowrap;
}

/* Primary navigation — desktop only */
.nw-primary-nav {
  display: none;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.nw-primary-link {
  position: relative;
  padding: 10px 13px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-soft);
  text-decoration: none;
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: color 0.15s var(--nw-ease), background-color 0.15s var(--nw-ease);
}

.nw-primary-link:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.nw-primary-link.is-active {
  color: var(--text);
  font-weight: 700;
}

/* The gradient earns its place here: a 2px active indicator, nothing more. */
.nw-primary-link.is-active::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
}

/* Header actions */
.nw-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.nw-primary-nav + .nw-header-actions {
  margin-left: var(--nw-3);
}

.nw-icon-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--text-soft);
  text-decoration: none;
  border: 1px solid transparent;
  transition: color 0.15s var(--nw-ease), background-color 0.15s var(--nw-ease),
              border-color 0.15s var(--nw-ease);
}

.nw-icon-btn i {
  font-size: 21px;
}

.nw-icon-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--nw-line);
}

.nw-icon-btn.is-active {
  color: var(--pink);
}

/* ── Focus states ───────────────────────────────────────────────────────── */

.nw-header a:focus-visible,
.nw-header button:focus-visible,
.nw-bottom-nav a:focus-visible,
.nw-bottom-nav button:focus-visible,
.nw-more-sheet a:focus-visible,
.nw-more-sheet button:focus-visible,
.nw-footer a:focus-visible,
.nw-btn:focus-visible,
.nw-card-link:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}

/* ── Mobile bottom navigation ───────────────────────────────────────────── */

.nw-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(7, 7, 14, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--nw-line);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
}

.nw-bottom-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 7px 2px;
  min-height: 52px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-faint);
  border-radius: var(--r-sm);
  cursor: pointer;
  touch-action: manipulation;
  transition: color 0.15s var(--nw-ease);
}

.nw-bottom-link span {
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nw-bottom-link i {
  font-size: 22px;
  line-height: 1;
}

.nw-bottom-link.is-active {
  color: var(--text);
}

.nw-bottom-link.is-active i {
  color: var(--pink);
}

/* Clear the fixed bar wherever it is shown. */
@media (max-width: 1023px) {
  .nw-page .app-shell,
  body.nw-page {
    padding-bottom: 76px;
  }
}

/* ── "More" sheet ───────────────────────────────────────────────────────── */

.nw-more-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(2, 2, 6, 0.7);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.2s var(--nw-ease);
}

.nw-more-backdrop.is-open {
  opacity: 1;
}

.nw-more-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  background: var(--card);
  border-top: 1px solid var(--border-2);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 10px var(--nw-4) calc(var(--nw-4) + env(safe-area-inset-bottom, 0px));
  box-shadow: var(--shadow-lg);
  transform: translateY(100%);
  transition: transform 0.24s var(--nw-ease);
  max-height: 82vh;
  overflow-y: auto;
}

.nw-more-sheet.is-open {
  transform: translateY(0);
}

.nw-more-handle {
  width: 38px;
  height: 4px;
  border-radius: 4px;
  background: var(--border-2);
  margin: 0 auto var(--nw-4);
}

.nw-more-head {
  padding: 0 4px var(--nw-3);
  border-bottom: 1px solid var(--nw-line);
  margin-bottom: var(--nw-2);
}

.nw-more-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
}

.nw-more-sub {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-soft);
}

.nw-more-links {
  display: flex;
  flex-direction: column;
}

.nw-more-link {
  display: flex;
  align-items: center;
  gap: var(--nw-3);
  padding: 14px 4px;
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  border-bottom: 1px solid var(--nw-line-soft);
}

.nw-more-link:last-child {
  border-bottom: none;
}

.nw-more-link i:first-child {
  font-size: 20px;
  color: var(--text-soft);
  width: 24px;
  text-align: center;
}

.nw-more-link.is-active {
  color: var(--pink);
}

.nw-more-link.is-active i:first-child {
  color: var(--pink);
}

.nw-more-chevron {
  margin-left: auto;
  font-size: 16px;
  color: var(--text-faint);
}

.nw-more-close {
  width: 100%;
  margin-top: var(--nw-4);
  padding: 14px;
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  background: transparent;
  color: var(--text-soft);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.nw-more-close:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.nw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nw-2);
  padding: 12px 20px;
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s var(--nw-ease), box-shadow 0.15s var(--nw-ease),
              background-color 0.15s var(--nw-ease), border-color 0.15s var(--nw-ease);
}

.nw-btn i {
  font-size: 17px;
}

.nw-btn-primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.32);
}

.nw-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(124, 58, 237, 0.42);
}

.nw-btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-2);
}

.nw-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--pink);
}

/* ── Section furniture ──────────────────────────────────────────────────── */

.nw-section {
  margin-top: var(--nw-7);
}

.nw-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--nw-4);
  margin-bottom: var(--nw-4);
  flex-wrap: wrap;
}

.nw-section-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.nw-section-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--text);
  line-height: 1.1;
}

/* The curation line. This is where the site says, in its own words, that Noah
   chooses what he covers — it should never read as missing data. */
.nw-section-sub {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
}

.nw-section-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-soft);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: color 0.15s var(--nw-ease);
}

.nw-section-link:hover {
  color: var(--pink);
}

.nw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* ── Cards ──────────────────────────────────────────────────────────────── */

.nw-card {
  background: var(--nw-card);
  border: 1px solid var(--nw-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.nw-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s var(--nw-ease), transform 0.15s var(--nw-ease),
              background-color 0.15s var(--nw-ease);
}

.nw-card-link:hover {
  border-color: var(--border-2);
  background: var(--card-hover);
  transform: translateY(-2px);
}

/* ── Prediction pills ───────────────────────────────────────────────────── */

.nw-pred {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.nw-pred i {
  font-size: 13px;
}

.nw-pred-exact {
  color: var(--nw-exact);
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.35);
}

.nw-pred-correct {
  color: var(--nw-correct);
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.32);
}

.nw-pred-missed {
  color: var(--nw-missed);
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

.nw-pred-pending {
  color: #94a3b8;
  background: rgba(100, 116, 139, 0.12);
  border-color: rgba(100, 116, 139, 0.28);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.nw-footer {
  margin-top: var(--nw-8);
  border-top: 1px solid var(--nw-line);
  background: var(--bg);
}

.nw-footer-inner {
  width: 100%;
  max-width: var(--nw-max);
  margin-inline: auto;
  padding: var(--nw-7) var(--nw-gutter) var(--nw-6);
  display: grid;
  gap: var(--nw-6);
}

.nw-footer-mark {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--grad);
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: var(--nw-3);
}

.nw-footer-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nw-footer-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
}

.nw-footer-tagline {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-top: 2px;
}

.nw-footer-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nw-5);
}

.nw-footer-col {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.nw-footer-heading {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 2px;
}

.nw-footer-col a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-soft);
  text-decoration: none;
  transition: color 0.15s var(--nw-ease);
}

.nw-footer-col a:hover {
  color: var(--text);
}

.nw-footer-base {
  border-top: 1px solid var(--nw-line-soft);
}

.nw-footer-base p {
  width: 100%;
  max-width: var(--nw-max);
  margin-inline: auto;
  padding: var(--nw-4) var(--nw-gutter);
  font-size: 12px;
  color: var(--text-faint);
}

/* Footer must clear the fixed mobile bar. */
@media (max-width: 899px) {
  .nw-footer {
    margin-bottom: 0;
  }
}

/* ============================================================================
   HOMEPAGE
   ========================================================================= */

/* ── Hero ───────────────────────────────────────────────────────────────── */

.nw-hero {
  position: relative;
  border-bottom: 1px solid var(--nw-line);
  overflow: hidden;
}

/* Single restrained gradient wash, not a solid gradient block. */
.nw-hero::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 70%;
  height: 180%;
  background: radial-gradient(
    ellipse at center,
    rgba(124, 58, 237, 0.22) 0%,
    rgba(232, 64, 126, 0.09) 42%,
    transparent 70%
  );
  pointer-events: none;
}

.nw-hero-inner {
  position: relative;
  width: 100%;
  max-width: var(--nw-max);
  margin-inline: auto;
  padding: var(--nw-7) var(--nw-gutter) var(--nw-6);
}

.nw-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(124, 58, 237, 0.4);
  background: rgba(124, 58, 237, 0.1);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #c4b5fd;
  margin-bottom: var(--nw-4);
}

.nw-hero-title {
  font-family: var(--font-display);
  font-size: clamp(38px, 9vw, 68px);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: var(--text);
  max-width: 15ch;
}

.nw-hero-text {
  margin-top: var(--nw-4);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 54ch;
}

.nw-hero-actions {
  margin-top: var(--nw-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--nw-3);
}

/* ── Lead Take ──────────────────────────────────────────────────────────── */

.nw-lead-take {
  display: grid;
  gap: 0;
  border: 1px solid var(--nw-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--nw-card);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s var(--nw-ease);
}

.nw-lead-take:hover {
  border-color: var(--border-2);
}

.nw-lead-take-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
  overflow: hidden;
}

.nw-lead-take-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nw-lead-take-body {
  padding: var(--nw-5);
  display: flex;
  flex-direction: column;
  gap: var(--nw-3);
}

.nw-take-cat {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--grad);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.nw-lead-take-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.06;
  color: var(--text);
}

.nw-lead-take-stand {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 62ch;
}

.nw-byline {
  display: flex;
  align-items: center;
  gap: var(--nw-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-faint);
  flex-wrap: wrap;
}

.nw-byline-dot::before {
  content: "•";
  margin-right: var(--nw-2);
}

.nw-byline-author {
  color: var(--text-soft);
  font-weight: 700;
}

/* ── Match cards ────────────────────────────────────────────────────────── */

.nw-match-grid {
  display: grid;
  gap: var(--nw-3);
  grid-template-columns: 1fr;
}

.nw-match-card {
  display: flex;
  flex-direction: column;
  gap: var(--nw-3);
  padding: var(--nw-4);
  background: var(--nw-card);
  border: 1px solid var(--nw-line);
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s var(--nw-ease), transform 0.15s var(--nw-ease);
}

.nw-match-card:hover {
  border-color: var(--border-2);
  transform: translateY(-2px);
}

.nw-match-top {
  display: flex;
  align-items: center;
  gap: var(--nw-2);
  flex-wrap: wrap;
}

.nw-match-comp {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-soft);
  padding: 3px 8px;
  border: 1px solid var(--nw-line);
  border-radius: 999px;
}

.nw-match-when {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
  margin-left: auto;
}

.nw-match-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--nw-3);
}

.nw-match-team {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.15;
}

.nw-match-team.nw-away {
  text-align: right;
}

.nw-match-centre {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-faint);
  letter-spacing: 0.5px;
}

.nw-match-score {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: 1px;
}

/* Noah's call — the reason the card exists. */
.nw-match-pred {
  display: flex;
  align-items: center;
  gap: var(--nw-2);
  padding-top: var(--nw-3);
  border-top: 1px solid var(--nw-line-soft);
  flex-wrap: wrap;
}

.nw-match-pred-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-faint);
}

.nw-match-pred-value {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.4px;
}

.nw-match-pred .nw-pred {
  margin-left: auto;
}

.nw-match-take {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--pink);
}

/* ── Competition cards ──────────────────────────────────────────────────── */

.nw-comp-grid {
  display: grid;
  gap: var(--nw-3);
  grid-template-columns: 1fr;
}

.nw-comp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--nw-2);
  padding: var(--nw-5);
  min-height: 148px;
  background: var(--nw-card);
  border: 1px solid var(--nw-line);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color 0.15s var(--nw-ease), transform 0.15s var(--nw-ease);
}

.nw-comp-card:hover {
  border-color: var(--border-2);
  transform: translateY(-2px);
}

/* Each competition gets a thin accent edge rather than a coloured panel. */
.nw-comp-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--nw-comp-accent, var(--purple));
}

.nw-comp-name {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.05;
  color: var(--text);
}

.nw-comp-season {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-soft);
}

.nw-comp-status {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-faint);
}

.nw-comp-status.is-archive {
  color: var(--gold);
}

.nw-comp-summary {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

/* ── Take cards ─────────────────────────────────────────────────────────── */

.nw-take-grid {
  display: grid;
  gap: var(--nw-4);
  grid-template-columns: 1fr;
}

.nw-take-card {
  display: flex;
  flex-direction: column;
  background: var(--nw-card);
  border: 1px solid var(--nw-line);
  border-radius: var(--r);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s var(--nw-ease), transform 0.15s var(--nw-ease);
}

.nw-take-card:hover {
  border-color: var(--border-2);
  transform: translateY(-2px);
}

.nw-take-card-media {
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
  overflow: hidden;
}

.nw-take-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nw-take-card-body {
  padding: var(--nw-4);
  display: flex;
  flex-direction: column;
  gap: var(--nw-2);
  flex: 1;
}

.nw-take-card-cat {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--pink);
}

.nw-take-card-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.12;
  color: var(--text);
}

.nw-take-card-stand {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-soft);
}

.nw-take-card .nw-byline {
  margin-top: auto;
  padding-top: var(--nw-2);
}

/* ── Transfer strip on the homepage ─────────────────────────────────────── */

.nw-transfer-grid {
  display: grid;
  gap: var(--nw-3);
  grid-template-columns: 1fr;
}

.nw-transfer-card {
  display: grid;
  grid-template-columns: 1fr 72px;
  gap: var(--nw-3);
  align-items: center;
  padding: var(--nw-3) var(--nw-4);
  background: var(--nw-card);
  border: 1px solid var(--nw-line);
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s var(--nw-ease), transform 0.15s var(--nw-ease);
}

.nw-transfer-card:hover {
  border-color: var(--border-2);
  transform: translateY(-2px);
}

.nw-transfer-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.nw-transfer-head {
  display: flex;
  align-items: center;
  gap: var(--nw-2);
  flex-wrap: wrap;
}

.nw-transfer-player {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
}

.nw-transfer-route {
  font-size: 13px;
  color: var(--text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nw-transfer-route .nw-to {
  color: var(--text);
  font-weight: 600;
}

.nw-transfer-meta {
  display: flex;
  align-items: center;
  gap: var(--nw-3);
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-soft);
}

.nw-transfer-stars {
  color: var(--gold);
  letter-spacing: 1px;
  font-size: 13px;
}

.nw-transfer-lk {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
}

.nw-transfer-fee {
  font-weight: 700;
  color: var(--text);
}

.nw-transfer-verdict {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}

.nw-transfer-img {
  width: 72px;
  height: 72px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-2);
  flex-shrink: 0;
}

.nw-transfer-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Archive ────────────────────────────────────────────────────────────── */

/* An archived competition is finished, not dead. The flag reads as a stamp on
   a completed edition — gold, deliberate, and never greyed out. */
.nw-archive-flag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.1);
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

.nw-archive-flag i {
  font-size: 13px;
}

/* Compact variant for sitting inline within a page kicker. */
.nw-archive-flag.is-inline {
  padding: 3px 8px;
  font-size: 10px;
  letter-spacing: 0.8px;
  margin-right: 8px;
  vertical-align: middle;
}

.nw-archive-list {
  display: grid;
  gap: var(--nw-4);
  grid-template-columns: 1fr;
}

.nw-archive-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--nw-4);
  padding: var(--nw-5);
  background: var(--nw-card);
  border: 1px solid var(--nw-line);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color 0.15s var(--nw-ease), transform 0.15s var(--nw-ease);
}

.nw-archive-card:hover {
  border-color: var(--border-2);
  transform: translateY(-2px);
}

.nw-archive-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--nw-comp-accent, var(--gold));
}

.nw-archive-main {
  display: flex;
  flex-direction: column;
  gap: var(--nw-3);
  align-items: flex-start;
}

.nw-archive-name {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  color: var(--text);
}

.nw-archive-year {
  display: block;
  font-size: 0.55em;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-soft);
  margin-top: 4px;
}

.nw-archive-champion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--gold);
}

.nw-archive-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nw-5);
  padding-top: var(--nw-4);
  border-top: 1px solid var(--nw-line-soft);
}

.nw-archive-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nw-archive-stat-v {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  color: var(--text);
}

.nw-archive-stat.is-accent .nw-archive-stat-v {
  color: var(--gold);
}

.nw-archive-stat-l {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-faint);
}

.nw-archive-go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 800;
  color: var(--pink);
}

/* ── Empty states ───────────────────────────────────────────────────────── */

.nw-empty {
  padding: var(--nw-6) var(--nw-4);
  border: 1px dashed var(--nw-line);
  border-radius: var(--r);
  text-align: center;
  color: var(--text-soft);
  font-size: 14px;
}

/* ============================================================================
   RESPONSIVE
   ========================================================================= */

/* ── Tablet ─────────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .nw-match-grid,
  .nw-comp-grid,
  .nw-take-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nw-transfer-card {
    grid-template-columns: 1fr 84px;
  }

  .nw-transfer-img {
    width: 84px;
    height: 84px;
  }
}

/* ── Desktop ────────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  :root {
    --nw-gutter: var(--nw-gutter-lg);
  }

  /* Hide the 1.0 decorative status bar and legacy nav wherever they survive. */
  .status-bar,
  .bottom-nav {
    display: none !important;
  }

  .nw-section {
    margin-top: var(--nw-8);
  }

  .nw-hero-inner {
    padding: var(--nw-8) var(--nw-gutter) var(--nw-7);
  }

  /* Editorial two-column: lead story beside supporting content. */
  .nw-lead-take {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .nw-lead-take-media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 320px;
  }

  .nw-lead-take-body {
    padding: var(--nw-6);
    justify-content: center;
  }

  .nw-comp-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .nw-take-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .nw-match-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .nw-transfer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nw-footer-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: start;
  }

  .nw-footer-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: start;
  }
}

/* ── The header/bottom-bar handover ─────────────────────────────────────── */
/* The finished 2.0 navigation carries six sections — Home, Transfers, Premier
   League, Champions League, Noah's Take and Archive. Laid out in full beside
   the brand and the utility actions, that needs roughly 1024px before the
   labels start colliding, so the handover from the bottom bar to the header
   happens here rather than at the 900px layout breakpoint. Between 1024 and
   1200 the nav runs tighter to buy the room back. */

@media (min-width: 1024px) {
  /* The bottom bar is a phone pattern. Wide screens get the real header. */
  .nw-bottom-nav,
  .nw-more-sheet,
  .nw-more-backdrop {
    display: none !important;
  }

  .nw-primary-nav {
    display: flex;
  }

  .nw-header-actions {
    margin-left: var(--nw-3);
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .nw-primary-link {
    padding: 10px 9px;
    font-size: 13px;
  }

  .nw-primary-link.is-active::after {
    left: 9px;
    right: 9px;
  }

  /* The brand tagline is the first thing to go when space is tight — the
     name alone still identifies the site. */
  .nw-brand-tagline {
    display: none;
  }

  .nw-brand-name {
    font-size: 18px;
  }
}

@media (min-width: 1100px) {
  .nw-match-grid.nw-match-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nw-more-sheet,
  .nw-more-backdrop,
  .nw-card-link,
  .nw-match-card,
  .nw-comp-card,
  .nw-take-card,
  .nw-transfer-card,
  .nw-btn {
    transition: none;
  }

  .nw-card-link:hover,
  .nw-match-card:hover,
  .nw-comp-card:hover,
  .nw-take-card:hover,
  .nw-transfer-card:hover,
  .nw-btn-primary:hover {
    transform: none;
  }
}

/* ============================================================================
   COMPETITION HUB (Phase 4)
   Shared by the Premier League, the Champions League and any future season.
   ========================================================================= */

/* ── Masthead ───────────────────────────────────────────────────────────── */

.nw-comp-hero {
  position: relative;
  border-bottom: 1px solid var(--nw-line);
  overflow: hidden;
}

/* The competition's own accent, used as a wash rather than a fill. */
.nw-comp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--nw-comp-accent, #7c3aed) 16%, transparent) 0%,
    transparent 55%
  );
  pointer-events: none;
}

.nw-comp-hero-inner {
  position: relative;
  width: 100%;
  max-width: var(--nw-max);
  margin-inline: auto;
  padding: var(--nw-6) var(--nw-gutter) var(--nw-5);
}

.nw-comp-hero-kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--nw-comp-accent, var(--purple));
  margin-bottom: 6px;
}

.nw-comp-hero-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 7vw, 58px);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: var(--text);
}

.nw-comp-hero-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--nw-3);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-soft);
}

.nw-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nw-correct);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.nw-comp-hero-record {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: var(--nw-4);
  font-size: 12px;
  color: var(--text-soft);
}

.nw-comp-hero-record strong {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  color: var(--text);
  margin-right: 4px;
}

.nw-comp-hero-record .is-accent strong {
  color: var(--gold);
}

/* ── Section nav ────────────────────────────────────────────────────────── */

.nw-hub-nav {
  position: sticky;
  top: var(--nw-header-h);
  z-index: 30;
  background: rgba(7, 7, 14, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--nw-line);
}

.nw-hub-nav-inner {
  width: 100%;
  max-width: var(--nw-max);
  margin-inline: auto;
  padding-inline: var(--nw-gutter);
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.nw-hub-nav-inner::-webkit-scrollbar { display: none; }

.nw-hub-link {
  position: relative;
  padding: 14px 12px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--text-soft);
  text-decoration: none;
  transition: color 0.15s var(--nw-ease);
}

.nw-hub-link:hover { color: var(--text); }

.nw-hub-link.is-active { color: var(--text); }

.nw-hub-link.is-active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--nw-comp-accent, var(--grad));
  background-image: var(--grad);
}

/* ── Group headings within fixtures ─────────────────────────────────────── */

.nw-group-heading {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: var(--nw-5) 0 var(--nw-3);
}

.nw-group-heading:first-of-type { margin-top: 0; }

/* Marks a fixture as one Noah chose — the point of the whole system. */
.nw-following-flag {
  color: var(--gold);
  font-size: 13px;
  line-height: 1;
}

/* ── League table ───────────────────────────────────────────────────────── */

.nw-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--nw-line);
  border-radius: var(--r);
  background: var(--nw-card);
}

.nw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 460px;
}

.nw-table th {
  padding: 12px 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: center;
  border-bottom: 1px solid var(--nw-line);
  white-space: nowrap;
}

.nw-table td {
  padding: 12px 8px;
  text-align: center;
  color: var(--text-soft);
  border-bottom: 1px solid var(--nw-line-soft);
}

.nw-table tr:last-child td { border-bottom: none; }

.nw-table .nw-t-pos {
  width: 34px;
  color: var(--text-faint);
  font-weight: 700;
}

.nw-table .nw-t-team {
  text-align: left;
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
  padding-left: 12px;
}

.nw-table .nw-t-pts {
  color: var(--text);
  font-weight: 800;
}

.nw-t-form {
  display: flex;
  gap: 3px;
  justify-content: center;
  padding-right: 12px;
}

.nw-form-dot {
  width: 17px;
  height: 17px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
}

.nw-form-dot.is-w { background: var(--nw-correct); }
.nw-form-dot.is-d { background: #64748b; }
.nw-form-dot.is-l { background: var(--nw-missed); }

@media (max-width: 599px) {
  .nw-t-hide-sm { display: none; }
  .nw-table { min-width: 0; }
}

/* ── Season predictions ─────────────────────────────────────────────────── */

.nw-pred-grid {
  display: grid;
  gap: var(--nw-3);
  grid-template-columns: 1fr;
}

.nw-pred-card {
  padding: var(--nw-4);
  background: var(--nw-card);
  border: 1px solid var(--nw-line);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nw-pred-q {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-faint);
}

.nw-pred-a {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--text);
}

.nw-pred-why {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-soft);
}

/* Noah changed his mind — the original call stays visible rather than being
   quietly replaced. */
.nw-pred-original {
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px dashed var(--nw-line);
  font-size: 12px;
  color: var(--text-faint);
}

.nw-pred-original span {
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-right: 6px;
}

/* ── Larger empty state ─────────────────────────────────────────────────── */

.nw-empty-lg {
  padding: var(--nw-7) var(--nw-5);
  display: flex;
  flex-direction: column;
  gap: 10px;
  line-height: 1.6;
}

.nw-empty-lg strong {
  color: var(--text);
  font-size: 16px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (min-width: 640px) {
  .nw-pred-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .nw-comp-hero-inner { padding: var(--nw-7) var(--nw-gutter) var(--nw-6); }
  .nw-pred-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .nw-hub-nav { top: var(--nw-header-h); }
}

/* ============================================================================
   NOAH'S TAKE — article pages (Phase 5)

   A measured reading column, generous type and real hierarchy. A 200-word
   match reaction should look as deliberate here as a long read: the layout
   never advertises how short a piece is.
   ========================================================================= */

.nw-article {
  display: block;
}

/* Draft preview marker — only ever seen by a logged-in admin. */
.nw-draft-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px var(--nw-gutter);
  background: rgba(251, 191, 36, 0.12);
  border-bottom: 1px solid rgba(251, 191, 36, 0.3);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.nw-article-head {
  border-bottom: 1px solid var(--nw-line);
}

.nw-article-head-inner {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  padding: var(--nw-6) var(--nw-gutter) var(--nw-5);
}

.nw-article-head .nw-take-cat {
  text-decoration: none;
}

.nw-article-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 6vw, 50px);
  font-weight: 900;
  line-height: 1.03;
  letter-spacing: -0.4px;
  color: var(--text);
  margin-top: var(--nw-3);
}

.nw-article-stand {
  margin-top: var(--nw-4);
  font-size: clamp(16px, 2.3vw, 19px);
  line-height: 1.55;
  color: var(--text-soft);
}

.nw-article-byline {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: var(--nw-5);
  padding-top: var(--nw-4);
  border-top: 1px solid var(--nw-line-soft);
}

.nw-article-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--grad);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.nw-article-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nw-article-author {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.nw-article-meta {
  display: block;
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 1px;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.nw-article-hero {
  width: 100%;
  max-width: 980px;
  margin: var(--nw-5) auto 0;
  padding-inline: var(--nw-gutter);
}

.nw-article-hero img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-lg);
  background: var(--surface-2);
}

.nw-article-hero figcaption {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-faint);
  text-align: center;
}

/* ── Body ───────────────────────────────────────────────────────────────── */

.nw-article-body {
  width: 100%;
  max-width: 680px;
  margin-inline: auto;
  padding: var(--nw-6) var(--nw-gutter) 0;
  font-size: 17px;
  line-height: 1.72;
  color: #d7d7ea;
}

.nw-article-body > p {
  margin-bottom: var(--nw-4);
}

/* The opening paragraph carries a touch more weight, as in print. */
.nw-article-body > p:first-child {
  font-size: 18px;
  color: #e6e6f5;
}

.nw-article-body h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.6vw, 30px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text);
  margin: var(--nw-6) 0 var(--nw-3);
}

.nw-article-body h3 {
  font-family: var(--font-display);
  font-size: clamp(18px, 3vw, 23px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--text);
  margin: var(--nw-5) 0 var(--nw-2);
}

.nw-article-body a {
  color: var(--pink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.nw-article-body a:hover {
  color: #f472a0;
}

.nw-article-body strong {
  color: var(--text);
  font-weight: 700;
}

.nw-article-body ul,
.nw-article-body ol {
  margin: 0 0 var(--nw-4) 0;
  padding-left: 22px;
}

.nw-article-body li {
  margin-bottom: 8px;
}

.nw-article-body li::marker {
  color: var(--text-faint);
}

/* Pull quote — the one place the gradient appears in body copy, as a rule. */
.nw-article-body blockquote {
  margin: var(--nw-5) 0;
  padding: var(--nw-2) 0 var(--nw-2) var(--nw-4);
  border-left: 3px solid transparent;
  border-image: var(--grad) 1;
  font-family: var(--font-display);
  font-size: clamp(20px, 3.2vw, 26px);
  font-weight: 700;
  line-height: 1.32;
  color: var(--text);
}

/* ── What this Take is about ────────────────────────────────────────────── */

.nw-article-relations {
  margin-top: var(--nw-6);
  padding: var(--nw-4);
  border: 1px solid var(--nw-line);
  border-radius: var(--r);
  background: var(--nw-card);
}

.nw-relations-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--nw-3);
}

.nw-article-relations ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nw-article-relations li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  margin: 0;
}

.nw-relation-label {
  flex-shrink: 0;
  min-width: 84px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-faint);
}

.nw-article-relations a {
  color: var(--pink);
  text-decoration: none;
  font-weight: 600;
}

.nw-article-relations a:hover {
  text-decoration: underline;
}

.nw-article-relations span:not(.nw-relation-label) {
  color: var(--text);
  font-weight: 600;
}

/* ── Share ──────────────────────────────────────────────────────────────── */

.nw-article-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--nw-2);
  margin-top: var(--nw-6);
  padding-top: var(--nw-4);
  border-top: 1px solid var(--nw-line);
}

.nw-share-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-right: var(--nw-2);
}

.nw-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s var(--nw-ease), border-color 0.15s var(--nw-ease),
              background-color 0.15s var(--nw-ease);
}

.nw-share-btn:hover {
  color: var(--text);
  border-color: var(--pink);
  background: rgba(232, 64, 126, 0.08);
}

.nw-share-btn:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}

/* ── Pagination ─────────────────────────────────────────────────────────── */

.nw-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--nw-4);
  margin-top: var(--nw-6);
  flex-wrap: wrap;
}

.nw-pagination-pos {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-faint);
}

/* ── Desktop ────────────────────────────────────────────────────────────── */

@media (min-width: 900px) {
  .nw-article-head-inner {
    padding: var(--nw-7) var(--nw-gutter) var(--nw-6);
  }

  .nw-article-body {
    padding-top: var(--nw-7);
    font-size: 18px;
  }

  .nw-article-body > p:first-child {
    font-size: 19px;
  }
}

/* ============================================================================
   KNOCKOUT BRACKET (Phase 6)
   One renderer, two layouts: a round at a time on a phone, the full bracket
   side by side on a wide screen. Shared by the World Cup archive and the
   Champions League.
   ========================================================================= */

/* ── Round tabs (mobile) ────────────────────────────────────────────────── */

.nw-bracket-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--nw-3);
  margin-bottom: var(--nw-4);
}

.nw-bracket-tabs::-webkit-scrollbar { display: none; }

.nw-bracket-tab {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--nw-line);
  background: var(--nw-card);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.15s var(--nw-ease), border-color 0.15s var(--nw-ease);
}

.nw-bracket-tab:hover { color: var(--text); }

.nw-bracket-tab.is-active {
  color: #fff;
  background: var(--grad);
  border-color: transparent;
}

.nw-bracket-round-list {
  display: grid;
  gap: var(--nw-3);
}

/* ── A tie ──────────────────────────────────────────────────────────────── */

.nw-tie {
  display: grid;
  gap: 6px;
  padding: var(--nw-3) var(--nw-4);
  background: var(--nw-card);
  border: 1px solid var(--nw-line);
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s var(--nw-ease), transform 0.15s var(--nw-ease);
}

a.nw-tie:hover {
  border-color: var(--border-2);
  transform: translateY(-1px);
}

.nw-tie-side {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nw-3);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-soft);
}

.nw-tie-team {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The side that went through is the one the eye should land on. */
.nw-tie-side.is-winner {
  color: var(--text);
  font-weight: 800;
}

.nw-tie-score {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 900;
  color: inherit;
  min-width: 16px;
  text-align: right;
}

.nw-tie-when {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
}

.nw-tie-pred {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--nw-line-soft);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  color: var(--text-soft);
}

.nw-tie-pred-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-faint);
}

.nw-tie-pred .nw-pred {
  margin-left: auto;
}

/* ── Layout switch ──────────────────────────────────────────────────────── */

.nw-bracket-wide { display: none; }

@media (min-width: 900px) {
  .nw-bracket-mobile { display: none; }
  .nw-bracket-wide   { display: block; }

  /* The bracket scrolls inside its own box — the page never scrolls sideways. */
  .nw-bracket-scroll {
    display: flex;
    gap: var(--nw-4);
    overflow-x: auto;
    padding-bottom: var(--nw-4);
    scrollbar-width: thin;
  }

  .nw-bracket-col {
    flex: 0 0 236px;
    display: flex;
    flex-direction: column;
  }

  .nw-bracket-col-head {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-faint);
    padding-bottom: var(--nw-3);
    margin-bottom: var(--nw-3);
    border-bottom: 1px solid var(--nw-line);
  }

  /* Ties spread evenly down each column, so later rounds sit centred against
     the earlier ties that feed them. */
  .nw-bracket-col-ties {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: var(--nw-3);
    flex: 1;
  }

  .nw-tie {
    padding: 10px 12px;
  }

  .nw-tie-side { font-size: 13px; }
}

/* ── Search (Phase 7) ───────────────────────────────────────────────────── */

.nw-search-form {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--nw-2);
  margin-top: var(--nw-5);
  max-width: 640px;
}

.nw-search-form > i {
  position: absolute;
  left: 16px;
  font-size: 19px;
  color: var(--text-faint);
  pointer-events: none;
}

.nw-search-form input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 14px 16px 14px 44px;
  background: var(--nw-card);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  color: var(--text);
  font-family: inherit;
  font-size: 16px; /* 16px stops iOS zooming the page on focus */
  -webkit-appearance: none;
  appearance: none;
}

.nw-search-form input[type="search"]::placeholder {
  color: var(--text-faint);
}

.nw-search-form input[type="search"]:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(232, 64, 126, 0.18);
}

.nw-search-form .nw-btn {
  flex-shrink: 0;
}

@media (max-width: 479px) {
  .nw-search-form {
    flex-wrap: wrap;
  }

  .nw-search-form input[type="search"] {
    width: 100%;
    flex-basis: 100%;
  }

  .nw-search-form .nw-btn {
    width: 100%;
  }
}

/* ── Two-legged ties, and the competitions index (Phase 8) ──────────────── */

/* A merged tie says so, and shows each leg — the aggregate alone hides how
   the tie was actually won. */
.nw-tie-legs {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
  letter-spacing: 0.3px;
}

.nw-comp-card-lg {
  min-height: 176px;
}

.nw-comp-record {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-soft);
}

.nw-comp-record strong {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 900;
  color: var(--text);
  margin-right: 3px;
}

/* ============================================================================
   PREDICTIONS
   ----------------------------------------------------------------------------
   Noah's alternative league, his gameweek calls and the comparison with the
   real table.

   Two rules run through everything below:

   1. Mobile first, and no sideways scrolling. The league table reuses
      .nw-table (which already drops GF/GA under 600px); everything with more
      than one number per club — the comparison especially — is built out of
      rows that reflow into cards rather than a table squeezed sideways.

   2. Prediction states reuse the existing --nw-exact / --nw-correct /
      --nw-missed tokens, so an exact score is the same gold here as it is on
      a World Cup card. Nothing invents a second colour language.
   ========================================================================= */

/* ── Team badge ─────────────────────────────────────────────────────────── */
/* A crest when the club has one uploaded, and a monogram chip when it does
   not — which is a designed state rather than a broken image, and upgrades
   itself the day crests are added. */

.nw-badge {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--nw-card-raised);
  border: 1px solid var(--nw-line);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--text-soft);
}

.nw-badge.has-crest {
  background: none;
  border: 0;
}

.nw-badge img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.nw-badge-lg {
  width: 36px;
  height: 36px;
  font-size: 13px;
}

/* ── Explainer ──────────────────────────────────────────────────────────── */

.np-explainer {
  margin: 0 0 var(--nw-4);
  max-width: 68ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-soft);
}

.np-explainer strong { color: var(--text); }

/* ── Gameweek switcher ──────────────────────────────────────────────────── */

.np-gw-strip {
  display: flex;
  gap: 8px;
  margin-bottom: var(--nw-4);
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.np-gw-strip::-webkit-scrollbar { display: none; }

.np-gw {
  flex: 0 0 auto;
  display: grid;
  gap: 1px;
  justify-items: center;
  min-width: 60px;
  padding: 8px 12px;
  border: 1px solid var(--nw-line);
  border-radius: var(--r-sm);
  background: var(--nw-card);
  transition: border-color 0.15s var(--nw-ease), background 0.15s var(--nw-ease);
}

.np-gw:hover { border-color: var(--border-2); }

.np-gw:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

.np-gw-n {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.np-gw-c {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}

.np-gw.is-active {
  border-color: transparent;
  background: var(--grad);
}

.np-gw.is-active .np-gw-n,
.np-gw.is-active .np-gw-c { color: #fff; }

/* ── Movement indicator ─────────────────────────────────────────────────── */
/* Up means Noah has the club HIGHER than the real table. The wording that
   goes with it is built once, in nw_comparison_label(). */

.np-move {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.np-move i { font-size: 13px; }

.np-move.is-higher { color: var(--nw-correct); }
.np-move.is-lower  { color: var(--nw-missed); }
.np-move.is-level  { color: var(--nw-exact); }
.np-move.is-none,
.np-move.is-unpredicted { color: var(--text-soft); font-weight: 600; }

.np-table .np-t-move { width: 46px; }

/* ── Talking points ─────────────────────────────────────────────────────── */

.np-points {
  display: grid;
  gap: 8px;
  margin: var(--nw-5) 0 0;
  padding: 0;
  list-style: none;
}

.np-point {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--nw-line);
  border-left: 3px solid var(--purple);
  border-radius: var(--r-sm);
  background: var(--nw-card);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}

.np-point i {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 16px;
  color: var(--purple);
}

.np-cta-line { margin-top: var(--nw-5); }

/* ── Stat strip ─────────────────────────────────────────────────────────── */

.np-stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: var(--nw-4);
  padding: 12px 14px;
  border: 1px solid var(--nw-line);
  border-radius: var(--r-sm);
  background: var(--nw-card);
  font-size: 13px;
  color: var(--text-soft);
}

.np-stat-strip strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.np-stat-strip .is-accent strong { color: var(--nw-exact); }

/* ── A predicted fixture ────────────────────────────────────────────────── */

.np-fixtures {
  display: grid;
  gap: 10px;
}

.np-fixture {
  padding: 12px 14px 14px;
  border: 1px solid var(--nw-line);
  border-radius: var(--r);
  background: var(--nw-card);
}

/* A match with no prediction is quieter, and says so in words below. It is
   never dressed up as a missed call. */
.np-fixture.is-blank { border-style: dashed; }

.np-fixture.is-exact   { border-color: rgba(251, 191, 36, 0.4); }
.np-fixture.is-correct { border-color: rgba(34, 197, 94, 0.32); }

.np-fixture-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-soft);
}

.np-lock,
.np-open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
  white-space: nowrap;
}

.np-lock { color: var(--text-soft); }
.np-open { color: var(--rumour-color); }

.np-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}

.np-side {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.np-side.is-away { justify-content: flex-end; }

.np-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text);
}

.np-score {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
  color: var(--text);
  white-space: nowrap;
}

.np-score span { color: var(--text-soft); margin: 0 2px; }
.np-score.is-blank { font-size: 18px; color: var(--text-soft); }

.np-fixture-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--nw-line-soft);
  font-size: 13px;
  color: var(--text-soft);
}

.np-actual strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.np-none,
.np-note { font-style: italic; }

/* ── Noah / Real toggle ─────────────────────────────────────────────────── */

.np-toggle {
  display: inline-flex;
  gap: 2px;
  margin-bottom: var(--nw-4);
  padding: 3px;
  border: 1px solid var(--nw-line);
  border-radius: 999px;
  background: var(--nw-card);
}

.np-toggle-btn {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-soft);
  white-space: nowrap;
  transition: background 0.15s var(--nw-ease), color 0.15s var(--nw-ease);
}

.np-toggle-btn:hover { color: var(--text); }

.np-toggle-btn.is-active {
  background: var(--grad);
  color: #fff;
}

.np-toggle-btn:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

/* ── Verdict cards ──────────────────────────────────────────────────────── */

.np-verdicts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: var(--nw-5);
}

.np-verdict {
  padding: 14px;
  border: 1px solid var(--nw-line);
  border-radius: var(--r);
  background: var(--nw-card);
}

.np-verdict.is-higher { border-left: 3px solid var(--nw-correct); }
.np-verdict.is-lower  { border-left: 3px solid var(--nw-missed); }
.np-verdict.is-level  { border-left: 3px solid var(--nw-exact); }

.np-verdict-team {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text);
}

.np-verdict-pair {
  display: flex;
  gap: 16px;
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--text-soft);
}

.np-verdict-pair strong {
  color: var(--text);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.np-verdict-move {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
}

.np-verdict.is-higher .np-verdict-move i { color: var(--nw-correct); }
.np-verdict.is-lower  .np-verdict-move i { color: var(--nw-missed); }

/* ── Club-by-club comparison ────────────────────────────────────────────── */
/* Four values per club is one more than a table can hold on a phone without
   scrolling sideways, so these are rows that reflow instead. */

.np-compare {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.np-compare-head { display: none; }

.np-compare-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 12px 14px;
  border: 1px solid var(--nw-line);
  border-radius: var(--r-sm);
  background: var(--nw-card);
}

.np-compare-row.is-unpredicted { opacity: 0.6; }

.np-compare-team {
  flex: 1 1 100%;
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}

.np-compare-pos {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 12px;
  color: var(--text-soft);
}

.np-compare-pos strong {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.np-compare-pos small { font-size: 11px; color: var(--text-soft); }

.np-compare-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.np-compare-move { margin-left: auto; }

@media (min-width: 720px) {
  .np-compare-head {
    display: flex;
    gap: 14px;
    padding: 0 14px 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-soft);
  }

  .np-compare-head span:first-child { flex: 1 1 auto; }

  .np-compare-head span + span {
    flex: 0 0 96px;
    text-align: center;
  }

  .np-compare-row { flex-wrap: nowrap; }

  .np-compare-team { flex: 1 1 auto; }

  .np-compare-pos {
    flex: 0 0 96px;
    justify-content: center;
  }

  .np-compare-move {
    flex: 0 0 96px;
    display: flex;
    justify-content: center;
    margin-left: 0;
  }

  /* The header row names the columns, so the per-row labels are redundant. */
  .np-compare-label { display: none; }
}

/* ── Stat cards ─────────────────────────────────────────────────────────── */

.np-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: var(--nw-5);
}

.np-card {
  padding: 14px;
  border: 1px solid var(--nw-line);
  border-radius: var(--r);
  background: var(--nw-card);
}

.np-card.is-accent { border-color: rgba(124, 58, 237, 0.45); }

.np-card-label {
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-soft);
}

.np-card-value {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 5vw, 30px);
  font-weight: 900;
  line-height: 1.05;
  color: var(--text);
}

.np-card.is-accent .np-card-value {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.np-card-note {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-soft);
}

/* ── Homepage panel ─────────────────────────────────────────────────────── */

.np-home {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  .np-home { grid-template-columns: 1.1fr 1fr; align-items: start; }
}

.np-home-table {
  border: 1px solid var(--nw-line);
  border-radius: var(--r);
  background: var(--nw-card);
  overflow: hidden;
}

.np-home-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--nw-line);
}

.np-home-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text);
}

.np-home-sub {
  margin: 0;
  font-size: 11px;
  color: var(--text-soft);
}

.np-mini {
  display: grid;
  padding: 6px;
}

.np-mini-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  font-size: 13px;
}

.np-mini-row + .np-mini-row { border-top: 1px solid var(--nw-line-soft); }

.np-mini-pos {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}

.np-mini-team {
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.np-mini-pts {
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.np-home-aside {
  display: grid;
  gap: 10px;
  align-content: start;
}

.np-home-fixture {
  padding: 12px 14px;
  border: 1px solid var(--nw-line);
  border-radius: var(--r);
  background: var(--nw-card);
}

.np-home-kicker {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--purple);
}

.np-home-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 420px) {
  .np-name { font-size: 15px; }
  .np-score { font-size: 23px; }
  .np-teams { gap: 6px; }
}

/* The gameweek card on the homepage reuses the stat strip without its own
   frame, because it already sits inside a card. */
.np-stat-strip.is-bare {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.np-home-fixture .np-home-links { margin-top: 12px; }

.np-home-fixture .np-card-value { margin-top: 4px; }

/* Under 480px the league table keeps only the columns anyone actually scans
   on a phone: position, club, played, goal difference and points — plus the
   movement indicator, which is the whole point of this version of the table.
   Won/drawn/lost drop out rather than pushing Pts off the right-hand edge. */
@media (max-width: 479px) {
  .nw-t-hide-xs { display: none; }

  .nw-table .nw-t-team {
    white-space: normal;
    line-height: 1.2;
  }

  .nw-table th,
  .nw-table td { padding: 10px 5px; }

  .np-table .np-t-move { width: 40px; }
}

/* ============================================================================
   MATCH HUB
   ----------------------------------------------------------------------------
   One fixture, and everything the site knows about it. Built to feel like the
   most substantial page type on the site while reusing its whole vocabulary:
   the hero borrows the competition masthead's treatment, the article cards are
   the existing ones, and the prediction pills are the same tokens used on a
   World Cup card.

   Mobile first throughout. The scoreboard is a three-column grid that never
   needs to scroll, and every list below it is a column of rows rather than a
   table pushed sideways.
   ========================================================================= */

/* ── Hero ───────────────────────────────────────────────────────────────── */

.mh-hero {
  position: relative;
  overflow: hidden;
  padding: var(--nw-5) 0 var(--nw-6);
  border-bottom: 1px solid var(--nw-line);
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--nw-comp-accent, #38bdf8) 16%, transparent) 0%, transparent 70%),
    var(--nw-surface);
}

.mh-hero-inner {
  width: 100%;
  max-width: var(--nw-max);
  margin-inline: auto;
  padding-inline: var(--nw-gutter);
  text-align: center;
}

.mh-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0 0 var(--nw-4);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-soft);
}

.mh-breadcrumb a { color: var(--text); }
.mh-breadcrumb a:hover { color: var(--nw-comp-accent, #38bdf8); }

/* ── Scoreboard ─────────────────────────────────────────────────────────── */

.mh-scoreboard {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: var(--nw-3);
}

.mh-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.mh-team {
  font-family: var(--font-display);
  font-size: clamp(15px, 4.2vw, 22px);
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text);
}

.mh-centre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 4px;
}

.mh-score {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(38px, 12vw, 60px);
  font-weight: 900;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.mh-score span { color: var(--text-soft); margin: 0 4px; }

.mh-pens {
  margin: 0;
  font-size: 11px;
  color: var(--text-soft);
}

.mh-vs {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 7vw, 34px);
  font-weight: 800;
  color: var(--text-soft);
  line-height: 1;
}

.mh-kickoff-time {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* Status pill. Every state gets its own treatment so the fixture's condition
   is readable at a glance without reading the word — but the word is always
   there too. */
.mh-status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--nw-line);
  background: var(--nw-card);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-soft);
  white-space: nowrap;
}

.mh-status.is-full_time {
  border-color: rgba(34, 197, 94, 0.4);
  color: var(--nw-correct);
}

.mh-status.is-live {
  border-color: rgba(232, 64, 126, 0.5);
  color: var(--pink);
}

.mh-status.is-postponed,
.mh-status.is-suspended {
  border-color: rgba(251, 191, 36, 0.4);
  color: var(--nw-exact);
}

.mh-status.is-cancelled {
  border-color: rgba(239, 68, 68, 0.4);
  color: var(--nw-missed);
}

.mh-when {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  margin: var(--nw-4) 0 0;
  font-size: 13px;
  color: var(--text-soft);
}

.mh-venue {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* The headline prediction, sitting under the scoreboard. */
.mh-hero-pred {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 12px;
  margin-top: var(--nw-4);
  padding: 10px 16px;
  border: 1px solid var(--nw-line);
  border-radius: 999px;
  background: var(--nw-card);
}

.mh-hero-pred.is-exact   { border-color: rgba(251, 191, 36, 0.45); }
.mh-hero-pred.is-correct { border-color: rgba(34, 197, 94, 0.4); }
.mh-hero-pred.is-missed  { border-color: rgba(239, 68, 68, 0.35); }

.mh-hero-pred-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-soft);
}

.mh-hero-pred-score {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.mh-lock,
.mh-open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
}

.mh-lock { color: var(--text-soft); }
.mh-open { color: var(--rumour-color); }

/* ── Cards ──────────────────────────────────────────────────────────────── */

.mh-card {
  padding: var(--nw-4);
  border: 1px solid var(--nw-line);
  border-radius: var(--r);
  background: var(--nw-card);
}

.mh-card.is-quiet { border-style: dashed; }

.mh-card.is-result { border-color: rgba(124, 58, 237, 0.4); }

.mh-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--nw-3);
}

.mh-card-label {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-soft);
}

.mh-meta {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--text-soft);
}

.mh-meta strong { color: var(--text); }

.mh-empty {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-soft);
}

.mh-pred-line {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text);
}

.mh-pred-line strong {
  font-size: 26px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.mh-pred-line.is-big strong { font-size: 32px; }

.mh-thoughts {
  margin-top: var(--nw-4);
  padding-top: var(--nw-4);
  border-top: 1px solid var(--nw-line-soft);
}

.mh-thoughts .mh-card-label { margin-bottom: 8px; }

.mh-thoughts p {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-soft);
}

.mh-thoughts p:last-child { margin-bottom: 0; }

.mh-card > p:not([class]) {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-soft);
}

.mh-verdict {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: var(--nw-4);
  padding-top: var(--nw-4);
  border-top: 1px solid var(--nw-line-soft);
}

.mh-verdict-text {
  font-size: 14px;
  color: var(--text-soft);
}

.mh-rating {
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--nw-exact);
}

.mh-rating-off { color: var(--text-faint); }

/* ── Form ───────────────────────────────────────────────────────────────── */

.mh-form-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .mh-form-grid { grid-template-columns: 1fr 1fr; }
}

.mh-form-card {
  padding: var(--nw-4);
  border: 1px solid var(--nw-line);
  border-radius: var(--r);
  background: var(--nw-card);
}

.mh-form-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--nw-3);
}

.mh-form-team {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text);
}

.mh-form-strip {
  display: flex;
  gap: 5px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

/* W/D/L never depends on colour alone: the letter is in the box and the full
   word is in the accessible name. */
.mh-form-dot {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}

.mh-form-dot.is-w { background: var(--nw-correct); }
.mh-form-dot.is-d { background: #64748b; }
.mh-form-dot.is-l { background: var(--nw-missed); }

.mh-form-line {
  margin: 0 0 var(--nw-3);
  font-size: 13px;
  color: var(--text-soft);
}

.mh-form-stats {
  display: flex;
  gap: 16px;
  margin: 0;
  padding-top: var(--nw-3);
  border-top: 1px solid var(--nw-line-soft);
}

.mh-form-stats > div { display: flex; align-items: baseline; gap: 5px; }

.mh-form-stats dt {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-soft);
}

.mh-form-stats dd {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* ── Recent matches and head to head ────────────────────────────────────── */

.mh-recent {
  padding: var(--nw-4);
  border: 1px solid var(--nw-line);
  border-radius: var(--r);
  background: var(--nw-card);
}

.mh-recent-list {
  display: grid;
  gap: 2px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.mh-h2h {
  margin-top: 0;
  padding: var(--nw-3);
  border: 1px solid var(--nw-line);
  border-radius: var(--r);
  background: var(--nw-card);
}

.mh-recent-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.mh-recent-row + .mh-recent-row { border-top: 1px solid var(--nw-line-soft); }

.mh-recent-outcome {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
}

.mh-recent-outcome.is-w { background: var(--nw-correct); }
.mh-recent-outcome.is-d { background: #64748b; }
.mh-recent-outcome.is-l { background: var(--nw-missed); }

.mh-recent-main {
  flex: 1 1 auto;
  display: grid;
  gap: 1px;
  min-width: 0;
}

a.mh-recent-main:hover .mh-recent-score { color: var(--pink); }

.mh-recent-score {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-recent-score strong { font-variant-numeric: tabular-nums; }

.mh-recent-meta {
  font-size: 11px;
  color: var(--text-soft);
}

/* ── Onward links ───────────────────────────────────────────────────────── */

.mh-links {
  display: grid;
  gap: 2px;
  border: 1px solid var(--nw-line);
  border-radius: var(--r);
  background: var(--nw-card);
  overflow: hidden;
}

.mh-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px var(--nw-4);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  transition: background 0.15s var(--nw-ease);
}

.mh-link + .mh-link { border-top: 1px solid var(--nw-line-soft); }

.mh-link:hover { background: var(--nw-card-raised); }

.mh-link > i:first-child { color: var(--purple); font-size: 17px; }

.mh-link-go {
  margin-left: auto;
  color: var(--text-soft);
}

.mh-link:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: -2px;
}

/* ── Fixture cards elsewhere on the site ────────────────────────────────── */
/* Compact cards stay compact: a result, or a prediction, and the grade — never
   both plus everything else. */

.nw-match-result {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-soft);
}

.nw-match-result strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 420px) {
  .mh-team { font-size: 14px; }
  .mh-form-stats { gap: 12px; }
}

/* A fixture card that opens its Match Hub. The whole card is the target, so
   the tap area on a phone is the card and not a small link inside it. */
a.np-fixture.is-link {
  display: block;
  transition: border-color 0.15s var(--nw-ease), transform 0.15s var(--nw-ease);
}

a.np-fixture.is-link:hover {
  border-color: var(--border-2);
  transform: translateY(-1px);
}

a.np-fixture.is-link:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

/* Related matches inside an article. Reuses the Match Hub link list rather
   than a second card style. */
.nw-match-links .mh-links { margin-top: 10px; }

.nw-match-links .mh-link span small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);
}

/* ============================================================================
   CLUB PAGES
   ----------------------------------------------------------------------------
   The third side of the triangle: a fixture links to its clubs, an article
   links to its fixtures, and a club links back to both.

   Reuses the Match Hub's form strip, results list and stat cards rather than
   restyling them — a W looks the same on a club page as it does on a match
   page, because it is the same component.
   ========================================================================= */

/* A crest large enough to lead a page with. */
.nw-badge-xl {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  font-size: 22px;
}

.nw-badge-xl img {
  width: 64px;
  height: 64px;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.cl-hero {
  position: relative;
  overflow: hidden;
  padding: var(--nw-5) 0;
  border-bottom: 1px solid var(--nw-line);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(124, 58, 237, 0.14) 0%, transparent 65%),
    var(--nw-surface);
}

.cl-hero-inner {
  width: 100%;
  max-width: var(--nw-max);
  margin-inline: auto;
  padding-inline: var(--nw-gutter);
  display: flex;
  align-items: center;
  gap: var(--nw-4);
}

.cl-crest { flex: 0 0 auto; display: block; }

.cl-hero-text { min-width: 0; }

.cl-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 8vw, 46px);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text);
}

.cl-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-soft);
}

.cl-meta a { color: var(--text); }
.cl-meta a:hover { color: var(--pink); }

/* ── Where they stand ───────────────────────────────────────────────────── */
/* Three cards: where they are, where Noah has them, and the gap. The gap card
   is the one this site exists for, so it is the one that carries colour. */

.cl-standing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.cl-pos {
  padding: var(--nw-4);
  border: 1px solid var(--nw-line);
  border-radius: var(--r);
  background: var(--nw-card);
  text-align: center;
}

.cl-pos.is-noah { border-color: rgba(124, 58, 237, 0.45); }

.cl-pos.is-move.is-higher { border-color: rgba(34, 197, 94, 0.4); }
.cl-pos.is-move.is-lower  { border-color: rgba(239, 68, 68, 0.4); }
.cl-pos.is-move.is-level  { border-color: rgba(251, 191, 36, 0.45); }

.cl-pos-label {
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-soft);
}

.cl-pos-value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 8vw, 38px);
  font-weight: 900;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.cl-pos.is-noah .cl-pos-value {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cl-pos.is-move.is-higher .cl-pos-value { color: var(--nw-correct); }
.cl-pos.is-move.is-lower  .cl-pos-value { color: var(--nw-missed); }

.cl-spot-on {
  font-size: 22px;
  color: var(--nw-exact);
}

.cl-pos-note {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-soft);
}

/* ── Form ───────────────────────────────────────────────────────────────── */

.cl-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: var(--nw-4);
  border: 1px solid var(--nw-line);
  border-radius: var(--r);
  background: var(--nw-card);
}

.cl-form .mh-form-strip { margin: 0; }
.cl-form .mh-form-line  { margin: 0; }

/* ── Results list ───────────────────────────────────────────────────────── */
/* The prediction grade sits at the end of a result row as an icon; the full
   wording is in the accessible name, so it never depends on the icon alone. */

.cl-recent-pred {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 3px 6px;
}

/* ── Transfers ──────────────────────────────────────────────────────────── */
/* On a club's own page, marking which end of the deal is them turns a route
   into a direction at a glance. */

.nw-transfer-route .is-this-club {
  color: var(--text);
  font-weight: 700;
}

/* ── The index ──────────────────────────────────────────────────────────── */

.cl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.cl-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--nw-line);
  border-radius: var(--r-sm);
  background: var(--nw-card);
  transition: border-color 0.15s var(--nw-ease), background 0.15s var(--nw-ease);
}

.cl-tile:hover {
  border-color: var(--border-2);
  background: var(--nw-card-raised);
}

.cl-tile:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

.cl-tile-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Club links inside tables ───────────────────────────────────────────── */
/* A team name in a league table is a link, but must not shout: the table is
   scanned for numbers, and twenty underlined names would fight that. */

.nw-t-team a {
  color: inherit;
  border-bottom: 1px solid transparent;
}

.nw-t-team a:hover {
  color: var(--pink);
  border-bottom-color: currentColor;
}

.nw-t-team a:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

.np-compare-team a,
.mh-form-team a,
.mh-team a {
  color: inherit;
}

.np-compare-team a:hover,
.mh-form-team a:hover,
.mh-team a:hover { color: var(--pink); }

@media (max-width: 420px) {
  .cl-hero-inner { gap: 12px; }
  .nw-badge-xl { width: 52px; height: 52px; font-size: 18px; }
  .nw-badge-xl img { width: 52px; height: 52px; }
  .cl-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
}

/* ============================================================================
   PREDICTIONS INDEX
   ----------------------------------------------------------------------------
   The way in to each competition. These cards summarise and link; none of them
   renders a table, a gameweek or a comparison — those live on the competition's
   own prediction hub, which is the whole point of this page existing.
   ========================================================================= */

.pi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.pi-card {
  position: relative;
  overflow: hidden;
  padding: var(--nw-5) var(--nw-4) var(--nw-4);
  border: 1px solid var(--nw-line);
  border-radius: var(--r);
  background: var(--nw-card);
}

/* The competition's own colour, as a top edge rather than a wash — so two
   cards side by side are told apart at a glance without either shouting. */
.pi-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--nw-comp-accent, #38bdf8);
}

.pi-card-kicker {
  margin: 0 0 2px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-soft);
}

.pi-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text);
}

.pi-card-lead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
  margin: var(--nw-3) 0 0;
  font-size: 15px;
  color: var(--text);
}

.pi-card-lead strong { font-weight: 800; }

.pi-card-lead a { color: inherit; }
.pi-card-lead a:hover { color: var(--pink); }

.pi-card-lead-label {
  font-size: 12px;
  color: var(--text-soft);
}

.pi-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: var(--nw-4) 0 0;
  padding-top: var(--nw-3);
  border-top: 1px solid var(--nw-line-soft);
}

.pi-card-stats > div { display: grid; gap: 1px; }

.pi-card-stats dt {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-soft);
}

.pi-card-stats dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.pi-card-stats .is-accent dd {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pi-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--nw-4);
}

.pi-card-foot {
  margin: var(--nw-3) 0 0;
  padding-top: var(--nw-3);
  border-top: 1px solid var(--nw-line-soft);
  font-size: 12px;
}

.pi-card-foot a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  color: var(--text-soft);
}

.pi-card-foot a:hover { color: var(--pink); }

.pi-card-foot a:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}