/* ==========================================================================
   Components — header, buttons, the scorecard, tournament card, news list,
   sponsor strip, footer. Hairlines and type do the work; no shadows, no
   rounded cards.
   ========================================================================== */

/* ------------------------------------------------------------ site header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--ivory) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--divider);
  background: color-mix(in srgb, var(--ivory) 96%, transparent);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 4.5rem;
}

.wordmark {
  font-family: var(--display);
  font-variation-settings: "opsz" 22, "SOFT" 20, "WONK" 0;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
}
.wordmark span {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--neutral);
}
.wordmark:hover { color: var(--court); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.nav a {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--ink) 78%, var(--ivory));
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 1.5px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--divider); }
.nav a[aria-current="page"] { color: var(--court); border-bottom-color: var(--court); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--divider);
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed;
    inset: 4.5rem 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ivory);
    border-bottom: 1px solid var(--divider);
    padding: var(--sp-2) var(--gutter) var(--sp-5);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav a {
    padding-block: 0.85rem;
    border-bottom: 1px solid var(--divider);
    font-size: 1.0625rem;
  }
  .nav a[aria-current="page"] { border-bottom-color: var(--court); }
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.6rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--court);
  background: var(--court);
  color: var(--ivory);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--court-soft); border-color: var(--court-soft); color: var(--ivory); }

.btn--ghost { background: transparent; color: var(--court); }
.btn--ghost:hover { background: var(--court); color: var(--ivory); }

/* Text link with a court-green underline that grows on hover. */
.link-underline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 0.3rem;
  background-image: linear-gradient(var(--court), var(--court));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1.5px;
  transition: background-size var(--dur) var(--ease), color var(--dur-fast) var(--ease);
}
.link-underline:hover { color: var(--court); background-size: 100% 3px; }
.link-underline::after { content: "→"; font-size: 0.9em; }

/* ================================================================ SCORECARD
   The signature module. Reads like a printed tennis scorecard: mono figures,
   a court-green header rule, hairline row separators, nothing else.
   ========================================================================= */
.scorecard {
  border-top: 2px solid var(--court);
  padding-top: var(--sp-4);
}

.scorecard__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.scorecard__title {
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.scorecard__meta {
  font-family: var(--mono);
  font-size: var(--step--2);
  color: var(--neutral);
  letter-spacing: 0.04em;
}

/* KPI band — four figures, hairline separated */
.scorecard__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}
.kpi {
  padding: var(--sp-5) var(--sp-4) var(--sp-5) 0;
  border-left: 1px solid var(--divider);
  padding-left: var(--sp-4);
}
.kpi:first-child { border-left: 0; padding-left: 0; }
.kpi__label {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--neutral);
  margin-bottom: var(--sp-3);
}
.kpi__value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 0.25em;
}
.kpi__value sup {
  font-size: 0.32em;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--brass);
  top: -1.4em;
}
.kpi__note {
  margin-top: var(--sp-3);
  font-size: 0.8125rem;
  color: var(--neutral);
  line-height: 1.45;
}

/* Record table */
.record { margin-top: var(--sp-6); }
.record table { font-variant-numeric: tabular-nums; }
.record caption {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--neutral);
  padding-bottom: var(--sp-3);
}
.record th, .record td {
  padding: 0.85rem 0.75rem;
  text-align: right;
  border-bottom: 1px solid var(--divider);
}
.record th:first-child, .record td:first-child {
  text-align: left;
  padding-left: 0;
}
.record td:last-child, .record th:last-child { padding-right: 0; }
.record thead th {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--neutral);
  border-bottom-color: var(--ink);
  padding-bottom: 0.6rem;
}
.record tbody th {
  font-family: var(--body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
}
.record tbody th small {
  display: block;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neutral);
  font-weight: 400;
  margin-top: 0.2rem;
}
.record tbody td {
  font-family: var(--mono);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink);
}
.record tbody tr:hover td, .record tbody tr:hover th { background: var(--ivory-deep); }
.record .is-empty { color: color-mix(in srgb, var(--neutral) 70%, var(--ivory)); }
.record .is-highlight { color: var(--brass); }

.scorecard__foot {
  margin-top: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: baseline;
  justify-content: space-between;
}

@media (max-width: 620px) {
  .record th, .record td { padding: 0.7rem 0.4rem; }
  .record tbody td { font-size: 0.9375rem; }
}

/* ======================================================== tournament card */
.tcard {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  border-top: 1px solid var(--ink);
  padding-top: var(--sp-5);
}
.tcard__label {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--court);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--sp-4);
}
.tcard__label::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--court);
  border-radius: 50%;
}
.tcard__name {
  font-family: var(--display);
  font-variation-settings: var(--display-axes);
  font-size: var(--step-3);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-3);
}
.tcard__where {
  font-size: 0.9375rem;
  color: var(--neutral);
}
.tcard__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--divider);
}
.tcard__facts div { display: grid; gap: 0.3rem; }
.tcard__facts dt {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--neutral);
}
.tcard__facts dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
}
.tcard__date {
  font-family: var(--mono);
  text-align: right;
  line-height: 1.05;
}
.tcard__date .d {
  display: block;
  font-size: clamp(2.6rem, 2rem + 2vw, 3.8rem);
  font-weight: 600;
  letter-spacing: -0.04em;
}
.tcard__date .m {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--neutral);
  margin-top: 0.4rem;
}
@media (max-width: 560px) {
  .tcard { grid-template-columns: 1fr; }
  .tcard__date { text-align: left; }
}

/* --------------------------------------------------------------- news list */
.newslist { display: grid; gap: 0; }
.newsitem {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) auto;
  gap: var(--sp-5);
  align-items: start;
  padding-block: var(--sp-5);
  border-top: 1px solid var(--divider);
  text-decoration: none;
  color: inherit;
}
.newsitem:last-child { border-bottom: 1px solid var(--divider); }
.newsitem__date {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neutral);
  padding-top: 0.4rem;
}
.newsitem__title {
  font-family: var(--display);
  font-variation-settings: var(--display-axes);
  font-size: var(--step-2);
  line-height: 1.08;
  letter-spacing: -0.015em;
  transition: color var(--dur-fast) var(--ease);
}
.newsitem__excerpt {
  margin-top: var(--sp-3);
  color: var(--neutral);
  font-size: 0.9375rem;
  max-width: 58ch;
}
.newsitem__thumb {
  width: 9rem;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.9);
  transition: filter var(--dur) var(--ease);
}
.newsitem:hover .newsitem__title { color: var(--court); }
.newsitem:hover .newsitem__thumb { filter: saturate(1); }
@media (max-width: 800px) {
  .newsitem { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .newsitem__thumb { width: 100%; }
}

/* ------------------------------------------------------------ sponsor strip */
/* A ruled four-up logo wall in the manner of a client grid: even cells,
   hairlines between every column and row, no cell background of its own so
   the page's ivory shows straight through.

   The row is always filled to four. With two or three partners signed, a
   half-empty row reads as an unfinished page; the remaining cells become
   "category open" tiles instead, which is both true and the actual pitch of
   this page. sponsors.js does that padding, so the count adapts on its own
   as partners are added in the admin.

   Grid is safe here precisely because the track count is fixed at four —
   the earlier bug was `auto-fit`, which collapses empty tracks and lets two
   real logos stretch across the whole row. */
.sponsors-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--divider);
}
.sponsor-slot {
  min-height: 9.5rem;
  display: grid;
  place-items: center;
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
  border-bottom: 1px solid var(--divider);
  border-right: 1px solid var(--divider);
  box-sizing: border-box;
}
.sponsor-slot:nth-child(4n) { border-right: 0; }
/* The link has to carry a definite width. As a shrink-to-fit grid item it
   has none, and the logo's `max-width: 100%` then resolves against nothing
   and collapses the image to 0x0 — it loads, but renders as an empty box. */
.sponsor-slot a { display: grid; place-items: center; width: 100%; }
.sponsor-slot img {
  max-height: 5rem;
  max-width: 82%;
  width: auto;
  height: auto;
  background: none;
  filter: grayscale(1);
  opacity: 0.72;
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.sponsor-slot a:hover img { filter: none; opacity: 1; }
.sponsor-slot__placeholder {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neutral);
}
/* Faint diagonal hatch: enough to read as "vacant" beside a real logo,
   quiet enough not to compete with one. */
.sponsor-slot--open {
  background: repeating-linear-gradient(135deg,
    transparent, transparent 9px,
    color-mix(in srgb, var(--divider) 70%, transparent) 9px,
    color-mix(in srgb, var(--divider) 70%, transparent) 10px);
}
.sponsor-slot__open-label {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neutral);
}
.sponsor-slot__open-cta {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--court);
  text-decoration: underline;
}
@media (max-width: 900px) {
  .sponsors-strip { grid-template-columns: repeat(2, 1fr); }
  .sponsor-slot:nth-child(4n) { border-right: 1px solid var(--divider); }
  .sponsor-slot:nth-child(2n) { border-right: 0; }
}
@media (max-width: 560px) {
  .sponsors-strip { grid-template-columns: 1fr; }
  /* Repeats the nth-child selectors rather than reaching for !important:
     the 900px rules above still match at this width, so an unqualified
     `.sponsor-slot` would lose to them on specificity. */
  .sponsor-slot,
  .sponsor-slot:nth-child(2n),
  .sponsor-slot:nth-child(4n) { border-right: 0; }
}

/* -------------------------------------------------------------------- footer */
.site-footer {
  border-top: 1px solid var(--divider);
  margin-top: var(--section-y);
  padding-block: var(--sp-8) var(--sp-6);
  background: var(--ivory-deep);
}
.site-footer__grid {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
}
.site-footer h2 {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--neutral);
  margin-bottom: var(--sp-4);
}
.footer-nav { display: grid; gap: var(--sp-3); }
.footer-nav a { color: var(--ink); text-decoration: none; font-size: 0.9375rem; }
.footer-nav a:hover { color: var(--court); text-decoration: underline; }
.site-footer__mark {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "SOFT" 24, "WONK" 1;
  font-size: var(--step-3);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 12ch;
}
.site-footer__legal {
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--divider);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--neutral);
}

/* ------------------------------------------------------------ figure / media */
.frame { position: relative; overflow: hidden; background: var(--ivory-deep); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame figcaption {
  position: absolute;
  left: 0; bottom: 0;
  padding: 0.5rem 0.75rem;
  background: color-mix(in srgb, var(--ivory) 92%, transparent);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neutral);
}
.img-loading { opacity: 0; transition: opacity var(--dur-slow) var(--ease); }
.img-loading.is-loaded { opacity: 1; }

/* ----------------------------------------------------------- result rows */
/* Compact "recent results" list beside the next-tournament card. */
.result-row {
  display: flex;
  gap: var(--sp-4);
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--divider);
  padding-bottom: var(--sp-3);
}
.result-row__event { font-size: 0.9375rem; }
.result-row__where { display: block; }
.result-row__round {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--neutral);
}
.result-row__round--win { color: var(--brass); }

/* "No." sits at label scale so the figure keeps the tabular rhythm. */
.kpi__unit {
  font-size: 0.34em;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neutral);
  align-self: flex-start;
  margin-top: 0.35em;
}

/* A tournament in progress announces itself: the dot pulses and the label
   turns brass. Derived from the dates, so it is right without anyone acting. */
.tcard__label--live { color: var(--brass); }
.tcard__label--live::before {
  background: var(--brass);
  animation: livepulse 1.8s var(--ease) infinite;
}
@keyframes livepulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brass) 55%, transparent); }
  70%      { box-shadow: 0 0 0 7px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .tcard__label--live::before { animation: none; }
}
.result-row__round--win { color: var(--gold); font-weight: 700; }
.result-row__round--runner { color: var(--silver-ink); font-weight: 700; }