/* ============================================================
   HEART OF THE CITY FOUNDATION — site.css (layout + components)
   v1 2026-06-08 · React+Babel preview (NKG/CCI pattern)
   Warm grassroots register: cream field, generous spacing, candid type.
   Imports tokens from colors_and_type.css. Cream ~70% / burgundy ~18% /
   text ~7% / accent+logo-red ~5% (brand-foundation.md §1 volume rule).
   ============================================================ */
@import url('colors_and_type.css?v=v1-r18');

/* ── Layout primitives ─────────────────────────────────────── */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem);}
.container--narrow{max-width:var(--container-narrow);}
.section{padding-block:clamp(3rem,7vw,5.5rem);}
.section--tight{padding-block:clamp(2rem,5vw,3.5rem);}
.section--alt{background:var(--surface-alt);}
.section--white{background:var(--surface-white);}
.section--deep{background:linear-gradient(160deg,var(--primary-deep),var(--primary-hover));color:#fff;}
.section--deep h1,.section--deep h2,.section--deep h3{color:#fff;}
.section--deep .eyebrow{color:var(--eyebrow-on-deep);}
.section__head{max-width:62ch;margin-bottom:var(--sp-5);}
.section__head--center{margin-inline:auto;text-align:center;}
.lead{font-size:var(--fs-lead);color:var(--text);}
.muted{color:var(--text-muted);}
.center{text-align:center;}

/* ── Buttons ───────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-body);font-weight:600;font-size:1rem;line-height:1;
  padding:.85rem 1.5rem;border-radius:var(--radius-pill);border:2px solid transparent;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),transform 90ms var(--ease),box-shadow var(--dur) var(--ease);}
.btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px;}
.btn--primary{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:var(--shadow-sm);}
.btn--primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:#fff;box-shadow:var(--shadow-md);}
.btn--ghost{background:transparent;color:var(--primary);border-color:var(--primary);}
.btn--ghost:hover{background:var(--primary);color:#fff;}
.btn--on-deep{background:#fff;color:var(--primary-deep);border-color:#fff;}
.btn--on-deep:hover{background:var(--surface);color:var(--primary-deep);}
.btn--ghost-on-deep{background:rgba(61,8,8,.22);color:#fff;border-color:#fff;}
.btn--ghost-on-deep:hover{background:#fff;color:var(--primary-deep);border-color:#fff;}
.btn--lg{padding:1rem 1.9rem;font-size:1.06rem;}
/* Playful hover: lift + trailing-arrow nudge (arrow only on the 2 flagship CTAs
   that carry an <Icon name="arrow">). :active stays AFTER so the press wins. */
.btn:hover{transform:translateY(-2px);}
.btn svg{flex:0 0 auto;width:1.05em;height:1.05em;transition:transform var(--dur) var(--ease);}
.btn:hover svg{transform:translateX(3px);}
.btn:active{transform:translateY(1px) scale(.985);}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;}
.btn-row--center{justify-content:center;}

/* ── Header / nav (flat, sticky, cream) ────────────────────── */
.site-header{position:sticky;top:0;z-index:100;background:rgba(245,237,224,.92);
  backdrop-filter:saturate(1.1) blur(8px);border-bottom:1px solid var(--border);}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);min-height:var(--nav-h);}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;flex:0 0 auto;}
.brand__img{display:block;height:50px;width:auto;}
.brand:focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px;border-radius:6px;}
.nav{display:flex;align-items:center;gap:var(--sp-4);}
.nav__list{display:flex;align-items:center;gap:clamp(.5rem,1.6vw,1.4rem);list-style:none;margin:0;padding:0;}
.nav__link{font-family:var(--font-body);font-weight:600;font-size:.98rem;color:var(--text);
  text-decoration:none;padding:.4rem .2rem;border-bottom:2px solid transparent;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);}
.nav__link:hover{color:var(--primary);}
.nav__link[aria-current="page"]{color:var(--primary);border-bottom-color:var(--accent);}
.nav__cta{margin-left:.3rem;}
.nav__toggle{display:none;}

/* Hamburger (mobile) */
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;padding:10px;background:transparent;border:0;cursor:pointer;border-radius:10px;}
.hamburger:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;}
.hamburger span{display:block;height:2.5px;width:100%;background:var(--primary-deep);border-radius:2px;
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease),background-color var(--dur) var(--ease);}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;background-color:transparent;}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

@media (max-width:880px){
  .hamburger{display:flex;}
  .nav{position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--surface-white);border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-lg);padding:var(--sp-3) clamp(1.1rem,4vw,2rem) var(--sp-4);
    transform:translateY(-12px);opacity:0;visibility:hidden;
    transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease),visibility var(--dur);}
  .nav.is-open{transform:none;opacity:1;visibility:visible;}
  .nav__list{flex-direction:column;align-items:stretch;gap:0;width:100%;}
  .nav__link{display:block;padding:.95rem .25rem;border-bottom:1px solid var(--border);border-bottom-width:1px;}
  .nav__link[aria-current="page"]{border-bottom-color:var(--border);color:var(--primary);}
  .nav__cta{margin:var(--sp-3) 0 0;align-self:flex-start;}
}

/* ── Hero (image-overlay; CCI v1.7 pattern) ────────────────── */
.hero{position:relative;overflow:hidden;background:var(--primary-deep);}
.hero--media{display:flex;align-items:center;
  min-height:clamp(520px,76vh,760px);}
.hero__bg{position:absolute;inset:0;z-index:0;display:block;}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;display:block;}
/* Burgundy scrim: heavy on the left/bottom text column so white text clears
   WCAG 4.5:1 even over the photo's bright areas (matches CCI's 78–86% wash),
   fading to reveal the photo at the top-right. Verified ≥4.5:1 by pixel sample. */
.hero__overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(180deg,rgba(61,8,8,.50) 0%,rgba(61,8,8,.60) 45%,rgba(61,8,8,.88) 100%),
  linear-gradient(90deg,rgba(61,8,8,.80) 0%,rgba(61,8,8,.62) 42%,rgba(61,8,8,.30) 72%,rgba(61,8,8,0) 100%);}
.hero__inner{position:relative;z-index:2;
  padding-block:clamp(3.4rem,9vw,6rem);max-width:46rem;}
.hero--media h1{color:#fff;margin-bottom:var(--sp-3);
  text-shadow:0 2px 18px rgba(0,0,0,.28);}
.hero--media .hero__sub{font-size:clamp(1.1rem,1rem + .6vw,1.32rem);
  color:rgba(255,255,255,.94);max-width:40rem;margin-bottom:var(--sp-5);
  text-shadow:0 1px 12px rgba(0,0,0,.3);}
.eyebrow--on-media{color:var(--eyebrow-on-deep);text-shadow:0 1px 10px rgba(0,0,0,.3);}
.hero .btn-row{margin-top:var(--sp-2);}
/* Hero entrance (home media hero): eyebrow + sub + CTA rise on first paint. The
   <h1> is the LCP element and is deliberately NOT animated (no opacity:0 — that
   would defer LCP). reduced-motion collapses this via the global * animation
   reset in colors_and_type.css; `both` holds the visible end state. */
@keyframes hero-rise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
.js .hero--media .eyebrow--on-media,
.js .hero--media .hero__sub,
.js .hero--media .btn-row{animation:hero-rise .5s var(--ease) both;}
.js .hero--media .eyebrow--on-media{animation-delay:.05s;}
.js .hero--media .hero__sub{animation-delay:.18s;}
.js .hero--media .btn-row{animation-delay:.30s;}

/* ── Cards + grids ─────────────────────────────────────────── */
.grid{display:grid;gap:var(--sp-4);}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:860px){.grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr;}}

.card{background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-4);box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.card--hover:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.card__icon{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;
  background:rgba(141,27,27,.08);color:var(--primary);margin-bottom:var(--sp-3);}
.card__icon svg{width:24px;height:24px;}
.card h3{margin-bottom:.4rem;}
.card__meta{font-size:var(--fs-small);color:var(--text-muted);font-weight:600;
  letter-spacing:.02em;text-transform:uppercase;margin-bottom:.4rem;}

/* ── Impact stats (every figure sourced-or-labeled) ────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-4);}
.stat{text-align:center;}
/* Balanced impact band (Home 7-stat set): center-wrapped flex so an odd count
   splits into even, centered rows (4+3) instead of stranding a lone left item. */
.stats--balance{display:flex;flex-wrap:wrap;justify-content:center;}
.stats--balance .stat{flex:0 1 calc(25% - var(--sp-4));min-width:150px;}
.stats--left{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));}
.stats--left .stat{text-align:left;}
.stat__num{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,1.4rem + 2vw,2.8rem);
  color:var(--primary);line-height:1;display:block;font-variant-numeric:tabular-nums;}
.stat__label{font-size:var(--fs-small);color:var(--text-muted);margin-top:.4rem;display:block;}

/* ── Leadership (named-but-minimized; releases-gated) ──────── */
.leaders{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-4);}
.leader{background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-4);text-align:center;}
.leader__avatar{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;margin:0 auto var(--sp-3);
  background:rgba(141,27,27,.10);color:var(--primary);font-family:var(--font-display);font-weight:600;font-size:1.6rem;}
.leader__name{font-family:var(--font-display);font-weight:600;font-size:1.2rem;color:var(--primary-deep);margin:0;}
.leader__role{font-size:var(--fs-small);font-weight:600;color:var(--primary);text-transform:uppercase;letter-spacing:.04em;margin:.2rem 0 .6rem;}
.leader__bio{font-size:var(--fs-small);color:var(--text-muted);}

/* ── Notice / disclosure banners ───────────────────────────── */
.notice{border:1px solid var(--border);border-left:4px solid var(--accent);
  background:var(--surface-card);border-radius:var(--radius);padding:var(--sp-3) var(--sp-4);
  font-size:var(--fs-small);color:var(--text-muted);}
.notice strong{color:var(--text);}

/* ── Event list ────────────────────────────────────────────── */
.event{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-4);padding:var(--sp-4) 0;border-bottom:1px solid var(--border);}
.event:last-child{border-bottom:0;}
.event__date{font-family:var(--font-display);font-weight:600;color:var(--primary);font-size:.95rem;white-space:nowrap;}
.event h3{margin-bottom:.3rem;}
@media (max-width:560px){.event{grid-template-columns:1fr;gap:var(--sp-2);}}

/* ── Media figures (real community photography; EXIF-stripped) ──
   4:3 aspect frame reserves space → CLS 0 even before the image paints.
   Object-fit cover lets mixed source ratios share one clean frame. */
.figure{margin:0;}
.figure__media{position:relative;overflow:hidden;aspect-ratio:4/3;
  border-radius:var(--radius-lg);border:1px solid var(--border);
  box-shadow:var(--shadow-sm);background:var(--surface-alt);}
.figure__media picture{display:block;width:100%;height:100%;}
.figure__media img{display:block;width:100%;height:100%;object-fit:cover;}
.figure__cap{font-size:var(--fs-small);color:var(--text-muted);
  margin-top:.6rem;line-height:1.45;max-width:60ch;}

/* Signature photo band (home) — wider, softer-framed feature image */
.photo-band{max-width:var(--container-narrow);margin-inline:auto;}
.photo-band .figure__media{aspect-ratio:16/10;box-shadow:var(--shadow-md);}
.photo-band .figure__cap{text-align:center;margin-inline:auto;}

/* Photo strip (programs) — 3-up of program moments */
.photo-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);}
@media (max-width:780px){.photo-strip{grid-template-columns:1fr;max-width:30rem;margin-inline:auto;}}

/* Event row thumbnail — modest, left-aligned under the event text */
.event__media{margin-top:var(--sp-3);max-width:360px;}

/* ── Events — alternating image/text feature rows ──────────── */
.feature-rows{display:grid;gap:clamp(2.5rem,6vw,var(--sp-7));overflow:hidden;}
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,var(--sp-6));align-items:center;}
.feature-row--rev .feature-row__media{order:2;}
.feature-row__body .event__date{display:inline-block;margin-bottom:.6rem;
  background:rgba(141,27,27,.08);color:var(--primary);border-radius:var(--radius-pill);
  padding:.3rem .9rem;font-size:var(--fs-small);}
.feature-row__body h2{margin-bottom:var(--sp-2);}
@media (max-width:760px){
  .feature-row{grid-template-columns:1fr;gap:var(--sp-4);}
  .feature-row--rev .feature-row__media{order:0;}
}

/* ── Partners row ──────────────────────────────────────────── */
.partners{display:flex;flex-wrap:wrap;gap:var(--sp-3);}
.partner-chip{background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-pill);
  padding:.55rem 1.1rem;font-size:var(--fs-small);font-weight:600;color:var(--text);}

/* ── Forms ─────────────────────────────────────────────────── */
.form{display:grid;gap:var(--sp-3);max-width:640px;}
.form--wide{max-width:none;}
.field{display:flex;flex-direction:column;gap:.35rem;}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);}
@media (max-width:560px){.field--row{grid-template-columns:1fr;}}
.field label{font-weight:600;font-size:.95rem;color:var(--text);}
.field .req{color:var(--primary);}
.field input,.field select,.field textarea{font-family:var(--font-body);font-size:1rem;color:var(--text);
  background:var(--surface-white);border:1.5px solid var(--border);border-radius:var(--radius);
  padding:.7rem .85rem;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(141,27,27,.14);}
.field textarea{min-height:120px;resize:vertical;}
.field__hint{font-size:var(--fs-small);color:var(--text-muted);}
.form__note{font-size:var(--fs-small);color:var(--text-muted);}

/* ── Donate (placeholder, no live path) ────────────────────── */
.give-levels{display:flex;flex-wrap:wrap;gap:.7rem;margin-block:var(--sp-3);}
.give-amt{background:var(--surface-card);border:1.5px solid var(--border);border-radius:var(--radius);
  padding:.7rem 1.2rem;font-weight:600;color:var(--text);}
.give-amt--custom{border-style:dashed;}
.placeholder-box{border:2px dashed var(--accent);border-radius:var(--radius-lg);background:var(--surface-card);
  padding:var(--sp-5);text-align:center;color:var(--text-muted);}
.placeholder-box svg{width:52px;height:52px;color:var(--accent);margin-bottom:var(--sp-2);}
.placeholder-box h3{color:var(--primary-deep);}
.placeholder-box p{max-width:46ch;margin-inline:auto;}

/* ── Footer (burgundy gradient band) ───────────────────────── */
.site-footer{background:linear-gradient(160deg,var(--primary-deep),var(--primary-hover));color:rgba(255,255,255,.86);}
.site-footer a{color:#fff;text-decoration-color:rgba(255,255,255,.45);}
.site-footer a:hover{color:#fff;text-decoration-color:#fff;}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--sp-5);padding-block:var(--sp-6);}
@media (max-width:940px){.footer__grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer__grid{grid-template-columns:1fr;gap:var(--sp-4);}}
.footer__brand-img{height:64px;width:auto;margin-bottom:var(--sp-3);}
.site-footer h3{color:#fff;font-size:1.05rem;margin-bottom:var(--sp-2);}
.footer__col ul{list-style:none;margin:0;padding:0;}
.footer__col li{margin-bottom:.5rem;}
.footer__social{display:flex;gap:.7rem;margin-top:var(--sp-2);}
.footer__social a{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;
  background:rgba(255,255,255,.12);transition:background var(--dur) var(--ease);}
.footer__social a:hover{background:rgba(255,255,255,.24);}
.footer__social svg{width:20px;height:20px;fill:#fff;}
.footer__bottom{border-top:1px solid rgba(255,255,255,.18);padding-block:var(--sp-3);
  display:flex;flex-wrap:wrap;gap:.6rem var(--sp-4);justify-content:space-between;
  font-size:var(--fs-small);color:rgba(255,255,255,.72);}
.footer__disclosure{font-size:var(--fs-small);color:rgba(255,255,255,.72);margin-top:var(--sp-3);max-width:60ch;}

/* ── CTA band (above footer) ───────────────────────────────── */
.cta-band{background:var(--surface-alt);}
.cta-band__inner{text-align:center;padding-block:clamp(2.6rem,6vw,4.2rem);}
.cta-band h2{margin-bottom:var(--sp-2);}
.cta-band p{max-width:46ch;margin-inline:auto;margin-bottom:var(--sp-4);color:var(--text);}

/* ── Prose blocks ──────────────────────────────────────────── */
.prose{max-width:68ch;}
.prose h2{margin-top:var(--sp-5);}
.prose h3{margin-top:var(--sp-4);}
.checklist{list-style:none;padding:0;margin:0 0 1rem;}
.checklist li{position:relative;padding-left:1.9rem;margin-bottom:.6rem;}
.checklist li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:14px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 3px rgba(200,74,74,.18);}

/* ── 404 ───────────────────────────────────────────────────── */
.notfound{text-align:center;padding-block:clamp(4rem,12vw,8rem);}

/* ── Gallery (event-grouped, lazy thumbnail grid) ──────────────
   Aspect-framed square cells reserve space → CLS 0 before paint.
   Thumbs are lazy WebP+JPG (~760px); the lightbox loads a ~1400px full. */
.gallery-head{max-width:62ch;margin-bottom:var(--sp-4);}
.event__date--pill{display:inline-block;margin-bottom:.6rem;background:rgba(141,27,27,.08);
  color:var(--primary);border-radius:var(--radius-pill);padding:.3rem .9rem;font-size:var(--fs-small);}
.gallery-head h2{margin-bottom:var(--sp-2);}
.gallery-grid{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3);
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
@media (max-width:540px){.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:var(--sp-2);}}
.g-item{margin:0;}
.g-item__btn{display:block;width:100%;padding:0;position:relative;aspect-ratio:1/1;
  border:1px solid var(--border);background:var(--surface-alt);border-radius:var(--radius-lg);
  overflow:hidden;cursor:zoom-in;box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.g-item__btn picture{display:block;width:100%;height:100%;}
.g-item__btn img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease);}
.g-item__btn::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(61,8,8,0) 58%,rgba(61,8,8,.30));
  opacity:0;transition:opacity var(--dur) var(--ease);}
.g-item__btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.g-item__btn:hover img{transform:scale(1.05);}
.g-item__btn:hover::after{opacity:1;}
.g-item__btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px;}

/* ── Lightbox (no-dependency, accessible dialog) ───────────────
   role=dialog + aria-modal in JSX; focus-trapped; ESC / backdrop / ✕ close;
   ← → page. CSS-only entrance so the global reduced-motion rule neutralizes it. */
.lightbox{position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  padding:clamp(1rem,4vw,2.5rem);background:rgba(26,8,8,.86);backdrop-filter:blur(4px);
  cursor:zoom-out;animation:lb-fade .2s var(--ease);}
.lightbox__dialog{position:relative;display:flex;align-items:center;gap:clamp(.35rem,2vw,1rem);
  max-width:min(96vw,1180px);cursor:auto;animation:lb-rise .24s var(--ease);}
.lightbox__figure{margin:0;display:flex;flex-direction:column;align-items:center;min-width:0;}
.lightbox__img{display:block;max-width:100%;max-height:80vh;width:auto;height:auto;object-fit:contain;
  border-radius:var(--radius);box-shadow:0 18px 50px rgba(0,0,0,.5);background:var(--surface-alt);}
.lightbox__cap{display:flex;justify-content:space-between;gap:var(--sp-4);width:100%;
  margin-top:.8rem;color:rgba(255,255,255,.86);font-size:var(--fs-small);}
.lightbox__event{font-weight:600;}
.lightbox__count{color:rgba(255,255,255,.62);white-space:nowrap;}
.lightbox__close{position:absolute;top:.4rem;right:.4rem;z-index:3;width:44px;height:44px;
  display:grid;place-items:center;background:rgba(20,6,6,.55);border:0;border-radius:50%;
  color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;transition:background var(--dur) var(--ease);}
.lightbox__close:hover{background:rgba(20,6,6,.8);}
.lightbox__nav{flex:0 0 auto;width:48px;height:48px;display:grid;place-items:center;
  background:rgba(255,255,255,.14);border:0;border-radius:50%;color:#fff;cursor:pointer;
  transition:background var(--dur) var(--ease);}
.lightbox__nav:hover{background:rgba(255,255,255,.30);}
.lightbox__nav svg{width:24px;height:24px;}
.lightbox__nav--prev svg{transform:scaleX(-1);}
.lightbox__close:focus-visible,.lightbox__nav:focus-visible{outline:3px solid #fff;outline-offset:2px;}
@keyframes lb-fade{from{opacity:0;}to{opacity:1;}}
@keyframes lb-rise{from{opacity:0;transform:translateY(10px) scale(.985);}to{opacity:1;transform:none;}}
@media (max-width:600px){
  .lightbox__nav{width:42px;height:42px;}
  .lightbox__img{max-height:66vh;}
  .lightbox__cap{flex-direction:column;gap:.2rem;align-items:flex-start;}
}

/* ── Scroll-reveal (IO-gated; shared app JS; reduced-motion-safe) ──
   Gated on .js (set by pre-React inline script) so no-JS users never
   see opacity:0. app.jsx sets up the IntersectionObserver (threshold 0,
   per-route) + a reduced-motion immediate-reveal + 2.5s failsafe.
   Refs: feedback_scroll_reveal_shared_js_not_per_page,
   feedback_scroll_reveal_io_threshold_tall_sections. */
.js .reveal{opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
  transition-delay:calc(var(--i,0) * 70ms);}
.js .reveal.is-revealed{opacity:1;transform:none;}
/* Directional reveal modifiers — events feature rows slide in from alternating
   sides (image one way, text the other). Mobile reverts to a vertical rise so a
   horizontal slide can't spawn a scrollbar; .feature-rows{overflow:hidden} clips
   the off-position during the .55s transition. */
.js .reveal--left{transform:translateX(-24px);}
.js .reveal--right{transform:translateX(24px);}
.js .reveal--left.is-revealed,.js .reveal--right.is-revealed{transform:none;}
@media (max-width:760px){
  .js .reveal--left,.js .reveal--right{transform:translateY(14px);}
  .js .reveal--left.is-revealed,.js .reveal--right.is-revealed{transform:none;}
}
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .reveal.is-revealed,
  .js .reveal--left,.js .reveal--right{opacity:1!important;transform:none!important;}
}
/* Route cross-fade — page subtree fades in on client-side navigation. app.jsx
   skips the initial mount (mounted-ref) so this never gates the cold-load LCP. */
@keyframes route-fade{from{opacity:0;}to{opacity:1;}}
.route-fade{animation:route-fade .22s var(--ease) both;}
@media (prefers-reduced-motion:reduce){.route-fade{animation:none!important;}}

/* ── Impact band note + per-event Community Impact (edits #1/#3/#5) ─────────── */
.stats__note{font-size:var(--fs-small);color:var(--text-muted);margin-top:var(--sp-3);text-align:center;}
.stats--left + .stats__note{text-align:left;}
.impact{margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--border);}
.impact__label{font-size:var(--fs-small);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--primary);margin:0 0 .5rem;}
.impact__list{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;}
.impact__list li{position:relative;padding-left:1.5rem;font-size:var(--fs-small);color:var(--text-muted);}
.impact__list li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;
  background:var(--accent);}

/* ── Pathways flagship: deep-section text overrides + Learn→Connect→Serve→Inspire timeline (#6) ── */
.section--deep .lead{color:rgba(255,255,255,.95);}
.section--deep .muted{color:rgba(255,255,255,.82);}
.section--deep .stat__num{color:#fff;}
.section--deep .stat__label{color:rgba(255,255,255,.82);}
.section--deep .stats__note{color:rgba(255,255,255,.72);}
.section--deep .checklist li::before{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.20);}
.timeline{list-style:none;margin:var(--sp-6) 0 0;padding:0;display:grid;gap:var(--sp-4);
  grid-template-columns:repeat(4,minmax(0,1fr));}
.timeline__step{position:relative;padding-top:var(--sp-4);}
.timeline__step::before{content:"";position:absolute;left:0;right:0;top:21px;height:2px;
  background:rgba(255,255,255,.28);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease) calc(var(--i,0) * 70ms);}
.timeline__step.is-revealed::before{transform:scaleX(1);}
.timeline__step:first-child::before{left:50%;}
.timeline__step:last-child::before{right:50%;}
.timeline__num{position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;
  margin-bottom:var(--sp-2);border-radius:50%;background:var(--surface-white);color:var(--primary-deep);
  font-family:var(--font-display);font-weight:700;font-size:1.2rem;}
.timeline__step h3{margin:0 0 .3rem;font-size:1.1rem;}
.timeline__step p{margin:0;font-size:var(--fs-small);color:rgba(255,255,255,.82);}
@media (max-width:760px){
  .timeline{grid-template-columns:1fr;gap:var(--sp-3);}
  .timeline__step{padding-top:0;padding-left:var(--sp-5);min-height:44px;}
  .timeline__step::before{left:21px;right:auto;top:0;bottom:0;width:2px;height:auto;
    transform:scaleY(0);transform-origin:top;}
  .timeline__step.is-revealed::before{transform:scaleY(1);}
  .timeline__step:first-child::before{top:0;left:21px;}
  .timeline__step:last-child::before{bottom:50%;right:auto;left:21px;}
  .timeline__num{position:absolute;left:0;top:0;}
}

/* Connector draw collapses to a fully-drawn line under reduced-motion. */
@media (prefers-reduced-motion:reduce){
  .timeline__step::before{transform:none!important;}
}

/* ── Footer 4th column "Serving Kern County Through" (edit #8) ──────────────── */
.footer__col--plain{list-style:none;margin:0;padding:0;}
.footer__col--plain li{color:rgba(255,255,255,.86);margin-bottom:.5rem;}

/* ── Page-head hero (opt-in faint photo; CCI recipe, r17) ────
   PageHead image= renders a .hero__bg behind a cream wash. The wrapper must be
   position:relative + min-height so the absolute bg has a box; content sits above.
   Where the type sits the wash is ~cream, so contrast matches the plain heads. */
.page-hero{position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(320px,42vh,440px);display:flex;align-items:center;}
.page-hero .hero__bg{position:absolute;inset:0;z-index:0;display:block;}
.page-hero .hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;}
/* Cream wash — heaviest at top (behind eyebrow/h1), easing toward the base so the
   students stay visible. Cream tokens only, zero blue. ≥4.5:1 pixel-verified. */
.page-hero__wash{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(180deg,rgba(245,237,224,.94) 0%,rgba(245,237,224,.88) 52%,rgba(245,237,224,.80) 100%);}
.page-hero .container{position:relative;z-index:2;}
/* Over the faint photo the muted sub dips to ~4.4:1 on the brightest patches; use
   full charcoal here (keeps the wash light so students stay visible). Pixel-verified. */
.page-hero .section__head .lead{color:var(--text);}

/* Portrait figure (symposium attendee) — default .figure__media is 4/3, which would
   crop a portrait; 2/3 matches the 1024×1536 source with no crop. */
.figure--portrait{max-width:400px;margin-inline:auto;}
.figure--portrait .figure__media{aspect-ratio:2/3;}
.section--deep .figure__cap{color:rgba(255,255,255,.82);}

/* In-page jump link (Events → symposium), SPA-safe (JS scroll, not a bare #anchor). */
.jumplink{display:inline-block;font-weight:600;color:var(--primary);
  text-decoration:underline;text-underline-offset:3px;}
.jumplink:hover{color:var(--primary-hover);}
/* Offset the jump target below the sticky header so the heading isn't tucked under it. */
#symposium{scroll-margin-top:calc(var(--nav-h) + 1rem);}

/* ── Home hero ambient depth (Ken-Burns, r17) ───────────────
   Very slow compositor-only scale+drift so the media hero feels dimensional
   without WebGL. Transform-only → no CLS, never gates LCP (the <img> paints, then
   transforms). Baseline scale ≥1.06 so the drift never reveals the section edge.
   reduced-motion / Save-Data / off-screen → static (Canon §A-10 / §A-11). */
@keyframes hero-kenburns{
  0%{transform:scale(1.06) translate3d(0,0,0);}
  100%{transform:scale(1.12) translate3d(-1.2%,-1.4%,0);}
}
.js .hero--media .hero__bg img{animation:hero-kenburns 28s ease-in-out alternate infinite;}
.hero--media.is-motion-paused .hero__bg img{animation-play-state:paused;}
.hero--media.hero--no-motion .hero__bg img{animation:none;transform:scale(1.06);}
@media (prefers-reduced-motion: reduce){
  .js .hero--media .hero__bg img{animation:none;transform:scale(1.06);}
}