/* ===========================
   TOKENS
   =========================== */
:root{
  /* Colors */
  --bg: #F4F1EC;
  --ink: #1d1d1d;
  --ink-2: #333;
  --link: #324A3D;
  --muted: #f0efeb;
  --border: #f6f5ef;
  --brand-warm: #6D6659;

  /* Layout */
  --page-max: 920px;
  --gutter: clamp(16px, 4vw, 32px);
  --top-pad: clamp(18px, 3vh, 80px);

  /* Type scale */
  --fs-h1: clamp(22px, 2.5vw, 36px);
  --fs-h:  clamp(18px, 2.5vw, 24px);
  --fs-body: 16px;
  --fs-caption: 14px;
  --lh: 1.5;

  /* Effects */
  --radius: 8px;
  --shadow: 0 5px 15px rgba(0,0,0,.12);
  --shadow-active: 0 8px 24px rgba(11,108,255,.18);

  /* Breakpoints */
  --bp: 900px;

  /* Scrolly spacing */
  --step-gap-desktop: 85vh;
  --step-gap-mobile: 52vh;
  --first-runway: 100vh;
  --last-runway-desktop: 120vh;
  --last-runway-mobile: 90vh;
  --sticky-top-desktop: 14vh;
  --sticky-top-mobile: 8vh;
}

/* ===========================
   GLOBAL BASE
   =========================== */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

html, body { height: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Figtree', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  /* Body smoothing is fine here; we override on headings for thickness */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: var(--lh);
  font-size: var(--fs-body);
}

img, video, svg { max-width: 100%; height: auto; display: block; }

/* Page container */
#wrapper{
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-top: var(--top-pad);
}

/* Screen-reader utility */
.sr-only{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.sr-only:focus, .sr-only:active{
  position: static !important;
  width: auto; height: auto; margin: 0; clip: auto;
  white-space: normal; padding: .5rem 1rem; background: var(--muted);
}

/* ===========================
   TYPE & LINKS
   =========================== */
.page-title{
  font-family: 'Source Serif 4', serif;
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 12px 0;
  text-align: center;
}

/* Generic h1 for any other headings you might add */
h1 {
  font-weight: 400;
  font-size: var(--fs-h);
  margin: 0.6em 0 0.4em;
}

.page-dek{
  text-align: center;
  font-weight: 400;
  color: var(--ink-2);
  max-width: 62ch;
  margin: 0 auto .75rem;
  font-size: clamp(16px, 1.6vw, 20px);
}

.text-caption{
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--ink-2);
  margin-top: 6px;
  text-align: center;
}

/* === Subheads === */
#key-points .subhead{
  font-size: clamp(18px, 1.9vw, 22px); 
  line-height: 1.2;
}

#why-this-matters h3,
#by-the-numbers h3,
#what-we-heard h3,
.subhead{
  font-family: 'Source Serif 4', serif;
  font-weight: 900;                                  
  font-variation-settings: "wght" 900, "opsz" 28;  
  font-optical-sizing: auto;

  /* Make headers render thicker on macOS */
  -webkit-font-smoothing: auto;   
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;     

  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.15;
  letter-spacing: 0;
  margin: 1.1rem 0 .55rem;
}

/* Key points list visuals */
#key-points ul { margin: .25rem 0 1rem 1.2rem; }
#key-points li::marker { font-size: 1em; }

/* scale the bullet up only when there’s room */
@media (min-width: 600px){
  #key-points li::marker { font-size: 1.25em; }
}


/* Scope link underlines to content only (keeps logo clean) */
#wrapper a{
  color: var(--link);
  text-decoration: none;
  border-bottom: 2px solid var(--link);
}
#wrapper a:focus-visible{
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-bottom-color: transparent;
}

/* Horizontal rule */
hr{
  border: 0;
  height: 1px;
  background: var(--border);
  max-width: 720px;
  margin: 12px auto 18px;
}

/* ===========================
   BRAND BAR
   =========================== */
.brandbar{
  background: var(--bg);
  padding-top: clamp(8px, 2.5vh, 20px);
}
.brandbar-inner{
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.brandbar-link{
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.brandbar-link:focus-visible{
  outline: 2px solid var(--link);
  outline-offset: 4px;
}
.brandbar-link img{
  display: block;
  height: 28px;
  width: auto;
  object-fit: contain;
}
.brandbar-text{
  font-size: 0.95rem;
  letter-spacing: .02em;
  opacity: .8;
  color: var(--ink);
}

/* ===========================
   MEDIA (hero image/GIF)
   =========================== */
.hero-media{ margin: 1.25rem 0; }
.hero-media img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero-media figcaption{
  margin-top: 6px;
  text-align: left;
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--ink-2);
}

/* Optional full-bleed utility */
.full-bleed{
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* ===========================
   ACCORDION
   =========================== */
.accordion-container{
  border: 1px solid var(--border);
  background: var(--brand-warm);
  border-radius: 5px;
  margin: 20px 0;
  overflow: hidden;
}

.accordion-header{
  padding: 15px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1em;
  font-weight: 700;
  color: #fff;
  background: var(--brand-warm);
  transition: background-color .25s ease, color .25s ease;
}

.accordion-header:hover{
  background: var(--muted);
  color: var(--brand-warm);
}

.accordion-arrow{
  transition: transform .25s ease, color .25s ease;
  color: #fff;
}
.accordion-header:hover .accordion-arrow{ color: var(--brand-warm); }
.accordion-arrow.open{ transform: rotate(180deg); }

.panel{
  padding: 15px 20px;
  background: #fff;
  display: none;            /* toggled via JS */
  border-top: 1px solid var(--border);
  font-size: 0.95em;
  color: var(--ink-2);
}
.panel p, .panel ul{ margin: 0.5em 0; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .accordion-header, .accordion-arrow{ transition: none; }
}

/* ===========================
   ACKNOWLEDGEMENTS / CREDITS
   =========================== */

#acknowledgments h4,
#credits h3{
  font-size: clamp(18px, 1.6vw, 20px); 
  font-weight: 700;
  margin: 1rem 0 .5rem;                
  letter-spacing: -0.005em;
}

#credits{
  max-width: var(--page-max);
  margin: 2rem auto 0;                
  padding-inline: var(--gutter);
}

#credits h4{
  margin: 1rem 0 .2rem;              
  font-size: 0.9rem;              
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #9a9a9a;
}

#credits h4:first-of-type{
  margin-top: .4rem;
}

#credits p{
  margin: 0 0 1rem;
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.35;
  color: var(--ink);
}

#acknowledgments{
  max-width: var(--page-max);
  margin: 2rem auto 0;
  padding-inline: var(--gutter);
}

/* ===========================
   FOOTER
   =========================== */
.site-footer{
  margin-top: 3rem;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.site-footer .footer-inner{
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 14px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}
.footer-brand{ font-size: 0.95rem; color: var(--ink-2); }
.footer-link{
  border-bottom: 1px solid var(--link); /* lighter than body links */
  text-decoration: none;
  color: var(--link);
}
.footer-sep{ margin: 0 .4rem; opacity: .6; }

.footer-share{ display: flex; gap: 10px; align-items: center; }
.share-btn{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 1px solid var(--border);
  border-radius: 999px; background: #fff; color: var(--ink);
  text-decoration: none; font-size: 0.9rem; line-height: 1;
}
.share-btn:hover{ background: var(--muted); }
.share-btn:focus-visible{ outline: 2px solid var(--link); outline-offset: 2px; }
.share-btn svg{ display:block; }

/* ===========================
   FLOURISH / SCROLLY
   =========================== */
.flourish-credit{ display: none !important; }

.fl-scrolly-sticky{
  position: sticky;
  top: var(--sticky-top-desktop);
  z-index: 1;
  width: 100%;
  margin: 0 auto;
}

.fl-scrolly-section .fl-scrolly-step{
  position: relative;
  z-index: 2;
  background: #fff;
  border: 1px solid #000;
  box-shadow: 0 5px 15px rgba(0,0,0,.35);
  border-radius: 10px;
  padding: 10px 20px;
  text-align: left;
  line-height: 1.3;
  width: 50%;
  max-width: 640px;
  margin: 0 auto;
  font-size: 16px;
  font-family: inherit;
}

/* Card spacing */
.fl-scrolly-section .fl-scrolly-step:first-of-type{ margin-top: var(--first-runway); }
.fl-scrolly-section .fl-scrolly-step + .fl-scrolly-step{ margin-top: var(--step-gap-desktop); }
.fl-scrolly-section .fl-scrolly-step:last-of-type{ margin-bottom: var(--last-runway-desktop); }

/* Active emphasis */
.fl-scrolly-section .fl-scrolly-step.is-active{
  transform: translateY(-2px);
  box-shadow: var(--shadow-active);
  transition: box-shadow .2s ease, transform .2s ease;
}

/* Slide triggers */
.fl-scrolly-section .fl-scrolly-step a.fl-scrolly-link{
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
}
.fl-scrolly-section .fl-scrolly-step a.fl-scrolly-link:focus-visible{
  outline: 2px solid #0b6cff;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Mobile */
@media (max-width: var(--bp)){
  .fl-scrolly-sticky{ top: var(--sticky-top-mobile); }

  .fl-scrolly-section .fl-scrolly-step{
    width: 90vw;
    max-width: 36rem;
    padding: 14px 16px;
  }
  .fl-scrolly-section .fl-scrolly-step + .fl-scrolly-step{ margin-top: var(--step-gap-mobile); }
  .fl-scrolly-section .fl-scrolly-step:last-of-type{ margin-bottom: var(--last-runway-mobile); }
}