/* =====================================================================
   Fork'n Classic Charity Golf Tournament: style.css
   forknclassicgolf.com · one-page site · last updated 2026-11-07
   ---------------------------------------------------------------------
   TABLE OF CONTENTS
    1. Variables (colors, fonts, spacing)
    2. Heading font (@font-face)
    3. Reset and base
    4. Utilities (.wrap, .vh, .nowrap, buttons)
    5. Header and navigation
    6. Hero
    7. Scorecard strip (info strip under the hero)
    8. Sections and section headings
    9. The Day (schedule, included list)
   10. Registration (scorecard table, mulligan card, how to register)
   11. Sponsorship (package cards, hole sponsors)
   12. The Cause (foundation)
   13. Photo gallery and lightbox
   14. FAQ
   15. Contact and map
   16. Footer (house standard credit)
   17. Back-to-top button (house standard)
   18. Reduced motion and print
   ===================================================================== */


/* ===== 1. VARIABLES ===== */
:root {
  /* Colors: pine green + scorecard cream, flag red as the single accent */
  --pine: #17382e;          /* dark backgrounds, headings */
  --pine-2: #224a3d;        /* hover / raised dark surfaces */
  --fairway: #2d6a4f;       /* secondary green, rules on dark */
  --cream: #f5efe0;         /* page background (scorecard paper) */
  --paper: #fbf8f0;         /* cards */
  --sand: #e4d8bc;          /* rules, borders, placeholders */
  --flag: #b83a29;          /* accent: pennant, primary buttons */
  --flag-dark: #962d1f;     /* button hover; passes AA on cream */
  --ink: #1d2421;           /* body text */
  --muted: #5a625e;         /* secondary text on cream */
  --on-dark: #f5efe0;       /* text on pine */
  --on-dark-muted: #b9c4bd; /* footer credit, small text on pine */

  /* Fonts: one self-hosted heading font, system stack for body */
  --font-head: "Lora", Georgia, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Spacing and shape */
  --gutter: clamp(18px, 4vw, 40px);
  --section-y: clamp(56px, 8vw, 96px);
  --radius: 10px;
  --header-h: 72px;         /* used by scroll-padding so anchors clear the sticky header */
  --max: 1180px;
}


/* ===== 2. HEADING FONT ===== */
/* Lora Bold, Latin subset (~16 KB). License: assets/OFL.txt */
@font-face {
  font-family: "Lora";
  src: url("heading.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ===== 3. RESET AND BASE ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* jump links land below the sticky header, not under it */
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
}

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

h1,
h2,
h3 {
  margin: 0 0 0.5em;
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  color: var(--pine);
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--flag-dark);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--pine);
}

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

address {
  font-style: normal;
}

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

/* little pennant instead of a bullet: the site's signature mark */
ul.checks li {
  position: relative;
  padding-left: 1.6em;
  margin-bottom: 0.45em;
}

ul.checks li::before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: 0.38em;
  width: 0.75em;
  height: 0.6em;
  background: var(--flag);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}


/* ===== 4. UTILITIES ===== */
/* .wrap sets ONLY left/right padding so media queries never wipe top/bottom */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* visually hidden, still read by screen readers and search engines */
.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.nowrap {
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--paper);
  color: var(--pine);
  border-radius: var(--radius);
}

.skip-link:focus {
  top: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0.7em 1.4em;
  border: 2px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.btn svg {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}

.btn-primary {
  background: var(--flag);
  color: #fff;
}

.btn-primary:hover {
  background: var(--flag-dark);
  color: #fff;
}

.btn-outline {
  border-color: var(--pine);
  color: var(--pine);
  background: transparent;
}

.btn-outline:hover {
  background: var(--pine);
  color: var(--on-dark);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}


/* ===== 5. HEADER AND NAVIGATION ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--pine);
  color: var(--on-dark);
  transition: transform 0.3s ease;
}

/* main.js adds this on scroll down, removes it on scroll up */
.site-header.is-hidden {
  transform: translateY(-100%);
}

.header-row {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  flex: none;
}

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

.header-info {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  white-space: nowrap;
}

.site-nav {
  margin-left: auto;
}

.site-nav ul {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: block;
  padding: 10px 10px;
  white-space: nowrap;
  border-radius: 6px;
  color: var(--on-dark);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a.is-active {
  background: var(--pine-2);
  color: #fff;
}

/* Header call button: the ONLY element allowed white-space: nowrap on a phone number */
/* not enough room for the info line beside a full desktop nav */
@media (max-width: 1340px) and (min-width: 1141px) {
  .header-info {
    display: none;
  }
}

.header-call {
  flex: none;
  white-space: nowrap;
  min-height: 44px;
  padding: 0.55em 1.1em;
}

.menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

/* three bars that turn into an X */
.menu-toggle span {
  display: block;
  width: 26px;
  height: 3px;
  margin: 5px auto;
  border-radius: 2px;
  background: var(--on-dark);
  transition: transform 0.25s, opacity 0.25s;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 1140px) {
  .menu-toggle {
    display: block;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    margin: 0;
    background: var(--pine);
    border-top: 1px solid var(--fairway);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
  }

  .site-nav.is-open {
    display: block;
  }

  .site-nav ul {
    flex-direction: column;
    padding: 8px var(--gutter) 16px;
  }

  .site-nav a {
    padding: 14px 12px;
    font-size: 1.05rem;
  }

  .header-info {
    margin-left: auto;
  }

  .menu-toggle {
    margin-left: 0;
  }
}

@media (max-width: 760px) {
  .header-info {
    display: none;
  }

  .menu-toggle {
    margin-left: auto;
  }
}

/* Phones: logo smaller, call button becomes an icon-only circle */
@media (max-width: 600px) {
  :root {
    --header-h: 64px;
  }

  .brand img {
    width: 92px;
  }

  .header-call {
    width: 48px;
    height: 48px;
    padding: 0;
  }

  .header-call .call-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}

/* Landscape phones: thinner header */
@media (max-height: 520px) and (orientation: landscape) {
  :root {
    --header-h: 54px;
  }

  .brand img {
    width: 84px;
  }
}


/* ===== 6. HERO ===== */
/* Full-bleed photo behind the text. A pine gradient on the left keeps the
   cream text above 4.5:1 contrast, even over the bright sunrise sky. */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(540px, 74vh, 780px);
  padding-top: 70px;
  padding-bottom: 70px;
  overflow: hidden;
  background: var(--pine); /* shows while the photo loads */
  color: var(--on-dark);
}

.hero-bg {
  position: absolute;
  inset: 0;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 55%; /* keeps the flagstick in view as the frame narrows */
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(23, 56, 46, 0.9) 0%,
    rgba(23, 56, 46, 0.78) 45%,
    rgba(23, 56, 46, 0.35) 75%,
    rgba(23, 56, 46, 0.1) 100%);
}

.hero-content {
  position: relative; /* sits above the photo and gradient */
}

.hero-content > * {
  max-width: 620px;
}

.hero h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
}

/* the event name sits above the slogan inside the same h1 */
.hero h1 .h-label {
  display: block;
  margin-bottom: 0.4em;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  letter-spacing: 0.04em;
  color: #f2b8ab;
  text-shadow: none;
}

.hero-lead {
  font-size: 1.12rem;
  color: var(--cream);
}

/* Pennant badge: the signature element */
.pennant {
  display: inline-block;
  margin: 0 0 26px; /* lines up with the headline and text below */
  padding: 14px 56px 14px 20px;
  background: var(--flag);
  color: #fff;
  font-weight: 700;
  line-height: 1.25;
  clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.pennant strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.6rem;
  line-height: 1.15;
}

/* edition + town: the former pill, now the top line of the ribbon */
.pennant-kicker {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 12px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero-presented {
  margin: 22px 0 0;
  font-size: 0.92rem;
  color: var(--on-dark-muted);
}

/* Narrow screens: text covers most of the photo, so darken it evenly */
@media (max-width: 760px) {
  .hero {
    min-height: 0;
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .hero-bg::after {
    background: rgba(23, 56, 46, 0.72);
  }
}


/* ===== 7. SCORECARD STRIP ===== */
/* Styled like a golf scorecard: ruled cells, label on top, value below */
.scorecard-strip {
  background: var(--pine);
  color: var(--on-dark);
}

.scorecard-strip ul {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin: 0 auto; /* keep .wrap's centering (margin: 0 alone pinned it left on desktop) */
  padding: 0;
  list-style: none;
}

.scorecard-strip li {
  padding: 18px 16px;
  border-left: 1px solid var(--fairway);
  text-align: center;
}

.scorecard-strip li:first-child {
  border-left: 0;
}

.scorecard-strip .k {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}

.scorecard-strip .v {
  display: block;
  font-family: var(--font-head);
  font-size: 1.2rem;
}

/* one column below ~960 px instead of uneven wrapping */
@media (max-width: 960px) {
  .scorecard-strip ul {
    grid-template-columns: 1fr 1fr;
  }

  .scorecard-strip li {
    border-left: 0;
    border-top: 1px solid var(--fairway);
  }

  .scorecard-strip li:nth-child(-n+2) {
    border-top: 0;
  }

  .scorecard-strip li:nth-child(even) {
    border-left: 1px solid var(--fairway);
  }
}

@media (max-width: 340px) {
  .scorecard-strip ul {
    grid-template-columns: 1fr;
  }

  .scorecard-strip li,
  .scorecard-strip li:nth-child(even) {
    border-left: 0;
  }

  .scorecard-strip li:nth-child(2) {
    border-top: 1px solid var(--fairway);
  }
}


/* ===== 8. SECTIONS AND SECTION HEADINGS ===== */
.section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

.section-alt {
  background: var(--paper);
  border-top: 1px solid var(--sand);
  border-bottom: 1px solid var(--sand);
}

.section-dark {
  background: var(--pine);
  color: var(--on-dark);
}

.section-dark h2,
.section-dark h3 {
  color: var(--on-dark);
}

/* plain text links only: buttons keep their own colors */
.section-dark a:not(.btn) {
  color: #fff;
}

/* Label + slogan in ONE heading. The "hole number" sits before the label. */
.section h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  max-width: 22em;
}

.h-label {
  display: block;
  margin-bottom: 0.45em;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--flag-dark);
}

.section-dark .h-label {
  color: #f2b8ab;
}

.h-label .hole {
  display: inline-grid;
  place-items: center;
  width: 2.1em;
  height: 2.1em;
  margin-right: 0.6em;
  border: 2px solid currentColor;
  border-radius: 50%;
  letter-spacing: 0;
}

.section-intro {
  max-width: 44em;
  font-size: 1.1rem;
}

.mini-title {
  margin: 0 0 0.35em;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.section-dark .mini-title {
  color: var(--on-dark-muted);
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
  margin-top: 36px;
}

@media (max-width: 860px) {
  .two-col {
    grid-template-columns: 1fr;
  }
}

.card {
  padding: clamp(20px, 3vw, 32px);
  background: var(--paper);
  border: 1px solid var(--sand);
  border-radius: var(--radius);
}

.photo-frame img {
  border-radius: var(--radius);
}


/* ===== 9. THE DAY ===== */
.timeline {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  border-left: 3px dotted var(--fairway); /* dotted "tee line" */
}

.timeline li {
  position: relative;
  padding: 0 0 18px 22px;
}

.timeline li::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 0.35em;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--flag);
}

.timeline time,
.timeline .t {
  display: block;
  font-family: var(--font-head);
  font-size: 1.25rem;
  color: var(--pine);
}

.prize-note {
  margin-top: 22px;
  padding: 16px 18px;
  border-left: 5px solid var(--flag);
  background: var(--paper);
  border-radius: 0 var(--radius) var(--radius) 0;
}


/* Included icon grid: the tan line icons from the old site, 48 px */
.included {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.included li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--sand);
  border-radius: var(--radius);
}

.included img {
  flex: none;
  width: 48px;
  height: 48px;
}

.included h3 {
  margin: 2px 0 2px;
  font-size: 1.05rem;
}

.included p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted);
}

.included-extra {
  margin-top: 14px;
  font-weight: 600;
}

@media (max-width: 480px) {
  .included {
    grid-template-columns: 1fr;
  }
}


/* ===== 10. REGISTRATION ===== */
/* Scorecard table: header row in pine, ruled rows, price column right-aligned */
.scorecard {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border: 2px solid var(--pine);
  font-size: 1rem;
}

.scorecard caption {
  padding-bottom: 10px;
  text-align: left;
  font-weight: 700;
  color: var(--muted);
}

.scorecard th,
.scorecard td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--sand);
  text-align: left;
  vertical-align: top;
}

.scorecard thead th {
  background: var(--pine);
  color: var(--on-dark);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.scorecard .price {
  font-family: var(--font-head);
  font-size: 1.3rem;
  color: var(--pine);
  text-align: right;
  white-space: nowrap;
}

.scorecard .unit {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--muted);
}

.scorecard small {
  display: block;
  color: var(--muted);
  font-size: 0.9rem;
}

.deadline {
  display: inline-block;
  margin-top: 18px;
  padding: 8px 14px;
  background: var(--pine);
  color: var(--on-dark);
  border-radius: 6px;
  font-weight: 700;
}

.how-to {
  margin-top: 40px;
}

.how-to ol {
  margin: 0 0 20px;
  padding-left: 1.3em;
}

.how-to li {
  margin-bottom: 0.5em;
}


/* ===== 11. SPONSORSHIP ===== */
.packages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 36px;
}

.package {
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  background: var(--pine-2);
  border: 1px solid var(--fairway);
  border-radius: var(--radius);
}

/* top-tier card gets the flag-red edge */
.package-platinum {
  border-top: 6px solid var(--flag);
}

.package h3 {
  margin-bottom: 4px;
  font-size: 1.5rem;
}

.package .price {
  margin-bottom: 16px;
  font-family: var(--font-head);
  font-size: 2.2rem;
  line-height: 1;
}

.package ul.checks li::before {
  background: #f2b8ab;
}

@media (max-width: 960px) {
  .packages {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
}

.holes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 28px;
}

.hole-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 20px 22px;
  border: 1px dashed var(--fairway);
  border-radius: var(--radius);
}

.hole-card .price {
  flex: none;
  font-family: var(--font-head);
  font-size: 1.7rem;
  line-height: 1.1;
}

.hole-card h3 {
  margin-bottom: 4px;
  font-size: 1.15rem;
}

.hole-card p {
  margin: 0;
  color: var(--on-dark-muted);
}

@media (max-width: 760px) {
  .holes {
    grid-template-columns: 1fr;
  }
}

.sponsor-cta {
  display: grid;
  grid-template-columns: minmax(0, 720px);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  margin-top: 48px;
}

.sponsor-cta img {
  border-radius: var(--radius);
}

@media (max-width: 860px) {
  .sponsor-cta {
    grid-template-columns: 1fr;
  }
}

.btn-light {
  background: var(--cream);
  color: var(--pine);
}

.btn-light:hover {
  background: #fff;
  color: var(--pine);
}

.btn-outline-light {
  border-color: var(--cream);
  color: var(--cream);
}

.btn-outline-light:hover {
  background: var(--cream);
  color: var(--pine);
}


/* Presented by / partners band: logos sit on white cards because most have white backgrounds */
.partners {
  padding-top: 44px;
  padding-bottom: 44px;
  background: var(--cream);
  border-bottom: 1px solid var(--sand);
}

.logo-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.logo-list li a,
.logo-list li > img {
  display: grid;
  place-items: center;
}

.logo-list img {
  box-sizing: content-box;
  width: auto;
  height: 64px;
  padding: 12px 18px;
  background: #fff;
  border: 1px solid var(--sand);
  border-radius: var(--radius);
}

@media (max-width: 600px) {
  .logo-list img {
    height: 52px;
    padding: 10px 14px;
  }
}


/* ===== 12. THE CAUSE ===== */
.cause-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.cause-grid img {
  border-radius: var(--radius);
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 24px 0;
}

.facts div {
  padding: 14px;
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  background: var(--cream);
}

.facts dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.facts dd {
  margin: 2px 0 0;
  font-family: var(--font-head);
  font-size: 1.1rem;
  color: var(--pine);
}

/* Soul Star logo in place of a photo: shown at its own size on a white card */
.cause-logo-card {
  display: grid;
  place-items: center;
  margin: 0;
  padding: clamp(32px, 6vw, 64px);
  background: #fff;
  border: 1px solid var(--sand);
  border-radius: var(--radius);
}

.cause-logo-card img {
  width: 192px;
}

@media (max-width: 860px) {
  .cause-grid {
    grid-template-columns: 1fr;
  }

  .cause-logo-card {
    max-width: 420px;
  }
}

@media (max-width: 480px) {
  .facts {
    grid-template-columns: 1fr;
  }
}


/* ===== 13. PHOTO GALLERY AND LIGHTBOX ===== */
/* Even-height rows, never cropped: each item grows by its aspect ratio --r */
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

/* invisible filler so a short last row keeps its height instead of stretching */
.gallery::after {
  content: "";
  flex-grow: 10000;
}

.gallery li {
  flex: calc(var(--r) * 100) 1 calc(var(--r) * 210px);
}

@media (max-width: 600px) {
  .gallery li {
    flex-basis: calc(var(--r) * 120px);
  }
}

.gallery button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sand);
  cursor: zoom-in;
}

.gallery img {
  width: 100%;
  transition: transform 0.3s;
}

.gallery button:hover img {
  transform: scale(1.03);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 18, 15, 0.94);
}

.lightbox.is-open {
  display: flex;
}

.lightbox figure {
  margin: 0;
  max-width: 92vw;
  text-align: center;
}

.lightbox img {
  max-width: 92vw;
  max-height: 82vh;
  margin: 0 auto;
  cursor: zoom-in;
  transition: transform 0.25s;
}

.lightbox img.is-zoomed {
  transform: scale(1.8);
  cursor: zoom-out;
}

.lightbox figcaption {
  margin-top: 12px;
  color: var(--on-dark);
  font-size: 0.95rem;
}

.lb-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.lb-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

.lb-close {
  top: 16px;
  right: 16px;
}

.lb-prev {
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.lb-next {
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}


/* ===== 14. FAQ ===== */
/* All answers visible (no accordions) so search engines and AI read them */
.faq-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 36px;
  margin: 32px 0 0;
}

.faq-item {
  padding: 22px 0 6px;
  border-top: 2px solid var(--pine);
}

.faq-item h3 {
  font-size: 1.2rem;
}

.faq-item p {
  color: var(--ink);
}

@media (max-width: 860px) {
  .faq-list {
    grid-template-columns: 1fr;
  }
}


/* ===== 15. CONTACT AND MAP ===== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: stretch;
  margin-top: 32px;
}

.contact-block + .contact-block {
  margin-top: 26px;
}

.contact-block h3 {
  font-size: 1.3rem;
}

.contact-block p {
  margin-bottom: 0.4em;
}

.contact-grid .btn-row {
  margin-top: 16px;
}

.venue-crest {
  width: 84px;
  margin-bottom: 10px;
  mix-blend-mode: multiply; /* drops the crest's white box on the cream background */
}

.map {
  position: relative;
  min-height: 360px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sand);
}

.map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.map-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
  color: var(--pine);
}

@media (max-width: 860px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}


/* ===== 16. FOOTER ===== */
.site-footer {
  padding-top: 48px;
  padding-bottom: 28px;
  background: var(--pine);
  color: var(--on-dark);
  font-size: 0.95rem;
}

.site-footer a {
  color: var(--on-dark);
}

.site-footer a:hover {
  color: #fff;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 32px;
}

.footer-grid img {
  width: 150px;
  margin-bottom: 14px;
}

.footer-grid h2 {
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}

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

.footer-grid li {
  margin-bottom: 6px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--fairway);
  font-size: 0.85rem;
  color: var(--on-dark-muted);
}

.footer-bottom p {
  margin: 0;
}

/* HOUSE STANDARD: credit lower right, slightly smaller and muted */
.footer-bottom .footer-credit {
  margin-left: auto;
  font-size: 0.8rem;
}

.footer-credit a {
  color: var(--on-dark-muted);
  text-decoration: none;
}

.footer-credit a:hover {
  color: var(--on-dark);
  text-decoration: underline;
}

@media (max-width: 860px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid > div:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}


/* ===== 17. BACK-TO-TOP BUTTON ===== */
.to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 2px solid var(--cream);
  border-radius: 50%;
  background: var(--flag);
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top:hover {
  background: var(--flag-dark);
}

.to-top svg {
  width: 22px;
  height: 22px;
}


/* ===== 18. REDUCED MOTION AND PRINT ===== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

@media print {
  .site-header,
  .to-top,
  .map,
  .gallery {
    display: none !important;
  }

  body {
    background: #fff;
  }
}