:root{
    --paper:#FBF7EE; --paper-2:#F3ECDD; --card:#FFFFFF; --ink:#1A1623; --muted:#544E60; --hair:#D9CFBE;
    --fixed-ink:#1A1623; /* a dark surface that never flips — for tiles/badges that hold light content in both themes */
    --ease:cubic-bezier(.2,.85,.25,1); /* shared spring easing (matches PrismaOS) */
    --cobalt:#2240E6; --tomato:#E23A1E; --lime:#C6F24E; --violet:#6D28D9; --pink:#E0237E; --sun:#FFC53D; --teal:#0E978C;
    /* AA-safe variants for white text on color (≥4.5:1 on #fff) — brand hues, slightly deepened */
    --pink-aa:#C21368; --teal-aa:#0B7A71; --tomato-aa:#CE3018;
    /* Primary UI accent — defaults to the brand cobalt; a user accent choice
       overrides --accent inline (set by ThemeScript). All options clear AA on white. */
    --accent:#2240E6;
    --disp:'Bricolage Grotesque',system-ui,sans-serif; --sans:'Hanken Grotesk',system-ui,sans-serif;
    --mono:'Space Mono',monospace; --hand:'Caveat',cursive;
    /* Foreground label hierarchy (Apple): primary → secondary → tertiary. --label-2
       tracks --muted so it flips with theme/contrast; --label-3 is overridden per theme. */
    --label:var(--ink); --label-2:var(--muted); --label-3:#6E6878;
    /* Type scale is rem-based so text honours the browser's font-size setting
       (Apple Dynamic Type): body ≈17px (1.0625rem); display headings use fluid clamps. */
  }
  *{box-sizing:border-box;margin:0;}
  button{color:inherit;}
  html{scroll-behavior:smooth;scroll-padding-top:84px;background:#1A1623;}
  body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;}
  main{flex:1 0 auto;}
  /* Headings must not inherit the 1.6 body line-height — that's what made cards
     and prose headings look stretched/oddly spaced. */
  h1,h2,h3,h4{line-height:1.15;}
  a{color:inherit;text-decoration:none;}
  img{display:block;max-width:100%;}
  ::selection{background:var(--lime);}
  .wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
  .mono{font-family:var(--mono);font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;}
  :focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px;}
  .skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;font-weight:700;}
  .skip:focus{left:12px;}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans);font-weight:700;font-size:1rem;cursor:pointer;border:2px solid var(--ink);border-radius:10px;padding:12px 22px;transition:transform .16s var(--ease),box-shadow .16s var(--ease);}
  .btn-primary{background:var(--accent);color:#fff;box-shadow:3px 3px 0 var(--ink);}
  .btn-primary:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink);}
  .btn-secondary{background:var(--sun);color:var(--ink);box-shadow:3px 3px 0 var(--ink);}
  .btn-secondary:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink);}
  .btn-ghost{background:transparent;color:var(--ink);}
  .btn-ghost:hover{background:var(--ink);color:var(--paper);}
  /* pressed state: settle the sticker shadow for tactile feedback */
  .btn-primary:active,.btn-secondary:active{transform:translate(0,0);box-shadow:2px 2px 0 var(--ink);}
  .btn-ghost:active{transform:translate(0,1px);}

  /* Scroll-reveal: sections fade/rise as they enter view. Only active when motion
     is allowed; the class is added by JS, so no-JS / reduced-motion users always
     see content. Defined inside no-preference so the hidden state never sticks. */
  @media (prefers-reduced-motion:no-preference){
    .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease);will-change:opacity,transform;}
    .reveal.in{opacity:1;transform:none;}
  }

  .topstripe{display:flex;height:5px;}
  .topstripe span{flex:1;}

  /* HEADER */
  header{position:sticky;top:0;z-index:60;background:rgba(251,247,238,0.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:2px solid var(--ink);will-change:transform;}
  /* Material adapts to accessibility settings (Apple): drop blur/translucency for high-contrast + reduced-transparency. */
  [data-contrast="high"] header{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:var(--paper)!important;}
  @media (prefers-reduced-transparency:reduce){ header{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:var(--paper)!important;} }
  .announce{display:block;background:var(--ink);color:var(--paper);text-align:center;font-size:0.84375rem;font-weight:600;line-height:1.4;padding:9px 16px;text-decoration:none;}
  a.announce:hover{text-decoration:underline;text-underline-offset:2px;}
  .nav{display:flex;align-items:center;gap:24px;height:68px;}
  .logo{display:flex;align-items:center;gap:10px;}
  .logo img{height:30px;}
  .navlinks{display:flex;gap:4px;margin-left:6px;}
  .navlinks a{font-weight:600;font-size:0.9375rem;padding:8px 13px;border-radius:8px;transition:background .15s var(--ease),box-shadow .15s var(--ease);}
  .navlinks a:hover{background:var(--paper-2);}
  .navlinks a[aria-current="page"]{background:var(--paper-2);box-shadow:inset 0 -2px 0 var(--accent);}
  .navcta{margin-left:auto;display:flex;align-items:center;gap:10px;}
  .os-link{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:0.75rem;border:1.5px solid var(--hair);background:var(--paper-2);padding:8px 12px;border-radius:8px;font-weight:700;transition:border-color .15s var(--ease);}
  .os-link:hover{border-color:var(--ink);}
  .navtoggle{display:none;background:var(--card);border:2px solid var(--ink);border-radius:9px;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;}
  .navtoggle span,.navtoggle span::before,.navtoggle span::after{display:block;width:20px;height:2.5px;background:var(--ink);position:relative;}
  .navtoggle span::before{content:"";position:absolute;top:-6px;}
  .navtoggle span::after{content:"";position:absolute;top:6px;}

  /* HERO */
  .hero{padding:64px 0 26px;}
  .kicker{display:inline-block;font-family:var(--mono);font-size:0.75rem;letter-spacing:0.06em;color:var(--muted);background:var(--paper-2);border:1.5px solid var(--hair);padding:6px 12px;border-radius:8px;}
  .hero h1{font-family:var(--disp);font-weight:800;font-size:clamp(2.75rem,7vw,5.375rem);line-height:0.92;letter-spacing:-0.035em;margin-top:20px;}
  .ulw{position:relative;display:inline-block;color:var(--tomato);}
  .ulw svg{position:absolute;left:-2%;bottom:-0.18em;width:104%;height:0.34em;overflow:visible;}
  .hero .lede{font-size:1.1875rem;color:var(--muted);max-width:560px;margin-top:20px;}
  .hero .acts{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;}
  .heroimgs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:40px;}
  .heroimgs .ph{aspect-ratio:1/1.04;border:2px solid var(--ink);border-radius:16px;overflow:hidden;box-shadow:3px 3px 0 var(--ink);}
  .heroimgs .ph img{width:100%;height:100%;object-fit:cover;}

  /* marquee */
  .marquee{background:var(--ink);color:var(--paper);overflow:hidden;padding:13px 0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);margin-top:46px;}
  .mtrack{display:flex;width:max-content;animation:bmar 55s linear infinite;}
  .marquee:hover .mtrack{animation-play-state:paused;}
  .mtrack span{font-family:var(--disp);font-weight:700;font-size:1.375rem;white-space:nowrap;padding:0 22px;display:inline-flex;align-items:center;gap:22px;}
  .dotc{width:10px;height:10px;border-radius:50%;}
  @keyframes bmar{to{transform:translateX(-50%);}}

  section{padding:80px 0;}
  .sec-h{margin-bottom:34px;}
  /* DO NOT USE: an eyebrow above a heading is not part of this design system.
     Rule kept only so old markup doesn't render unstyled. */
  .sec-h .mono{color:var(--muted);display:block;margin-bottom:10px;}
  .sec-h h2{font-family:var(--disp);font-weight:800;font-size:clamp(1.875rem,4vw,2.875rem);line-height:1;letter-spacing:-0.025em;}

  .pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch;}
  .pcard{display:flex;flex-direction:column;background:var(--card);border:2px solid var(--ink);border-radius:18px;padding:24px;box-shadow:4px 4px 0 var(--ink);transition:transform .18s var(--ease),box-shadow .18s var(--ease);}
  .pcard:hover,.pcard:focus-visible{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink);}
  .pcard .pn{width:46px;height:46px;border:2px solid var(--ink);border-radius:12px;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700;margin-bottom:16px;}
  .pcard h3{font-family:var(--disp);font-weight:700;font-size:1.375rem;letter-spacing:-0.01em;}
  .pcard .pgo{opacity:0;color:var(--acc);margin-left:3px;display:inline-block;transition:opacity .15s,transform .15s;}
  .pcard:hover .pgo,.pcard:focus-visible .pgo{opacity:1;transform:translateX(3px);}
  .pcard p{font-size:0.90625rem;color:var(--muted);margin-top:8px;line-height:1.5;}

  .events-sec{background:var(--paper-2);}
  .egrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .ecard{background:var(--card);border:2px solid var(--ink);border-radius:18px;overflow:hidden;box-shadow:4px 4px 0 var(--ink);display:flex;flex-direction:column;transition:transform .18s var(--ease),box-shadow .18s var(--ease);}
  .ecard:hover,.ecard:focus-visible{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink);}
  .ecard .pic{height:172px;border-bottom:2px solid var(--ink);overflow:hidden;position:relative;}
  .ecard .pic img{width:100%;height:100%;object-fit:cover;}
  .ecard .bd{position:absolute;top:14px;left:14px;font-family:var(--mono);font-size:0.625rem;letter-spacing:0.06em;text-transform:uppercase;color:#fff;padding:5px 10px;border-radius:999px;border:2px solid var(--ink);}
  .ecard .eb{padding:22px;}
  .ecard h3{font-family:var(--disp);font-weight:800;font-size:1.625rem;letter-spacing:-0.02em;}
  .ecard p{font-size:0.875rem;color:var(--muted);margin-top:8px;}

  .fs{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;background:var(--lime);border:2px solid var(--ink);border-radius:22px;padding:42px;box-shadow:4px 4px 0 var(--ink);}
  .fs .chip{font-family:var(--mono);font-size:0.6875rem;letter-spacing:0.1em;text-transform:uppercase;font-weight:700;background:var(--ink);color:var(--lime);padding:6px 11px;border-radius:999px;display:inline-block;}
  .fs h2{font-family:var(--disp);font-weight:800;font-size:clamp(1.875rem,4vw,2.625rem);letter-spacing:-0.02em;margin:14px 0 8px;}
  .fs .ph{border:2px solid var(--ink);border-radius:14px;overflow:hidden;height:180px;box-shadow:3px 3px 0 var(--ink);}
  .fs .ph img{width:100%;height:100%;object-fit:cover;}

  .manifesto{text-align:center;}
  .manifesto p.big{font-family:var(--disp);font-weight:700;font-size:clamp(1.625rem,3.6vw,2.625rem);line-height:1.18;letter-spacing:-0.02em;max-width:920px;margin:14px auto 0;}
  .manifesto .mk{background:var(--lime);padding:0 .08em;border-radius:5px;box-decoration-break:clone;-webkit-box-decoration-break:clone;}

  /* volunteer form */
  .vol{background:var(--ink);color:var(--paper);}
  .volgrid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;}
  .vol h2{font-family:var(--disp);font-weight:800;font-size:clamp(1.875rem,4vw,2.875rem);letter-spacing:-0.025em;color:#fff;}
  .vol p.sub{color:#C9C3D6;margin-top:14px;max-width:420px;}
  .vol .hand{font-family:var(--hand);font-weight:700;font-size:1.5rem;color:var(--sun);margin-top:18px;display:block;}
  form .field{margin-bottom:16px;}
  form label{display:block;font-weight:600;font-size:0.875rem;margin-bottom:6px;color:#EDE9F4;}
  form input,form select,form textarea{width:100%;font-family:var(--sans);font-size:1rem;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:10px;padding:12px 14px;}
  form input:focus-visible,form select:focus-visible,form textarea:focus-visible{outline:3px solid var(--sun);outline-offset:1px;}
  form .hint{font-size:0.78125rem;color:#A49DB4;margin-top:5px;}
  .formok{background:var(--lime);color:var(--ink);border:2px solid #000;border-radius:12px;padding:18px 20px;font-weight:600;display:none;line-height:1.45;}
  .formok.show{display:block;}
  form textarea{resize:vertical;min-height:64px;line-height:1.5;}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden;}
  /* Visually-hidden but available to screen readers (labels, context). */
  .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;}
  .req{color:var(--sun);}
  .opt{color:#A49DB4;font-weight:400;font-size:0.75rem;}
  fieldset.checks{border:none;padding:0;margin-bottom:16px;min-width:0;}
  fieldset.checks legend{font-weight:600;font-size:0.875rem;margin-bottom:8px;color:#EDE9F4;padding:0;}
  .checks label{display:flex;align-items:center;gap:9px;font-weight:500;font-size:0.875rem;color:#EDE9F4;margin-bottom:8px;}
  .checks input[type=checkbox]{width:18px;height:18px;flex:none;accent-color:var(--lime);}
  .consent{display:flex;align-items:flex-start;gap:10px;font-size:0.84375rem;color:#EDE9F4;margin:2px 0 14px;font-weight:500;}
  .consent input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--lime);}
  form input[type=file]{padding:9px 11px;background:var(--paper-2);color:var(--ink);font-size:0.8125rem;}
  .formerr{color:#FFC2B5;font-weight:600;font-size:0.84375rem;min-height:18px;margin-bottom:8px;}
  .formerr a{color:#fff;text-decoration:underline;}

  /* safety quick-exit (queer/DV best practice) */
  .quick-exit{position:fixed;right:16px;bottom:16px;z-index:300;display:inline-flex;align-items:center;gap:7px;background:var(--tomato-aa);color:#fff;border:2px solid var(--ink);border-radius:999px;padding:9px 15px;font-family:var(--sans);font-weight:700;font-size:0.875rem;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:transform .12s,box-shadow .12s;}
  .quick-exit:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink);}
  .quick-exit:active{transform:translate(0,0);box-shadow:2px 2px 0 var(--ink);}
  .quick-exit .qx{font-size:0.9375rem;line-height:1;}
  @media (max-width:560px){ .quick-exit{padding:8px 13px;font-size:0.8125rem;} }

  footer{background:var(--ink);color:#CFCAD9;padding:0 0 36px;}
  .footprism{height:5px;display:flex;}.footprism span{flex:1;}
  .foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr 1fr;gap:28px;padding-top:42px;}
  footer .fmark{height:38px;margin-bottom:14px;}
  footer .ftag{font-size:0.875rem;color:#B7B2C2;max-width:240px;}
  footer .fhand{font-family:var(--hand);font-weight:700;font-size:1.25rem;color:var(--sun);margin-top:16px;display:block;}
  .fcol h3{font-family:var(--mono);font-size:0.6875rem;letter-spacing:0.12em;text-transform:uppercase;color:#8C86A0;margin-bottom:13px;}
  .fcol a{display:block;font-size:0.875rem;color:#CFCAD9;margin-bottom:9px;}
  .fcol a:hover{color:#fff;text-decoration:underline;}
  .foot-bot{display:flex;justify-content:space-between;gap:14px;margin-top:30px;padding-top:20px;border-top:1px solid #312B3D;font-size:0.78125rem;color:#8C86A0;flex-wrap:wrap;}
  .fsocial{display:flex;gap:10px;flex-wrap:wrap;}
  .fsocial a{width:38px;height:38px;border:1.5px solid #3A3550;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#CFCAD9;transition:border-color .15s,color .15s,transform .12s;}
  .fsocial a:hover{border-color:#fff;color:#fff;transform:translateY(-2px);}
  .fsocial svg{width:18px;height:18px;}

  @media (max-width:1100px){
    .nav{gap:16px;}
    section{padding:64px 0;}
    .hero{padding:52px 0 22px;}
  }
  @media (max-width:900px){
    .navlinks{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0;background:var(--paper);border-bottom:2px solid var(--ink);padding:8px;}
    .navlinks.open{display:flex;}
    .navlinks a{padding:13px;border-radius:9px;}
    .navlinks a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--cobalt);}
    .navtoggle{display:flex;}
    .os-link{display:none;}
    section{padding:56px 0;}
    .pgrid{grid-template-columns:1fr 1fr;}
    .egrid{grid-template-columns:1fr;}
    .fs{grid-template-columns:1fr;padding:32px;}
    .volgrid{grid-template-columns:1fr;gap:26px;}
    .heroimgs{grid-template-columns:1fr 1fr;}
    .foot-top{grid-template-columns:1fr 1fr;gap:26px;}
  }
  @media (max-width:560px){
    section{padding:44px 0;}
    .hero{padding:40px 0 18px;}
    .pgrid{grid-template-columns:1fr;}
    .heroimgs .ph:nth-child(3){display:none;}
    .fs{padding:26px;}
    .amts{grid-template-columns:1fr 1fr 1fr;}
    .foot-top{grid-template-columns:1fr 1fr;gap:22px 18px;}
    .foot-top>div:first-child{grid-column:1/-1;}
    .foot-bot{flex-direction:column;gap:8px;}
    .field-row{grid-template-columns:1fr;gap:0;}
  }
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}html{scroll-behavior:auto;}}

  /* ---------- interior pages (about / accessibility / events / donate) ---------- */
  .pagehead{padding:56px 0 0;}
  .breadcrumb{font-family:var(--mono);font-size:0.75rem;letter-spacing:.06em;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
  .breadcrumb a:hover{color:var(--ink);text-decoration:underline;}
  .pagehead h1{font-family:var(--disp);font-weight:800;font-size:clamp(2.375rem,6vw,4.25rem);line-height:.95;letter-spacing:-0.03em;margin-top:16px;}
  .pagehead .lede{font-size:1.1875rem;color:var(--muted);max-width:620px;margin-top:18px;}
  .prose{max-width:760px;}
  .prose h2{font-family:var(--disp);font-weight:800;font-size:clamp(1.625rem,3.2vw,2.25rem);letter-spacing:-0.02em;margin:40px 0 12px;}
  .prose h3{font-family:var(--disp);font-weight:700;font-size:1.375rem;letter-spacing:-0.01em;margin:26px 0 8px;}
  .prose p{margin-top:12px;color:var(--ink);}
  .prose ul{margin:12px 0 0;padding-left:22px;}
  .prose li{margin:7px 0;}
  .prose a.inline{color:var(--cobalt);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
  /* legal pages (terms / privacy) — sticky section nav + tidy meta */
  .legal-grid{display:grid;grid-template-columns:1fr;gap:30px;align-items:start;}
  .legal-grid .prose{max-width:none;}
  .legal-grid .prose > h2:first-of-type{margin-top:26px;}
  .legal-meta{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:0.75rem;letter-spacing:.05em;color:var(--muted);background:var(--paper-2);border:1.5px solid var(--hair);padding:6px 13px;border-radius:999px;}
  .legal-meta i{width:7px;height:7px;border-radius:50%;background:var(--lime);border:1px solid var(--ink);flex:none;}
  .legal-toc-h{font-family:var(--mono);font-size:0.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;}
  .legal-toc nav{display:flex;flex-direction:column;border-left:2px solid var(--hair);}
  .legal-toc a{font-size:0.84375rem;color:var(--muted);padding:6px 0 6px 14px;margin-left:-2px;border-left:2px solid transparent;line-height:1.3;}
  .legal-toc a:hover{color:var(--ink);border-left-color:var(--cobalt);}
  .prose h2[id]{scroll-margin-top:92px;}
  @media(min-width:1000px){
    .legal-grid{grid-template-columns:232px minmax(0,1fr);gap:52px;}
    .legal-grid .prose{max-width:720px;}
    .legal-toc{position:sticky;top:92px;}
  }
  .pullquote{font-family:var(--disp);font-weight:700;font-size:clamp(1.5rem,3.4vw,2.25rem);line-height:1.18;letter-spacing:-0.02em;border-left:5px solid var(--ink);padding:6px 0 6px 22px;margin:22px 0;}
  .pullquote .mk{background:var(--lime);padding:0 .08em;border-radius:5px;box-decoration-break:clone;-webkit-box-decoration-break:clone;}

  /* blog + knowledge base */
  .empty-note{text-align:center;padding:48px 20px;font-family:var(--hand);font-weight:700;font-size:1.625rem;color:var(--violet);}
  /* blog index */
  .postgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
  .postcard{display:flex;flex-direction:column;background:var(--card);border:2px solid var(--ink);border-radius:18px;overflow:hidden;box-shadow:4px 4px 0 var(--ink);transition:transform .18s var(--ease),box-shadow .18s var(--ease);}
  .postcard:hover,.postcard:focus-visible{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink);}
  .postcard .pic{aspect-ratio:16/9;border-bottom:2px solid var(--ink);overflow:hidden;}
  .postcard .pic img{width:100%;height:100%;object-fit:cover;}
  .postcard .pb{padding:22px;display:flex;flex-direction:column;flex:1;}
  .postcard .pdate{font-family:var(--mono);font-size:0.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--label-3);}
  .postcard h3{font-family:var(--disp);font-weight:800;font-size:1.4375rem;letter-spacing:-0.01em;margin-top:6px;}
  .postcard p{font-size:0.90625rem;color:var(--muted);margin-top:8px;line-height:1.5;}
  .postcard .more{margin-top:auto;padding-top:14px;font-weight:700;font-size:0.875rem;color:var(--cobalt);}
  .blog-empty{text-align:center;max-width:520px;margin:24px auto;background:var(--card);border:2px solid var(--ink);border-radius:22px;box-shadow:4px 4px 0 var(--ink);padding:48px 32px;}
  .blog-empty .be-ico{font-size:2.875rem;line-height:1;color:var(--violet);}
  .blog-empty h2{font-family:var(--disp);font-weight:800;font-size:1.75rem;letter-spacing:-0.02em;margin-top:14px;}
  .blog-empty p{color:var(--muted);margin:10px 0 22px;}
  @media (max-width:720px){ .postgrid{grid-template-columns:1fr;} }
  .faq{border:2px solid var(--ink);border-radius:12px;background:var(--card);box-shadow:3px 3px 0 var(--ink);margin:10px 0;overflow:hidden;}
  .faq summary{cursor:pointer;font-family:var(--disp);font-weight:700;font-size:1.0625rem;padding:14px 18px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;}
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary::after{content:"+";font-family:var(--mono);font-size:1.375rem;line-height:1;color:var(--muted);}
  .faq[open] summary::after{content:"\2013";}
  .faq summary:focus-visible{outline:3px solid var(--cobalt);outline-offset:-3px;}
  .faq .faq-a{padding:0 18px 16px;color:var(--ink);}
  .faq .faq-a p:first-child{margin-top:4px;}

  .leader{display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:center;background:var(--card);border:2px solid var(--ink);border-radius:18px;padding:24px;box-shadow:4px 4px 0 var(--ink);}
  .leader .av{width:120px;height:120px;border:2px solid var(--ink);border-radius:16px;background:var(--fixed-ink);display:flex;align-items:center;justify-content:center;box-shadow:3px 3px 0 var(--ink);}
  .leader .av img{height:64px;}
  .leader .role{font-family:var(--mono);font-size:0.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
  .leader h3{font-family:var(--disp);font-weight:800;font-size:1.625rem;letter-spacing:-0.02em;margin-top:4px;}
  .leader p{font-size:0.9375rem;color:var(--muted);margin-top:8px;max-width:480px;}

  .factgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:22px;}
  .fact{background:var(--paper-2);border:1.5px solid var(--hair);border-radius:12px;padding:16px 18px;}
  .fact .k{font-family:var(--mono);font-size:0.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
  .fact .v{font-weight:600;margin-top:5px;}
  .fact .v a:hover{text-decoration:underline;}
  /* press / media-kit assets */
  .presslogos{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;}
  .presslogo{display:flex;flex-direction:column;align-items:center;gap:12px;border:2px solid var(--ink);border-radius:16px;padding:26px 32px;box-shadow:3px 3px 0 var(--ink);text-decoration:none;color:var(--ink);transition:transform .16s var(--ease),box-shadow .16s var(--ease);}
  .presslogo:hover,.presslogo:focus-visible{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);}
  .presslogo img{height:52px;}
  .presslogo.light{background:var(--paper);}
  .presslogo.dark{background:var(--ink);color:var(--paper);}
  .presslogo span{font-family:var(--mono);font-size:0.75rem;letter-spacing:.04em;}
  .pressswatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin-top:16px;}
  .pressswatch{display:flex;align-items:center;gap:9px;font-size:0.8125rem;font-weight:600;}
  .pressswatch .sw{width:26px;height:26px;border-radius:7px;border:2px solid var(--ink);flex:none;}
  .pressswatch code{font-family:var(--mono);font-size:0.75rem;color:var(--muted);font-weight:400;}

  /* event detail */
  .evhero{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;}
  .evhero .pic{border:2px solid var(--ink);border-radius:20px;overflow:hidden;box-shadow:4px 4px 0 var(--ink);aspect-ratio:4/3;}
  .evhero .pic img{width:100%;height:100%;object-fit:cover;}
  .evbadge{display:inline-block;font-family:var(--mono);font-size:0.6875rem;letter-spacing:.06em;text-transform:uppercase;color:#fff;padding:6px 12px;border-radius:999px;border:2px solid var(--ink);}
  .quick{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
  .quick .q{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:0.75rem;background:var(--paper-2);border:1.5px solid var(--hair);border-radius:9px;padding:8px 12px;}
  .nextprev{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:2px solid var(--ink);margin-top:40px;padding-top:22px;}
  .nextprev a{font-weight:600;}
  .nextprev a:hover{color:var(--cobalt);text-decoration:underline;text-underline-offset:3px;}

  /* donate */
  .donate-grid{display:grid;grid-template-columns:1fr .9fr;gap:40px;align-items:start;}
  .donate-card{background:var(--card);border:2px solid var(--ink);border-radius:22px;padding:30px;box-shadow:4px 4px 0 var(--ink);}
  .seg{display:inline-flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden;background:var(--paper-2);}
  .seg button{font-family:var(--sans);font-weight:700;font-size:0.875rem;padding:9px 18px;border:none;background:transparent;cursor:pointer;color:var(--ink);}
  .seg button:hover:not([aria-pressed="true"]){background:var(--paper);}
  .seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper);}
  .amts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px;}
  .amt{font-family:var(--disp);font-weight:800;font-size:1.375rem;letter-spacing:-0.01em;border:2px solid var(--ink);border-radius:12px;padding:16px 0;background:var(--card);cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:transform .15s,box-shadow .15s;}
  .amt:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink);}
  .amt:active{transform:translate(0,0);box-shadow:2px 2px 0 var(--ink);}
  .amt[aria-pressed="true"]{background:var(--lime);}
  .amt-custom{margin-top:14px;position:relative;}
  .amt-custom span{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-family:var(--disp);font-weight:800;font-size:1.25rem;color:var(--muted);}
  .amt-custom input{width:100%;font-family:var(--disp);font-weight:800;font-size:1.25rem;padding:14px 14px 14px 34px;border:2px solid var(--ink);border-radius:12px;}
  .donside{background:var(--ink);color:var(--paper);border:2px solid var(--ink);border-radius:22px;padding:28px;box-shadow:4px 4px 0 var(--ink);}
  .donside h3{font-family:var(--disp);font-weight:800;font-size:1.5rem;color:#fff;letter-spacing:-0.01em;}
  .donside p{color:#C9C3D6;margin-top:10px;font-size:0.9375rem;}
  .donside .hand{font-family:var(--hand);font-weight:700;font-size:1.375rem;color:var(--sun);margin-top:16px;display:block;}

  @media (max-width:900px){
    .leader{grid-template-columns:1fr;text-align:center;}
    .leader .av{margin:0 auto;}
    .leader p{margin-left:auto;margin-right:auto;}
    .factgrid{grid-template-columns:1fr;}
    .evhero{grid-template-columns:1fr;}
    .donate-grid{grid-template-columns:1fr;}
    .valgrid{grid-template-columns:1fr;}
  }

  /* ---------- completion polish: manifesto card, partners CTA, category pillars,
     values, donate landing, KB search ---------- */
  .manifesto-card{position:relative;max-width:960px;margin:0 auto;background:var(--card);border:2px solid var(--ink);border-radius:24px;padding:52px 46px;box-shadow:6px 6px 0 var(--ink);}
  .manifesto-quote{position:absolute;top:2px;left:22px;font-family:var(--disp);font-weight:800;font-size:7.5rem;line-height:1;color:var(--lime);pointer-events:none;}
  .manifesto .big{margin-top:0;position:relative;}
  @media (max-width:560px){ .manifesto-card{padding:40px 24px;} .manifesto-quote{font-size:5.25rem;left:12px;} }

  /* partners / sponsors single-line CTA below the newsletter */
  .partners{padding:40px 0 64px;}
  .partners-line{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;text-align:center;font-size:1.0625rem;color:var(--muted);}
  .partners-line span{font-weight:600;color:var(--ink);}

  /* parallel-category cards (about / donate): color accent instead of a sequence number */
  .pdot{width:20px;height:20px;border-radius:50%;background:var(--acc);border:2px solid var(--ink);margin-bottom:16px;box-shadow:2px 2px 0 var(--ink);}

  /* "What we believe" values */
  .valgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
  .valcard{background:var(--card);border:2px solid var(--ink);border-left:8px solid var(--acc);border-radius:16px;padding:24px 26px;box-shadow:4px 4px 0 var(--ink);}
  .valcard p{font-family:var(--disp);font-weight:700;font-size:1.25rem;line-height:1.25;letter-spacing:-0.01em;color:var(--ink);}

  /* donate landing */
  .donate-redirect{margin-top:18px;font-size:0.875rem;color:var(--muted);}
  .inline-btn{background:none;border:none;padding:0;font:inherit;color:var(--cobalt);font-weight:700;text-decoration:underline;text-underline-offset:2px;cursor:pointer;}
  .donate-trust{font-size:0.875rem;color:var(--muted);background:var(--paper-2);border:1.5px solid var(--hair);border-radius:12px;padding:16px 18px;margin-top:0;}

  /* KB search + category jump-nav */
  .kb-search{margin:8px 0 16px;}
  .kb-search-label{display:block;font-family:var(--mono);font-size:0.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
  .kb-search input{width:100%;font-family:var(--sans);font-size:1rem;color:var(--ink);background:var(--card);border:2px solid var(--ink);border-radius:12px;padding:13px 16px;box-shadow:3px 3px 0 var(--ink);}
  .kb-search input:focus-visible{outline:3px solid var(--cobalt);outline-offset:1px;}
  .kb-jump{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
  .kb-jump a{font-family:var(--mono);font-size:0.75rem;color:var(--muted);background:var(--paper-2);border:1.5px solid var(--hair);border-radius:999px;padding:7px 13px;}
  .kb-jump a:hover{color:var(--ink);border-color:var(--ink);}
  .kb-noresults{color:var(--muted);}
  .kb-cat{margin-bottom:10px;}
  .kb-cat h2{scroll-margin-top:92px;}

  /* ============================================================
     THEMING — data-theme (light|dark) + data-contrast (normal|high) on <html>,
     set before paint by ThemeScript. Defaults follow the OS.
     ============================================================ */
  [data-theme="dark"]{
    --paper:#14121C; --paper-2:#211D2E; --card:#1C1925; --ink:#F1ECE0; --muted:#ADA6B8; --hair:#3A3449; --label-3:#8C86A0;
    background:#0E0C14; /* matches the dark footer so any area below it isn't a light gap */
  }
  /* --ink doubles as text AND as dark "inverted" surfaces; when it flips light, re-anchor those. */
  [data-theme="dark"] header{ background:rgba(20,18,28,0.92); }
  [data-theme="dark"] footer,
  [data-theme="dark"] .vol,
  [data-theme="dark"] .donside,
  [data-theme="dark"] .marquee{ background:#0E0C14; }
  [data-theme="dark"] .vol,
  [data-theme="dark"] .donside,
  [data-theme="dark"] .marquee{ color:#EDE9F4; }
  [data-theme="dark"] form input,
  [data-theme="dark"] form select,
  [data-theme="dark"] form textarea{ background:#1C1925; }
  [data-theme="dark"] .skip{ background:#0E0C14; }
  /* bright accent fills must keep dark text even though --ink is now light */
  [data-theme="dark"] .btn-secondary,
  [data-theme="dark"] .amt[aria-pressed="true"],
  [data-theme="dark"] .formok,
  [data-theme="dark"] .fs,
  [data-theme="dark"] .fs h2,
  [data-theme="dark"] .fs p,
  [data-theme="dark"] .fs .btn-ghost,
  [data-theme="dark"] .manifesto .mk,
  [data-theme="dark"] .pullquote .mk{ color:#1A1623; }
  [data-theme="dark"] .fs .chip{ background:#1A1623; }
  [data-theme="dark"] .btn-ghost:hover{ color:#14121C; }
  [data-theme="dark"] ::selection{ color:#1A1623; }

  /* High contrast — a genuine max-contrast theme (pure black/white), layered over light or dark. */
  [data-theme="light"][data-contrast="high"]{ --paper:#FFFFFF; --paper-2:#FFFFFF; --card:#FFFFFF; --ink:#000000; --muted:#000000; --hair:#000000; --fixed-ink:#000000; --label-3:#000000; }
  [data-theme="dark"][data-contrast="high"]{ --paper:#000000; --paper-2:#0A0A0A; --card:#0A0A0A; --ink:#FFFFFF; --muted:#FFFFFF; --hair:#FFFFFF; --fixed-ink:#000000; --label-3:#FFFFFF; }

  /* ---- user accessibility preferences (set by ThemeScript on <html>) ---- */
  /* Reduce transparency: drop the header material to an opaque surface. */
  [data-transparency="reduce"] header{ backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:var(--paper)!important; }
  /* Always underline body/content links (not nav chrome or buttons). */
  [data-links="underline"] .prose a,[data-links="underline"] a.inline,[data-links="underline"] main p a{ text-decoration:underline;text-underline-offset:2px; }
  /* Reading mode: familiar system font + roomier spacing (headings keep --disp). */
  [data-font="reading"]{ --sans:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
  [data-font="reading"] body{ line-height:1.75;letter-spacing:.012em; }
  [data-font="reading"] p,[data-font="reading"] li{ word-spacing:.04em; }
  [data-contrast="high"] a.inline,
  [data-contrast="high"] .prose a{ text-decoration:underline; text-underline-offset:2px; }
  [data-contrast="high"] :focus-visible{ outline-width:4px; outline-offset:3px; }
  [data-contrast="high"] .ecard .bd{ background:var(--ink)!important; color:var(--paper)!important; }
  [data-contrast="high"] footer .ftag,
  [data-contrast="high"] .foot-bot,
  [data-contrast="high"] .fcol a,
  [data-contrast="high"] footer .fhand{ color:#fff; }
  [data-contrast="high"] .navlinks a[aria-current="page"]{ outline:2px solid var(--ink); outline-offset:-2px; }

  /* theme-aware logo / asset swap (e.g. black wordmark in light, white in dark) */
  .only-dark{ display:none; }
  [data-theme="dark"] .only-light{ display:none; }
  [data-theme="dark"] .only-dark{ display:inline-block; }

  /* Header display-settings control (theme + contrast) */
  .themectl{ position:relative; }
  .iconbtn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:1.5px solid var(--hair); background:var(--paper-2); border-radius:9px; color:var(--ink); cursor:pointer; }
  .iconbtn:hover{ border-color:var(--ink); }
  .thememenu{ position:absolute; right:0; top:48px; z-index:80; width:216px; background:var(--card); border:2px solid var(--ink); border-radius:12px; box-shadow:4px 4px 0 var(--ink); padding:14px; }
  .thememenu[hidden]{ display:none; }
  .thememenu .tm-h{ font-family:var(--mono); font-size:0.6875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:9px; }
  .tm-seg{ display:flex; border:2px solid var(--ink); border-radius:9px; overflow:hidden; }
  .tm-seg button{ flex:1; font-family:var(--sans); font-weight:700; font-size:0.78125rem; padding:8px 0; border:none; background:var(--card); color:var(--ink); cursor:pointer; }
  .tm-seg button + button{ border-left:2px solid var(--ink); }
  .tm-seg button[aria-checked="true"]{ background:var(--accent); color:#fff; }
  .tm-row{ display:flex; align-items:center; gap:9px; font-weight:600; font-size:0.875rem; margin-top:12px; cursor:pointer; }
  .tm-row input[type=checkbox]{ width:18px; height:18px; accent-color:var(--cobalt); }
  .tm-size{ flex-wrap:wrap; }
  .tm-size label{ flex:1; }
  .tm-size output{ font-family:var(--mono); font-size:0.75rem; color:var(--muted); min-width:38px; text-align:right; }
  .tm-size input[type=range]{ flex:0 0 100%; width:100%; margin-top:8px; accent-color:var(--cobalt); cursor:pointer; }
  .tm-reset{ margin-top:14px; width:100%; font-family:var(--sans); font-weight:700; font-size:0.8125rem; color:var(--ink); background:var(--paper-2); border:2px solid var(--ink); border-radius:9px; padding:8px; cursor:pointer; }
  .tm-reset:hover{ background:var(--ink); color:var(--paper); }
  .tm-accents{ display:flex; gap:9px; margin-top:2px; }
  .tm-acc{ width:26px; height:26px; border-radius:50%; border:2px solid var(--ink); background:var(--sw); cursor:pointer; padding:0; transition:transform .12s var(--ease); }
  .tm-acc:hover{ transform:scale(1.12); }
  .tm-acc[aria-pressed="true"]{ outline:3px solid var(--ink); outline-offset:2px; }

  /* ==========================================================================
     RESPAWN — /respawn, /respawn/safer-use (+ the standalone /respawn/card,
     which carries its own styles).

     These pages are long, dense, and occasionally read in a hurry, so two rules
     govern everything below:

     1. ONE vertical rhythm. Sections opt into --rs-gap instead of hand-picked
        inline padding, so the spacing between any two blocks is predictable.
     2. MEASURE IS CAPPED IN `ch`, NOT px. A 760px column is a comfortable
        65 characters at 17px and a punishing 113 at 13.5px — so every text
        block is limited by character count, which scales with its own font
        size and with the reader's text-size setting.
     ========================================================================== */
  .rs-page{ --rs-gap:68px; --rs-gap-sm:34px; }
  /* The page keeps the site-wide 1180px wrap so its left edge still lines up with
     the header and footer; it's the CONTENT BLOCKS that are capped (below), which
     gives a document-like column without the chrome changing width per page. */
  .rs-page{ --rs-col:900px; }

  /* Section rhythm. Sections carry top spacing only (padding doesn't collapse),
     so a single value governs every seam; the last one closes the page out. */
  /* Direct children only. As a descendant selector this also hit nested
     <section> elements inside components — it put 68px of page rhythm above a
     card's heading, which read as a broken card rather than as spacing. */
  .rs-page > main > section{ padding:var(--rs-gap) 0 0; }
  .rs-page section.pagehead{ padding:56px 0 0; }
  .rs-page section.rs-tight{ padding-top:var(--rs-gap-sm); }
  .rs-page section.rs-end{ padding-bottom:var(--rs-gap); }
  /* The dark request band is a full-bleed break in the page, so it gets real
     padding on both sides rather than the top-only rhythm. The colour change does
     the separating, so it only needs the smaller gap above it. */
  .rs-page section.vol{ padding:var(--rs-gap) 0; margin-top:var(--rs-gap-sm); }
  /* The form is ~1000px taller than the copy beside it, which left that much dead
     black gutter on the left. Sticky rather than a layout change: the reassurance
     copy ("we don't ask what it's for", "plain packaging, no branding") is exactly
     what someone wants still on screen while they fill in an address. Only where
     there are two columns to be beside — the mobile rule below stacks them — and
     only if the viewport is tall enough to sit still in. */
  @media (min-width:761px) and (min-height:640px){
    .rs-page .volgrid > div:first-child{ position:sticky; top:96px; align-self:start; }
  }
  /* A trailing child margin escapes a section with no bottom padding and shows up
     as an unexplained gap; close it on the blocks that have one. */
  .rs-page > main > section .faq:last-child,
  .rs-page > main > section > .wrap > * > p:last-child{ margin-bottom:0; }

  /* Reading measure. --rs-ch is the target line length in characters. */
  .rs-page{ --rs-ch:66; }
  .rs-read{ max-width:calc(var(--rs-ch) * 1ch); }
  .rs-body > p,
  .rs-body > ul:not([class]),
  .rs-body > ol:not([class]){ max-width:calc(var(--rs-ch) * 1ch); }
  /* Long-form running text gets a touch more leading than UI copy. */
  .rs-body > p{ line-height:1.65; }
  .rs-body > p + p{ margin-top:14px; }


  /* Numbered response steps. An ordered list, so the sequence survives CSS being
     stripped, a screen reader, and the print stylesheet. */
  .rs-steps{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:18px;max-width:var(--rs-col);}
  .rs-step{display:grid;grid-template-columns:64px 1fr;gap:22px;background:var(--card);border:2px solid var(--ink);border-radius:18px;padding:26px 28px;box-shadow:4px 4px 0 var(--ink);}
  .rs-step .rs-n{width:64px;height:64px;border:2px solid var(--ink);border-radius:14px;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700;font-size:1.25rem;box-shadow:2px 2px 0 var(--ink);}
  .rs-step h3{font-family:var(--disp);font-weight:800;font-size:1.4375rem;letter-spacing:-0.015em;}
  .rs-step p{margin-top:10px;line-height:1.6;max-width:60ch;}
  .rs-step .rs-note{display:block;margin-top:14px;font-size:0.90625rem;line-height:1.55;color:var(--muted);border-left:3px solid var(--acc);padding-left:14px;max-width:64ch;}

  /* Safer-use topics — same numbering language as the steps, but multi-paragraph,
     so each is a card too. Undifferentiated dividers turned these into a wall of
     text at this length. */
  .rs-topics{display:grid;gap:18px;margin-top:26px;max-width:var(--rs-col);}
  .rs-topic{display:grid;grid-template-columns:56px 1fr;gap:22px;background:var(--card);border:2px solid var(--ink);border-radius:18px;padding:26px 28px;box-shadow:4px 4px 0 var(--ink);scroll-margin-top:96px;}
  .rs-topic-n{width:56px;height:56px;border:2px solid var(--ink);border-radius:14px;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700;font-size:1.0625rem;box-shadow:2px 2px 0 var(--ink);}
  .rs-topic h3{font-family:var(--disp);font-weight:800;font-size:1.5rem;letter-spacing:-0.015em;}
  .rs-topic p{margin-top:12px;line-height:1.65;max-width:64ch;}
  .rs-topic p:first-of-type{margin-top:10px;}

  /* Keeps a phone number from breaking across two lines. Only for spans short
     enough that never wrapping them is safe — a number split as "(614) 666-" /
     "6960" is the kind of thing someone misdials in an emergency. Where the
     number sits inside a longer sentence in the content module, non-breaking
     hyphens (U+2011) do the same job without needing markup. */
  .nb{white-space:nowrap;}

  /* The two forms of naloxone (nasal / intramuscular). Stacked, full width, at
     every viewport.

     Side by side was the first attempt and it does not work: the IM sequence is
     five steps with four caveats, the nasal one is three steps with two, so the
     columns differ by ~870px. Stretched grid items drew a card border around that
     much empty white; `align-items:start` fixed the empty card but left the same
     hole beside the short one. There is no column ratio that balances 2.5x, and
     nobody needs to compare the two anyway — they need the one they are holding.
     Full width also buys the IM steps a proper measure instead of a 420px track. */
  .rs-forms{display:grid;gap:20px;margin-top:26px;max-width:var(--rs-col);}
  /* The block sits inside .prose (the page's long-form typography), which sets
     margins on h3/p/ol/li for running text. Those margins are wrong inside a card
     whose spacing is already deliberate — an h3 arrived with 26px on top of the
     card's own padding. Reset them here rather than fighting each one below.

     Specificity is fiddly here and both naive options are wrong: :where() adds
     nothing, so `.prose h3` (0,1,1) beat the reset and kept its 26px; plain
     :is() takes its argument's specificity (0,1,1), which wins that fight but
     then also outranks `.rs-form-lede` (0,1,0) and flattens the spacing the reset
     is meant to protect. So: :is() for the reset, and every named rule below
     carries a `.rs-form` prefix to land at (0,2,0) and win cleanly. */
  .rs-form :is(h3,p,ol,ul,li,dl,dd,dt){margin:0;}
  .rs-form :is(ol,ul){padding:0;list-style:none;}

  .rs-form{background:var(--card);border:2px solid var(--ink);border-radius:18px;padding:24px 26px;box-shadow:4px 4px 0 var(--ink);scroll-margin-top:96px;}
  .rs-form h3{font-family:var(--disp);font-weight:800;font-size:1.375rem;letter-spacing:-0.015em;line-height:1.15;}
  /* Measure caps in ch, not px, so they track each element's own font-size. The
     cards are full width now, which took the lede to 94ch and these bullets to
     87ch, past the ceiling the rest of the page holds to. Values sit in the same
     family as .rs-step p (60ch) and .rs-note (64ch) rather than right on the
     limit — a cap tuned to just scrape past the check is a cap that breaks on the
     next copy edit. The cards stay the page's full column width; it's the text
     column inside that's capped, exactly as the six steps already do it. */
  .rs-form .rs-form-lede{margin-top:9px;font-size:0.9375rem;line-height:1.6;color:var(--muted);max-width:66ch;}
  .rs-form .rs-form-facts{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px;}
  .rs-form .rs-form-facts div{border:1.5px solid var(--hair);border-radius:10px;padding:8px 12px;background:var(--paper-2);}
  .rs-form .rs-form-facts dt{font-family:var(--mono);font-size:0.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
  .rs-form .rs-form-facts dd{margin:3px 0 0;font-weight:700;font-size:0.9375rem;line-height:1.3;}
  .rs-form .rs-form-steps{list-style:none;padding:0;counter-reset:nx;display:grid;gap:14px;margin:20px 0 0;}
  .rs-form .rs-form-steps li{counter-increment:nx;position:relative;padding-left:38px;max-width:68ch;}
  .rs-form .rs-form-steps li::before{content:counter(nx);position:absolute;left:0;top:0;width:26px;height:26px;border:1.5px solid var(--ink);border-radius:8px;background:var(--paper-2);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700;font-size:0.75rem;}
  .rs-form .rs-form-steps b{display:block;font-size:1rem;line-height:1.35;}
  .rs-form .rs-form-steps span{display:block;margin-top:5px;font-size:0.9375rem;line-height:1.6;}
  .rs-form .rs-form-steps em{display:block;margin-top:8px;padding-left:12px;border-left:3px solid var(--tomato);font-style:normal;font-size:0.875rem;line-height:1.55;color:var(--muted);}
  .rs-form .rs-form-also{list-style:none;padding:16px 0 0;margin:18px 0 0;border-top:1.5px solid var(--hair);display:grid;gap:8px;}
  .rs-form .rs-form-also li{position:relative;padding-left:19px;font-size:0.875rem;line-height:1.55;color:var(--muted);max-width:68ch;}
  .rs-form .rs-form-also li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:2px;background:var(--tomato);}

  /* Overdose signs — a checklist, not decoration. Auto-fit keeps every item on
     one or two lines instead of stretching to the container. */
  /* `min(300px,…)` for the same reason as .rs-forms above — a bare 300px minimum
     can't shrink below itself, so this grid was pushing /respawn 26px into
     horizontal scroll on a 320px phone. */
  .rs-signs{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:12px;max-width:var(--rs-col);}
  .rs-signs li{display:flex;gap:12px;align-items:flex-start;background:var(--paper-2);border:1.5px solid var(--hair);border-radius:12px;padding:15px 17px;font-size:0.9375rem;line-height:1.5;}
  .rs-signs li::before{content:"!";flex:none;width:22px;height:22px;border-radius:50%;background:var(--tomato);color:#fff;font-family:var(--mono);font-weight:700;font-size:0.75rem;display:flex;align-items:center;justify-content:center;margin-top:2px;}

  /* What's in a kit. */
  .rs-kit{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px;max-width:72ch;}
  .rs-kit li{display:flex;gap:15px;align-items:flex-start;background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:17px 19px;box-shadow:3px 3px 0 var(--ink);}
  .rs-kit .rs-check{flex:none;width:26px;height:26px;border-radius:8px;border:2px solid var(--ink);background:var(--lime);color:#1A1623;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:0.8125rem;}
  .rs-kit b{font-weight:700;}
  .rs-kit span.rs-note{display:block;font-size:0.875rem;color:var(--muted);margin-top:4px;line-height:1.5;}

  /* Resource links. */
  .rs-res{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:2px;font-size:0.9375rem;max-width:70ch;}
  .rs-res a{display:flex;gap:14px;align-items:baseline;padding:14px 4px;border-bottom:1.5px solid var(--hair);font-weight:600;font-size:inherit;line-height:1.45;}
  .rs-res a:hover{color:var(--cobalt);}
  .rs-res a::after{content:"↗";margin-left:auto;color:var(--muted);font-weight:400;padding-left:12px;}

  /* Ways to get supplies / ways to help — a 3-up variant of the pillar grid. */
  .pgrid-3{grid-template-columns:repeat(3,1fr);}

  /* Small recurring bits of page furniture, so the markup stops carrying inline
     spacing (which is what made the rhythm drift in the first place). */
  .rs-page .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;}
  .rs-acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;}
  .rs-intro{font-size:1.125rem;line-height:1.6;}
  .rs-kicker-p{color:var(--muted);}
  .rs-after{margin-top:26px;}
  .rs-after-2{margin-top:10px;}
  /* Accordion answers live in .prose, not .rs-body, so they need their own cap. */
  .rs-page .faq{ max-width:var(--rs-col); }
  .rs-page .faq .faq-a{ max-width:70ch; }
  .rs-page .faq summary{ font-size:1.0625rem; line-height:1.4; padding:16px 18px; }
  .rs-page .faq .faq-a p{ line-height:1.65; }
  /* Home-page Respawn band (uses the shared .fs treatment). */
  #respawn .fs p{ max-width:62ch; line-height:1.6; }
  /* Form hints render at 12.5px, where the 544px form column is ~87 characters. */
  .rs-page form .hint{ max-width:62ch; line-height:1.5; }
  .rs-page .vol p.sub{ max-width:52ch; }
  .rs-note-line{font-size:0.9375rem;color:var(--muted);line-height:1.6;max-width:70ch;margin-top:24px;}
  .rs-fine{font-size:0.875rem;color:var(--muted);line-height:1.6;border-top:1.5px solid var(--hair);margin-top:8px;padding-top:20px;max-width:76ch;}

  @media (max-width:900px){
    .rs-page{ --rs-gap:52px; --rs-gap-sm:28px; }
    .pgrid-3{grid-template-columns:1fr;}
  }
  @media (max-width:560px){
    .rs-page{ --rs-gap:44px; }
    .rs-step,.rs-topic{grid-template-columns:1fr;gap:16px;padding:22px;}
    .rs-form{padding:20px 18px;}
    .rs-step .rs-n{width:48px;height:48px;font-size:1.0625rem;}
    .rs-topic-n{width:44px;height:44px;font-size:0.9375rem;}
  }

  /* Dark mode: re-anchor the fills that assume dark text on a bright colour. */
  [data-theme="dark"] .rs-signs li{background:#1C1925;}
  [data-theme="dark"] .rs-kit .rs-check{color:#1A1623;}

  /* Printing /respawn should produce something usable on a fridge door: drop the
     chrome, flatten the sticker shadows, keep the steps unbroken. */
  @media print{
    header,footer,.topstripe,.announce,.quick-exit,.marquee,.breadcrumb,.rs-noprint{display:none!important;}
    body{background:#fff;color:#000;font-size:11pt;}
    .rs-page > main > section{padding:12pt 0 0!important;}
    .rs-step,.rs-topic,.rs-kit li,.faq,.rs-form{box-shadow:none!important;break-inside:avoid;page-break-inside:avoid;}
    .rs-step .rs-n,.rs-topic-n{background:#000!important;color:#fff!important;box-shadow:none!important;}
    .faq{border:1pt solid #000;}
    .faq .faq-a{display:block!important;}
    a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;word-break:break-all;}
  }

  /* ==========================================================================
     RESPAWN — identity layer.
     The program is named after a game mechanic, for a gaming and fandom
     audience, so the framing leans into that: an ink hero, an emergency strip
     welded to it, and the response steps drawn as checkpoints on a path. The
     COPY stays clinical — only the framing is playful, because an overdose
     isn't. See src/lib/respawn.js.
     ========================================================================== */

  /* Hero: a full-bleed ink band, so Respawn doesn't open like every other page. */
  .rs-hero{ background:var(--fixed-ink); color:#F4F0E6; padding:0!important; border-bottom:2px solid var(--ink); }
  .rs-hero-in{ display:grid; grid-template-columns:auto 1fr; gap:30px; align-items:start; padding:52px 0 46px; }
  .rs-hero .rs-mark{ color:var(--sun); flex:none; }
  .rs-hero h1{ font-family:var(--disp); font-weight:800; font-size:clamp(3rem,8vw,5.5rem); line-height:0.9; letter-spacing:-0.04em; margin:16px 0 0; color:#fff; }
  .rs-hero .rs-hero-lede{ font-size:1.1875rem; line-height:1.55; color:#D8D2E4; margin-top:16px; max-width:56ch; }
  .rs-hero .rs-hero-lede strong{ color:#fff; }
  .rs-hero .acts{ margin-top:26px; }
  .rs-hero .btn-ghost{ color:#fff; border-color:#fff; }
  .rs-hero .btn-ghost:hover{ background:#fff; color:var(--fixed-ink); }
  .rs-hero .breadcrumb{ margin-bottom:16px; }
  .rs-hero .breadcrumb a,.rs-hero .breadcrumb span{ color:#B8B1C6; }
  .rs-hero .breadcrumb a:hover{ color:#fff; }

  /* Emergency strip, welded to the bottom of the hero: the fastest route to the
     steps is a full-bleed bar you cannot scroll past without seeing. */
  .rs-emg{ display:flex; align-items:center; gap:14px; justify-content:center; flex-wrap:wrap; background:var(--tomato); color:#fff; border-top:2px solid var(--ink); padding:15px 24px; font-weight:700; text-align:center; }
  .rs-emg .rs-emg-k{ font-family:var(--mono); font-size:0.6875rem; letter-spacing:.14em; text-transform:uppercase; background:rgba(0,0,0,.24); padding:5px 10px; border-radius:999px; }
  .rs-emg .rs-emg-go{ display:inline-flex; align-items:center; gap:7px; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px; }
  .rs-emg:hover{ background:#C9310F; }
  .rs-emg:hover .rs-emg-go{ text-decoration-thickness:3px; }

  /* Sticky emergency pill — appears once the hero strip has scrolled away.
     Bottom-LEFT on purpose: the safety quick-exit owns bottom-right. */
  .rs-jump{ position:fixed; left:16px; bottom:16px; z-index:299; display:inline-flex; align-items:center; gap:8px; background:var(--tomato); color:#fff; border:2px solid var(--ink); border-radius:999px; padding:10px 16px; font-family:var(--sans); font-weight:700; font-size:0.875rem; box-shadow:3px 3px 0 var(--ink); opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .2s var(--ease),transform .2s var(--ease); }
  .rs-jump.show{ opacity:1; transform:none; pointer-events:auto; }
  .rs-jump:hover{ transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--ink); }
  @media (prefers-reduced-motion:reduce){ .rs-jump{ transition:none; } }
  @media (max-width:560px){ .rs-jump{ left:12px; bottom:12px; font-size:0.8125rem; padding:9px 13px; } }

  /* Checkpoints: the step tiles sit on a path, connected through the gaps
     between cards. Purely decorative — the <ol> still carries the sequence. */
  .rs-steps .rs-step{ position:relative; }
  .rs-steps .rs-step:not(:last-child)::after{
    content:""; position:absolute; left:60px; top:100%; width:3px; height:18px;
    background:var(--ink); transform:translateX(-1.5px); z-index:0;
  }

  @media (max-width:900px){
    .rs-hero-in{ grid-template-columns:1fr; gap:18px; padding:40px 0 36px; }
    .rs-hero .rs-mark{ width:52px; height:52px; }
  }
  @media (max-width:560px){
    .rs-steps .rs-step:not(:last-child)::after{ left:46px; }
  }

  @media print{ .rs-jump,.rs-emg{ display:none!important; } .rs-hero{ background:#fff!important; color:#000!important; } }

  /* Trainer (/respawn/practice). The stepper classes only ever activate once the
     script adds .is-stepper, so the no-JS page keeps the full list. */
  .rs-trainer{ max-width:var(--rs-col); }
  .rs-prog{ margin-bottom:22px; }
  .rs-prog-bar{ height:10px; border:2px solid var(--ink); border-radius:999px; background:var(--paper-2); overflow:hidden; }
  .rs-prog-bar span{ display:block; height:100%; width:16%; background:var(--lime); border-right:2px solid var(--ink); transition:width .25s var(--ease); }
  @media (prefers-reduced-motion:reduce){ .rs-prog-bar span{ transition:none; } }
  .rs-prog-t{ font-family:var(--mono); font-size:0.6875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:8px; }
  .rs-prog-t b{ color:var(--ink); }
  .rs-train-list.is-stepper > .rs-step{ display:none; }
  .rs-train-list.is-stepper > .rs-step.is-on{ display:grid; }
  /* One card at a time means no connectors to draw. */
  .rs-train-list.is-stepper > .rs-step::after{ display:none; }
  .rs-train-list.is-stepper > .rs-step h3:focus-visible{ outline:3px solid var(--accent); outline-offset:4px; }
  .rs-train-nav{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }
  /* An explicit `display` outranks the `hidden` attribute, which would leave the
     stepper controls on screen (and inert) when the script never runs. */
  .rs-train-nav[hidden],.rs-prog[hidden],.rs-done[hidden],.rs-share-ok[hidden]{ display:none; }
  .rs-train-nav .btn[disabled]{ opacity:.4; cursor:not-allowed; }
  .rs-done{ background:var(--card); border:2px solid var(--ink); border-radius:20px; padding:34px 30px; box-shadow:4px 4px 0 var(--ink); max-width:var(--rs-col); }
  .rs-done .rs-mark{ color:var(--teal-aa); }
  .rs-done h2{ font-family:var(--disp); font-weight:800; font-size:clamp(1.625rem,4vw,2.25rem); letter-spacing:-0.025em; margin-top:14px; }
  .rs-done h2:focus-visible{ outline:3px solid var(--accent); outline-offset:4px; }
  .rs-done p{ margin-top:12px; max-width:60ch; line-height:1.6; }
  .rs-share-line{ margin-top:22px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
  .rs-share-line .inline-btn{ background:none; border:none; padding:0; font-family:var(--sans); font-size:0.9375rem; font-weight:600; color:var(--cobalt); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
  .rs-share-ok{ font-size:0.875rem; font-weight:700; color:var(--teal-aa); }
  .rs-meta{ display:block; font-family:var(--mono); font-size:0.6875rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:12px; }
  .rs-remind{ display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap; background:var(--paper-2); border:2px solid var(--ink); border-radius:16px; padding:22px 24px; margin-top:26px; max-width:var(--rs-col); }
  .rs-remind h3{ font-family:var(--disp); font-weight:800; font-size:1.25rem; letter-spacing:-0.015em; }
  .rs-remind p{ font-size:0.9375rem; color:var(--muted); line-height:1.55; margin-top:6px; max-width:52ch; }
  .rs-remind .btn{ flex:none; }