/* =========================================================
   Dana Johnson for San Mateo County Board of Education
   style.css

   Palette is drawn from the San Mateo coast: deep Pacific
   water, morning fog, California poppy, coastal lupine.
   ========================================================= */

:root{
  /* Color */
  --ink:        #0C2630;   /* deepest text / dark sections   */
  --pacific:    #14505F;   /* primary brand                  */
  --pacific-lt: #2C7285;   /* hover / links on dark          */
  --fog:        #E7EEED;   /* pale cool ground               */
  --paper:      #FBFDFD;   /* page background                */
  --poppy:      #EE5B25;   /* accent — use sparingly         */
  --lupine:     #4B3E7C;   /* secondary accent               */

  --line:       rgba(12,38,48,.14);
  --line-light: rgba(255,255,255,.18);
  --muted:      #4E6670;
  --muted-lt:   rgba(231,238,237,.72);

  /* Type */
  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --body:    "Source Serif 4", Georgia, "Times New Roman", serif;

  /* Space */
  --shell: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);

  --radius: 2px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1.0625rem, .35vw + 1rem, 1.1875rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:700; line-height:1.05; margin:0; letter-spacing:-.02em; }
p{ margin:0 0 1.05em; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:var(--pacific); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--poppy); }

:focus-visible{
  outline:3px solid var(--poppy);
  outline-offset:3px;
  border-radius:1px;
}

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

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:.75rem 1.25rem;
  font-family:var(--display); font-size:.9rem;
}
.skip-link:focus{ left:1rem; top:1rem; }

/* =========================================================
   Header
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgb(241 241 241 / 88%);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.is-stuck{ border-bottom-color:var(--line); }

.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; min-height:76px;
}

.wordmark{ text-decoration:none; color:var(--ink); display:block; line-height:1.1; }
.wordmark-name{
  display:block; font-family:var(--display); font-weight:800;
  font-size:1.3rem; letter-spacing:-.035em;
}
.wordmark-sub{
  display:block; font-family:var(--display); font-weight:600;
  font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--pacific); margin-top:.18em;
}

.primary-nav{ display:flex; align-items:center; gap:2rem; }
.primary-nav ul{ display:flex; align-items:center; gap:1.85rem; }
.primary-nav a{
  font-family:var(--display); font-weight:600; font-size:.9rem;
  letter-spacing:-.005em; color:var(--ink); text-decoration:none;
  position:relative; padding-block:.35rem;
}
.primary-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--poppy); transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease);
}
.primary-nav a:hover::after,
.primary-nav a.is-active::after{ transform:scaleX(1); }
.primary-nav a.is-active{ color:var(--pacific); }
.nav-cta::after{ display:none; }

.nav-toggle{
  display:none; align-items:center; gap:.6rem;
  background:none; border:1px solid var(--line); border-radius:var(--radius);
  padding:.55rem .85rem; cursor:pointer; color:var(--ink);
  font-family:var(--display); font-weight:600; font-size:.8rem;
  letter-spacing:.06em; text-transform:uppercase;
}
.nav-toggle-bars{ display:block; width:18px; }
.nav-toggle-bars i{
  display:block; height:2px; background:currentColor; border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s linear;
}
.nav-toggle-bars i+i{ margin-top:5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:first-child{ transform:translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:600; font-size:.9375rem;
  letter-spacing:-.005em; text-decoration:none; cursor:pointer;
  padding:.8rem 1.5rem; border-radius:var(--radius);
  border:1.5px solid transparent;
  transition:background .22s var(--ease), color .22s var(--ease),
             border-color .22s var(--ease), transform .22s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn-solid{ background:var(--pacific); color:#fff !important; }
.btn-solid:hover{ background:var(--ink); color:#EE5B25
; }

.btn-ghost{ border-color:var(--pacific); color:var(--pacific); background:transparent; }
.btn-ghost:hover{ background:var(--pacific); color:#fff; }

.btn-poppy{ background:var(--poppy); color:#fff; border:0; }
.btn-poppy:hover{ background:#d34a17; color:#fff; }

.btn-block{ width:100%; padding-block:1rem; }

/* =========================================================
   Shared section furniture
   ========================================================= */
.section{ padding-block:var(--section-y); }

.section-label{
  font-family:var(--display); font-weight:700; font-size:.75rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--poppy);
  margin:0 0 1.5rem; display:flex; align-items:center; gap:.85rem;
}
.section-label::after{
  content:""; height:1px; flex:1; max-width:180px; background:var(--line);
}
.section-label-light{ color:#F09A6E; }
.section-label-light::after{ background:var(--line-light); }

.section-title{
  font-size:clamp(1.9rem, 3.6vw, 3rem);
  max-width:19ch; margin:0 0 1.25rem;
}
.section-title-light{ color:#fff; max-width:22ch; }

.eyebrow{
  font-family:var(--display); font-weight:700; font-size:.75rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--pacific);
  margin:0 0 1.5rem;
}

.block{ margin-top:3.25rem; }
.block-title{
  font-size:1.0625rem; letter-spacing:.02em; text-transform:uppercase;
  font-weight:700; color:var(--pacific);
  padding-bottom:.75rem; margin-bottom:1.5rem;
  border-bottom:1px solid var(--line);
}

/* =========================================================
   Hero
   ========================================================= */
.hero{ padding-top:clamp(2.5rem, 5vw, 4.5rem); padding-bottom:clamp(2.5rem, 5vw, 4rem); }

.hero-grid{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);
  gap:clamp(2rem, 5vw, 4.5rem); align-items:center;
}

.hero-title{
  font-size:clamp(2.35rem, 6.1vw, 4.4rem);
  line-height:1.02; letter-spacing:-.035em; font-weight:800;
  margin:0 0 1.5rem; text-wrap:balance;
}

/* --- Signature: a hand-drawn stroke that follows the promise
       across every line it wraps onto, and draws itself on load --- */
.mark{
  display:inline;
  color:var(--pacific);
  padding-bottom:.14em;
  -webkit-box-decoration-break:clone;
          box-decoration-break:clone;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 34' preserveAspectRatio='none'%3E%3Cpath d='M6 21C88 9 190 4 312 6c108 2 196 8 300 17' fill='none' stroke='%23EE5B25' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M14 31C104 21 214 17 330 19c96 2 178 6 272 12' fill='none' stroke='%23EE5B25' stroke-opacity='0.38' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% .3em;
  animation:markIn 1.05s var(--ease) .45s forwards;
}
@keyframes markIn{ to{ background-size:100% .3em; } }

.hero-lede{ font-size:1.0625em; color:var(--muted); max-width:56ch; }

.hero-declare{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.1rem, 1.6vw, 1.4rem); line-height:1.25;
  letter-spacing:-.02em; color:var(--ink);
  border-left:3px solid var(--poppy); padding-left:1.1rem;
  margin:2rem 0 2.25rem; max-width:34ch;
}

.hero-actions{ display:flex; flex-wrap:wrap; gap:.85rem; }

.hero-portrait{ position:relative; margin:0; }
.hero-portrait img{
  position:relative; z-index:1; width:100%;
  border-radius:var(--radius);
  box-shadow:0 22px 50px -28px rgba(12,38,48,.55);
}
.portrait-block{
  position:absolute; z-index:0;
  left:-18px; bottom:-18px; width:62%; height:58%;
  background:var(--poppy);
  border-radius:var(--radius);
}

/* Credential strip */
.cred-strip{
  display:flex; flex-wrap:wrap; gap:0;
  margin-top:clamp(3rem, 6vw, 5rem);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.cred-strip li{
  flex:1 1 210px; padding:1.15rem 1.5rem 1.15rem 0;
  border-right:1px solid var(--line);
}
.cred-strip li:last-child{ border-right:0; }
.cred-strip li + li{ padding-left:1.5rem; }
.cred-strip span{
  font-family:var(--display); font-weight:600; font-size:.9375rem;
  line-height:1.35; letter-spacing:-.01em; color:var(--ink); display:block;
}

/* =========================================================
   About
   ========================================================= */
.section-about{ background:var(--paper); padding-top: 10px;}

.about-intro{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem, 4vw, 3.5rem); align-items:start;
}
.about-lede{ font-size:1.0625em; color:var(--muted); margin:0; }

/* Record of service */
.record{ border-top:1px solid var(--line); }
.record-row{
  display:grid; grid-template-columns:150px minmax(0,1fr);
  gap:clamp(1rem, 3vw, 2.5rem);
  padding:2rem 0; border-bottom:1px solid var(--line);
}
.record-years{
  font-family:var(--display); font-weight:600; font-size:.8125rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  display:block; padding-top:.45rem;
}
.record-years b{
  display:block; font-size:2.9rem; font-weight:800; line-height:.95;
  letter-spacing:-.05em; color:var(--pacific); text-transform:none;
  margin-bottom:.15rem;
}
.record-body h4{ font-size:1.375rem; margin-bottom:.35rem; }
.record-body p{ color:var(--muted); margin-bottom:0; }
.record-body p + p{ margin-top:.65rem; }
.record-org{
  font-family:var(--display); font-weight:600; font-size:.875rem;
  letter-spacing:.01em; color:var(--lupine) !important;
}

/* Two-column about */
.about-split{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(2rem, 5vw, 4rem); align-items:start; margin-top:1rem;
}
.about-split-text p{ color:var(--muted); }
.about-media{
  margin-top:3.25rem;
  display:grid; gap:clamp(1.5rem, 3vw, 2.25rem);
}
.about-figure{ margin:0; }
.about-figure img{
  width:100%; border-radius:var(--radius);
  box-shadow:0 18px 44px -30px rgba(12,38,48,.5);
}
.about-figure figcaption{
  font-family:var(--display); font-size:.8125rem; font-weight:600;
  letter-spacing:.03em; line-height:1.45; color:var(--muted);
  margin-top:.85rem;
}

.role-list{ margin:0 0 1.05em; }
.role-list li{
  position:relative; padding-left:1.5rem; margin-bottom:.5rem;
  font-family:var(--display); font-weight:600; font-size:1rem;
  letter-spacing:-.01em; color:var(--ink);
}
.role-list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:9px; height:2px; background:var(--poppy);
}

.values{
  margin:clamp(3rem, 6vw, 5rem) 0 0; padding:clamp(1.75rem, 4vw, 2.75rem) 0 0;
  border-top:3px solid var(--ink); max-width:62ch;
}
.values-label{
  font-family:var(--display); font-weight:700; font-size:.75rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--lupine);
  margin-bottom:1rem;
}
.values p:last-child{
  font-size:clamp(1.2rem, 2.1vw, 1.6rem); line-height:1.45;
  color:var(--ink); margin:0;
}
.values em{ color:var(--pacific); font-style:italic; }

/* =========================================================
   Priorities  (dark section)
   ========================================================= */
.section-priorities{ background:var(--ink); color:var(--fog); }
.section-priorities .section-title{ margin-bottom:clamp(2.5rem, 5vw, 4rem); }

.priorities{ display:grid; gap:0; }

.priority{
  display:grid; grid-template-columns:minmax(0,.3fr) minmax(0,.7fr);
  column-gap:clamp(1.5rem, 4vw, 3.5rem); row-gap:0;
  padding:clamp(2.25rem, 4vw, 3.25rem) 0;
  border-top:1px solid var(--line-light);
}
.priority:last-child{ border-bottom:1px solid var(--line-light); }

/* Everything but the tag lives in the right-hand column */
.priority > *{ grid-column:2; }

.priority-tag{
  font-family:var(--display); font-weight:700; font-size:.75rem;
  letter-spacing:.18em; text-transform:uppercase; color:#F09A6E;
  margin:0; padding-top:.5rem;
}
.priority-title{
  font-size:clamp(1.35rem, 2.5vw, 2rem); color:#fff;
  margin-bottom:1rem; letter-spacing:-.03em;
}
.priority-text{ color:var(--muted-lt); max-width:60ch; margin-bottom:0; }
.priority-text strong{ color:#fff; font-weight:600; }
.priority-text em{ color:#F09A6E; font-style:italic; }

.priority-pledge{
  font-family:var(--display); font-weight:600; font-size:.875rem;
  letter-spacing:.05em; text-transform:uppercase; color:#fff;
  margin:1.75rem 0 1rem;
}
.pledge-list{ max-width:62ch; }
.pledge-list li{
  position:relative; padding-left:1.9rem; margin-bottom:.85rem;
  color:var(--muted-lt);
}
.pledge-list li::before{
  content:""; position:absolute; left:0; top:.66em;
  width:11px; height:11px; border:2px solid var(--poppy);
  border-radius:50%;
}

/* Tag sits in column 1, spanning the article's rows */
.priority > .priority-tag{ grid-column:1; grid-row:1 / span 4; }

/* =========================================================
   Endorsements
   ========================================================= */
.section-endorsements{ background:var(--fog); }
.endorse-grid{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem, 5vw, 4.5rem); align-items:start;
}
.endorse-note{ color:var(--muted); max-width:44ch; margin-bottom:1.75rem; }

.endorser-list{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr));
  gap:1px; background:var(--line);
  border:1px solid var(--line);
}
.endorser{ background:var(--fog); padding:1.15rem 1.25rem; }
.endorser-name{
  display:block; font-family:var(--display); font-weight:700;
  font-size:1.0625rem; letter-spacing:-.02em; color:var(--ink);
}
.endorser-title{
  display:block; font-size:.875rem; line-height:1.4;
  color:var(--muted); margin-top:.2rem;
}
.endorser.is-placeholder{ grid-column:1 / -1; }
.endorser.is-placeholder .endorser-name{ color:var(--muted); }

/* =========================================================
   FAQ
   ========================================================= */
.faq-intro{ color:var(--muted); max-width:52ch; margin-bottom:2.5rem; }

.accordion{ border-top:1px solid var(--line); }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-item h3{ margin:0; font-size:inherit; letter-spacing:normal; }

.acc-trigger{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1.5rem; width:100%; text-align:left; cursor:pointer;
  background:none; border:0; padding:1.5rem 0; color:var(--ink);
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.0625rem, 1.6vw, 1.3125rem);
  letter-spacing:-.02em; line-height:1.25;
  transition:color .2s var(--ease);
}
.acc-trigger:hover{ color:var(--pacific); }
.acc-trigger[aria-expanded="true"]{ color:var(--pacific); }

.acc-icon{
  position:relative; flex:0 0 22px; width:22px; height:22px;
  margin-top:.2em;
}
.acc-icon::before,
.acc-icon::after{
  content:""; position:absolute; left:50%; top:50%;
  background:var(--poppy); border-radius:2px;
  transform:translate(-50%,-50%);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.acc-icon::before{ width:16px; height:2.5px; }
.acc-icon::after{ width:2.5px; height:16px; }
.acc-trigger[aria-expanded="true"] .acc-icon::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }

.acc-panel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .38s var(--ease);
}
.acc-panel.is-open{ grid-template-rows:1fr; }
.acc-panel-inner{ overflow:hidden; }
.acc-panel-inner > *:first-child{ padding-top:.25rem; }
.acc-panel-inner > *:last-child{ margin-bottom:1.75rem; }
.acc-panel-inner p,
.acc-panel-inner li{ color:var(--muted); max-width:66ch; }
.acc-panel-inner strong{ color:var(--ink); font-weight:600; }

.tick-list{ margin:0 0 1.05em; }
.tick-list li{ position:relative; padding-left:1.4rem; margin-bottom:.4rem; }
.tick-list li::before{
  content:""; position:absolute; left:0; top:.68em;
  width:7px; height:7px; background:var(--lupine); border-radius:50%;
}

/* =========================================================
   Join / contact  (dark section)
   ========================================================= */
.section-join{ background:var(--pacific); color:var(--fog); }
.join-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2.5rem, 6vw, 5rem); align-items:start;
}
.join-text{ color:var(--muted-lt); max-width:44ch; }

.contact-list{ margin-top:2.25rem; border-top:1px solid var(--line-light); }
.contact-list li{
  display:flex; gap:1.25rem; align-items:baseline;
  padding:.85rem 0; border-bottom:1px solid var(--line-light);
}
.contact-key{
  flex:0 0 68px; font-family:var(--display); font-weight:700;
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  color:#F09A6E;
}
.contact-list a{ color:#fff; text-decoration-color:rgba(255,255,255,.4); }
.contact-list a:hover{ color:#F09A6E; }
.contact-list span:not(.contact-key){ color:var(--muted-lt); }

/* Form */
.join-form{ background:#fff; color:var(--ink); padding:clamp(1.5rem, 3.5vw, 2.5rem); border-radius:var(--radius); }
.field{ margin-bottom:1.25rem; border:0; padding:0; }
.field-row{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:1rem; }

.join-form label,
.join-form legend{
  display:block; font-family:var(--display); font-weight:600;
  font-size:.8125rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.5rem; padding:0;
}
.optional{ text-transform:none; letter-spacing:0; font-weight:400; }

.join-form input[type="text"],
.join-form input[type="email"],
.join-form textarea{
  width:100%; font-family:var(--body); font-size:1rem; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line);
  border-radius:var(--radius); padding:.75rem .9rem;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.join-form input:focus,
.join-form textarea:focus{ border-color:var(--pacific); background:#fff; }
.join-form textarea{ resize:vertical; min-height:110px; }
.join-form input.has-error{ border-color:var(--poppy); }

.field-error{
  font-family:var(--display); font-size:.8125rem; font-weight:600;
  color:#C63F12; margin:.4rem 0 0; min-height:0;
}
.field-error:empty{ display:none; }

.checks{ display:flex; flex-wrap:wrap; gap:.6rem; }

/* Scoped to .join-form so it beats the generic `.join-form label` rule above */
.join-form .check{
  display:inline-flex; align-items:center; gap:.55rem;
  margin:0; padding:.6rem .95rem; cursor:pointer;
  border:1.5px solid var(--line); border-radius:var(--radius);
  font-family:var(--display); font-size:.9375rem; font-weight:600;
  text-transform:none; letter-spacing:-.005em; color:var(--ink);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.join-form .check:hover{ border-color:var(--pacific); }
.join-form .check input{ accent-color:var(--pacific); width:16px; height:16px; margin:0; flex:0 0 auto; }
.join-form .check:has(input:checked){ border-color:var(--pacific); background:var(--fog); }
.join-form .check:has(input:focus-visible){ outline:3px solid var(--poppy); outline-offset:2px; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-status{
  font-family:var(--display); font-weight:600; font-size:.9375rem;
  margin:1rem 0 0; color:var(--pacific);
}
.form-status:empty{ display:none; }
.form-status.is-error{ color:#C63F12; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{ background:var(--ink); color:var(--muted-lt); padding-block:clamp(2.5rem, 5vw, 4rem); }
.footer-inner{ display:grid; gap:2rem; }
.footer-name{
  font-family:var(--display); font-weight:800; font-size:1.25rem;
  letter-spacing:-.03em; color:#fff; margin:0;
}
.footer-role{
  font-family:var(--display); font-weight:600; font-size:.6875rem;
  letter-spacing:.14em; text-transform:uppercase; color:#F09A6E; margin:.25rem 0 0;
}
.footer-nav{ display:flex; flex-wrap:wrap; gap:1.5rem; }
.footer-nav a{
  font-family:var(--display); font-weight:600; font-size:.9rem;
  color:var(--fog); text-decoration:none;
}
.footer-nav a:hover{ color:#F09A6E; }
.footer-legal{ padding-top:1.75rem; border-top:1px solid var(--line-light); }
.disclaimer{
  font-family:var(--display); font-weight:600; font-size:.8125rem;
  letter-spacing:.02em; color:var(--fog); margin:0 0 .5rem;
}
.copyright{ font-size:.8125rem; margin:0; }

/* =========================================================
   Scroll reveal
   ========================================================= */
.reveal{ opacity:0; transform:translateY(18px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal[data-delay="1"].is-in{ transition-delay:.07s; }
.reveal[data-delay="2"].is-in{ transition-delay:.14s; }
.reveal[data-delay="3"].is-in{ transition-delay:.21s; }
.reveal[data-delay="4"].is-in{ transition-delay:.28s; }
.reveal[data-delay="5"].is-in{ transition-delay:.35s; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1000px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-portrait{ max-width:420px; order:-1; }
  .about-intro{ grid-template-columns:1fr; gap:1rem; }
  .about-split{ grid-template-columns:1fr; }
  .about-figure{ position:static; max-width:380px; }
  .endorse-grid{ grid-template-columns:1fr; }
  .join-grid{ grid-template-columns:1fr; }
  .priority{ grid-template-columns:1fr; gap:.75rem; }
  .priority > .priority-tag,
  .priority-title,
  .priority-text,
  .priority-pledge,
  .pledge-list{ grid-column:1; grid-row:auto; }
  .priority-tag{ margin-bottom:.4rem; }
}

@media (max-width: 780px){
  html{ scroll-padding-top:80px; }
  .nav-toggle{ display:inline-flex; }

  .primary-nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:.5rem var(--gutter) 1.5rem;
    box-shadow:0 20px 40px -30px rgba(12,38,48,.6);
    display:none;
  }
  .primary-nav.is-open{ display:flex; }
  .primary-nav ul{ flex-direction:column; align-items:stretch; gap:0; }
  .primary-nav li{ border-bottom:1px solid var(--line); }
  .primary-nav ul a{ display:block; padding:.95rem 0; font-size:1.0625rem; }
  .primary-nav a::after{ display:none; }
  .nav-cta{ margin-top:1.25rem; }

  .record-row{ grid-template-columns:1fr; gap:.5rem; }
  .record-years{ padding-top:0; }
  .record-years b{ display:inline; font-size:1.6rem; margin-right:.25rem; }

  .cred-strip li{ flex-basis:100%; border-right:0; border-bottom:1px solid var(--line); padding:.9rem 0; }
  .cred-strip li:last-child{ border-bottom:0; }
  .cred-strip li + li{ padding-left:0; }

  .field-row{ grid-template-columns:1fr; }
  .hero-actions .btn{ flex:1 1 100%; }
}

/* =========================================================
   Motion & print
   ========================================================= */
@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; }
  .mark{ background-size:100% .3em; }
  .acc-panel.is-open{ grid-template-rows:1fr; }
}

@media print{
  .site-header,.nav-toggle,.hero-actions,.join-form,.footer-nav{ display:none !important; }
  body{ background:#fff; color:#000; }
  .acc-panel{ grid-template-rows:1fr !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}