/* ==========================================================================
   D.A.D.S. — one design system for the Safety Hub and the Family Toolkit.

   The two surfaces are one product. dads-hub.bornbetween2generals.com is the
   front door and dads.bornbetween2generals.com carries the same tools on flat
   filenames; both load THIS file, so a change here lands on both and they can
   never drift apart visually.

   Ground rules that shaped it:
     · The reader is often frightened and often reading at 1 a.m. on a phone.
       Big type, generous line-height, warm bone rather than clinical white.
     · No system emoji anywhere. Every glyph is from BB2G's own `enamel` set
       (~/bb2g-house/emoji) and every card illustration was drawn for this app.
     · No terminal chrome. Monospace is for hashes and phone numbers, nothing
       else — it makes a safety page read like a console, which is colder.
     · Card grids are flex with a flex-basis, never repeat(auto-fit,minmax()).
       auto-fit leaves blank holes on a ragged last row.
     · Nothing loads from a third party. The fonts are self-hosted, the
       illustrations are local, and there is no analytics anywhere — the page
       promises nothing leaves your device and it has to be true of the page
       itself first.
   ========================================================================== */

@font-face{font-family:'Oswald';font-style:normal;font-weight:200 700;font-display:swap;
  src:url('fonts/oswald-var.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/inter-var.woff2') format('woff2')}

:root{
  /* Warmer and deeper than the first build: the old #0A0A0A ground with cold
     white type read as a dashboard. The blue in the ground and the bone in the
     type are what make it feel like a lamp on at night rather than a console. */
  --ink:#0B0D10; --ink-2:#0F1318;
  --panel:#141920; --panel-2:#1A212A; --line:#28313D; --line-2:#37424F;
  --bone:#EDE9E1; --muted:#98A3B0; --muted-2:#6F7A87;
  --steel:#7FB2E4; --steel-dim:#2C4763; --steel-ink:#0B1723;
  --amber:#D9A441; --amber-dim:#4A3A18;
  --red:#E0524A; --red-dim:#4A1E1B;
  --green:#6BB088;
  --radius:16px; --radius-sm:11px;
  --shadow:0 18px 44px -22px rgba(0,0,0,.9);
  --measure:66ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;
  padding-bottom:calc(96px + env(safe-area-inset-bottom));
  overflow-x:hidden;
}
img,video{max-width:100%}
a{color:var(--steel);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:4px}

.wrap{width:min(1180px,100% - 2.4rem);margin-inline:auto}
/* The five secondary tool pages define their own narrower `.wrap` inline, and
   their stylesheet loads after this one. The shared shell uses its own name so
   a masthead never inherits a 720px content column. */
.shellwrap{width:min(1180px,100% - 2.4rem);margin-inline:auto}
.strip .shellwrap{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem 1.6rem;padding:.55rem 0}
.mast .shellwrap{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;padding:.7rem 0}
.wrap-tight{width:min(820px,100% - 2.4rem);margin-inline:auto}
.skip{position:fixed;left:10px;top:-70px;z-index:9999;background:var(--bone);color:var(--ink);
  padding:11px 18px;border-radius:9px;font-weight:600;transition:top .15s}
.skip:focus{top:10px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

h1,h2,h3,h4{font-family:'Oswald',Impact,sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.03em;line-height:1.08;margin:0}
.eyebrow{font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;
  letter-spacing:.2em;font-size:12px;color:var(--steel);margin:0 0 .55rem}
.lede{color:var(--muted);max-width:var(--measure)}
.tiny{font-size:13px;color:var(--muted-2)}
.num{font-variant-numeric:tabular-nums}
/* Monospace ONLY here: numbers a person may have to read out or dial. */
.dial{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* ── the standing strip ────────────────────────────────────────────────
   Replaces the old scrolling ticker. A marquee is unreadable, it cannot be
   paused, and on a page about a child in trouble it reads as urgency theatre.
   The same facts, standing still.                                        */
.strip{background:#06080A;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.strip .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem 1.6rem;padding:.55rem 0}
.strip b{color:var(--bone);font-weight:600}
.strip .dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none;
  box-shadow:0 0 0 3px rgba(107,176,136,.16)}
.strip .sp{flex:1}

/* ── masthead ─────────────────────────────────────────────────────────── */
.mast{position:sticky;top:0;z-index:40;background:rgba(11,13,16,.86);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.mast .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;padding:.7rem 0}
.brand{display:flex;align-items:center;gap:.7rem;color:var(--bone);text-decoration:none}
.brand:hover{text-decoration:none}
.brand svg{width:38px;height:auto;flex:none;display:block}
.brand > span{display:block}
.brand .bt{display:block;font-family:'Oswald',sans-serif;font-weight:700;font-size:19px;letter-spacing:.09em;
  text-transform:uppercase;line-height:1}
.brand .bs{display:block;font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:var(--muted-2);margin-top:3px}
.mast nav{margin-left:auto;display:flex;gap:.15rem;flex-wrap:wrap}
.mast nav a{font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;
  letter-spacing:.09em;font-size:12.5px;color:var(--muted);padding:.45rem .7rem;border-radius:8px}
.mast nav .navbtn{background:none;border:0;cursor:pointer;font-family:'Oswald',sans-serif;font-weight:500;
  text-transform:uppercase;letter-spacing:.09em;font-size:12.5px;color:var(--steel);padding:.45rem .7rem;border-radius:8px}
.mast nav .navbtn:hover{color:var(--bone);background:var(--panel)}
.mast nav a:hover,.mast nav a[aria-current]{color:var(--bone);background:var(--panel);text-decoration:none}
.mast nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--steel)}
/* ⚠ `.mast .wrap` needs flex-wrap for this to do anything. Without it the nav
   stayed on the brand's line and ran off the right edge of a phone, and the
   wordmark wrapped to three lines fighting it for room. */
@media (max-width:860px){
  .mast nav{width:100%;margin-left:0;order:3;overflow-x:auto;flex-wrap:nowrap;
    scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
  .mast nav::-webkit-scrollbar{display:none}
  .mast nav a,.mast nav .navbtn{white-space:nowrap}
}
/* Below this the wordmark alone is the brand; the strapline is on every page
   already and only costs a phone two extra lines of masthead. */
@media (max-width:560px){
  .brand .bs{display:none}
  .brand svg{width:32px}
  .brand .bt{font-size:17px}
}

/* ── the hero loop ─────────────────────────────────────────────────────
   THE LURE STANDARD. Full-bleed video behind the type; the grade is what
   makes arbitrary footage belong to this palette, and the veil is what makes
   it read as part of the page rather than a banner stuck on top.

   The type here is bone on dark, so the footage grades DOWN. (On a light
   page with dark type the same filter goes grey and muddy and you grade UP
   instead — the direction follows the color of the TYPE, not the footage.)

   `.chero img` is a real image UNDER the loop, not a poster attribute: the
   watchdog in motion.js removes a video that never started, and a poster
   belongs to the element being removed.                                  */
.chero{position:relative;overflow:hidden;isolation:isolate;
  width:100vw;margin-left:calc(50% - 50vw);           /* never a boxed banner */
  min-height:clamp(440px,68vh,720px);display:flex;align-items:flex-end}
.chero .cbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:saturate(.62) contrast(1.02) brightness(1.15)}
.chero video.cbg{opacity:0;transition:opacity 1.1s ease}
.chero video.cbg.is-live{opacity:1;animation:heroDrift 46s ease-in-out infinite alternate}
.chero img.cbg{animation:heroDrift 46s ease-in-out infinite alternate}
@keyframes heroDrift{from{transform:scale(1.06)}to{transform:scale(1.17)}}
.chero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(130% 95% at 18% 34%,rgba(11,13,16,.9),rgba(11,13,16,.4) 60%,rgba(11,13,16,.15)),
    linear-gradient(180deg,rgba(11,13,16,.3),rgba(11,13,16,.45) 52%,var(--ink))}
.chero .cinner{position:relative;z-index:2;width:100%;min-width:0;padding:6.5rem 0 3.2rem}
.chero .listen-row{margin:1rem 0 0}
.chero h1{font-size:clamp(2.1rem,6.4vw,4.15rem);letter-spacing:.005em;text-wrap:balance;max-width:19ch}
.chero .lede{font-size:clamp(1rem,1.6vw,1.16rem);color:#D7D3CB;margin:1.1rem 0 0;max-width:52ch}
.creed{font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;
  letter-spacing:.22em;font-size:11.5px;color:var(--amber);margin:0 0 .9rem}

.pillars{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.5rem 0 0;padding:0;list-style:none}
.pillars li{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.13em;
  font-size:12px;font-weight:600;padding:.42rem .9rem;border:1px solid var(--line-2);
  border-radius:999px;color:var(--bone);background:rgba(11,13,16,.5)}

.row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-top:1.7rem}
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:'Oswald',sans-serif;
  font-weight:600;text-transform:uppercase;letter-spacing:.09em;font-size:14px;
  padding:.82rem 1.35rem;border-radius:11px;border:1px solid var(--line-2);
  background:var(--panel);color:var(--bone);cursor:pointer;text-decoration:none;
  transition:background .15s,border-color .15s,transform .15s}
.btn:hover{background:var(--panel-2);border-color:var(--steel-dim);transform:translateY(-1px);text-decoration:none}
.btn-p{background:var(--steel);border-color:var(--steel);color:var(--steel-ink)}
.btn-p:hover{background:#98C3EE;border-color:#98C3EE}
.btn-r{background:var(--red);border-color:var(--red);color:#fff}
.btn-r:hover{background:#EA6A61;border-color:#EA6A61}

/* ── sections ─────────────────────────────────────────────────────────── */
.sec{padding:3.4rem 0 0;scroll-margin-top:88px}
section[id],[id].sec{scroll-margin-top:88px}
.sec-head{display:flex;align-items:flex-end;gap:1rem;margin:0 0 1.4rem;flex-wrap:wrap}
.sec-head h2{font-size:clamp(1.3rem,2.6vw,1.85rem)}
.sec-head .ln{flex:1;height:1px;background:var(--line);min-width:2rem;margin-bottom:.55rem}
.sec-head .tag{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-2)}

/* ── the deck ──────────────────────────────────────────────────────────
   flex + flex-basis, NOT repeat(auto-fit,minmax()). auto-fit leaves visible
   holes whenever the last row is ragged, and those holes are the "blank white
   boxes" that keep getting reported. With flex the last row simply grows.   */
.deck{display:flex;flex-wrap:wrap;gap:1.1rem;list-style:none;margin:0;padding:0}
.deck > *{flex:1 1 300px;min-width:min(300px,100%)}
.deck-3 > *{flex:1 1 330px}
.deck-2 > *{flex:1 1 460px}

.card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;color:inherit;text-decoration:none;
  transition:border-color .16s,transform .16s,background .16s;box-shadow:var(--shadow)}
a.card:hover{border-color:var(--steel-dim);background:var(--panel-2);transform:translateY(-3px);text-decoration:none}
.card .plate{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  background:var(--ink-2);border-bottom:1px solid var(--line)}
/* `height:auto` is load-bearing. The width/height ATTRIBUTES on the <img> are
   there to reserve layout space, but without this the attribute height wins and
   every card grew to 512px of plate. */
.card .cbody{padding:1.1rem 1.2rem 1.15rem;display:flex;flex-direction:column;flex:1;gap:.45rem}
.card h3{font-size:1.06rem}
.card p{margin:0;color:var(--muted);font-size:14.6px;flex:1}
.card .go{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.1em;
  font-size:12px;font-weight:600;color:var(--steel);margin-top:.3rem}
.card{position:relative}
.card .badge{position:absolute;top:.7rem;left:.7rem;z-index:2;backdrop-filter:blur(4px);align-self:flex-start;font-family:'Oswald',sans-serif;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red);border:1px solid var(--red-dim);background:var(--red-dim);
  border-radius:6px;padding:.2rem .55rem}
.card .badge.ok{color:var(--green);border-color:#1F3A2B;background:#16261E}
.card .badge.wait{color:var(--amber);border-color:var(--amber-dim);background:#241D0F}

/* ── the enamel marks ──────────────────────────────────────────────────
   BB2G's own glyphs, never a system emoji. Apple's and Google's emoji are
   somebody else's artwork and change shape per device, inside a design system
   that is otherwise entirely hers.                                         */
/* Drawn line marks (marks.js) — anything under ~32px. */
.m{width:1.18em;height:1.18em;flex:none;vertical-align:-.2em;color:var(--amber)}
h3 .m,h2 .m{color:var(--steel)}
.cta-bar .em .m{color:#fff}
.note > .m{width:1.5em;height:1.5em;margin-top:.15rem}
/* BB2G's own enamel glyphs (assets/marks/*.png) — tiles at 40px and up only.
   Downscaled to 24px they turn to mush; that is what the line marks are for. */
.mark{width:1.55em;height:1.55em;flex:none;object-fit:contain;vertical-align:-.42em}
.mark-lg{width:44px;height:44px}
.mark-tile{width:46px;height:46px;padding:7px;background:var(--ink-2);border:1px solid var(--line);
  border-radius:12px;box-sizing:content-box}

/* ── the fact list ────────────────────────────────────────────────────── */
.facts{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;list-style:none;margin:0;padding:0}
.facts li{flex:1 1 190px;background:var(--panel);padding:1.15rem 1.2rem}
.facts .n{font-family:'Oswald',sans-serif;font-weight:700;font-size:1.85rem;color:var(--amber);line-height:1}
.facts .l{font-size:12.5px;color:var(--muted);margin-top:.35rem}
.facts .s{font-size:11.5px;color:var(--muted-2);margin-top:.5rem}

/* ── steps ────────────────────────────────────────────────────────────── */
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.steps li{display:flex;gap:1rem;background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--red);border-radius:var(--radius-sm);padding:1rem 1.15rem}
.steps .k{font-family:'Oswald',sans-serif;font-weight:700;font-size:1.3rem;color:var(--red);
  line-height:1.1;flex:none;width:1.9rem}
.steps b{display:block;font-size:16px;margin-bottom:.15rem}
.steps p{margin:0;color:var(--muted);font-size:14.6px}
.steps.calm li{border-left-color:var(--steel)}
.steps.calm .k{color:var(--steel)}

/* ── notes ────────────────────────────────────────────────────────────── */
.note{display:flex;gap:.85rem;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:1rem 1.15rem;color:var(--muted);font-size:14.6px}
.note b{color:var(--bone)}
.note.warn{border-color:var(--amber-dim);background:#1B1710}
.note.stop{border-color:var(--red-dim);background:#1B1210}

/* ── read aloud ────────────────────────────────────────────────────────
   Styling for assets/read.js. The button is deliberately quiet: an offer, not
   a demand. Nothing here ever autoplays.                                  */
.listen-row{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;margin:.2rem 0 1.15rem}
.listen{display:inline-flex;align-items:center;gap:.5rem;background:var(--panel);
  border:1px solid var(--line-2);color:var(--bone);border-radius:999px;
  padding:.4rem .95rem .4rem .55rem;font:600 13.5px/1 'Inter',sans-serif;cursor:pointer;
  transition:border-color .15s,background .15s}
.listen:hover{border-color:var(--amber);background:var(--panel-2)}
.listen .listen-ico{width:19px;height:19px;flex:none;border-radius:50%;background:var(--amber);
  position:relative}
.listen .listen-ico::after{content:"";position:absolute;left:7px;top:5px;border-style:solid;
  border-width:4.5px 0 4.5px 7px;border-color:transparent transparent transparent var(--ink)}
.listen.on .listen-ico{background:var(--green)}
.listen .listen-s{color:var(--muted-2);font-weight:500}
.listen-all{padding:.82rem 1.35rem;border-radius:11px;font-family:'Oswald',sans-serif;
  text-transform:uppercase;letter-spacing:.09em;font-size:14px;font-weight:600}
[data-listen-all]{display:block;flex-basis:100%;margin-top:.4rem}
.listen-note{font-size:12.5px;color:var(--muted-2);margin:.75rem 0 0;max-width:56ch}
.listen-tx{font-size:13.5px;color:var(--muted)}
.listen-tx summary{cursor:pointer;color:var(--muted);list-style:none}
.listen-tx summary::-webkit-details-marker{display:none}
.listen-tx summary::before{content:"▸ ";color:var(--muted-2)}
.listen-tx[open] summary::before{content:"▾ "}
.listen-tx p{margin:.6rem 0 0;max-width:var(--measure);line-height:1.7}
.reading{scroll-margin-top:88px}

.readdock{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(84px + env(safe-area-inset-bottom));z-index:60;
  width:min(680px,calc(100% - 1.6rem));display:flex;align-items:center;gap:.5rem;
  background:rgba(20,25,32,.97);backdrop-filter:blur(10px);border:1px solid var(--line-2);
  border-radius:14px;padding:.55rem .7rem;box-shadow:0 20px 50px -18px #000}
.readdock[hidden]{display:none}
.rd-b{background:none;border:0;color:var(--bone);font-size:14px;cursor:pointer;
  padding:.4rem .55rem;border-radius:8px;line-height:1}
.rd-b:hover{background:var(--panel-2)}
.rd-mid{flex:1;min-width:0}
.rd-h{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-bar{height:3px;background:var(--line);border-radius:2px;margin-top:.35rem;overflow:hidden}
.rd-bar i{display:block;height:100%;width:0;background:var(--amber)}
.rd-time{font-size:12px;color:var(--muted-2);font-variant-numeric:tabular-nums}
.rd-rate select{background:var(--panel);color:var(--bone);border:1px solid var(--line-2);
  border-radius:8px;font-size:12px;padding:.25rem .3rem}
.rd-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:600px){.rd-rate,.rd-time{display:none}}

/* ── the family of apps rail ──────────────────────────────────────────── */
.rail{display:flex;flex-wrap:wrap;gap:.75rem;list-style:none;margin:0;padding:0}
.rail > li{flex:1 1 250px}
.rail a{display:flex;gap:.8rem;align-items:flex-start;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:.85rem .95rem;
  height:100%;color:inherit;transition:border-color .15s,background .15s}
.rail a:hover{border-color:var(--steel-dim);background:var(--panel-2);text-decoration:none}
.rail b{display:block;font-size:14.5px}
.rail span{display:block;font-size:13px;color:var(--muted);margin-top:.1rem}
.rail .st{font-family:'Oswald',sans-serif;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--amber);margin-top:.35rem}
.rail li.off a{opacity:.62;cursor:default;pointer-events:none}

/* ── the emergency bar ─────────────────────────────────────────────────
   Fixed, always, on every page. The one control that must never be more than
   a thumb away.                                                            */
.cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(6,8,10,.97);
  backdrop-filter:blur(10px);border-top:1px solid var(--line);
  padding:.7rem 0 calc(.7rem + env(safe-area-inset-bottom))}
.cta-bar .inner{width:min(720px,100% - 1.6rem);margin-inline:auto;display:flex;gap:.6rem}
.cta-bar a{flex:1;text-align:center;justify-content:center;font-family:'Oswald',sans-serif;
  font-weight:600;text-transform:uppercase;letter-spacing:.09em;font-size:14px;
  padding:.8rem;border-radius:11px;border:1px solid var(--line-2);background:var(--panel);
  color:var(--bone);display:flex;align-items:center;gap:.5rem}
.cta-bar a:hover{text-decoration:none;background:var(--panel-2)}
.cta-bar .em{background:var(--red);border-color:var(--red);color:#fff}
.cta-bar .em:hover{background:#EA6A61}

/* ── footer ───────────────────────────────────────────────────────────── */
.foot{margin-top:4rem;border-top:1px solid var(--line);background:var(--ink-2);
  padding:2.4rem 0 2.6rem;font-size:14px;color:var(--muted)}
.foot h4{font-size:12px;letter-spacing:.16em;color:var(--muted-2);margin-bottom:.6rem}
.foot .cols{display:flex;flex-wrap:wrap;gap:1.6rem 2.4rem}
.foot .cols > div{flex:1 1 220px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:.3rem 0}
.foot .legal{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted-2);max-width:78ch}
.foot .legal b{color:var(--muted)}

/* ── tabs (the flagship toolkit) ──────────────────────────────────────── */
.tabs{position:sticky;top:57px;z-index:30;background:rgba(11,13,16,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.tabs .wrap{display:flex;gap:.2rem;overflow-x:auto;scrollbar-width:none}
.tabs .wrap::-webkit-scrollbar{display:none}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);
  font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.1em;
  font-size:13px;padding:.95rem .85rem;cursor:pointer;white-space:nowrap;display:flex;
  align-items:center;gap:.45rem}
.tabs button[aria-selected="true"]{color:var(--bone);border-bottom-color:var(--red)}
.tabs button:hover{color:var(--bone)}
.panel[hidden]{display:none}

/* ── reduced motion ────────────────────────────────────────────────────
   Cancel the drift AND stop the video (motion.js does the second part — CSS
   cannot stop a decode). What is left showing is the still, never a blank.  */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .chero .cbg{animation:none !important;transform:none !important}
  .chero video.cbg{opacity:1}
}
@media print{.mast,.cta-bar,.readdock,.chero video,.listen{display:none !important}}