@charset "utf-8";

/* =========================================================================
   Heather Highlands Golf Club — site.css
   A small hand-written design system. No framework, no build step: what is
   here is what ships.

   Contents
     1.  Tokens              brand palette, semantic surfaces, type scale
     2.  Reset and base
     3.  Layout primitives   .wrap .section .grid .stack
     4.  Typography          display, eyebrow, lede, prose
     5.  Buttons
     6.  Cards
     7.  Tables              rates, scorecard, menus
     8.  Header and nav
     9.  Hero and page bands
     10. Home sections       quick facts, gallery, teasers
     11. Forms
     12. Footer
     13. Mobile action bar
     14. Utilities, motion, print
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  /* Brand palette. These never change between themes. */
  --green-900: #0b350b; /* deep green — buttons, footer, dark panels */
  --green-700: #2f5e3f;
  --green-100: #e4ece3;
  --sage: #c9d2b6; /* the grill menu's card accent */
  --gold: #dda647; /* labels, numerals and thin rules only — see --gold-ink */
  /* --gold on cream is 1.9:1. Anything that has to be READ on a light ground
     uses this darkened version instead (5.3:1). --gold itself is only ever
     used on the dark green panels, where it clears 6:1. */
  --gold-ink: #7a5f26;
  --cream: #f5f1e7; /* page background */
  --tan: #ebe2d0; /* alternating section background */
  --paper: #fcfaf4; /* cards */
  --ink: #0b170d;
  --ink-soft: #4a4f4a;

  /* Semantic surfaces. Dark mode re-points these and nothing else. */
  --surface: var(--cream);
  --surface-raised: var(--paper);
  --surface-sunken: var(--tan);
  --surface-tint: var(--tan);
  --surface-inverse: var(--green-900);
  --header-bg: #f9f7ef;
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --text-inverse: var(--cream);
  --text-inverse-soft: #c2cfc1;
  --accent: var(--gold);
  --accent-text: var(--gold-ink);
  --border: #d3ccb9;
  --border-strong: #bdb49c;
  --btn-primary-bg: var(--green-900);
  --btn-primary-bg-hover: var(--green-700);
  --btn-primary-fg: var(--cream);
  /* Sections are separated by alternating background, not by shadow. Cards are
     flat: a hairline and generous padding do the work. */
  --shadow-card: none;
  --shadow-header: 0 1px 0 rgb(11 53 11 / 10%);

  /* Type. Fluid between a 390px phone and a 1280px desktop. */
  --font-display: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1.0625rem, 1.02rem + 0.2vw, 1.13rem); /* >= 17px on a phone */
  --step-1: clamp(1.2rem, 1.12rem + 0.38vw, 1.42rem);
  --step-2: clamp(1.45rem, 1.3rem + 0.7vw, 1.85rem);
  --step-3: clamp(1.75rem, 1.5rem + 1.2vw, 2.4rem);
  --step-4: clamp(2.1rem, 1.7rem + 1.9vw, 3.1rem);

  /* Space. A 4px-based scale; --s-5 and up carry section rhythm. */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: clamp(3rem, 2rem + 4vw, 5rem);

  --radius: 12px;
  --radius-sm: 4px; /* buttons and inputs */
  --wrap: 1200px;
  --gutter: 1rem;
  --header-h: 66px;
  --bar-h: 60px; /* mobile action bar; 0 above the nav breakpoint */

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #101510;
    --header-bg: #0e140e;
    --surface-raised: #1a211a;
    --surface-sunken: #0b0f0b;
    --surface-tint: #1e2a1f;
    --surface-inverse: #16201a;
    --text: #edf0e9;
    --text-soft: #a9b2a6;
    --text-inverse: #edf0e9;
    --text-inverse-soft: #a9b2a6;
    --accent: #e3b869;
    --accent-text: #e3b869;
    --border: #2b342b;
    --border-strong: #3a453a;
    --btn-primary-bg: #3e7a53;
    --btn-primary-bg-hover: #4b8f63;
    --btn-primary-fg: #ffffff;
    --shadow-card: none;
    --shadow-header: 0 1px 0 rgb(255 255 255 / 8%);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --surface: #101510;
  --header-bg: #0e140e;
  --surface-raised: #1a211a;
  --surface-sunken: #0b0f0b;
  --surface-tint: #1e2a1f;
  --surface-inverse: #16201a;
  --text: #edf0e9;
  --text-soft: #a9b2a6;
  --text-inverse: #edf0e9;
  --text-inverse-soft: #a9b2a6;
  --accent: #e3b869;
  --accent-text: #e3b869;
  --border: #2b342b;
  --border-strong: #3a453a;
  --btn-primary-bg: #3e7a53;
  --btn-primary-bg-hover: #4b8f63;
  --btn-primary-fg: #ffffff;

  color-scheme: dark;
}

/* ---------- 2. Reset and base -------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  /* The mobile action bar is fixed over the page. Reserve its height plus the
     home-indicator inset, or the last line of the footer sits under it. */
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--green-700);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--green-900);
}

:where(:focus-visible) {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--s-6) 0;
}

/* Skip link — visible the moment it takes focus. */
.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -4rem;
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--green-900);
  color: #fff;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top 120ms ease-out;
}

.skip-link:focus {
  top: 0;
  color: #fff;
}

/* ---------- 3. Layout primitives ----------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow {
  max-width: 760px;
}

.section {
  padding-block: var(--s-8);
}

.section--tint {
  background: var(--surface-tint);
}

.section--sunken {
  background: var(--surface-sunken);
}

.section__head {
  max-width: 62ch;
  margin-bottom: var(--s-6);
}

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

/* Auto-fit grids: one column on a phone, more when there is room for them. */
.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.stack > * + * {
  margin-top: var(--s-4);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

/* ---------- 4. Typography ------------------------------------------------ */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}

h1 {
  font-size: var(--step-4);
  font-weight: 800;
}

h2 {
  font-size: var(--step-3);
}

h3 {
  font-size: var(--step-2);
}

h4 {
  font-size: var(--step-1);
}

p {
  margin: 0 0 var(--s-4);
  text-wrap: pretty;
}

.eyebrow {
  display: block;
  margin: 0 0 var(--s-3);
  color: var(--accent-text);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* The short rule before the label. Decorative, so it is drawn rather than
   typed: a literal em dash in the markup would be read out by a screen
   reader as part of the section name. */
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.6em;
  height: 2px;
  margin-right: 0.7em;
  vertical-align: 0.25em;
  background: currentcolor;
}

.lede {
  max-width: 56ch;
  color: var(--text-soft);
  font-size: var(--step-1);
  line-height: 1.55;
}

.small {
  font-size: var(--step--1);
  color: var(--text-soft);
}

.prose :where(h2) {
  margin-top: var(--s-7);
}

.prose :where(h3) {
  margin-top: var(--s-6);
}

.prose :where(ul, ol) {
  margin: 0 0 var(--s-4);
  padding-left: 1.3em;
}

.prose :where(li) + :where(li) {
  margin-top: var(--s-2);
}

/* ---------- 5. Buttons ---------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px; /* tap target */
  padding: 0.7rem 1.3rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}

.btn--primary {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
}

/* Trailing arrow on the primary call to action. Drawn with ::after so the
   glyph never lands in the accessible name or in a copied selection. */
.btn--primary::after {
  content: "";
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.15em;
  border-top: 2px solid currentcolor;
  border-right: 2px solid currentcolor;
  transform: rotate(45deg);
}

.btn--no-arrow::after {
  content: none;
}

.btn--primary:hover {
  background: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
  color: var(--btn-primary-fg);
}

.btn--secondary {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--green-900);
}

.btn--secondary:hover {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--green-900);
}

.btn--ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}

.btn--ghost:hover {
  border-color: var(--green-700);
  color: var(--green-900);
}

/* On the deep-green bands the palette inverts. */
/* Over a photo or a dark panel the palette inverts: the solid button becomes
   cream, and the outline button becomes a translucent white hairline. */
.on-dark .btn--primary {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--green-900);
}

.on-dark .btn--primary:hover {
  background: #fff;
  border-color: #fff;
  color: var(--green-900);
}

.on-dark .btn--secondary,
.on-dark .btn--ghost {
  background: transparent;
  border-color: rgb(255 255 255 / 55%);
  color: #fff;
}

.on-dark .btn--secondary:hover,
.on-dark .btn--ghost:hover {
  background: rgb(255 255 255 / 12%);
  border-color: #fff;
  color: #fff;
}

.btn[aria-disabled="true"],
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.btn:active {
  transform: translateY(1px);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 600;
  color: var(--green-700);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}

.link-arrow:hover {
  color: var(--green-900);
  border-bottom-color: var(--green-700);
}

/* ---------- 6. Cards ------------------------------------------------------ */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.card > :last-child {
  margin-bottom: 0;
}

.card__title {
  margin: 0;
  font-size: var(--step-1);
}

.card--accent {
  border-top: 4px solid var(--accent);
}

.card--sage {
  background: linear-gradient(0deg, var(--surface-raised), var(--surface-raised)) padding-box;
  border-left: 4px solid var(--sage);
}

.price {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.price__unit {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* ---------- 7. Tables ----------------------------------------------------- */

/* Every table scrolls inside its own box rather than pushing the page wide.
   This is what keeps 390px free of a horizontal scrollbar. */
.table-scroll {
  /* position: relative makes this box the containing block for any absolutely
     positioned descendant, so overflow can actually clip one. Without it an
     abs-positioned child escapes the scroller and widens the whole document. */
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.table-scroll:focus-visible {
  outline: 3px solid var(--accent);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

caption {
  padding: var(--s-4) var(--s-4) var(--s-2);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  text-align: left;
  color: var(--text);
}

caption .small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
}

th,
td {
  padding: 0.6rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

thead th {
  background: var(--surface-tint);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

tbody th {
  font-weight: 600;
  white-space: nowrap;
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

td.num,
th.num {
  text-align: right;
}

/* A rate the club does not offer. Spelled out rather than shown as a dash:
   a dash makes a sighted reader guess and tells a screen reader nothing. */
.na {
  color: var(--text-soft);
  font-size: var(--step--1);
  font-style: italic;
  white-space: nowrap;
}

/* Under 600px the rates tables stop being tables and become one stacked card
   per row, each cell labelled from its column header. A five-column price grid
   at 390px is otherwise either a sideways scroll or unreadably tight, and the
   rates are the single most-looked-up thing on the site.
   The scorecard deliberately does NOT do this: twenty-two columns stacked would
   be a wall of labels, so it keeps its horizontal scroll. */
@media (max-width: 599px) {
  .table-stack {
    overflow-x: visible;
    border: 0;
    background: none;
  }

  .table-stack table,
  .table-stack tbody,
  .table-stack tr,
  .table-stack td {
    display: block;
    width: 100%;
  }

  /* display: block on the table takes the caption out of table layout, where it
     would otherwise shrink-to-fit the widest cell and wrap after every word. */
  .table-stack caption {
    display: block;
    width: 100%;
    padding-inline: 0;
  }

  /* The column headers survive as the ::before labels below. */
  .table-stack thead {
    display: none;
  }

  .table-stack tr {
    margin-bottom: var(--s-4);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
  }

  .table-stack tbody th[scope="row"] {
    display: block;
    width: 100%;
    background: var(--tan);
    border-bottom: 1px solid var(--border);
    white-space: normal;
  }

  .table-stack td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
    text-align: right;
  }

  .table-stack td::before {
    content: attr(data-label);
    color: var(--text-soft);
    font-size: var(--step--1);
    font-weight: 600;
    text-align: left;
  }

  .table-stack tr:last-child {
    margin-bottom: 0;
  }
}

/* Scorecard: a wide numeric grid. The hole header row carries the gold band
   from the printed card. */
.scorecard th[scope="col"] {
  background: var(--gold);
  color: #1b1b1b;
  text-align: right;
}

.scorecard th[scope="row"] {
  position: sticky;
  left: 0;
  background: var(--surface-raised);
  border-right: 1px solid var(--border);
  z-index: 1;
}

.scorecard td {
  text-align: right;
  padding-inline: 0.55rem;
}

.scorecard .total {
  background: var(--surface-tint);
  font-weight: 700;
}

.scorecard tr.is-par th,
.scorecard tr.is-par td {
  background: var(--surface-tint);
  font-weight: 700;
}

.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-list > li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px dashed var(--border);
}

.menu-list > li:last-child {
  border-bottom: 0;
}

.menu-list .item-name {
  font-weight: 700;
}

.menu-list .item-price {
  font-family: var(--font-display);
  font-weight: 700;
  white-space: nowrap;
}

.menu-list .item-desc {
  grid-column: 1 / -1;
  margin: var(--s-1) 0 0;
  color: var(--text-soft);
  font-size: var(--step--1);
}

/* A plain comma-free list of pourable things. */
.pour-list {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
  columns: 2;
  column-gap: var(--s-5);
  font-size: var(--step--1);
}

.pour-list li {
  break-inside: avoid;
  padding: 0.15rem 0;
}

/* ---------- 8. Header and nav --------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-header);
}

.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--text);
  padding-block: var(--s-2);
}

.brand img {
  width: auto;
  height: 40px;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.02em;
}

.brand__name span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* The club's lockup is black artwork. On the cream page that is correct; on a
   dark background it vanishes, so a light variant is shipped and swapped by
   theme. Two <img> rather than <picture> so the [data-theme] override works
   as well as prefers-color-scheme. */
.brand__logo-light {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand__logo-dark {
    display: none;
  }

  :root:not([data-theme="light"]) .brand__logo-light {
    display: block;
  }
}

:root[data-theme="dark"] .brand__logo-dark {
  display: none;
}

:root[data-theme="dark"] .brand__logo-light {
  display: block;
}

.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0.5rem 0.85rem;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.nav__toggle-bars {
  display: grid;
  gap: 3px;
}

.nav__toggle-bars span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentcolor;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Any explicit `display` beats the UA stylesheet's [hidden] { display: none },
   so the rule above would keep the list visible even when site.js hides it.
   This is what actually collapses the mobile nav. */
.nav__list[hidden] {
  display: none;
}

.nav__list a {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.nav__list a:hover {
  background: var(--surface-tint);
  color: var(--green-900);
}

.nav__list a[aria-current="page"] {
  color: var(--green-900);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* The two persistent header actions. Kept inside the list so the mobile toggle
   collapses them with everything else; on a phone the sticky bottom bar carries
   the same two actions anyway. */
.nav__actions {
  display: flex;
  gap: var(--s-2);
  margin-left: var(--s-3);
}

.nav__list .btn {
  /* `.nav__list a` is (0,1,1) and sets display: block, which out-specifies
     `.btn`'s inline-flex at (0,1,0). Left alone the button is a block, its
     ::after arrow becomes an inline box that ignores width and height, and the
     chevron renders as a stray vertical stroke. Same trap as the color one
     below; both have to be restated at (0,2,0). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.9rem;
  min-height: 40px;
  font-size: 0.875rem;
}

/* `.nav__list a` is (0,1,1) and out-specifies `.btn--primary` at (0,1,0), which
   left the button labels the wrong colour against their own background. These
   restate both foregrounds at (0,2,0), which wins. */
.nav__list .btn--primary {
  color: var(--btn-primary-fg);
}

.nav__list .btn--primary:hover {
  background: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
  color: var(--btn-primary-fg);
}

.nav__list .btn--ghost {
  color: var(--text);
}

.nav__list .btn--ghost:hover {
  background: transparent;
  border-color: var(--green-900);
  color: var(--green-900);
}

/* Below the breakpoint the nav collapses behind the toggle. Without JS the
   panel stays open (the checkbox-free fallback): `hidden` is only ever set by
   site.js, which also sets aria-expanded. */
@media (max-width: 899px) {
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-1);
    padding: var(--s-3) 0 var(--s-5);
    border-top: 1px solid var(--border);
  }

  .nav__list a {
    padding: 0.8rem 0.6rem;
    font-size: var(--step-0);
  }

  .nav__list .btn {
    margin-top: var(--s-2);
    justify-content: center;
  }
}

@media (min-width: 900px) {
  .nav__toggle {
    display: none;
  }

  .nav__list[hidden] {
    display: flex;
  }
}

/* ---------- 9. Hero and page bands ---------------------------------------- */

.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(78svh, 640px);
  padding-block: var(--s-8) var(--s-7);
  background: var(--green-900);
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

/* The <picture> wrapper is auto-height, so `height: 100%` on the img resolved
   to its intrinsic 923px and the box was never cropped: at 1440px the hero
   showed sky and the bunkers fell below the fold. Size the wrapper too. */
.hero__media picture {
  display: block;
  height: 100%;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The hero box is wider than the photo, so cover crops vertically. Favour the
     bottom: the bunker complex and the flag are the subject, the sky is not. */
  object-position: center 82%;
}

/* The scrim. Two layers: a horizontal one that darkens the text column enough
   for white to clear 4.5:1, and a gentle vertical one for overall contrast.
   Weighting it sideways rather than flooding the whole frame keeps the bunker
   complex on the right actually visible, which is the point of using a photo. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      to right,
      rgb(8 26 12 / 88%) 0%,
      rgb(8 26 12 / 72%) 34%,
      rgb(8 26 12 / 28%) 68%,
      rgb(8 26 12 / 10%) 100%
    ),
    linear-gradient(to top, rgb(8 26 12 / 45%) 0%, rgb(8 26 12 / 12%) 50%, rgb(8 26 12 / 28%) 100%);
}

/* On a phone the text runs the full width, so there is no quiet column to
   protect and the scrim has to be vertical instead. */
@media (max-width: 59.99rem) {
  .hero::after {
    background: linear-gradient(
      to top,
      rgb(8 26 12 / 86%) 0%,
      rgb(8 26 12 / 68%) 38%,
      rgb(8 26 12 / 34%) 72%,
      rgb(8 26 12 / 20%) 100%
    );
  }
}

.hero__mark {
  width: 84px;
  height: auto;
  margin-bottom: var(--s-4);
}

.hero h1 {
  max-width: 16ch;
  margin-bottom: var(--s-3);
  color: #fff;
  text-shadow: 0 1px 24px rgb(0 0 0 / 35%);
}

.hero__sub {
  max-width: 40ch;
  margin-bottom: var(--s-5);
  color: #eef2ea;
  font-size: var(--step-1);
}

.hero .eyebrow {
  color: var(--gold);
}

/* Compact band at the top of each subpage. */
.pagehead {
  padding-block: var(--s-7) var(--s-6);
  background: var(--green-900);
  color: var(--text-inverse);
  border-bottom: 4px solid var(--gold);
}

.pagehead h1 {
  max-width: 20ch;
  margin-bottom: var(--s-3);
  color: #fff;
}

.pagehead .eyebrow {
  color: var(--gold);
}

.pagehead p {
  max-width: 58ch;
  color: #dfe7dc;
  font-size: var(--step-1);
}

/* "Ready to play?" band before the footer. */
.cta-band {
  padding-block: var(--s-7);
  background: var(--green-700);
  color: #fff;
  text-align: center;
}

.cta-band h2 {
  margin-bottom: var(--s-3);
  color: #fff;
}

.cta-band p {
  max-width: 48ch;
  margin-inline: auto;
  color: #e3ecdf;
}

.cta-band .cluster {
  justify-content: center;
}

/* ---------- 10. Home sections --------------------------------------------- */

.facts {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.facts > div {
  padding: var(--s-5);
  background: var(--surface-raised);
}

.facts dt {
  margin: 0 0 var(--s-2);
  color: var(--accent-text);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.facts dd {
  margin: 0;
  font-weight: 600;
  line-height: 1.45;
}

.facts a {
  color: inherit;
}

.gallery {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.gallery figure {
  margin: 0;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.gallery figcaption {
  padding: var(--s-3) var(--s-4);
  color: var(--text-soft);
  font-size: var(--step--1);
}

/* Media + text pairing used by the teasers. */
.split {
  display: grid;
  gap: var(--s-6);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.split img {
  width: 100%;
  border-radius: var(--radius);
  aspect-ratio: 3 / 2;
  object-fit: cover;
  box-shadow: var(--shadow-card);
}

.rate-strip {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.rate-strip .card {
  gap: var(--s-2);
  text-align: left;
}

/* Dark stat strip. Sits directly under the hero and carries three numbers in
   gold. Gold on --green-900 is 6.3:1, so these are legible, not just decorative. */
.statstrip {
  padding-block: var(--s-6);
  background: var(--green-900);
  color: #fff;
}

.statstrip__grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.statstrip__grid > div {
  padding-left: var(--s-4);
  border-left: 2px solid var(--gold);
}

.statstrip dt,
.statstrip .stat__label {
  margin: 0 0 var(--s-1);
  color: #dfe7dc;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.statstrip dd,
.statstrip .stat__value {
  margin: 0;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1;
}

/* Three-column feature grid: a heading, a line of copy, an underlined link. */
.features {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.features > div {
  padding-top: var(--s-4);
  border-top: 2px solid var(--gold);
}

.features h3 {
  margin-bottom: var(--s-2);
  font-size: var(--step-2);
}

.features p {
  color: var(--text-soft);
}

/* Mirrored split: a photo on one side, a solid color panel of text on the
   other. `--reverse` flips which side the panel lands on. Both collapse to a
   single column well before a phone. */
.panel-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  align-items: stretch;
}

.panel-split__media {
  min-height: 18rem;
}

.panel-split__media img {
  width: 100%;
  height: 100%;
  min-height: 18rem;
  object-fit: cover;
}

.panel-split__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--s-8) clamp(1rem, 4vw, 3.5rem);
}

.panel-split__panel > :last-child {
  margin-bottom: 0;
}

.panel-split--dark .panel-split__panel {
  background: var(--green-900);
  color: #fff;
}

.panel-split--dark .panel-split__panel h2 {
  color: #fff;
}

.panel-split--dark .panel-split__panel p {
  color: #dfe7dc;
}

.panel-split--dark .panel-split__panel .eyebrow {
  color: var(--gold);
}

.panel-split--tan .panel-split__panel {
  background: var(--tan);
}

/* Source order is photo-then-panel. --reverse paints the panel first on wide
   screens without reordering the markup, so the reading order stays sane. */
@media (min-width: 60rem) {
  .panel-split--reverse .panel-split__media {
    order: 2;
  }
}

/* A framed photo: the tan-panel side of the pair gets a gold hairline offset,
   which is the only place the frame motif is used. */
.framed {
  position: relative;
  padding: var(--s-4);
}

.framed img {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: 2px;
}

.framed::before {
  content: "";
  position: absolute;
  inset: 0 var(--s-6) var(--s-6) 0;
  border: 2px solid var(--gold);
}

/* ---------- 11. Forms ----------------------------------------------------- */

.form {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  padding: var(--s-5);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.field input,
.field textarea,
.field select {
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: var(--step-0);
}

.field textarea {
  min-height: 7rem;
  resize: vertical;
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--green-700);
}

/* Shown by site.js when no form endpoint is configured. */
.form__notice {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--s-4);
  background: var(--surface-tint);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  font-weight: 600;
}

/* ---------- 12. Footer ---------------------------------------------------- */

.footer {
  padding-block: var(--s-7) var(--s-6);
  background: var(--surface-inverse);
  border-top: 3px solid var(--gold);
  color: var(--text-inverse);
}

.footer a {
  color: #fff;
  text-decoration-color: rgb(255 255 255 / 45%);
}

.footer a:hover {
  color: var(--gold);
}

.footer__grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.footer__tagline {
  max-width: 24ch;
  margin-bottom: 0;
  color: #dfe7dc;
}

.footer__hours {
  margin-top: var(--s-4);
  margin-bottom: 0;
  color: #dfe7dc;
}

.footer h2 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-3);
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer li + li {
  margin-top: var(--s-2);
}

.footer__logo {
  width: 150px;
  height: auto;
  margin-bottom: var(--s-4);
}

.footer address {
  font-style: normal;
  line-height: 1.7;
  color: #e6ece3;
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid rgb(255 255 255 / 15%);
  color: var(--text-inverse-soft);
  font-size: var(--step--1);
}

/* ---------- 13. Mobile action bar ------------------------------------------ */

.actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: grid;
  /* minmax(0, 1fr), not 1fr: a bare 1fr track refuses to shrink below its
     content's min-content width, and "Directions" plus its icon is wider than
     a third of a 390px phone. That pushed the whole document 27px wide. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: var(--bar-h);
  padding-bottom: env(safe-area-inset-bottom, 0);
  background: var(--green-900);
  border-top: 2px solid var(--gold);
}

.actionbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  /* Paired with minmax(0, 1fr) above: without min-width: 0 the flex item
     re-imposes its own min-content floor and the overflow comes back. */
  min-width: 0;
  min-height: 44px;
  padding: 0.5rem 0.25rem;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.actionbar a + a {
  border-left: 1px solid rgb(255 255 255 / 18%);
}

.actionbar a:hover,
.actionbar a:focus-visible {
  background: var(--green-700);
  color: #fff;
}

.actionbar svg {
  width: 20px;
  height: 20px;
  fill: var(--gold);
}

@media (min-width: 900px) {
  .actionbar {
    display: none;
  }

  body {
    padding-bottom: 0;
  }
}

/* ---------- 14. Utilities, motion, print ----------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.center {
  text-align: center;
}

.mt-0 {
  margin-top: 0;
}

.mt-5 {
  margin-top: var(--s-5);
}

.mb-0 {
  margin-bottom: 0;
}

.mb-5 {
  margin-bottom: var(--s-5);
}

.mb-6 {
  margin-bottom: var(--s-6);
}

.note {
  padding: var(--s-4) var(--s-5);
  background: var(--surface-tint);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
}

.note > :last-child {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .header,
  .actionbar,
  .cta-band,
  .hero__media,
  .skip-link {
    display: none !important;
  }

  body {
    padding-bottom: 0;
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .table-scroll {
    overflow: visible;
    border: 1px solid #999;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
  }
}