/* =====================================================================
   Madera Municipal Golf Club — Design System
   ---------------------------------------------------------------------
   Earth-tone palette, refined serif headings (Fraunces) paired with
   clean sans body (Inter). Fluid type via clamp(). Mobile-first.
   ===================================================================== */

/* ---------- Custom properties ---------------------------------------- */

:root {
  /* Earth-tone palette */
  --c-cream:        #f7f3ea;   /* page background */
  --c-cream-soft:   #fbf8f1;   /* card / surface */
  --c-sand:         #e8d9b9;   /* warm sand */
  --c-sand-deep:    #c9b58a;
  --c-forest:       #2d5238;   /* primary — headings, buttons */
  --c-forest-deep:  #1e3a26;   /* hover / dark accent */
  --c-forest-soft:  #4a7355;
  --c-wood:         #6b4423;   /* secondary accent (weathered wood) */
  --c-clay:         #b86b3a;   /* warm CTA accent (muted clay) */
  --c-clay-hover:   #9d5728;
  --c-ink:          #2a2018;   /* body text — dark warm brown */
  --c-ink-soft:     #4a3e30;
  --c-muted:        #756a5d;   /* muted text, secondary labels */
  --c-line:         #d8cdb8;   /* hairlines, dividers */
  --c-line-soft:    #ece4d2;
  --c-white:        #ffffff;

  /* Status / utility */
  --c-success:      #4a7355;
  --c-warning:      #b86b3a;
  --c-error:        #a23b2e;
  --c-info:         #5b7a8a;

  /* Typography */
  --f-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --f-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid type scale */
  --fs-display: clamp(2.5rem,  4vw + 1.2rem, 4.5rem);
  --fs-h1:      clamp(2rem,    3vw + 1rem,   3.25rem);
  --fs-h2:      clamp(1.5rem,  1.6vw + 1rem, 2.25rem);
  --fs-h3:      clamp(1.25rem, 0.8vw + 1rem, 1.6rem);
  --fs-h4:      clamp(1.1rem,  0.3vw + 1rem, 1.25rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-tiny:    0.8125rem;

  /* Spacing scale */
  --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;
  --s-10: 8rem;

  /* Layout */
  --max-w:        1180px;
  --max-w-prose:  720px;
  --radius-sm:    6px;
  --radius:       10px;
  --radius-lg:    18px;
  --shadow-sm:    0 1px 2px rgba(42, 32, 24, 0.06), 0 1px 1px rgba(42, 32, 24, 0.04);
  --shadow:       0 4px 14px rgba(42, 32, 24, 0.08), 0 1px 3px rgba(42, 32, 24, 0.05);
  --shadow-lg:    0 14px 36px rgba(42, 32, 24, 0.12), 0 4px 10px rgba(42, 32, 24, 0.06);

  /* Motion */
  --ease:     cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast:   140ms;
  --t-base:   220ms;
  --t-slow:   400ms;
}

/* ---------- Reset / base ------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-serif);
  font-weight: 500;
  line-height: 1.15;
  color: var(--c-forest-deep);
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-4);
}
h1 { font-size: var(--fs-h1); font-weight: 600; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-family: var(--f-sans); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--c-forest);
  text-decoration: underline;
  text-decoration-color: rgba(45, 82, 56, 0.3);
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease);
}
a:hover { color: var(--c-clay); text-decoration-color: currentColor; }
a:focus-visible {
  outline: 2px solid var(--c-forest);
  outline-offset: 3px;
  border-radius: 2px;
}

img, svg { max-width: 100%; height: auto; display: block; }

hr {
  border: 0;
  height: 1px;
  background: var(--c-line);
  margin: var(--s-7) 0;
}

::selection { background: var(--c-sand); color: var(--c-forest-deep); }

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Skip link / a11y ---------------------------------------- */

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--c-forest-deep);
  color: var(--c-cream);
  padding: var(--s-3) var(--s-5);
  border-radius: 0 0 var(--radius) 0;
  text-decoration: none;
  font-weight: 600;
  z-index: 200;
}
.skip-link:focus { top: 0; }

.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;
}

/* ---------- Layout containers --------------------------------------- */

.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--s-5);
}
@media (min-width: 768px) {
  .container { padding: 0 var(--s-6); }
}
.container--narrow { max-width: var(--max-w-prose); }
/* Tighten body prose inside narrow prose columns on mobile so long
   sections (About MMGC, league info intros, payment-pending instructions,
   etc.) feel proportional to the smaller hero typography. */
@media (max-width: 600px) {
  .container--narrow p { font-size: 0.95rem; line-height: 1.5; margin-bottom: var(--s-3); }
}

.section {
  padding: var(--s-9) 0;
}
@media (max-width: 640px) {
  .section { padding: var(--s-7) 0; }
}

.section--tight { padding: var(--s-7) 0; }

/* Soft alternating section background */
.section--soft { background: var(--c-cream-soft); }
.section--sand { background: linear-gradient(180deg, var(--c-cream) 0%, var(--c-sand) 100%); }
.section--forest {
  background: var(--c-forest-deep);
  color: var(--c-cream);
}
.section--forest h1, .section--forest h2, .section--forest h3 { color: var(--c-cream); }
.section--forest a { color: var(--c-sand); }

/* ---------- Eyebrow / labels ---------------------------------------- */

.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: var(--fs-tiny);
  font-weight: 600;
  color: var(--c-clay);
  margin-bottom: var(--s-3);
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  background: var(--c-clay);
  vertical-align: middle;
  margin-right: var(--s-3);
}

.section-title {
  max-width: 36ch;
  margin-bottom: var(--s-3);
}
.section-lede {
  max-width: 60ch;
  color: var(--c-ink-soft);
  font-size: 1.125rem;
  margin-bottom: var(--s-6);
}

/* ---------- Buttons ------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.85rem 1.5rem;
  min-height: 44px;
  font-family: var(--f-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-base) var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--c-forest); outline-offset: 3px; }

.btn--primary {
  background: var(--c-forest);
  color: var(--c-cream);
}
.btn--primary:hover { background: var(--c-forest-deep); color: var(--c-cream); }

.btn--accent {
  background: var(--c-clay);
  color: var(--c-white);
}
.btn--accent:hover { background: var(--c-clay-hover); color: var(--c-white); }

.btn--ghost {
  background: transparent;
  color: var(--c-forest-deep);
  border-color: var(--c-line);
}
.btn--ghost:hover { background: var(--c-cream-soft); border-color: var(--c-forest); color: var(--c-forest-deep); }

.btn--lg { padding: 1.05rem 2rem; font-size: 1.0625rem; }

/* Inline link arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 600;
  text-decoration: none;
  color: var(--c-forest);
}
.link-arrow::after {
  content: "→";
  transition: transform var(--t-base) var(--ease);
}
.link-arrow:hover { color: var(--c-clay); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- Header / nav -------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 243, 234, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--c-line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-3) var(--s-5);
}
/* Mobile: claw back horizontal space so "Madera Municipal" / "Golf Club"
   fits on two lines (not three) next to the logo. nbsp in nav.php
   already locks the line break between Municipal and Golf. */
@media (max-width: 600px) {
  .site-header__inner { padding-left: var(--s-2); gap: var(--s-3); }
  .brand              { gap: var(--s-2); }
  .brand__name        { font-size: 1.05rem; }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--c-forest-deep);
}
.brand:hover { color: var(--c-forest-deep); text-decoration: none; }
.brand__mark { height: 60px; width: auto; flex-shrink: 0; }
@media (min-width: 768px) { .brand__mark { height: 70px; } }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--f-serif);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.brand__tag {
  font-size: var(--fs-tiny);
  color: var(--c-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav { display: flex; align-items: center; gap: var(--s-1); }
.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--s-1);
  align-items: center;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--c-ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav__link:hover { background: var(--c-cream-soft); color: var(--c-forest-deep); text-decoration: none; }
.nav__link[aria-current="page"] { color: var(--c-forest-deep); background: var(--c-sand); }
.nav__cta {
  margin-left: var(--s-3);
}
/* Tighter horizontal padding on the nav's Join MMGC button so it
   doesn't dominate the header. white-space: nowrap inherited from .btn
   keeps the label on one line. */
.nav__cta .btn { padding-left: var(--s-4); padding-right: var(--s-4); }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  color: var(--c-forest-deep);
}
.nav-toggle__icon {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  position: relative;
  transition: background var(--t-fast) var(--ease);
}
.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform var(--t-base) var(--ease), top var(--t-base) var(--ease);
}
.nav-toggle__icon::before { top: -7px; }
.nav-toggle__icon::after  { top:  7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 1024px) {
  .nav-toggle { display: inline-flex; align-items: center; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--c-cream);
    border-bottom: 1px solid var(--c-line);
    padding: var(--s-3) var(--s-5) var(--s-5);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    /* Transition lives on .is-open (not here) so the drawer doesn't
       flash open when the media query toggles during a window resize.
       Trade-off: closing snaps instead of fading. Open still animates. */
  }
  .nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
  }
  .nav__list { flex-direction: column; align-items: stretch; gap: var(--s-1); width: 100%; }
  .nav__link { padding: var(--s-3) var(--s-4); font-size: 1rem; min-height: 44px; }
  .nav__cta { margin: var(--s-3) 0 0; width: 100%; }
  .nav__cta .btn { width: 100%; }
}

/* ---------- Hero ---------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: var(--s-5) 0 var(--s-6);
  background:
    radial-gradient(1100px 600px at 80% 10%, rgba(232, 217, 185, 0.55), transparent 60%),
    linear-gradient(180deg, var(--c-cream) 0%, var(--c-cream-soft) 100%);
}
/* Stacked at every viewport width:
   1. heading (eyebrow + h1)
   2. clubhouse photo (panoramic banner on wide screens, compact on narrow)
   3. lede paragraph + CTAs
   Tight spacing applied at every width so the Join MMGC button stays
   above the fold on standard viewports. */
.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
.hero__title {
  font-size: var(--fs-h1);
  line-height: 1.05;
  margin-bottom: var(--s-1);
}
.hero__title em {
  font-style: italic;
  color: var(--c-clay);
}
/* Two stacked lines on narrow screens (each line nowrap to prevent ugly mid-phrase wraps).
   Inline on screens wide enough to fit "Madera's home for community golf." on a single line. */
.hero__title-line {
  display: block;
  white-space: nowrap;
}
@media (min-width: 760px) {
  .hero__title-line { display: inline; white-space: normal; }
}
.hero__lede {
  font-size: 1.1rem;
  line-height: 1.5;
  max-width: 50ch;
  color: var(--c-ink-soft);
  margin-bottom: var(--s-3);
}
@media (max-width: 600px) {
  .hero                { padding: var(--s-3) 0 var(--s-4); }
  .hero .eyebrow       { font-size: 0.7rem; letter-spacing: 0.14em; }
  .hero__title         { margin-bottom: var(--s-1); }
  .hero__lede          { font-size: 0.95rem; line-height: 1.45; margin-bottom: var(--s-2); }
}
/* Let the welcome paragraph breathe wider (modest size bump) so it feels
   proportional to the panoramic photo above on larger screens. */
@media (min-width: 760px) {
  .hero__lede { max-width: 70ch; }
}
@media (min-width: 1100px) {
  .hero__lede { font-size: 1.2rem; max-width: 80ch; }
}
.hero__cta { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.hero__visual {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 5 / 4;
  background: var(--c-sand);
  box-shadow: var(--shadow-lg);
  position: relative;
  max-width: 100%;
  /* Cap the photo height so the rest of the hero (lede + Join MMGC button)
     stays visible above the fold on a standard viewport. With aspect-ratio
     above, the box will be whichever is smaller: aspect-derived height or
     max-height. object-fit: cover on the inner <img> crops centered. */
  max-height: 44vh;
}
@media (max-width: 600px) {
  .hero__visual { max-height: 32vh; }
}
/* Panoramic banner on wider screens. Native photo is 4000x1845 (~13/6),
   so on the widest screens we use ~native so the full top of the trees and
   the front lawn both stay in frame. */
@media (min-width: 760px) {
  .hero__visual { aspect-ratio: 2 / 1; max-height: 46vh; }
}
@media (min-width: 1100px) {
  .hero__visual { aspect-ratio: 13 / 6; max-height: 48vh; }
}
/* Center the whole hero composition at every viewport so the photo and
   the text column always share a centered axis. On narrow screens these
   rules are no-ops (everything already fills the container) but on
   wider screens they keep the layout from sprawling left. */
.hero__heading { text-align: center; }
.hero__lede    { margin-left: auto; margin-right: auto; }
.hero__cta     { justify-content: center; }
.hero__visual  { margin-left: auto; margin-right: auto; }
@media (min-width: 1100px) {
  .hero__visual { max-width: 1000px; }
}
.hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__badge {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  background: rgba(247, 243, 234, 0.95);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: var(--fs-small);
  color: var(--c-forest-deep);
}
.hero__badge strong { font-family: var(--f-serif); font-size: 0.95rem; display: block; line-height: 1.3; }

/* ---------- Cards --------------------------------------------------- */

.card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--s-5);
  /* Subtle resting elevation so cards pop off cream-soft section backgrounds */
  box-shadow: 0 1px 2px rgba(30, 58, 38, 0.04),
              0 4px 12px rgba(30, 58, 38, 0.05);
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--c-sand-deep);
}

.card--feature {
  padding: var(--s-6);
  border-radius: var(--radius-lg);
}

.card-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .card-grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* Tournament card */
.t-card { display: flex; flex-direction: column; gap: var(--s-3); }
.t-card__date {
  font-size: var(--fs-small);
  color: var(--c-clay);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.t-card__title {
  font-family: var(--f-serif);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--c-forest-deep);
  margin: 0;
}
.t-card__meta {
  font-size: var(--fs-small);
  color: var(--c-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
}
.t-card__meta span { display: inline-flex; align-items: center; gap: var(--s-2); }
.t-card__footer { margin-top: auto; padding-top: var(--s-3); }

/* Quick-link tile */
.tile {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  background: var(--c-cream-soft);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--c-ink);
  min-height: 180px;
  position: relative;
  overflow: hidden;
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              background var(--t-base) var(--ease);
}
.tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  background: var(--c-white);
  color: var(--c-ink);
  text-decoration: none;
}
.tile__icon {
  width: 36px;
  height: 36px;
  color: var(--c-forest);
  margin-bottom: var(--s-1);
}
.tile__title {
  font-family: var(--f-serif);
  font-size: 1.25rem;
  color: var(--c-forest-deep);
  margin: 0;
}
.tile__desc { color: var(--c-muted); font-size: var(--fs-small); flex: 1; }
.tile__arrow {
  position: absolute;
  right: var(--s-5);
  bottom: var(--s-5);
  font-size: 1.25rem;
  color: var(--c-clay);
  transition: transform var(--t-base) var(--ease);
}
.tile:hover .tile__arrow { transform: translateX(4px); }

/* ---------- Forms --------------------------------------------------- */

.form { display: grid; gap: var(--s-4); }

.field { display: grid; gap: var(--s-2); }
.field__label {
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--c-ink);
}
.field__label .required { color: var(--c-clay); margin-left: 2px; }
.field__hint { font-size: var(--fs-tiny); color: var(--c-muted); }

.input, .textarea, .select {
  width: 100%;
  padding: 0.75rem 0.95rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--c-ink);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  min-height: 44px;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--c-forest);
  box-shadow: 0 0 0 3px rgba(45, 82, 56, 0.15);
}
.input--error { border-color: var(--c-error); }
.field__error { font-size: var(--fs-tiny); color: var(--c-error); }

/* Honeypot — never display, always tab-out */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ---------- Tables -------------------------------------------------- */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--c-cream-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.data-table th, .data-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--c-line-soft);
  font-size: var(--fs-small);
}
.data-table th {
  background: var(--c-sand);
  color: var(--c-forest-deep);
  font-weight: 600;
  font-size: var(--fs-tiny);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.data-table tbody tr:hover { background: var(--c-white); }
.data-table tbody tr:last-child td { border-bottom: 0; }

/* ---------- Callout / alert ----------------------------------------- */

.callout {
  border-left: 4px solid var(--c-clay);
  background: rgba(232, 217, 185, 0.4);
  padding: var(--s-4) var(--s-5);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
}
.callout--info    { border-color: var(--c-info);    background: rgba(91, 122, 138, 0.12); }
.callout--success { border-color: var(--c-success); background: rgba(74, 115, 85,  0.12); }
.callout--error   { border-color: var(--c-error);   background: rgba(162, 59, 46,  0.10); }
.callout--warning { border-color: #b07d2a;           background: rgba(176, 125, 42, 0.10); }

/* ---------- Badges -------------------------------------------------- */

.badge {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  background: var(--c-sand);
  color: var(--c-forest-deep);
}
.badge--accent { background: var(--c-clay); color: var(--c-white); }
.badge--ghost { background: transparent; border: 1px solid var(--c-line); color: var(--c-ink-soft); }

/* ---------- Footer -------------------------------------------------- */

.site-footer {
  background: var(--c-forest-deep);
  color: rgba(247, 243, 234, 0.85);
  padding: var(--s-8) 0 var(--s-6);
  margin-top: var(--s-9);
}
.site-footer a { color: var(--c-sand); }
.site-footer a:hover { color: var(--c-white); }

.site-footer__grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr; }
}
.site-footer__brand {
  font-family: var(--f-serif);
  font-size: 1.3rem;
  color: var(--c-cream);
  margin-bottom: var(--s-2);
}
.site-footer__tag { font-size: var(--fs-small); color: rgba(247, 243, 234, 0.7); max-width: 36ch; }
.site-footer__heading {
  font-size: var(--fs-tiny);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-sand);
  margin-bottom: var(--s-3);
}
.site-footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); font-size: var(--fs-small); }
.site-footer__bottom {
  border-top: 1px solid rgba(247, 243, 234, 0.12);
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--fs-tiny);
  color: rgba(247, 243, 234, 0.6);
}

/* ---------- Scroll-in animation ------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Utility ------------------------------------------------- */

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-3 { margin-bottom: var(--s-3); }
.mb-5 { margin-bottom: var(--s-5); }
.mb-7 { margin-bottom: var(--s-7); }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.gap-3 { gap: var(--s-3); }
.gap-5 { gap: var(--s-5); }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* ---------- Page header (inner pages) -------------------------------- */

.page-header {
  background:
    radial-gradient(800px 360px at 90% 0%, rgba(232, 217, 185, 0.55), transparent 65%),
    linear-gradient(180deg, var(--c-cream-soft) 0%, var(--c-cream) 100%);
  padding: var(--s-7) 0 var(--s-7);
  border-bottom: 1px solid var(--c-line-soft);
}
.page-header__inner { max-width: 56ch; }
.page-header__title {
  font-size: var(--fs-h1);
  margin-bottom: var(--s-3);
}
.page-header__lede {
  font-size: 1.15rem;
  color: var(--c-ink-soft);
  margin-bottom: 0;
}

/* ---------- TOC layout (sticky sidebar) ------------------------------ */

.toc-layout {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .toc-layout { grid-template-columns: 240px 1fr; gap: var(--s-7); }
}

.toc-nav {
  position: relative;
}
@media (min-width: 960px) {
  .toc-nav {
    position: sticky;
    top: 96px;
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
}
.toc-nav__title {
  font-size: var(--fs-tiny);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-muted);
  font-weight: 600;
  margin-bottom: var(--s-3);
}
.toc-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 1px solid var(--c-line);
}
.toc-nav__list li { margin: 0; }
.toc-nav__link {
  display: block;
  padding: var(--s-2) var(--s-3);
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.toc-nav__link:hover {
  color: var(--c-forest-deep);
  border-color: var(--c-forest);
  background: var(--c-cream-soft);
  text-decoration: none;
}
.toc-nav__link.is-active {
  color: var(--c-forest-deep);
  border-color: var(--c-clay);
  font-weight: 600;
  background: var(--c-cream-soft);
}

/* On mobile, the TOC becomes a collapsed "jump to" details element */
.toc-nav--mobile {
  margin-bottom: var(--s-5);
}
.toc-nav--mobile summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s-3) var(--s-4);
  background: var(--c-cream-soft);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--fs-small);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.toc-nav--mobile summary::-webkit-details-marker { display: none; }
.toc-nav--mobile summary::after {
  content: "+";
  font-size: 1.2rem;
  line-height: 1;
  transition: transform var(--t-fast) var(--ease);
}
.toc-nav--mobile[open] summary::after { transform: rotate(45deg); }
.toc-nav--mobile .toc-nav__list { margin-top: var(--s-3); }
@media (min-width: 960px) {
  .toc-nav--mobile { display: none; }
}
.toc-nav--desktop { display: none; }
@media (min-width: 960px) {
  .toc-nav--desktop { display: block; }
}

/* ---------- Prose / long-form content ------------------------------- */

.prose {
  max-width: 65ch;
  color: var(--c-ink);
}
.prose h2 {
  font-size: var(--fs-h2);
  margin-top: var(--s-7);
  scroll-margin-top: 80px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: 1.3rem;
  margin-top: var(--s-5);
  scroll-margin-top: 80px;
  font-family: var(--f-sans);
  font-weight: 600;
  color: var(--c-forest-deep);
  letter-spacing: 0;
}
.prose p { margin-bottom: var(--s-4); }
.prose ul, .prose ol {
  margin: 0 0 var(--s-4);
  padding-left: 1.5rem;
}
.prose ul li, .prose ol li { margin-bottom: var(--s-2); }
.prose ul li::marker { color: var(--c-clay); }
.prose strong { color: var(--c-forest-deep); }

.prose-anchor {
  display: inline-block;
  margin-left: var(--s-2);
  color: var(--c-line);
  font-size: 0.85em;
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.prose h2:hover .prose-anchor,
.prose h3:hover .prose-anchor { opacity: 1; }
.prose-anchor:hover { color: var(--c-clay); }

/* Bylaw articles */
.bylaw-article {
  border-left: 3px solid var(--c-sand);
  padding-left: var(--s-4);
  margin-bottom: var(--s-6);
}
.bylaw-article__id {
  font-size: var(--fs-tiny);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-clay);
  font-weight: 600;
  margin-bottom: var(--s-1);
}

/* TODO placeholder block on League Info points-system section */
.todo-block {
  background:
    repeating-linear-gradient(135deg,
      rgba(184, 107, 58, 0.06) 0,
      rgba(184, 107, 58, 0.06) 12px,
      transparent 12px,
      transparent 24px);
  border: 1px dashed var(--c-clay);
  padding: var(--s-5);
  border-radius: var(--radius);
  color: var(--c-ink-soft);
}
.todo-block strong { color: var(--c-clay); }

/* ---------- Form grid (2-column on desktop) ------------------------- */

.form-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
}
.field--full { grid-column: 1 / -1; }

.form-section {
  background: var(--c-cream-soft);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
}
.form-section__title {
  font-family: var(--f-serif);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--c-forest-deep);
  margin-bottom: var(--s-2);
}
.form-section__lede {
  color: var(--c-muted);
  font-size: var(--fs-small);
  margin-bottom: var(--s-5);
}
.form-section__submit {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line-soft);
  display: flex;
  gap: var(--s-3);
  align-items: center;
  flex-wrap: wrap;
}

/* Sidebar info card next to a form (benefits / what-next) */
.form-side {
  background: var(--c-forest-deep);
  color: var(--c-cream);
  padding: var(--s-6);
  border-radius: var(--radius-lg);
}
.form-side h2, .form-side h3 { color: var(--c-cream); }
.form-side__price {
  font-family: var(--f-serif);
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1.05;
  margin-bottom: var(--s-2);
  color: var(--c-sand);
}
.form-side__price small {
  display: block;
  font-family: var(--f-sans);
  font-size: var(--fs-small);
  font-weight: 400;
  color: rgba(247, 243, 234, 0.75);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: var(--s-1);
}
.form-side__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-2);
}
.form-side__list li {
  padding-left: 1.5rem;
  position: relative;
  font-size: var(--fs-small);
  color: rgba(247, 243, 234, 0.9);
}
.form-side__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--c-sand);
  font-weight: 700;
}

.form-layout {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .form-layout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr); }
}

/* ---------- Payment methods (Zelle / Venmo / CashApp) --------------- */

.payment-methods {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
/* minmax(0, 1fr) forces equal columns even when one card has a long
   unbreakable handle string (e.g. the Zelle email). Without the 0 floor,
   1fr is treated as minmax(auto, 1fr) and the longest min-content wins.
   max-width + auto margins keep the 3-card row from stretching edge-to-
   edge on wide screens — it stays centered under the $30 header. */
@media (min-width: 640px) {
  .payment-methods {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
}

.payment-card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--s-4);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.payment-card__label {
  font-weight: 600;
  color: var(--c-forest-deep);
  font-size: 1rem;
}
/* QR container is responsive: fills the card content area up to 180px
   max, and stays square via aspect-ratio (was fixed 180x180 which
   overflowed the right edge of cards on narrower-than-180px content
   areas — the form-section padding + container--narrow squeeze gives
   ~150-170px usable card width). */
.payment-card__qr {
  background: var(--c-cream);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-sm);
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}
/* Image fills its now-flexible container. image-rendering hints keep
   the Cash App circular-dot pattern crisp under downscaling. */
.payment-card__qr img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.payment-card__handle {
  font-family: var(--f-mono);
  font-size: var(--fs-small);
  color: var(--c-muted);
  overflow-wrap: anywhere;
  /* Reserve room for 2 lines of mono text so cards stay the same height
     across the row regardless of whether a particular handle is 1 line
     (Venmo, Cash App) or 2 lines (the long Zelle email). With this,
     every QR sits at the same vertical position across the 3-card row. */
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ---------- Calendar table (League Info) ---------------------------- */

.data-table .nowrap { white-space: nowrap; }

.calendar-row--meeting td {
  color: var(--c-muted);
  background: rgba(232, 217, 185, 0.18);
  font-style: italic;
}

.calendar-row--banner td {
  background: var(--c-forest-deep);
  color: var(--c-cream);
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: 1.05rem;
  text-align: center;
  letter-spacing: 0.02em;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* ---------- Leaderboard --------------------------------------------- */

.leaderboard-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  margin-bottom: var(--s-4);
  font-size: var(--fs-small);
  color: var(--c-muted);
}

.leaderboard-table { font-variant-numeric: tabular-nums; }
.leaderboard-table .right { text-align: right; }
.leaderboard-table th.right { text-align: right; }
.leaderboard-table .player { font-weight: 600; color: var(--c-ink); }

.leaderboard-rank {
  font-weight: 700;
  color: var(--c-forest-deep);
  white-space: nowrap;
  width: 70px;
}

.leaderboard-row--poy .leaderboard-rank,
.leaderboard-row--poy .player {
  color: var(--c-clay);
}
.leaderboard-row--poy {
  background: linear-gradient(90deg, rgba(184, 107, 58, 0.10) 0%, rgba(184, 107, 58, 0.02) 100%);
}
.leaderboard-row--rank-1 {
  background: linear-gradient(90deg, rgba(184, 107, 58, 0.18) 0%, rgba(184, 107, 58, 0.04) 100%);
}

.leaderboard-medal {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  background: var(--c-clay);
  box-shadow: 0 0 0 2px rgba(184, 107, 58, 0.25);
}
.leaderboard-row--rank-1 .leaderboard-medal { background: #d4a04e; }   /* gold */
.leaderboard-row--rank-2 .leaderboard-medal { background: #b8b8b8; }   /* silver */
.leaderboard-row--rank-3 .leaderboard-medal { background: var(--c-clay); } /* bronze */
.leaderboard-row--inactive td { color: var(--c-muted); opacity: 0.6; }
.leaderboard-row--inactive .player { font-weight: 400; color: var(--c-muted); }

/* ---------- Misc helpers ------------------------------------------- */

.lead { font-size: 1.15rem; color: var(--c-ink-soft); }
.divider {
  height: 1px;
  background: var(--c-line);
  margin: var(--s-6) 0;
}

/* ---------- Tournament card extensions ------------------------------ */

.t-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
}
.t-card__status {
  flex-shrink: 0;
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(30, 58, 38, 0.18);
}
.t-card__status--upcoming  { background: var(--c-forest);    color: var(--c-cream); }
.t-card__status--completed { background: var(--c-clay);      color: #fff; }
/* On the tournaments page only, the "Details & Register" CTA inside an
   upcoming card uses .btn--accent. Override to forest so the upcoming
   card reads as a single green theme. */
.t-card .btn--accent          { background: var(--c-forest); color: var(--c-cream); }
.t-card .btn--accent:hover    { background: var(--c-forest-deep); color: var(--c-cream); }
.t-card__needs-partner {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-tiny);
  color: var(--c-wood);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.t-card__needs-partner::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-wood);
  display: inline-block;
}

/* ---------- Tournament detail stat strip ----------------------------- */

.t-banner {
  background: var(--c-cream-soft);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4) var(--s-5);
  margin-top: calc(var(--s-7) * -1);
  margin-bottom: var(--s-6);
  position: relative;
  box-shadow: var(--shadow-sm);
}
@media (min-width: 720px) { .t-banner { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1020px) { .t-banner { grid-template-columns: repeat(6, 1fr); } }

.t-banner__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.t-banner__label {
  font-size: var(--fs-tiny);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-muted);
  font-weight: 600;
}
.t-banner__value {
  font-family: var(--f-serif);
  font-size: 1.15rem;
  color: var(--c-forest-deep);
  font-weight: 500;
  line-height: 1.2;
}
.t-banner__value--accent { color: var(--c-clay); }

/* ---------- Detail-page section heads ------------------------------- */

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

/* ---------- Results table extensions -------------------------------- */

.results-table { width: 100%; }
.results-table .place {
  font-weight: 700;
  color: var(--c-forest-deep);
  width: 60px;
  text-align: center;
}
.results-table .place--podium { color: var(--c-clay); }
.results-table .player { font-weight: 600; }
.results-table .score, .results-table .payout {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.results-table .ghin {
  font-family: var(--f-mono);
  font-size: var(--fs-tiny);
  color: var(--c-muted);
}
.results-table .score--under-par { color: #b03a2e; }
.results-table .team-separator td { border-top: 2px solid #b8aa96; }
.score-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  min-width: 1.5em;
  line-height: 1;
  vertical-align: middle;
  outline: 1.5px solid currentColor;
  outline-offset: 3px;
  border-radius: 50%;
}
.score-circle--net { color: currentColor; }
.score-circle--lg  { color: #2d5238; outline-color: #2d5238; }
.trophy-tag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 5px;
  border-radius: 3px;
  background: #2d5238;
  color: #fff;
  line-height: 1;
}
.ln-tag {
  flex-shrink: 0;
  padding: 1px 6px;
  border-radius: 3px;
  background: #5b7a8a;
  color: #fff;
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.results-table th[data-sort] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.results-table th[data-sort]::after {
  content: ' \2195';
  opacity: 0.65;
  font-size: 1em;
}
.results-table th[data-sort-dir="asc"]::after {
  content: ' \2191';
  opacity: 1;
}
.results-table th[data-sort-dir="desc"]::after {
  content: ' \2193';
  opacity: 1;
}

/* ---------- Schedule (event list) ----------------------------------- */

.event-month {
  font-family: var(--f-serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--c-forest-deep);
  margin-top: var(--s-7);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-line);
}
.event-month:first-child { margin-top: 0; }

.event-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--c-line-soft);
  align-items: start;
}
.event-row:last-child { border-bottom: 0; }
@media (min-width: 720px) {
  .event-row { grid-template-columns: 80px 1fr auto; }
}

.event-row__date {
  background: var(--c-sand);
  border-radius: var(--radius-sm);
  padding: var(--s-2) var(--s-3);
  text-align: center;
  align-self: start;
}
.event-row__day {
  font-family: var(--f-serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--c-forest-deep);
  line-height: 1;
}
.event-row__weekday {
  font-size: var(--fs-tiny);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-ink-soft);
  margin-top: 2px;
}

.event-row__body { display: flex; flex-direction: column; gap: var(--s-2); }
.event-row__title {
  font-family: var(--f-serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--c-forest-deep);
  margin: 0;
}
.event-row__title a { color: inherit; text-decoration: none; }
.event-row__title a:hover { color: var(--c-clay); }
.event-row__meta {
  font-size: var(--fs-small);
  color: var(--c-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.event-row__meta span { display: inline-flex; align-items: center; gap: var(--s-1); }

.event-row__type {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  align-self: flex-start;
}
.event-row__type--tournament { background: var(--c-clay); color: var(--c-white); }
.event-row__type--meeting    { background: rgba(91, 122, 138, 0.18); color: var(--c-info); }
.event-row__type--social     { background: var(--c-sand); color: var(--c-forest-deep); }
.event-row__type--deadline   { background: rgba(162, 59, 46, 0.12); color: var(--c-error); }

.event-row__cta {
  justify-self: end;
  align-self: center;
}

/* Schedule legend */
.schedule-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  font-size: var(--fs-small);
  color: var(--c-muted);
}
.schedule-legend__item { display: inline-flex; align-items: center; gap: var(--s-2); }
.schedule-legend__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}

/* ---------- Results archive cards ----------------------------------- */

.year-section {
  margin-bottom: var(--s-8);
}
.year-section__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-line);
}
.year-section__year {
  font-family: var(--f-serif);
  font-size: 2.25rem;
  font-weight: 600;
  color: var(--c-forest-deep);
  margin: 0;
}
.year-section__count {
  font-size: var(--fs-small);
  color: var(--c-muted);
}

.result-card {
  background: var(--c-cream-soft);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius);
  padding: var(--s-5);
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.result-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.result-card__head { display: flex; flex-direction: column; gap: var(--s-1); }
.result-card__date {
  font-size: var(--fs-small);
  color: var(--c-clay);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.result-card__title {
  font-family: var(--f-serif);
  font-size: 1.3rem;
  font-weight: 500;
  margin: 0;
  color: var(--c-forest-deep);
}
.result-card__title a { color: inherit; text-decoration: none; }
.result-card__title a:hover { color: var(--c-clay); }
.result-card__format { font-size: var(--fs-small); color: var(--c-muted); }

.podium {
  display: grid;
  gap: var(--s-2);
}
.podium__row {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: var(--fs-small);
}
.podium__place {
  font-family: var(--f-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-clay);
  width: 26px;
}
.podium__name { font-weight: 600; color: var(--c-ink); }
.podium__score { color: var(--c-muted); font-variant-numeric: tabular-nums; margin-left: auto; }

/* ---------- Reused: form CTA bar ------------------------------------ */

.cta-bar {
  background: var(--c-cream-soft);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius);
  padding: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
  justify-content: space-between;
}
.cta-bar__text { color: var(--c-ink-soft); }

/* =====================================================================
   ADMIN PANEL — utilitarian, mobile-usable
   ===================================================================== */

.admin-body { background: #eef0e8; }

/* Top bar */
.admin-topbar {
  background: var(--c-forest-deep);
  color: var(--c-cream);
  padding: var(--s-3) var(--s-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.admin-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--c-cream);
  text-decoration: none;
  font-family: var(--f-serif);
  font-size: 1.05rem;
  font-weight: 600;
}
.admin-brand:hover { color: var(--c-cream); text-decoration: none; }
.admin-brand img { height: 60px; width: auto; flex-shrink: 0; }
@media (min-width: 768px) { .admin-brand img { height: 70px; } }
.admin-brand small {
  display: inline-block;
  margin-left: var(--s-2);
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-sand);
  padding: 2px 8px;
  border: 1px solid rgba(232, 217, 185, 0.4);
  border-radius: 3px;
}

.admin-topbar__right {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-size: var(--fs-small);
}
.admin-topbar__right a {
  color: var(--c-cream);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 4px;
}
.admin-topbar__right a:hover { background: rgba(247, 243, 234, 0.1); color: var(--c-cream); }
.admin-topbar__user { color: rgba(247, 243, 234, 0.75); }
.admin-topbar__user strong { color: var(--c-cream); }

/* Shell layout */
.admin-shell {
  display: grid;
  grid-template-columns: 1fr;
  min-height: calc(100vh - 56px);
}
@media (min-width: 800px) {
  .admin-shell { grid-template-columns: 220px 1fr; }
}

/* Side nav */
.admin-nav {
  background: var(--c-cream-soft);
  border-bottom: 1px solid var(--c-line);
  padding: var(--s-3) var(--s-3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.admin-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2px;
  white-space: nowrap;
}
.admin-nav__link {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-ink-soft);
  text-decoration: none;
  border-radius: 6px;
  min-height: 40px;
}
.admin-nav__link:hover { background: var(--c-sand); color: var(--c-forest-deep); text-decoration: none; }
.admin-nav__link.is-active {
  background: var(--c-forest);
  color: var(--c-cream);
}
.admin-nav__link.is-active:hover { background: var(--c-forest-deep); color: var(--c-cream); }
@media (min-width: 800px) {
  .admin-nav {
    border-bottom: 0;
    border-right: 1px solid var(--c-line);
    overflow-x: visible;
  }
  .admin-nav__list { flex-direction: column; gap: 2px; }
  .admin-nav__link { display: flex; }
}

.admin-main {
  padding: var(--s-5) var(--s-4);
  max-width: 1400px;
}
@media (min-width: 800px) {
  .admin-main { padding: var(--s-5); }
}

/* Headings + page chrome */
.admin-h1 {
  font-family: var(--f-serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--c-forest-deep);
  margin: 0 0 var(--s-2);
}
.admin-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}

.admin-card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  padding: var(--s-5);
  margin-bottom: var(--s-4);
}

/* Dashboard stat cards */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
@media (min-width: 720px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-forest);
  border-radius: 6px;
  padding: var(--s-4);
}
.stat-card--attention { border-left-color: var(--c-clay); }
.stat-card--warn { border-left-color: var(--c-error); }
.stat-card__label {
  font-size: var(--fs-tiny);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-muted);
  font-weight: 600;
}
.stat-card__value {
  font-family: var(--f-serif);
  font-size: 2.25rem;
  font-weight: 600;
  color: var(--c-forest-deep);
  line-height: 1;
  margin: 6px 0 4px;
}
.stat-card__sub {
  font-size: var(--fs-tiny);
  color: var(--c-muted);
}

/* Admin table — denser data-table variant */
.admin-table-wrap {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--c-white);
}
.admin-table th, .admin-table td {
  padding: 10px 10px;
  text-align: left;
  border-bottom: 1px solid var(--c-line-soft);
  font-size: var(--fs-small);
  vertical-align: middle;
}
.admin-table th {
  background: var(--c-cream-soft);
  color: var(--c-forest-deep);
  font-weight: 600;
  font-size: var(--fs-tiny);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  white-space: nowrap;
}
.admin-table tbody tr:hover { background: rgba(232, 217, 185, 0.25); }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table .nowrap { white-space: nowrap; }
.admin-table .right { text-align: right; font-variant-numeric: tabular-nums; }
.admin-table .actions { white-space: nowrap; text-align: right; }
.admin-table .actions form { display: inline; }
.admin-table .actions a, .admin-table .actions button {
  font-size: var(--fs-tiny);
  margin-left: 4px;
}

/* Status pills */
.pill {
  display: inline-block;
  padding: 2px 8px;
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
}
.pill--paid    { background: rgba(74, 115, 85, 0.18); color: var(--c-success); }
.pill--pending { background: rgba(184, 107, 58, 0.15); color: var(--c-clay); }
.pill--unread  { background: var(--c-clay); color: var(--c-white); }
.pill--read    { background: var(--c-line); color: var(--c-muted); }
.pill--upcoming  { background: rgba(45, 82, 56, 0.18); color: var(--c-forest); }
.pill--completed { background: var(--c-line); color: var(--c-muted); }

/* Admin small buttons */
.btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: var(--fs-tiny);
  font-weight: 600;
  border: 1px solid var(--c-line);
  background: var(--c-cream-soft);
  color: var(--c-forest-deep);
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  min-height: 30px;
  font-family: inherit;
}
.btn-sm:hover { background: var(--c-sand); border-color: var(--c-sand-deep); text-decoration: none; color: var(--c-forest-deep); }
.btn-sm--primary { background: var(--c-forest); color: var(--c-cream); border-color: var(--c-forest); }
.btn-sm--primary:hover { background: var(--c-forest-deep); color: var(--c-cream); border-color: var(--c-forest-deep); }
.btn-sm--danger { background: rgba(162, 59, 46, 0.08); color: var(--c-error); border-color: rgba(162, 59, 46, 0.3); }
.btn-sm--danger:hover { background: rgba(162, 59, 46, 0.15); color: var(--c-error); border-color: var(--c-error); }

/* Filter bar */
.filter-bar {
  display: flex;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  flex-wrap: wrap;
  align-items: center;
}
.filter-bar select, .filter-bar input {
  padding: 8px 12px;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  background: var(--c-white);
  font-size: var(--fs-small);
  min-height: 36px;
  font-family: inherit;
}
.filter-bar label {
  font-size: var(--fs-small);
  color: var(--c-muted);
}

/* Admin form styling */
.admin-form { display: grid; gap: var(--s-4); max-width: 720px; }
.admin-form-grid {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .admin-form-grid { grid-template-columns: 1fr 1fr; } }
.admin-form .field--full { grid-column: 1 / -1; }
.admin-form .field__label { font-weight: 600; font-size: var(--fs-small); margin-bottom: 4px; }
.admin-form .input,
.admin-form .textarea,
.admin-form .select { font-size: 0.95rem; }
.admin-form-actions {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
  flex-wrap: wrap;
}

/* Login page (no admin shell — full-screen) */
.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(900px 500px at 80% 20%, rgba(232, 217, 185, 0.6), transparent 65%),
    var(--c-cream);
  padding: var(--s-5);
}
.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: var(--s-7);
  box-shadow: var(--shadow);
}
.login-card__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.login-card__brand img { height: 60px; width: auto; flex-shrink: 0; }
@media (min-width: 768px) { .login-card__brand img { height: 70px; } }
.login-card__brand-text {
  font-family: var(--f-serif);
  font-weight: 600;
  color: var(--c-forest-deep);
}
.login-card__brand-tag {
  font-size: var(--fs-tiny);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: var(--s-7) var(--s-5);
  color: var(--c-muted);
  font-size: var(--fs-small);
}

/* Activity panels (dashboard) */
.activity-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .activity-grid { grid-template-columns: 1fr 1fr; } }
.activity-panel { padding: 0; overflow: hidden; }
.activity-panel__head {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--c-cream-soft);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--c-forest-deep);
}
.activity-panel__head a { font-size: var(--fs-tiny); font-weight: 600; }
.activity-item {
  padding: 10px var(--s-4);
  border-bottom: 1px solid var(--c-line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-small);
}
.activity-item:last-child { border-bottom: 0; }
.activity-item__main { min-width: 0; flex: 1; }
.activity-item__title { font-weight: 600; color: var(--c-ink); margin: 0; }
.activity-item__sub   { color: var(--c-muted); font-size: var(--fs-tiny); margin-top: 2px; }

/* CSV upload area */
.csv-drop {
  background: var(--c-cream-soft);
  border: 2px dashed var(--c-sand-deep);
  border-radius: 8px;
  padding: var(--s-5);
  text-align: center;
}
.csv-drop strong { color: var(--c-forest-deep); }

/* Message expand details */
.message-detail {
  background: var(--c-cream-soft);
  border-left: 3px solid var(--c-clay);
  padding: var(--s-4);
  border-radius: 0 6px 6px 0;
  white-space: pre-wrap;
  font-size: var(--fs-small);
  margin-top: var(--s-3);
}

@media print {
  .site-header, .site-footer, .nav-toggle, .skip-link, .hero__visual,
  .toc-nav, .form-side,
  .admin-topbar, .admin-nav, .admin-form-actions { display: none !important; }
  body { color: #000; background: #fff; }
  .toc-layout, .admin-shell { grid-template-columns: 1fr !important; }
}