/* ============================================================
   Citizen Activate · site styles · Broadside system
   Tokens from the brand guide; ratios are WCAG contrast.
   ============================================================ */
:root{
  --ca-red-50:#FCECEC;--ca-red-100:#F7D0D2;--ca-red-300:#E4666C;--ca-red-500:#B3030D;--ca-red-700:#8C0209;--ca-red-900:#5C0105;
  --ca-navy-50:#EEF2F8;--ca-navy-100:#D8E0EE;--ca-navy-300:#8A9CC4;--ca-navy-500:#1E4278;--ca-navy-700:#02204F;--ca-navy-900:#01132F;
  --ca-gold-50:#FDF6E3;--ca-gold-100:#F8E6B4;--ca-gold-300:#E8C267;--ca-gold-500:#D1952B;--ca-gold-700:#8F5E00;--ca-gold-900:#5E3D00;
  --ca-ink:#121826;--ca-charcoal:#2E3547;--ca-slate:#5A6377;--ca-steel:#8B93A6;--ca-limestone:#C9CFDB;--ca-fog:#E6E9F0;--ca-cream:#F6F4EC;--ca-paper:#F8F8F8;--ca-white:#FFFFFF;
  --ca-forest:#2A541E;--ca-plum:#362454;
  --ca-focus:var(--ca-gold-700);--ca-focus-dark:var(--ca-gold-500);
  --font-display:'Alfa Slab One',Rockwell,'Roboto Slab',serif;
  --font-text:'Barlow','Helvetica Neue',Arial,sans-serif;
  --font-accent:'Barlow Condensed','Arial Narrow',sans-serif;
  --s-1:.25rem;--s-2:.5rem;--s-3:.75rem;--s-4:1rem;--s-5:1.5rem;--s-6:2rem;--s-7:3rem;--s-8:4rem;--s-9:6rem;
  --r-1:3px;--r-2:6px;--r-3:12px;
  --e-2:0 4px 14px rgba(2,32,79,.10);--e-3:0 12px 32px rgba(2,32,79,.16);
  --wrap:1180px;
  /* .site-header .wrap min-height 64px + its 2px gold rule. The hero
     measures itself against this so it fits under the header exactly. */
  --hdr:66px;
  --map-water:#7FA6C9;--map-water-label:#5C86AD;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--ca-white);color:var(--ca-ink);font-family:var(--font-text);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
[hidden]{display:none!important}
h1,h2,h3,h4{margin:0;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0}
a{color:var(--ca-red-500);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--ca-gold-500);text-underline-offset:.2em}
a:hover{color:var(--ca-red-700);text-decoration-color:var(--ca-red-700)}
:focus-visible{outline:3px solid var(--ca-focus);outline-offset:2px}
.on-dark :focus-visible,.on-dark:focus-visible{outline-color:var(--ca-focus-dark)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--s-4);top:-100px;z-index:100;background:var(--ca-gold-500);color:var(--ca-navy-900);padding:.6rem 1rem;border-radius:var(--r-1);font-family:var(--font-accent);font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.skip:focus{top:var(--s-3)}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1rem,4vw,2.5rem)}
.eyebrow{font-family:var(--font-accent);font-weight:600;font-size:.875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ca-gold-700)}
.on-dark .eyebrow{color:var(--ca-gold-500)}
.display{font-family:var(--font-display);font-weight:400;font-size:clamp(2.75rem,6vw,4.75rem);line-height:1.02;letter-spacing:-.005em;color:var(--ca-navy-700)}
.h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2.1rem,4.2vw,2.5rem);line-height:1.05;letter-spacing:-.005em;color:var(--ca-navy-700)}
.h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.6rem,3vw,1.75rem);line-height:1.1;color:var(--ca-navy-700)}
.h3{font-family:var(--font-text);font-weight:700;font-size:1.375rem;line-height:1.2;color:var(--ca-navy-700)}
.h4{font-family:var(--font-text);font-weight:700;font-size:1.125rem;line-height:1.3;color:var(--ca-navy-700)}
.lead{font-size:1.25rem;line-height:1.5;color:var(--ca-charcoal)}
.small{font-size:.875rem;line-height:1.5;color:var(--ca-slate)}
.on-dark .h1,.on-dark .h2,.on-dark .h3,.on-dark .h4,.on-dark .display{color:var(--ca-paper)}
.on-dark .lead,.on-dark p{color:var(--ca-navy-100)}
.on-dark .small{color:var(--ca-navy-300)}
.on-dark a{color:var(--ca-paper);text-decoration-color:var(--ca-gold-500)}
.on-dark a:hover{color:var(--ca-gold-300);text-decoration-color:var(--ca-gold-300)}
.num{font-variant-numeric:tabular-nums}

/* ---------- Buttons (Ledger shape, Broadside labels) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:44px;padding:0 1.35rem;border:2px solid transparent;border-radius:var(--r-1);font-family:var(--font-accent);font-weight:600;font-size:1.0625rem;line-height:1;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .15s,color .15s,border-color .15s;font-variant-numeric:tabular-nums;background:none}
.btn svg{width:1em;height:1em;flex:none}
.btn-lg{min-height:52px;padding:0 1.75rem;font-size:1.1875rem}
.btn-sm{min-height:36px;padding:0 1rem;font-size:.95rem}
.btn-primary{background:var(--ca-red-500);color:#fff}
.btn-primary:hover{background:var(--ca-red-700);color:#fff}
.btn-primary:active{background:var(--ca-red-900)}
.btn-secondary{color:var(--ca-navy-700);border-color:var(--ca-navy-700)}
.btn-secondary:hover{background:var(--ca-navy-50);color:var(--ca-navy-700)}
.btn-secondary:active{background:var(--ca-navy-100)}
.btn-tertiary{color:var(--ca-red-500);padding-inline:.35rem;white-space:normal;text-align:left;line-height:1.2;overflow-wrap:anywhere;max-width:100%;text-decoration:underline;text-decoration-color:var(--ca-gold-500);text-decoration-thickness:2px;text-underline-offset:.22em}
.btn-tertiary:hover{color:var(--ca-red-700);text-decoration-color:var(--ca-red-700)}
.on-dark .btn-primary{background:var(--ca-gold-500);color:var(--ca-navy-900)}
.on-dark .btn-primary:hover{background:var(--ca-gold-300);color:var(--ca-navy-900)}
.on-dark .btn-secondary{color:var(--ca-paper);border-color:var(--ca-paper)}
.on-dark .btn-secondary:hover{background:rgba(255,255,255,.1);color:var(--ca-paper)}
.on-dark .btn-tertiary{color:var(--ca-paper)}
.on-dark .btn-tertiary:hover{color:var(--ca-gold-300);text-decoration-color:var(--ca-gold-300)}
.on-red .btn-primary{background:#fff;color:var(--ca-red-500)}
.on-red .btn-primary:hover{background:var(--ca-red-50);color:var(--ca-red-700)}
.on-red .btn-secondary{color:#fff;border-color:#fff}
.on-red .btn-secondary:hover{background:rgba(255,255,255,.12);color:#fff}
.on-red :focus-visible{outline-color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
@media (max-width:480px){.btn-row .btn-primary,.btn-row .btn-secondary{width:100%;white-space:normal;text-align:center}}
.chip{display:inline-flex;align-items:center;gap:.45rem;padding:.3rem .6rem .3rem .5rem;border-radius:var(--r-1);font-family:var(--font-accent);font-weight:600;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--ca-limestone);background:var(--ca-white);color:var(--ca-ink);white-space:nowrap}
.chip i{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
.chip.solid{border-color:transparent;color:#fff}
.chip.solid.gold{background:var(--ca-gold-700)}.chip.solid.gold i{background:var(--ca-gold-500)}
.chip.solid.red{background:var(--ca-red-500)}.chip.solid.red i{background:#fff}
.chip.solid.navy{background:var(--ca-navy-500)}.chip.solid.navy i{background:#fff}
.chip.solid.forest{background:var(--ca-forest)}.chip.solid.forest i{background:#fff}
.chip.solid.plum{background:var(--ca-plum)}.chip.solid.plum i{background:#fff}

/* ---------- Header / nav ---------- */
.site-header{position:sticky;top:0;z-index:60;background:var(--ca-navy-700);border-bottom:2px solid var(--ca-gold-500);color:var(--ca-paper)}
.site-header .wrap{display:flex;align-items:center;gap:var(--s-4);min-height:64px}
/* The wordmark is set like the hero headline: Alfa Slab One, the slab's one
   weight, its tight tracking, and sentence case rather than tracked caps.
   1.5rem is the brand guide's 24px floor for the slab, which is also where
   the header bar still fits: measured, the wordmark goes 130px to 202px. */
.brand{display:flex;align-items:center;gap:var(--s-3);text-decoration:none;color:var(--ca-paper);font-family:var(--font-display);font-weight:400;font-size:1.5rem;letter-spacing:-.005em;line-height:1;white-space:nowrap}
/* Alfa Slab One ships one weight, so the <b> would be synthesised. */
.brand b{font-weight:400}
/* The slab cannot go under 24px, and at that size the wordmark plus the Menu
   button stops fitting below about 414px. The badge carries the mark there;
   the link's aria-label still reads "Citizen Activate, home". */
@media (max-width:420px){.brand span{display:none}}
.brand img{width:40px;height:40px;border-radius:50%;background:#fff}
.brand span b{color:var(--ca-gold-500);font-weight:700}
.nav-toggle{margin-left:auto;display:none;align-items:center;gap:.5rem;min-height:44px;padding:0 .9rem;background:transparent;border:2px solid var(--ca-paper);border-radius:var(--r-1);color:var(--ca-paper);font-family:var(--font-accent);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:.95rem;cursor:pointer}
.nav-toggle:focus-visible{outline-color:var(--ca-focus-dark)}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:var(--s-1)}
.site-nav ul{list-style:none;display:flex;gap:var(--s-1)}
.site-nav li a{display:block;padding:.6rem .7rem;font-family:var(--font-accent);font-weight:600;font-size:.95rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ca-paper);text-decoration:none;border-radius:var(--r-1)}
.site-nav li a:hover{background:rgba(255,255,255,.1);color:var(--ca-paper)}
.site-nav li a:focus-visible{outline-color:var(--ca-focus-dark)}
.site-nav .btn{margin-left:var(--s-2)}
.site-header .btn-primary{background:var(--ca-gold-500);color:var(--ca-navy-900)}
.site-header .btn-primary:hover{background:var(--ca-gold-300);color:var(--ca-navy-900)}
/* The inline nav needs room for five labels and a button; below this it
   becomes a drawer instead of crowding. */
@media (max-width:1149px){
  .nav-toggle{display:inline-flex}
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--ca-navy-700);border-bottom:2px solid var(--ca-gold-500);padding:var(--s-3) clamp(1rem,4vw,2.5rem) var(--s-5);margin:0}
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column;gap:0}
  .site-nav li a{padding:.85rem .5rem;font-size:1.05rem;border-bottom:1px solid rgba(255,255,255,.08)}
  .site-nav .btn{margin:var(--s-4) 0 0;width:100%}
}

/* ---------- Hero ---------- */
.hero{background:var(--ca-white);padding-block:clamp(2.5rem,6vw,4.5rem) clamp(2.5rem,6vw,4rem);text-align:center;position:relative;overflow:hidden}
.hero .wrap{display:grid;justify-items:center;gap:var(--s-5)}



@media (prefers-reduced-motion:reduce){
}
.hero-controls{display:flex;justify-content:center}
.pause-btn{display:inline-flex;align-items:center;gap:.4rem;min-height:36px;padding:0 .8rem;border:1px solid var(--ca-limestone);border-radius:var(--r-1);background:var(--ca-white);color:var(--ca-slate);font-family:var(--font-accent);font-weight:600;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.pause-btn:hover{border-color:var(--ca-steel);color:var(--ca-charcoal)}
.pause-btn svg{width:.9em;height:.9em}
.hero h1{max-width:16ch;margin-inline:auto}
.hero .lead{max-width:52ch;margin-inline:auto}
.hero .btn-row{justify-content:center}
.stats{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-3) var(--s-7);margin-top:var(--s-3);padding-top:var(--s-5);border-top:2px solid var(--ca-gold-500);width:min(100%,760px)}
.stats div{text-align:center}
.stats b{display:block;font-family:var(--font-display);font-size:2rem;line-height:1;color:var(--ca-red-500)}
.stats span{display:block;font-family:var(--font-accent);font-weight:600;font-size:.875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ca-slate);margin-top:.35rem}

/* ---------- Sections ---------- */
.sec{padding-block:clamp(3rem,7vw,5.5rem)}
.sec.cream{background:var(--ca-cream)}
.sec.navy{background:var(--ca-navy-900);color:var(--ca-paper)}
.sec.red{background:var(--ca-red-500);color:#fff}
.sec-head{max-width:66ch;margin-bottom:var(--s-6)}
.sec-head .lead{margin-top:var(--s-3)}
.sec-head .h1{margin-top:var(--s-2)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}
@media (max-width:900px){.grid3{grid-template-columns:minmax(0,1fr)}.grid2{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--ca-white);border:1px solid var(--ca-limestone);border-radius:var(--r-2);padding:var(--s-5);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3);align-content:start}
.card .h3{margin-top:.15rem}
.card p{color:var(--ca-charcoal)}
.card .btn-row{margin-top:var(--s-2)}
.card-num{font-family:var(--font-display);font-size:2.25rem;line-height:1;color:var(--ca-red-500)}
.rule{height:2px;background:var(--ca-gold-500);width:64px}
.check{list-style:none;display:grid;gap:.6rem}
.check li{display:grid;grid-template-columns:22px 1fr;gap:.6rem;align-items:start;color:var(--ca-charcoal)}
.check li svg{width:22px;height:22px;flex:none;margin-top:.1rem}
.on-dark .check li{color:var(--ca-navy-100)}

/* ---------- Map ---------- */
.map-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:var(--s-6);align-items:start}
@media (max-width:900px){.map-layout{grid-template-columns:1fr}}
.map-stage{position:relative;background:var(--ca-white);border:1px solid var(--ca-limestone);border-radius:var(--r-3);padding:var(--s-3);overflow:hidden}
.map-stage svg{width:100%;height:auto;display:block}
.map-stage .county{fill:var(--ca-cream);stroke:var(--ca-navy-700);stroke-width:3;stroke-linejoin:round;transition:fill .2s}
.map-stage.is-metro .county{fill:var(--ca-gold-100)}
.map-stage .neighbor{fill:var(--ca-navy-50);stroke:var(--ca-navy-100);stroke-width:1.5}
.map-stage .river{fill:none;stroke:var(--map-water);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.map-stage .lbl{font-family:var(--font-accent);font-weight:600;font-size:22px;letter-spacing:.12em;text-transform:uppercase;fill:var(--ca-steel)}
.map-stage .river-lbl{font-family:var(--font-text);font-style:italic;font-size:20px;fill:var(--map-water-label)}
.map-stage .district{fill:rgba(2,32,79,.06);stroke:var(--ca-navy-700);stroke-width:1.2;cursor:pointer}
.map-stage .district:hover,.map-stage .district:focus{fill:var(--ca-gold-300)}
/* A fill change alone is not a focus indicator: it reads as hover, and on a
   map the shape under the cursor is not obviously the focused one. */
.map-stage .district:focus-visible{outline:3px solid var(--ca-focus);outline-offset:2px}
.map-stage .district.active{fill:var(--ca-gold-500)}
.marker{position:absolute;transform:translate(-15px,-50%);display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .6rem .35rem .4rem;min-height:32px;background:rgba(255,255,255,.92);border:1px solid var(--ca-limestone);border-radius:var(--r-1);font-family:var(--font-accent);font-weight:600;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ca-navy-700);cursor:pointer;box-shadow:var(--e-2);white-space:nowrap;transition:transform .15s,background-color .15s}
.marker i{width:12px;height:12px;border-radius:50%;background:var(--ca-red-500);border:2px solid #fff;box-shadow:0 0 0 1px var(--ca-red-500);flex:none}
.marker.civic i{background:var(--ca-navy-700);box-shadow:0 0 0 1px var(--ca-navy-700)}
.marker.metro i{background:var(--ca-gold-500);box-shadow:0 0 0 1px var(--ca-gold-700)}
.marker:hover,.marker.active{background:var(--ca-navy-700);color:var(--ca-paper);border-color:var(--ca-navy-700)}
.marker:hover{transform:translate(-15px,-50%) scale(1.03)}
.marker.side-l{flex-direction:row-reverse;padding:.35rem .4rem .35rem .6rem;transform:translate(calc(-100% + 15px),-50%)}
.marker.side-l:hover{transform:translate(calc(-100% + 15px),-50%) scale(1.03)}
.marker.side-bl{flex-direction:row-reverse;padding:.35rem .4rem .35rem .6rem;transform:translate(calc(-100% + 15px),-4px)}
.marker.side-bl:hover{transform:translate(calc(-100% + 15px),-4px) scale(1.03)}
.marker.side-tr{transform:translate(-15px,calc(-100% + 4px))}
.marker.side-tr:hover{transform:translate(-15px,calc(-100% + 4px)) scale(1.03)}
.marker.metro{background:var(--ca-gold-500);color:var(--ca-navy-900);border-color:var(--ca-gold-700)}
.marker.metro:hover,.marker.metro.active{background:var(--ca-navy-700);color:var(--ca-paper)}
.place-list{display:none;flex-wrap:wrap;gap:.5rem;margin-top:var(--s-3)}
.place-list button{min-height:36px;padding:0 .8rem 0 .6rem;border:1px solid var(--ca-limestone);border-radius:var(--r-1);background:var(--ca-white);color:var(--ca-navy-700);font-family:var(--font-accent);font-weight:600;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem}
.place-list button i{width:10px;height:10px;border-radius:50%;background:var(--ca-red-500);display:inline-block}
.place-list button.civic i{background:var(--ca-navy-700)}
.place-list button.metro i{background:var(--ca-gold-500)}
.place-list button[aria-pressed="true"]{background:var(--ca-navy-700);color:var(--ca-paper);border-color:var(--ca-navy-700)}
.map-stage .dot{fill:var(--ca-red-500);stroke:#fff;stroke-width:3}
.map-stage .dot.civic{fill:var(--ca-navy-700)}
.map-stage .dot.metro{fill:var(--ca-gold-500)}
@media (max-width:640px){.marker{display:none}.place-list{display:flex}}
.map-caption{margin-top:var(--s-3);font-size:.875rem;color:var(--ca-slate)}
.map-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
.info{background:var(--ca-navy-700);color:var(--ca-paper);border-radius:var(--r-2);padding:var(--s-5);display:grid;grid-template-columns:minmax(0,1fr);gap:.6rem;min-height:290px;align-content:start}
.info .eyebrow{color:var(--ca-gold-500)}
.info .h2{color:var(--ca-paper);font-size:1.5rem}
.info p{color:var(--ca-navy-100)}
.info ul{list-style:none;display:grid;gap:.3rem;color:var(--ca-navy-100);font-size:.9375rem}
.info ul li::before{content:'·';color:var(--ca-gold-500);margin-right:.5rem;font-weight:700}
.info .facts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.25rem}
.info .facts span{font-family:var(--font-accent);font-weight:600;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ca-navy-900);background:var(--ca-gold-500);padding:.25rem .5rem;border-radius:3px}
.info a{color:var(--ca-paper)}
.picker{background:var(--ca-white);border:1px solid var(--ca-limestone);border-radius:var(--r-2);padding:var(--s-4) var(--s-5);display:grid;gap:.6rem}
.picker label{font-family:var(--font-accent);font-weight:600;font-size:.875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ca-navy-700)}
.picker .row{display:flex;gap:.5rem;flex-wrap:wrap}
select{font:inherit;font-family:var(--font-text);min-height:44px;padding:0 2.2rem 0 .8rem;border:2px solid var(--ca-steel);border-radius:var(--r-1);background:var(--ca-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2302204F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .7rem center/16px;appearance:none;-webkit-appearance:none;color:var(--ca-ink);flex:1 1 180px}
select:focus-visible{outline:3px solid var(--ca-focus);outline-offset:2px;border-color:var(--ca-navy-700)}
.legend{display:flex;flex-wrap:wrap;gap:var(--s-3);font-size:.875rem;color:var(--ca-slate);align-items:center}
.legend i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:.4rem;vertical-align:-1px}

/* ---------- Who can run ---------- */
.basics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}
@media (max-width:900px){.basics{grid-template-columns:minmax(0,1fr)}}
.key{display:grid;gap:.75rem}
.key div{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start}
.key p{font-size:.9375rem;color:var(--ca-charcoal)}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:var(--s-5) 0 var(--s-3)}
.filters button{min-height:36px;padding:0 .9rem;border:2px solid var(--ca-navy-700);border-radius:var(--r-1);background:var(--ca-white);color:var(--ca-navy-700);font-family:var(--font-accent);font-weight:600;font-size:.875rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ca-navy-700);color:var(--ca-paper)}
.filters button:hover{background:var(--ca-navy-50)}
.filters button[aria-pressed="true"]:hover{background:var(--ca-navy-900)}
.tbl-wrap{overflow-x:auto;min-width:0;border:1px solid var(--ca-limestone);border-radius:var(--r-2);background:var(--ca-white)}
.tbl-wrap:focus-visible{outline:3px solid var(--ca-focus);outline-offset:2px}
table.qb{width:100%;border-collapse:collapse;font-size:.9375rem}
.qb th{font-family:var(--font-accent);font-weight:600;font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ca-paper);background:var(--ca-navy-700);text-align:left;padding:.65rem .85rem;white-space:nowrap}
.qb th.n,.qb td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.qb td{padding:.7rem .85rem;border-bottom:1px solid var(--ca-fog);vertical-align:top;color:var(--ca-charcoal)}
.qb td.office{font-weight:700;color:var(--ca-navy-700);white-space:nowrap}
.qb tbody tr:nth-child(even) td{background:var(--ca-cream)}
.qb tr[hidden]{display:none}
@media (max-width:700px){table.qb{min-width:760px}}
.qb caption{caption-side:bottom;text-align:left;font-size:.8125rem;color:var(--ca-slate);padding:var(--s-3) .85rem}
.fit{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s-3);margin-top:var(--s-3)}
.fit button{text-align:left;padding:var(--s-4);border:2px solid var(--ca-limestone);border-radius:var(--r-2);background:var(--ca-white);cursor:pointer;font:inherit;color:var(--ca-ink);display:grid;gap:.25rem;min-height:44px}
.fit button b{font-family:var(--font-accent);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ca-navy-700)}
.fit button span{font-size:.875rem;color:var(--ca-slate)}
.fit button:hover{border-color:var(--ca-navy-300)}
.fit button[aria-pressed="true"]{border-color:var(--ca-navy-700);background:var(--ca-navy-50)}
.fit-out{margin-top:var(--s-4);background:var(--ca-navy-700);color:var(--ca-paper);border-radius:var(--r-2);padding:var(--s-5);display:grid;gap:.5rem}
.fit-out .eyebrow{color:var(--ca-gold-500)}
.fit-out p{color:var(--ca-navy-100)}
.fit-out .h3{color:var(--ca-paper)}

/* ---------- Ballot / timeline ---------- */
.cycles{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s-6);align-items:start}
@media (max-width:900px){.cycles{grid-template-columns:minmax(0,1fr)}}
.timeline{list-style:none;display:grid;gap:0;border-left:3px solid var(--ca-gold-500);margin-left:.5rem}
.timeline li{padding:0 0 var(--s-5) var(--s-5);position:relative}
.timeline li::before{content:'';position:absolute;left:-10px;top:.45rem;width:17px;height:17px;border-radius:50%;background:var(--ca-navy-900);border:3px solid var(--ca-gold-500)}
.timeline li.now::before{background:var(--ca-gold-500)}
.timeline .when{font-family:var(--font-accent);font-weight:600;font-size:.875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ca-gold-500)}
.timeline .what{font-family:var(--font-text);font-size:1.375rem;line-height:1.15;color:var(--ca-paper);margin-top:.15rem;font-weight:700}
.timeline p{margin-top:.35rem;color:var(--ca-navy-100);font-size:.9375rem}
.steps{list-style:none;display:grid;gap:var(--s-3);counter-reset:step}
.steps li{display:grid;grid-template-columns:44px 1fr;gap:var(--s-3);align-items:start;background:var(--ca-navy-700);border-radius:var(--r-2);padding:var(--s-4);border:1px solid rgba(255,255,255,.08)}
.steps li::before{counter-increment:step;content:counter(step);width:44px;height:44px;border-radius:50%;background:var(--ca-gold-500);color:var(--ca-navy-900);font-family:var(--font-text);font-size:1.25rem;display:grid;place-items:center;font-weight:700}
.steps b{display:block;font-family:var(--font-text);font-weight:700;color:var(--ca-paper);font-size:1.0625rem}
.steps p{color:var(--ca-navy-100);font-size:.9375rem;margin-top:.2rem}
.terms{width:100%;border-collapse:collapse;font-size:.9375rem;margin-top:var(--s-4)}
.terms th{font-family:var(--font-accent);font-weight:600;font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ca-gold-500);text-align:left;padding:.5rem .6rem;border-bottom:1px solid rgba(255,255,255,.18)}
.terms td{padding:.55rem .6rem;border-bottom:1px solid rgba(255,255,255,.1);color:var(--ca-navy-100);vertical-align:top}
.terms td:first-child{color:var(--ca-paper);font-weight:600}
.terms tr.next td{color:var(--ca-paper)}
.terms tr.next td:first-child::after{content:'next';font-family:var(--font-accent);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ca-navy-900);background:var(--ca-gold-500);padding:.1rem .4rem;border-radius:3px;margin-left:.5rem;vertical-align:middle}

/* ---------- CTA ---------- */
.cta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5);margin-top:var(--s-6)}
@media (max-width:900px){.cta-grid{grid-template-columns:minmax(0,1fr)}}
.lane{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.35);border-radius:var(--r-2);padding:var(--s-5);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3);align-content:start}
.lane .h2{color:#fff}
.lane p{color:#fff}
.lane ul{list-style:none;display:grid;gap:.35rem;color:#fff;font-size:.9375rem}
.lane ul li::before{content:'·';margin-right:.5rem;font-weight:700}
.on-red .eyebrow{color:#fff}
.on-red .lead{color:#fff}
.on-red a{color:#fff;text-decoration-color:#fff}
.on-red .h1{color:#fff}

/* ---------- Footer ---------- */
.site-footer{background:var(--ca-navy-700);color:var(--ca-navy-100);padding-block:var(--s-7) var(--s-6);border-top:4px solid var(--ca-gold-500)}
.site-footer .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:var(--s-6)}
@media (max-width:900px){.site-footer .wrap{grid-template-columns:minmax(0,1fr)}}
.site-footer .brand{margin-bottom:var(--s-3)}
.site-footer p{font-size:.9375rem;max-width:44ch}
.site-footer h2{font-family:var(--font-accent);font-weight:600;font-size:.875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ca-gold-500);margin-bottom:var(--s-3)}
.site-footer ul{list-style:none;display:grid;gap:.45rem;font-size:.9375rem}
.site-footer a{color:var(--ca-paper);text-decoration-color:var(--ca-gold-500)}
.site-footer a:hover{color:var(--ca-gold-300)}
.legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:var(--s-4);font-size:.8125rem;color:var(--ca-navy-300);display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);justify-content:space-between}

/* ---------- Quick Book tab + drawer ---------- */
.qb-tab{position:fixed;right:0;bottom:clamp(1.25rem,6vh,3rem);z-index:70;display:flex;align-items:center;justify-content:center;gap:.5rem;writing-mode:vertical-rl;text-orientation:mixed;background:var(--ca-red-500);color:#fff;border:1px solid #fff;border-right:0;border-top:4px solid var(--ca-gold-500);border-radius:var(--r-1) 0 0 var(--r-1);padding:1rem .6rem;font-family:var(--font-accent);font-weight:700;font-size:1rem;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;box-shadow:0 18px 55px rgba(1,19,47,.48);transition:background-color .15s,padding .15s,opacity .3s,transform .3s}
.qb-tab:hover{background:var(--ca-red-700);padding-right:.8rem}
.qb-tab:focus-visible{outline:3px solid var(--ca-focus);outline-offset:2px}
/* The tab reads top to bottom, so align-items centres the mark and the words
   across its width. It centres each on its line box, and the words fill only
   the cap box inside theirs: ascent 1.0em against descent 0.2em puts the box
   centre 0.05em to the block-start side of the cap centre. In vertical-rl
   block-start is the right, so the mark shifts 0.05em left to sit on the same
   axis as the lettering. translate rather than transform, which the rotation
   already owns. */
.qb-tab svg{width:1.1em;height:1.1em;flex:none;transform:rotate(90deg);translate:-.05em 0}
/* The rebuild payoff card lands in this same bottom-right corner at the end of
   the pinned scroll, so slide the tab off the edge while that card is up. */
body:has(.payoff.show) .qb-tab{opacity:0;transform:translateX(110%);pointer-events:none}
@media (prefers-reduced-motion:reduce){.qb-tab{transition:background-color .15s,padding .15s}}
@media (max-width:640px){.qb-tab{bottom:14px;writing-mode:horizontal-tb;border-bottom:0;border-top:4px solid var(--ca-gold-500);border-radius:var(--r-1) 0 0 var(--r-1);padding:.55rem .8rem;font-size:.875rem;letter-spacing:.12em}.qb-tab svg{transform:none;translate:0 -.05em}}
.drawer{position:fixed;inset:0;z-index:80;display:none}
.drawer.open{display:block}
.drawer .scrim{position:absolute;inset:0;background:rgba(1,19,47,.6)}
.drawer .sheet{position:absolute;top:0;right:0;bottom:0;width:min(440px,92vw);background:var(--ca-white);box-shadow:var(--e-3);display:grid;grid-template-rows:auto 1fr auto;border-left:6px solid var(--ca-gold-500)}
.drawer .sheet header{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-4) var(--s-5);background:var(--ca-navy-700);color:var(--ca-paper)}
.drawer .sheet header .h3{color:var(--ca-paper);font-family:var(--font-text);font-weight:400;font-size:1.375rem}
.drawer .close{min-width:44px;min-height:44px;border:2px solid var(--ca-paper);border-radius:var(--r-1);background:transparent;color:var(--ca-paper);cursor:pointer;display:grid;place-items:center}
.drawer .close:focus-visible{outline-color:var(--ca-focus-dark)}
.drawer .close svg{width:18px;height:18px}
.toc{overflow:auto;padding:var(--s-4) var(--s-5) var(--s-5);display:grid;gap:.5rem;align-content:start}
.toc p{font-size:.9375rem;color:var(--ca-slate);margin-bottom:.35rem}
.toc a{display:grid;grid-template-columns:12px 1fr auto;gap:.7rem;align-items:center;padding:.7rem .8rem .7rem .6rem;border:1px solid var(--ca-limestone);border-left-width:6px;border-radius:var(--r-1);text-decoration:none;color:var(--ca-ink);font-weight:600;background:var(--ca-white)}
.toc a small{font-family:var(--font-accent);font-weight:600;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ca-slate)}
.toc a:hover{background:var(--ca-navy-50);color:var(--ca-navy-700)}
.toc a i{width:12px;height:12px;border-radius:2px;display:inline-block}
.drawer .sheet footer{padding:var(--s-4) var(--s-5) var(--s-5);border-top:1px solid var(--ca-fog);display:grid;gap:.5rem}

/* ---------- Punch card ----------
   A card you actually punch. The holes read as unpunched stock until you mark
   one, then a Ray Gold star stamps through. Everything animated here is
   decoration over a working checkbox, and all of it stops under
   prefers-reduced-motion. */
.punchcard{background:var(--ca-navy-900);color:var(--ca-paper);overflow:hidden}
.punchcard .wrap{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);
  gap:var(--s-7);align-items:start}
@media (max-width:900px){.punchcard .wrap{grid-template-columns:minmax(0,1fr);gap:var(--s-5)}}

.pc-head{display:grid;gap:var(--s-3);position:sticky;top:84px}
@media (max-width:900px){.pc-head{position:static}}
.punchcard .display{color:var(--ca-paper);font-size:clamp(2rem,4.2vw,3rem);line-height:1.04}
.punchcard .eyebrow{color:var(--ca-gold-500)}
.punchcard .lead{color:var(--ca-navy-100);max-width:40ch}
.punchcard .pc-note{color:var(--ca-navy-300);max-width:38ch}

/* Progress: a ring that fills, and a number that carries the news. */
.pc-meter{display:flex;align-items:center;gap:var(--s-4);margin-top:var(--s-2)}
.pc-ring{width:84px;height:84px;flex:none;transform:rotate(-90deg)}
.pc-ring circle{fill:none;stroke-width:8;stroke-linecap:round}
.pc-ring-bg{stroke:var(--ca-navy-700)}
.pc-ring-fg{stroke:var(--ca-gold-500);stroke-dasharray:226;stroke-dashoffset:226;
  transition:stroke-dashoffset .5s cubic-bezier(.2,.8,.2,1)}
.pc-count{display:grid;line-height:1.1}
.pc-count b{font-family:var(--font-display);font-weight:400;font-size:2.5rem;
  color:var(--ca-gold-500);font-variant-numeric:tabular-nums}
.pc-count span{font-family:var(--font-accent);font-weight:600;font-size:.875rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ca-navy-100)}
.punchcard .pc-status{font-family:var(--font-accent);font-weight:600;
  font-size:1.0625rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ca-gold-500);min-height:1.4em}
.pc-status:empty{display:none}

/* The card stock, with a perforated tear-off edge. */
.pc-card{position:relative;background:var(--ca-paper);border-radius:var(--r-3);
  padding:var(--s-5) var(--s-5) var(--s-5) var(--s-6);box-shadow:var(--e-3)}
.pc-rail{position:absolute;inset:0 auto 0 var(--s-4);width:2px;
  background:repeating-linear-gradient(var(--ca-limestone) 0 6px,transparent 6px 12px)}
@media (max-width:560px){
  .pc-card{padding:var(--s-4)}
  .pc-rail{display:none}
}

.pc-grid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:var(--s-2)}
.pc-cell label{display:flex;align-items:flex-start;gap:var(--s-3);min-height:64px;
  padding:var(--s-3);border:1px dashed var(--ca-limestone);border-radius:var(--r-2);
  background:var(--ca-white);cursor:pointer;
  transition:border-color .18s ease,background .18s ease}
.pc-cell label:hover{border-color:var(--ca-gold-500);background:var(--ca-gold-50)}
.pc-cell input{position:absolute;opacity:0;pointer-events:none}
.pc-cell label:focus-within{outline:3px solid var(--ca-focus);outline-offset:2px}

/* The hole: a punched-out disc that a star stamps into. */
.pc-hole{position:relative;flex:none;width:30px;height:30px;border-radius:50%;
  background:var(--ca-fog);box-shadow:inset 0 2px 4px rgba(2,32,79,.22);
  display:grid;place-items:center;transition:background .18s ease,box-shadow .18s ease}
.pc-hole svg{width:20px;height:20px;fill:var(--ca-gold-500);
  transform:scale(0) rotate(-40deg);opacity:0;
  transition:transform .34s cubic-bezier(.34,1.56,.64,1),opacity .2s ease}
.pc-text{font-family:var(--font-accent);font-weight:600;font-size:1rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ca-navy-700);line-height:1.2}
.pc-text small{display:block;font-family:var(--font-text);font-weight:400;
  font-size:.8125rem;letter-spacing:0;text-transform:none;color:var(--ca-slate);
  margin-top:var(--s-1)}

.pc-cell:has(input:checked) label{border-style:solid;border-color:var(--ca-red-500);
  background:var(--ca-red-50)}
.pc-cell:has(input:checked) .pc-hole{background:var(--ca-navy-900);
  box-shadow:inset 0 0 0 2px var(--ca-gold-500)}
.pc-cell:has(input:checked) .pc-hole svg{transform:scale(1) rotate(0);opacity:1}

.pc-reset{margin-top:var(--s-4);background:none;border:0;padding:var(--s-2) 0;
  font-family:var(--font-accent);font-weight:600;font-size:.875rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ca-slate);cursor:pointer;
  border-bottom:2px solid var(--ca-limestone)}
.pc-reset:hover{color:var(--ca-red-500);border-bottom-color:var(--ca-red-500)}

/* Cells deal in as the card scrolls into view. */
.pc-card[data-pc] .pc-cell{opacity:0;transform:translateY(10px)}
.pc-card.is-dealt .pc-cell{opacity:1;transform:none;
  transition:opacity .4s ease calc(var(--i) * 28ms),
             transform .4s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 28ms)}

/* A finished card says so. */
.pc-card.is-complete{box-shadow:0 0 0 3px var(--ca-gold-500),var(--e-3)}
.punchcard.is-complete .pc-count b{color:var(--ca-gold-300)}

@media (prefers-reduced-motion:reduce){
  .pc-card[data-pc] .pc-cell{opacity:1;transform:none}
  .pc-card.is-dealt .pc-cell{transition:none}
  .pc-hole svg{transition:none}
  .pc-ring-fg{transition:none}
}

/* ---------- Header bar ----------
   Logo hard left, call to action hard right, menu items spread across
   everything between them. The bar breaks out of the 1180px .wrap cap so the
   two ends actually sit at the edges of the screen rather than at the edges of
   a centred column. Scoped above the drawer breakpoint so the mobile dropdown,
   which stacks these in a column, is untouched. */
@media (min-width:1150px){
  .site-header .wrap{
    max-width:none;
    gap:var(--s-6);
  }
  .site-nav{
    margin-left:0;
    flex:1 1 auto;
    min-width:0;
  }
  .site-nav ul{
    flex:1 1 auto;
    justify-content:space-evenly;
    gap:var(--s-2);
    /* On very wide screens an unbounded track flings the five labels into the
       far corners, so hold them together as one group centred between the
       badge and the button. */
    max-width:900px;
    margin-inline:auto;
  }
  .site-nav li a{white-space:nowrap}
  .site-nav .btn{flex:none;margin-left:var(--s-6)}
}

/* Between the drawer breakpoint and a wide bar the five labels and the button
   are tight, so trim the padding and tracking rather than let them collide. */
@media (min-width:1150px) and (max-width:1319px){
  .site-header .wrap{gap:var(--s-4)}
  .site-nav ul{gap:0}
  .site-nav li a{padding:.6rem .45rem;font-size:.875rem;letter-spacing:.04em}
  .site-nav .btn{margin-left:var(--s-3);padding:0 1rem}
}

/* The Quick Book nav link carries the same book mark as the floating tab, so
   the two ways into the docs read as one thing. */
.site-nav .nav-book{display:flex;align-items:center;justify-content:center;gap:.45rem}
.site-nav .nav-book svg{width:1.05em;height:1.05em;flex:none;
  /* The labels are all caps, so the glyphs fill only the cap box and sit above
     the centre of the line box that align-items:center measures against, which
     leaves a geometrically centred icon sitting slightly low. Barlow Condensed
     ships ascent 1.0em, descent 0.2em, cap height 0.7em, so the line-box centre
     is +0.40em off the baseline and the cap centre is +0.35em: lift by 0.05em. */
  transform:translateY(-.05em)}

/* ==========================================================================
   Builder signature
   ==========================================================================
   Footer furniture, ranged right on its own row under the legal line. It was a
   fixed pill in a corner; the corner is the Quick Book tab's and the credit
   reads better where the rest of the small print lives. Nothing to gate on
   scroll any more, so js/signature.js went with it.

   The wordmark still folds out on hover, which is the easter egg. Where there
   is no hover to open it with there is no egg either, so it just sits open. */
.ss-egg{
  grid-column:1/-1;
  justify-self:end;
  display:inline-flex;
  align-items:center;
  margin-top:var(--s-4);
  color:var(--ca-navy-300);
  font-family:var(--font-accent);
  font-size:.8125rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  transition:color .3s;
}
.ss-egg:hover,
.ss-egg:focus-visible{color:var(--ca-gold-500)}
.ss-egg:focus-visible{outline:3px solid var(--ca-focus-dark);outline-offset:3px}
/* The mark's own margins were for sitting in a line of text; here the flexbox
   centres it and the word owns the gap. */
.ss-egg .stackmark{margin:0}
.ss-egg-word{padding-left:6px}
/* Clipped rather than removed, so the link keeps its accessible name while the
   wordmark is folded away. */
@media (hover:hover){
  .ss-egg-word{
    max-width:0;
    padding-left:0;
    overflow:hidden;
    transition:max-width .45s cubic-bezier(.2,.7,.3,1), padding-left .45s;
  }
  .ss-egg:hover .ss-egg-word,
  .ss-egg:focus-visible .ss-egg-word{max-width:190px;padding-left:6px}
}
/* Three stacked bars with the top one lit: the StoryStack mark. */
.stackmark{display:inline-block;position:relative;width:11px;height:11px;margin:0 5px -1px 0}
.stackmark span{position:absolute;left:0;height:2px;border-radius:1px;background:var(--ca-steel)}
.stackmark span:nth-child(1){top:1px;width:70%;background:var(--ca-gold-500)}
.stackmark span:nth-child(2){top:5px;width:100%}
.stackmark span:nth-child(3){top:9px;width:55%}
/* Hovering builds the mark the way a burger goes together: the bottom bar lands
   first and the lit one drops on last, each tossed in on an arc rather than
   dropped straight down. Top and bottom come from the left, the middle from the
   right, so the three arcs alternate. */
@keyframes stack-drop{
  /* every step lists translate/rotate/scaleX in the same order, or the browser
     has nothing to interpolate between */
  0%{transform:translate(-11px,-6px) rotate(-14deg) scaleX(1);opacity:0;animation-timing-function:cubic-bezier(.2,.6,.4,1)}
  28%{transform:translate(-6px,-8px) rotate(-9deg) scaleX(1);opacity:1;animation-timing-function:cubic-bezier(.55,0,.85,.5)}
  62%{transform:translate(0,0) rotate(0deg) scaleX(1);opacity:1;animation-timing-function:ease-out}
  75%{transform:translate(0,0) rotate(0deg) scaleX(1.14);opacity:1}
  100%{transform:translate(0,0) rotate(0deg) scaleX(1);opacity:1}
}
@keyframes stack-drop-right{
  0%{transform:translate(11px,-6px) rotate(14deg) scaleX(1);opacity:0;animation-timing-function:cubic-bezier(.2,.6,.4,1)}
  28%{transform:translate(6px,-8px) rotate(9deg) scaleX(1);opacity:1;animation-timing-function:cubic-bezier(.55,0,.85,.5)}
  62%{transform:translate(0,0) rotate(0deg) scaleX(1);opacity:1;animation-timing-function:ease-out}
  75%{transform:translate(0,0) rotate(0deg) scaleX(1.14);opacity:1}
  100%{transform:translate(0,0) rotate(0deg) scaleX(1);opacity:1}
}
/* the bars are flush left, so the squash spreads right rather than pulling the
   stack off its edge */
.stackmark span{transform-origin:left center}
.ss-egg:hover .stackmark span,
.ss-egg:focus-visible .stackmark span{
  /* backwards, so a bar waiting out its delay stays up and invisible rather
     than sitting in place and then jumping back up to fall again */
  animation:stack-drop .56s backwards;
}
.ss-egg:hover .stackmark span:nth-child(3),
.ss-egg:focus-visible .stackmark span:nth-child(3){animation-delay:0s}
.ss-egg:hover .stackmark span:nth-child(2),
.ss-egg:focus-visible .stackmark span:nth-child(2){animation-name:stack-drop-right;animation-delay:.16s}
.ss-egg:hover .stackmark span:nth-child(1),
.ss-egg:focus-visible .stackmark span:nth-child(1){animation-delay:.32s}

@media (prefers-reduced-motion:reduce){
  .ss-egg:hover .stackmark span,
  .ss-egg:focus-visible .stackmark span{animation:none}
  .ss-egg-word{transition:none}
}

/* ==========================================================================
   404
   ==========================================================================
   Its own page rather than the site's furniture: no header, no footer, nothing
   to navigate but the two ways back. Navy ground with the seal above the type,
   centred, and tall enough to hold the viewport on its own. */
.error-page{
  min-height:100svh;
  display:grid;
  align-content:center;
  background:var(--ca-navy-900);
  color:var(--ca-paper);
  padding-block:var(--s-7);
  text-align:center;
}
.error-page .wrap{display:grid;justify-items:center;gap:var(--s-3);max-width:44rem}
.error-seal{
  width:clamp(112px,17vw,196px);
  height:auto;
  margin-bottom:var(--s-2);
  filter:drop-shadow(0 10px 26px rgba(1,19,47,.6));
}
.error-page .display{font-size:clamp(2.25rem,6vw,3.5rem)}
.error-page .lead{max-width:46ch}
.error-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:center;margin-top:var(--s-3)}
@media (max-width:520px){
  .error-actions{width:100%}
  .error-actions .btn{width:100%}
}

/* ==========================================================================
   The book mark turns a page on hover
   ==========================================================================
   The third path is the right leaf, drawn exactly over the cover it sits on, so
   at rest it is invisible and the mark is unchanged. On hover it sweeps across
   the spine and fades, which reads as a page going over. Pivoting on the spine
   rather than the icon's centre is the whole trick, hence transform-box. */
.nav-book svg .pg,
.qb-tab svg .pg{
  opacity:0;
  transform-box:view-box;
  transform-origin:8px 8px;
}
@keyframes book-turn{
  0%{transform:scaleX(1);opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{transform:scaleX(-1);opacity:0}
}
.nav-book:hover svg .pg,
.nav-book:focus-visible svg .pg,
.qb-tab:hover svg .pg,
.qb-tab:focus-visible svg .pg{
  animation:book-turn .6s cubic-bezier(.4,0,.3,1);
}

@media (prefers-reduced-motion:reduce){
  .nav-book:hover svg .pg,
  .nav-book:focus-visible svg .pg,
  .qb-tab:hover svg .pg,
  .qb-tab:focus-visible svg .pg{animation:none}
}