:root {
  --paper: #ffffff;
  --canvas: #f3f5f2;
  --ink: #17211b;
  --muted: #5e6962;
  --green: #167a52;
  --green-dark: #0f5038;
  --coral: #ef624d;
  --blue: #275f88;
  --yellow: #f3c34d;
  --line: #d8ddd9;
  --soft: #eaf3ee;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, Arial, Helvetica, sans-serif;
  line-height: 1.68;
}
img { display: block; width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, blockquote, figure, dl, dd { margin-top: 0; }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; letter-spacing: 0; }
.shell { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--ink);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
}
.header-row { min-height: 66px; display: flex; align-items: center; gap: 28px; }
.wordmark { font-family: Georgia, "Times New Roman", serif; font-size: 1.55rem; font-weight: 800; }
.main-nav { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 0.88rem; font-weight: 750; }
.main-nav a { border-bottom: 2px solid transparent; }
.main-nav a:hover { border-color: var(--coral); }
.header-cta, .lead-cta, .mobile-action a, .final-action a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink);
  border-radius: 4px;
  padding: 0 20px;
  color: #fff;
  background: var(--ink);
  font-weight: 800;
}
.header-cta:hover, .lead-cta:hover, .final-action a:hover { background: var(--green); border-color: var(--green); }
.mobile-action { display: none; padding: 10px 16px; border-bottom: 1px solid var(--line); background: #fff; }
.mobile-action a { width: 100%; background: var(--green); border-color: var(--green); }

.lead { border-bottom: 1px solid var(--ink); background: var(--canvas); }
.lead-grid { min-height: 520px; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr); align-items: stretch; }
.lead-copy { padding: 76px 8% 70px 0; }
.edition, .section-index {
  margin-bottom: 16px;
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
h1 { max-width: 800px; margin-bottom: 22px; font-size: clamp(2.35rem, 4.3vw, 4.3rem); line-height: 1.02; }
.standfirst { max-width: 760px; margin-bottom: 28px; color: #3f4943; font-family: Georgia, "Times New Roman", serif; font-size: 1.18rem; line-height: 1.65; }
.lead-cta { background: var(--coral); border-color: var(--coral); }
.editor-note { padding: 70px 34px; border-left: 1px solid var(--ink); background: var(--yellow); }
.editor-note > span { display: inline-block; margin-bottom: 22px; padding-bottom: 7px; border-bottom: 3px solid var(--ink); font-size: 0.76rem; font-weight: 900; text-transform: uppercase; }
.editor-note > p { font-family: Georgia, "Times New Roman", serif; font-size: 1.16rem; line-height: 1.6; }
.editor-note dl { margin-bottom: 0; padding-top: 18px; border-top: 1px solid rgba(23, 33, 27, 0.45); }
.editor-note dl div { display: flex; justify-content: space-between; gap: 20px; padding: 7px 0; }
.editor-note dt { color: rgba(23, 33, 27, 0.68); }
.editor-note dd { font-weight: 850; text-align: right; }

.contents { border-bottom: 1px solid var(--line); background: #fff; }
.contents-row { min-height: 62px; display: flex; align-items: center; gap: 22px; overflow-x: auto; white-space: nowrap; font-size: 0.83rem; }
.contents-row strong { color: var(--coral); text-transform: uppercase; }
.contents-row a { padding-block: 20px; border-bottom: 3px solid transparent; }
.contents-row a:hover { border-color: var(--green); }

.article-section { padding: 78px 0; }
.article-grid { display: grid; grid-template-columns: 190px minmax(0, 760px); gap: 55px; }
.section-index { padding-top: 10px; }
.prose h2, .casino-copy h2, .ledger h2 { margin-bottom: 24px; font-size: clamp(1.9rem, 3vw, 3rem); line-height: 1.1; }
.prose p, .casino-copy p, .ledger p { color: var(--muted); font-size: 1.02rem; }
.prose p + p, .casino-copy p + p { margin-top: 21px; }
.prose blockquote {
  margin: 34px 0;
  padding: 23px 26px;
  border-left: 5px solid var(--coral);
  color: var(--ink);
  background: #fff3ef;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.24rem;
  line-height: 1.55;
}

.feature-media { margin-top: 0; margin-bottom: 0; }
.feature-media img { aspect-ratio: 8 / 5; object-fit: cover; border-radius: 4px; }
.feature-media figcaption, .casino-media figcaption { padding-top: 11px; color: var(--muted); font-size: 0.83rem; }
.sport-section { padding-top: 64px; }

.casino-band { padding: 82px 0; border-block: 1px solid var(--ink); background: var(--soft); }
.casino-grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(390px, 1.08fr); gap: 58px; align-items: start; }
.casino-copy .section-index { color: var(--blue); }
.casino-media { position: sticky; top: 98px; margin: 0; }
.casino-media img { aspect-ratio: 8 / 5; object-fit: cover; border: 1px solid var(--ink); border-radius: 4px; }

.ledger { padding: 82px 0; color: #fff; background: var(--ink); }
.ledger .section-index { color: var(--yellow); }
.ledger-head { max-width: 800px; }
.ledger-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 34px; border-top: 1px solid rgba(255,255,255,0.35); }
.ledger-columns > div { padding: 34px 42px 0 0; }
.ledger-columns > div + div { padding-left: 42px; border-left: 1px solid rgba(255,255,255,0.35); }
.ledger h3 { margin-bottom: 16px; color: var(--yellow); font-size: 1.45rem; }
.ledger p { color: rgba(255,255,255,0.75); }
.mobile-section { background: var(--canvas); }

.final-action { padding: 48px 0; border-top: 1px solid var(--ink); background: var(--coral); }
.final-row { display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.final-row .edition { margin-bottom: 8px; color: var(--ink); }
.final-row h2 { max-width: 760px; margin-bottom: 0; font-size: clamp(1.65rem, 2.7vw, 2.6rem); line-height: 1.14; }
.final-action a { flex: 0 0 auto; }

.site-footer { padding: 30px 0; border-top: 1px solid var(--ink); }
.footer-row { display: grid; grid-template-columns: 150px 1fr auto; gap: 28px; align-items: center; }
.footer-row strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.25rem; }
.footer-row p { margin-bottom: 0; color: var(--muted); font-size: 0.82rem; }
.footer-row a { font-size: 0.82rem; font-weight: 800; }

@media (max-width: 920px) {
  .main-nav, .site-header .header-cta { display: none; }
  .mobile-action { position: sticky; top: 66px; z-index: 35; display: block; }
  .lead-grid { min-height: auto; grid-template-columns: 1fr; }
  .lead-copy { padding: 58px 0 48px; }
  .editor-note { padding: 34px 28px; border-top: 1px solid var(--ink); border-left: 0; }
  .article-grid { grid-template-columns: 130px minmax(0, 1fr); gap: 34px; }
  .casino-grid { grid-template-columns: 1fr; }
  .casino-media { position: static; }
}

@media (max-width: 640px) {
  html { scroll-padding-top: 124px; }
  .shell { width: min(calc(100% - 28px), var(--max)); }
  .header-row { min-height: 62px; }
  .wordmark { font-size: 1.35rem; }
  .mobile-action { top: 62px; }
  h1 { font-size: clamp(2rem, 10vw, 3rem); }
  .lead-copy { padding: 44px 0 38px; }
  .standfirst { font-size: 1.05rem; }
  .editor-note { padding-inline: 20px; }
  .contents-row { gap: 18px; }
  .article-section, .casino-band, .ledger { padding: 58px 0; }
  .article-grid { grid-template-columns: 1fr; gap: 8px; }
  .section-index { padding-top: 0; }
  .prose h2, .casino-copy h2, .ledger h2 { font-size: clamp(1.75rem, 8vw, 2.35rem); }
  .prose p, .casino-copy p, .ledger p { font-size: 0.98rem; }
  .feature-media { width: 100%; }
  .feature-media img { border-radius: 0; }
  .feature-media figcaption { padding-inline: 14px; }
  .casino-grid { gap: 32px; }
  .ledger-columns { grid-template-columns: 1fr; }
  .ledger-columns > div, .ledger-columns > div + div { padding: 28px 0 0; border-left: 0; }
  .ledger-columns > div + div { margin-top: 28px; border-top: 1px solid rgba(255,255,255,0.35); }
  .final-row { align-items: stretch; flex-direction: column; }
  .final-action a { width: 100%; }
  .footer-row { grid-template-columns: 1fr; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
