/* ============================================================
   Appalachian Music Collective — site stylesheet
   Built from AMC_Design_System_Brief.md (v1.0, July 2026)
   Blue / white / near-black, gold as a disciplined accent.
   ============================================================ */

:root{
  --blue:#00053E;
  --blue-dark:#000833;
  --white:#FFFFFF;
  --near-black:#1A1A1A;
  --gold:#FFC72C;
  --n50:#F5F6F8;
  --n100:#E9EBF0;
  --n300:#C3C7D2;
  --n600:#5A5F6E;
  --success:#2E7D5B;
  --warning:#B8860B;
  --error:#B3261E;

  --sans:'Roboto',system-ui,Helvetica,Arial,sans-serif;
  --display:'Bebas Neue','Oswald',Impact,sans-serif;
  --serif:'Merriweather',Georgia,serif;

  --maxw:1200px;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-pill:999px;
  --shadow:0 2px 8px rgba(0,5,62,.08);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- Accessibility ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--gold);color:var(--blue);font-family:var(--sans);font-weight:500;font-size:15px;
  padding:12px 22px;border-radius:0 0 var(--radius-sm) 0;text-decoration:none;
}
.skip-link:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--blue);outline-offset:2px;
}
.site-header a:focus-visible,.site-header button:focus-visible,
.hero a:focus-visible,.band-blue a:focus-visible,.band-blue button:focus-visible,
footer a:focus-visible{outline-color:var(--gold)}
body{
  font-family:var(--sans);
  font-weight:300;
  color:var(--near-black);
  background:var(--white);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

h1,h2,h3,.disp{font-family:var(--display);letter-spacing:.02em;font-weight:400;line-height:1.02;color:var(--blue)}
.serif{font-family:var(--serif)}

/* No text orphans, ever. text-wrap:pretty is inherited, so this covers every
   text element site wide by default (labels, captions, buttons, anything
   added later); headlines get the stronger balance treatment instead. */
body{text-wrap:pretty}
h1,h2,h3,h4,.pull-quote{text-wrap:balance}

p{margin-bottom:1em}
p:last-child{margin-bottom:0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-weight:500;font-size:15px;
  border-radius:var(--radius-sm);padding:13px 26px;border:1.5px solid transparent;
  cursor:pointer;transition:.15s;text-decoration:none;line-height:1;
}
.btn-primary{background:var(--blue);color:var(--white)}
.btn-primary:hover{background:var(--blue-dark);box-shadow:inset 0 -3px 0 var(--gold)}
.btn-secondary{background:transparent;color:var(--white);border-color:rgba(255,255,255,.55)}
.btn-secondary:hover{background:rgba(255,255,255,.1);border-color:var(--white)}
.btn-onlight{background:var(--white);color:var(--blue);border-color:var(--blue)}
.btn-onlight:hover{background:var(--n50)}
.btn-text{background:transparent;color:var(--blue);padding:10px 2px;border:none}
.btn-text:hover{box-shadow:inset 0 -2px 0 var(--gold)}
.btn-lg{padding:16px 34px;font-size:16px}

/* ---------- Nav ---------- */
.site-header{background:var(--blue);position:sticky;top:0;z-index:50;box-shadow:0 1px 0 rgba(255,255,255,.06)}
/* padding-top/bottom only (not shorthand) so this never wipes out the
   left/right padding .wrap already sets on this same element ("wrap nav") —
   a shorthand reset here previously zeroed the side padding entirely,
   which is why the logo and hamburger sat flush against the screen edges. */
.nav{display:flex;align-items:center;gap:28px;padding-top:11px;padding-bottom:11px}
.nav .brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.nav .brand img{height:108px;width:auto}
.nav-links{display:flex;gap:20px;align-items:center;flex:1}
/* nowrap keeps each link's own label on a single line — without it, flex
   children shrink below their text's natural width once six links plus two
   buttons compete for space, and labels like "What we're doing" break into
   two or three stacked lines, which read as broken layout, not a design. */
.nav-links a{color:#D6D8E6;text-decoration:none;font-size:14.5px;font-weight:400;letter-spacing:.01em;padding:6px 0;transition:.15s;white-space:nowrap;flex:0 0 auto}
.nav-links a:hover,.nav-links a.active{color:var(--white)}
.nav-links a.active{box-shadow:inset 0 -2px 0 var(--gold)}
.nav .cta{margin-left:auto;flex:0 0 auto}
.nav .cta-group{margin-left:auto;flex:0 0 auto;display:flex;align-items:center;gap:12px}
.nav-toggle{display:none;background:none;border:none;color:var(--white);font-size:26px;cursor:pointer;line-height:1}

@media(max-width:980px){
  /* Compact mobile header: the 108px desktop logo left almost no breathing
     room in the bar and read as cropped. A smaller lockup plus tighter
     vertical padding gives a normal-height mobile bar with clear margin
     above and below the mark.
     Breakpoint moved up from 860 to 980: with six nav links plus two
     buttons, nothing below ~980px has room for a one-line desktop nav
     without overflowing off the right edge of the screen, so this range
     now gets the full mobile menu instead of a cramped squeeze. */
  .nav{padding-top:14px;padding-bottom:14px}
  .nav .brand img{height:68px}
  .nav-toggle{
    display:block;margin-left:auto;
    padding:11px;margin-right:-11px;border-radius:var(--radius-sm);
  }
  .nav-toggle:active{background:rgba(255,255,255,.1)}
  .nav-links{
    position:fixed;inset:0 0 0 0;top:96px;background:var(--blue);
    flex-direction:column;align-items:stretch;padding:6px 0 40px;gap:0;
    transform:translateX(100%);transition:transform .25s ease;overflow-y:auto;
  }
  .nav-links.open{transform:translateX(0)}
  .nav-links a{
    font-size:19px;color:#E7E9F4;
    padding:19px 28px;border-bottom:1px solid rgba(255,255,255,.1);
  }
  .nav-links a.active{
    color:var(--white);font-weight:500;background:rgba(255,255,255,.05);
    box-shadow:inset 3px 0 0 var(--gold);padding-left:25px;
  }
  .nav .cta,.nav .cta-group{display:none}
  .nav-links .mobile-cta,.nav-links .mobile-cta-secondary{
    display:flex;width:calc(100% - 56px);margin-left:28px;margin-right:28px;justify-content:center;
  }
  /* Secondary ask ("Partner with AMC") stays outlined and low-key; it also
     carries the top separation from the link list above it. */
  .nav-links .mobile-cta-secondary{
    margin-top:30px;
    background:transparent;color:#fff;border-color:rgba(255,255,255,.5);
  }
  .nav-links .mobile-cta-secondary:hover{background:rgba(255,255,255,.1);color:#fff}
  /* Primary ask ("Join the Community") in brand gold rather than plain
     black, so it reads as the on-brand default action, not a generic box. */
  .nav-links .mobile-cta{
    margin-top:14px;font-weight:600;
    background:var(--gold);color:var(--blue);border-color:var(--gold);
  }
  .nav-links .mobile-cta:hover{background:#FFD35C;color:var(--blue)}
}
@media(min-width:981px){
  .nav-links .mobile-cta,.nav-links .mobile-cta-secondary{display:none}
}
/* Tablet-width desktop nav: the full-size logo plus six links plus two
   buttons is wider than this range has room for and pushes the header into
   horizontal overflow. Tighten gaps, shrink the logo a little, and trim the
   button padding so everything fits on one line without wrapping. */
@media(min-width:981px) and (max-width:1180px){
  .nav{gap:14px}
  .nav .brand img{height:66px}
  .nav-links{gap:14px}
  .nav-links a{font-size:13px}
  .nav .cta-group{gap:8px}
  .nav .cta-group .btn{padding:11px 14px;font-size:13px}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;background:var(--blue);color:var(--white);
  padding:110px 0 108px;overflow:hidden;
}
.hero-photo{
  position:absolute;left:0;right:0;top:-8%;bottom:-8%;z-index:0;
  background-size:cover;background-position:var(--bgpos,center);
  filter:saturate(1.05) contrast(1.14) brightness(.96);
  transform:translateY(var(--py,0px));will-change:transform;
}
@media(prefers-reduced-motion:reduce){.hero-photo{transform:none}}
.hero .grade,.has-bg .grade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(140% 120% at 50% 100%, rgba(0,5,62,.6) 0%, transparent 60%),
    linear-gradient(120deg, rgba(0,60,75,.48) 0%, rgba(0,5,62,0) 45%, rgba(255,170,45,.34) 100%);
  mix-blend-mode:overlay;
}
.hero .scrim{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(0,5,62,.68) 0%,rgba(0,5,62,.5) 45%,rgba(0,5,62,.42) 68%,rgba(0,5,62,.66) 100%),
             radial-gradient(120% 90% at 18% 0%,rgba(255,199,44,.15),transparent 55%);
}
/* Extra left-side darkening for hero photos with bright, busy detail (string
   lights, signage) sitting behind the text column. Layered on top of the
   shared .scrim rather than changing it, so it only affects heroes that
   opt in and never touches the contrast already verified on other pages. */
.hero .scrim-left{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,5,62,.6) 0%,rgba(0,5,62,.4) 38%,rgba(0,5,62,.12) 62%,transparent 78%);
}
.hero-inner{position:relative;z-index:5}

/* ---------- Photo-backed blue bands: deep, heavily-scrimmed texture ---------- */
.has-bg{position:relative;overflow:hidden}
.has-bg .bg-photo{
  position:absolute;inset:0;z-index:0;background-size:cover;background-position:var(--bgpos,center);
  filter:saturate(1.05) contrast(1.12) brightness(.9);
}
.has-bg .bg-scrim{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(0,5,62,.86) 0%,rgba(0,5,62,.76) 50%,rgba(0,5,62,.88) 100%);
}
.has-bg.tone-warm .bg-scrim{
  background:linear-gradient(165deg,rgba(43,24,0,.84) 0%,rgba(124,74,0,.56) 45%,rgba(0,5,62,.85) 100%);
}
.has-bg.tone-vintage .bg-scrim{
  background:linear-gradient(165deg,rgba(56,10,14,.92) 0%,rgba(110,28,16,.88) 45%,rgba(0,5,62,.92) 100%);
}
.has-bg.tone-archive .bg-scrim{
  background:linear-gradient(180deg,rgba(0,5,62,.94) 0%,rgba(0,5,62,.9) 45%,rgba(0,5,62,.95) 100%);
}
.has-bg.tone-scholar .bg-scrim{
  background:linear-gradient(165deg,rgba(0,10,64,.9) 0%,rgba(18,64,142,.62) 45%,rgba(0,5,62,.92) 100%);
}
.has-bg.tone-archive-soft .bg-scrim{
  background:linear-gradient(180deg,rgba(0,5,62,.82) 0%,rgba(0,5,62,.68) 45%,rgba(0,5,62,.82) 100%);
}
.has-bg > .wrap{position:relative;z-index:5}


.eyebrow{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;font-weight:400}
.hero h1{font-size:76px;color:var(--white);max-width:820px}
.hero .lede{font-family:var(--serif);font-weight:400;font-size:20px;margin-top:22px;max-width:640px;color:#D6D8E6}
.hero .btn-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:36px}
.lockup-line{margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#AEB2C8}
.lockup-line b{color:var(--white);font-weight:500}

.page-hero{padding:74px 0 96px}
.page-hero h1{font-size:56px}

@media(max-width:640px){
  .hero{padding:80px 0 76px}
  .page-hero{padding:64px 0 64px}
  .hero h1{font-size:44px}
  .page-hero h1{font-size:38px}
}

/* ---------- Sections ---------- */
section{padding:80px 0}
.section-tight{padding:56px 0}
.band-light{background:var(--n50)}
.band-blue{background:var(--blue);color:var(--white)}
.band-blue h2,.band-blue h3{color:var(--white)}
.band-white{background:var(--white)}
.divider{border-bottom:1px solid var(--n100)}

.sec-num{font-family:var(--display);font-size:14px;letter-spacing:.14em;color:var(--blue);display:inline-block;margin-bottom:10px}
.sec-num span{color:var(--n600)}
.band-blue .sec-num{color:var(--gold)}
.band-blue .sec-num span{color:#AEB2C8}
h2{font-size:38px;margin-bottom:14px}
.lede-lg{font-family:var(--serif);font-size:18px;color:var(--n600);max-width:720px;margin-bottom:44px}
.band-blue .lede-lg{color:#D6D8E6}
h3.block{font-family:var(--serif);font-weight:700;font-size:15px;color:var(--blue);margin:0 0 16px;padding-bottom:8px;border-bottom:2px solid var(--n100)}

/* ---------- Stats ---------- */
.stats-row{display:flex;gap:56px;flex-wrap:wrap}
.stat .num{font-family:var(--display);font-size:64px;color:var(--blue);line-height:.9}
.band-blue .stat .num{color:var(--white)}
.stat .num.gold{color:var(--gold)}
/* Gold text only meets contrast on a dark (band-blue) background — see
   AMC_Brand_Guide.html. On light backgrounds a ".num.gold" stat falls back
   to navy so it never regresses to an inaccessible gold-on-white number. */
.band-white .stat .num.gold,.band-light .stat .num.gold{color:var(--blue)}
.stat .lab{font-family:var(--serif);font-size:15px;color:var(--n600);margin-top:10px;max-width:220px}
.band-blue .stat .lab{color:#D6D8E6}
.stat-source{font-size:13px;color:var(--n600);margin-top:28px}
.band-blue .stat-source{color:#AEB2C8}

/* ---------- Cards ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:920px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-3,.grid-2,.grid-4{grid-template-columns:1fr}}

.card{background:var(--white);border:1px solid var(--n100);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card .band{background:var(--blue);height:6px;flex:0 0 6px}
.card .card-body{padding:26px;flex:1;display:flex;flex-direction:column}
.card .tag{display:inline-block;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);border:1px solid var(--n300);border-radius:var(--radius-pill);padding:4px 12px;margin-bottom:14px;align-self:flex-start}
.card h4{font-family:var(--serif);font-weight:700;font-size:19px;color:var(--near-black);margin-bottom:10px}
.card p{font-size:14.5px;color:var(--n600);margin-bottom:16px}
.card .link{font-size:13.5px;font-weight:500;color:var(--blue);margin-top:auto;text-decoration:none}
.card .link:hover{box-shadow:inset 0 -2px 0 var(--gold)}
.card h3.ct{font-family:var(--serif);font-weight:700;font-size:19px;color:var(--near-black);margin-bottom:10px;line-height:1.3}
.card .card-body .btn{margin-top:auto;align-self:flex-start}
.card-photo{position:relative;height:172px;overflow:hidden;flex:0 0 auto}
.card-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) brightness(1.03) contrast(1.04)}
.card-photo::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,199,44,.14),transparent 42%),linear-gradient(340deg,rgba(0,5,62,.30),transparent 55%);
}

.stat-card{background:var(--white);border:1px solid var(--n100);border-radius:var(--radius-md);padding:28px;box-shadow:var(--shadow)}

/* ---------- Tags ---------- */
.tagset{display:flex;gap:10px;flex-wrap:wrap}
.tg{font-size:12px;font-weight:500;letter-spacing:.04em;border-radius:var(--radius-pill);padding:6px 15px;display:inline-block}
.tg-outline{border:1px solid var(--blue);color:var(--blue)}
.tg-neutral{background:var(--n100);color:var(--n600)}
.tg-gold{background:var(--gold);color:var(--blue)}
.tg-outline-light{border:1px solid rgba(255,255,255,.5);color:var(--white)}

/* ---------- Forms ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:640px}
.form-grid .full{grid-column:1/-1}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}
.field{margin-bottom:0}
.field label{display:block;font-size:13px;font-weight:500;color:var(--near-black);margin-bottom:7px}
.band-blue .field label{color:var(--white)}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--sans);font-size:15px;padding:12px 14px;
  border:1px solid var(--n100);border-radius:var(--radius-sm);background:var(--white);color:var(--near-black);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,5,62,.12)}
.field textarea{resize:vertical;min-height:100px}
.form-note{font-size:13.5px;color:var(--n600);margin-top:18px}
.band-blue .form-note{color:#AEB2C8}
.form-success{display:none;background:var(--n50);border-left:3px solid var(--success);border-radius:0 var(--radius-md) var(--radius-md) 0;padding:20px 24px;font-size:15px}
.form-success.show{display:block}
.form-error{color:var(--error);font-size:14px;margin-top:14px}

/* ---------- Notes / callouts ---------- */
.note{background:var(--n50);border-left:3px solid var(--gold);border-radius:0 var(--radius-md) var(--radius-md) 0;padding:20px 24px;font-size:15px}
.note b{font-weight:500}

/* ---------- News ---------- */
.news-list{display:flex;flex-direction:column;gap:0}
.news-item{padding:32px 0;border-bottom:1px solid var(--n100);display:grid;grid-template-columns:160px 1fr;gap:32px}
.news-item:first-child{padding-top:0}
.news-item .news-date{font-family:var(--display);font-size:16px;letter-spacing:.06em;color:var(--n600);padding-top:4px}
.news-item .news-date b{display:block;color:var(--blue);font-size:15px}
.news-item h3{font-family:var(--serif);font-weight:700;font-size:23px;color:var(--near-black);margin-bottom:10px}
.news-item p{color:var(--n600);font-size:15px;max-width:640px}
.news-item .tagset{margin-bottom:12px}
.news-item .news-link{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:500;color:var(--blue);text-decoration:none}
.news-item .news-link:hover{box-shadow:inset 0 -2px 0 var(--gold)}
@media(max-width:640px){
  .news-item{grid-template-columns:1fr;gap:8px}
  .news-item .news-date{display:flex;gap:6px;align-items:baseline}
}
.news-teaser .news-item{padding:24px 0}
.news-empty{color:var(--n600);font-family:var(--serif);font-style:italic}

/* ---------- Region strip ---------- */
.region-strip{display:flex;flex-wrap:wrap;gap:16px}
.region-chip{flex:1 1 200px;background:var(--white);border:1px solid var(--n100);border-radius:var(--radius-md);padding:22px;box-shadow:var(--shadow)}
.region-chip .rname{font-family:var(--display);font-size:22px;color:var(--blue);letter-spacing:.02em}
.region-chip .rmeta{font-size:13.5px;color:var(--n600);margin-top:6px}
.region-chip.kentucky{border-style:dashed}

/* ---------- Timeline / process ---------- */
.steps{counter-reset:step}
.step{display:flex;gap:22px;padding:26px 0;border-bottom:1px solid var(--n100);align-items:flex-start}
.step:last-child{border-bottom:none}
.step .stepnum{
  counter-increment:step;font-family:var(--display);font-size:20px;letter-spacing:.02em;
  color:var(--blue);background:var(--gold);
  width:44px;height:44px;flex:0 0 44px;border-radius:var(--radius-pill);
  display:flex;align-items:center;justify-content:center;
}
.step h4{font-family:var(--serif);font-weight:700;font-size:18px;color:var(--near-black);margin-bottom:6px}
.step p{color:var(--n600);font-size:15px}

/* ---------- Footer ---------- */
footer{background:var(--blue);color:#AEB2C8;padding:52px 0 28px;position:relative;overflow:hidden}
footer .wrap{position:relative;z-index:1}
.footer-rc{display:flex;align-items:center;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.14)}
.footer-logo-stack{flex:0 0 216px;margin-right:48px;display:flex;flex-direction:column;gap:16px}
.footer-logo-stack .rc-logo{width:216px;max-width:100%;height:auto;display:block}
.footer-logo-stack .dept-logo{width:216px;max-width:100%;height:auto;display:block}
.rc-copy-block{flex:1 1 320px;display:flex;flex-direction:column;gap:12px;max-width:640px;border-left:1px solid rgba(255,255,255,.16);padding-left:48px}
p.rc-copy{font-size:13.5px;line-height:1.65;color:#AEB2C8;margin:0}
.footer-contact{flex:0 0 auto;margin-left:auto;padding-left:32px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
@media(max-width:920px){
  .footer-contact{padding-left:24px}
}
@media(max-width:760px){
  .footer-rc{flex-direction:column;align-items:center;gap:26px;text-align:center}
  .footer-logo-stack{flex-basis:auto;margin-right:0;align-items:center}
  .footer-logo-stack .rc-logo{width:180px}
  .footer-logo-stack .dept-logo{width:180px}
  .rc-copy-block{flex-basis:auto;border-left:none;padding-left:0;text-align:left}
  .footer-contact{margin-left:0;padding-left:0;align-items:center}
}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:28px;font-size:13px}
.footer-bottom .powered{letter-spacing:.14em;text-transform:uppercase}
.footer-bottom .powered b{color:var(--white);font-weight:500}
.footer-legal{color:#AEB2C8}
.footer-legal a{color:#AEB2C8;text-decoration:underline;text-underline-offset:2px}
.footer-legal a:hover{color:var(--white)}
.cookie-prefs-btn{
  background:none;border:none;padding:0;margin:0;font:inherit;font-size:inherit;
  color:#AEB2C8;text-decoration:underline;text-underline-offset:2px;cursor:pointer;
}
.cookie-prefs-btn:hover{color:var(--white)}

/* ---------- Cookie consent banner ----------
   Nothing on this site sets a cookie or loads a tracking script until a
   visitor clicks "Accept" here — see the loadAnalytics() placeholder in
   main.js. The banner is hidden off-screen by default and only slides up
   if localStorage has no stored choice yet. */
.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:var(--blue);border-top:1px solid rgba(255,255,255,.14);
  box-shadow:0 -8px 28px rgba(0,5,62,.35);
  transform:translateY(110%);transition:transform .35s ease;
}
.cookie-banner.show{transform:translateY(0)}
.cookie-banner .wrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding-top:20px;padding-bottom:20px}
.cookie-banner p{margin:0;font-size:14px;line-height:1.6;color:#D6D8E6;flex:1 1 340px}
.cookie-banner a{color:var(--gold)}
.cookie-banner .cookie-actions{display:flex;gap:12px;flex:0 0 auto}
.cookie-banner .cookie-actions .btn{padding:11px 20px;font-size:14px}
@media(max-width:640px){
  .cookie-banner .wrap{flex-direction:column;align-items:stretch;text-align:center;padding-top:22px;padding-bottom:22px}
  /* flex-basis is axis-relative: the 340px basis on the paragraph means a
     minimum WIDTH in the desktop row layout above, but once flex-direction
     switches to column here, that same value reads as a minimum HEIGHT —
     inflating the banner to ~450px tall. Reset it back to auto so the
     paragraph sizes by its actual content on mobile. */
  .cookie-banner p{flex-basis:auto}
  .cookie-banner .cookie-actions{justify-content:center}
}

/* ---------- Partner scroll (peer proof) ---------- */
.partner-intro{margin-bottom:36px}
.partner-frame{
  border:1px solid var(--n100);border-radius:var(--radius-md);
  padding:30px 0;background:var(--white);box-shadow:var(--shadow);
  overflow:hidden;
}
.partner-scroll{
  overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.partner-track{display:flex;align-items:center;width:max-content;animation:partnerScroll 90s linear infinite;will-change:transform}
/* Pause on hover only for devices with a real pointer (mouse/trackpad). Without this
   gate, touch browsers can register a tap as :hover and never release it, which
   freezes the strip on the exact devices this needs to work on most. */
@media (hover:hover) and (pointer:fine){
  .partner-scroll:hover .partner-track{animation-play-state:paused}
}
.partner-item{display:flex;align-items:center;white-space:nowrap;flex:0 0 auto}
.partner-name{font-family:var(--serif);font-size:15px;color:var(--n600);padding:0 22px}
.partner-sep{color:var(--n300);font-size:14px}
@keyframes partnerScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.partner-source{margin-top:24px;font-size:13px;color:var(--n600)}
@media(prefers-reduced-motion:reduce){
  .partner-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .partner-scroll{-webkit-mask-image:none;mask-image:none}
}

/* ---------- Utility ---------- */
.center{text-align:center}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.max-prose{max-width:740px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media(max-width:820px){
  .two-col{grid-template-columns:1fr}
  /* Text-only two-col splits (as opposed to text+photo ones) read as one
     continuous passage once stacked on mobile, so the break between
     columns should match normal paragraph rhythm, not the wide 56px
     column gutter, which read as an oversized, inconsistent gap. */
  .two-col.text-flow{gap:18px}
}
.photo-frame{border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow);position:relative}
.photo-frame img{filter:saturate(.86) brightness(1.07) contrast(.97);transition:transform .6s ease}
.photo-frame:hover img{transform:scale(1.035)}
.photo-frame::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(155deg,rgba(255,199,44,.16),transparent 42%),linear-gradient(335deg,rgba(0,5,62,.14),transparent 46%);
}
.photo-frame.wide{aspect-ratio:16/9}
.photo-frame.wide img{width:100%;height:100%;object-fit:cover}
.photo-frame.ratio43{aspect-ratio:4/3}
.photo-frame.ratio43 img{width:100%;height:100%;object-fit:cover}
.person-photo{aspect-ratio:1/1}
.person-photo img{width:100%;height:100%;object-fit:cover}
.people-grid .person h3.ct{margin-top:18px;font-size:19px}
.people-grid .person .role{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);font-weight:500;margin-bottom:10px}
.people-grid .person p.bio{font-size:14.5px;color:var(--n600)}
.caption{font-size:13px;color:var(--n600);margin-top:10px}
.caption b{color:var(--near-black);font-weight:500}
.pull-quote{font-family:var(--serif);font-weight:700;font-size:26px;color:var(--blue);line-height:1.4;max-width:760px}
.small-caps{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--n600)}

/* ---------- Motion: scroll reveal ---------- */
.reveal-init{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal-init.in-view{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  .reveal-init{opacity:1;transform:none;transition:none}
}

/* ---------- Motion: small interactive lifts ---------- */
.btn{transition:.15s,transform .2s ease}
.btn-primary:hover,.btn-onlight:hover{transform:translateY(-2px)}
.card{transition:transform .3s ease,box-shadow .3s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,5,62,.14)}
.stat-card{transition:transform .3s ease,box-shadow .3s ease}
.stat-card:hover{transform:translateY(-3px)}
.region-chip{transition:transform .3s ease}
.region-chip:hover{transform:translateY(-3px)}
.nav-links a{position:relative}
.nav-links a:not(.active)::after{
  content:'';position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--gold);
  transition:right .25s ease;
}
.nav-links a:not(.active):hover::after{right:0}

/* ---------- Census voices (homepage quote ticker, Variant B) ---------- */
.quote-scroll{
  overflow:hidden;width:100%;margin-top:36px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.quote-track{display:flex;align-items:center;width:max-content;animation:quoteScroll 160s linear infinite;will-change:transform}
@media (hover:hover) and (pointer:fine){
  .quote-scroll:hover .quote-track{animation-play-state:paused}
}
.quote-item{display:flex;align-items:center;white-space:nowrap;flex:0 0 auto}
.quote-text{font-family:var(--serif);font-style:italic;font-size:17px;color:#D6D8E6;padding:0 26px}
.quote-sep{color:var(--gold);font-size:11px}
@keyframes quoteScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.quote-source{margin-top:28px;font-size:13.5px;color:#AEB2C8}
.quote-source a{color:var(--white)}
.quote-source a:hover{box-shadow:inset 0 -2px 0 var(--gold)}
@media(prefers-reduced-motion:reduce){
  .quote-track{animation:none;flex-wrap:wrap;width:auto}
  .quote-item{white-space:normal;padding:6px 0}
  .quote-item.qt-dup{display:none}
  .quote-scroll{-webkit-mask-image:none;mask-image:none;padding:0 24px}
}

/* Anchor targets land below the sticky header so section headings stay visible */
main section[id]{scroll-margin-top:150px}
@media(max-width:980px){main section[id]{scroll-margin-top:112px}}

/* ---------- Story slider (why.html sections 01-07, Variant B) ---------- */
.story-slider{position:relative}
.story-track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
.story-track::-webkit-scrollbar{display:none}
.story-track > .story-slide{
  flex:0 0 100%;min-width:100%;scroll-snap-align:start;scroll-snap-stop:always;
  padding-bottom:118px;
}
.story-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:10;
  width:52px;height:52px;border-radius:var(--radius-pill);
  border:1.5px solid rgba(255,255,255,.55);background:rgba(0,5,62,.45);
  color:var(--white);font-size:21px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.story-arrow:hover{background:rgba(255,255,255,.12);border-color:var(--white)}
.story-arrow:disabled{opacity:.3;cursor:default}
.story-arrow:disabled:hover{background:rgba(0,5,62,.45);border-color:rgba(255,255,255,.55)}
.story-arrow.prev{left:18px}
.story-arrow.next{right:18px}
.story-dots{
  position:absolute;bottom:26px;left:0;right:0;z-index:10;
  display:flex;justify-content:center;gap:16px;
}
.story-dot{
  font-family:var(--display);font-size:15px;letter-spacing:.12em;
  color:#AEB2C8;background:none;border:none;cursor:pointer;padding:4px 2px;transition:.15s;
}
.story-dot:hover{color:var(--white)}
.story-dot.active{color:var(--gold);box-shadow:inset 0 -2px 0 var(--gold)}
@media(max-width:640px){
  .story-arrow{width:42px;height:42px;font-size:18px}
  .story-arrow.prev{left:8px}
  .story-arrow.next{right:8px}
  .story-dots{gap:11px}
  .story-dot{font-size:13.5px}
}

/* ---------- Duotone hero (homepage, Variant B): grayscale photo under a navy wash ---------- */
.hero.hero-duotone .hero-photo{filter:grayscale(1) contrast(1.1) brightness(.88)}
.hero.hero-duotone .hero-photo::after{
  content:'';position:absolute;inset:0;
  background:var(--blue);opacity:.66;mix-blend-mode:multiply;
}

/* ---------- Hub screenshot in a browser frame (community page, Variant B) ---------- */
.browser-frame{
  margin-top:40px;border-radius:var(--radius-md);overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  background:var(--white);
}
.browser-bar{
  display:flex;align-items:center;gap:8px;
  background:var(--blue-dark);padding:13px 18px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.browser-dot{width:11px;height:11px;border-radius:var(--radius-pill);background:rgba(255,255,255,.22);flex:0 0 auto}
.browser-dot.gold{background:var(--gold)}
.browser-url{
  margin-left:14px;font-family:var(--sans);font-size:13px;letter-spacing:.02em;
  color:#D6D8E6;background:rgba(255,255,255,.1);
  border-radius:var(--radius-pill);padding:6px 18px;
}
.browser-frame img{width:100%;height:auto;display:block}
.browser-caption{font-family:var(--serif);font-size:15.5px;color:#D6D8E6;margin-top:22px;max-width:760px}
@media(max-width:640px){
  .browser-url{font-size:11px;padding:5px 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ---------- Named testimonial (homepage, Variant B) ---------- */
.testimonial{max-width:820px;margin:0 auto;text-align:center}
.testimonial-photo{
  width:200px;height:200px;border-radius:var(--radius-pill);object-fit:cover;
  margin:0 auto 28px;border:4px solid var(--gold);display:block;
}
@media(max-width:640px){.testimonial-photo{width:150px;height:150px}}
.testimonial-quote{
  font-family:var(--serif);font-weight:700;font-size:36px;line-height:1.3;
  color:var(--blue);text-wrap:balance;
}
.testimonial-quote::before{
  content:'\201C';display:block;font-family:var(--display);font-size:64px;line-height:.6;
  color:var(--gold);margin-bottom:10px;
}
.testimonial-attr{margin-top:26px}
.testimonial-attr b{
  display:block;font-family:var(--display);font-weight:400;font-size:21px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--blue);
}
.testimonial-attr span{font-size:13.5px;color:var(--n600);margin-top:6px;display:block}
@media(max-width:640px){.testimonial-quote{font-size:27px}}

/* Stronger left darkening for heroes with bright, busy crowds behind the text column */
.hero.hero-dim-left .scrim-left{
  background:linear-gradient(90deg,rgba(0,5,62,.8) 0%,rgba(0,5,62,.62) 42%,rgba(0,5,62,.24) 66%,transparent 82%);
}

/* Twelve numbered slider dots must fit one row on small phones */
@media(max-width:640px){
  .story-dots{gap:7px;left:12px;right:12px;flex-wrap:wrap}
  .story-dot{font-size:12px;letter-spacing:.08em;padding:4px 1px}
}