/* ==========================================================================
   East Fishkill Business Association

   Navy, forest green and gold, sampled from the association's own logo.
   A civic body, not a
   startup, so the type does the work: a high-contrast serif for voice, a
   neutral grotesk for everything operational.

   There is no photography in this build. The visual interest comes from
   typographic scale, generous rules, and the contour motif in the hero —
   which means nothing breaks when a real photo library finally arrives.

   Sections, in order:
     1  tokens          6  cards
     2  base + type     7  forms
     3  layout          8  tables + admin
     4  masthead        9  components (badge, flash, modal, tabs)
     5  buttons        10  footer + utilities + responsive
   ========================================================================== */

/* --- 1. tokens ----------------------------------------------------------- */

/* Fraunces draws a decorative ampersand that reads as a broken glyph rather
   than an "&" — and the WONK axis does not change it. Mapping U+0026 alone to a
   plain system serif fixes every serif ampersand at once, including ones inside
   business names members type in themselves. Falls back to Fraunces if none of
   these faces exist, which is no worse than before. */
@font-face {
  font-family: 'AmpersandFix';
  src: local('Georgia'), local('Times New Roman'), local('Liberation Serif'),
       local('DejaVu Serif'), local('Nimbus Roman');
  unicode-range: U+0026;
}

:root {
  /* Sampled straight out of the logo artwork, so the site and the mark agree.
     Every pair below was checked against WCAG AA before being committed —
     see the note on --gold, which is the one that cannot carry text. */

  /* ink */
  --ink:        #14202A;   /* headings, body — 15.3:1 on paper */
  --stone:      #535E68;   /* secondary text */
  --quiet:      #5E6973;   /* tertiary, timestamps — 4.6:1 on sand, the worst ground */

  /* navy — primary, straight from the wordmark */
  --navy:       #012940;
  --navy-dk:    #001B2C;
  --navy-xdk:   #011E30;   /* deep bands, sidebar, footer */
  --navy-lt:    #0A3B5C;   /* hover */
  --navy-wash:  #E8EEF2;

  /* gold — the sun. A fill and a rule, never type on a light ground: the
     logo gold is only 2.5:1 on white, so --gold-ink exists for words. */
  --gold:       #D5983F;
  --gold-ink:   #8C5F22;   /* 4.6:1 on sand */
  --gold-lt:    #E5B463;   /* type weight on the dark navy grounds only */
  --gold-wash:  #FAF0DC;

  /* green — the hills and the tree */
  --green:      #2C5A39;
  --green-dk:   #1E4C34;
  --green-wash: #E7EEE8;

  /* the slate blue of the water, used very sparingly */
  --blue:       #3781A1;

  /* grounds */
  --paper:      #F7F6F2;
  --card:       #FFFFFF;
  --sand:       #ECEAE3;
  --line:       #DEDAD1;   /* decorative rules and dividers */
  --line-input: #8F887C;   /* form control borders — 3.5:1, they carry meaning */
  --line-soft:  #EAE7E0;

  /* status */
  --go:         #2C5A39;
  --go-wash:    #E7EEE8;
  --warn:       #8C5F22;
  --warn-wash:  #FAF0DC;
  --flag:       #A32D1E;
  --flag-wash:  #FAEAE6;

  --serif: 'AmpersandFix', 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --wrap:   1180px;
  --narrow: 760px;
  --gap:    clamp(1.125rem, 4vw, 2.5rem);
  --r:      10px;
  --r-sm:   6px;

  --shadow:    0 1px 2px rgba(20,32,42,.05), 0 8px 24px -12px rgba(20,32,42,.18);
  --shadow-lg: 0 2px 4px rgba(20,32,42,.05), 0 24px 48px -20px rgba(20,32,42,.26);
}

/* --- 2. base + type ------------------------------------------------------ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.25; }
h4 { font-size: 1.0625rem; line-height: 1.3; }

p  { margin: 0 0 1.05em; max-width: 70ch; }
ul, ol { margin: 0 0 1.05em; padding-left: 1.25em; }
li { margin-bottom: .35em; }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy-lt); }

strong, b { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }

::selection { background: var(--navy); color: #fff; }

/* the small caps label that sits above most headings */
.eyebrow {
  font: 600 .72rem/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: .65rem;
}
.eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--line), transparent);
  max-width: 6rem;
}
.eyebrow.solo::after { display: none; }

.lede { font-size: clamp(1.06rem, 1.7vw, 1.22rem); line-height: 1.6; color: var(--stone); max-width: 62ch; }
.muted { color: var(--stone); }
.quiet { color: var(--quiet); }
.small { font-size: .875rem; }
.tiny  { font-size: .78rem; }
.mono  { font-variant-numeric: tabular-nums; }
.serif { font-family: var(--serif); font-variation-settings: 'SOFT' 0, 'WONK' 0; }

/* --- 3. layout ----------------------------------------------------------- */

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

.section      { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section.tight{ padding-block: clamp(2rem, 4vw, 3rem); }
.section.sand { background: var(--sand); }
.section.line-top { border-top: 1px solid var(--line); }

/* dark navy band — used once or twice a page, never more */
.section.deep {
  background: var(--navy-xdk);
  color: #E6EDF2;
  position: relative;
  overflow: hidden;
}
.section.deep h1, .section.deep h2, .section.deep h3 { color: #FFFFFF; }
.section.deep .lede, .section.deep .muted { color: #B9CBD8; }
.section.deep a:not(.btn) { color: var(--gold-lt); }
.section.deep .eyebrow { color: var(--gold-lt); }
.section.deep .eyebrow::after { background: linear-gradient(to right, rgba(229,180,99,.5), transparent); }

.stack > * + *  { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 2rem; }
.row    { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.row.end{ justify-content: flex-end; }
.spread { display: flex; gap: 1.25rem; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.center { text-align: center; }

.grid   { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }

/* Data-driven card grids keep their column count even when the data is thin.
   auto-fit collapses empty tracks, which made a single directory listing
   stretch the full page width and read as a layout error rather than as one
   listing. A founding association will spend a while at one or two of things. */
@media (min-width: 48rem) {
  .grid.fixed2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.fixed3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .grid.fixed3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* an empty state has nothing to line up with, so it always spans */
.grid .empty { grid-column: 1 / -1; }

/* an asymmetric two-column: content + rail */
.split { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 62rem) {
  .split { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; }
  .split.rail-left { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
  .split.even { grid-template-columns: 1fr 1fr; }
}

/* --- 3b. hero ------------------------------------------------------------ */

.hero {
  position: relative;
  background: var(--navy-xdk);
  color: #E6EDF2;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  /* warm light from the upper right, keeps the flat navy from going dead */
  content: '';
  position: absolute;
  inset: -30% -10% auto auto;
  width: 46rem; height: 46rem;
  background: radial-gradient(circle, rgba(213,152,63,.30), transparent 62%);
  z-index: -1;
  pointer-events: none;
}
/* Photographic hero. The scrim is doing accessibility work, not decoration:
   white text over the bare photograph measures about 2:1 in the bright patches.
   These stops were set by measuring the actual pixels rather than by eye —
   sampling every 4th pixel of park-hero-1200.jpg through the composite:
     text column (left 46%)  headline 14.7:1   lede 9.8:1
     worst point in the band headline  8.4:1   lede 5.6:1
   Both clear WCAG AA with room to spare, and .66 at the right edge lets more
   of the photograph through than a flat overlay would. If you swap the
   photograph, re-measure — do not assume these stops still hold. */
.hero.photo {
  --scrim: linear-gradient(100deg,
    rgba(1,30,48,.97) 0%,
    rgba(1,30,48,.94) 42%,
    rgba(1,30,48,.82) 70%,
    rgba(1,30,48,.66) 100%);
  background-image: var(--scrim), url('/assets/img/park-hero-800.jpg');
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}
@media (min-width: 50rem) {
  .hero.photo { background-image: var(--scrim), url('/assets/img/park-hero-1200.jpg'); }
}
@media (min-width: 90rem) {
  .hero.photo { background-image: var(--scrim), url('/assets/img/park-hero-2000.jpg'); }
}
/* The depot photograph is brighter than the park aerial — open sky on the
   right — so it needs a heavier scrim to hold the same margins. Measured:
   text column 14.2:1 headline / 8.5:1 lede, worst in band 8.8 / 5.3. */
.hero.photo-depot {
  --scrim: linear-gradient(100deg,
    rgba(1,30,48,.97) 0%,
    rgba(1,30,48,.95) 42%,
    rgba(1,30,48,.88) 70%,
    rgba(1,30,48,.78) 100%);
  background-image: var(--scrim), url('/assets/img/depot-hero-800.jpg');
}
@media (min-width: 50rem) {
  .hero.photo-depot { background-image: var(--scrim), url('/assets/img/depot-hero-1200.jpg'); }
}
@media (min-width: 90rem) {
  .hero.photo-depot { background-image: var(--scrim), url('/assets/img/depot-hero-2000.jpg'); }
}

/* On a phone the copy spans the full width, so the scrim has to be flat. */
@media (max-width: 46rem) {
  .hero.photo {
    --scrim: linear-gradient(180deg, rgba(1,30,48,.93) 0%, rgba(1,30,48,.90) 100%);
  }
}
.hero.photo::before { display: none; }   /* the photo replaces the radial glow */

/* a captioned figure for long-form pages */
.figure { margin: 2rem 0; }
.figure img { display: block; width: 100%; border-radius: var(--r); background: var(--sand); }
.figure figcaption { font-size: .82rem; color: var(--quiet); margin-top: .6rem; }

.hero-contour {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(58%, 40rem);
  height: 100%;
  opacity: .3;
  z-index: -1;
  pointer-events: none;
  color: var(--gold-lt);
}
.hero-inner { padding-block: clamp(3.5rem, 9vw, 7rem); position: relative; }
.hero h1 { color: #FFFFFF; max-width: 16ch; margin-bottom: .35em; }
.hero .lede { color: #B9CBD8; max-width: 46ch; font-size: clamp(1.08rem, 1.8vw, 1.28rem); }
.hero .eyebrow { color: var(--gold-lt); }
.hero .eyebrow::after { background: linear-gradient(to right, rgba(229,180,99,.55), transparent); }

/* the figure band under the hero copy */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  background: rgba(186,203,216,.22);
  border: 1px solid rgba(186,203,216,.22);
  border-radius: var(--r);
  overflow: hidden;
}
.fact { background: var(--navy-xdk); padding: 1.15rem 1.25rem; }
.fact dt { font: 600 .7rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #9BB1C2; margin-bottom: .5rem; }
.fact dd { margin: 0; font-family: var(--serif); font-variation-settings: 'SOFT' 0, 'WONK' 0; font-size: 1.6rem; font-weight: 600; color: #FFFFFF; line-height: 1; }
.fact dd small { display: block; font-family: var(--sans); font-size: .76rem; font-weight: 400; color: #9BB1C2; margin-top: .4rem; line-height: 1.4; }

/* --- 4. masthead --------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(251,248,244,.93);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line);
}
.masthead-inner { display: flex; align-items: center; gap: 1.25rem; min-height: 4.5rem; }

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand-mark { height: 2.5rem; width: auto; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--serif); font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em; }
.brand-sub  { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--quiet); margin-top: .18rem; }

.nav { display: flex; align-items: center; gap: .15rem; }
.nav a:not(.btn) {
  font-size: .905rem;
  font-weight: 500;
  color: var(--stone);
  text-decoration: none;
  padding: .5rem .7rem;
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.nav a:not(.btn):hover { color: var(--navy); background: var(--navy-wash); }
.nav a.on:not(.btn) { color: var(--navy); font-weight: 600; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: .5rem .6rem;
  cursor: pointer;
  color: var(--ink);
}

@media (max-width: 60rem) {
  .nav-toggle { display: inline-flex; align-items: center; }
  .nav {
    position: fixed;
    inset: 4.5rem 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: .5rem var(--gap) 1.25rem;
    box-shadow: var(--shadow-lg);
    max-height: calc(100dvh - 4.5rem);
    overflow-y: auto;
  }
  .nav:not(.open) { display: none; }
  .nav a { padding: .8rem .25rem; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  .nav .btn { margin-top: .9rem; justify-content: center; }
}

/* --- 5. buttons ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font: 600 .92rem/1 var(--sans);
  padding: .78rem 1.25rem;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s, transform .08s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled='true'] { opacity: .5; cursor: not-allowed; }

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

.btn-gold { background: var(--gold); color: #012940; }
.btn-gold:hover { background: var(--gold-lt); color: #012940; }

.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--navy); color: var(--navy); background: var(--navy-wash); }

.btn-quiet { background: transparent; color: var(--stone); padding-inline: .6rem; }
.btn-quiet:hover { color: var(--navy); background: var(--navy-wash); }

.btn-danger { background: var(--flag-wash); color: var(--flag); border-color: rgba(163,45,30,.25); }
.btn-danger:hover { background: var(--flag); color: #fff; }

.btn-sm { font-size: .82rem; padding: .5rem .8rem; }
.btn-lg { font-size: 1rem; padding: .95rem 1.6rem; }
.btn-block { width: 100%; }

/* on dark bands */
.deep .btn-ghost, .hero .btn-ghost { border-color: rgba(230,237,242,.34); color: #E6EDF2; }
.deep .btn-ghost:hover, .hero .btn-ghost:hover { background: rgba(230,237,242,.1); border-color: #E6EDF2; color: #fff; }

/* a text link with an arrow that nudges */
.more { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .92rem; text-decoration: none; }
.more::after { content: '→'; transition: transform .15s; }
.more:hover::after { transform: translateX(3px); }

/* --- 6. cards ------------------------------------------------------------ */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.5rem;
  position: relative;
}
.card.pad-lg { padding: clamp(1.5rem, 3vw, 2.25rem); }
.card.flat { box-shadow: none; }

/* clickable cards (directory, events, news) */
.card-link { display: block; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
.card-link:hover { border-color: var(--navy); box-shadow: var(--shadow); transform: translateY(-2px); color: inherit; }
.card-link:hover h3 { color: var(--navy); }

/* directory listing card */
.listing { display: flex; flex-direction: column; min-height: 100%; }
.listing-logo {
  width: 3.4rem; height: 3.4rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--sand);
  object-fit: contain;
  padding: .3rem;
  margin-bottom: .9rem;
  flex: none;
}
.listing-logo.placeholder {
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--navy);
  background: var(--navy-wash);
  border-color: transparent;
}
.listing h3 { margin-bottom: .2rem; transition: color .15s; }
.listing .cat { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: .7rem; }
.listing p { font-size: .92rem; color: var(--stone); margin-bottom: .9rem; }
.listing .foot { margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--line-soft); font-size: .85rem; color: var(--quiet); display: flex; gap: .75rem; flex-wrap: wrap; }

/* event card with a date chip */
.event { display: flex; gap: 1.15rem; align-items: flex-start; }
.datechip {
  flex: none;
  width: 3.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  text-align: center;
  background: var(--card);
}
.datechip .m { background: var(--navy); color: #fff; font: 600 .68rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: .35rem 0; }
.datechip .d { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; padding: .3rem 0 .4rem; line-height: 1; }
.event-body { min-width: 0; }
.event-body h3 { margin-bottom: .25rem; transition: color .15s; }
.event-meta { font-size: .86rem; color: var(--stone); display: flex; flex-wrap: wrap; gap: .3rem .8rem; margin-bottom: .5rem; }

/* --- image slots ---------------------------------------------------------
   Every slot is optional. Templates are laid out so that a record with no
   image is not a hole — the image is added above existing content, never
   reserved as blank space. aspect-ratio keeps a half-loaded page from
   shifting under the reader.
   ------------------------------------------------------------------------ */

.card-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--sand);
  margin: -.25rem 0 1rem;
}
.media-hero {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--r);
  background: var(--sand);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
@media (max-width: 40rem) { .media-hero { aspect-ratio: 16 / 9; } }

/* the event card puts the date chip over the image when there is one */
.event.has-media { flex-direction: column; gap: 0; }
.event.has-media .datechip { position: absolute; top: 1.5rem; left: 1.5rem; box-shadow: var(--shadow); }

/* a dashed slot the board sees in admin where an image can go */
.media-slot {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px dashed var(--line-input);
  border-radius: var(--r-sm);
  background: var(--sand);
  color: var(--stone);
  font-size: .85rem;
  text-align: center;
  padding: 1rem;
}

/* numbered benefit / pillar block */
.pillar { position: relative; padding-top: 1.25rem; border-top: 2px solid var(--navy); }
.pillar .n { font-family: var(--serif); font-size: .85rem; font-weight: 600; color: var(--gold-ink); display: block; margin-bottom: .6rem; letter-spacing: .08em; }
.pillar h3 { margin-bottom: .4rem; }
.pillar p { font-size: .95rem; color: var(--stone); margin-bottom: 0; }

/* tier / pricing card */
.tier { display: flex; flex-direction: column; }
.tier.pick { border-color: var(--navy); box-shadow: var(--shadow); }
.tier .flag {
  position: absolute; top: -.7rem; left: 1.5rem;
  background: var(--navy); color: #fff;
  font: 600 .68rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  padding: .38rem .6rem; border-radius: 3px;
}
.tier .price { font-family: var(--serif); font-size: 2.5rem; font-weight: 600; line-height: 1; margin: .3rem 0 .15rem; }
.tier .per { font-size: .84rem; color: var(--quiet); margin-bottom: 1rem; }
.tier ul { list-style: none; padding: 0; margin: 1.1rem 0 1.5rem; font-size: .92rem; }
.tier li { position: relative; padding-left: 1.5rem; margin-bottom: .55rem; color: var(--stone); }
.tier li::before { content: '✓'; position: absolute; left: 0; top: -.05rem; color: var(--go); font-weight: 700; }
.tier .btn { margin-top: auto; }

/* --- sponsors ------------------------------------------------------------
   A sponsor with no logo yet still gets a proper slot — a wordmark set in the
   display serif — so the strip never has a gap in it while artwork is chased.
   ------------------------------------------------------------------------ */

.sponsor-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.25rem);
}
.sponsor {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  text-decoration: none;
  color: inherit;
  transition: opacity .15s;
}
.sponsor:hover { opacity: .7; color: inherit; }
.sponsor img { max-height: 3.5rem; max-width: 11rem; width: auto; object-fit: contain; }
.sponsor .wordmark {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--navy);
  text-align: center;
}
.deep .sponsor .wordmark, .footer .sponsor .wordmark { color: var(--gold-lt); }

/* the fuller card used on the sponsorship page */
.sponsor-card { display: flex; gap: 1.25rem; align-items: flex-start; }
.sponsor-card .mark {
  flex: none;
  width: 5.5rem; height: 5.5rem;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  padding: .5rem;
}
.sponsor-card .mark img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sponsor-card .mark .wordmark { font-size: 1.4rem; }

/* --- people (board) ------------------------------------------------------ */

.person { text-align: left; }
.person .portrait {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r);
  background: var(--sand);
  margin-bottom: .9rem;
  display: block;
}
.person .portrait.placeholder {
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 600;
  color: var(--navy);
  background: var(--navy-wash);
}
.person h3 { margin-bottom: .1rem; font-size: 1.08rem; }
.person .role { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); }
.person .biz { font-size: .88rem; color: var(--stone); margin-top: .3rem; }
.person p.bio { font-size: .9rem; color: var(--stone); margin: .6rem 0 0; }

/* pull quote / callout */
.callout {
  border-left: 3px solid var(--gold);
  padding: .35rem 0 .35rem 1.4rem;
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.45;
  color: var(--ink);
}

/* --- 7. forms ------------------------------------------------------------ */

.field { margin-bottom: 1.15rem; }
.field > label, .lbl {
  display: block;
  font: 600 .82rem/1.3 var(--sans);
  letter-spacing: .01em;
  margin-bottom: .42rem;
  color: var(--ink);
}
.field .help { font-size: .8rem; color: var(--quiet); margin: .35rem 0 0; }
.req { color: var(--flag); }

input[type=text], input[type=email], input[type=tel], input[type=url],
input[type=password], input[type=number], input[type=date],
input[type=datetime-local], input[type=search], select, textarea {
  width: 100%;
  /* 16px is a hard floor, not a preference: iOS Safari zooms the whole page
     when a control with a smaller font takes focus, and the reader then has to
     pinch back out. Everything below the floor needs .select-sm, which only
     shrinks on pointer devices. */
  font: 400 1rem/1.5 var(--sans);
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-input);
  border-radius: var(--r-sm);
  padding: .66rem .8rem;
  transition: border-color .15s, box-shadow .15s;
}
textarea { resize: vertical; min-height: 7rem; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236A605D' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  padding-right: 2.2rem;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px var(--navy-wash);
}
input::placeholder, textarea::placeholder { color: var(--quiet); }
input:disabled, select:disabled, textarea:disabled { background: var(--sand); color: var(--quiet); cursor: not-allowed; }

/* A compact select for dense admin tables. Full size on touch, small on a
   mouse — so it never trips the iOS zoom described above. */
.select-sm { width: auto; padding: .4rem .55rem; }
@media (hover: hover) and (pointer: fine) {
  .select-sm { font-size: .82rem; padding: .35rem .5rem; }
}

.check { display: flex; align-items: flex-start; gap: .6rem; font-size: .92rem; cursor: pointer; }
.check input { width: 1.05rem; height: 1.05rem; margin-top: .2rem; accent-color: var(--navy); flex: none; }

fieldset { border: 0; padding: 0; margin: 0 0 2rem; }
legend {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  padding: 0 0 .3rem;
  margin-bottom: 1.1rem;
  width: 100%;
  border-bottom: 1px solid var(--line);
}

.form-grid { display: grid; gap: 0 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .form-grid.two { grid-template-columns: 1fr 1fr; } }
.form-grid .span { grid-column: 1 / -1; }

/* search + filter bar */
.filterbar { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.filterbar input[type=search] { flex: 1 1 15rem; }
.filterbar select { flex: 0 1 15rem; }

/* --- 8. tables + admin --------------------------------------------------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .72rem .85rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
th {
  font: 600 .72rem/1.2 var(--sans);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--stone);
  background: var(--sand);
  white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--paper); }
td.actions { white-space: nowrap; text-align: right; }
td.actions .btn + .btn { margin-left: .3rem; }
.nowrap { white-space: nowrap; }

/* admin shell */
.admin-body { background: var(--sand); }
.admin-shell { display: grid; grid-template-columns: 1fr; gap: 0; min-height: 100dvh; }
@media (min-width: 64rem) { .admin-shell { grid-template-columns: 15.5rem 1fr; } }

.sidebar { background: var(--navy-xdk); color: #D8E4EC; padding: 1.25rem 1rem; }
@media (min-width: 64rem) { .sidebar { position: sticky; top: 0; height: 100dvh; overflow-y: auto; } }
.sidebar .brand { color: #FFFFFF; margin-bottom: 1.5rem; }
.sidebar .brand-mark { height: 2.2rem; }
.sidebar .brand-name { color: #FFFFFF; }
.sidebar .brand-sub { color: #8FA8B9; }
.sidenav { display: flex; flex-direction: column; gap: .1rem; }
@media (max-width: 64rem) { .sidenav { flex-direction: row; flex-wrap: wrap; } }
.sidenav a {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .58rem .7rem;
  border-radius: var(--r-sm);
  color: #BACBD8;
  text-decoration: none;
  font-size: .89rem;
  font-weight: 500;
}
.sidenav a:hover { background: rgba(255,255,255,.07); color: #FFFFFF; }
.sidenav a.on { background: var(--navy); color: #fff; font-weight: 600; }
.sidenav .sep { font: 600 .66rem/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: #8FA8B9; padding: 1.1rem .7rem .4rem; }
@media (max-width: 64rem) { .sidenav .sep { display: none; } }

.admin-main { padding: clamp(1.25rem, 3vw, 2.25rem); min-width: 0; }
.admin-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.admin-head h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; }

/* stat tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .85rem; margin-bottom: 2rem; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.1rem; text-decoration: none; color: inherit; display: block; transition: border-color .15s; }
.tile:hover { border-color: var(--navy); color: inherit; }
.tile .k { font: 600 .7rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--stone); }
.tile .v { font-family: var(--serif); font-size: 1.9rem; font-weight: 600; line-height: 1.1; margin-top: .45rem; }
.tile.alert { border-color: var(--navy); background: var(--navy-wash); }
.tile.alert .v { color: var(--navy); }

/* --- 9. components ------------------------------------------------------- */

.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font: 600 .7rem/1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .32rem .5rem;
  border-radius: 3px;
  background: var(--sand);
  color: var(--stone);
  white-space: nowrap;
}
.badge.go    { background: var(--go-wash);   color: var(--go); }
.badge.warn  { background: var(--warn-wash); color: var(--warn); }
.badge.flag  { background: var(--flag-wash); color: var(--flag); }
.badge.gold { background: var(--gold-wash);color: #8C5F22; }
.badge.navy{ background: var(--navy-wash); color: var(--navy); }

.flash { padding: .85rem 1.05rem; border-radius: var(--r-sm); font-size: .92rem; margin-bottom: 1.25rem; border: 1px solid transparent; }
.flash.ok   { background: var(--go-wash);   color: #1E4C34; border-color: rgba(44,90,57,.22); }
.flash.err  { background: var(--flag-wash); color: #7A2216; border-color: rgba(163,45,30,.22); }
.flash.info { background: var(--gold-wash);color: #8C5F22; border-color: rgba(213,152,63,.22); }

.empty {
  border: 1px dashed var(--line);
  border-radius: var(--r);
  padding: clamp(2rem, 5vw, 3.5rem) 1.5rem;
  text-align: center;
  color: var(--stone);
  background: var(--card);
}
.empty h3 { color: var(--ink); margin-bottom: .4rem; }
.empty p { margin: 0 auto; max-width: 44ch; }

/* tabs */
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin-bottom: 1.75rem; overflow-x: auto; }
.tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  font: 600 .9rem/1 var(--sans); color: var(--stone);
  padding: .75rem .9rem; cursor: pointer; white-space: nowrap;
}
.tabs button:hover { color: var(--navy); }
.tabs button.on { color: var(--navy); border-bottom-color: var(--navy); }

/* modal */
.modal-back {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(20,32,42,.55);
  display: grid; place-items: center;
  padding: 1rem;
  overflow-y: auto;
}
.modal {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  width: min(44rem, 100%);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: clamp(1.35rem, 3vw, 2rem);
  margin: auto;
}
.modal h2 { font-size: 1.45rem; }
.modal-foot { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }

/* definition rows, used on detail pages */
.dl { display: grid; grid-template-columns: 1fr; gap: 0; }
.dl > div { display: flex; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line-soft); font-size: .93rem; }
.dl dt { flex: 0 0 8.5rem; color: var(--stone); font-weight: 500; }
.dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* prose — long-form copy on about/news/policy pages */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.5rem; }
.prose h3 { margin-top: 1.75rem; }
.prose > *:first-child { margin-top: 0; }
.prose blockquote { margin: 1.75rem 0; border-left: 3px solid var(--gold); padding-left: 1.3rem; font-family: var(--serif); font-size: 1.12rem; color: var(--stone); }

/* --- FAQ ----------------------------------------------------------------- */

.faq {
  border-bottom: 1px solid var(--line);
  padding: .25rem 0;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.05rem 2.5rem 1.05rem 0;
  position: relative;
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  position: absolute;
  right: .5rem;
  top: 50%;
  width: .6rem;
  height: .6rem;
  border-right: 2px solid var(--gold-ink);
  border-bottom: 2px solid var(--gold-ink);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .18s;
}
.faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq summary:hover { color: var(--navy); }
.faq-body { padding: 0 2.5rem .95rem 0; }
.faq-body p { margin: 0; color: var(--stone); }

/* skip link */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; color: #fff; }

/* spinner */
.spin { display: inline-block; width: 1rem; height: 1rem; border: 2px solid var(--line); border-top-color: var(--navy); border-radius: 50%; animation: spin .6s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- 10. footer + utilities + responsive --------------------------------- */

.footer { background: var(--navy-xdk); color: #AEC2D0; padding-block: clamp(2.5rem, 5vw, 4rem) 2rem; margin-top: auto; }
.footer a:not(.btn) { color: #D8E4EC; text-decoration: none; }
.footer a:not(.btn):hover { color: var(--gold-lt); text-decoration: underline; }
.footer h4 { color: #FFFFFF; font-family: var(--sans); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: .9rem; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.footer ul { list-style: none; padding: 0; margin: 0; font-size: .91rem; }
.footer li { margin-bottom: .5rem; }
.footer-base {
  margin-top: 2.75rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(233,216,211,.16);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .82rem; color: #8FA8B9;
}

.page { display: flex; flex-direction: column; min-height: 100dvh; }

/* `main` is empty in the served HTML and filled by the router on load. Without a
   reserved height the footer renders at the fold and is then shoved down the
   moment content arrives — a single 0.48 layout shift, which is most of a POOR
   CLS on desktop all by itself. Holding a viewport of height keeps the footer
   below the fold until the real content has measured, so the move costs nothing.
   The proper fix is server-rendering the first view; this makes the interim
   honest. */
.page > main { flex: 1; min-height: 100dvh; }

.hide { display: none !important; }
.mt0 { margin-top: 0 !important; }
.mb0 { margin-bottom: 0 !important; }
.mt1 { margin-top: 1rem; }
.mt2 { margin-top: 2rem; }
.mb1 { margin-bottom: 1rem; }
.mb2 { margin-bottom: 2rem; }
.w100 { width: 100%; }

@media print {
  .masthead, .footer, .nav, .btn, .sidebar { display: none !important; }
  body { background: #fff; }
}