:root {
  color-scheme: light;
  --ink: #171717;
  --muted: #66635d;
  --paper: #f6f2e9;
  --coral: #db010b;
  --coral-dark: #a80008;
  --line: #d8d1c4;
}

* { box-sizing: border-box; }

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

.skip-link { position: fixed; z-index: 10; top: 0.5rem; left: 0.5rem; padding: 0.7rem 1rem; color: white; background: var(--ink); font-weight: 850; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  line-height: 1.5;
}

.site-header, main, footer { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; padding-block: 1.1rem; }
.brand { display: block; width: clamp(180px, 21vw, 250px); text-decoration: none; }
.brand img { display: block; width: 100%; height: auto; }
.brand:hover { opacity: 0.86; }
.site-header nav { display: flex; align-items: center; gap: 1.5rem; }
.site-header nav a { color: var(--ink); font-size: 0.85rem; font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 0.25rem; }

.scope, .eyebrow {
  color: var(--coral-dark);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

main { padding-bottom: 5rem; }
h1, h2, p { margin-top: 0; }

.home-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(250px, 0.75fr);
  min-height: 520px;
  overflow: hidden;
  color: white;
  background: var(--ink);
  border-top: 8px solid var(--coral);
  box-shadow: inset 0 4px 0 white;
}

.home-hero::after {
  position: absolute;
  right: -9%;
  bottom: -55%;
  width: 520px;
  height: 520px;
  background: var(--coral);
  border-radius: 50%;
  box-shadow: 0 0 0 4px white;
  content: "";
}

.hero-copy { z-index: 1; align-self: end; padding: clamp(2rem, 6vw, 4.5rem); }
.home-hero .eyebrow { color: #ff8581; }

h1 {
  max-width: 700px;
  margin-bottom: 1.5rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 0.92;
}

.lede { max-width: 620px; margin-bottom: 0; color: #d7d3cb; font-size: clamp(1rem, 2vw, 1.2rem); }
.hero-action { display: inline-block; margin-top: 1.75rem; padding: 0.8rem 1.1rem; color: var(--ink); background: white; font-weight: 850; text-decoration: none; }
.hero-action:hover { background: var(--paper); }

.hero-mark {
  z-index: 1;
  align-self: center;
  display: grid;
  width: min(90%, 330px);
  aspect-ratio: 1;
  place-items: center;
  padding: 2.5rem;
  background: var(--paper);
  border-radius: 50%;
  transform: rotate(-5deg);
}

.hero-mark img { display: block; width: 100%; height: auto; }
.numbers { color: white; background: var(--coral-dark); border-top: 4px solid white; }
.numbers dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; }
.numbers dl > div { padding: 1.35rem clamp(1.25rem, 4vw, 3rem); border-right: 1px solid rgb(255 255 255 / 25%); }
.numbers dl > div:last-child { border-right: 0; }
.numbers dd { margin: 0; font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 850; line-height: 1; }
.numbers dt { margin-top: 0.25rem; color: #ffd4d1; font-size: 0.78rem; text-transform: uppercase; }
.scope-note { margin: 1rem 0 0; color: var(--muted); font-size: 0.9rem; }
.scope-note a, footer a { color: var(--coral-dark); font-weight: 750; text-underline-offset: 0.2rem; }

.recent { padding-top: clamp(4rem, 9vw, 7rem); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding-bottom: 1.25rem; border-bottom: 3px solid var(--ink); }
h2 { margin-bottom: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 500; letter-spacing: -0.045em; line-height: 1; }
.section-heading > p { margin-bottom: 0; color: var(--muted); font-size: 0.9rem; }
.match-list { margin: 0; padding: 0; list-style: none; }

.match-row {
  display: grid;
  grid-template-columns: 130px minmax(340px, 1fr) minmax(180px, 0.6fr);
  align-items: center;
  gap: 1.5rem;
  min-height: 100px;
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
}

.match-meta, .match-context { display: flex; flex-direction: column; }
.match-meta time { font-weight: 800; }
.match-meta span, .match-code { color: var(--muted); font-size: 0.78rem; }
.match-code, .detail-link { width: fit-content; font-weight: 750; text-underline-offset: 0.2rem; }
.detail-link { margin-top: 0.2rem; color: var(--coral-dark); }
.match-fixture { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; font-size: clamp(1rem, 2vw, 1.25rem); }
.match-fixture strong:last-child { text-align: right; }
.match-fixture > span { min-width: 82px; padding: 0.45rem 0.7rem; color: white; background: var(--ink); text-align: center; font-weight: 850; }
.match-fixture i { padding-inline: 0.2rem; color: #aaa59d; font-style: normal; font-weight: 400; }
.match-context { align-items: end; color: var(--muted); font-size: 0.78rem; text-align: right; }
.result { color: var(--ink); font-weight: 850; text-transform: uppercase; }
.result-win { color: #237044; }
.result-loss { color: var(--coral-dark); }

.audience { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 8vw, 7rem); margin-top: clamp(4rem, 9vw, 7rem); padding-top: 2rem; border-top: 8px solid var(--coral); }
.audience h2 { max-width: 420px; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.audience p:last-child { max-width: 440px; margin: 1rem 0 0; color: var(--muted); }

.search-intro { padding: clamp(3rem, 8vw, 6rem) 0 2.5rem; border-top: 8px solid var(--coral); }
.search-intro h1 { margin-bottom: 1rem; }
.search-intro > p:last-child { max-width: 620px; color: var(--muted); font-size: 1.1rem; }
.form-error-summary { margin-bottom: 1rem; padding: 1.25rem 1.5rem; color: #5f2500; background: #fff0d5; border: 2px solid #d39b4b; }
.form-error-summary h2 { font-family: inherit; font-size: 1.15rem; font-weight: 850; letter-spacing: 0; }
.form-error-summary p { margin: 0.4rem 0 0; }
.form-error-summary ul { margin: 0.75rem 0 0; padding-left: 1.25rem; }
.form-error-summary a { color: inherit; font-weight: 750; text-underline-offset: 0.2rem; }

.search-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding: clamp(1.25rem, 4vw, 2.5rem); color: white; background: var(--ink); border-bottom: 5px solid var(--coral); }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field-wide { grid-column: span 2; }
.field label { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.field input, .field select { width: 100%; min-height: 46px; padding: 0.65rem 0.75rem; color: var(--ink); background: white; border: 2px solid white; border-radius: 0; font: inherit; }
.field input::placeholder { color: #777; }
.field-hint { color: #c9c4bb; font-size: 0.72rem; }
.field-hint-exact { color: white; font-weight: 750; }
.field-error { color: #ffb7b3; font-size: 0.75rem; font-weight: 750; }
.field [aria-invalid="true"] { border-color: #ff8581; }
.form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; margin-top: 0.5rem; }
.form-actions button { min-height: 46px; padding: 0.65rem 1.5rem; color: white; background: var(--coral); border: 0; font: inherit; font-weight: 850; cursor: pointer; }
.form-actions button:hover { background: var(--coral-dark); }
.form-actions a { color: white; font-weight: 700; text-underline-offset: 0.2rem; }

.search-results { padding-top: clamp(3rem, 7vw, 5rem); }
.results-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding-bottom: 1.25rem; border-bottom: 3px solid var(--ink); }
.results-heading > p { margin-bottom: 0; color: var(--muted); }
.search-summary { display: grid; grid-template-columns: repeat(6, 1fr); margin: 0; padding-block: 1.25rem; border-bottom: 1px solid var(--line); }
.search-summary div { padding-inline: 1rem; border-right: 1px solid var(--line); }
.search-summary div:first-child { padding-left: 0; }
.search-summary div:last-child { border-right: 0; }
.search-summary dd { margin: 0; font-size: 1.5rem; font-weight: 850; }
.search-summary dt { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; }
.search-match-row { grid-template-columns: 130px minmax(300px, 1fr) minmax(220px, 0.7fr); }
.pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding-top: 2rem; }
.pagination a { color: var(--coral-dark); font-weight: 800; text-underline-offset: 0.2rem; }
.pagination a:last-child { justify-self: end; }
.pagination > span { color: var(--muted); font-size: 0.85rem; }
.empty-state { padding: 3rem 0; border-bottom: 1px solid var(--line); }
.empty-state h3 { margin: 0 0 0.5rem; font-family: Georgia, "Times New Roman", serif; font-size: 1.75rem; }
.empty-state p { margin-bottom: 0; color: var(--muted); }

.error-page {
  min-height: 520px;
  padding: clamp(3rem, 10vw, 7rem) clamp(1.5rem, 6vw, 4.5rem);
  color: white;
  background: var(--ink);
  border-top: 8px solid var(--coral);
  box-shadow: inset 0 4px 0 white;
}
.error-page .eyebrow { color: #ff8581; }
.error-page > p:not(.eyebrow) { max-width: 620px; color: #d7d3cb; font-size: 1.1rem; }
.error-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.error-actions .hero-action { margin-top: 0; }
.error-actions > a:not(.hero-action) { color: white; font-weight: 750; text-underline-offset: 0.2rem; }

.about-page { padding-top: 1.5rem; }
.about-hero { padding: clamp(3rem, 8vw, 6rem) clamp(2rem, 6vw, 4.5rem); color: white; background: var(--ink); border-top: 8px solid var(--coral); box-shadow: inset 0 4px 0 white; }
.about-hero h1 { margin-bottom: 1.5rem; }
.about-hero > p:last-child { max-width: 760px; margin-bottom: 0; color: #d7d3cb; font-size: clamp(1rem, 2vw, 1.2rem); }
.about-hero .eyebrow { color: #ff8581; }
.snapshot { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 2rem clamp(2rem, 7vw, 6rem); padding: clamp(2.5rem, 7vw, 5rem) clamp(2rem, 5vw, 3.5rem); background: #ebe5d9; border-bottom: 1px solid var(--line); }
.snapshot dl { margin: 0; }
.snapshot dl > div { padding-block: 0.7rem; border-top: 1px solid #cfc6b7; }
.snapshot dt { color: var(--muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.snapshot dd { margin: 0.2rem 0 0; font-size: 1.15rem; font-weight: 800; }
.snapshot > p { grid-column: 2; margin: 0; color: var(--muted); }
.about-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.about-sections section { padding: clamp(2.5rem, 6vw, 4rem) clamp(2rem, 5vw, 3.5rem); background: var(--paper); }
.about-sections h2, .value-states h2, .snapshot h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.about-sections section > p:not(.eyebrow) { margin-top: 1.25rem; color: var(--muted); }
.about-sections section > p:last-child { margin-bottom: 0; }
.bibliography { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.bibliography h3 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.35rem; font-weight: 500; }
.bibliography ol { margin: 1rem 0 0; padding-left: 1.25rem; }
.bibliography li { padding: 0.45rem 0 0.45rem 0.35rem; }
.bibliography p { margin: 1rem 0 0; color: var(--muted); font-size: 0.85rem; }
.value-states { padding: clamp(3rem, 7vw, 5rem) clamp(2rem, 5vw, 3.5rem); }
.value-states dl { margin: 2rem 0 0; }
.value-states dl > div { display: grid; grid-template-columns: minmax(160px, 0.32fr) 1fr; gap: 1rem; padding-block: 0.9rem; border-top: 1px solid var(--line); }
.value-states dt { font-weight: 850; }
.value-states dd { margin: 0; color: var(--muted); }

.match-detail { padding-top: 1.5rem; }
.detail-back { padding-block: 1rem 1.5rem; }
.detail-back a { color: var(--ink); font-size: 0.85rem; font-weight: 800; text-underline-offset: 0.2rem; }
.detail-hero { padding: clamp(2rem, 6vw, 4rem); color: white; background: var(--ink); border-top: 8px solid var(--coral); box-shadow: inset 0 4px 0 white; }
.detail-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.detail-heading .eyebrow { color: #ff8581; }
.detail-date { margin: 0; color: #d7d3cb; font-weight: 750; }
.detail-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(0.75rem, 4vw, 2.5rem); margin-block: clamp(2rem, 6vw, 4rem); }
.detail-score strong { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.6rem, 5vw, 3.75rem); font-weight: 500; line-height: 1; }
.detail-score strong:last-child { text-align: right; }
.detail-score > span { min-width: clamp(100px, 15vw, 170px); padding: 0.65rem 1rem; color: var(--ink); background: white; font-size: clamp(1.6rem, 4vw, 3rem); font-weight: 900; text-align: center; }
.detail-score .score-state { display: block; font-size: 0.72rem; letter-spacing: 0.04em; line-height: 1.2; text-transform: uppercase; }
.detail-score i { color: var(--coral-dark); font-style: normal; font-weight: 400; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.detail-tags > span { padding: 0.35rem 0.65rem; background: rgb(255 255 255 / 12%); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; }
.detail-tags .result-win { color: #8ce0ae; }
.detail-tags .result-draw { color: var(--ink); background: white; }
.detail-tags .result-loss { color: #ff8581; }
.detail-tags .result-unknown { color: white; background: #55514b; border: 1px solid #aaa59d; }

.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.detail-card { padding: clamp(2rem, 5vw, 3.5rem); background: var(--paper); }
.detail-card h2, .goals-panel h2, .quality-note h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.fact-list { margin: 2rem 0 0; }
.fact-list > div { display: grid; grid-template-columns: minmax(100px, 0.36fr) 1fr; gap: 1rem; padding-block: 0.8rem; border-top: 1px solid var(--line); }
.fact-list dt { color: var(--muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.fact-list dd { margin: 0; font-weight: 700; }
.data-state { display: inline-block; padding: 0.18rem 0.45rem; color: #494640; background: #e2dcd0; border: 1px solid #bdb5a8; font-size: 0.72rem; font-weight: 850; letter-spacing: 0.03em; text-transform: uppercase; }
.data-state-unknown, .data-state-unresolved { color: #6f3800; background: #fff0d5; border-color: #d39b4b; }
.data-state-not_applicable { color: #3f4c5a; background: #e7edf2; border-color: #9ba9b5; }

.goals-panel { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: clamp(2rem, 7vw, 6rem); padding: clamp(2.5rem, 7vw, 5rem) clamp(2rem, 5vw, 3.5rem); border-bottom: 1px solid var(--line); }
.goal-list { margin: 0; padding: 0; list-style: none; }
.goal-list li { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.goal-list li:first-child { border-top: 1px solid var(--line); }
.goal-list span { color: var(--muted); font-size: 0.85rem; }
.goal-list small { grid-column: 1 / -1; color: var(--muted); }
.detail-empty { align-self: center; margin: 0; color: var(--muted); }

.quality-note { margin-top: clamp(2.5rem, 7vw, 5rem); padding: clamp(2rem, 5vw, 3.5rem); background: #ebe5d9; border-left: 6px solid var(--coral); }
.quality-note > p:not(.eyebrow) { max-width: 760px; margin-top: 1rem; color: var(--muted); }
.quality-list { max-width: 820px; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.quality-list li { display: grid; grid-template-columns: minmax(180px, 0.45fr) 1fr; gap: 1rem; padding-block: 0.8rem; border-top: 1px solid #cfc6b7; }
.quality-list strong { color: var(--ink); }
.quality-list span { color: var(--muted); }
.quality-note .record-id { margin-bottom: 0; color: var(--ink); font-size: 0.85rem; }

footer { display: flex; flex-direction: column; gap: 0.2rem; padding-block: 1.5rem 3rem; color: var(--muted); border-top: 1px solid var(--line); font-size: 0.85rem; }
footer strong { color: var(--ink); font-size: 1rem; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }

@media (max-width: 760px) {
  .home-hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-copy { padding: 3rem 1.5rem; }
  .hero-mark { display: none; }
  .numbers dl { grid-template-columns: repeat(3, 1fr); }
  .numbers dl > div { padding-inline: 1rem; }
  .match-row { grid-template-columns: 1fr; gap: 0.75rem; padding-block: 1.35rem; }
  .match-meta { flex-direction: row; justify-content: space-between; }
  .match-context { align-items: start; text-align: left; }
  .section-heading { align-items: start; flex-direction: column; gap: 0.75rem; }
  .search-form { grid-template-columns: 1fr 1fr; }
  .search-match-row { grid-template-columns: 1fr; }
  .search-summary { grid-template-columns: repeat(3, 1fr); row-gap: 1.25rem; }
  .results-heading { align-items: start; flex-direction: column; gap: 0.75rem; }
  .snapshot { grid-template-columns: 1fr; }
  .snapshot > p { grid-column: 1; }
  .about-sections { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .goals-panel { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .scope { display: none; }
  .site-header nav { gap: 0.8rem; }
  .site-header nav a { font-size: 0.76rem; }
  .numbers dl { grid-template-columns: 1fr; }
  .numbers dl > div { display: flex; align-items: baseline; gap: 0.65rem; border-right: 0; border-bottom: 1px solid rgb(255 255 255 / 25%); }
  .numbers dl > div:last-child { border-bottom: 0; }
  .match-fixture { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.55rem; }
  .match-fixture > span { min-width: 68px; }
  .audience { grid-template-columns: 1fr; }
  .search-form { grid-template-columns: 1fr; }
  .field-wide { grid-column: span 1; }
  .search-summary { grid-template-columns: 1fr 1fr; }
  .search-summary div, .search-summary div:first-child { padding-inline: 0; border-right: 0; }
  .pagination { grid-template-columns: 1fr 1fr; }
  .pagination > span { display: none; }
  .detail-heading { align-items: start; flex-direction: column; }
  .detail-score { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.5rem; }
  .detail-score strong { font-size: clamp(1.15rem, 7vw, 1.8rem); overflow-wrap: anywhere; }
  .detail-score > span { min-width: 76px; padding-inline: 0.5rem; font-size: 1.5rem; }
  .fact-list > div { grid-template-columns: 1fr; gap: 0.25rem; }
  .quality-list li { grid-template-columns: 1fr; gap: 0.25rem; }
  .value-states dl > div { grid-template-columns: 1fr; gap: 0.25rem; }
}