/* ==========================================================================
   Hope Helps TN — site styles
   Palette taken from the HHTN logo: navy #294A70, gold #F8D646, silver #B3B3B3
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --brand:        #294A70;   /* logo navy */
  --brand-dark:   #1D3752;
  --brand-deep:   #142838;
  --brand-light:  #E9EEF5;
  --brand-mid:    #4A6B92;

  --gold:         #F8D646;   /* logo gold */
  --gold-dark:    #E3BE23;
  --gold-soft:    #FDF6DC;
  --gold-ink:     #6E5405;   /* gold-family text that passes contrast on light */

  --silver:       #B3B3B3;

  --ink:     #16202B;
  --body:    #3B4754;
  --muted:   #67737F;
  --line:    #E1E5EB;
  --bg:      #FAFBFC;
  --surface: #ffffff;
  --sunken:  #F1F4F8;

  --radius:    14px;
  --radius-sm: 9px;
  --shadow:    0 1px 2px rgba(22,32,43,.05), 0 8px 24px -12px rgba(22,32,43,.18);
  --shadow-lg: 0 2px 4px rgba(22,32,43,.05), 0 18px 44px -18px rgba(22,32,43,.30);

  --wrap: 1140px;
  --gap:  clamp(1.25rem, 3.2vw, 2.5rem);

  --sans:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --header-h: 86px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* scrollbar-gutter keeps the scrollbar's space reserved on every page.
   Without it a short page has no scrollbar and a long one does, so the
   viewport narrows by ~15px and the whole nav shifts sideways on click. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, picture, svg, video { max-width: 100%; display: block; }
/* every <img> carries width/height attributes for layout stability, so height
   MUST be released here or the intrinsic attribute stretches the image. */
img { height: auto; }

h1, h2, h3, h4, h5 {
  font-family: var(--display);
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 .5em;
  font-weight: 600;
  letter-spacing: -.015em;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
h4 { font-size: 1.14rem; letter-spacing: -.008em; }
p  { margin: 0 0 1.1em; }
a  { color: var(--brand); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--gold-ink); }
ul, ol { padding-left: 1.25em; }
:focus-visible { outline: 3px solid var(--gold-dark); outline-offset: 3px; border-radius: 3px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, 760px); margin-inline: auto; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand-dark); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; color: #fff; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font: 600 .96rem/1 var(--sans);
  padding: .85rem 1.5rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s,
              transform .18s var(--ease), box-shadow .18s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--brand-dark); color: #fff; box-shadow: var(--shadow-lg); }
/* gold with navy ink — the logo's own pairing, and high contrast */
.btn-accent { background: var(--gold); color: var(--brand-dark); box-shadow: var(--shadow); font-weight: 700; }
.btn-accent:hover { background: var(--gold-dark); color: var(--brand-deep); box-shadow: var(--shadow-lg); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--surface); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn-onDark { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.45); backdrop-filter: blur(6px); }
.btn-onDark:hover { background: #fff; color: var(--brand-dark); border-color: #fff; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(250,251,252,.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .28s var(--ease), background-color .28s;
}
.site-header.scrolled { box-shadow: 0 6px 22px -14px rgba(22,32,43,.5); background: rgba(250,251,252,.97); }
/* The nav needs ~1170px; .wrap caps at 1140, so it overflowed at every width
   and flex compressed the items differently on each page. Own measure here. */
.header-bar {
  display: flex; align-items: center; gap: 1rem; min-height: var(--header-h);
  width: min(100% - 2.5rem, 1520px);
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; flex: none; }
.brand-logo { width: 62px; height: 62px; flex: none; transition: transform .4s var(--ease); }
.brand:hover .brand-logo { transform: rotate(-6deg) scale(1.06); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: var(--display); font-weight: 600; font-size: 1.16rem; color: var(--brand); letter-spacing: -.02em; }
.brand-sub { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

.nav { display: flex; align-items: center; gap: .1rem; flex: none; flex-wrap: nowrap; }
.nav a {
  position: relative;
  font-size: .8rem; font-weight: 600; letter-spacing: .015em;
  color: var(--body); text-decoration: none;
  padding: .55rem .5rem; border-radius: 8px; white-space: nowrap; flex: none;
  transition: color .18s, background-color .18s;
}
.nav a::after {
  content: ""; position: absolute; left: .62rem; right: .62rem; bottom: .28rem;
  height: 2px; background: var(--gold); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .26s var(--ease);
}
.nav a:hover { color: var(--brand); }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--brand); background: var(--brand-light); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.header-cta { margin-left: .6rem; }
.header-cta::after { display: none; }
.nav-toggle {
  display: none; margin-left: auto;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px;
  width: 46px; height: 42px; cursor: pointer; padding: 0;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 19px; height: 2px; background: var(--brand); border-radius: 2px;
  margin-inline: auto; position: relative; transition: transform .22s var(--ease), opacity .22s;
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* Narrower desktops (and 1440 screens once a scrollbar takes its share) keep
   the full nav beside the logo: below 1580px the links tighten, below 1420px
   the brand drops to the round logo alone. Only below 1280px do the links take
   a second row (Donate stays up top), and the hamburger is for tablets and
   phones. Widths measured with the 2026-10-31 labels ("Sponsorship, Sponsors &
   Friends", "Upcoming Events", "News & Stories"); re-measure if they change. */
@media (min-width: 1000px) and (max-width: 1579px) {
  .header-bar { width: min(100% - 1.5rem, 1400px); gap: .75rem; }
  .brand-logo { width: 54px; height: 54px; }
  .nav a { font-size: .76rem; padding: .5rem .38rem; }
  .nav a::after { left: .45rem; right: .45rem; }
  .header-cta { margin-left: .35rem; }
}
@media (min-width: 1000px) and (max-width: 1419px) {
  .brand-text { display: none; }
}
@media (min-width: 1000px) and (max-width: 1279px) {
  .header-bar { position: relative; flex-wrap: wrap; row-gap: 0; padding-top: .5rem; }
  .nav { order: 3; width: 100%; justify-content: center; flex-wrap: wrap; padding: .15rem 0 .55rem; }
  .nav a { font-size: .72rem; letter-spacing: .005em; padding: .5rem .3rem; }
  .nav a::after { left: .38rem; right: .38rem; }
  .nav .header-cta { position: absolute; right: 0; top: 1.15rem; font-size: .8rem; padding: .55rem 1.1rem; }
  .brand-text { display: flex; }
}
@media (min-width: 1000px) and (max-width: 1129px) {
  .nav { gap: 0; }
  .nav a { font-size: .7rem; letter-spacing: 0; padding: .5rem .2rem; }
  .nav a::after { left: .26rem; right: .26rem; }
}
@media (max-width: 999px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto; z-index: 55;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding: .5rem .75rem 1.1rem;
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    display: none;
  }
  .nav.open { display: flex; animation: navDrop .26s var(--ease); }
  .nav a { padding: .85rem .7rem; border-radius: 10px; font-size: .95rem; }
  .nav a::after { display: none; }
  .header-cta { margin: .6rem .7rem 0; justify-content: center; }
}
@keyframes navDrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- alert strip ---------- */
.alert-strip {
  background: var(--gold); color: var(--brand-deep);
  font-size: .9rem; font-weight: 600;
  text-align: center; padding: .6rem 1rem;
}
.alert-strip a { color: var(--brand-deep); font-weight: 800; }

/* ---------- hero ---------- */
.hero { position: relative; color: #fff; isolation: isolate; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
/* 4:3 source in a ~3:1 band shows only ~33% of the height. 22% is the one
   window that keeps both the HOPE HELPS window sign and the volunteers' faces. */
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; animation: heroDrift 22s ease-out forwards; }
@keyframes heroDrift { from { transform: scale(1.09); } to { transform: scale(1); } }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, rgba(20,40,56,.94) 0%, rgba(29,55,82,.86) 44%, rgba(41,74,112,.58) 100%);
}
/* ---------- split hero ----------
   The available group photos are 4:3 candids, not wide editorial shots. Behind a
   full-bleed 3:1 band with a dark scrim they go small and muddy, so the photo
   gets its own frame beside the copy instead: uncropped, undimmed, faces legible. */
.hero-split {
  background: var(--brand-dark); color: #fff;
  position: relative; overflow: hidden;
}
.hero-split::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(248,214,70,.16), transparent 58%),
    radial-gradient(ellipse at 90% 100%, rgba(74,107,146,.45), transparent 60%);
}
.hero-split .wrap { position: relative; }
.hero-grid {
  display: grid; gap: clamp(2.25rem, 5vw, 4rem); align-items: center;
  padding: clamp(2.75rem, 7vw, 5rem) 0 clamp(3rem, 7vw, 5.25rem);
}
@media (min-width: 940px) { .hero-grid { grid-template-columns: 1.02fr .98fr; } }
.hero-copy h1 { color: #fff; margin-bottom: .45em; text-wrap: balance; }

.hero-figure { margin: 0; position: relative; z-index: 0; }
.hero-figure img {
  width: 100%; height: auto;
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.65);
}

/* ---------- hero slideshow ----------
   All slides share one 3:2 frame so the page never reflows mid-rotation.
   Sources are all landscape, so `cover` trims only a sliver off each. */
.hero-slideshow .slides {
  display: grid;
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.65);
  overflow: hidden;
  background: var(--brand-deep);
}
.hero-slideshow .slide {
  grid-area: 1 / 1;                 /* stack every slide in the same cell */
  margin: 0; position: relative;
  opacity: 0; visibility: hidden;
  transition: opacity .55s var(--ease), visibility 0s linear .55s;
}
.hero-slideshow .slide.is-on {
  opacity: 1; visibility: visible;
  transition: opacity .55s var(--ease), visibility 0s;
}
.hero-slideshow .slide img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 34%;
  border-radius: 0; box-shadow: none;
}
.hero-slideshow .slide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.6rem 1.1rem .9rem;
  font-size: .86rem; color: #fff;
  background: linear-gradient(to top, rgba(10,20,30,.86) 12%, transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
  .hero-slideshow .slide { transition: none; }
}
/* gold rule echoing the logo, tucked behind the photo's lower-left corner */
.hero-figure::before {
  content: ""; position: absolute; left: -14px; bottom: -14px;
  width: 46%; height: 58%; border-radius: var(--radius);
  border-left: 3px solid var(--gold); border-bottom: 3px solid var(--gold);
  opacity: .85; z-index: -1;
}
.hero-figure figcaption {
  margin-top: .9rem; font-size: .84rem; color: rgba(255,255,255,.62); text-align: right;
}
@media (max-width: 939px) {
  .hero-figure { order: -1; }
  .hero-figure figcaption { text-align: left; }
}

.hero-inner { padding: clamp(4rem, 11vw, 8rem) 0 clamp(3.5rem, 9vw, 6.5rem); max-width: 720px; }
.hero h1 { color: #fff; margin-bottom: .45em; text-wrap: balance; }
.hero-lede { font-size: clamp(1.06rem, 2.1vw, 1.3rem); color: rgba(255,255,255,.93); margin-bottom: 2rem; max-width: 60ch; }
.eyebrow {
  display: inline-block; font-size: .72rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--gold-ink); margin-bottom: 1.1rem;
}
.hero .eyebrow, .hero-split .eyebrow, .page-head .eyebrow, .cta-band .eyebrow { color: var(--gold); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }

.page-head { background: var(--brand-dark); color: #fff; padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.5rem, 5vw, 3.75rem); position: relative; }
.page-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-dark) 40%, transparent 100%);
}
.page-head h1 { color: #fff; margin-bottom: .3em; text-wrap: balance; }
.page-head p { color: rgba(255,255,255,.88); font-size: 1.1rem; max-width: 62ch; margin: 0; }

/* ---------- sections ---------- */
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section-sunken { background: var(--sunken); }
.section-brand  { background: var(--brand-light); }
.section-head { max-width: 66ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--muted); font-size: 1.08rem; margin-bottom: 0; }
.section-head p + p { margin-top: .9rem; }

/* ---------- grid + cards ---------- */
.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 285px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); }
.how-grid { grid-template-columns: 1fr; }
@media (min-width: 640px)  { .how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .how-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.card-link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--brand-mid); }
.card-media { aspect-ratio: 3 / 2; background: var(--sunken); overflow: hidden; }
/* most photos here are tall portraits of people in a landscape frame — bias the
   crop above centre so faces survive it */
.card-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; transition: transform .55s var(--ease); }
.card-link:hover .card-media img { transform: scale(1.05); }
/* flyers, posters and documents must never be cropped */
.card-media.contain { background: var(--surface); }
.card-media.contain img { object-fit: contain; object-position: center; padding: .75rem; }
.card-body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.card-body h3, .card-body h4 { margin-bottom: .45rem; }
.card-body p { color: var(--muted); font-size: .965rem; margin-bottom: 0; }
.card-body p + .card-more { margin-top: 1rem; }
.card-more { margin-top: auto; padding-top: 1rem; font-weight: 700; font-size: .88rem; color: var(--brand); }
/* :not(.btn) matters — a bare `.card a { color: inherit }` outranks
   `.btn-primary { color:#fff }` and turns every in-card button's label invisible */
.card a:not(.btn) { text-decoration: none; color: inherit; }

.icon-card { padding: 1.7rem 1.5rem; }
.icon-badge {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 1.1rem;
  background: var(--brand-light); color: var(--brand);
  display: grid; place-items: center; font: 700 1.05rem/1 var(--sans);
  transition: transform .3s var(--ease);
}
.card:hover .icon-badge { transform: translateY(-2px) scale(1.06); }
.icon-card.accent .icon-badge { background: var(--gold-soft); color: var(--gold-ink); }

/* numbered steps ----------------------------------------------------------
   Four steps in an auto-fit grid landed 3-across with one orphan on a second
   row. Pinned to two columns so they read as an even 2x2 set. */
.steps-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: 1fr;
  max-width: 900px; margin-inline: auto;
}
@media (min-width: 760px) { .steps-grid { grid-template-columns: 1fr 1fr; } }
.steps-grid .step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem 1.6rem 4.6rem;
  transition: transform .22s var(--ease), box-shadow .22s, border-color .22s;
}
.steps-grid .step:hover {
  transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand-mid);
}
.steps-grid .step-num { left: 1.5rem; top: 1.5rem; }
.steps-grid .step h4 { padding-top: .25rem; }

/* numbered steps */
.step { position: relative; padding-left: 3.6rem; }
.step-num {
  position: absolute; left: 0; top: 0;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: grid; place-items: center;
  font: 700 1rem/1 var(--sans);
  box-shadow: 0 0 0 0 rgba(41,74,112,.28);
  transition: box-shadow .3s;
}
.step:hover .step-num { box-shadow: 0 0 0 6px rgba(41,74,112,.12); }
.step h4 { margin-bottom: .3rem; padding-top: .35rem; }
.step p { color: var(--muted); font-size: .97rem; margin-bottom: 0; }

/* split feature */
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 860px) { .split { grid-template-columns: 1fr 1fr; } .split.reverse .split-media { order: 2; } }
.split-media img { border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: center 35%; }
.split-media.tall img { aspect-ratio: 3/4; }
/* posters/flyers: show the whole thing, never crop */
.split-media.poster img {
  aspect-ratio: auto; object-fit: contain; height: auto;
  background: var(--surface); padding: .5rem; border: 1px solid var(--line);
  max-height: 640px; margin-inline: auto; width: auto; max-width: 100%;
}
.split-body p { font-size: 1.06rem; }

/* stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: var(--gap); }
.stat { text-align: center; padding: 1.5rem 1rem; }
.stat-num { font-family: var(--display); font-size: clamp(2.1rem, 4.6vw, 3rem); font-weight: 600; color: var(--brand); line-height: 1; }
.stat-label { font-size: .87rem; color: var(--muted); margin-top: .6rem; font-weight: 500; }
.stat-hero { padding: 0 1rem 2.25rem; }
.stat-hero .stat-num { font-size: clamp(2.8rem, 7vw, 4.2rem); }
.stat-hero .stat-label { font-size: 1rem; }
.stat-cards .card { padding: 1.75rem 1.25rem .75rem; }
.stat-cards h3 { margin: 0; }
.stat-cards .stats { grid-template-columns: 1fr 1fr; gap: .5rem; }
.stat-cards .accent .stat-num { color: var(--gold-ink); }

/* ---------- events ---------- */
.event-list { display: grid; gap: 1rem; }
.event {
  display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.3rem 1.5rem;
  transition: transform .22s var(--ease), box-shadow .22s, border-color .22s;
}
.event:hover { transform: translateX(4px); box-shadow: var(--shadow); border-color: var(--brand-mid); }
.event-date {
  text-align: center; min-width: 68px;
  background: var(--brand); border-radius: var(--radius-sm); padding: .6rem .5rem;
}
.event-mon { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.event-day { font-family: var(--display); font-size: 1.7rem; font-weight: 600; color: #fff; line-height: 1.05; }
.event h4 { margin-bottom: .2rem; }
.event p { margin: 0; color: var(--muted); font-size: .95rem; }

/* ---------- posts ---------- */
.post-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.post-card .card-media { aspect-ratio: 4 / 3; }
.post-meta { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: .5rem; }
.post-card h3 { font-size: 1.2rem; }

.article { padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(3rem, 7vw, 5rem); }
.article-body { font-size: 1.09rem; }
.article-body p { margin-bottom: 1.3em; }
.article-body h2, .article-body h3 { margin-top: 1.8em; }
.post-figure { margin: 2rem 0; }
.post-figure img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }
.article-hero { margin-bottom: 2.5rem; }
.article-hero img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-lg); max-height: 560px; object-fit: cover; object-position: center 30%; }
/* flyers and documents: show the whole thing */
.article-hero.poster img {
  width: auto; max-width: 100%; max-height: 680px; object-fit: contain;
  margin-inline: auto; background: var(--surface); padding: .5rem;
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.tag {
  display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--brand-light); color: var(--brand); padding: .32rem .7rem; border-radius: 999px;
}
.article-nav { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 3rem; padding-top: 1.75rem; }
.article-nav a { font-weight: 600; font-size: .95rem; text-decoration: none; max-width: 46%; }
.article-nav span { display: block; font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }

/* ---------- sponsor tiers ---------- */
.tier-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
/* Seven tiers into three columns leaves one stranded at the left of the last
   row. Pin the column count so the orphan's position is predictable, then drop
   it into the middle column. */
@media (min-width: 900px) {
  .tier-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tier-grid > :last-child:nth-child(3n + 1) { grid-column: 2; }
}
@media (min-width: 620px) and (max-width: 899px) {
  .tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tier-grid > :last-child:nth-child(2n + 1) {
    grid-column: 1 / -1; max-width: calc(50% - var(--gap) / 2); margin-inline: auto;
  }
}
.tier {
  position: relative; text-align: center; overflow: visible;
  border-top: 4px solid var(--tier, var(--brand-mid));
}
.tier .card-body { padding: 1.9rem 1.5rem 1.75rem; }
.tier-badge {
  margin: 0 auto 1.15rem;
  display: grid; place-items: center;
  transition: transform .3s var(--ease);
}
.tier:hover .tier-badge { transform: translateY(-3px) scale(1.05); }
.tier-badge img {
  width: 92px; height: 92px;
  filter: drop-shadow(0 4px 8px rgba(22,32,43,.20));
}
.tier-name { font-family: var(--display); font-size: 1.4rem; font-weight: 600; color: var(--ink); margin-bottom: .15rem; }
.tier-amount {
  font-size: 1.5rem; font-weight: 800; color: var(--brand); line-height: 1.1;
  font-family: var(--sans); letter-spacing: -.02em;
}
.tier-per { font-size: .8rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1rem; }
.tier-benefit { color: var(--muted); font-size: .95rem; margin-bottom: 1.5rem; flex: 1; }
.tier .btn { align-self: center; }
.tier-featured { border-top-width: 6px; box-shadow: var(--shadow-lg); }
.tier-flag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: var(--brand-deep);
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .8rem; border-radius: 999px; white-space: nowrap; z-index: 2;
}

/* ---------- banner hero ----------
   The artwork carries the mission text, so it is never cropped — `cover` here
   would cut the wording in half. Natural aspect, contained, full stop. */
.hero-banner {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: clamp(1.5rem, 3.5vw, 2.75rem) 0 clamp(2rem, 4vw, 3rem);
}
.banner-figure { margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); }
.banner-figure img {
  width: 100%; height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero-actions.center-actions { justify-content: center; }

/* ---------- feature video ---------- */
.video-section { background: var(--sunken); }
.feature-video {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  background: #000;
}

/* wider container for the flyer row — four posters need more than 1140px to
   grow without wrapping to a second line */
.wrap-wide { width: min(100% - 2.5rem, 1620px); margin-inline: auto; }

.big-heading {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* ---------- event flyer grid ----------
   Flyers are artwork with type baked in, so they are contained on a white card,
   never cropped. A shared 3:4 frame keeps a mixed-size set aligned as a row. */
.flyer-grid {
  display: grid; gap: 1.25rem;
  /* Exactly two per row above 900px. auto-fit is wrong here: it derives the
     column count from the MIN track, so a wide screen would pack in three
     narrow ones instead of two large ones. */
  grid-template-columns: minmax(0, 780px);
  justify-content: center;
}
@media (min-width: 900px) {
  .flyer-grid { grid-template-columns: repeat(2, minmax(0, 780px)); }
}
/* One flyer on its own would otherwise sit in the left of two centred columns. */
.flyer-grid:has(> :only-child) { grid-template-columns: minmax(0, 780px); }
.flyer-grid figure { margin: 0; }
.flyer-grid img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: contain;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .4rem;
  box-shadow: var(--shadow);
  transition: transform .25s var(--ease), box-shadow .25s;
}
.flyer-grid figure:hover img { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.flyer-btn {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; position: relative; line-height: 0;
}
.flyer-zoom {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%);
  background: rgba(22,32,43,.82); color: #fff;
  font: 600 .78rem/1 var(--sans); letter-spacing: .04em;
  padding: .5rem .9rem; border-radius: 999px;
  opacity: 0; transition: opacity .22s;
  pointer-events: none;
}
.flyer-btn:hover .flyer-zoom, .flyer-btn:focus-visible .flyer-zoom { opacity: 1; }

/* ---------- three-up photo strip ----------
   One shared 4:3 frame so mixed source shapes still line up as a row. */
.photo-strip {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.photo-strip figure { margin: 0; }
.photo-strip img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 45%;
  border-radius: var(--radius); box-shadow: var(--shadow);
}


/* four-across variant of the photo strip (pantry row) */
/* two up, then two under — four across made each photo too small to read */
.photo-strip.four {
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 760px) {
  .photo-strip.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* an odd photo out sits centred under the pair, same size */
  .photo-strip.four figure:last-child:nth-child(odd) {
    grid-column: 1 / -1; justify-self: center; width: calc(50% - .75rem);
  }
}

/* ---------- wall of fame ---------- */
.wall { display: grid; gap: 1.25rem; max-width: 1100px; margin-inline: auto; }
.wall-row {
  display: grid; gap: 1rem; align-items: center;
  grid-template-columns: 1fr;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 9px solid var(--tier, var(--brand-mid));
  border-radius: var(--radius);
  padding: 1.6rem 1.9rem;
  /* tier colour washes out of the left edge; color-mix degrades to the plain
     surface colour on browsers that lack it, so nothing breaks */
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--tier, var(--brand-mid)) 13%, var(--surface)) 0%,
      var(--surface) 46%);
}
@media (min-width: 700px) { .wall-row { grid-template-columns: 300px 1fr; } }
.wall-tier {
  display: flex; align-items: center; gap: .95rem;
  background: color-mix(in srgb, var(--tier, var(--brand-mid)) 16%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--tier, var(--brand-mid)) 34%, var(--surface));
  border-radius: var(--radius-sm);
  padding: .85rem 1.05rem;
}
.wall-tier img { width: 82px; height: 82px; flex: none; }
.wall-tier > div { display: flex; flex-direction: column; line-height: 1.25; }
.wall-name { font-family: var(--display); font-size: 1.65rem; font-weight: 600;
  color: color-mix(in srgb, var(--tier, var(--brand-mid)) 55%, var(--ink)); }
.wall-amt { font-size: .95rem; font-weight: 700; letter-spacing: .01em;
  color: color-mix(in srgb, var(--tier, var(--brand-mid)) 45%, var(--muted)); }
.wall-slot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
/* sponsor logos are the point of this section — give them real room */
.wall-slot .logo-tile { aspect-ratio: auto; height: 230px; min-width: 340px; padding: 1.5rem 2rem; }
.wall-slot .logo-tile { flex-direction: column; gap: .7rem; }
/* ---------- Friends of Hope ----------
   A banner, then names only. `columns` reflows automatically, so six names or
   sixty lay out cleanly without the template changing. */
.friends-banner {
  display: flex; align-items: center; gap: 1.25rem;
  margin: 3rem 0 1.5rem;
  background: linear-gradient(90deg, var(--brand-light), var(--surface));
  border: 1px solid var(--line); border-left: 9px solid var(--brand);
  border-radius: var(--radius); padding: 1.5rem 1.9rem;
}
.friends-banner img { width: 72px; height: 72px; flex: none; }
.friends-banner h2 { margin-bottom: .3rem; }
.friends-banner p { color: var(--muted); margin: 0; }
.friends-memorial { text-align: center; font-family: var(--display); font-style: italic; font-size: 1.25rem; color: var(--brand); margin: 2.25rem 0 0; }
.friends-roll {
  list-style: none; margin: 0; padding: 0 .5rem;
  columns: 3 220px; column-gap: 2.5rem;
}
.friends-roll li {
  break-inside: avoid;
  font-family: var(--display); font-size: 1.15rem; font-weight: 600; color: var(--brand);
  padding: .55rem 0; border-bottom: 1px solid var(--line);
}
/* Friends of Hope: six entries, so the tiles step down from the sponsor size */
.wall-row.friends .wall-slot .logo-tile { height: 150px; min-width: 250px; padding: 1rem 1.3rem; flex: 1 1 250px; }
.wall-row.friends .wall-slot .logo-tile img { max-height: 92px; }
.wall-row.friends .wall-slot .logo-tile.name-plate span { font-size: 1.15rem; }
/* Friends of Hope: a roll of names, laid out as chips */
.friend-roll {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .6rem; align-content: center;
  min-height: 230px; align-items: center;
}
.friend-roll li {
  font-family: var(--display); font-size: 1.15rem; font-weight: 600; color: var(--brand);
  background: var(--brand-light); border: 1px solid var(--brand-mid);
  border-radius: 999px; padding: .55rem 1.1rem;
}
.wall-slot .logo-tile img { max-height: 150px; width: auto; }
.tile-cap {
  font-size: 1.12rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--brand); text-align: center;
}
.wall-slot .logo-tile.name-plate {
  display: grid; place-items: center; text-align: center;
  background: var(--brand-light); border-color: var(--brand-mid);
}
.wall-slot .logo-tile.name-plate span {
  font-family: var(--display); font-size: 1.45rem; font-weight: 600;
  color: var(--brand); line-height: 1.3; max-width: 15ch;
}
.wall-slot .logo-tile img { filter: none; opacity: 1; }
/* an open slot reads as an invitation, not as missing content */
.wall-slot.is-open {
  justify-content: space-between;
  border: 2px dashed var(--line);
  border-radius: var(--radius-sm);
  padding: 1.9rem 1.8rem;
  min-height: 230px;
  color: var(--muted);
}
.wall-slot.is-open span {
  font-size: 1.1rem; font-weight: 600; letter-spacing: .01em;
}
.wall-slot.is-open .btn { padding: .55rem 1rem; font-size: .84rem; }


/* ---------- LIHEAP detail card ----------
   Far more content than the other two partners, so it spans the row instead of
   stretching them to match its height. */
/* Exactly two columns. auto-fit with a 340px minimum fits THREE tracks at
   1140px, which left the two small partner cards hugging the left with an
   empty third column beside them. */
.partners-grid { grid-template-columns: 1fr; }
@media (min-width: 800px) { .partners-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.partner-wide { grid-column: 1 / -1; }
/* stand-in for a partner with no usable logo artwork */
.partner-logo.name-plate-lg {
  background: var(--brand-light); border-color: var(--brand-mid);
  display: grid; place-items: center; text-align: center;
}
.partner-logo.name-plate-lg span {
  font-family: var(--display); font-size: 1.3rem; font-weight: 600;
  color: var(--brand); line-height: 1.3;
}
.liheap-head { display: grid; gap: 1.25rem; align-items: start; margin-bottom: 1.75rem; }
@media (min-width: 700px) { .liheap-head { grid-template-columns: 240px 1fr; } }
.liheap-head h3 { margin-bottom: .5rem; }
.liheap-head p { color: var(--muted); margin-bottom: 0; }
.liheap-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 860px) { .liheap-grid { grid-template-columns: 1.35fr 1fr; } }
.liheap-grid h4 { margin-bottom: .75rem; }
.liheap-list { margin: 0; padding-left: 1.15em; display: grid; gap: .5rem; }
.liheap-list li { color: var(--muted); font-size: .97rem; }
.liheap-apply {
  background: var(--sunken); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.5rem 1.6rem;
}
.qr-block { margin: 1.5rem 0 0; text-align: center; }
.qr-block img {
  width: 170px; height: 170px; margin-inline: auto;
  background: #fff; padding: .6rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.qr-block figcaption {
  margin-top: .6rem; font-size: .84rem; font-weight: 600; color: var(--muted);
}

/* ---------- people (volunteers) ----------
   A roster, not an article feed: square headshots keep every card short so a
   whole section reads at a glance instead of scrolling past giant portraits. */
.person-grid {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
.person-grid.small {
  gap: 1.15rem;
  grid-template-columns: repeat(auto-fill, minmax(min(46%, 200px), 1fr));
}
.person .card-media.portrait { aspect-ratio: 1 / 1; }
.person .card-media img { object-position: center 20%; }
.person .card-body { padding: 1rem 1rem 1.15rem; text-align: center; }
.person h3 { font-size: 1.08rem; margin-bottom: .18rem; }
.person .card-more { padding-top: .35rem; font-size: .8rem; }
.person-grid.small .card-body { padding: .9rem .8rem 1.05rem; }
.person-grid.small h3 { font-size: 1.06rem; margin-bottom: 0; line-height: 1.25; }
/* on a dense roster the per-card link text is noise — the whole card is a link */
.person-grid.small .card-more { display: none; }
.person .role {
  color: var(--brand); font-weight: 600; font-size: .88rem;
  margin-bottom: 0; line-height: 1.3;
}

/* ---------- story filters ---------- */
.filters {
  display: flex; flex-wrap: wrap; gap: .55rem;
  margin-bottom: 1.25rem;
}
.chip {
  font: 600 .87rem/1 var(--sans);
  background: var(--surface); color: var(--body);
  border: 1.5px solid var(--line); border-radius: 999px;
  padding: .55rem 1rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: .45rem;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease);
}
.chip span {
  font-size: .74rem; font-weight: 700;
  background: var(--sunken); color: var(--muted);
  border-radius: 999px; padding: .1rem .42rem;
  transition: background-color .2s, color .2s;
}
.chip:hover { border-color: var(--brand-mid); color: var(--brand); transform: translateY(-1px); }
.chip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip.is-on span { background: rgba(255,255,255,.22); color: #fff; }
.filter-status { font-size: .87rem; margin: 0 0 1.75rem; }
.filter-empty { padding: 3rem 0; font-size: 1.05rem; }
.tag-row { display: flex; flex-wrap: wrap; gap: .3rem; margin: .1rem 0 .2rem; }
.tag-row .tag { font-size: .66rem; padding: .22rem .5rem; }
/* filtered-out cards leave the flow entirely so the grid reflows */
.post-card[hidden] { display: none !important; }

/* ---------- supporter logos ---------- */
.logo-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  align-items: stretch;
}
.logo-tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  aspect-ratio: 3 / 2; padding: 1.25rem;
  display: grid; place-items: center;
  transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.logo-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand-mid); }
.logo-tile img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(1); opacity: .72;
  transition: filter .3s, opacity .3s;
}
.logo-tile:hover img { filter: grayscale(0); opacity: 1; }
.logo-tile { position: relative; }
.tier-chip {
  position: absolute; top: .5rem; right: .5rem;
  font-size: .62rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  background: var(--brand-light); color: var(--brand);
  padding: .18rem .5rem; border-radius: 999px;
}
.supporter-names {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem;
  margin-top: 1.75rem; padding: 0; list-style: none;
}
.supporter-names li {
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: .45rem 1rem; font-size: .9rem; font-weight: 600; color: var(--body);
  transition: border-color .2s, color .2s, transform .2s var(--ease);
}
.supporter-names li:hover { border-color: var(--gold-dark); color: var(--brand); transform: translateY(-2px); }

/* ---------- partners ---------- */
/* minmax(0,1fr), not the implicit `auto`: an auto track sizes to max-content, so
   the logos' intrinsic width (870px on LIHEAP) blew the track past the card and
   .card{overflow:hidden} clipped the text. min-width:0 frees the children too. */
.partner {
  display: grid; gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}
.partner > * { min-width: 0; }
.partner-logo {
  /* explicit min-height, NOT aspect-ratio: a percentage height on the image
     cannot resolve against an aspect-ratio-derived box, so the image escaped
     its container and got clipped. Everything here is now in px. */
  min-height: 132px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  display: grid; place-items: center; padding: 1rem;
  width: 100%;
}
.partner-logo img {
  max-width: 100%; max-height: 100px;   /* px cap - no percentage to resolve */
  width: auto; height: auto; object-fit: contain;
}
/* long phone numbers and URLs must not push the card open either */
.partner .contact-line, .partner p { overflow-wrap: anywhere; }
.contact-line { font-size: .95rem; color: var(--muted); margin: 0; }
.contact-line strong { color: var(--ink); font-weight: 600; }

/* ---------- gallery ---------- */
.gallery { columns: 4 250px; column-gap: 1rem; }
.gallery figure { break-inside: avoid; margin: 0 0 1rem; }
.gallery button {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: var(--radius-sm); overflow: hidden; line-height: 0;
}
.gallery img { width: 100%; border-radius: var(--radius-sm); transition: transform .4s var(--ease), box-shadow .4s; background: var(--sunken); }
.gallery button:hover img { transform: scale(1.03); box-shadow: var(--shadow-lg); }

.lightbox {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(15,25,35,.95);
  display: none; place-items: center; padding: clamp(1rem, 4vw, 3rem);
}
.lightbox.open { display: grid; animation: fadeIn .2s ease; }
.lightbox img { max-width: 100%; max-height: 82vh; border-radius: var(--radius-sm); object-fit: contain; animation: popIn .28s var(--ease); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.lightbox-cap { color: rgba(255,255,255,.8); text-align: center; font-size: .9rem; margin-top: 1rem; }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute; background: rgba(255,255,255,.12); color: #fff;
  border: 1px solid rgba(255,255,255,.28); border-radius: 50%;
  width: 48px; height: 48px; cursor: pointer; font-size: 1.3rem; line-height: 1;
  display: grid; place-items: center; transition: background-color .2s, transform .2s var(--ease);
}
.lightbox-close { top: 1.25rem; right: 1.25rem; }
.lightbox-prev  { left: 1.25rem;  top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox-close:hover { background: rgba(255,255,255,.26); transform: scale(1.08); }
.lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,.26); }

/* ---------- CTA band / callout ---------- */
.cta-band { background: var(--brand-dark); color: #fff; text-align: center; position: relative; overflow: hidden; padding: clamp(2rem, 4vw, 3rem) 0; }
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% -20%, rgba(248,214,70,.16), transparent 62%);
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.86); font-size: 1.1rem; max-width: 56ch; margin-inline: auto; margin-bottom: 2rem; }
.cta-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

.callout {
  background: var(--gold-soft); border: 1px solid #F0E3B4; border-left: 4px solid var(--gold-dark);
  border-radius: var(--radius-sm); padding: 1.4rem 1.6rem;
}
.callout :last-child { margin-bottom: 0; }
.callout h4 { margin-bottom: .4rem; }

.info-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.2rem); }
.hours-row { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .96rem; }
.hours-row:last-child { border-bottom: 0; }
.hours-row dt { font-weight: 600; color: var(--ink); margin: 0; }
.hours-row dd { margin: 0; color: var(--muted); text-align: right; }
.hours-row.is-open { background: var(--gold-soft); border-radius: var(--radius-sm); padding-inline: .6rem; }
.hours-row.is-open dd { color: var(--brand); font-weight: 600; }
dl.hours { margin: 0; }

/* ---------- footer ---------- */
.site-footer { background: var(--brand-deep); color: rgba(255,255,255,.72); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; font-size: .95rem; }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin-bottom: 3rem; }
.site-footer h4 { color: #fff; font-family: var(--sans); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.1rem; font-weight: 700; }
.site-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.site-footer a:hover { color: var(--gold); text-decoration: underline; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.footer-brand { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.footer-brand img { width: 54px; height: 54px; }
.site-footer .brand-name { color: #fff; }
.site-footer .brand-sub { color: rgba(255,255,255,.55); }
.footer-about p { max-width: 34ch; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.13); padding-top: 1.75rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .87rem; color: rgba(255,255,255,.55);
}
.badge-501 {
  display: inline-block; margin-top: 1rem; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--gold-dark); color: var(--gold); border-radius: 999px; padding: .35rem .85rem;
}

/* ---------- scroll reveal ---------- */
.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* ---------- utilities ---------- */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.center { text-align: center; }
.lede { font-size: 1.16rem; color: var(--body); }
.muted { color: var(--muted); }
.stack > * + * { margin-top: 1rem; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero-media img { animation: none; transform: none; }
}

/* ---------- "The Latest News" on /stories/ ----------
   Each image keeps its own shape: two of the three are a sign and a flyer. */
.latest-news .grid-3 { align-items: start; }
.latest-media { background: var(--surface); border-bottom: 1px solid var(--line); }
.latest-media img { display: block; width: 100%; height: auto; }
.latest-news .card-body p + p { margin-top: .7rem; }
.latest-news .card-more { margin-top: 1rem; }