/* ==========================================================================
   Parkway Golf Course — Pound, Wisconsin
   Design system. One file, sectioned, hand-written. Not generated.

   Sourced from the property, not invented:
     #102115  the deep pine the old site painted its own hero with. Kept as the
              anchor colour because it is the only deliberate brand decision
              the legacy build ever made.
     Est. 1999, 18 holes, par 72 — the facts the design is allowed to shout.

   Direction: a Northwoods Wisconsin public course, not a gated country club.
   The reference points are a printed scorecard, a tournament pairing sheet and
   a club-championship programme — Caslon display, condensed tabular figures,
   hairline rules, bone paper, brass. Data is the ornament: the scorecard is
   set as a designed object rather than hidden behind an accordion.

   Deliberately absent: gradients, drop shadows, glass, pill buttons, rounded
   cards, icon grids. Square corners and rules only.
   ========================================================================== */

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

:root {
  /* Pine — the anchor */
  --pine:        #102115;
  --pine-deep:   #0a160d;
  --pine-2:      #1a3122;   /* raised surface on dark */
  --pine-line:   #2c4834;   /* hairline on dark */

  /* Turf */
  --fairway:     #33613f;
  --fairway-lift:#3f7a4d;

  /* Paper */
  --bone:        #f4f1e8;
  --bone-2:      #ebe6d9;   /* recessed band on light */
  --bone-line:   #d8d1bf;   /* hairline on light */
  --white:       #ffffff;

  /* Ink */
  --ink:         #191a17;
  --ink-soft:    #4a4d45;
  --ink-muted:   #6e7266;

  /* Accents — used sparingly, by rule */
  --brass:       #a8853f;   /* trophy plate. Eyebrows, rules, numerals. */
  --brass-lift:  #c8a355;
  --flag:        #9d332b;   /* the pin flag. CTAs and live status only. */
  --flag-lift:   #b93f35;

  /* Type */
  --display: "Libre Caslon Display", "Big Caslon", "Hoefler Text", Georgia, serif;
  --body:    "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --ui:      "Barlow Condensed", "Oswald", "Arial Narrow", sans-serif;

  /* Rhythm */
  --measure:    62ch;
  --gutter:     clamp(1.25rem, 4vw, 4rem);
  --section:    clamp(4rem, 9vw, 8.5rem);
  --max:        1420px;
  --max-narrow: 720px;

  /* Motion */
  --ease:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --swift: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. Reset + base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1.0625rem, 0.35vw + 0.99rem, 1.1875rem);
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--fairway); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--flag); }

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

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

.skip-link {
  position: absolute; left: -9999px;
  background: var(--pine); color: var(--bone);
  padding: 0.75rem 1.25rem; z-index: 999;
  font-family: var(--ui); text-transform: uppercase; letter-spacing: 0.1em;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Every reveal has a static resting state — motion is decoration only. */
@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;
  }
  .js .reveal, .reveal { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 { margin: 0 0 0.45em; font-weight: 400; }

/* Caslon is the voice. It carries the page where photography can't — which on
   this project is most places, because the client has almost no usable course
   photography of its own. Tight leading, optical sizing set by hand. */
.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.d1 { font-size: clamp(2.75rem, 7.2vw, 6.25rem); }
.d2 { font-size: clamp(2.1rem, 4.6vw, 3.75rem); }
.d3 { font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.08; }

/* Letterspaced condensed caps. Section numbers, labels, nav, table heads. */
.eyebrow {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 0 0 1.4rem;
  font-family: var(--ui);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--brass);
}
.eyebrow::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: currentColor; opacity: 0.35;
}
.eyebrow--plain::after { display: none; }
.eyebrow__num { font-variant-numeric: tabular-nums; opacity: 0.7; }

.lede {
  font-size: clamp(1.1875rem, 0.7vw + 1.05rem, 1.5rem);
  line-height: 1.48;
  max-width: var(--measure);
  color: var(--ink-soft);
}

.prose > * + * { margin-top: 1.1em; }
.prose { max-width: var(--measure); }
.prose h2 { font-family: var(--display); font-size: clamp(1.5rem, 2.2vw, 2rem); margin-top: 1.8em; }
.prose h3 { font-family: var(--ui); text-transform: uppercase; letter-spacing: 0.14em;
            font-size: 0.9375rem; font-weight: 600; margin-top: 2em; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.15em; }
.prose li + li { margin-top: 0.35em; }
.prose strong { font-weight: 600; }

.muted { color: var(--ink-muted); }

/* Small print set in the UI face — captions, credits, footnotes. */
.fineprint {
  font-family: var(--ui);
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

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

.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.6); }

/* Dark bands. Pine is the "inside the clubhouse" surface. */
.band-pine {
  background: var(--pine);
  color: var(--bone);
}
.band-pine a { color: var(--brass-lift); }
.band-pine a:hover { color: var(--white); }
.band-pine .lede { color: rgba(244, 241, 232, 0.78); }
.band-pine .eyebrow { color: var(--brass-lift); }
.band-pine .fineprint { color: rgba(244, 241, 232, 0.55); }
.band-pine .muted { color: rgba(244, 241, 232, 0.6); }

.band-bone2 { background: var(--bone-2); }

/* The workhorse editorial split: text column + tall media, deliberately
   unequal so it never reads as a 50/50 template block. */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 0.82fr; }
  .split--flip { grid-template-columns: 0.82fr 1fr; }
  .split--flip > :first-child { order: 2; }
}

.stack > * + * { margin-top: 1.25rem; }
.stack--lg > * + * { margin-top: 2rem; }

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

.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid transparent;
  font-family: var(--ui);
  font-size: 0.9375rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.btn--primary { background: var(--flag); color: var(--white); border-color: var(--flag); }
.btn--primary:hover { background: var(--flag-lift); border-color: var(--flag-lift); color: var(--white); }

.btn--pine { background: var(--pine); color: var(--bone); border-color: var(--pine); }
.btn--pine:hover { background: var(--fairway); border-color: var(--fairway); color: var(--white); }

/* Ghost inverts on hover. The label sits in a span so the border (currentColor)
   and the text can resolve to different colours during the swap. */
.btn--ghost { background: transparent; color: currentColor; border-color: currentColor; }
.btn--ghost:hover { background: currentColor; }
.btn--ghost:hover > span { color: var(--pine); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* A text link with a rule under it. */
.linkline {
  display: inline-block;
  font-family: var(--ui);
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.2rem;
}

/* --------------------------------------------------------------------------
   6. Topbar + masthead + nav
   -------------------------------------------------------------------------- */

.topbar {
  background: var(--pine-deep);
  color: rgba(244, 241, 232, 0.72);
  font-family: var(--ui);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; }
.topbar__est { white-space: nowrap; }
.topbar__links { display: flex; align-items: center; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { color: var(--brass-lift); }
@media (max-width: 720px) { .topbar__est { display: none; } .topbar__inner { justify-content: center; } }

.masthead {
  position: sticky; top: 0; z-index: 100;
  background: var(--pine);
  border-bottom: 1px solid var(--pine-line);
}
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 78px;
}

/* Wordmark is HTML, not an image file — the client has no logo asset (their
   builder is still serving logo-placeholder.png), so the lockup is set live in
   Caslon and stays crisp at any size. Swap for an SVG when a real mark exists. */
.wordmark { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; color: var(--bone); }
.wordmark__mark { width: 38px; height: 38px; flex: none; }
.wordmark__text { display: flex; flex-direction: column; line-height: 1; }
.wordmark__name {
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: 0.01em;
}
.wordmark__sub {
  font-family: var(--ui);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--brass);
  margin-top: 0.32rem;
}

.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav__list { display: flex; align-items: center; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.nav__link {
  font-family: var(--ui);
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: rgba(244, 241, 232, 0.85);
  text-decoration: none;
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
}
.nav__link:hover { color: var(--white); border-bottom-color: var(--brass); }
.nav__link[aria-current="page"] { color: var(--white); border-bottom-color: var(--brass); }

.nav-toggle {
  display: none;
  background: transparent; border: 1px solid var(--pine-line); color: var(--bone);
  font-family: var(--ui); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.14em;
  padding: 0.55rem 1rem; cursor: pointer;
}

@media (max-width: 1080px) {
  .nav-toggle { display: block; order: 2; }
  .nav { gap: 0.75rem; }
  .nav__list {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--pine); border-bottom: 1px solid var(--pine-line);
    padding: 0.5rem var(--gutter) 1.5rem;
    display: none;
  }
  .nav__list[data-open="true"] { display: flex; }
  .nav__link { display: block; padding: 0.85rem 0; border-bottom: 1px solid var(--pine-line); }
  .masthead__inner { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .nav > .btn { display: none; }
  .wordmark__name { font-size: 1.25rem; }
}

/* --------------------------------------------------------------------------
   7. Hero + page heads
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--pine);
  color: var(--bone);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* The only usable wide shot of the property is a scanned film aerial from the
   early 2000s. It is held back to a texture rather than asked to carry a hero:
   the pine wash hides the grain and the type does the work. */
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(10, 22, 13, 0.55) 0%, rgba(10, 22, 13, 0.82) 55%, rgba(10, 22, 13, 0.95) 100%),
    linear-gradient(to right, rgba(16, 33, 21, 0.9) 0%, rgba(16, 33, 21, 0.35) 65%);
}

.hero__inner {
  position: relative;
  padding-block: clamp(5rem, 15vw, 11rem) clamp(3.5rem, 8vw, 6rem);
  max-width: 62rem;
}
.hero__title { margin: 0 0 1.5rem; }
.hero__lede { max-width: 40ch; color: rgba(244, 241, 232, 0.82); }
.hero .btn-row { margin-top: 2.25rem; }

/* Facts bar riding the bottom edge of the hero. Reads as the top line of a
   scorecard, which is the point. */
.factbar {
  position: relative;
  border-top: 1px solid var(--pine-line);
  background: rgba(10, 22, 13, 0.55);
}
.factbar__list {
  display: grid; grid-template-columns: repeat(4, 1fr);
  list-style: none; margin: 0; padding: 0;
}
.factbar__item {
  padding: 1.35rem 0.5rem;
  text-align: center;
  border-left: 1px solid var(--pine-line);
}
.factbar__item:first-child { border-left: 0; }
.factbar__num {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  line-height: 1;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.factbar__label {
  display: block; margin-top: 0.5rem;
  font-family: var(--ui); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: rgba(244, 241, 232, 0.6);
}
@media (max-width: 640px) {
  .factbar__list { grid-template-columns: repeat(2, 1fr); }
  .factbar__item:nth-child(3) { border-left: 0; }
  .factbar__item:nth-child(n+3) { border-top: 1px solid var(--pine-line); }
}

/* Interior page header — no photo, just type on pine. */
.pagehead {
  background: var(--pine); color: var(--bone);
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--pine-line);
}
.pagehead__lede { max-width: 52ch; color: rgba(244, 241, 232, 0.8); margin-top: 1.25rem; }

.crumbs {
  font-family: var(--ui); font-size: 0.8125rem;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: rgba(244, 241, 232, 0.55);
  margin-bottom: 1.5rem;
}
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--brass-lift); }

/* --------------------------------------------------------------------------
   8. Status strip — hours / booking, driven from site.txt
   -------------------------------------------------------------------------- */

.strip {
  background: var(--bone-2);
  border-bottom: 1px solid var(--bone-line);
  font-family: var(--ui);
}
.strip__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.5rem;
  padding-block: 1rem;
}
.strip__item {
  display: flex; align-items: baseline; gap: 0.6rem;
  font-size: 0.9375rem; letter-spacing: 0.04em;
}
.strip__key {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--brass);
}
.strip__val { color: var(--ink); }
.strip__cta { margin-left: auto; }
@media (max-width: 860px) { .strip__cta { margin-left: 0; } }

/* --------------------------------------------------------------------------
   9. Section furniture
   -------------------------------------------------------------------------- */

.sectionhead { margin-bottom: clamp(2rem, 4vw, 3.5rem); max-width: var(--measure); }

/* A ruled row of figures. Used for course vitals and dining facts. */
.vitals {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--bone-line);
  margin: 0; padding: 0;
}
.band-pine .vitals { border-top-color: var(--pine-line); }
.vitals__item {
  padding: 1.25rem 1.25rem 1.25rem 0;
  border-bottom: 1px solid var(--bone-line);
}
.band-pine .vitals__item { border-bottom-color: var(--pine-line); }
.vitals__key {
  font-family: var(--ui); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--ink-muted);
}
.band-pine .vitals__key { color: rgba(244, 241, 232, 0.55); }
.vitals__val {
  font-family: var(--display); font-size: 1.75rem; line-height: 1.1;
  margin-top: 0.35rem; font-variant-numeric: tabular-nums;
}

/* Figure with a hairline frame and a set caption. */
.figure { margin: 0; }
.figure img { width: 100%; }
.figure--frame img { border: 1px solid var(--bone-line); }
.band-pine .figure--frame img { border-color: var(--pine-line); }
.figure figcaption {
  margin-top: 0.75rem;
  font-family: var(--ui); font-size: 0.8125rem;
  letter-spacing: 0.08em; color: var(--ink-muted);
  border-top: 1px solid var(--bone-line); padding-top: 0.6rem;
}
.band-pine .figure figcaption { color: rgba(244, 241, 232, 0.55); border-top-color: var(--pine-line); }

/* --------------------------------------------------------------------------
   10. Scorecard
   -------------------------------------------------------------------------- */

.card-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.scorecard {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-family: var(--ui);
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
}
.scorecard caption {
  text-align: left;
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--ink-muted); padding-bottom: 0.9rem;
}
.band-pine .scorecard caption { color: rgba(244, 241, 232, 0.55); }

.scorecard th, .scorecard td {
  padding: 0.6rem 0.4rem;
  text-align: center;
  border-bottom: 1px solid var(--bone-line);
}
.band-pine .scorecard th, .band-pine .scorecard td { border-bottom-color: var(--pine-line); }

.scorecard thead th {
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.7rem;
}
.band-pine .scorecard thead th { color: var(--bone); border-bottom-color: var(--brass); }

.scorecard th[scope="row"] {
  text-align: left; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 0.8125rem;
  white-space: nowrap;
  padding-right: 1.25rem;
}
.scorecard__hole { color: var(--ink-muted); }
.band-pine .scorecard__hole { color: rgba(244, 241, 232, 0.6); }

/* OUT / IN / TOTAL are where a golfer's eye lands. */
.scorecard .is-sum {
  background: var(--bone-2);
  font-weight: 600;
  color: var(--ink);
}
.band-pine .scorecard .is-sum { background: var(--pine-2); color: var(--bone); }
.scorecard .is-total {
  background: var(--pine); color: var(--bone);
  font-weight: 600;
}
.band-pine .scorecard .is-total { background: var(--brass); color: var(--pine-deep); }

.scorecard tbody tr:hover td:not(.is-sum):not(.is-total) { background: rgba(168, 133, 63, 0.09); }

.scorecard__tee { display: inline-flex; align-items: center; gap: 0.45rem; }
.scorecard__dot { width: 9px; height: 9px; flex: none; border: 1px solid rgba(0,0,0,0.35); }
.band-pine .scorecard__dot { border-color: rgba(255,255,255,0.4); }
.scorecard__dot--blue  { background: #3f6fa8; }
.scorecard__dot--white { background: #f4f1e8; }
.scorecard__dot--red   { background: #9d332b; }

/* Compact summary used on the homepage — 18 columns collapse to three figures. */
.cardsummary {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--pine-line);
  font-family: var(--ui); font-variant-numeric: tabular-nums;
}
.cardsummary__cell { padding: 1.5rem 1.25rem; border-left: 1px solid var(--pine-line); }
.cardsummary__cell:first-child { border-left: 0; }
.cardsummary__key { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--brass-lift); }
.cardsummary__val { font-family: var(--display); font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1; margin-top: 0.5rem; }
.cardsummary__sub { font-size: 0.8125rem; letter-spacing: 0.08em; color: rgba(244,241,232,0.55); margin-top: 0.35rem; }
@media (max-width: 620px) {
  .cardsummary { grid-template-columns: 1fr; }
  .cardsummary__cell { border-left: 0; border-top: 1px solid var(--pine-line); }
  .cardsummary__cell:first-child { border-top: 0; }
}

/* --------------------------------------------------------------------------
   11. Hole-by-hole routing
   -------------------------------------------------------------------------- */

.routing { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bone-line); }
.routing__item {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: 1.5rem; align-items: baseline;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--bone-line);
}
.routing__num {
  font-family: var(--display); font-size: 1.75rem; line-height: 1;
  color: var(--brass); font-variant-numeric: tabular-nums;
}
.routing__meta {
  font-family: var(--ui); font-variant-numeric: tabular-nums;
  font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-muted); white-space: nowrap;
}
.routing__note { color: var(--ink-soft); }
@media (max-width: 640px) {
  .routing__item { grid-template-columns: 3rem 1fr; gap: 1rem; }
  .routing__meta { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   12. Rates
   -------------------------------------------------------------------------- */

.rates { width: 100%; border-collapse: collapse; font-family: var(--ui); font-variant-numeric: tabular-nums; }
.rates caption {
  text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--ink-muted); padding-bottom: 0.9rem;
}
.rates thead th {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em;
  text-align: right; padding: 0 0 0.7rem 1rem; border-bottom: 1px solid var(--ink);
}
.rates thead th:first-child { text-align: left; padding-left: 0; }
.rates td, .rates th[scope="row"] {
  padding: 0.95rem 0 0.95rem 1rem; border-bottom: 1px solid var(--bone-line);
  text-align: right; font-size: 1rem;
}
.rates th[scope="row"] {
  text-align: left; padding-left: 0; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.9375rem;
}
.rates__price { font-family: var(--display); font-size: 1.375rem; }
.rates__call { color: var(--ink-muted); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.8125rem; }
.rates__note { font-size: 0.8125rem; color: var(--ink-muted); letter-spacing: 0.05em; display: block; text-transform: none; margin-top: 0.2rem; }

/* --------------------------------------------------------------------------
   13. Panels, lists, cards
   -------------------------------------------------------------------------- */

/* A bordered call-out. Square, hairline, no shadow. */
.panel {
  border: 1px solid var(--bone-line);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--white);
}
.band-pine .panel { border-color: var(--pine-line); background: var(--pine-2); }
.panel--brass { border-left: 3px solid var(--brass); }

/* Editorial list of offerings — leagues, outing inclusions, menu sections.
   A ruled list, not a card grid. */
.ruled { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bone-line); }
.band-pine .ruled { border-top-color: var(--pine-line); }
.ruled__item { padding: 1.4rem 0; border-bottom: 1px solid var(--bone-line); }
.band-pine .ruled__item { border-bottom-color: var(--pine-line); }
.ruled__title {
  font-family: var(--display); font-size: 1.375rem; line-height: 1.15; margin: 0 0 0.4rem;
}
.ruled__meta {
  font-family: var(--ui); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--brass); margin-bottom: 0.5rem;
}
.ruled__body { margin: 0; color: var(--ink-soft); max-width: var(--measure); }
.band-pine .ruled__body { color: rgba(244, 241, 232, 0.75); }

/* Menu sections — dish list with a leader rule to the price. */
.menu__group + .menu__group { margin-top: 2.75rem; }
.menu__heading {
  font-family: var(--ui); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--brass); border-bottom: 1px solid var(--bone-line); padding-bottom: 0.6rem; margin: 0 0 1rem;
}
.band-pine .menu__heading { border-bottom-color: var(--pine-line); }
.menu__list { list-style: none; margin: 0; padding: 0; }
.menu__row { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.55rem 0; }
.menu__name { font-weight: 600; }
.menu__dots { flex: 1 1 auto; border-bottom: 1px dotted var(--bone-line); transform: translateY(-0.28em); }
.band-pine .menu__dots { border-bottom-color: var(--pine-line); }
.menu__price { font-family: var(--ui); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }
.menu__desc { margin: 0.1rem 0 0; font-size: 0.9375rem; color: var(--ink-muted); max-width: 52ch; }
.band-pine .menu__desc { color: rgba(244, 241, 232, 0.6); }

/* Gallery — an uneven grid, not a uniform 3-up.
   auto-FILL, not auto-fit: auto-fit collapses the empty tracks, so a section
   holding a single photo stretched that one frame across the full 1420px and
   upscaled a 1020px file into a blurry full-bleed slab. */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1px; background: var(--bone-line); }
/* The cell owns the aspect ratio, not the image. Letting the image set it made
   a span-2 tile twice as tall as its neighbours, which stretched the whole grid
   row and left half-empty cells beside it. At 8/3 across two tracks a wide tile
   is the same height as a 4/3 tile across one, so rows stay level. */
.gallery__item { margin: 0; background: var(--bone); aspect-ratio: 4 / 3; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.gallery__item--wide { grid-column: span 2; aspect-ratio: 8 / 3; }
@media (max-width: 620px) {
  .gallery__item--wide { grid-column: span 1; aspect-ratio: 4 / 3; }
}

/* Partner listing */
.partners { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--bone-line); }
.partner { background: var(--bone); padding: 1.75rem; display: flex; flex-direction: column; gap: 0.75rem; }
.partner__logo { width: auto; max-width: 130px; max-height: 90px; }
.partner__name { font-family: var(--display); font-size: 1.25rem; margin: 0; }
.partner__desc { margin: 0; font-size: 0.9375rem; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   14. Forms
   -------------------------------------------------------------------------- */

.field { display: block; margin-bottom: 1.4rem; }
.field__label {
  display: block; margin-bottom: 0.45rem;
  font-family: var(--ui); font-size: 0.8125rem;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-soft);
}
.field__req { color: var(--flag); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--bone-line);
  background: var(--white);
  font: inherit; font-size: 1rem;
  color: var(--ink);
  border-radius: 0;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--brass); outline-offset: 0; border-color: var(--brass);
}
.field textarea { min-height: 9rem; resize: vertical; }

.formnote { font-family: var(--ui); font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--ink-muted); }

.alert { border-left: 3px solid var(--brass); background: var(--bone-2); padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.alert--ok { border-left-color: var(--fairway); }
.alert--bad { border-left-color: var(--flag); }
.alert p { margin: 0; }
.alert ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }

/* Honeypot — off-screen and out of the tab order, still in the DOM for bots. */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   15. Contact blocks
   -------------------------------------------------------------------------- */

.contactgrid { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 900px) { .contactgrid { grid-template-columns: 1fr 1fr; } }

.deflist { margin: 0; }
.deflist dt {
  font-family: var(--ui); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.2em; color: var(--brass);
  padding-top: 1.1rem; border-top: 1px solid var(--bone-line);
}
.band-pine .deflist dt { border-top-color: var(--pine-line); }
.deflist dd { margin: 0.4rem 0 1.1rem; }
.deflist dd a { text-decoration: none; }
.deflist dd a:hover { text-decoration: underline; }

.hours { list-style: none; margin: 0; padding: 0; font-family: var(--ui); }
.hours__row {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--bone-line);
  font-size: 0.9375rem; letter-spacing: 0.06em;
}
.band-pine .hours__row { border-bottom-color: var(--pine-line); }
.hours__day { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8125rem; color: var(--ink-muted); }
.band-pine .hours__day { color: rgba(244, 241, 232, 0.6); }
.hours__time { font-variant-numeric: tabular-nums; }

.mapframe { border: 1px solid var(--bone-line); width: 100%; aspect-ratio: 4 / 3; display: block; }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--pine-deep);
  color: rgba(244, 241, 232, 0.75);
  padding-block: clamp(3rem, 7vw, 5rem) 2rem;
  border-top: 3px solid var(--brass);
}
.footer a { color: rgba(244, 241, 232, 0.75); text-decoration: none; }
.footer a:hover { color: var(--brass-lift); }
.footer__grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
@media (min-width: 980px) {
  .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.1fr; }
}
.footer__heading {
  font-family: var(--ui); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--brass); margin: 0 0 1.1rem;
}
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li + li { margin-top: 0.55rem; }
.footer address { font-style: normal; line-height: 1.7; }
.footer__social { display: flex; gap: 0.9rem; margin-top: 1.25rem; }
.footer__social a {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--pine-line);
}
.footer__social a:hover { border-color: var(--brass); }
.footer__social svg { width: 17px; height: 17px; fill: currentColor; }
.footer__base {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid var(--pine-line);
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between;
  font-family: var(--ui); font-size: 0.8125rem; letter-spacing: 0.1em;
  color: rgba(244, 241, 232, 0.5);
}
.footer__base ul { display: flex; flex-wrap: wrap; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }

/* --------------------------------------------------------------------------
   17. Scroll reveal
   -------------------------------------------------------------------------- */

.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.7s var(--swift), transform 0.7s var(--swift);
}