/* ============================================================
   Spokane Slavic Association — design system
   Palette sampled from the new logo pack: deep navy, burgundy
   crimson, warm silver. Navy dominates; crimson is used as a
   hairline accent only, so the page never reads as a tricolour.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  /* colour */
  --ink:        #0B1729;   /* deepest navy — footer ground */
  --navy:       #10243F;   /* primary navy — hero, chapters */
  --navy-2:     #17324F;   /* raised navy surfaces */
  --navy-soft:  #2C5480;   /* interactive navy */
  --crimson:    #96182B;   /* logo red — accent, sparing */
  --crimson-lt: #B72A40;   /* hover */
  --rose:       #D9788A;   /* crimson lightened for display type on navy */
  --rose-lt:    #E7A9B2;   /* crimson lightened for small labels on navy */
  --silver:     #8C8B83;   /* warm silver from the logo — marks, dots, rules */
  --silver-tx:  #6B6A63;   /* the same warm grey darkened enough to set text in */
  --stone:      #F1F0EC;   /* warm-neutral band */
  --stone-2:    #E4E2DC;   /* hairlines on stone */
  --mist:       #E6EEF5;   /* cool navy-tinted band — alternates with stone so
                              banded sections read as 3 tones (paper/stone/mist),
                              not two nearly-identical off-whites */
  --mist-2:     #D3E0EC;   /* hairlines on mist */
  --paper:      #FFFFFF;

  --text:       #16233A;
  --text-mid:   #4E5B70;
  --text-light: rgba(255,255,255,.74);
  --rule:       #E1DFD9;

  /* type */
  --display: "Spectral", Georgia, "Times New Roman", serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* space + measure */
  --head-h: 72px;
  --shell: 1240px;
  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --chapter: clamp(4.5rem, 9vw, 8.5rem);

  /* motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .5s;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--head-h) + 1rem);
  overflow-x:clip;
}
html.is-locked{overflow:hidden}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font:400 clamp(1rem,.97rem + .18vw,1.0625rem)/1.65 var(--body);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,p,dl,dd,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}

:focus-visible{outline:2px solid var(--crimson-lt);outline-offset:3px;border-radius:2px}
.slavs :focus-visible,.visit :focus-visible,.hero :focus-visible,.foot :focus-visible{outline-color:#fff}

.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{
  position:fixed;top:.5rem;left:.5rem;z-index:200;
  transform:translateY(-200%);
  background:var(--navy);color:#fff;padding:.7rem 1.1rem;
  font:500 .8rem var(--mono);text-decoration:none;
}
.skip:focus{transform:none}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}

/* ============================================================
   TYPE PRIMITIVES
   ============================================================ */
.eyebrow{
  font:500 .6875rem/1 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--crimson);
  display:flex;align-items:center;gap:.6em;flex-wrap:wrap;
  margin-bottom:1.4rem;
}
.eyebrow--light{color:rgba(255,255,255,.68)}
.eyebrow__dot{color:var(--silver);opacity:.7}
.eyebrow--light .eyebrow__dot{color:var(--rose-lt);opacity:1}

.h2{
  font:500 clamp(2rem,1.35rem + 2.6vw,3.35rem)/1.08 var(--display);
  letter-spacing:-.02em;
  color:var(--navy);
  max-width:22ch;
  text-wrap:balance;
}
.h2 em{font-style:italic;color:var(--crimson);font-weight:400}
.h2--light{color:#fff}
.h2--light em{color:var(--rose)}

.lead{
  font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);
  line-height:1.55;color:var(--text-mid);
}
/* scope the light-on-navy body colour to the navy columns only — the hours
   card is a white surface sitting inside .visit and must stay dark */
.slavs__copy p,.visit__note{color:var(--text-light)}

/* ---------- buttons ---------- */
.btn{
  --bh:3.25rem;
  display:inline-flex;align-items:center;gap:.6em;
  min-height:var(--bh);padding:0 1.5rem;
  font:500 .8125rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;border-radius:2px;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),transform .25s var(--ease);
}
.btn--sm{--bh:2.5rem;padding:0 1.05rem;font-size:.75rem}
.btn--solid{background:var(--crimson);color:#fff}
.btn--solid:hover{background:var(--crimson-lt);transform:translateY(-2px)}
.btn--ghost{border:1px solid var(--navy);color:var(--navy)}
.btn--ghost:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}
.btn--light{border:1px solid rgba(255,255,255,.4);color:#fff}
.btn--light:hover{background:#fff;color:var(--navy);border-color:#fff;transform:translateY(-2px)}
/* press feedback — a brief settle on click, distinct from the hover lift */
.btn:active{transform:translateY(0) scale(.97);transition-duration:.12s}

/* Loading state — a real full-page form submission (e.g. donate.blade.php's
   Stripe Checkout redirect) leaves the page looking frozen for however long
   the server takes to respond, with no browser chrome obvious enough on
   mobile to reassure the tap registered. Disabling + spinning the button
   immediately on submit closes that gap; currentColor means one spinner
   works on every .btn variant with no extra color rules needed. */
.btn:disabled{opacity:.7;cursor:not-allowed;transform:none}
.btn__spinner{
  width:1em;height:1em;border-radius:50%;flex:none;
  border:2px solid currentColor;border-right-color:transparent;
  animation:btn-spin .6s linear infinite;
}
@keyframes btn-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  .btn__spinner{animation-duration:1.4s}
}

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--rule);
  transition:box-shadow .4s var(--ease);
}
.masthead.is-stuck{box-shadow:0 8px 30px -18px rgba(11,23,41,.5)}
.masthead__inner{
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);
  min-height:var(--head-h);
}

/* brand — the 2026 wordmark, trimmed and exported by tools/make-logos.py.
   It is one horizontal lockup at 7.16:1 (the crimson A is shared between
   "SSA" and "Association"), so it cannot be split into a compact mark; the
   whole thing just scales down and stays legible to about 20px. */
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand img{height:40px;width:auto}

.nav{margin-inline-start:auto}
.nav__list{display:flex;gap:clamp(.85rem,1.5vw,1.5rem)}
.nav__list a{
  position:relative;display:block;padding:.4rem 0;
  font-size:.875rem;font-weight:500;text-decoration:none;color:var(--text);
  white-space:nowrap;
  transition:color .3s var(--ease);
}
.nav__list a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--crimson);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav__list a:hover{color:var(--crimson)}
.nav__list a:hover::after{transform:scaleX(1)}

/* ---------- nav items that own a submenu ---------- */
.nav__has{position:relative}
.nav__row{display:flex;align-items:center;gap:.28rem}

.nav__toggle{
  display:grid;place-items:center;
  width:18px;height:18px;color:var(--text-mid);
  transition:color .3s var(--ease),transform .3s var(--ease);
}
.nav__toggle svg{width:9px;height:auto}
.nav__has:hover .nav__toggle,
.nav__has.is-open .nav__toggle{color:var(--crimson)}
.nav__has.is-open .nav__toggle{transform:rotate(180deg)}

.nav__subWrap{
  position:absolute;top:calc(100% + .55rem);left:-1rem;z-index:130;
  min-width:16rem;padding:.35rem;
  background:var(--paper);
  border:1px solid var(--rule);border-radius:3px;
  box-shadow:0 24px 46px -24px rgba(11,23,41,.34);
  opacity:0;transform:translateY(-6px);
  visibility:hidden;pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s var(--ease);
}
.nav__has.is-open .nav__subWrap{opacity:1;transform:none;visibility:visible;pointer-events:auto}

/* a hover bridge so the pointer can cross the gap without the panel closing */
.nav__has::after{
  content:"";position:absolute;top:100%;left:0;right:0;height:.55rem;
}

.nav__sub a{
  display:block;padding:.6rem .7rem;border-radius:2px;
  font-size:.875rem;font-weight:400;line-height:1.35;color:var(--navy);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.nav__sub a::after{display:none}
.nav__sub a:hover{background:var(--stone);color:var(--crimson)}

.masthead__tools{display:flex;align-items:center;gap:.75rem;flex:none}

/* ---------- language dropdown ---------- */
.lang{position:relative;flex:none}

.lang__btn{
  display:flex;align-items:center;gap:.4rem;
  height:2.5rem;padding:0 .6rem;
  border:1px solid var(--rule);border-radius:2px;
  font:500 .6875rem/1 var(--mono);letter-spacing:.06em;
  color:var(--navy);
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.lang__btn:hover{background:var(--stone);border-color:var(--silver)}
.lang__btn[aria-expanded="true"]{background:var(--stone);border-color:var(--silver)}

.lang__globe{
  width:14px;height:14px;flex:none;
  fill:none;stroke:var(--silver-tx);stroke-width:1.1;
  transition:stroke .3s var(--ease);
}
.lang__btn:hover .lang__globe,
.lang__btn[aria-expanded="true"] .lang__globe{stroke:var(--crimson)}

.lang__cur{min-width:2.1em;text-align:left}

.lang__caret{
  width:7px;height:7px;flex:none;margin-left:.05rem;
  border-right:1.5px solid var(--silver-tx);
  border-bottom:1.5px solid var(--silver-tx);
  transform:translateY(-2px) rotate(45deg);
  transition:transform .35s var(--ease),border-color .3s var(--ease);
}
.lang__btn[aria-expanded="true"] .lang__caret{
  transform:translateY(1px) rotate(-135deg);
  border-color:var(--crimson);
}

.lang__menu{
  position:absolute;top:calc(100% + .45rem);right:0;z-index:120;
  min-width:11.5rem;
  background:var(--paper);
  border:1px solid var(--rule);border-radius:3px;
  box-shadow:0 22px 44px -22px rgba(11,23,41,.34);
  padding:.3rem;
  animation:langIn .22s var(--ease) both;
}
.lang__menu[hidden]{display:none}
@keyframes langIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

.lang__menu button{
  display:flex;align-items:center;gap:.7rem;width:100%;
  padding:.6rem .65rem;border-radius:2px;text-align:left;
  transition:background .2s var(--ease);
}
.lang__menu button:hover{background:var(--stone)}
.lang__code{
  flex:none;min-width:2.4em;
  font:500 .6875rem/1 var(--mono);letter-spacing:.06em;color:var(--crimson);
}
.lang__name{font-size:.875rem;color:var(--navy)}

/* the active language keeps a crimson stitch, matching the brand marks */
.lang__menu button[aria-checked="true"]{background:var(--stone)}
.lang__menu button[aria-checked="true"] .lang__name{font-weight:600}
.lang__menu button[aria-checked="true"]::after{
  content:"";margin-left:auto;width:5px;height:5px;flex:none;background:var(--crimson);
}

.nav__donate{display:none}
.navmeta{display:none}

.burger{display:none;width:40px;height:40px;position:relative;flex:none}
.burger span{
  position:absolute;left:9px;right:9px;height:1.5px;background:var(--navy);
  transition:transform .35s var(--ease),opacity .2s var(--ease);
}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:19.5px}
.burger span:nth-child(3){top:25px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
/* Full-bleed photo hero — the same recipe as .slavs below (media + scrim,
   text laid over the top), so the two photographic chapters of the page
   read as one visual language instead of two different hero styles. */
.hero{position:relative;display:flex;flex-direction:column;background:var(--navy);isolation:isolate;min-height:clamp(30rem,72vh,44rem)}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 24%}
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(11,23,41,.96) 0%,rgba(11,23,41,.88) 42%,rgba(16,36,63,.58) 78%,rgba(16,36,63,.45) 100%);
}
.hero__inner{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(3rem,7vw,5rem);
}

.hero__cols{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:end;
}
.hero__act{
  display:flex;align-items:center;gap:clamp(1.25rem,3vw,2.5rem);flex-wrap:wrap;
  margin-top:clamp(2rem,3.5vw,2.75rem);
}

.hero__h1{
  font:400 clamp(2.2rem,1.3rem + 2.5vw,3.85rem)/1.08 var(--display);
  letter-spacing:-.025em;color:#fff;
  max-width:24ch;margin-bottom:0;
  text-wrap:balance;
  text-shadow:0 2px 24px rgba(11,23,41,.3);
}
.hero__h1 em{font-style:italic;color:var(--rose);font-weight:400}
.hero__lead{
  max-width:44ch;margin-bottom:0;
  font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);line-height:1.6;
  color:rgba(255,255,255,.8);
}

/* the fork — two honest doors */
.fork{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;max-width:660px;margin-bottom:2.25rem;
}
.fork__card{
  position:relative;display:flex;flex-direction:column;gap:.5rem;
  padding:1.4rem 3rem 1.4rem 1.4rem;
  text-decoration:none;border-radius:3px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(6px);
  transition:background .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);
}
.fork__card--help{background:#fff;border-color:#fff}
.fork__card--help .fork__label{color:var(--navy)}
.fork__card--help .fork__desc{color:var(--text-mid)}
.fork__card--help .fork__go{color:var(--crimson)}
.fork__label{font:500 1.0625rem/1.2 var(--body);color:#fff}
.fork__desc{font-size:.875rem;line-height:1.5;color:rgba(255,255,255,.72)}
.fork__go{
  position:absolute;top:1.35rem;right:1.3rem;
  font-size:1.05rem;color:#fff;
  transition:transform .4s var(--ease);
}
.fork__card:hover{transform:translateY(-3px)}
.fork__card:hover .fork__go{transform:translateX(5px)}
.fork__card--give:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}
.fork__card--help:hover{background:#fff}

/* live status chip */
.livechip{
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.55rem 1rem .55rem .85rem;
  border:1px solid rgba(255,255,255,.22);border-radius:100px;
  text-decoration:none;
  font:500 .75rem/1 var(--mono);letter-spacing:.05em;
  color:rgba(255,255,255,.9);
  transition:border-color .35s var(--ease),background .35s var(--ease);
}
.livechip:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45)}
.livechip__dot{
  width:7px;height:7px;border-radius:50%;background:var(--silver);flex:none;
}
.livechip__sep{width:1px;height:11px;background:rgba(255,255,255,.25)}
.livechip__name{text-transform:uppercase}
.livechip__state{color:rgba(255,255,255,.68);text-transform:none;letter-spacing:.02em}

.is-open .livechip__dot{background:#4FB477;box-shadow:0 0 0 0 rgba(79,180,119,.6);animation:pulse 2.6s var(--ease) infinite}
.is-open .livechip__state{color:#8FE0AC}
.is-shut-now .livechip__dot{background:var(--crimson-lt)}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(79,180,119,.55)}
  70%{box-shadow:0 0 0 9px rgba(79,180,119,0)}
  100%{box-shadow:0 0 0 0 rgba(79,180,119,0)}
}

/* ============================================================
   STATS
   ============================================================ */
.stats{background:var(--stone);padding-block:clamp(3rem,6vw,4.75rem)}
.stats__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.5rem,4vw,3rem);
}
/* same card language as .give/.tile below — a crimson top accent, a
   lift on hover — so "by the numbers" reads as a companion set, not a
   different component vocabulary */
.stat{
  position:relative;background:var(--paper);border-top:2px solid var(--crimson);
  border-radius:3px;padding:clamp(1.25rem,2.4vw,1.75rem) clamp(1.25rem,2.2vw,1.75rem);
  box-shadow:0 1px 2px rgba(11,23,41,.05);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.stat:hover{transform:translateY(-3px);box-shadow:0 20px 38px -26px rgba(11,23,41,.35)}
.stat__num{
  display:flex;align-items:flex-start;
  font:500 clamp(2.5rem,1.6rem + 3.6vw,4.5rem)/1 var(--display);
  letter-spacing:-.03em;color:var(--navy);
  font-variant-numeric:tabular-nums;
  margin-bottom:.7rem;
}
.stat__plus{font-size:.44em;color:var(--crimson);margin-top:.28em;margin-left:.06em}
.stat__label{
  font-size:.9375rem;line-height:1.45;color:var(--text-mid);max-width:22ch;
}

/* ============================================================
   WHO WE ARE
   ============================================================ */
.who{padding-block:var(--chapter)}
.who__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(2.5rem,5vw,4.5rem);align-items:center;
}
.who__text>p{margin-top:1.15rem;color:var(--text-mid)}
.who__text .lead{margin-top:1.5rem}
.who__text .btn{margin-top:2.25rem}

.vision{
  margin-top:2.25rem;padding:1.4rem 1.5rem;
  background:var(--stone);border-left:2px solid var(--crimson);
}
.vision__label{
  font:500 .625rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--crimson);margin-bottom:.7rem;
}
.vision__text{
  font:400 italic clamp(1.0625rem,1rem + .4vw,1.3125rem)/1.4 var(--display);
  color:var(--navy);
}

/* offset photo cluster */
.who__media{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.who__ph{overflow:hidden;border-radius:3px;background:var(--stone)}
.who__ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.who__ph:hover img{transform:scale(1.05)}
.who__ph--a{grid-column:1/2;aspect-ratio:4/3}
.who__ph--b{grid-column:2/3;grid-row:1/3;aspect-ratio:3/4.6}
.who__ph--c{grid-column:1/2;aspect-ratio:4/3}

/* ============================================================
   PROGRAMS — the explorer
   ============================================================ */
.programs{background:var(--mist);padding-block:var(--chapter)}
.programs__head{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(1.5rem,5vw,4rem);align-items:end;
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.programs__intro{color:var(--text-mid);max-width:44ch;font-size:1.0625rem}

.explorer{
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(1.5rem,3.5vw,3rem);align-items:start;
}
.explorer__index{border-top:1px solid var(--stone-2)}
.explorer__index button{
  position:relative;display:block;width:100%;
  padding:1.05rem 2rem 1.05rem 1.4rem;
  text-align:left;
  font:500 1rem/1.35 var(--body);color:var(--text-mid);
  border-bottom:1px solid var(--stone-2);
  transition:color .35s var(--ease),background .35s var(--ease),padding-left .35s var(--ease);
}
.explorer__index button::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%) scaleY(0);
  width:2px;height:calc(100% - 1.6rem);background:var(--crimson);
  transition:transform .4s var(--ease);
}
.explorer__index button::after{
  content:"→";position:absolute;right:1rem;top:50%;transform:translateY(-50%);
  color:var(--crimson);opacity:0;transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.explorer__index button:hover{color:var(--navy);background:rgba(255,255,255,.55);padding-left:1.65rem}
.explorer__index button[aria-selected="true"]{
  color:var(--navy);background:var(--paper);font-weight:600;padding-left:1.65rem;
}
.explorer__index button[aria-selected="true"]::before{transform:translateY(-50%) scaleY(1)}
.explorer__index button[aria-selected="true"]::after{opacity:1}

.explorer__stage{position:relative;background:var(--paper);border-radius:3px;overflow:hidden}
.panel{display:none}
.panel.is-on{display:block;animation:panelIn .55s var(--ease) both}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.panel__media{aspect-ratio:16/9;overflow:hidden;background:var(--stone-2)}
.panel__media img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.panel__media img[data-focus="low"]{object-position:50% 82%}
.panel__body{padding:clamp(1.5rem,3vw,2.25rem)}
.panel__h{
  font:500 clamp(1.35rem,1.1rem + .9vw,1.9rem)/1.18 var(--display);
  letter-spacing:-.015em;color:var(--navy);margin-bottom:.9rem;
}
.panel__p{color:var(--text-mid);max-width:52ch;margin-bottom:1.5rem}
.tags{display:flex;flex-wrap:wrap;gap:.5rem}
.tags li{
  padding:.4rem .75rem;background:var(--stone);
  font:500 .6875rem/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;
  color:var(--navy);border-radius:2px;
}

/* ============================================================
   SLAVS chapter
   ============================================================ */
.slavs{position:relative;display:flex;flex-direction:column;background:var(--navy);isolation:isolate}
.slavs__media{position:absolute;inset:0;z-index:-2}
.slavs__media img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
/* A page with no real photo yet can use a drawn illustration instead of a
   stand-in stock photo — same full-bleed slot, no photo/scrim contrast math
   to redo. */
.slavs__media svg{width:100%;height:100%;display:block}
.slavs__scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(11,23,41,.96) 0%,rgba(11,23,41,.88) 42%,rgba(16,36,63,.58) 78%,rgba(16,36,63,.45) 100%);
}
.slavs__inner{padding-block:var(--chapter)}
.slavs__cols{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4.5rem);margin-top:2.25rem;align-items:start;
}
.slavs__copy p+p{margin-top:1.1rem}
.slavs__copy p{max-width:48ch}

.branches li{
  display:flex;flex-direction:column;gap:.35rem;
  padding:1.1rem 0;border-top:1px solid rgba(255,255,255,.16);
}
.branches li:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.branches__k{
  font:500 .6875rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--rose-lt);
}
.branches__v{font-size:1rem;color:rgba(255,255,255,.86)}

/* ============================================================
   BUSINESS
   ============================================================ */
.business{padding-block:var(--chapter)}
.business__head{max-width:62ch;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.business__head .lead{margin-top:1.5rem}

.benefits{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);
}
.benefits li{
  background:var(--paper);padding:1.6rem 1.5rem;
  transition:background .4s var(--ease);
}
.benefits li:hover{background:var(--stone)}
.benefits h3{
  font:600 1.0625rem/1.3 var(--body);color:var(--navy);margin-bottom:.55rem;
}
.benefits p{font-size:.9375rem;line-height:1.5;color:var(--text-mid)}

/* Icon badges — hand-drawn line icons in the same geometric style as the
   existing nav chevron / language globe, not a dropped-in icon-font set. */
.icon-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;border-radius:50%;flex:none;
  background:var(--paper);border:1px solid var(--stone-2);color:var(--crimson);
  margin-bottom:.9rem;
}
.icon-badge svg{width:1.375rem;height:1.375rem}
.icon-badge--lg{width:3.25rem;height:3.25rem}
.icon-badge--lg svg{width:1.625rem;height:1.625rem}

.business__cta{
  display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;
  margin-top:clamp(2rem,4vw,2.75rem);
}
.business__note{font:400 .875rem var(--body);color:var(--silver-tx)}

.partners{margin-top:clamp(3rem,6vw,4.5rem);padding-top:2rem;border-top:1px solid var(--rule)}
.partners__label{
  font:500 .625rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--silver-tx);margin-bottom:1.5rem;
}
.partners__row{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);
}
.partners__row li{display:grid}
.partners__row a{
  display:grid;place-items:center;
  padding:1.15rem .8rem;background:var(--paper);
  transition:background .35s var(--ease);
}
/* the supplied logo files carry opaque near-white backgrounds;
   multiply drops those into the tile so only the artwork shows */
.partners__row img{
  height:58px;width:auto;max-width:100%;object-fit:contain;
  mix-blend-mode:multiply;
  filter:grayscale(1) contrast(1.1);
  opacity:.72;
  transition:filter .45s var(--ease),opacity .45s var(--ease);
}
.partners__row a:hover{background:var(--stone)}
.partners__row a:hover img,
.partners__row a:focus-visible img{filter:none;opacity:1}

/* ============================================================
   HELP
   ============================================================ */
.help{background:var(--mist);padding-block:var(--chapter)}
.help__head{margin-bottom:clamp(2.5rem,5vw,3.5rem)}
/* Fixed 2-up (not auto-fit) — with exactly four cards, auto-fit could land
   3-then-1 depending on viewport width; 2x2 always reads as one set. */
.help__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2.5vw,1.75rem);
}
@media (max-width:700px){
  .help__grid{grid-template-columns:minmax(0,1fr)}
}
.give{
  display:flex;flex-direction:column;
  background:var(--paper);border-top:2px solid var(--navy);
  padding:1.75rem 1.6rem 1.5rem;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
}
.give:hover{
  transform:translateY(-5px);
  border-top-color:var(--crimson);
  box-shadow:0 26px 48px -30px rgba(11,23,41,.42);
}
.give__h{
  font:500 clamp(1.25rem,1.1rem + .5vw,1.5rem)/1.2 var(--display);
  letter-spacing:-.01em;color:var(--navy);margin-bottom:.7rem;
}
.give__p{font-size:.9375rem;line-height:1.55;color:var(--text-mid)}
.give__list{margin:1.4rem 0 1.6rem;padding-top:1.2rem;border-top:1px solid var(--rule)}
.give__list li{
  display:flex;align-items:baseline;gap:.65rem;
  padding:.4rem 0;font-size:.9375rem;color:var(--navy);
}
.give__list li::before{
  content:"";width:5px;height:5px;flex:none;
  background:var(--silver);transform:translateY(-2px);
}
.give__cta{
  /* margin-top:auto pushes this to the card's bottom edge for cards with
     short copy, but resolves to ~0 once the paragraph above already fills
     the row — padding-top is a floor so the link never sits flush against
     the text even in the longest cards (Partner / Corporate Sponsor). */
  margin-top:auto;padding-top:1.1rem;display:inline-flex;align-items:center;gap:.5rem;
  font:500 .75rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--crimson);text-decoration:none;
}
.give__cta span:last-child{transition:transform .3s var(--ease)}
.give__cta:hover span:last-child{transform:translateX(4px)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{padding-block:var(--chapter)}
.faq__grid{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(2.5rem,6vw,5rem);align-items:start;
}
.faq__aside p{margin-top:1.25rem;color:var(--text-mid);max-width:32ch}
.faq__aside .btn{margin-top:1.75rem;font-family:var(--mono)}
.faq__img{margin-top:2.5rem;overflow:hidden;border-radius:3px}
.faq__img img{width:100%;height:100%;object-fit:cover}

.accordion{border-top:1px solid var(--rule)}
.qa{border-bottom:1px solid var(--rule)}
.qa__q{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  width:100%;padding:1.35rem 0;text-align:left;
  font:500 clamp(1rem,.96rem + .28vw,1.1875rem)/1.4 var(--body);
  color:var(--navy);
  transition:color .3s var(--ease);
}
.qa__q:hover{color:var(--crimson)}
.qa__ico{position:relative;width:16px;height:16px;flex:none;margin-top:.35em}
.qa__ico::before,.qa__ico::after{
  content:"";position:absolute;background:var(--crimson);
  transition:transform .4s var(--ease),opacity .3s var(--ease);
}
.qa__ico::before{left:0;right:0;top:7.25px;height:1.5px}
.qa__ico::after{top:0;bottom:0;left:7.25px;width:1.5px}
.qa__q[aria-expanded="true"] .qa__ico::after{transform:scaleY(0)}
.qa__q[aria-expanded="true"] .qa__ico::before{transform:rotate(180deg)}
.qa__a{overflow:hidden;height:0;transition:height .45s var(--ease)}
.qa__a>div{padding:0 3rem 1.6rem 0}
.qa__a p{color:var(--text-mid);max-width:58ch}

/* ============================================================
   VISIT
   ============================================================ */
.visit{display:flex;flex-direction:column;background:var(--navy)}
.visit__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(2.5rem,6vw,5rem);align-items:center;
  padding-block:var(--chapter);
}
.contact{margin-top:2.5rem;display:grid;gap:1.5rem}
.contact dt{
  font:500 .625rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--rose-lt);margin-bottom:.55rem;
}
.contact dd{
  font:400 clamp(1.0625rem,1rem + .4vw,1.375rem)/1.4 var(--display);
  color:#fff;
}
.contact a{
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.22em;text-decoration-color:rgba(255,255,255,.3);
  transition:text-decoration-color .3s var(--ease);
}
.contact a:hover{text-decoration-color:#fff}

.visit__note{
  margin-top:2.25rem;max-width:40ch;
  font-size:.9375rem;line-height:1.6;
}
.visit__text .btn{margin-top:1.75rem}

.hours{background:var(--paper);border-radius:3px;overflow:hidden}
.hours__img{aspect-ratio:16/10;overflow:hidden;background:var(--stone-2)}
.hours__img img{width:100%;height:100%;object-fit:cover}
.hours__body{padding:1.5rem}
.hours__status{
  display:inline-flex;align-items:center;gap:.55rem;
  font:500 .6875rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--silver);margin-bottom:1rem;
}
.hours__dot{width:7px;height:7px;border-radius:50%;background:var(--silver);flex:none}
.is-open .hours__dot{background:#3E9E68}
.is-open .hours__status{color:#2F7C50}
.is-shut-now .hours__dot{background:var(--crimson)}
.is-shut-now .hours__status{color:var(--crimson)}
.hours__h{
  font:500 1.25rem/1.2 var(--display);color:var(--navy);margin-bottom:1rem;
}
.hours__table th,.hours__table td{
  padding:.55rem 0;border-bottom:1px solid var(--rule);
  font:400 .875rem/1.3 var(--body);
}
.hours__table th{text-align:left;font-weight:500;color:var(--navy)}
.hours__table td{text-align:right;color:var(--text-mid);font-family:var(--mono);font-size:.8125rem;font-variant-numeric:tabular-nums}
.hours__table tr.is-shut th,.hours__table tr.is-shut td{color:var(--silver-tx);font-weight:400}
.hours__table tr.is-today th,
.hours__table tr.is-today td{color:var(--navy);font-weight:600}
.hours__table tr.is-today th::after{
  content:"";display:inline-block;width:4px;height:4px;
  background:var(--crimson);margin-left:.5rem;vertical-align:middle;
}
.hours__tz{margin-top:.9rem;font:400 .75rem var(--mono);color:var(--silver-tx)}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{display:flex;flex-direction:column;background:var(--ink);color:rgba(255,255,255,.7)}
.foot__grid{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.7fr) minmax(0,1fr) minmax(0,.8fr);
  gap:clamp(2rem,4vw,3.25rem);
  padding-block:clamp(3rem,6vw,4.5rem);
}
/* the footer takes the logo as a single-colour white mark */
.brand--foot{height:38px;width:auto}
.foot__legal{margin-top:1.5rem;max-width:44ch;font-size:.8125rem;line-height:1.6;color:rgba(255,255,255,.62)}

.foot__label{
  font:500 .625rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--rose-lt);margin-bottom:1.25rem;
}
.foot__nav ul{display:grid;gap:.7rem}
.foot__nav a{font-size:.9375rem;text-decoration:none;transition:color .3s var(--ease)}
.foot__nav a:hover{color:#fff}
.foot__giveP{margin-bottom:1.25rem;max-width:24ch;font-size:.9375rem;line-height:1.55}
.foot__contact address{font-style:normal;font-size:.9375rem;line-height:1.85}
.foot__contact a{text-decoration:none;transition:color .3s var(--ease)}
.foot__contact a:hover{color:#fff}

.foot__bar{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-block:1.5rem;
  font:400 .75rem var(--mono);color:rgba(255,255,255,.58);
}

/* ============================================================
   MOTION — scroll reveals
   ============================================================ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease) var(--d,0s),transform .7s var(--ease) var(--d,0s)}
.reveal.is-in{opacity:1;transform:none}

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

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .benefits{grid-template-columns:repeat(2,minmax(0,1fr))}
  .partners__row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .who__grid,.faq__grid,.visit__grid,.explorer,.programs__head,.slavs__cols{grid-template-columns:minmax(0,1fr)}
  .who__media{max-width:560px}
  .faq__img{display:none}
  .foot__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot__brand{grid-column:1/-1}

  /* explorer becomes an accordion */
  .explorer{gap:0}
  .explorer__index{display:none}
  .explorer__stage{background:transparent}
  .panel{display:block!important;animation:none!important;background:var(--paper);margin-bottom:.75rem;border-radius:3px;overflow:hidden}
  .panel[hidden]{display:block!important}
  .panel__media{aspect-ratio:16/8}
}

/* the wordmark is wide, so it steps down with the viewport */
@media (max-width:1360px){ .brand img{height:34px} }
@media (max-width:600px){  .brand img{height:26px} }
@media (max-width:360px){  .brand img{height:22px} }

/* Below ~480px the wordmark, language control, Donate and burger cannot share
   one row; the wordmark wins and Donate moves into the menu. */
@media (max-width:480px){
  .masthead__tools .btn--sm{display:none}
}

/* The desktop nav cannot hold two dropdown carets plus the brand and tools
   below ~1360px, so the full-screen menu takes over there — tablets get
   the menu with contact details rather than a cramped, wrapping nav. */
@media (max-width:1360px){

  /* an opaque header: backdrop-filter on a sticky element repaints the
     blurred strip every frame, which reads as a shimmer while scrolling */
  .masthead{background:var(--paper);backdrop-filter:none}

  /* .nav leaves the flow here, so its auto margin no longer pushes the
     tools right — space-between does it instead */
  .masthead__inner{min-height:var(--head-h);justify-content:space-between}

  /* .nav is a descendant of .masthead, so it shares the masthead's stacking
     context — no z-index here, or the parked drawer would paint over the
     burger and swallow taps. DOM order already puts the tools on top.
     visibility/pointer-events keep the closed drawer untouchable regardless. */
  /* full-height navy panel below the header. .nav is a descendant of
     .masthead, so it shares that stacking context — no z-index here, or the
     parked panel paints over the burger and swallows taps. */
  .nav{
    position:fixed;inset:var(--head-h) 0 0;
    display:flex;flex-direction:column;
    background:var(--navy);
    padding:clamp(1rem,4vw,1.75rem) var(--gut) 2rem;
    margin:0;
    opacity:0;transform:translateY(-1.25rem);
    visibility:hidden;pointer-events:none;
    transition:opacity .34s var(--ease),transform .34s var(--ease),visibility .34s var(--ease);
    overflow-y:auto;overscroll-behavior:contain;
  }
  .nav.is-open{opacity:1;transform:none;visibility:visible;pointer-events:auto}

  .nav__donate{display:inline-flex;margin-top:1.25rem;width:100%;justify-content:center}
  .nav__list{flex-direction:column;gap:0}
  .nav__list a{
    position:relative;
    display:flex;align-items:center;
    padding:1.05rem 0;
    border-bottom:1px solid rgba(255,255,255,.13);
    font:400 clamp(1.375rem,5.5vw,1.75rem)/1.15 var(--display);
    letter-spacing:-.01em;color:#fff;
  }
  .nav__list li:first-child a{border-top:1px solid rgba(255,255,255,.13)}
  .nav__list a::after{
    content:"";position:absolute;right:0;top:50%;
    width:6px;height:6px;background:var(--crimson-lt);
    transform:translateY(-50%) scale(0);transform-origin:center;
    display:block;transition:transform .3s var(--ease);
  }
  .nav__list a:hover,.nav__list a:active{color:#F3D7DC}
  .nav__list a:hover::after,.nav__list a:focus-visible::after{transform:translateY(-50%) scale(1)}

  /* submenus become inline accordions inside the full-screen panel */
  .nav__has{position:static}
  .nav__has::after{display:none}
  .nav__row{
    display:flex;align-items:stretch;
    border-bottom:1px solid rgba(255,255,255,.13);
  }
  .nav__row a{flex:1;border-bottom:0}
  .nav__has:first-child .nav__row{border-top:1px solid rgba(255,255,255,.13)}

  .nav__toggle{
    width:52px;height:auto;flex:none;
    color:rgba(255,255,255,.75);
    transition:color .3s var(--ease),transform .35s var(--ease);
  }
  .nav__toggle svg{width:15px}
  .nav__has.is-open .nav__toggle{color:#fff;transform:rotate(180deg)}

  /* 0fr -> 1fr collapses to the list's real height with no JS measuring */
  .nav__subWrap{
    position:static;min-width:0;padding:0;
    background:none;border:0;border-radius:0;box-shadow:none;
    display:grid;grid-template-rows:0fr;
    opacity:1;transform:none;visibility:visible;pointer-events:auto;
    overflow:hidden;
    transition:grid-template-rows .38s var(--ease);
  }
  .nav__has.is-open .nav__subWrap{grid-template-rows:1fr}
  .nav__sub{min-height:0;overflow:hidden}
  .nav__sub a{
    display:block;padding:.72rem 0 .72rem 1rem;
    border-bottom:1px solid rgba(255,255,255,.09);
    border-left:2px solid var(--crimson);
    margin-left:.15rem;
    font:400 1rem/1.35 var(--body);color:rgba(255,255,255,.82);
  }
  .nav__sub a:hover{color:#fff;background:rgba(255,255,255,.05)}

  /* ---- contact details inside the menu ---- */
  .navmeta{display:block;margin-top:auto;padding-top:1.75rem}

  .navmeta__live{
    display:flex;align-items:center;gap:.6rem;
    font:500 .75rem/1.3 var(--mono);letter-spacing:.05em;
    color:rgba(255,255,255,.72);margin-bottom:1.5rem;
  }
  .navmeta__dot{width:7px;height:7px;border-radius:50%;background:var(--silver);flex:none}
  .navmeta.is-open .navmeta__dot{background:#4FB477}
  .navmeta.is-open .navmeta__live{color:#8FE0AC}
  .navmeta.is-shut-now .navmeta__dot{background:var(--crimson-lt)}

  .navmeta__list{display:grid;gap:1.15rem}
  .navmeta__list dt{
    font:500 .625rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
    color:var(--rose-lt);margin-bottom:.4rem;
  }
  .navmeta__list dd{
    font:400 1.125rem/1.4 var(--display);color:#fff;
  }
  .navmeta__list a{
    text-decoration:underline;text-decoration-thickness:1px;
    text-underline-offset:.22em;text-decoration-color:rgba(255,255,255,.3);
  }
  .navmeta__mail{font-size:1rem;word-break:break-word}

  /* 44px target, but the bars are pulled flush with the page gutter so the
     icon lines up with everything else in the column, not 11px inside it */
  .burger{display:block;width:44px;height:44px;margin-right:-11px}
  .burger span{left:11px;right:11px}
  .burger span:nth-child(1){top:16px}
  .burger span:nth-child(2){top:21.5px}
  .burger span:nth-child(3){top:27px}

}

@media (max-width:900px){
  :root{--head-h:64px}

  .stats__grid{grid-template-columns:minmax(0,1fr);gap:1.75rem}
  .stat__num{font-size:clamp(2.6rem,10vw,3.5rem)}
  .fork{grid-template-columns:minmax(0,1fr);max-width:none}
  .hero{min-height:min(34rem,88vh)}
  .hero__inner{padding-block:2.5rem}
  .hero__cols{grid-template-columns:minmax(0,1fr);gap:1.1rem}
  .hero__act{margin-top:1.75rem;gap:1.25rem}
  /* A full-bleed frame cannot fill a phone-width block without losing width.
     74% is the one window where nobody is chopped at either edge: the girl
     whole on the left, the mother whole on the right — four complete faces. */
  .hero__media img{object-position:74% 22%}

  .livechip{
    display:grid;grid-template-columns:auto 1fr;gap:.25rem .7rem;
    align-items:center;border-radius:4px;padding:.7rem 1rem;
  }
  .livechip__dot{grid-row:1/3}
  .livechip__sep{display:none}
  .livechip__state{grid-column:2}
}

/* from tablet up there is room to frame the photo normally again */
@media (min-width:601px) and (max-width:900px){
  .hero__media img{object-position:50% 24%}
}

@media (max-width:360px){
  .masthead__inner{padding-inline:1rem;gap:.4rem}
  .masthead__tools{gap:.4rem}
  .lang__globe{display:none}
  .brand{gap:.55rem}
}

/* phones: the two 4:3 photos paired side by side (same size, next to each
   other, not staggered with an off-putting gap), the tall photo full-width
   below them */
@media (max-width:700px){
  .who__media{gap:.85rem}
  .who__ph--a{grid-area:1 / 1 / 2 / 2;aspect-ratio:4/3}
  .who__ph--c{grid-area:1 / 2 / 2 / 3;aspect-ratio:4/3}
  .who__ph--b{grid-area:2 / 1 / 3 / 3;aspect-ratio:16/9}
}

@media (max-width:560px){
  /* the brand, language switcher, Donate and burger all have to fit one row */
  .masthead__inner{gap:.5rem}
  .lang__btn{padding:0 .5rem;gap:.3rem}
  .lang__menu{min-width:10.5rem}
  .masthead__tools{gap:.5rem}
  .masthead__tools .btn--sm{padding:0 .7rem;font-size:.6875rem}

  .foot__grid{grid-template-columns:minmax(0,1fr)}
  .benefits{grid-template-columns:minmax(0,1fr)}
  /* the shared 1px grid lines read as odd grey seams at this size —
     give each logo its own card instead */
  .partners__row{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.6rem;background:none;border:0;
  }
  .partners__row a{border:1px solid var(--rule);border-radius:3px;padding:1rem .7rem}
  .partners__row img{height:46px}
  .hero__h1{max-width:none}
  .qa__a>div{padding-right:0}
}