/* ==========================================================================
   Cedar Ridge Parks & Recreation
   Concept stylesheet — plain CSS, no build step, no dependencies.

   Shape language: hairline rules, solid surfaces, photography.
   Radius is 0 on full-bleed media, 2px on controls, 4px on small thumbs.
   No drop shadows, no decorative gradients — scrims over photos only.

   Contents
   01. Design tokens
   02. Base elements
   03. Layout & shared utilities
   04. Controls & status
   05. Utility bar + site header
   06. Hero
   07. Service bar (quick tasks)
   08. Experience mosaic
   09. Featured park
   10. Event rows
   11. Status board (conditions & alerts)
   12. Community band
   13. Site footer
   14. Interior page components (parks, programs, facilities, alerts)
   15. Focus, motion & responsive
   ========================================================================== */


/* ==========================================================================
   01. Design tokens
   ========================================================================== */

:root {
  /* Palette */
  --forest: #163f31;
  --forest-deep: #0f2b22;
  --forest-mid: #1d4e3d;
  --sage: #dce8df;
  --cream: #f6f3eb;
  --stone: #e9dfcf;
  --charcoal: #19211d;
  --muted: #5f675f;
  --amber: #8f4e0d;
  --white: #ffffff;

  /* Hairlines */
  --line: #ded7c8;
  --line-strong: #cec5b1;
  --line-dark: rgba(255, 255, 255, 0.2);

  /* Semantic aliases */
  --bg: var(--cream);
  --surface: var(--white);
  --text: var(--charcoal);
  --brand: var(--forest);

  /* Type */
  --font-display: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Radii — deliberately small */
  --r-control: 2px;
  --r-thumb: 4px;

  /* Layout */
  --container: 1180px;
  --container-narrow: 940px;
  --gutter: 24px;
  --header-height: 74px;
}


/* ==========================================================================
   02. Base elements
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 20px);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.014em;
  margin: 0 0 14px;
  color: var(--charcoal);
}

h1 { font-size: clamp(2.6rem, 6vw, 5.1rem); }
h2 { font-size: clamp(1.95rem, 3.6vw, 2.9rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.1rem; }

p { margin: 0 0 14px; }

a { color: inherit; }

img,
svg { max-width: 100%; }

ul { margin: 0; }

button { font: inherit; }

address { font-style: normal; }

[hidden] { display: none !important; }


/* ==========================================================================
   03. Layout & shared utilities
   ========================================================================== */

.container {
  width: min(calc(100% - (var(--gutter) * 2)), var(--container));
  margin-inline: auto;
}

.container--narrow { max-width: var(--container-narrow); }

/* Section padding is intentionally uneven between sections. */
.section { padding: clamp(52px, 6vw, 92px) 0; }

.section--experience { padding-bottom: clamp(52px, 6vw, 92px); }

.section--events { padding-bottom: clamp(44px, 5vw, 72px); }

.section--conditions { padding-top: clamp(40px, 4.5vw, 64px); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gutter);
  margin-bottom: clamp(26px, 3vw, 44px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.section-head h2 { margin: 0; }

.section-head--tight { margin-bottom: 0; }

/* Editorial eyebrow: small caps preceded by a short rule.
   .eyebrow is the same treatment — the interior pages emit that class. */
.kicker,
.eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.kicker::before,
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 1px;
  margin-right: 12px;
  vertical-align: 0.28em;
  background: currentColor;
}

.kicker--light { color: rgba(255, 255, 255, 0.86); }

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

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -120px;
  z-index: 999;
  padding: 12px 18px;
  background: var(--white);
  color: var(--forest);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--forest);
}

.skip-link:focus { top: 0; }


/* ==========================================================================
   04. Controls & status
   ========================================================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 30px;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease,
    color 0.16s ease;
}

.button--solid {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--white);
}

.button--solid:hover { background: var(--forest-deep); border-color: var(--forest-deep); }

.button--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--white);
}

.button--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--white);
}

.text-link {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--forest);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 3px;
  white-space: nowrap;
}

.text-link:hover { border-bottom-color: var(--forest); }

/* Status is text first. Colour and icon shape are both secondary cues. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.status--open { color: var(--forest-mid); }
.status--advisory { color: var(--amber); }

.status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.status__icon {
  display: inline-flex;
  width: 17px;
  height: 17px;
}

.status__icon svg { width: 100%; height: 100%; }


/* ==========================================================================
   05. Utility bar + site header
   ========================================================================== */

.utility-bar {
  background: var(--forest-deep);
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.78rem;
}

.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 36px;
}

.utility-bar p { margin: 0; }

.utility-bar a { color: var(--white); text-decoration: none; }

.utility-bar a:hover { text-decoration: underline; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--white);
  border-bottom: 1px solid var(--line-strong);
}

.nav-wrap {
  display: flex;
  align-items: stretch;
  gap: var(--gutter);
  min-height: var(--header-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  text-decoration: none;
  color: var(--charcoal);
}

.brand-mark {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--forest);
}

.brand-text strong,
.brand-text small {
  display: block;
  font-family: var(--font-display);
  line-height: 1.2;
}

.brand-text strong { font-size: 1.04rem; }

.brand-text small {
  font-size: 1rem;
  font-weight: 400;
  color: var(--charcoal);
}

.primary-nav {
  display: flex;
  align-items: stretch;
  gap: 30px;
  margin-left: auto;
}

.primary-nav__link,
.nav-search {
  display: inline-flex;
  align-items: center;
  margin-bottom: -1px;
  border-bottom: 3px solid transparent;
  font-size: 0.92rem;
  font-weight: 550;
  color: var(--charcoal);
  text-decoration: none;
  white-space: nowrap;
}

.primary-nav__link:hover,
.nav-search:hover { color: var(--forest); }

.primary-nav__link[aria-current="page"] {
  color: var(--forest);
  font-weight: 700;
  border-bottom-color: var(--forest);
}

.nav-search {
  gap: 7px;
  color: var(--forest);
}

.menu-button {
  position: relative;
  display: none;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  align-self: center;
  min-height: 46px;
  padding: 10px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  background: var(--white);
  font-weight: 600;
  cursor: pointer;
}

.menu-bars,
.menu-bars::before,
.menu-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--forest);
}

.menu-bars { position: relative; }

.menu-bars::before,
.menu-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-bars::before { top: -6px; }
.menu-bars::after { top: 6px; }


/* ==========================================================================
   06. Hero
   Full-bleed photograph, copy anchored low-left. The fallback is a solid
   forest field so a missing file still reads as intentional.
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(560px, 84vh, 880px);
  padding-bottom: clamp(54px, 7vh, 104px);
  color: var(--white);
  background-color: var(--forest-deep);
  background-image: url("/assets/img/hero-lake-path.jpg");
  /* cover == object-fit: cover for a background layer: fills the box,
     crops the overflow, never stretches. Focal point is the tree line, so
     the crop is biased slightly above centre and holds on tall phone
     viewports where the sides get trimmed instead. */
  background-size: cover;
  background-position: 50% 45%;
  background-repeat: no-repeat;
}

/* Readability scrim — functional, not decoration. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(9, 26, 20, 0.88) 0%,
    rgba(9, 26, 20, 0.62) 32%,
    rgba(9, 26, 20, 0.2) 66%,
    rgba(9, 26, 20, 0.4) 100%
  );
}

.hero__inner,
.hero__caption {
  position: relative;
  z-index: 1;
}

.hero h1 {
  /* The <br> sets the break; the container sets the measure. */
  margin: 0 0 20px;
  color: var(--white);
  font-size: clamp(2.7rem, 6.2vw, 5.2rem);
  line-height: 1.03;
}

.hero__copy {
  max-width: 660px;
  margin-bottom: 34px;
  font-size: 1.12rem;
  color: rgba(255, 255, 255, 0.9);
}

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

.hero__caption {
  position: absolute;
  bottom: 18px;
  right: max(var(--gutter), calc((100% - var(--container)) / 2));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
}


/* ==========================================================================
   07. Service bar (quick tasks)
   A public-service utility strip. The 1px grid gap over the forest
   background produces the dividers at every breakpoint.
   ========================================================================== */

.service-bar {
  background: var(--forest);
  color: var(--white);
}

.service-bar__list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  padding: 0;
  list-style: none;
  background: var(--line-dark);
}

.service-bar__list > li { background: var(--forest); }

/* Icon sits beside the label so each cell reads as a navigation action
   rather than a feature tile. */
.service-bar__list a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
  height: 100%;
  padding: 20px 16px 22px;
  color: var(--white);
  text-decoration: none;
  transition: background-color 0.16s ease;
}

.service-bar__list a:hover { background: var(--forest-deep); }

.service-bar__list a:hover .service-bar__label { text-decoration: underline; }

.service-bar__icon {
  grid-row: 1 / 3;
  display: block;
  padding-top: 1px;
  color: rgba(255, 255, 255, 0.66);
}

.service-bar__icon svg {
  width: 20px;
  height: 20px;
}

.service-bar__label {
  display: block;
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.service-bar__note {
  display: block;
  margin-top: 3px;
  font-size: 0.79rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.64);
}


/* ==========================================================================
   08. Experience mosaic
   One lead tile at 2x2 plus four supporting tiles, edge to edge.
   ========================================================================== */

.mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(158px, 15vw, 252px);
  gap: 3px;
  padding: 0;
  list-style: none;
}

.mosaic__tile--lead {
  grid-column: span 2;
  grid-row: span 2;
}

.mosaic__tile > a {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  color: var(--white);
  text-decoration: none;
  background-color: var(--forest-mid);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.mosaic__tile > a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(9, 26, 20, 0.8) 0%,
    rgba(9, 26, 20, 0.26) 52%,
    rgba(9, 26, 20, 0) 84%
  );
  transition: background-color 0.16s ease;
}

.mosaic__tile > a:hover::before { background-color: rgba(9, 26, 20, 0.22); }

.mosaic__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 22px;
}

.mosaic__title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.16rem;
  line-height: 1.2;
}

.mosaic__tile > a:hover .mosaic__title { text-decoration: underline; }

.mosaic__copy {
  display: block;
  margin-top: 5px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.76);
}

.mosaic__tile--lead .mosaic__caption { padding: 30px 32px; }

.mosaic__tile--lead .mosaic__title { font-size: clamp(1.5rem, 2.3vw, 2rem); }

.mosaic__tile--lead .mosaic__copy {
  margin-top: 8px;
  font-size: 0.97rem;
}

/* Each tile names a photograph and a solid fallback field — no gradients. */
.mosaic__tile--family > a {
  background-color: #3f7a5f;
  background-image: url("/assets/img/playground-towers.jpg");
  /* play structure sits high in the frame */
  background-position: 50% 42%;
}

.mosaic__tile--trails > a {
  background-color: #2a6349;
  background-image: url("/assets/img/trails-lake-path.jpg");
  background-position: 55% 50%;
}

.mosaic__tile--sports > a {
  background-color: #2f6b63;
  background-image: url("/assets/img/basketball-court-aerial.jpg");
  background-position: 50% 55%;
}

.mosaic__tile--water > a {
  background-color: #3a7387;
  background-image: url("/assets/img/canyon-river.jpg");
  /* favour the water over the sky */
  background-position: 50% 62%;
}

.mosaic__tile--picnic > a {
  background-color: #8a7856;
  background-image: url("/assets/img/picnic-park.jpg");
  /* keep the seated groups on the lawn inside the crop */
  background-position: 50% 58%;
}


/* ==========================================================================
   09. Featured park
   Full-bleed asymmetric split: the photograph runs off the left edge.
   ========================================================================== */

.featured {
  display: grid;
  grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
  background: var(--cream);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.featured__media {
  min-height: clamp(380px, 44vw, 640px);
  background-color: var(--forest-mid);
  background-image: url("/assets/img/featured-lakeside-park.jpg");
  /* Source is 1.55:1 and the panel is ~1.6:1, so this crops almost not at
     all on desktop; on the stacked mobile layout it trims top and bottom
     around the waterline. */
  background-size: cover;
  background-position: 50% 52%;
  background-repeat: no-repeat;
}

.featured__content {
  align-self: center;
  max-width: 660px;
  padding: clamp(44px, 5vw, 84px) clamp(24px, 5vw, 88px);
}

.featured__content h2 { margin-bottom: 16px; }

.featured__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 22px;
  font-size: 0.86rem;
  color: var(--muted);
}

.featured__sep,
.event-row__sep {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: var(--line-strong);
}

.featured__copy {
  margin-bottom: 30px;
  font-size: 1.04rem;
  color: #40483f;
}

.featured__subhead {
  margin: 0 0 4px;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Icon + text rows, not chips. */
.amenity-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.amenity-rows li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}

.amenity-rows__icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--forest-mid);
}

.amenity-rows__icon svg {
  width: 21px;
  height: 21px;
}


/* ==========================================================================
   10. Event rows
   ========================================================================== */

.event-rows {
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.event-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 190px;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.event-row__date {
  margin: 0;
  padding-right: clamp(16px, 2vw, 28px);
  border-right: 1px solid var(--line);
  text-align: center;
}

.event-row__month,
.event-row__year {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--muted);
}

.event-row__day {
  display: block;
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--charcoal);
}

.event-row__title { margin: 0 0 6px; font-size: 1.3rem; }

.event-row__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  font-size: 0.87rem;
  color: var(--muted);
}

.event-row__media {
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-thumb);
  background-color: var(--forest-mid);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* All three sources are wider than the 3:2 thumb, so they crop at the
   sides only — the full height of each frame stays visible.
   These three deliberately use ~2 megapixel sources: the 5824x3264
   originals in this library decode to ~72MB of bitmap each, which stalls
   the renderer when painted into a 190px box. */
.event-row__media--movie {
  background-color: #2c3a52;
  background-image: url("/assets/img/park-swings.jpg");
  background-position: 50% 58%;
}

.event-row__media--nature {
  background-color: #33563a;
  background-image: url("/assets/img/forest-rhododendron.jpg");
  background-position: 50% 50%;
}

.event-row__media--pickleball {
  background-color: #245158;
  background-image: url("/assets/img/basketball-sunset.jpg");
  background-position: 50% 50%;
}


/* ==========================================================================
   11. Status board (conditions & alerts)
   ========================================================================== */

.status-board {
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.status-board__row {
  display: grid;
  grid-template-columns: minmax(0, 210px) minmax(0, 150px) minmax(0, 1fr);
  gap: 20px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.status-board__label {
  margin: 0;
  font-size: 1.1rem;
}

.status-board__note {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
}


/* ==========================================================================
   12. Community band
   ========================================================================== */

.community {
  padding: clamp(50px, 6vw, 88px) 0;
  background: var(--stone);
  border-top: 1px solid var(--line-strong);
}

.community__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(36px, 6vw, 84px);
}

.community__copy {
  max-width: 44ch;
  margin-bottom: 28px;
  font-size: 1.02rem;
  color: #40483f;
}

.signup__label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.signup__field {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.signup__input {
  flex: 1 1 200px;
  max-width: 320px;
  min-width: 0;
  min-height: 52px;
  padding: 12px 15px;
  border: 1px solid #b9ae99;
  border-radius: var(--r-control);
  background: var(--white);
  font: inherit;
  font-size: 0.96rem;
  color: var(--charcoal);
}

.signup__note {
  margin: 12px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.stories__heading {
  margin: 0 0 4px;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.stories {
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-strong);
}

.story {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 22px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-strong);
}

.story__media {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-thumb);
  background-color: var(--forest-mid);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.story--pollinators .story__media {
  background-color: #7a6326;
  background-image: url("/assets/img/cherry-blossom-path.jpg");
  background-position: 50% 58%;
}

.story--people .story__media {
  background-color: #35593c;
  background-image: url("/assets/img/friends-tree.jpg");
  /* 1.5:1 source into a 4:3 box crops the sides only; centring keeps
     all three figures. */
  background-position: 50% 50%;
}

.story__body .kicker { margin-bottom: 7px; }

.story__body h4 { margin: 0 0 7px; }

.story__body h4 a { text-decoration: none; }

.story__body h4 a:hover { text-decoration: underline; }

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


/* ==========================================================================
   13. Site footer
   ========================================================================== */

.site-footer {
  padding: clamp(46px, 5vw, 72px) 0 0;
  background: var(--forest);
  color: rgba(255, 255, 255, 0.78);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(36px, 4vw, 56px);
}

.brand--footer { color: var(--white); }

.brand--footer .brand-mark,
.brand--footer .brand-text small { color: var(--white); }

.footer-mission {
  max-width: 34ch;
  margin: 18px 0 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

.footer-heading {
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--font-sans);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
}

.footer-contact {
  font-size: 0.88rem;
  line-height: 1.85;
}

.footer-links {
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.footer-links a,
.footer-contact a {
  color: inherit;
  font-size: 0.88rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.footer-links a:hover,
.footer-contact a:hover {
  color: var(--white);
  border-bottom-color: rgba(255, 255, 255, 0.5);
}

.footer-social {
  display: flex;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-control);
  color: var(--white);
  transition: background-color 0.16s ease;
}

.footer-social a:hover { background: rgba(255, 255, 255, 0.14); }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 0 26px;
  border-top: 1px solid var(--line-dark);
  font-size: 0.79rem;
  color: rgba(255, 255, 255, 0.62);
}

.footer-base p { margin: 0; }

.footer-base strong { color: rgba(255, 255, 255, 0.86); }

.footer-disclaimer { max-width: 46ch; }


/* ==========================================================================
   14. Interior page components
   Shared by parks.php, programs.php, facilities.php and alerts.php.
   Same flat, hairline language as the homepage.
   ========================================================================== */

.page-header {
  padding: clamp(44px, 5vw, 76px) 0 clamp(26px, 3vw, 38px);
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}

.page-header h1 { margin-bottom: 14px; }

.page-header p {
  max-width: 60ch;
  margin: 0;
  font-size: 1.06rem;
  color: var(--muted);
}

.filter-bar {
  margin-bottom: clamp(28px, 3vw, 40px);
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.filter-bar label {
  display: grid;
  gap: 8px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.filter-bar input {
  width: 100%;
  max-width: 560px;
  min-height: 52px;
  padding: 12px 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  background: var(--white);
  font: inherit;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px);
}

/* An editorial index entry: rule on top, no panel, no shadow. */
.park-card {
  display: flex;
  flex-direction: column;
  padding: 18px 0 24px;
  border-top: 2px solid var(--forest);
  background: none;
}

.park-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.park-card h3 { margin: 12px 0 8px; font-size: 1.3rem; }

.park-card p {
  font-size: 0.94rem;
  color: var(--muted);
}

/* park-card.php emits .status-pill for any status value ("Open",
   "Partial Closure", ...), so this stays tone-neutral rather than
   implying every status is good. */
.status-pill {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--charcoal);
}

.distance {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* park-card.php emits .amenity-list — rendered as an inline middot list. */
.amenity-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--muted);
}

.amenity-list li { display: inline-flex; align-items: center; }

.amenity-list li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 9px;
  border-radius: 50%;
  background: var(--line-strong);
}

.park-card .text-link { margin-top: auto; align-self: flex-start; }

.empty-state {
  max-width: 720px;
  padding: 26px 0 0;
  border-top: 2px solid var(--forest);
}

.empty-state p {
  margin: 0;
  color: var(--muted);
}

.split-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
}

.section-muted {
  background: var(--stone);
  border-block: 1px solid var(--line-strong);
}

.feature-list {
  display: grid;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-strong);
}

.feature-list li {
  padding: 13px 0;
  border-bottom: 1px solid var(--line-strong);
  font-size: 0.94rem;
}

/* Legacy quick-links panel kept for any page still using it. */
.service-card {
  padding: 0;
  background: none;
}

.quick-links { display: grid; border-top: 1px solid var(--line); }

.quick-links a {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  text-decoration: none;
}


/* ==========================================================================
   15. Focus, motion & responsive
   ========================================================================== */

:focus-visible {
  outline: 3px solid #f0a33a;
  outline-offset: 2px;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- <= 1140px : tighten the nav ---------------------------------------- */
@media (max-width: 1140px) {
  .primary-nav { gap: 20px; }

  .service-bar__note { display: none; }
}

/* ---- <= 1024px : mobile navigation, 3-up service bar -------------------- */
@media (max-width: 1024px) {
  .menu-button { display: inline-flex; }

  .primary-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0 var(--gutter) 12px;
    background: var(--white);
    border-bottom: 1px solid var(--line-strong);
  }

  .primary-nav.is-open { display: flex; }

  .primary-nav__link,
  .nav-search {
    margin: 0;
    padding: 15px 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--line);
  }

  .primary-nav__link[aria-current="page"] {
    border-bottom-color: var(--line);
  }

  .nav-search { border-bottom: 0; }

  .service-bar__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .service-bar__note { display: block; }

  .mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(170px, 26vw, 240px);
  }

  .mosaic__tile--lead {
    grid-column: span 2;
    grid-row: span 1;
  }

  .featured { grid-template-columns: 1fr; }

  .featured__media { min-height: clamp(300px, 46vw, 420px); }

  .featured__content {
    max-width: none;
    padding: clamp(36px, 5vw, 56px) var(--gutter);
  }

  .community__inner { grid-template-columns: 1fr; }

  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- <= 820px : events lose the thumbnail column ------------------------ */
@media (max-width: 820px) {
  .event-row { grid-template-columns: 84px minmax(0, 1fr); }

  .event-row__media { display: none; }

  .status-board__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 130px);
    row-gap: 6px;
  }

  .status-board__note { grid-column: 1 / -1; }
}

/* ---- <= 768px : single-column content ----------------------------------- */
@media (max-width: 768px) {
  .hero { min-height: 560px; }

  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .card-grid,
  .split-panel { grid-template-columns: 1fr; }

  .utility-bar__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 0;
  }
}

/* ---- <= 560px : phones -------------------------------------------------- */
@media (max-width: 560px) {
  :root { --gutter: 18px; }

  .hero {
    min-height: 0;
    padding-top: clamp(80px, 22vh, 160px);
  }

  .hero__caption {
    position: static;
    margin-top: 26px;
  }

  .hero__actions .button { width: 100%; }

  .service-bar__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .mosaic {
    grid-template-columns: 1fr;
    grid-auto-rows: clamp(190px, 46vw, 240px);
  }

  .mosaic__tile--lead { grid-column: span 1; }

  .amenity-rows { grid-template-columns: 1fr; }

  .story { grid-template-columns: 92px minmax(0, 1fr); gap: 16px; }

  .signup__input { max-width: none; }

  .signup .button { width: 100%; }

  .footer-grid { grid-template-columns: 1fr; }
}

/* ---- <= 400px : smallest supported width -------------------------------- */
@media (max-width: 400px) {
  :root { --gutter: 14px; }

  /* Make room for the brand: the button keeps its bars, and "Menu" stays
     in the accessibility tree as the button's name. */
  .brand-mark { font-size: 1.55rem; }
  .brand-text strong { font-size: 0.95rem; }
  .brand-text small { font-size: 0.92rem; }

  .menu-button { gap: 0; padding: 11px 14px; }

  .menu-button > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .service-bar__list { grid-template-columns: 1fr; }

  .service-bar__list a { padding: 15px 18px; }

  .event-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .event-row__date {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 0;
    border-right: 0;
    text-align: left;
  }

  .event-row__day { font-size: 1.5rem; }
}