/* ==========================================================================
   THE GIR CLUB — brand stylesheet
   Navy + white foundation, aqua for resort energy, coral as the warm accent.
   Structural motif: the scorecard — hairline navy rules forming cells.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  --navy: #003366;
  --navy-deep: #00274d;
  --aqua: #40e0d0;
  --aqua-deep: #1fc0b0;
  --coral: #ff7a59;
  --white: #ffffff;
  --paper: #faf5ef;
  --muted: #4a6785;
  --rule: rgba(0, 51, 102, 0.2);
  --rule-strong: rgba(0, 51, 102, 0.55);
  --rule-light: rgba(255, 255, 255, 0.25);

  --serif: "Bodoni Moda", "Didot", "Bodoni MT", "Times New Roman", serif;
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --max: 1440px;
  --band: clamp(4.5rem, 9vw, 9rem);
}

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

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

body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--aqua-deep);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- Layout helpers ----------------------------------------------------- */
.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--band); }
.band-tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.paper { background: var(--paper); }

.navy-band {
  background: var(--navy);
  color: var(--white);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--coral);
  color: var(--navy);
  padding: 0.9rem 1.4rem;
  font-weight: 700;
  z-index: 999;
}
.skip:focus { left: 0; }

/* Visually hidden, still read by screen readers. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Type --------------------------------------------------------------- */
.display,
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-optical-sizing: auto;
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

.d1 { font-size: clamp(3.25rem, 10.5vw, 8.75rem); }
.d2 { font-size: clamp(2.5rem, 6.4vw, 5.25rem); }
.d3 { font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1; }
.d4 {
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.lede {
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  line-height: 1.55;
  max-width: 34ch;
  color: var(--muted);
  margin: 1.75rem 0 0;
}

.prose { max-width: 62ch; }
.prose p { margin: 0 0 1.25rem; }
.prose p:last-child { margin-bottom: 0; }

.navy-band .lede,
.navy-band .prose { color: rgba(255, 255, 255, 0.82); }

/* Scorecard column header — the one place small caps are earned. */
.col-head {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.5rem;
}
.navy-band .col-head { color: var(--aqua); }

.mark {
  background: var(--coral);
  box-shadow: 0.25em 0 0 var(--coral), -0.25em 0 0 var(--coral);
  padding: 0 0.02em;
}

.serif-em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.15rem 2.4rem;
  border: 2px solid var(--navy);
  background: var(--navy);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn:hover { background: var(--aqua); border-color: var(--aqua); color: var(--navy); }

.btn-coral { background: var(--coral); border-color: var(--coral); color: var(--navy); }
.btn-coral:hover { background: var(--navy); border-color: var(--navy); color: var(--coral); }

.btn-ghost { background: transparent; color: var(--navy); }
.btn-ghost:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }

.navy-band .btn-ghost { color: var(--white); border-color: rgba(255, 255, 255, 0.5); }
.navy-band .btn-ghost:hover { background: var(--white); color: var(--navy); border-color: var(--white); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 2.5rem;
}

.text-link {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--aqua);
  transition: border-color 0.18s ease, color 0.18s ease;
}
.text-link:hover { border-color: var(--navy); }
.navy-band .text-link:hover { border-color: var(--coral); color: var(--coral); }

/* --- Masthead ----------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
}

.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 78px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--navy);
}
.wordmark-g {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.85rem;
  letter-spacing: 0.01em;
  line-height: 1;
}
.wordmark-rule {
  width: 2px;
  height: 26px;
  background: var(--aqua);
}
.wordmark-c {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  line-height: 1.3;
}

/* Right-hand cluster: two standing links, the CTA, and the menu button. */
.nav-right {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.75rem);
}

.nav-primary {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.75rem);
}
.nav-primary > a,
.nav-group > a {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: border-color 0.18s ease;
}
.nav-primary > a:hover,
.nav-group > a:hover { border-color: var(--aqua); }
.nav-primary > a.is-current,
.nav-group > a.is-current { border-color: var(--navy); font-weight: 700; }

/* --- Tournaments dropdown ----------------------------------------------- */
.nav-group {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.nav-caret {
  background: none;
  border: 0;
  padding: 0.35rem 0.1rem;
  color: var(--navy);
  cursor: pointer;
  line-height: 0;
}
.nav-caret svg { display: block; transition: transform 0.18s ease; }
.nav-group:hover .nav-caret svg,
.nav-caret[aria-expanded="true"] svg { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 22rem;
  background: var(--white);
  border: 1px solid var(--navy);
  padding: 1.1rem 0 0.5rem;
  z-index: 80;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
/* Hover for mice, focus-within for keyboards, is-open for taps and clicks. */
.nav-group:hover .dropdown,
.nav-group:focus-within .dropdown,
.dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.dropdown-head {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 1.25rem 0.6rem;
}
.dropdown ul { list-style: none; margin: 0; padding: 0; }
.dropdown li a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
  border-top: 1px solid var(--rule);
  transition: background-color 0.15s ease;
}
.dropdown li a:hover { background: var(--paper); }
.dropdown-status {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.dropdown-status[data-state="open"] { color: var(--aqua-deep); }
.dropdown-status[data-state="sold"] { color: var(--navy); }
.dropdown-more { margin-top: 0.5rem; }
.dropdown-more li a {
  border-top: 1px solid var(--rule);
  font-weight: 500;
  color: var(--muted);
}
.dropdown-more li:first-child a { border-top: 2px solid var(--navy); }
.dropdown-empty {
  padding: 0.25rem 1.25rem 1rem;
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0;
}

/* --- Menu button and the full menu panel -------------------------------- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: none;
  border: 2px solid var(--navy);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.7rem 1.1rem;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.nav-toggle:hover { background: var(--navy); color: var(--white); }
.nav-toggle-bars {
  display: inline-block;
  width: 16px;
  height: 10px;
  position: relative;
  flex: none;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s ease, top 0.2s ease;
}
.nav-toggle-bars::before { top: 0; }
.nav-toggle-bars::after { top: 8px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 4px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { top: 4px; transform: rotate(-45deg); }

.site-menu {
  background: var(--white);
  border-top: 1px solid var(--rule);
  border-bottom: 2px solid var(--navy);
}
.site-menu-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding-block: clamp(2rem, 4vw, 3rem);
}
.site-menu h2 {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
}
.site-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.site-menu li a {
  display: block;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  padding: 0.45rem 0;
  transition: color 0.15s ease;
}
.site-menu li a:hover { color: var(--aqua-deep); }
.site-menu li a.is-current { color: var(--muted); }
.site-menu-cta { align-self: start; }
.site-menu-cta p { font-size: 0.9375rem; color: var(--muted); margin: 0 0 1.25rem; max-width: 30ch; }

[hidden] { display: none !important; }

/* --- Hero: full-bleed photograph with a navy gradient -------------------- */
.hero-full {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(30rem, 80vh, 50rem);
  overflow: hidden;
  background: var(--navy);
}

.hero-full-media { position: absolute; inset: 0; }
.hero-full-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 50%;
}
/* Two layers: one from the left so the type always has ground under it, one
   from the bottom to seat the hero on the navy band below. The right side of
   the frame stays bright, which keeps the photograph doing its job. */
.hero-full-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to right,
      rgba(0, 38, 76, 0.86) 0%,
      rgba(0, 40, 80, 0.7) 28%,
      rgba(0, 45, 90, 0.34) 52%,
      rgba(0, 51, 102, 0.08) 76%,
      rgba(0, 51, 102, 0) 100%
    ),
    linear-gradient(
      to top,
      rgba(0, 38, 76, 0.72) 0%,
      rgba(0, 44, 86, 0.34) 26%,
      rgba(0, 51, 102, 0.1) 52%,
      rgba(0, 51, 102, 0) 72%
    );
}

.hero-full-inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(3rem, 7vw, 5.5rem);
  color: var(--white);
}
.hero-full h1 {
  color: var(--white);
  font-size: clamp(2.6rem, 6.4vw, 5.75rem);
  line-height: 0.94;
  max-width: 13ch;
}
.hero-full .lede {
  color: rgba(255, 255, 255, 0.9);
  max-width: 42ch;
}
.hero-full .text-link { color: var(--white); }
.hero-full .text-link:hover { border-color: var(--coral); color: var(--coral); }
.hero-full .btn-ghost { color: var(--white); border-color: rgba(255, 255, 255, 0.55); }
.hero-full .btn-ghost:hover { background: var(--white); color: var(--navy); border-color: var(--white); }

@media (max-width: 620px) {
  .hero-full { min-height: clamp(26rem, 74vh, 34rem); }
  .hero-full-media img { object-position: 62% 50%; }
  .hero-full-media::after {
    background: linear-gradient(
      to top,
      rgba(0, 40, 80, 0.94) 0%,
      rgba(0, 44, 86, 0.8) 34%,
      rgba(0, 51, 102, 0.48) 64%,
      rgba(0, 51, 102, 0.2) 100%
    );
  }
}

/* --- Hero (the earlier type-led split layout) ---------------------------
   Currently unused: the homepage now opens on .hero-full above. Kept so the
   split hero can be swapped back in without rebuilding it. Delete this block
   and the .mark rule if you settle on the photographic hero. ------------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 29%);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
  padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(2.5rem, 5vw, 4rem);
}

.hero-head { line-height: 0.86; }
.hero-head > span { display: block; }
.hero-indent { padding-left: clamp(0.5rem, 6vw, 5.5rem); }

.hero-figure { position: relative; }
.hero-figure img {
  width: 100%;
  aspect-ratio: 3 / 4.35;
  object-fit: cover;
  object-position: 50% 30%;
}
.hero-figure::before {
  content: "";
  position: absolute;
  inset: auto -14px -14px auto;
  width: 62%;
  height: 46%;
  background: var(--aqua);
  z-index: -1;
}

.hero-caption {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 0.9rem 0 0;
  max-width: 26ch;
}

/* Single orchestrated page-load reveal. */
.reveal > * {
  animation: rise 0.75s cubic-bezier(0.16, 0.84, 0.44, 1) backwards;
}
.reveal > *:nth-child(1) { animation-delay: 0.05s; }
.reveal > *:nth-child(2) { animation-delay: 0.14s; }
.reveal > *:nth-child(3) { animation-delay: 0.23s; }
.reveal > *:nth-child(4) { animation-delay: 0.32s; }
.reveal > *:nth-child(5) { animation-delay: 0.41s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(1.5rem); }
  to { opacity: 1; transform: none; }
}

/* --- Scorecard grid (structural motif) ---------------------------------- */
.scorecard {
  display: grid;
  gap: 1px;
  background: var(--rule-strong);
  border: 1px solid var(--rule-strong);
}
.navy-band .scorecard {
  background: var(--rule-light);
  border-color: var(--rule-light);
}

.scorecard-4 { grid-template-columns: repeat(4, 1fr); }
.scorecard-3 { grid-template-columns: repeat(3, 1fr); }
.scorecard-2 { grid-template-columns: repeat(2, 1fr); }

.cell {
  background: var(--white);
  padding: clamp(1.5rem, 2.4vw, 2.5rem);
}
.paper .cell { background: var(--paper); }
.navy-band .cell { background: var(--navy); }

.cell-figure { font-family: var(--serif); font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 0.95; font-weight: 600; }
.cell-label { font-size: 0.875rem; color: var(--muted); margin: 0.6rem 0 0; }
.navy-band .cell-label { color: rgba(255, 255, 255, 0.75); }

/* Accent cells must outrank the `.paper .cell` / `.navy-band .cell` grounds. */
.scorecard .cell-aqua { background: var(--aqua); color: var(--navy); }
.scorecard .cell-coral { background: var(--coral); color: var(--navy); }
.scorecard .cell-aqua .cell-label,
.scorecard .cell-coral .cell-label { color: var(--navy); opacity: 0.75; }
.scorecard .cell-aqua .col-head,
.scorecard .cell-coral .col-head { color: var(--navy); opacity: 0.65; }

/* --- Section headers ---------------------------------------------------- */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}
.section-head .lede { margin-top: 0; max-width: 42ch; }

.rule-top { border-top: 2px solid var(--navy); padding-top: 1.75rem; }
.navy-band .rule-top { border-color: var(--aqua); }

/* --- Getaway cards ------------------------------------------------------ */
.getaways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(2rem, 3.5vw, 3.25rem);
}

.getaway { display: flex; flex-direction: column; }
.getaway-figure { position: relative; overflow: hidden; }
.getaway-figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.getaway:hover .getaway-figure img { transform: scale(1.04); }

.getaway-tag {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--coral);
  color: var(--navy);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.6rem 1.1rem;
}
.getaway-tag-aqua { background: var(--aqua); }
.getaway-tag-sold { background: var(--navy); color: var(--white); }

.getaway-body { padding-top: 1.5rem; }
.getaway-body .d4 { margin-bottom: 0.6rem; }
.getaway-note {
  font-size: 0.9375rem;
  color: var(--muted);
  margin: 0 0 1.5rem;
}

.getaway-lines {
  border-top: 1px solid var(--rule);
  margin-top: auto;
}
.getaway-lines div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.875rem;
}
.getaway-lines dt, .getaway-lines span:first-child { color: var(--muted); }
.getaway-lines span:last-child { font-weight: 600; text-align: right; }

/* --- Editorial split ---------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.split-figure img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }

.stack-list { margin: 2.5rem 0 0; padding: 0; list-style: none; }
.stack-list li {
  border-top: 1px solid var(--rule);
  padding: 1.4rem 0;
}
.stack-list li:last-child { border-bottom: 1px solid var(--rule); }
.navy-band .stack-list li { border-color: var(--rule-light); }
.stack-list strong {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  display: block;
  margin-bottom: 0.35rem;
  letter-spacing: -0.01em;
}
.stack-list p { margin: 0; font-size: 0.9375rem; color: var(--muted); max-width: 48ch; }
.navy-band .stack-list p { color: rgba(255, 255, 255, 0.78); }

/* --- Image mosaic ------------------------------------------------------- */
.mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
}
.mosaic figure { margin: 0; }
/* Ratios live on the image so a figcaption never squeezes the crop. */
.mosaic img { width: 100%; object-fit: cover; }
.m-tall { grid-column: span 4; }
.m-wide { grid-column: span 8; }
.m-half { grid-column: span 6; }
.m-third { grid-column: span 4; }
.m-tall img { aspect-ratio: 3 / 4; }
.m-wide img { aspect-ratio: 16 / 10; }
.m-half img { aspect-ratio: 4 / 3; }
.m-third img { aspect-ratio: 1; }
.mosaic figcaption {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding-top: 0.7rem;
}
.navy-band .mosaic figcaption { color: rgba(255, 255, 255, 0.7); }

/* --- Passport ----------------------------------------------------------- */
.stamps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: 3rem;
  max-width: 27rem;
}
.stamps-row { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
.stamp {
  aspect-ratio: 1;
  border: 2px dashed var(--aqua);
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 1rem;
}
.stamp-filled { border-style: solid; background: var(--aqua); color: var(--navy); border-color: var(--aqua); }
.stamp-coral { border-style: solid; background: var(--coral); color: var(--navy); border-color: var(--coral); }
.stamp-num { font-family: var(--serif); font-size: 2rem; font-weight: 600; line-height: 1; }
.stamp-txt {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 0.5rem;
}
.stamp-empty .stamp-num,
.stamp-empty .stamp-txt { color: var(--aqua); }

/* --- Testimonials ------------------------------------------------------- */
.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(2rem, 4vw, 4rem);
}
.quote blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
}
.quote-rule { width: 3.5rem; height: 3px; background: var(--aqua); margin-bottom: 1.75rem; }
.quote-coral .quote-rule { background: var(--coral); }
.quote cite {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 1.5rem;
}
.navy-band .quote cite { color: var(--aqua); }

/* --- Big CTA ------------------------------------------------------------ */
.cta-block { text-align: center; }
.cta-block .lede { margin-inline: auto; max-width: 44ch; }
.cta-block .btn-row { justify-content: center; }

/* --- Gazette ------------------------------------------------------------ */
.posts { display: grid; gap: 0; border-top: 2px solid var(--navy); }
.post {
  display: grid;
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr) minmax(0, 200px);
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: baseline;
  padding: clamp(1.75rem, 3vw, 2.75rem) 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}
.post:hover .d4 { color: var(--aqua-deep); }
.post .d4 { transition: color 0.18s ease; display: block; }
.post .post-sum { display: block; }
.post-meta { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.post-sum { font-size: 0.9375rem; color: var(--muted); margin: 0.75rem 0 0; max-width: 56ch; }
.post-cta { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }

/* --- Registration and payment ------------------------------------------- */
.status {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.55rem 1.1rem;
  background: var(--coral);
  color: var(--navy);
  margin-bottom: 1.5rem;
}
.status-aqua { background: var(--aqua); }
.status-closed { background: rgba(255, 255, 255, 0.18); color: var(--white); }

.price {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0.75rem 0 0;
}
.price-sub {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.78);
  margin: 0.75rem 0 0;
  max-width: 40ch;
}
.scorecard .cell-aqua .price-sub,
.scorecard .cell-coral .price-sub { color: var(--navy); opacity: 0.8; }

.reg-terms {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.82);
}
.reg-terms li { padding-left: 1.4rem; position: relative; }
.reg-terms li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.55rem;
  height: 0.55rem;
  background: var(--aqua);
}

.secure-line {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 2rem 0 0;
  max-width: 60ch;
}
.secure-line strong { color: var(--aqua); font-weight: 600; }

.btn[aria-disabled="true"] {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.55);
  cursor: not-allowed;
  pointer-events: none;
}

/* --- FAQ (native details/summary, no script) ---------------------------- */
.faq { border-top: 2px solid var(--navy); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  cursor: pointer;
  list-style: none;
  padding: 1.5rem 0;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--sans);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--aqua-deep);
  flex: none;
}
.faq details[open] summary::after { content: "\2013"; }
.faq summary:hover { color: var(--aqua-deep); }
.faq-body {
  padding: 0 0 1.75rem;
  max-width: 68ch;
  color: var(--muted);
}
.faq-body p { margin: 0 0 1rem; }
.faq-body p:last-child { margin-bottom: 0; }
.faq-body a { color: var(--navy); }

/* --- Account ------------------------------------------------------------ */
.account-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  border-top: 2px solid var(--navy);
  border-bottom: 1px solid var(--rule);
  padding: 1.5rem 0;
}
.account-who { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.account-who .d4 { margin: 0; }
.account-meta { font-size: 0.875rem; color: var(--muted); }

.ledger { border-top: 2px solid var(--navy); }
.ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 140px) minmax(0, 1fr) minmax(0, 160px) minmax(0, 120px);
  gap: clamp(1rem, 2.5vw, 2.5rem);
  align-items: baseline;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
}
.ledger-row .lg-date { color: var(--muted); font-variant-numeric: tabular-nums; }
.ledger-row .lg-what { font-weight: 600; }
.ledger-row .lg-sub { display: block; font-weight: 400; color: var(--muted); font-size: 0.875rem; margin-top: 0.25rem; }
.ledger-row .lg-amount { font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }
.ledger-row .lg-state { text-align: right; }

.pill {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  background: var(--paper);
  color: var(--muted);
  white-space: nowrap;
}
.pill-paid { background: var(--coral); color: var(--navy); }
.pill-due { background: var(--aqua); color: var(--navy); }
.pill-wait { background: var(--navy); color: var(--white); }

.empty {
  border: 1px dashed var(--rule-strong);
  padding: clamp(2rem, 4vw, 3rem);
  text-align: center;
  color: var(--muted);
}
.empty p { margin: 0 0 1.5rem; max-width: 46ch; margin-inline: auto; }

/* Saved trips are stored in this browser only — see gir.js. */
.saved-list { display: grid; gap: 1px; background: var(--rule-strong); border: 1px solid var(--rule-strong); }
.saved-item {
  background: var(--white);
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.saved-item h3 { font-size: 1.25rem; margin: 0; }
.saved-item-meta { font-size: 0.875rem; color: var(--muted); margin: 0.3rem 0 0; }
.btn-tiny {
  font-size: 0.6875rem;
  padding: 0.6rem 1.1rem;
  letter-spacing: 0.12em;
}

/* Save-this-tournament toggle */
.btn-save[aria-pressed="true"] {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--navy);
}

/* --- Champions and the honours board ------------------------------------ */
.champion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.champion-year {
  font-family: var(--serif);
  font-size: clamp(4rem, 12vw, 9rem);
  font-weight: 600;
  line-height: 0.82;
  letter-spacing: -0.03em;
  color: var(--coral);
  margin: 0;
  font-variant-numeric: lining-nums;
}
.champion-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--aqua);
  margin: 0 0 1.25rem;
}
.champion-team {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 1.5rem 0 0;
}
.champion-players {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: rgba(255, 255, 255, 0.85);
  margin: 1rem 0 0;
}
.champion-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  margin: 1.75rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-light);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.78);
}
.champion-stats b {
  display: block;
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1;
  margin-bottom: 0.35rem;
  font-variant-numeric: tabular-nums;
}

/* The waiting state, before a first champion exists. */
.champion-open .champion-year { color: var(--aqua); }
.champion-open .champion-team { color: rgba(255, 255, 255, 0.45); }

/* The board itself. */
.honours { border-top: 2px solid var(--aqua); }
.honours-row {
  display: grid;
  grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) minmax(0, 9rem);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule-light);
}
.honours-year {
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1;
  color: var(--aqua);
  font-variant-numeric: lining-nums;
}
.honours-team {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.honours-players {
  display: block;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 0.4rem;
}
.honours-points {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
}
.honours-empty {
  border: 1px dashed var(--rule-light);
  padding: clamp(2rem, 4vw, 3rem);
  text-align: center;
  color: rgba(255, 255, 255, 0.75);
}
.honours-empty p { margin: 0 auto; max-width: 46ch; }

@media (max-width: 860px) {
  .champion { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .honours-row { grid-template-columns: minmax(0, 4.5rem) minmax(0, 1fr); row-gap: 0.4rem; }
  .honours-points { grid-column: 2; text-align: left; }
  .honours-year { font-size: 1.5rem; }
  .honours-team { font-size: 1.25rem; }
}

/* --- Points, tiers and rewards ------------------------------------------ */
.points-figure {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5.5vw, 4.25rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.points-figure small {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: block;
  margin-top: 0.6rem;
  opacity: 0.7;
}

/* Progress to the next tier. */
.progress {
  height: 8px;
  background: var(--rule);
  margin: 1.1rem 0 0.7rem;
  overflow: hidden;
}
.navy-band .progress { background: rgba(255, 255, 255, 0.22); }
.progress-fill { height: 100%; background: var(--coral); }
.progress-note { font-size: 0.8125rem; color: var(--muted); margin: 0; }
.navy-band .progress-note { color: rgba(255, 255, 255, 0.78); }

/* The tier ladder. */
.tier { position: relative; }
.tier-badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  background: var(--navy);
  color: var(--white);
  margin-bottom: 0.9rem;
}
.scorecard .cell-aqua.tier .tier-badge,
.scorecard .cell-coral.tier .tier-badge { background: var(--navy); color: var(--white); }
.navy-band .tier-badge { background: var(--aqua); color: var(--navy); }
.tier-threshold {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  margin: 0 0 0.6rem;
  font-variant-numeric: tabular-nums;
}
.tier ul { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.tier li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.875rem;
  line-height: 1.5;
}
.tier li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--coral);
}
.navy-band .tier li { color: rgba(255, 255, 255, 0.82); }
/* The accent classes sit on the same element as .tier, not above it, so these
   need to be compound selectors rather than descendant ones. A coral bullet on
   a coral cell is invisible. */
.scorecard .cell-aqua.tier li::before,
.scorecard .cell-coral.tier li::before { background: var(--navy); }

/* What points buy. */
.rewards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1px;
  background: var(--rule-strong);
  border: 1px solid var(--rule-strong);
}
.reward {
  background: var(--white);
  padding: clamp(1.5rem, 2.4vw, 2rem);
  display: flex;
  flex-direction: column;
}
.paper .reward { background: var(--paper); }
.reward-cost {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  margin: 0 0 0.2rem;
  font-variant-numeric: tabular-nums;
}
.reward-cost span {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 0.4rem;
}
.reward h3 { font-size: 1.15rem; margin: 0.9rem 0 0.4rem; }
.reward p { font-size: 0.875rem; color: var(--muted); margin: 0; }

/* Points ledger: earned adds, redeemed subtracts. */
.lg-amount.is-earned { color: var(--navy); }
.lg-amount.is-spent { color: var(--muted); }

/* --- Season standings --------------------------------------------------- */
.standings { width: 100%; overflow-x: auto; }
.standings table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.standings th {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 1rem 0.9rem 0;
  border-bottom: 2px solid var(--navy);
  white-space: nowrap;
}
.standings td {
  padding: 1.1rem 1rem 1.1rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}
.standings tr:last-child td { border-bottom: 1px solid var(--rule); }

.st-pos {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  width: 3.5rem;
}
.st-team { font-weight: 600; font-size: 1.0625rem; }
.st-players { display: block; font-weight: 400; font-size: 0.875rem; color: var(--muted); margin-top: 0.25rem; }
.st-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.standings th.st-num { text-align: right; padding-right: 0; }
.standings td.st-num { padding-right: 0; }
.st-points { font-weight: 700; font-size: 1.0625rem; }

/* The top three carry a colour mark rather than a medal cliché. */
.standings tr[data-rank="1"] .st-pos,
.standings tr[data-rank="2"] .st-pos,
.standings tr[data-rank="3"] .st-pos {
  position: relative;
  padding-left: 0.9rem;
}
.standings tr[data-rank="1"] .st-pos::before,
.standings tr[data-rank="2"] .st-pos::before,
.standings tr[data-rank="3"] .st-pos::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  bottom: 0.1em;
  width: 5px;
  background: var(--aqua);
}
.standings tr[data-rank="1"] .st-pos::before { background: var(--coral); }

.standings-note { font-size: 0.875rem; color: var(--muted); margin: 1.75rem 0 0; max-width: 60ch; }
.standings-empty { border: 1px dashed var(--rule-strong); padding: clamp(2rem, 4vw, 3rem); text-align: center; color: var(--muted); }
.standings-empty p { margin: 0 auto; max-width: 48ch; }

.points-key { font-variant-numeric: tabular-nums; }
.points-key div {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
}
.points-key div:first-child { border-top: 1px solid var(--rule); }
.navy-band .points-key div { border-color: var(--rule-light); }
.points-key span:last-child { font-weight: 700; white-space: nowrap; }

@media (max-width: 620px) {
  .standings table { font-size: 0.9375rem; }
  .standings .st-events { display: none; }
  .standings th.st-events { display: none; }
  .st-pos { font-size: 1.3rem; width: 2.6rem; }
}

/* --- Journal article ---------------------------------------------------- */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.article-rail {
  position: sticky;
  top: 110px;
  display: grid;
  gap: 1.5rem;
}
.article-rail div p { margin: 0; font-size: 0.9375rem; }
.article-rail .col-head { margin-bottom: 0.3rem; }

.article-body { max-width: 64ch; }
.article-body > p {
  font-size: 1.0625rem;
  line-height: 1.72;
  margin: 0 0 1.4em;
}
.article-body > p:first-of-type {
  font-size: 1.25rem;
  line-height: 1.6;
}
.article-body h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  line-height: 1.1;
  margin: 2.4em 0 0.7em;
}
.article-body h3 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.4;
  margin: 2em 0 0.5em;
}
.article-body ul,
.article-body ol { margin: 0 0 1.4em; padding-left: 1.2em; }
.article-body li { margin-bottom: 0.6em; line-height: 1.65; }
.article-body a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article-body blockquote {
  margin: 2.2em 0;
  padding-left: 1.6rem;
  border-left: 3px solid var(--aqua);
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.32;
  letter-spacing: -0.01em;
}
.article-body blockquote p { margin: 0; }
.article-body figure { margin: 2.4em 0; }
.article-body figure img { width: 100%; }
.article-body figcaption {
  font-size: 0.8125rem;
  color: var(--muted);
  padding-top: 0.7rem;
}
.article-body hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.8em 0;
}

.article-lead img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

@media (max-width: 860px) {
  .article-layout { grid-template-columns: 1fr; }
  /* The rail becomes a wrapping row above the article. Flex rather than grid
     columns so three items still fit on a 320px phone. */
  .article-rail {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2.5rem;
  }
}

/* --- Forms -------------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field-full { grid-column: 1 / -1; }
.field label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 0.9rem 1rem;
  width: 100%;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--navy); }

.form-note { font-size: 0.8125rem; color: var(--muted); margin: 1.5rem 0 0; max-width: 52ch; }

/* Shown in place of the form once it has actually sent. */
.form-success {
  border: 2px solid var(--navy);
  background: var(--paper);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  max-width: 44rem;
}
.form-success h3 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin: 0 0 0.75rem;
}
.form-success p { margin: 0; color: var(--muted); max-width: 46ch; }

/* The Journal signup sits on navy, where a navy border would vanish. */
.navy-band .form-success {
  background: transparent;
  border-color: var(--aqua);
  max-width: 32rem;
}
.navy-band .form-success h3 { color: var(--white); }
.navy-band .form-success p { color: rgba(255, 255, 255, 0.82); }

/* The honeypot. Bots fill it in; Formspree then bins the submission. It must
   stay reachable in the DOM but invisible and un-tabbable to people. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.signup {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
  max-width: 32rem;
}
.signup input {
  flex: 1 1 14rem;
  font-family: var(--sans);
  font-size: 1rem;
  padding: 1rem;
  border: 2px solid var(--white);
  border-radius: 0;
  background: transparent;
  color: var(--white);
}
.signup input::placeholder { color: rgba(255, 255, 255, 0.6); }

/* --- Page hero (interior pages) ----------------------------------------- */
.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2.5rem, 4vw, 4rem);
}
/* Interior heroes sit in a narrower column than the homepage, so the display
   size steps down to keep the line breaks under control. */
.page-hero h1 { font-size: clamp(2.75rem, 6.4vw, 5.75rem); }
.page-hero .lede { max-width: 40ch; }
.page-hero-figure img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }

.crumb {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--aqua-deep);
  margin: 0 0 1.5rem;
}

/* --- Footer ------------------------------------------------------------- */
.footer { background: var(--navy); color: var(--white); padding-block: clamp(3.5rem, 6vw, 5.5rem) 2.5rem; }
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--rule-light);
}
.footer .wordmark { color: var(--white); }
.footer .wordmark-rule { background: var(--coral); }
.footer h2 { font-family: var(--sans); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--aqua); margin: 0 0 1.25rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.footer ul a { font-size: 0.9375rem; text-decoration: none; border-bottom: 1px solid transparent; }
.footer ul a:hover { border-color: var(--coral); }
.footer-tagline {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--aqua);
  margin: 1.5rem 0 0;
}
.footer-blurb { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.78); max-width: 34ch; margin: 0.9rem 0 0; }
.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2.5rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}
.footer-base p { margin: 0; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1080px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(200px, 34%); }
  .scorecard-4 { grid-template-columns: repeat(2, 1fr); }
  .post { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); }
  .post-cta { display: none; }
}

/* Below this the two standing links and the CTA fold into the menu panel, so
   the header is just the wordmark and the menu button. The panel already holds
   everything, which is why this header no longer has a width problem. */
@media (max-width: 860px) {
  .nav-primary,
  .nav-right > .btn { display: none; }
  .nav-right { gap: 0; }
}

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; align-items: start; }
  .hero-figure { max-width: 26rem; }
  .hero-figure img { aspect-ratio: 4 / 3.4; }
  .hero-indent { padding-left: 0; }

  .page-hero { grid-template-columns: 1fr; }
  .section-head { grid-template-columns: 1fr; align-items: start; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .m-wide, .m-half { grid-column: span 12; }
  .m-tall { grid-column: span 6; }
  .m-third { grid-column: span 6; }
}

@media (max-width: 860px) {
  .ledger-row {
    grid-template-columns: 1fr auto;
    row-gap: 0.4rem;
  }
  .ledger-row .lg-date { grid-column: 1 / -1; }
  .ledger-row .lg-what { grid-column: 1; }
  .ledger-row .lg-amount { grid-column: 2; }
  .ledger-row .lg-state { grid-column: 1 / -1; text-align: left; margin-top: 0.4rem; }
}

@media (max-width: 620px) {
  body { font-size: 1rem; }
  .saved-item { flex-direction: column; align-items: flex-start; }
  .faq summary { gap: 1rem; }
  .scorecard-4, .scorecard-3, .scorecard-2 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .post { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .m-tall, .m-third { grid-column: span 12; }
  .stamps-row { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 22rem; }
  .btn { display: block; text-align: center; width: 100%; }
  .btn-row { gap: 1rem; }
  .signup .btn { width: auto; }
}