/* PMC v3 page styles: landing, brain pages (the map theater), the ARIA floating window, privacy.
   Builds on v3.css tokens only, so both themes work with no extra rules.
   Red is only for the crisis line and the child dot. Phone first. */

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.small{font-size:14px}

/* ---------- landing: the approved homepage mock (16 SEP), foundation style, photo first ----------
   The hero is the one photo section: the picture full-bleed under a navy scrim. Every other section
   sits on the navy field from v3.css (the Circle mark shows through). */
.home .foot{margin-top:0}
.hero{position:relative;isolation:isolate;overflow:hidden;color:#F7F8FA;background:#0F2244;min-height:min(86vh,760px);display:flex;align-items:flex-end}
/* Mirrored (Melody, 5 OCT 2026): the walkers sit on the right, clear of the words on the left. */
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:35% 60%;z-index:-2;transform:scaleX(-1)}
.hero-scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(15,34,68,.9) 0%,rgba(15,34,68,.66) 48%,rgba(15,34,68,.2) 100%),linear-gradient(0deg,rgba(11,26,54,.95) 0%,rgba(15,34,68,0) 60%)}
.hero-in{width:100%;padding-block:56px 56px}
.mark{width:clamp(72px,12vw,120px);height:auto;margin-bottom:12px;filter:drop-shadow(0 10px 30px rgba(0,0,0,.35));animation:breathe 6s ease-in-out infinite}
.hero-motto{font-weight:700;font-size:clamp(16px,2.2vw,20px);letter-spacing:.02em;color:#F7F8FA;margin-bottom:22px}
.hero-eyebrow{color:#A7C7E7}
.hero h1{font-size:clamp(40px,7vw,96px);letter-spacing:-.02em;line-height:.98;max-width:13ch;text-shadow:0 2px 24px rgba(11,26,54,.5)}
.hero h1 .dot{display:inline-block;width:.2em;height:.2em;border-radius:50%;background:var(--red);margin-left:.08em}
.hero-lead{color:#DCE8F5;margin:24px 0 32px}
.hero-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.hero-watch{display:inline-flex;align-items:center;gap:14px;font-weight:600;color:#F7F8FA;text-decoration:none}
.hero-watch i{width:52px;height:52px;border-radius:50%;background:#F7F8FA;display:grid;place-items:center;flex:none}
.hero-watch i::after{content:"";border-left:16px solid #0F2244;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.hero-watch small{display:block;font-weight:500;color:#A7C7E7;font-size:13px}
@media (min-width:900px){.hero-in{padding-block:96px 80px}}

/* The number: one big figure and where it comes from. */
.number{padding-block:72px 64px;border-bottom:1px solid var(--hair)}
.number-big{font-size:clamp(96px,20vw,220px);font-weight:800;line-height:.9;letter-spacing:-.04em;color:#F7F8FA;font-variant-numeric:tabular-nums}
.number-big::after{content:"";display:inline-block;width:.12em;height:.12em;border-radius:50%;background:var(--red);margin-left:.04em}
.number h2{margin-top:18px;max-width:22ch}
.number-source{margin-top:22px;max-width:70ch;font-size:15px;color:var(--ink-2)}
.number-source a{color:var(--ink);font-weight:600}

.doors-band{padding-block:72px 40px}
.doors-band h2{margin-bottom:28px}
.doors{display:grid;gap:14px;width:100%}
.door{display:grid;gap:6px;padding:22px 22px 24px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(167,199,231,.28);text-decoration:none;color:#F7F8FA;transition:background .15s,border-color .15s}
.door b{font-size:19px;font-weight:700;line-height:1.25}
.door b::after{content:" \2192";color:#A7C7E7}
.door span{color:#C9D6E8;font-size:15px;line-height:1.5}
.door:hover{background:rgba(255,255,255,.1);border-color:#A7C7E7}
.door:focus-visible{outline-color:#A7C7E7}
@media (min-width:760px){.doors{grid-template-columns:repeat(3,1fr);gap:18px}}
.help-box{margin-top:32px;max-width:680px;background:rgba(233,75,75,.10);border:1px solid rgba(233,75,75,.45);border-radius:12px;padding:18px 20px;font-size:clamp(15px,1.9vw,17px);line-height:1.5}
.help-box b{color:#FFB3B3}
.help-box a{color:#F7F8FA;font-weight:700;text-decoration:none;border-bottom:2px solid var(--red)}

.mission{padding-block:72px}
.mission-grid{display:grid;gap:28px}
.mission h2{font-size:clamp(30px,3.6vw,44px);max-width:20ch}
.mission-body{display:grid;gap:18px}
.mission-body p{max-width:52ch;font-size:18px}
@media (min-width:820px){.mission-grid{grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}}

.numbers{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding-block:44px}
.num-grid{list-style:none;margin:0;padding:0;display:grid;gap:28px}
.num b{display:block;font-size:clamp(40px,5vw,64px);font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.num span{display:block;margin-top:10px;font-size:16px;max-width:30ch}
.num-source{display:block;margin-top:8px;font-size:13px;color:var(--ink-2)}
.num-source a{color:var(--ink-2)}
@media (min-width:700px){.num-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px}}

/* The video: poster first, our play button, no autoplay (media.js). */
.video{padding-block:80px;background:rgba(15,34,68,.7);border-bottom:1px solid var(--hair)}
.video-grid{display:grid;gap:32px;align-items:center}
.video-words{color:#DCE8F5;max-width:44ch;font-size:18px;margin-top:16px}
@media (min-width:820px){.video-grid{grid-template-columns:1.2fr .8fr;gap:48px}}
.hero-video{position:relative;width:100%;margin:0;display:grid;gap:10px}
.hero-video video{width:100%;aspect-ratio:16/9;height:auto;background:#0B1A36;border-radius:12px;border:1px solid var(--hair);box-shadow:0 18px 50px rgba(0,0,0,.35);object-fit:cover}
.hero-video figcaption{font-size:15px;font-weight:600;color:#DCE6F3}
.play{position:absolute;left:50%;top:0;width:100%;aspect-ratio:16/9;translate:-50% 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:linear-gradient(180deg,rgba(11,26,54,0) 40%,rgba(11,26,54,.55));border:0;border-radius:12px;color:#F7F8FA;font:inherit;font-weight:700;font-size:16px;letter-spacing:.04em;cursor:pointer}
.play svg{width:clamp(64px,12vw,92px);height:auto;filter:drop-shadow(0 8px 20px rgba(0,0,0,.4))}
.play circle{fill:#F7F8FA}
.play path{fill:#0F2244}
.play span{background:rgba(11,26,54,.7);border:1px solid rgba(167,199,231,.4);border-radius:999px;padding:4px 14px}
.play:hover circle{fill:#A7C7E7}
.play:focus-visible{outline:3px solid #A7C7E7;outline-offset:-6px}

/* News: plain text cards, each a link out to Substack. */
.news{padding-block:80px 40px}
.news .head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 24px;margin-bottom:28px}
.head-link{color:var(--accent);font-weight:600}
.head-link::after{content:" \2192"}
.cards{list-style:none;margin:0;padding:0;display:grid;gap:20px}
@media (min-width:820px){.cards{grid-template-columns:repeat(3,1fr);gap:24px}}
.card{display:grid;gap:10px;align-content:start;height:100%;padding:24px 22px 26px;background:var(--glass);border:1px solid var(--hair);border-top:4px solid var(--accent);border-radius:12px;text-decoration:none;color:var(--ink)}
.card:hover{border-color:var(--sky)}
.card .tag{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.card h3{font-size:20px}
.card p{color:#C9D6E8;font-size:15px}
.card .more{color:var(--accent);font-weight:600;font-size:14px;margin-top:4px}
.card .more::after{content:" \2192"}
/* A news card with our copy of the post's picture: the picture runs edge to edge across the top. */
.card{overflow:hidden}
.card.has-img{padding-top:0}
.card-img{display:block;width:calc(100% + 44px);max-width:none;height:auto;aspect-ratio:16/9;object-fit:cover;margin:0 -22px 14px}
.news-wait{color:var(--ink-2)}
.news-wait a{color:var(--ink);font-weight:600}
.news-page{padding-block:56px 24px}
.news-page .lead{margin:16px 0 20px}
.sections{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;margin-bottom:28px;font-size:15px}
.sections span{color:var(--ink-2)}
.sections a{color:var(--accent);font-weight:600}
.news-all{margin-top:28px}

.involve{padding-block:40px 80px}
.involve-in{display:grid;gap:20px;align-items:center;border-top:1px solid var(--hair);padding-top:48px}
.involve-in p{max-width:52ch;margin-top:14px}
@media (min-width:820px){.involve-in{grid-template-columns:1fr auto;gap:48px}}

/* ---------- brain pages: the map is a theater ---------- */
/* --nav-h = the sticky nav's height from v3.css (logo + padding): the theater and anchors sit below it.
   brain.js replaces this guess with the header's measured height. */
.brain-page{--nav-h:117px}
.brain-page .foot{margin-top:0}
#report,#help,#map,#about-map,#videos{scroll-margin-top:var(--nav-h)}   /* the sticky nav never hides a heading */
@media (min-width:900px){.brain-page{--nav-h:92px}}

/* The theater (Andy, 27 SEP: "the brain fills the whole screen"): the whole screen under the nav, edge to
   edge, no page gutter. A slim bar sits on top (the red crisis strip first, then the map toggle and the
   state picker) and the map fills the rest. The bar is part of the theater, not laid over the frame,
   so it never hides the top of TheBrain's map. Everything else on the page comes after the theater. */
.theater{position:relative;display:flex;flex-direction:column;width:100%;height:calc(100vh - var(--nav-h));height:calc(100dvh - var(--nav-h));min-height:420px}
.theater-bar{position:relative;z-index:2;flex:none;background:rgba(11,26,54,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--hair)}
/* The crisis strip: tap-to-call, always on screen with the map (red is for the crisis line only). */
.crisis-strip{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:0 10px;padding:5px 12px;background:rgba(233,75,75,.3);border-bottom:2px solid var(--red);color:#F7F8FA;font-size:14px;line-height:1.4;text-align:center}
.crisis-strip a{color:#FFFFFF;font-weight:800;text-decoration:underline;text-underline-offset:3px;padding-block:2px}
.crisis-strip .sep{color:#FFB3B3}
.bar-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:6px 12px}
.theater-title{font-size:18px;font-weight:800;line-height:1.2}
.toggle{display:inline-flex;border:2px solid var(--btn);border-radius:4px;overflow:hidden;font-weight:700;font-size:14px}
.toggle a{padding:6px 12px;text-decoration:none;color:var(--ink)}
.toggle a[aria-current="page"]{background:var(--btn);color:var(--btn-ink)}
.toggle a:not([aria-current]):hover{background:var(--ground)}
.state-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.state-form label{font-weight:600;font-size:14px}
.state-form select{font:inherit;font-size:15px;padding:6px 10px;border:2px solid var(--ink-2);border-radius:4px;background:var(--panel);color:var(--ink);max-width:100%}   /* ink-2 border: 3:1+ on the field */
.state-form .btn{padding:6px 14px}
.bar-row .state-form{margin-left:auto}
/* Phone: the title and the picker's label are still read aloud, just not drawn, so the map gets the room. */
@media (max-width:699px){
  .bar-row .theater-title,.bar-row .state-form label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .bar-row{gap:6px 10px;padding:6px 10px}
  .bar-row .state-form{margin-left:0}
  .toggle{font-size:13px}
  .toggle a{padding:6px 9px}
  .crisis-strip{font-size:13px;padding:4px 8px}
  .crisis-strip .sep{display:none}
  .map-gate{padding-bottom:80px}   /* room under the card for the floating Ask ARIA bubble */
}

/* The map panel: fills the theater under the bar. Our own words sit in it as a card, centered, over the
   navy field (the page's own field shows through) until the visitor taps "Open the map" (brain.js). */
.frame-wrap{position:relative;flex:1;min-height:0;background:transparent}
.map-gate{position:absolute;inset:0;overflow:auto;display:grid;place-items:center;padding:20px 16px}
.gate-card{position:relative;max-width:560px;display:grid;gap:12px;justify-items:start;background:rgba(18,38,75,.86);border:1px solid var(--hair);border-radius:12px;padding:22px 20px;box-shadow:0 12px 36px rgba(0,0,0,.3)}
.gate-card p{max-width:60ch}
.gate-card a:not(.btn){color:var(--accent);font-weight:600}
.gate-h{font-size:clamp(22px,3vw,30px)}
.gate-go{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.brain-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--panel)}
/* While ARIA's window is dragged or resized, the map frame must not swallow the pointer. */
.pmcw-moving .brain-frame{pointer-events:none}

/* Below the theater: how to read the map and the phone lines, then the videos and the help sections. */
.brain-notes{display:grid;gap:12px;padding-block:28px 8px}
.howto{background:var(--glass);border:1px solid var(--hair);border-radius:4px;padding:12px 16px}
.howto summary{cursor:pointer;font-weight:700}
.howto p{margin-top:10px;max-width:72ch;color:var(--ink-2)}
.map-note{background:var(--glass);border:1px solid var(--hair);border-radius:4px;padding:14px 16px;display:grid;gap:10px}
.note-links{font-size:15px}
.note-links a,.lines a,.rows a,.report a{color:var(--accent);font-weight:600}

.lines{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.line{border-left:4px solid var(--hair);padding:2px 0 2px 12px}
.line.now{border-color:var(--red)}
.line.now a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--red)}
.line .call{white-space:nowrap}
.sl-none{color:var(--ink-2)}

/* The rail: one player, then poster tiles. Tap a tile, it plays in the one player (media.js). */
.rail{padding-block:40px 8px}
.rail h2{margin-bottom:20px}
.rail-player{max-width:860px;display:grid;gap:10px}
.rail-player video{width:100%;aspect-ratio:16/9;height:auto;background:#0B1A36;border-radius:12px;border:1px solid var(--hair);box-shadow:0 18px 50px rgba(0,0,0,.35)}
.rail-now{font-weight:600}
.tiles{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
@media (min-width:640px){.tiles{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}
.tile{display:grid;gap:4px;text-decoration:none;color:var(--ink);background:var(--glass);border:1px solid var(--hair);border-radius:12px;padding:8px 8px 12px;height:100%}
.tile img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;margin-bottom:6px}
.tile b{font-size:15px;line-height:1.3}
.tile span{font-size:13px;color:var(--ink-2)}
.tile:hover{border-color:var(--sky)}
.tile[aria-current="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}

.report{padding-block:56px 64px}
.report h2{margin-bottom:28px}
.report-grid{display:grid;gap:20px}
@media (min-width:900px){.report-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}}
.report-card{background:var(--glass);border-radius:12px;border:1px solid var(--hair);border-top:4px solid var(--accent);padding:22px 22px 24px;display:grid;gap:12px;align-content:start}
.report-card.lines-card{border-top-color:var(--red)}
.rows{display:grid;gap:10px;font-size:16px}
.rows h4{margin:6px 0 0;font-size:16px}
.rows ul{margin:0;padding-left:20px;display:grid;gap:4px}
.abuse-line{font-size:16px}

/* ---------- ARIA: a floating window (Andy, 27 SEP: "open it, shut it, drag it around, make it big,
   make it small"). The look is the approved mock's pmcw-window. Drag the title bar, resize from the
   bottom-right corner, shrink to the bubble, maximize, close. Under 640px it is a full-screen sheet
   with the same buttons (no drag, no resize, no maximize: it is already the whole screen). ---------- */
.aria-bubble{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:35;display:flex;align-items:center;gap:10px;background:#0F2244;color:#F7F8FA;border:1px solid rgba(167,199,231,.4);border-radius:999px;padding:6px 18px 6px 6px;font-weight:700;font-size:15px;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.aria-bubble img{width:36px;height:36px;border-radius:50%}
.aria-bubble:focus-visible{outline-color:#A7C7E7}
.aria-open .aria-bubble{display:none}
@media (min-width:900px){.aria-bubble{right:24px;bottom:24px}}
/* Phones: the page's last words never sit under the bubble. */
@media (max-width:899px){.brain-page{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}}

.pmcw-window{position:fixed;z-index:40;right:24px;bottom:24px;width:360px;height:540px;min-width:320px;min-height:360px;max-width:100vw;max-height:100vh;max-height:100dvh;display:none;flex-direction:column;background:var(--panel);color:var(--ink);border:1px solid var(--hair);border-radius:6px;box-shadow:0 18px 50px rgba(0,0,0,.5);overflow:hidden}
.pmcw-window.open,html:not(.js) .pmcw-window:target{display:flex}
.pmcw-titlebar{flex:none;display:flex;align-items:center;gap:8px;background:#0F2244;color:#F7F8FA;padding:6px 6px 6px 10px;cursor:move;user-select:none;-webkit-user-select:none;touch-action:none;border-bottom:1px solid var(--hair)}
.pmcw-titlebar img{width:24px;height:24px;border-radius:50%;flex:none}
.pmcw-title{flex:1;min-width:0;font-weight:700;font-size:14px;line-height:1.25;overflow-wrap:anywhere;outline:none}   /* wraps, never cut: the AI disclosure stays whole */
.pmcw-btn{flex:none;display:inline-grid;place-items:center;width:36px;height:36px;padding:0;background:transparent;border:0;border-radius:4px;color:#A7C7E7;cursor:pointer;text-decoration:none}
.pmcw-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.pmcw-btn:hover{background:rgba(255,255,255,.12);color:#FFFFFF}
.pmcw-btn:focus-visible{outline-color:#A7C7E7;outline-offset:-3px}
.pmcw-btn .ic-restore,.pmcw-max .pmcw-btn .ic-max{display:none}
.pmcw-max .pmcw-btn .ic-restore{display:block}
html:not(.js) .pmcw-btn[data-act="min"],html:not(.js) .pmcw-btn[data-act="max"]{display:none}
.pmcw-body{flex:1;min-height:0;overflow:auto;padding:16px 16px 24px;overscroll-behavior:contain}
.pmcw-resize{position:absolute;right:0;bottom:0;width:24px;height:24px;cursor:nwse-resize;touch-action:none}
.pmcw-resize::after{content:"";position:absolute;right:4px;bottom:4px;width:11px;height:11px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2)}
html:not(.js) .pmcw-resize{display:none}
/* Maximized: the whole screen but a thin edge. !important beats the drag/resize inline sizes. */
.pmcw-window.pmcw-max{left:8px!important;top:8px!important;right:auto!important;bottom:auto!important;width:calc(100vw - 16px)!important;height:calc(100vh - 16px)!important;height:calc(100dvh - 16px)!important}
.pmcw-max .pmcw-resize{display:none}
.pmcw-max .pmcw-titlebar{cursor:default}
.pmcw-moving,.pmcw-moving *{user-select:none;-webkit-user-select:none}
@media (max-width:639px){
  .pmcw-window,.pmcw-window.pmcw-max{inset:0!important;width:auto!important;height:auto!important;min-width:0;min-height:0;max-width:none;max-height:none;border:0;border-radius:0;padding-bottom:env(safe-area-inset-bottom,0px)}
  .pmcw-titlebar{cursor:default;touch-action:auto;padding-top:calc(6px + env(safe-area-inset-top,0px))}
  .pmcw-resize,.pmcw-btn[data-act="max"]{display:none}
}

/* What the window holds: the plain-text front screen, then sign-in, then the chat. */
.d-step{display:grid;gap:14px;align-content:start}
.d-step[hidden]{display:none}
.d-h{font-size:19px;font-weight:700;line-height:1.3}
.d-talk{display:grid;gap:10px;justify-items:start}   /* no rule above it: the front step is one short line + this block (28 SEP trim) */
.d-form{display:grid;gap:8px}
.d-form label{font-weight:600;font-size:14px}
.d-form input,.d-ask textarea{font:inherit;font-size:16px;padding:10px 12px;border:2px solid var(--ink-2);border-radius:4px;background:var(--panel);color:var(--ink);width:100%}
.d-form .btn{justify-self:start}
.d-msg:empty{display:none}
.d-msg{font-weight:600}
/* Test mode only (never on the real site): loud on purpose, so a tester does not go looking for an e-mail. */
.d-dev{background:var(--ground);border:2px solid var(--accent);border-radius:4px;padding:12px;font-size:15px}
.d-dev .btn{display:flex;margin-top:10px}
.d-link{justify-self:start;background:none;border:0;padding:4px 0;font:inherit;font-size:14px;font-weight:600;color:var(--accent);text-decoration:underline;cursor:pointer}
.d-link[hidden]{display:none}
.d-mini{font-size:14px;border-left:4px solid var(--red);padding-left:10px}
.d-mini a{font-weight:700;color:var(--ink)}
.d-log{display:grid;gap:10px;align-content:start;min-height:120px}
.msg{padding:10px 12px;border-radius:4px;font-size:15.5px;display:grid;gap:8px;max-width:92%}
.msg.me{justify-self:end;background:var(--btn);color:var(--btn-ink)}
.msg.aria{justify-self:start;background:var(--ground);border:1px solid var(--hair)}
.msg.wait{color:var(--ink-2);font-style:italic}
.msg-links{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:14px}
.msg-links a{color:var(--accent);font-weight:700}
.d-ask{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}
.d-ask textarea{resize:vertical;min-height:48px}
.d-ask .btn[disabled]{opacity:.6;cursor:wait}
/* The government-sources search box, above the chat (signed-in only). Phone width first: the chips wrap. */
.d-search{display:grid;gap:8px;border:1px solid var(--hair);border-radius:4px;background:var(--ground);padding:10px 12px}
.d-sform{display:grid;gap:8px;min-width:0}
.d-sh{font-weight:700;font-size:14px}
.d-srow{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.d-srow input{font:inherit;font-size:16px;padding:8px 10px;border:2px solid var(--ink-2);border-radius:4px;background:var(--panel);color:var(--ink);width:100%;min-width:0}
.d-srow .btn{padding:9px 14px}
.d-srow .btn[disabled]{opacity:.6;cursor:wait}
.d-chips{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.d-chip{position:relative;display:inline-flex;cursor:pointer}
.d-chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.d-chip span{display:inline-block;padding:4px 10px;border:1px solid var(--ink-2);border-radius:999px;font-size:13px;font-weight:600;line-height:1.4;color:var(--ink-2)}
.d-chip input:checked+span{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
.d-chip input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.d-smsg{font-size:14px;font-weight:600}
.d-smsg:empty{display:none}
.d-results{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.d-results:empty{display:none}
.d-results li{display:grid;gap:2px;border-top:1px solid var(--hair);padding-top:8px;min-width:0}
.d-results a{color:var(--accent);font-weight:700;font-size:15px;overflow-wrap:anywhere}
.d-rhead{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px;color:var(--ink-2)}
.d-badge{font-weight:700;letter-spacing:.04em;border:1px solid var(--ink-2);border-radius:3px;padding:0 5px}
.d-site{overflow-wrap:anywhere}
.d-snip{font-size:14px;line-height:1.45}

/* ---------- privacy ---------- */
.prose{padding-block:48px 24px;max-width:760px}
.prose h1{font-size:clamp(32px,5vw,48px);margin-bottom:16px}
.prose h2{font-size:24px;margin:36px 0 10px}
.prose p,.prose li{max-width:64ch}
.prose p+p{margin-top:12px}
.prose ul{padding-left:22px;display:grid;gap:6px}
.prose .lead{margin-bottom:8px}
.prose a{color:var(--accent);font-weight:600}
.prose .eyebrow{margin-bottom:12px}
.people,.facts{list-style:none;padding-left:0!important}
.people li,.facts li{border-left:4px solid var(--hair);padding:2px 0 2px 12px}
.addr{font-style:normal;line-height:1.7;margin-bottom:12px}

@media (prefers-reduced-motion:reduce){.mark,.field-mark{animation:none}}

/* ---- MOCK-UP (Melody, 5 OCT 2026): the people-first part of the home page, and bios on About. ----
   The story band is the one light band on the site: off-white with navy ink, so the photos carry it. */
.mock-flag{display:inline-block;margin:0 0 20px;padding:6px 12px;border-radius:4px;border:2px dashed #E0A100;background:rgba(224,161,0,.12);font-size:14px;font-weight:600}
.ph{display:grid;place-items:center;text-align:center;border:2px dashed #8A97AD;border-radius:12px;color:#5B6B85;font-weight:600;font-size:15px;line-height:1.4;
  background:repeating-linear-gradient(135deg,rgba(138,151,173,.22) 0 14px,rgba(138,151,173,.10) 14px 28px)}
.ph-text{font-style:italic;opacity:.75}
.people-stories{background:#F7F8FA;color:#0F2244;padding-block:80px}
.people-stories .eyebrow{color:#2563EB}
.people-stories h2{font-size:clamp(32px,4.4vw,56px);letter-spacing:-.02em;margin-bottom:36px}
.stories{list-style:none;margin:0;padding:0;display:grid;gap:44px}
.story{display:grid;gap:20px;align-items:center}
.ph-photo{aspect-ratio:4/3;width:100%}
.story-words{display:grid;gap:10px}
.story .tag{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#2563EB;margin:0}
.story h3{font-size:clamp(24px,2.8vw,34px);line-height:1.15}
.story p{font-size:18px;max-width:46ch}
.story .more{font-weight:700;color:#2563EB}
.story .more::after{content:" \2192"}
@media (min-width:820px){
  .story{grid-template-columns:1.1fr .9fr;gap:48px}
  .story.flip .ph-photo{order:2}
}
.belief{padding-block:96px;text-align:center;background:rgba(15,34,68,.7);border-bottom:1px solid var(--hair)}
.belief-in{display:grid;justify-items:center;gap:8px}
.belief h2{font-size:clamp(30px,4.6vw,60px);letter-spacing:-.02em;line-height:1.05;max-width:18ch;margin-bottom:24px}
.clips{padding-block:80px 48px}
.clips h2{margin-bottom:28px}
.clip-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.ph-clip{aspect-ratio:4/5;color:#A7C7E7;border-color:var(--hair);gap:10px;align-content:center;
  background:repeating-linear-gradient(135deg,rgba(167,199,231,.10) 0 14px,rgba(167,199,231,.04) 14px 28px)}
.ph-clip i{width:44px;height:44px;border-radius:50%;background:rgba(247,248,250,.9);display:grid;place-items:center}
.ph-clip i::after{content:"";border-left:14px solid #0F2244;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
@media (min-width:820px){.clip-row{grid-template-columns:repeat(4,1fr);gap:20px}}
.team{padding-block:48px 24px}
.team .head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 24px;margin-bottom:28px}
.faces{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px}
.faces a{display:grid;justify-items:center;gap:6px;text-align:center;text-decoration:none;color:var(--ink)}
.faces b{font-size:18px;margin-top:10px}
.faces small{color:var(--ink-2);font-size:14px}
.ph-face{width:132px;height:132px;border-radius:50%;flex:none;color:#A7C7E7;border-color:var(--hair);
  background:repeating-linear-gradient(135deg,rgba(167,199,231,.12) 0 12px,rgba(167,199,231,.05) 12px 24px)}
.bios{list-style:none;padding:0;display:grid;gap:28px;margin-top:8px}
.bios li{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}
.bios .ph-face{width:104px;height:104px}
.bios p{margin:0 0 6px}

/* ---- MOCK-UP motion (Melody, 5 OCT 2026): gentle, once, and off for "reduce motion" (v3.css). ----
   The top words rise in one after another when the page opens; the picture drifts in very slowly. */
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes drift{from{transform:scaleX(-1) scale(1.09)}to{transform:scaleX(-1) scale(1)}}
.hero-photo{animation:drift 14s cubic-bezier(.2,.6,.2,1) both}
.hero-motto,.hero-eyebrow,.hero h1,.hero-lead,.hero-row{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero-motto{animation-delay:.1s}
.hero-eyebrow{animation-delay:.2s}
.hero h1{animation-delay:.32s;animation-duration:1.1s}
.hero-lead{animation-delay:.6s}
.hero-row{animation-delay:.78s}
/* Scroll motion: only once reveal.js has put js-reveal on <html>. */
.js-reveal .reveal{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.js-reveal .reveal.from-left{transform:translateX(-70px)}
.js-reveal .reveal.from-right{transform:translateX(70px)}
.js-reveal .reveal.in{opacity:1;transform:none}
.js-reveal .reveal.d2{transition-delay:.12s}
.js-reveal .reveal.d3{transition-delay:.24s}
.js-reveal .reveal.d4{transition-delay:.36s}
.people-stories,.belief,.clips{overflow-x:clip}

/* ---- MOCK-UP motion, round 2 (Melody, 5 OCT 2026): more of it, slanted photo frames, every section. ----
   These come after the first motion rules on purpose, so they win. */
@keyframes grow-in{from{opacity:0;transform:translateY(40px) scale(.74)}to{opacity:1;transform:none}}
.hero h1{transform-origin:left bottom;animation-name:grow-in;animation-duration:1.3s}
.hero-motto,.hero-eyebrow,.hero-lead,.hero-row{animation-duration:1.1s}
@keyframes drift{from{transform:scaleX(-1) scale(1.16)}to{transform:scaleX(-1) scale(1)}}
.js-reveal .reveal{transform:translateY(64px);transition:opacity .9s ease,transform 1.1s cubic-bezier(.16,.8,.2,1)}
.js-reveal .reveal.from-left{transform:translateX(-180px)}
.js-reveal .reveal.from-right{transform:translateX(180px)}
.js-reveal .reveal.grow{transform:scale(.6);transform-origin:left center}
.js-reveal .belief .reveal.grow,.js-reveal .num.reveal.grow{transform-origin:center}
.js-reveal .reveal.in{opacity:1;transform:none}
.js-reveal .reveal.d2{transition-delay:.14s}
.js-reveal .reveal.d3{transition-delay:.28s}
.js-reveal .reveal.d4{transition-delay:.42s}
.js-reveal .reveal.d5{transition-delay:.56s}
.js-reveal .reveal.d6{transition-delay:.7s}
/* Slanted photo frames, like prints laid on a table: one leans left, the next leans right. They fly in
   turning, settle at the slant, and straighten a little under the mouse. "rotate" is its own property,
   so the slant stays while "transform" does the flying. */
.story .ph-photo{rotate:-3.5deg;box-shadow:0 22px 50px rgba(15,34,68,.22);border-radius:10px;transition:rotate .45s ease,opacity .9s ease,transform 1.2s cubic-bezier(.16,.8,.2,1)}
.story.flip .ph-photo{rotate:3.5deg}
.story .ph-photo:hover{rotate:0deg}
.js-reveal .story .ph-photo.reveal.from-left{transform:translateX(-220px) rotate(-10deg)}
.js-reveal .story .ph-photo.reveal.from-right{transform:translateX(220px) rotate(10deg)}
.js-reveal .story .ph-photo.reveal.in{transform:none}
.stories{gap:72px;padding-block:12px}
.number,.doors-band,.mission,.numbers,.video,.news,.involve{overflow-x:clip}

/* ---- MOCK-UP motion, round 3 (Melody, 5 OCT 2026): calmer. ----
   Top headline: from a little smaller to full size, slowly. Lower down: titles and photos move, not so
   fast; the words under a title do not move, they fade in together a split second after it. */
@keyframes grow-in{from{opacity:0;transform:translateY(10px) scale(.93)}to{opacity:1;transform:none}}
.hero h1{animation-duration:2.6s;animation-timing-function:cubic-bezier(.22,.61,.36,1)}
.hero-lead{animation-delay:1s}
.hero-row{animation-delay:1.25s}
.js-reveal .reveal{transition:opacity 1.2s ease,transform 1.7s cubic-bezier(.16,.8,.2,1)}
.js-reveal .reveal.grow{transform:scale(.8)}
.js-reveal .reveal.from-left{transform:translateX(-150px)}
.js-reveal .reveal.from-right{transform:translateX(150px)}
.js-reveal .reveal.fade{transform:none;transition:opacity 1.1s ease .45s}
.js-reveal .reveal.in{opacity:1;transform:none}
.story .ph-photo{transition:rotate .45s ease,opacity 1.2s ease,transform 1.8s cubic-bezier(.16,.8,.2,1)}
.js-reveal .story .ph-photo.reveal.from-left{transform:translateX(-200px) rotate(-9deg)}
.js-reveal .story .ph-photo.reveal.from-right{transform:translateX(200px) rotate(9deg)}
.js-reveal .story .ph-photo.reveal.in{transform:none}

/* ---- MOCK-UP (Melody, 5 OCT 2026): a photo in "Stand in the circle", and a picture on each news card. ---- */
.ph-involve{aspect-ratio:4/3;width:100%;max-width:420px;rotate:-2.5deg;color:#A7C7E7;border-color:var(--hair);
  background:repeating-linear-gradient(135deg,rgba(167,199,231,.12) 0 14px,rgba(167,199,231,.05) 14px 28px)}
@media (min-width:820px){.involve-in.has-photo{grid-template-columns:minmax(220px,.7fr) 1fr auto}}
/* The circle photo beside "Stand in the circle." (Melody, 12 OCT 2026): a slanted frame like the other home pictures. */
/* Melody, 12 OCT 2026: the photo is a square stood on its corner (a diamond). Its four points land on the four
   dots of the mark, and the ring of the mark runs round the outside. The diamond's half-diagonal equals the
   ring's inner radius (380 - 42 = 338 of 1000), so the points just touch the inside of the dots. */
.involve-frame{position:relative;width:100%;max-width:460px;aspect-ratio:1;margin:0 auto}
.involve-ring,.involve-dots{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.involve-dots{filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
.involve-frame .involve-photo{position:absolute;left:50%;top:50%;width:47.8%;height:47.8%;object-fit:cover;
  transform:translate(-50%,-50%) rotate(45deg);border-radius:6px;box-shadow:0 24px 60px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.1)}
@media (max-width:819px){.involve-frame{max-width:340px}}
/* News cards: the article's picture on top when the server has a copy of it (app/newsimg.py); a card
   without a picture is simply a card with words. The mock-up's gray placeholder box
   was retired 12 OCT 2026 (Melody): nothing gray goes public. */
.news .card{overflow:hidden}
.news .card{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.news .card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.35)}

/* ---- MOCK-UP motion, round 4 (Melody, 5 OCT 2026): the motto is the highlight. ----
   "Together. Everywhere. Every child." waits until the big headline is in, then travels in from the
   right side of the page to its place, slowly and on purpose. */
@keyframes motto-in{from{opacity:0;transform:translateX(64vw)}22%{opacity:1}to{opacity:1;transform:none}}
.hero-motto{animation:motto-in 2.8s cubic-bezier(.16,.84,.3,1) 1.7s both}

/* ---- MOCK-UP motion, round 5 (Melody, 5 OCT 2026): the motto is thrown in letter by letter. ----
   After the big headline is in, each letter flies in from the right and lands in its place, one after
   another (70 ms apart). The line itself no longer moves as one piece. */
@keyframes letter-in{from{opacity:0;transform:translateX(46vw)}30%{opacity:1}to{opacity:1;transform:none}}
.hero-motto{animation:none}
.hero-motto .w{display:inline-block;white-space:nowrap}
.hero-motto .l{display:inline-block;animation:letter-in 1.15s cubic-bezier(.18,.86,.3,1.05) both;animation-delay:calc(1.7s + var(--i) * 70ms)}

/* ---- Round 6 (Melody, 15 OCT 2026): the motto no longer slides in from the side. It appears where it
   sits, slowly, from nothing, once the big headline is in. The letter pieces stay in the template; they
   just stop moving. ---- */
@keyframes motto-fade{from{opacity:0}to{opacity:1}}
.hero-motto .l{animation:none}
.hero-motto{animation:motto-fade 3s ease-in-out 1.7s both}

/* ---- MOCK-UP (Melody, 5 OCT 2026): highlights (up to three) on the home page, every story on /stories. ---- */
.stories-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px 24px;margin-bottom:36px}
.stories-head h2{margin-bottom:0;max-width:16ch}
.people-stories .head-link{color:#2563EB}
.people-stories .lead{color:#33466B;margin-top:14px}
.people-stories h1{font-size:clamp(36px,5.4vw,72px);letter-spacing:-.02em;color:#0F2244}
a.more{text-decoration:none}
a.more:hover{text-decoration:underline}
/* a real photo gets the same slant, shadow and fly-in as its gray stand-in */
.story-photo{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:10px;rotate:-3.5deg;box-shadow:0 22px 50px rgba(15,34,68,.22);
  transition:rotate .45s ease,opacity 1.2s ease,transform 1.8s cubic-bezier(.16,.8,.2,1)}
.story.flip .story-photo{rotate:3.5deg}
.story-photo:hover{rotate:0deg}
@media (min-width:820px){.story.flip .story-photo{order:2}}
.js-reveal .story .story-photo.reveal.from-left{transform:translateX(-200px) rotate(-9deg)}
.js-reveal .story .story-photo.reveal.from-right{transform:translateX(200px) rotate(9deg)}
.js-reveal .story .story-photo.reveal.in{transform:none}
.stories-page .people-stories{padding-block:72px 96px;min-height:70vh}
.story{scroll-margin-top:110px}

/* MOCK-UP (Melody, 5 OCT 2026): the belief line is in PMC red. The brand kit keeps red for the child
   dot; this is her call, as the one place a whole line carries it. */
.belief h2{color:var(--red)}

/* MOCK-UP (Melody, 5 OCT 2026): "Why we do this work." in PMC sky blue. */
.video h2{color:var(--sky)}

/* MOCK-UP (Melody, 5 OCT 2026): the motto over the top picture in PMC red. */
.hero-motto{color:var(--red)}

/* ---- MOCK-UP (Melody, 5 OCT 2026): the News feed. Text cards, no pictures; the kind and the date lead. ---- */
.card.item .tag b{color:var(--ink);letter-spacing:.12em}
.card.item .more{margin-top:auto;padding-top:6px}
.card.item .more::after{content:" \2197"}
.news-page + .desk{padding-top:24px;border-top:1px solid var(--hair)}
.desk .sections{margin-bottom:24px}

/* MOCK-UP (Melody, 5 OCT 2026): the News heading in PMC red, on the home page and on /news. */
#news-title{color:var(--red)}

/* MOCK-UP: the yellow flag reads on the navy bands too. */
.news .mock-flag{color:#F7F8FA;margin-bottom:22px}
/* ---- The News feed (Melody, 5 OCT 2026; onto main 10 OCT 2026): the page in two parts, text cards for
   the feed, the heading in PMC red, and the two-way link between a feed item and our article. ---- */
.news-page + .desk{padding-top:24px;border-top:1px solid var(--hair)}
.desk .sections{margin-bottom:24px}
#news-title{color:var(--red)}
.news-page .cards.feed{margin-top:8px}
.cards .ours{display:inline-block;margin-top:10px;font-weight:700;color:var(--sky);text-decoration:none;border-bottom:2px solid var(--sky)}
.cards .ours:hover{color:var(--white);border-color:var(--white)}
@media (min-width:820px){.news-page .cards.feed{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.news-page .cards.feed{grid-template-columns:repeat(3,1fr)}}

/* MOCK-UP (Melody, 5 OCT 2026): /news has two sections, the news feed and our own articles. */
.jump{margin:18px 0 6px;font-weight:600}
.jump a{color:var(--accent)}
.desk{padding-top:64px;border-top:1px solid var(--hair)}
.desk-lead{color:var(--ink-2);margin:-12px 0 20px;max-width:60ch}
#articles,#news{scroll-margin-top:110px}

/* MOCK-UP (Melody, 5 OCT 2026): "What we wrote lately." in PMC red, on the home page and on /news. */
#desk-title{color:var(--red)}

/* MOCK-UP (Melody, 5 OCT 2026): /news opens with a few plain lines that tie the news and our articles
   together, and "What we wrote lately." is the same size as the news title above it. */
.page-intro{display:grid;gap:14px;max-width:64ch;margin:6px 0 20px;font-size:clamp(18px,2vw,22px);line-height:1.5}
.page-intro p{margin:0}
.page-intro b{color:#FFFFFF}
.page-intro .go{font-weight:700;color:var(--sky)}
.news-page .jump{margin:0 0 34px}
.news-page .lead{font-size:clamp(17px,1.8vw,20px);max-width:56ch}
.desk #desk-title{font-size:clamp(34px,7vw,74px)}

/* "PMC article below" on a news item (Melody, 11 OCT 2026): bold, in a warm yellow so it stands out from
   the blues; it jumps down to our article's card. Yellow is not in the brand kit; this is her call. */
.cards .ours.pmc-article{color:#F2C14E;border-color:#F2C14E;font-weight:800}
.cards .ours.pmc-article:hover{color:#FFFFFF;border-color:#FFFFFF}
.cards > li{scroll-margin-top:110px}
/* Officer headshots on /about (Melody, 12 OCT 2026): a circle beside the words, the words wrap around it. */
.people li{overflow:hidden}
.people img.headshot{float:right;width:160px;height:160px;border-radius:50%;object-fit:cover;margin:0 0 14px 24px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
@media (max-width:600px){.people img.headshot{width:120px;height:120px;margin-left:16px}}

/* A card with a line under it ("PMC article below" / "Goes with the news item"): the card takes the
   room it needs and the line sits under it, inside the same box, so nothing spills onto the next row. */
.cards > li{display:flex;flex-direction:column}
.cards > li > .card{flex:1 1 auto;height:auto}
.cards .ours{align-self:flex-start}