/* fbodds.com — "The Back Pages" design system
   British sports-paper heritage: cream paper, ink navy, brick-red kickers,
   condensed headlines over a serif body, rules instead of shadows. */

:root {
  --paper: #f8f3e6;
  --paper-deep: #f0e8d5;
  --card: #fffdf6;
  --ink: #16213a;
  --ink-soft: #46516c;
  --ink-faint: #7d8598;
  --rule: #d9cfb7;
  --rule-dark: #b9ad8f;
  --red: #b3251e;
  --cta: #0d6b34;
  --cta-hover: #0a5427;
  --cta-ink: #fdfaf1;
  --pitch-green: #0f5c34;

  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;

  --t-sm: 0.875rem;
  --t-base: 1.125rem;
  --t-md: 1.3rem;
  --t-lg: 1.6rem;
  --t-xl: 2.1rem;
  --t-2xl: clamp(2.6rem, 6.5vw, 4.2rem);

  --radius: 6px;
  --radius-sm: 4px;
  --wrap: 68rem;
  --prose: 40rem;

  --display: "Oswald", "Arial Narrow", -apple-system, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }

body {
  font-family: var(--serif);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
h1 { font-size: var(--t-2xl); text-transform: none; letter-spacing: -0.01em; font-weight: 700; line-height: 1.02; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-md); letter-spacing: 0.02em; }
a { color: var(--ink); text-decoration-color: var(--rule-dark); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--red); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--cta); outline-offset: 2px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-5); }
.prose { max-width: var(--prose); }

.eyebrow {
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--red);
}
.eyebrow::after {
  content: "";
  display: block;
  width: 44px;
  border-bottom: 2px solid var(--red);
  margin-top: 6px;
  margin-bottom: 2px;
}

/* Masthead */
.site-header {
  background: var(--paper);
  border-bottom: 3px double var(--ink);
}
.site-header .bar {
  display: flex; align-items: center; gap: var(--s-4);
  padding-block: var(--s-4);
}
.logo {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--display);
  font-weight: 700; font-size: 1.7rem; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--ink); text-decoration: none; white-space: nowrap; line-height: 1;
}
.logo svg { width: 34px; height: 34px; flex: none; }
.logo svg circle { stroke: var(--ink) !important; }
.logo svg path { fill: var(--ink) !important; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: var(--s-5); }
.site-nav a {
  font-family: var(--display); font-size: 0.95rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink); text-decoration: none;
  border-bottom: 2px solid transparent; padding-bottom: 2px;
}
.site-nav a:hover { border-bottom-color: var(--red); }
.site-nav a.nav-cta {
  background: var(--cta); color: var(--cta-ink);
  padding: var(--s-2) var(--s-4); border-radius: var(--radius-sm);
  border-bottom: none; white-space: nowrap;
}
.site-nav a.nav-cta:hover { background: var(--cta-hover); }
.age-chip {
  font-family: var(--display); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em;
  border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 2px 9px; color: var(--ink); flex: none;
}
@media (max-width: 720px) {
  .site-nav a:not(.nav-cta) { display: none; }
  .site-header .bar, .site-nav { gap: var(--s-3); }
  .logo { font-size: 1.4rem; }
}

/* Hero — front page */
.hero { background: var(--paper); border-bottom: 1px solid var(--rule); }
.hero .wrap {
  display: grid; gap: var(--s-7); align-items: center;
  padding-block: var(--s-8) var(--s-8);
}
.hero h1 { color: var(--ink); max-width: 16ch; }
.hero .sub { font-size: var(--t-md); color: var(--ink-soft); max-width: 44ch; margin-top: var(--s-5); }
.hero .proof {
  margin-top: var(--s-5); font-style: italic; font-size: var(--t-base); color: var(--ink-soft);
  border-left: 3px solid var(--red); padding-left: var(--s-3);
}
.hero-figure { justify-self: center; width: min(430px, 88vw); margin: 0; }
.hero-art { width: 100%; height: auto; }
@media (min-width: 880px) {
  .hero .wrap { grid-template-columns: 1.15fr 0.85fr; }
}

/* Buttons */
.btn {
  display: inline-block; background: var(--cta); color: var(--cta-ink);
  font-family: var(--display); font-weight: 600; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none;
  padding: var(--s-3) var(--s-5); border-radius: var(--radius-sm);
  border: none; cursor: pointer; min-height: 44px;
}
.btn:hover { background: var(--cta-hover); }
.micro { display: block; margin-top: var(--s-2); font-size: var(--t-sm); color: var(--ink-faint); font-style: italic; }

/* Sections */
.section { padding-block: var(--s-8); }
.section.alt { background: var(--paper-deep); border-block: 1px solid var(--rule); }
.section-head { max-width: var(--prose); margin-bottom: var(--s-6); }
.section-head h2 { margin-top: var(--s-2); }
.section-head p { margin-top: var(--s-3); color: var(--ink-soft); }

/* Printed photos (art panels) */
.art-band, .photo-frame { margin: 0; }
.art-band {
  background: #fff; padding: 10px 10px 0;
  border: 1px solid var(--rule-dark); border-radius: 2px;
  box-shadow: 0 1px 0 var(--rule-dark);
  line-height: 0;
}
.art-band svg { width: 100%; height: auto; }
.art-band figcaption, .art-caption {
  line-height: 1.5; font-size: var(--t-sm); font-style: italic; color: var(--ink-soft);
  padding: var(--s-2) var(--s-1) var(--s-3);
}
.art-band.in-prose { margin-block: var(--s-5); }
.hero-figure .art-band { transform: rotate(0.4deg); }

/* Step plan — numbered like column features */
.steps { display: grid; gap: var(--s-5); counter-reset: step; padding: 0; margin: 0; list-style: none; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li {
  background: var(--card); border: 1.5px solid var(--rule-dark); border-radius: var(--radius);
  padding: var(--s-5); counter-increment: step;
}
.steps li::before {
  content: counter(step);
  font-family: var(--display); font-size: 2.6rem; font-weight: 700; line-height: 1;
  color: var(--red); display: block; margin-bottom: var(--s-2);
}
.steps h3 { margin-bottom: var(--s-2); }
.steps p { font-size: 1rem; color: var(--ink-soft); }

/* Bookmaker cards — league-table entries */
.bookie-row { display: grid; gap: var(--s-5); padding: 0; margin: 0; list-style: none; }
@media (min-width: 840px) { .bookie-row { grid-template-columns: repeat(3, 1fr); } }
.bookie-card {
  display: flex; flex-direction: column;
  background: var(--card); border: 1.5px solid var(--rule-dark); border-radius: var(--radius);
  border-top: 4px solid var(--ink);
  padding: var(--s-5);
}
@supports (grid-template-rows: subgrid) {
  @media (min-width: 840px) {
    .bookie-card { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: var(--s-3); }
  }
}
.bookie-card .badge {
  justify-self: start; align-self: start;
  font-family: var(--display); font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--red); margin-bottom: var(--s-2);
}
.bookie-card h3 { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); font-size: 1.45rem; }
.bookie-card h3 svg { width: 28px; height: 28px; flex: none; }
.bookie-card .pitch-line { font-size: 1rem; color: var(--ink-soft); margin-bottom: var(--s-3); }
.bookie-card ul { padding-left: 1.1rem; margin-bottom: var(--s-4); font-size: 1rem; color: var(--ink); }
.bookie-card ul li { margin-bottom: var(--s-1); }
.bookie-card .btn { margin-top: auto; width: 100%; text-align: center; }

/* Comparison table — the league table */
.compare {
  width: 100%; border-collapse: collapse; background: var(--card);
  border: 1.5px solid var(--rule-dark); font-size: 1rem;
}
.compare th, .compare td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--rule); }
.compare thead th {
  background: var(--ink); color: var(--paper);
  font-family: var(--display); font-weight: 500; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.compare tbody tr:last-child td { border-bottom: none; }
.table-scroll { overflow-x: auto; }

/* Guide teasers — story cards */
.guide-list { display: grid; gap: var(--s-4); padding: 0; margin: 0; list-style: none; }
.guide-list a {
  display: grid; grid-template-columns: 1fr; gap: var(--s-4); align-items: center;
  background: var(--card); border: 1.5px solid var(--rule-dark); border-radius: var(--radius);
  padding: var(--s-5); text-decoration: none;
}
@media (min-width: 720px) { .guide-list a { grid-template-columns: 220px 1fr; } }
.guide-thumb { border: 1px solid var(--rule-dark); background: #fff; padding: 6px; line-height: 0; }
.guide-thumb svg { width: 100%; height: auto; }
.guide-list h3 { margin-bottom: var(--s-1); }
.guide-list p { color: var(--ink-soft); font-size: 1rem; }
.guide-list .read-more {
  display: inline-block; margin-top: var(--s-3);
  font-family: var(--display); font-weight: 600; font-size: 0.9rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--red);
}

/* Article pages */
.article { padding-block: var(--s-7) var(--s-8); }
.article .prose > * + * { margin-top: var(--s-4); }
.article .prose h1 { text-transform: none; letter-spacing: 0; font-weight: 600; line-height: 1.1; }
.article .prose h2 { margin-top: var(--s-7); }
.article .prose h3 { margin-top: var(--s-5); }
.article .lede { font-size: var(--t-md); color: var(--ink-soft); }
.article .updated { font-size: var(--t-sm); color: var(--ink-faint); font-style: italic; }
.callout {
  background: var(--paper-deep); border: 1px solid var(--rule-dark); border-left: 4px solid var(--ink);
  border-radius: var(--radius-sm); padding: var(--s-4) var(--s-5);
}
.callout.warn { border-left-color: var(--red); }

/* Disclosure + RG */
.disclosure { font-size: var(--t-sm); color: var(--ink-soft); font-style: italic; }
.rg-band { background: var(--ink); color: var(--paper); }
.rg-band .wrap { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; padding-block: var(--s-5); font-size: var(--t-sm); }
.rg-band a { color: #fff; }
.rg-band .age-chip { border-color: var(--paper); color: var(--paper); }

/* CTA band */
.cta-band { text-align: center; padding-block: var(--s-8); border-top: 1px solid var(--rule); }
.cta-band h2 { margin-bottom: var(--s-3); }
.cta-band p { color: var(--ink-soft); max-width: 44ch; margin: 0 auto var(--s-5); }

/* Footer — the printing plate */
.site-footer { background: var(--ink); color: rgba(248, 243, 230, 0.75); font-size: var(--t-sm); }
.site-footer .wrap { padding-block: var(--s-6); display: grid; gap: var(--s-4); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.site-footer a {
  color: var(--paper);
  font-family: var(--display); font-size: 0.85rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
}
.site-footer a:hover { text-decoration: underline; }
.site-footer p a { font-family: var(--serif); text-transform: none; letter-spacing: 0; font-size: inherit; text-decoration: underline; }

@media (prefers-reduced-motion: no-preference) {
  a.btn, .site-nav a.nav-cta { transition: background-color 200ms ease-out; }
  .bookie-card, .guide-list a { transition: transform 200ms ease-out; }
  .bookie-card:hover, .guide-list a:hover { transform: translateY(-2px); }
}