/* Golf Day Finder. Brand: navy and lime from the logo. Layout: content column up to 1180px; listing and venue pages use a main column plus a sticky enquiry rail. */
:root {
  --paper: #F4F6F1;
  --surface: #FFFFFF;
  --sunk: #E9EEE4;
  --ink: #0B2036;
  --muted: #546273;
  --line: #D5DDD0;
  --accent: #3D7D0E;
  --btn: #04203B;
  --btn-ink: #FFFFFF;
  --flag: #7DC22B;
  --flag-ink: #04203B;
  --board: #04203B;
  --board-ink: #EEF3F7;
  --board-dim: #93A7BB;
  --board-num: #8DD13F;
  --board-line: #1C3A58;
  --ok: #3D7D0E;

  --map-out: #DCE6D3;
  --map-rough: #C9E0B4;
  --map-cut: #B3D497;
  --map-fairway: #8BC266;
  --map-fringe: #77B95A;
  --map-green: #59A847;
  --map-tee: #A3D383;
  --map-sand: #EADBA9;
  --map-water: #84BCDD;
  --map-tree: #3E7A47;
  --map-build: #B5AF9F;
  --map-label: #04203B;
  --map-label-ink: #FFFFFF;
  --map-marker: #FFFFFF;

  --logo-light: block;
  --logo-dark: none;

  --font-display: "Nunito", "Arial Rounded MT Bold", "Helvetica Neue", system-ui, sans-serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.1875rem;
  --step-2: 1.5rem;
  --step-3: 2rem;
  --step-4: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);
  --radius: 10px;
  --wrap: 1180px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #06121F; --surface: #0C1D30; --sunk: #112539; --ink: #E8EEF4; --muted: #97A8BA; --line: #1E3550;
    --accent: #9BD95A; --btn: #7DC22B; --btn-ink: #04203B; --flag: #7DC22B; --flag-ink: #04203B;
    --board: #0A1B2D; --board-ink: #EEF3F7; --board-dim: #8499AE; --board-num: #9BD95A; --board-line: #1D3651; --ok: #9BD95A;
    --map-out: #0F1D22; --map-rough: #1C3426; --map-cut: #27452C; --map-fairway: #3A6A31; --map-fringe: #467C3B; --map-green: #549346;
    --map-tee: #4C8040; --map-sand: #9E8C5C; --map-water: #2B6489; --map-tree: #102A18; --map-build: #5C5A55;
    --map-label: #9BD95A; --map-label-ink: #04203B; --map-marker: #EEF3F7;
    --logo-light: none; --logo-dark: block;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --paper: #06121F; --surface: #0C1D30; --sunk: #112539; --ink: #E8EEF4; --muted: #97A8BA; --line: #1E3550;
    --accent: #9BD95A; --btn: #7DC22B; --btn-ink: #04203B; --flag: #7DC22B; --flag-ink: #04203B;
    --board: #0A1B2D; --board-ink: #EEF3F7; --board-dim: #8499AE; --board-num: #9BD95A; --board-line: #1D3651; --ok: #9BD95A;
    --map-out: #0F1D22; --map-rough: #1C3426; --map-cut: #27452C; --map-fairway: #3A6A31; --map-fringe: #467C3B; --map-green: #549346;
    --map-tee: #4C8040; --map-sand: #9E8C5C; --map-water: #2B6489; --map-tree: #102A18; --map-build: #5C5A55;
    --map-label: #9BD95A; --map-label-ink: #04203B; --map-marker: #EEF3F7;
    --logo-light: none; --logo-dark: block;
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
}
[hidden] { display: none !important; }
img { max-width: 100%; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--flag); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.1; text-wrap: balance; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: var(--step-4); font-weight: 900; }
h2 { font-size: var(--step-3); font-weight: 750; font-stretch: 85%; }
h3 { font-size: var(--step-1); font-weight: 700; font-stretch: 92%; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.eyebrow {
  font-family: var(--font-display); font-stretch: 80%; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; font-size: var(--step--1); color: var(--accent);
}
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }

/* Prototype strip */
.proto {
  background: var(--flag); color: var(--flag-ink); font-size: var(--step--1); font-weight: 600;
  text-align: center; padding: 6px 16px;
}

/* Header */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 24px; min-height: 84px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo svg { width: 26px; height: 30px; flex: none; }
.logo span { font-family: var(--font-display); font-weight: 800; font-stretch: 78%; font-size: 1.45rem; letter-spacing: -0.01em; }
.nav { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.95rem; }
.nav a:hover { color: var(--accent); }
.nav a.btn, .nav a.btn:hover { color: var(--btn-ink); }
.nav a[aria-current="page"] { color: var(--accent); font-weight: 650; }
@media (max-width: 760px) { .nav .nav-link { display: none; } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 650; font-size: 0.95rem; line-height: 1;
  padding: 13px 18px; border-radius: 8px; border: 1px solid transparent;
  background: var(--btn); color: var(--btn-ink); text-decoration: none; cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); filter: none; }
.btn-flag { background: var(--flag); color: var(--flag-ink); }
.btn-sm { padding: 9px 13px; font-size: 0.875rem; }
.btn-block { width: 100%; }

/* Chips & badges */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; line-height: 1.2;
  padding: 5px 9px; border-radius: 999px; background: var(--sunk); color: var(--ink);
}
.badge {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-stretch: 85%;
  font-weight: 700; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 5px; border: 1px solid var(--line); color: var(--muted);
}
.badge.map-full { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); color: var(--ok); }
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* Forms */
.field { display: grid; gap: 5px; min-width: 0; }
.field label { font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 0.95rem; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 7px; padding: 10px 11px; width: 100%; min-width: 0;
}
.field textarea { resize: vertical; min-height: 76px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .grid-2 { grid-template-columns: 1fr; } }

/* Enquiry panel */
.enquiry {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; display: grid; gap: 14px; box-shadow: 0 1px 0 var(--line), 0 12px 30px -18px rgba(20, 40, 28, 0.35);
}
.enquiry h2 { font-size: var(--step-2); }
.enquiry .small { font-size: 0.8125rem; color: var(--muted); }
.enquiry form { display: grid; gap: 12px; }
.enquiry .done { display: grid; gap: 10px; padding: 6px 0; }
.enquiry .done strong { font-family: var(--font-display); font-size: var(--step-2); font-stretch: 85%; }
.enquiry .err { color: #B3261E; font-size: 0.8125rem; }
:root[data-theme="dark"] .enquiry .err { color: #F2A29B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .enquiry .err { color: #F2A29B; } }

/* Footer */
.site-footer { border-top: 1px solid var(--line); margin-top: 72px; padding-block: 36px 48px; color: var(--muted); font-size: 0.875rem; }
.site-footer .wrap { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.site-footer h4 { margin: 0 0 8px; font-family: var(--font-display); font-stretch: 85%; font-size: 0.9rem; color: var(--ink); text-transform: uppercase; letter-spacing: 0.06em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }

/* ===== Homepage ===== */
.hero { padding-block: 56px 48px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: start; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; gap: 32px; } }
.hero-copy { display: grid; gap: 20px; }
.hero-copy .lede { font-size: var(--step-1); color: var(--muted); max-width: 34em; }
.finder {
  margin-top: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 12px; align-items: end;
}
@media (max-width: 640px) { .finder { grid-template-columns: 1fr 1fr; } .finder .btn { grid-column: 1 / -1; } }
.coverage { font-size: 0.875rem; color: var(--muted); }
.coverage b { color: var(--ink); }

/* Leaderboard */
.board { background: var(--board); color: var(--board-ink); border-radius: var(--radius); padding: 18px 18px 12px; }
.board-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 4px 12px; border-bottom: 2px solid var(--board-line); }
.board-head h2 { font-size: 1.35rem; font-stretch: 75%; text-transform: uppercase; letter-spacing: 0.04em; color: var(--board-ink); }
.board-head span { font-size: 0.75rem; color: var(--board-dim); text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-display); font-stretch: 85%; }
.board table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.board th { font-family: var(--font-display); font-stretch: 80%; font-weight: 600; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--board-dim); text-align: left; padding: 10px 4px 6px; }
.board th.r, .board td.r { text-align: right; }
.board td { padding: 9px 4px; border-top: 1px solid var(--board-line); vertical-align: baseline; }
.board td.pos { width: 1.8em; color: var(--board-dim); font-family: var(--font-display); font-stretch: 80%; font-weight: 700; }
.board td a { color: var(--board-ink); text-decoration: none; font-weight: 600; font-family: var(--font-display); font-stretch: 88%; font-size: 1.02rem; }
.board td a:hover { color: var(--board-num); }
.board td .town { display: block; font-size: 0.75rem; color: var(--board-dim); }
.board td.price { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: 1.5rem; color: var(--board-num); line-height: 1; }
.board td.grp { color: var(--board-dim); font-size: 0.85rem; }
.board-foot { display: flex; justify-content: space-between; gap: 10px; padding: 10px 4px 2px; font-size: 0.8rem; color: var(--board-dim); flex-wrap: wrap; }
.board-foot a { color: var(--board-num); font-weight: 600; }

.section { padding-block: 44px; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.section-head p { color: var(--muted); max-width: 40em; margin-top: 8px; }

.occasions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .occasions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .occasions { grid-template-columns: 1fr; } }
.occasion {
  display: grid; gap: 10px; align-content: start; padding: 20px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink);
  transition: border-color .15s, transform .15s;
}
.occasion:hover { border-color: var(--accent); transform: translateY(-2px); }
.occasion svg { width: 34px; height: 34px; color: var(--accent); }
.occasion h3 { font-size: 1.3rem; }
.occasion p { color: var(--muted); font-size: 0.92rem; }
.occasion .from { font-size: 0.85rem; color: var(--ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .occasion { transition: none; } .occasion:hover { transform: none; } }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; counter-reset: step; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; gap: 18px; } }
.step { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.step .n {
  font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: 2.6rem; line-height: 0.9;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.step h3 { margin-bottom: 6px; }
.step p { color: var(--muted); font-size: 0.95rem; }

.regions { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.region {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px;
  border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none;
}
.region strong { font-weight: 600; }
.region .count { font-size: 0.8125rem; color: var(--muted); white-space: nowrap; }
a.region:hover { border-color: var(--accent); }
.region.soon { background: transparent; border-style: dashed; color: var(--muted); }
.region.live .count { color: var(--ok); font-weight: 600; }

.clubs-band { background: var(--board); color: var(--board-ink); border-radius: 14px; padding: 36px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: center; }
@media (max-width: 820px) { .clubs-band { grid-template-columns: 1fr; padding: 26px 22px; } }
.clubs-band h2 { color: var(--board-ink); }
.clubs-band p { color: var(--board-dim); margin-top: 10px; }
.clubs-band ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.clubs-band li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.clubs-band li svg { width: 18px; height: 18px; color: var(--board-num); margin-top: 3px; }
.clubs-band .btn { margin-top: 18px; }

/* ===== Listing page ===== */
.crumbs { font-size: 0.85rem; color: var(--muted); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs a { color: var(--muted); }
.page-head { padding-block: 14px 26px; display: grid; gap: 14px; }
.page-head .lede { color: var(--muted); max-width: 46em; font-size: 1.05rem; }
.statline { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.92rem; }
.statline b { font-family: var(--font-display); font-stretch: 85%; font-size: 1.15rem; }

.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
@media (max-width: 980px) { .two-col { grid-template-columns: 1fr; } }
.rail { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 84px); display: grid; gap: 16px; }
@media (max-width: 980px) { .rail { position: static; } }

.filters {
  display: grid; gap: 12px; padding: 14px; border-radius: var(--radius); background: var(--sunk); margin-bottom: 18px;
}
.filter-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.filter-row .field { flex: 1 1 150px; }
.typechips { display: flex; flex-wrap: wrap; gap: 6px; }
.typechip {
  font: inherit; font-size: 0.875rem; font-weight: 600; padding: 7px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.typechip[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.result-count { font-size: 0.875rem; color: var(--muted); margin-bottom: 10px; }

.venue-list { display: grid; gap: 12px; }
.venue {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px;
}
.venue:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.venue-main { display: grid; gap: 8px; min-width: 0; }
.venue h3 a { color: var(--ink); text-decoration: none; }
.venue h3 a:hover { color: var(--accent); }
.venue .where { font-size: 0.875rem; color: var(--muted); }
.venue .facts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.venue .facts b { color: var(--ink); font-weight: 600; }
.venue-price { display: grid; gap: 8px; justify-items: end; align-content: start; text-align: right; }
.venue-price .from { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-display); font-stretch: 85%; font-weight: 700; }
.venue-price .amt { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: 2rem; line-height: 0.95; font-variant-numeric: tabular-nums; }
.venue-price .pp { font-size: 0.8rem; color: var(--muted); }
@media (max-width: 560px) {
  .venue { grid-template-columns: 1fr; }
  .venue-price { justify-items: start; text-align: left; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 4px 10px; }
  .venue-price .btn { grid-column: 1 / -1; justify-self: start; }
}
.empty { padding: 28px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); }

.prose { max-width: 44em; display: grid; gap: 14px; }
.prose h2 { font-size: var(--step-2); margin-top: 10px; }
.prose p { color: var(--ink); }
.price-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.price-table th, .price-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.price-table th { font-family: var(--font-display); font-stretch: 85%; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.price-table td.r, .price-table th.r { text-align: right; }
.table-scroll { overflow-x: auto; }

/* ===== Venue page ===== */
.venue-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: end; padding-block: 14px 22px; }
@media (max-width: 720px) { .venue-head { grid-template-columns: 1fr; } }
.venue-head .where { color: var(--muted); font-size: 1.02rem; }
.venue-head .price-block { text-align: right; }
@media (max-width: 720px) { .venue-head .price-block { text-align: left; } }
.price-block .amt { font-family: var(--font-display); font-stretch: 72%; font-weight: 800; font-size: 3rem; line-height: 0.9; font-variant-numeric: tabular-nums; }
.price-block .lbl { font-size: 0.8rem; color: var(--muted); }

.keyfacts {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
}
@media (max-width: 820px) { .keyfacts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.keyfacts div { padding: 12px 14px; border-left: 1px solid var(--line); display: grid; gap: 2px; min-width: 0; }
.keyfacts div:first-child { border-left: 0; }
@media (max-width: 820px) { .keyfacts div:nth-child(4) { border-left: 0; } .keyfacts div:nth-child(n+4) { border-top: 1px solid var(--line); } }
.keyfacts dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-family: var(--font-display); font-stretch: 85%; font-weight: 700; }
.keyfacts dd { margin: 0; font-family: var(--font-display); font-stretch: 85%; font-weight: 700; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.keyfacts dd.small { font-size: 0.95rem; font-weight: 600; line-height: 1.3; }

.block { display: grid; gap: 16px; margin-top: 40px; align-content: start; }
.block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.block-head p { color: var(--muted); font-size: 0.9rem; }

.packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.packages.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .packages.n4 { grid-template-columns: 1fr; } }
.package { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: grid; gap: 12px; align-content: start; }
.package.pick { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.package .ptop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.package .pname { font-family: var(--font-display); font-stretch: 85%; font-weight: 750; font-size: 1.15rem; }
.package .pprice { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: 1.7rem; font-variant-numeric: tabular-nums; }
.package .pprice small { font-size: 0.75rem; font-weight: 600; color: var(--muted); font-family: var(--font-body); }
.package ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 0.9rem; }
.package li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: start; }
.package li svg { width: 14px; height: 14px; color: var(--accent); margin-top: 4px; }
.package .pfor { font-size: 0.82rem; color: var(--muted); }

/* Course map */
.course { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 860px) { .course { grid-template-columns: 1fr; } }
.map-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: grid; min-width: 0; }
.map-card .mc-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.map-card .mc-head strong { font-family: var(--font-display); font-stretch: 85%; font-size: 1.05rem; }
.map-card svg { display: block; width: 100%; height: auto; background: var(--map-out); }
.map-card .mc-foot { padding: 9px 14px; font-size: 0.75rem; color: var(--muted); border-top: 1px solid var(--line); }
.hole-svg-wrap { background: var(--map-out); display: grid; place-items: center; }
.hole-svg-wrap svg { max-height: 560px; width: auto; max-width: 100%; }
.hole-nav { display: flex; align-items: center; gap: 8px; }
.hole-nav button {
  font: inherit; width: 34px; height: 34px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); cursor: pointer; display: grid; place-items: center;
}
.hole-nav button:hover { border-color: var(--ink); }
.hole-stats { display: flex; gap: 16px; font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.hole-stats span { display: grid; line-height: 1.1; }
.hole-stats small { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-family: var(--font-display); font-stretch: 85%; font-weight: 700; }
.hole-stats b { font-family: var(--font-display); font-stretch: 80%; font-size: 1.35rem; font-weight: 800; }

.m-out { fill: var(--map-out); }
.m-rough { fill: var(--map-rough); }
.m-cut { stroke: var(--map-cut); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.m-fw { stroke: var(--map-fairway); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.m-green { fill: var(--map-green); }
.m-fwp { fill: var(--map-fairway); }
.m-roughp { fill: var(--map-cut); }
.m-wood { fill: var(--map-tree); opacity: .75; }
.m-fringe { fill: var(--map-fringe); }
.m-tee { fill: var(--map-tee); }
.m-sand { fill: var(--map-sand); }
.m-water { fill: var(--map-water); }
.m-tree { fill: var(--map-tree); }
.m-build { fill: var(--map-build); }
.m-text { fill: var(--muted); font-family: var(--font-display); font-weight: 700; }
.m-label circle { fill: var(--surface); stroke: var(--map-label); stroke-width: 2; }
.m-label text { fill: var(--map-label); font-family: var(--font-display); font-weight: 800; font-stretch: 80%; }
.m-hole { cursor: pointer; }
.m-hole .hit { stroke: transparent; fill: none; stroke-linecap: round; }
.m-hole:hover .m-label circle, .m-hole:focus-visible .m-label circle { fill: var(--sunk); }
.m-hole.sel .m-label circle { fill: var(--map-label); }
.m-hole.sel .m-label text { fill: var(--map-label-ink); }
.m-hole:focus { outline: none; }
.m-hole:focus-visible .m-label circle { stroke-width: 4; stroke: var(--flag); }
.m-pin { stroke: var(--ink); stroke-width: 1.4; }
.m-flag { fill: var(--flag); }
.m-marker line { stroke: var(--map-marker); stroke-width: 1.6; stroke-dasharray: 3 3; }
.m-marker text { fill: var(--ink); font-family: var(--font-display); font-weight: 700; font-stretch: 85%; }
.m-marker rect { fill: var(--surface); }
.m-play { stroke: var(--map-marker); stroke-width: 1.4; fill: none; stroke-dasharray: 1 5; stroke-linecap: round; opacity: .9; }

.outline-map { position: relative; }
.outline-note { padding: 18px; display: grid; gap: 8px; font-size: 0.9rem; }

/* Scorecard */
.scorecard { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 0.875rem; min-width: 640px; background: var(--surface); }
.scorecard th, .scorecard td { border: 1px solid var(--line); padding: 7px 4px; text-align: center; }
.scorecard th[scope="row"] { text-align: left; padding-inline: 10px; font-family: var(--font-display); font-stretch: 85%; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); white-space: nowrap; }
.scorecard thead th { background: var(--board); color: var(--board-ink); font-family: var(--font-display); font-stretch: 85%; border-color: var(--board-line); }
.scorecard .tot { font-weight: 700; background: var(--sunk); }
.scorecard tr.par td { font-weight: 700; }
.scorecard td.hole-cell { cursor: pointer; }
.scorecard td.on, .scorecard th.on { outline: 2px solid var(--flag); outline-offset: -2px; }
.sc-wrap { overflow-x: auto; border-radius: 8px; }

.facility-list { columns: 2; column-gap: 24px; padding: 0; margin: 0; list-style: none; }
.facility-list li { padding: 6px 0; border-bottom: 1px solid var(--line); break-inside: avoid; font-size: 0.95rem; }
@media (max-width: 520px) { .facility-list { columns: 1; } }

.claim { background: var(--sunk); border-radius: var(--radius); padding: 18px; display: grid; gap: 8px; }
.claim h3 { font-size: 1.1rem; }
.claim p { font-size: 0.875rem; color: var(--muted); }

.nearby { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .nearby { grid-template-columns: 1fr; } }
.nearby a { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--ink); }
.nearby a:hover { border-color: var(--accent); }
.nearby strong { font-family: var(--font-display); font-stretch: 88%; font-size: 1.05rem; }
.nearby span { font-size: 0.85rem; color: var(--muted); }

/* ===== Occasion pages ===== */
.occ-head .occ-icon { width: 44px; height: 44px; color: var(--accent); display: block; }
.occ-head .occ-icon svg { width: 100%; height: 100%; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; align-items: start; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ticks li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.ticks li svg { width: 16px; height: 16px; color: var(--accent); margin-top: 4px; }
.small-note { font-size: 0.8125rem; }
.schedule { list-style: none; margin: 0; padding: 0; display: grid; }
.schedule li { display: grid; grid-template-columns: 4.2rem 1fr; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.schedule li:first-child { border-top: 0; padding-top: 0; }
.schedule time { font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 1.15rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.schedule strong { font-weight: 650; }
.schedule p { color: var(--muted); font-size: 0.9rem; }
.formats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.format { padding: 16px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 6px; align-content: start; }
.format h3 { font-size: 1.1rem; }
.format p { color: var(--muted); font-size: 0.92rem; }
.faq { display: grid; border-top: 1px solid var(--line); max-width: 46em; }
.faq details { border-bottom: 1px solid var(--line); padding: 12px 0; }
.faq summary { cursor: pointer; font-weight: 650; list-style-position: outside; }
.faq details p { color: var(--muted); margin-top: 8px; }
.occ-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.occ-link { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600; }
.occ-link:hover { border-color: var(--accent); }
.occ-link svg { width: 26px; height: 26px; color: var(--accent); flex: none; }

/* ===== Cost guide calculator ===== */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
@media (max-width: 820px) { .calc { grid-template-columns: 1fr; } }
.calc-in { background: var(--surface); padding: 24px; display: grid; gap: 16px; align-content: start; }
.calc-in h2 { font-size: var(--step-2); }
.extras { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.extras legend { font-size: 0.8125rem; font-weight: 600; color: var(--muted); margin-bottom: 8px; padding: 0; }
.extras label { display: flex; gap: 10px; align-items: center; font-size: 0.95rem; cursor: pointer; }
.extras input { width: 18px; height: 18px; accent-color: var(--btn); flex: none; }
.calc-out { background: var(--board); color: var(--board-ink); padding: 24px; display: grid; gap: 10px; align-content: start; }
.co-label { font-family: var(--font-display); font-stretch: 85%; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; color: var(--board-dim); }
.co-total { font-family: var(--font-display); font-stretch: 72%; font-weight: 800; font-size: clamp(2.8rem, 2rem + 3vw, 4rem); line-height: 0.95; color: var(--board-num); font-variant-numeric: tabular-nums; }
.co-range { color: var(--board-dim); font-size: 0.9rem; }
.co-split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--board-line); border-bottom: 1px solid var(--board-line); margin-top: 6px; }
.co-split div { padding: 10px 0; display: grid; gap: 2px; }
.co-split span { font-size: 0.75rem; color: var(--board-dim); text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-display); font-stretch: 85%; font-weight: 700; }
.co-split b { font-family: var(--font-display); font-stretch: 80%; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.co-venues-h { margin-top: 8px; font-size: 0.9rem; color: var(--board-ink); font-weight: 600; }
.co-venues { list-style: none; margin: 0; padding: 0; display: grid; }
.co-venues li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--board-line); font-size: 0.9rem; flex-wrap: wrap; }
.co-venues a { color: var(--board-ink); font-weight: 600; text-decoration: none; }
.co-venues a:hover { color: var(--board-num); text-decoration: underline; }
.co-venues span { color: var(--board-dim); font-variant-numeric: tabular-nums; }

/* ===== Real-data states ===== */
.chip-ask { background: transparent; border: 1px dashed var(--line); color: var(--muted); }
.amt-ask { font-size: 1.35rem !important; line-height: 1.1 !important; }
.price-block .amt-ask { font-size: 2rem !important; }
.no-pack { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 20px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface); }
.no-pack > div { display: grid; gap: 4px; min-width: 0; flex: 1 1 280px; }
.no-pack p { color: var(--muted); font-size: 0.92rem; }
.map-soon { display: flex; gap: 18px; align-items: center; padding: 18px 20px; border-radius: var(--radius); background: var(--sunk); color: var(--accent); flex-wrap: wrap; }
.map-soon svg { width: 120px; height: 60px; flex: none; overflow: visible; }
.map-soon div { display: grid; gap: 4px; color: var(--ink); flex: 1 1 240px; min-width: 0; }
.map-soon p { color: var(--muted); font-size: 0.92rem; }
.sources { margin-top: 32px; font-size: 0.8rem; color: var(--muted); }
.sources a { color: var(--muted); }
.formats-stack { grid-template-columns: 1fr; }
.calc-out .btn { margin-top: 4px; }

/* ===== Visitor info ===== */
.visitor { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 16px; align-items: start; }
@media (max-width: 760px) { .visitor { grid-template-columns: 1fr; } }
.rates-card { background: var(--board); color: var(--board-ink); border-radius: var(--radius); padding: 6px 18px; }
.rates { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rates th, .rates td { padding: 11px 0; border-top: 1px solid var(--board-line); text-align: left; vertical-align: baseline; }
.rates tr:first-child th, .rates tr:first-child td { border-top: 0; }
.rates th { font-weight: 500; font-size: 0.92rem; color: var(--board-ink); padding-right: 12px; }
.rates td.r { text-align: right; font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: 1.5rem; color: var(--board-num); white-space: nowrap; }
.visitor-rules { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.visitor-rules h3 { font-size: 1.1rem; }
.hc-pill { justify-self: start; font-size: 0.8rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--sunk); color: var(--muted); }
.hc-pill.hc-yes { background: color-mix(in srgb, var(--flag) 30%, var(--surface)); color: var(--ink); }
.book-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; font-size: 0.9rem; color: var(--muted); }
.vtable td .sub { display: block; font-size: 0.78rem; color: var(--muted); }
.vtable td { vertical-align: top; }
.vfilters { display: flex; flex-wrap: wrap; gap: 8px; }

/* ===== Brand logo ===== */
.logo-img { height: 60px; width: auto; display: var(--logo-light); }
.logo-img.dark { display: var(--logo-dark); }
.site-footer .logo-img { height: 64px; }
@media (max-width: 420px) { .logo-img { height: 42px; } }
.copyright { margin-top: 10px; font-size: 0.8rem; }

/* ===== For clubs ===== */
.fc-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 40px; align-items: start; padding-block: 14px 8px; }
@media (max-width: 900px) { .fc-hero { grid-template-columns: 1fr; gap: 24px; } }
.fc-copy { display: grid; gap: 18px; }
.fc-copy .lede { color: var(--muted); font-size: 1.08rem; max-width: 38em; }
.fc-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-ghost.on-dark { color: var(--board-ink); border-color: var(--board-line); }
.btn-ghost.on-dark:hover { border-color: var(--board-ink); }
.clubs-band .fc-cta { margin-top: 18px; }
.clubs-band .fc-cta .btn { margin-top: 0; }
.roi { background: var(--board); color: var(--board-ink); border-radius: 14px; padding: 22px; display: grid; gap: 14px; }
.roi h2 { color: var(--board-ink); font-size: var(--step-2); }
.roi .field label { color: var(--board-dim); }
.roi .field input, .roi .field select { background: color-mix(in srgb, var(--board-ink) 8%, var(--board)); color: var(--board-ink); border-color: var(--board-line); }
.roi-out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--board-line); padding-top: 12px; gap: 8px; }
.roi-out div { display: grid; gap: 2px; min-width: 0; }
.roi-out span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--board-dim); font-weight: 700; }
.roi-out b { font-family: var(--font-display); font-weight: 900; font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.roi-out .roi-x b { color: var(--board-num); font-size: 2rem; line-height: 1; }
.roi-note { font-size: 0.78rem; color: var(--board-dim); }
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
@media (max-width: 1000px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .plans { grid-template-columns: 1fr; } }
.plan { position: relative; display: grid; grid-template-rows: auto auto auto auto 1fr auto; gap: 8px; padding: 22px 18px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.plan-pick { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.plan-tag { position: absolute; top: -11px; left: 18px; background: var(--flag); color: var(--flag-ink); font-size: 0.72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.06em; }
.plan h3 { font-size: 1.3rem; }
.pl-for { color: var(--muted); font-size: 0.88rem; min-height: 2.6em; }
.pl-price { display: flex; align-items: baseline; gap: 6px; }
.pl-amt { font-family: var(--font-display); font-weight: 900; font-size: 2.4rem; line-height: 1; font-variant-numeric: tabular-nums; }
.pl-per { color: var(--muted); font-size: 0.9rem; }
.pl-year { font-size: 0.82rem; color: var(--muted); }
.plan .ticks { font-size: 0.92rem; align-content: start; margin-top: 6px; }
.founding { margin-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; padding: 20px 22px; border-radius: var(--radius); background: color-mix(in srgb, var(--flag) 18%, var(--surface)); border: 1px solid color-mix(in srgb, var(--flag) 45%, var(--line)); }
.founding > div { display: grid; gap: 4px; flex: 1 1 320px; min-width: 0; }
.founding h3 { font-size: 1.3rem; }
.founding p:not(.eyebrow) { color: var(--ink); font-size: 0.95rem; }
.how { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 0; counter-reset: how; }
.how li { counter-increment: how; display: grid; grid-template-columns: 2.2rem 1fr; gap: 2px 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.how li:first-child { border-top: 0; }
.how li::before { content: counter(how); grid-row: span 2; font-family: var(--font-display); font-weight: 900; font-size: 1.6rem; color: var(--accent); line-height: 1; }
.how strong { font-weight: 650; }
.how span { color: var(--muted); font-size: 0.92rem; }
.claim-panel { max-width: 760px; }

/* ===== Areas index ===== */
.area-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .area-grid { grid-template-columns: 1fr; } }
.area-card { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.area-card:hover { border-color: var(--accent); }
.area-card h2 { font-size: var(--step-2); }
.area-card .muted { font-size: 0.9rem; }
.area-card .facts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.88rem; color: var(--muted); }
.area-card .facts b { color: var(--ink); }
.area-go { font-weight: 650; color: var(--accent); font-size: 0.92rem; }
.vf-area { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 600; color: var(--muted); }
.vf-area select { font: inherit; font-size: 0.875rem; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }

/* ===== Society trip section ===== */
.trip { margin-top: 44px; padding: 24px; border-radius: 14px; background: var(--sunk); }
.trip h3 { margin-top: 8px; font-size: 1.15rem; }
.trip .lede-sm { color: var(--muted); max-width: 46em; }
.trip-tiers th { text-align: left; width: 34%; font-weight: 650; color: var(--ink); }
.trip .format { background: var(--surface); }

/* ===== Venues dropdown ===== */
.has-menu { display: flex; align-items: center; }
.menu-toggle { font: inherit; font-weight: 500; font-size: 0.95rem; background: none; border: 0; padding: 8px 0; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.menu-toggle:hover, .menu-toggle[aria-expanded="true"] { color: var(--accent); }
.menu-toggle[aria-current="page"] { color: var(--accent); font-weight: 650; }
.menu-toggle svg { transition: transform .15s; }
.menu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mega { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px -18px rgba(4, 32, 59, .35); max-height: calc(100vh - 120px); overflow-y: auto; }
.has-menu.open .mega { display: block; }
/* Hover opening is handled in site.js with a short close delay */
.nav { align-self: stretch; }
.has-menu { align-self: stretch; }
.mega .wrap { display: grid; gap: 14px; padding-block: 18px 24px; min-height: 0; }
.mega-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--muted); }
.mega-head a { text-transform: none; letter-spacing: 0; font-size: 0.9rem; color: var(--accent); }
.mega-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1100px) { .mega-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mega-area { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-family: var(--font-display); font-weight: 900; font-size: 1.05rem; color: var(--ink); text-decoration: none; padding-bottom: 8px; border-bottom: 2px solid var(--flag); margin-bottom: 6px; }
.mega-area span { font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; color: var(--muted); }
.mega-area:hover { color: var(--accent); }
.mega ul, .mobile-menu ul { list-style: none; margin: 0; padding: 0; display: grid; }
.mega li a, .mobile-menu li a { display: grid; padding: 5px 0; text-decoration: none; color: var(--ink); font-size: 0.9rem; line-height: 1.25; }
.mega li a span, .mobile-menu li a span { font-size: 0.75rem; color: var(--muted); }
.mega li a:hover, .mobile-menu li a:hover { color: var(--accent); }
.menu-btn { display: none; background: none; border: 1px solid var(--line); border-radius: 8px; width: 42px; height: 42px; place-items: center; color: var(--ink); cursor: pointer; }
@media (max-width: 760px) {
  .has-menu { display: none; }
  .menu-btn { display: grid; }
  .nav { gap: 10px; }
}
.mobile-menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--line); padding: 12px 20px 20px; max-height: calc(100vh - 110px); overflow-y: auto; box-shadow: 0 18px 30px -18px rgba(4, 32, 59, .35); }
.m-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--muted); margin: 4px 0 6px; }
.m-area { border-bottom: 1px solid var(--line); }
.m-area summary { cursor: pointer; padding: 12px 0; font-weight: 650; display: flex; justify-content: space-between; gap: 8px; }
.m-area summary span { font-weight: 500; font-size: 0.85rem; color: var(--muted); }
.m-area ul { padding: 0 0 10px 10px; }
.m-all { font-weight: 650; color: var(--accent) !important; }
.m-link { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; }
@media (min-width: 761px) { .mobile-menu { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .menu-toggle svg { transition: none; } }

/* ===== Reviews ===== */
.stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.stars svg { display: block; fill: currentColor; }
.stars .on { color: #E9A81C; }
.stars .off { color: var(--line); }
.stars-sm svg { width: 15px; height: 15px; }
.stars-md svg { width: 20px; height: 20px; }
.stars-lg svg { width: 30px; height: 30px; }
.rating-line { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--muted); text-decoration: none; }
.rating-line b { color: var(--ink); }
.rv-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; padding: 18px 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
@media (max-width: 560px) { .rv-summary { grid-template-columns: 1fr; } }
.rv-score { display: grid; justify-items: start; gap: 4px; }
.rv-score b { font-family: var(--font-display); font-weight: 900; font-size: 2.6rem; line-height: 1; }
.rv-score span { font-size: 0.85rem; color: var(--muted); }
.rv-cats { display: grid; gap: 8px; }
.rv-cat { display: grid; grid-template-columns: 7.5rem 1fr 2rem; gap: 10px; align-items: center; font-size: 0.88rem; }
.rv-bar { height: 8px; border-radius: 99px; background: var(--sunk); overflow: hidden; }
.rv-bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.rv-cat b { text-align: right; font-variant-numeric: tabular-nums; }
.review-list { display: grid; gap: 10px; }
.review { padding: 16px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 6px; }
.rv-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rv-meta { font-size: 0.82rem; color: var(--muted); }
.rv-verified { color: var(--ok); font-weight: 600; }
.rv-empty { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 18px 20px; border-radius: var(--radius); border: 1px dashed var(--line); background: var(--surface); }
.rv-empty > div:last-child { flex: 1 1 260px; min-width: 0; display: grid; gap: 4px; }
.write-review { display: grid; gap: 14px; }
.write-review > summary { list-style: none; justify-self: start; display: inline-flex; }
.write-review > summary::-webkit-details-marker { display: none; }
.write-review[open] > summary { margin-bottom: 4px; }
.review-form { display: grid; gap: 14px; padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.enquiry .review-form { padding: 0; border: 0; }
.rf-stars { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 18px; }
.star-input { border: 0; margin: 0; padding: 0; min-width: 0; }
.star-input legend { font-size: 0.8125rem; font-weight: 600; color: var(--muted); padding: 0; margin-bottom: 4px; }
.star-input[data-key="overall"] legend { color: var(--ink); }
.star-row { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.star-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-row label { cursor: pointer; color: var(--line); padding: 2px; border-radius: 4px; }
.star-row label svg { width: 26px; height: 26px; fill: currentColor; display: block; }
.star-row label:hover, .star-row label:hover ~ label, .star-row input:checked ~ label { color: #E9A81C; }
.star-row input:focus-visible + label { outline: 3px solid var(--flag); outline-offset: 1px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; }
.check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--btn); flex: none; }
.review-done { display: grid; gap: 6px; padding: 18px; border-radius: var(--radius); background: color-mix(in srgb, var(--flag) 15%, var(--surface)); }
.review-band { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 26px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
@media (max-width: 720px) { .review-band { grid-template-columns: 1fr; gap: 14px; } }
.review-band h2 { margin: 4px 0 6px; }
.rb-stars .stars .off { color: #E9A81C; }

/* ===== Photos ===== */
.photo { margin: 0; position: relative; overflow: hidden; border-radius: 14px; background: var(--sunk); max-width: 100%; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-banner { margin-bottom: 26px; max-height: 420px; }
.photo-wide { max-height: 460px; }
.photo-band { padding-block: 4px 8px; }
.photo-card { border-radius: 8px; margin: -6px -6px 6px; }
.ph-credit { position: absolute; right: 8px; bottom: 6px; font-size: 0.7rem; color: #fff; background: rgba(4, 32, 59, .55); padding: 2px 7px; border-radius: 4px; }
.photo-empty { display: grid; place-items: center; border: 2px dashed var(--line); background:
  repeating-linear-gradient(135deg, var(--sunk) 0 14px, color-mix(in srgb, var(--sunk) 70%, var(--surface)) 14px 28px); }
.photo-empty figcaption { display: grid; gap: 4px; text-align: center; padding: 14px; max-width: 34em; }
.ph-tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.ph-shot { font-size: 0.92rem; color: var(--muted); }
.photo-card.photo-empty figcaption { padding: 8px; }
.photo-card .ph-shot { display: none; }

/* =====================================================================
   Scoreboard theme (design direction A, October 2026)
   Navy scoreboard bands, white borderless cards, Nunito 900 headings.
   ===================================================================== */
:root {
  --hero: #0A2A44; --hero-s1: #0E3352; --hero-s2: #0B2D4A;
  --hero-ink: #FFFFFF; --hero-soft: #D7E2EC; --hero-dim: #B9C7D5; --hero-num: #8DD13F;
  --head: #04203B; --card-line: transparent;
  --shadow: 0 24px 40px -24px rgba(4, 32, 59, .45);
  --radius: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --hero: #0A1B2D; --hero-s1: #0D2238; --hero-s2: #0A1D31; --head: #E8EEF4; --card-line: var(--line); --shadow: 0 24px 40px -24px rgba(0, 0, 0, .7); }
}
:root[data-theme="dark"] { --hero: #0A1B2D; --hero-s1: #0D2238; --hero-s2: #0A1D31; --head: #E8EEF4; --card-line: var(--line); --shadow: 0 24px 40px -24px rgba(0, 0, 0, .7); }

body { overflow-x: clip; }
h1, h2, h3 { font-stretch: normal; color: var(--head); }
h1 { font-weight: 900; letter-spacing: -0.02em; }
h2 { font-weight: 900; }
h3 { font-weight: 800; }
.eyebrow { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.12em; }
.site-header { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-footer { background: var(--surface); }
.btn { font-weight: 700; border-radius: 10px; }
.btn-sm { border-radius: 8px; }
.block { scroll-margin-top: 110px; }

/* Cards lose their borders in light mode and sit on the paper */
.venue, .package, .format, .area-card, .nearby a, .review, .rv-summary, .visitor-rules, .plan, .occ-link, .region, .map-card, .calc-in, .no-pack, .rv-empty, .review-form, .review-band { border-color: var(--card-line); }
.venue:hover, .nearby a:hover, .area-card:hover, .occ-link:hover, a.region:hover { border-color: var(--card-line); box-shadow: 0 0 0 2px var(--flag); }
.no-pack, .rv-empty { border: 2px dashed var(--line); }
.enquiry { border: 0; border-radius: 16px; box-shadow: var(--shadow); }
:root[data-theme="dark"] .enquiry { border: 1px solid var(--line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .enquiry { border: 1px solid var(--line); } }
.enquiry h2 { font-size: 1.4rem; }
.enquiry .btn[type="submit"] { background: var(--flag); color: var(--flag-ink); }

/* Striped navy band shared by the homepage and venue page */
.hero-band, .vhero { position: relative; overflow: hidden; color: var(--hero-ink);
  background: repeating-linear-gradient(120deg, var(--hero-s1) 0 22px, var(--hero-s2) 22px 44px); }
.hb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-band:has(.hb-img)::before, .vhero:has(.hb-img)::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(4, 32, 59, .35), rgba(4, 32, 59, .85)); }
.hb-slot { position: absolute; right: 20px; top: 14px; margin: 0; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #9FB3C8; z-index: 1; }
.hb-inner, .vh-inner { position: relative; z-index: 2; }
.hero-band h1, .vhero h1 { color: var(--hero-ink); }
.hero-band .eyebrow { color: var(--hero-num); }

/* Homepage */
.hb-inner { padding-block: 92px 140px; display: grid; gap: 18px; }
.hb-inner h1 { font-size: clamp(2.5rem, 1.4rem + 4.4vw, 4.2rem); line-height: 1; max-width: 12ch; }
.hb-inner .lede { font-size: 1.2rem; color: var(--hero-soft); max-width: 34em; }
.hero-cards { position: relative; z-index: 3; margin-top: -96px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; align-items: start; }
.finder { margin: 0; background: var(--surface); border: 0; border-radius: 16px; padding: 22px; box-shadow: var(--shadow); display: grid; grid-template-columns: 1fr; gap: 14px; }
.finder h2 { font-size: 1.4rem; }
.finder .btn { grid-column: auto; padding-block: 15px; font-size: 1rem; }
:root[data-theme="dark"] .finder { border: 1px solid var(--line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .finder { border: 1px solid var(--line); } }
.board { border-radius: 16px; padding: 20px 22px 14px; box-shadow: var(--shadow); }
.board-head h2 { font-weight: 900; font-size: 1.3rem; }
.board td { padding: 10px 4px; }
.board td.pos { font-weight: 800; width: 2.4em; }
.board td a { font-family: var(--font-body); font-weight: 700; font-size: 1rem; }
.board td.grp { font-size: 0.82rem; }
.board td.price { font-weight: 900; font-size: 1.65rem; }
.scorebar-wrap { margin-top: 40px; display: grid; gap: 10px; }
.scorebar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 2px solid var(--btn); border-radius: 12px; overflow: hidden; background: var(--surface); text-align: center; font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .scorebar { border-color: var(--board-line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .scorebar { border-color: var(--board-line); } }
.scorebar div { display: grid; border-left: 1px solid var(--line); margin-left: -1px; }
.scorebar span { background: var(--board); color: var(--board-ink); padding: 8px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.scorebar b { padding: 14px 8px; font-family: var(--font-display); font-weight: 900; font-size: 2.1rem; line-height: 1.1; }
.scorebar b.red { color: #C43D2E; }
:root[data-theme="dark"] .scorebar b.red { color: #F28B7E; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .scorebar b.red { color: #F28B7E; } }
.section { padding-block: 36px; }
.section-head { align-items: baseline; }
.section-head h2 { font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.4rem); }
.section-head > a { font-weight: 600; }
.occasions { gap: 16px; }
.occasion { padding: 0; gap: 0; overflow: hidden; border: 1px solid var(--card-line); border-radius: 14px; }
.occasion:hover { border-color: var(--card-line); box-shadow: 0 0 0 2px var(--flag); }
.occasion .photo-card { margin: 0; border-radius: 0; aspect-ratio: 4 / 3 !important; border: 0; }
.occ-body { padding: 16px 18px 18px; display: grid; gap: 6px; }
.occasion h3 { font-size: 1.35rem; font-weight: 900; }
.occasion p { font-size: 0.9rem; }
.occ-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 0.82rem !important; font-weight: 700; color: var(--ink) !important; }
.occ-foot .go { color: var(--accent); white-space: nowrap; }
.step .n { font-weight: 900; font-stretch: normal; }
.area-table { background: var(--surface); border-radius: 14px; border: 1px solid var(--card-line); }
.area-table table { width: 100%; min-width: 600px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.area-table thead th { padding: 12px 18px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--head); text-align: left; }
.area-table th.r, .area-table td.r { text-align: right; }
.area-table tbody th, .area-table td { padding: 15px 18px; border-bottom: 1px solid var(--line); text-align: left; }
.area-table tbody tr:last-child > * { border-bottom: 0; }
.area-table tbody th a { font-family: var(--font-display); font-weight: 900; font-size: 1.25rem; color: var(--head); text-decoration: none; }
.area-table tbody th a:hover { color: var(--accent); }
.area-table td.b { font-weight: 700; }
.area-table .go { font-weight: 700; }
.review-band { border-radius: 16px; }
.clubs-band { border-radius: 18px; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); }
.clubs-band .eyebrow { color: var(--board-num); }
.clubs-band h2 { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.3rem); }
.fc-cta.stack { flex-direction: column; margin-top: 0; }
.fc-cta.stack .btn { width: 100%; padding-block: 15px; }

/* Inner pages: breadcrumb and page heading sit on a full-width navy band */
.crumbs:has(+ .page-head), .crumbs:has(+ .page-head) + .page-head {
  background: var(--hero); box-shadow: 0 0 0 100vmax var(--hero); clip-path: inset(0 -100vmax); color: var(--hero-ink);
}
.crumbs:has(+ .page-head) { padding-top: 30px; color: var(--hero-dim); }
.crumbs:has(+ .page-head) a { color: var(--hero-dim); }
.crumbs:has(+ .page-head) + .page-head { padding-block: 12px 40px; margin-bottom: 32px; }
.crumbs + .page-head h1 { color: var(--hero-ink); }
.crumbs + .page-head .eyebrow, .crumbs + .page-head .occ-icon { color: var(--hero-num); }
.crumbs + .page-head .lede { color: var(--hero-soft); }
.crumbs + .page-head .statline { color: var(--hero-soft); }
.crumbs + .page-head .statline b { color: var(--hero-num); font-stretch: normal; font-weight: 900; }
.crumbs + .page-head a { color: var(--hero-num); }

/* Venue page */
.vh-inner { padding-block: 104px 36px; display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; justify-content: space-between; }
.vh-copy { display: grid; gap: 10px; min-width: 0; flex: 1 1 520px; }
.vhero .crumbs { padding: 0; color: var(--hero-dim); }
.vhero .crumbs a { color: var(--hero-dim); }
.vhero h1 { font-size: clamp(2.3rem, 1.5rem + 3.2vw, 3.75rem); line-height: 1; }
.vhero .where { color: var(--hero-soft); }
.vhero .chip { background: rgba(255, 255, 255, .12); color: var(--hero-ink); }
.vhero .chip-ask { border-color: rgba(255, 255, 255, .3); color: var(--hero-soft); }
.vhero .chip-pub { background: var(--flag); color: var(--flag-ink); font-weight: 700; }
.vhero .chip-pub.off { background: transparent; border: 1px dashed rgba(255, 255, 255, .35); color: var(--hero-soft); font-weight: 600; }
.vhero .rating-line { color: var(--hero-soft); }
.vhero .rating-line b { color: var(--hero-ink); }
.vhero .stars .off { color: rgba(255, 255, 255, .25); }
.vhero .price-block { background: #04203B; border: 2px solid var(--hero-num); border-radius: 12px; padding: 14px 20px; text-align: right; flex: none; }
.vhero .price-block .lbl { color: #93A7BB; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.vhero .price-block .lbl:last-child { text-transform: none; letter-spacing: 0; }
.vhero .price-block .amt { color: var(--hero-num); font-weight: 900; font-stretch: normal; font-size: 3.2rem; line-height: 1; }
.vhero .price-block .amt-ask { font-size: 1.9rem !important; }
@media (max-width: 720px) { .vh-inner { padding-top: 64px; } .vhero .price-block { text-align: left; } }
.page-tabs { background: var(--surface); border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.page-tabs .wrap { display: flex; gap: 26px; overflow-x: auto; scrollbar-width: none; }
.page-tabs a { padding: 14px 0; white-space: nowrap; text-decoration: none; color: var(--muted); font-weight: 600; font-size: 0.95rem; border-bottom: 3px solid transparent; }
.page-tabs a:hover { color: var(--head); border-bottom-color: var(--flag); }
#contact { scroll-margin-top: 110px; }

.keyfacts { border: 2px solid var(--btn); border-radius: 12px; }
:root[data-theme="dark"] .keyfacts { border-color: var(--board-line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .keyfacts { border-color: var(--board-line); } }
.keyfacts div { padding: 0; gap: 0; text-align: center; grid-template-rows: auto 1fr; }
.keyfacts dt { background: var(--board); color: var(--board-ink); padding: 7px 6px; font-family: var(--font-body); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.1em; }
.keyfacts dd { font-weight: 900; font-stretch: normal; font-size: 1.6rem; padding: 12px 6px; display: grid; place-items: center; }
.keyfacts dd.small { font-size: 0.95rem; font-weight: 800; }
@media (max-width: 820px) { .keyfacts div:nth-child(n+4) { border-top: 0; } .keyfacts div:nth-child(n+4) dt { border-top: 1px solid var(--board-line); } }

.package { padding: 0; gap: 0; overflow: hidden; border-radius: 12px; }
.package .ptop { background: var(--board); color: var(--board-ink); padding: 14px 16px; }
.package .pname { font-weight: 900; font-stretch: normal; font-size: 1.2rem; }
.package .pprice { color: var(--board-num); font-weight: 900; font-stretch: normal; font-size: 1.8rem; line-height: 1; }
.package .pprice small { color: var(--board-dim); }
.package ul { padding: 14px 16px 0; }
.package .pfor { padding: 10px 16px 16px; }
.package.pick { box-shadow: 0 0 0 2px var(--flag); }
.rates-card { border-radius: 12px; }
.rates td.r { font-weight: 900; font-stretch: normal; font-size: 1.4rem; }
.claim { border-radius: 14px; }

/* Photography in the scoreboard bands */
.hb-img { object-position: 62% 55%; }
.hero-band:has(.hb-img)::before { background:
  linear-gradient(90deg, rgba(4, 32, 59, .9) 0%, rgba(4, 32, 59, .66) 42%, rgba(4, 32, 59, .12) 100%),
  linear-gradient(0deg, rgba(4, 32, 59, .55) 0%, rgba(4, 32, 59, 0) 40%); }
@media (max-width: 760px) { .hero-band:has(.hb-img)::before { background: linear-gradient(180deg, rgba(4, 32, 59, .55), rgba(4, 32, 59, .85)); } }
.photo img { transition: transform .6s ease; }
a.occasion:hover .photo img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .photo img { transition: none; } a.occasion:hover .photo img { transform: none; } }
.photo-banner { box-shadow: var(--shadow); }
.photo-banner, .photo-wide { width: 100%; max-height: none; aspect-ratio: 3 / 1 !important; }
@media (max-width: 760px) { .photo-banner, .photo-wide { aspect-ratio: 16 / 9 !important; } }
.crumbs:has(+ .page-head) { margin-bottom: -2px; padding-bottom: 2px; position: relative; z-index: 1; }
@media (max-width: 560px) {
  .board td.grp { display: none; }
  .board-head { flex-direction: column; gap: 2px; }
  .board td.price { font-size: 1.35rem; }
}

/* ===== Advertising ===== */
.ad { position: relative; }
.ad-label { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.ad > .ad-label, .ad-native > .ad-label { position: absolute; top: 8px; right: 12px; }
.ad-label.inline { margin-right: 6px; padding: 2px 7px; border: 1px solid var(--line); border-radius: 4px; font-size: 0.62rem; vertical-align: 1px; }
.ad-spec { font-size: 0.8rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.ad-mark { color: var(--flag); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; background: color-mix(in srgb, var(--flag) 14%, var(--surface)); flex: none; }
.ad-house { border: 2px dashed color-mix(in srgb, var(--flag) 55%, var(--line)); }
.ad-row { margin-top: 32px; }
.ad-row.ad-top { margin: 0 0 28px; }
.ad-billboard { background: var(--surface); border-radius: 14px; overflow: hidden; }
.ad-billboard .ad-body { display: flex; align-items: center; gap: 20px; padding: 28px 28px 24px; min-height: 120px; text-decoration: none; color: var(--ink); flex-wrap: wrap; }
.ad-billboard .ad-copy { display: grid; gap: 4px; flex: 1 1 320px; min-width: 0; }
.ad-billboard .ad-copy strong { font-family: var(--font-display); font-weight: 900; font-size: 1.35rem; color: var(--head); }
.ad-billboard .ad-copy > span:not(.ad-spec) { color: var(--muted); }
.ad-billboard img { max-height: 190px; width: auto; border-radius: 8px; }
.ad-billboard:not(.ad-house) .ad-body { padding: 0; }
.ad-billboard:not(.ad-house) img { display: block; width: 100%; max-height: none; border-radius: 0; }
.ad-mpu { background: var(--surface); border-radius: 14px; max-width: 340px; width: 100%; }
.ad-mpu .ad-body { display: grid; gap: 8px; justify-items: start; align-content: center; padding: 30px 22px 22px; min-height: 250px; text-decoration: none; color: var(--ink); }
.ad-mpu strong { font-family: var(--font-display); font-weight: 900; font-size: 1.3rem; color: var(--head); }
.ad-mpu .ad-body > span:not(.ad-spec):not(.ad-mark) { color: var(--muted); font-size: 0.92rem; }
.ad-mpu:not(.ad-house) .ad-body { padding: 0; min-height: 250px; }
.ad-mpu:not(.ad-house) img { width: 100%; display: block; border-radius: 14px; }
.ad-native { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; align-items: center; padding: 18px 20px; border-radius: var(--radius); background: color-mix(in srgb, var(--flag) 8%, var(--surface)); }
.ad-native h3 a { color: var(--head); text-decoration: none; }
.ad-native .where { font-size: 0.875rem; color: var(--muted); }
.ad-native.ad-house h3 { color: var(--head); }
.ad-native img { max-height: 48px; width: auto; }
@media (max-width: 560px) { .ad-native { grid-template-columns: 1fr; } .ad-native .venue-price { justify-items: start; } }
.sup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.sup { display: grid; gap: 4px; align-content: start; padding: 16px 18px; border-radius: 12px; background: var(--surface); text-decoration: none; color: var(--ink); }
.sup:hover { box-shadow: 0 0 0 2px var(--flag); }
.sup-cat { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.sup strong { font-family: var(--font-display); font-weight: 900; font-size: 1.1rem; color: var(--head); }
.sup > span:last-child { font-size: 0.88rem; color: var(--muted); }
.sup img { max-height: 40px; width: auto; justify-self: start; }
.sup-house { border: 2px dashed var(--line); background: transparent; }
.sup-house > span:last-child { color: var(--accent); font-weight: 700; }
@media (max-width: 760px) {
  .ad-billboard .ad-body { padding: 30px 18px 18px; gap: 14px; }
  .ad-billboard .ad-copy strong { font-size: 1.15rem; }
  .ad-mpu { max-width: none; }
}

/* Advertise page */
.adp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; }
.adp { display: grid; grid-template-rows: auto 1fr; border-radius: 14px; background: var(--surface); overflow: hidden; scroll-margin-top: 110px; }
.adp:target { box-shadow: 0 0 0 3px var(--flag); }
.adp-body { display: grid; gap: 10px; align-content: start; padding: 18px 20px 20px; }
.adp-body > p:first-of-type { color: var(--muted); font-size: 0.92rem; }
.adp dl { margin: 0; display: grid; gap: 4px; font-size: 0.86rem; }
.adp dl div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 8px; }
.adp dt { color: var(--muted); font-weight: 600; }
.adp dd { margin: 0; }
.adp-price { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.adp-price b { font-family: var(--font-display); font-weight: 900; font-size: 2rem; color: var(--head); line-height: 1; }
.adp-price span { color: var(--muted); font-size: 0.88rem; }
.adp .btn { justify-self: start; }
/* Wireframe thumbnails: a tiny page with the ad space in lime */
.wire { position: relative; height: 128px; background: var(--sunk); border-bottom: 1px solid var(--line); }
.wire i, .wire b { position: absolute; display: block; border-radius: 3px; }
.wire .w-head { left: 10%; right: 10%; top: 10px; height: 8px; background: var(--line); }
.wire .w-band { left: 0; right: 0; top: 24px; height: 26px; background: var(--hero); border-radius: 0; }
.wire .w-a { left: 10%; width: 52%; top: 58px; height: 18px; background: var(--surface); }
.wire .w-b { left: 10%; width: 52%; top: 82px; height: 18px; background: var(--surface); }
.wire .w-c { left: 10%; width: 52%; top: 106px; height: 14px; background: var(--surface); }
.wire b { background: var(--flag); box-shadow: 0 0 0 3px color-mix(in srgb, var(--flag) 35%, transparent); }
.wire::after { content: ""; position: absolute; left: 66%; right: 10%; top: 58px; height: 44px; background: var(--surface); border-radius: 3px; }
.w-bill b { left: 10%; right: 10%; top: 58px; height: 20px; z-index: 1; }
.w-top b { left: 10%; right: 10%; top: 56px; height: 16px; z-index: 1; }
.w-native b { left: 10%; width: 52%; top: 82px; height: 18px; }
.w-mpu b { left: 66%; right: 10%; top: 106px; height: 16px; }
.w-sup b { left: 10%; width: 52%; top: 106px; height: 14px; }

/* SEO headings: keyword line under a club name, and a display line styled like an h1 */
.h1-sub { display: block; margin-top: 10px; font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; letter-spacing: 0; color: var(--hero-num); }
.h1-look { font-family: var(--font-display); font-weight: 900; font-size: var(--step-4); line-height: 1.1; letter-spacing: -0.02em; color: var(--head); text-wrap: balance; }
h1.eyebrow { font-size: var(--step--1); line-height: 1.4; color: var(--accent); }
.hb-inner h1 { max-width: 15ch; }