/* ============================================================ PAGE STYLESHEET: pg-patients.css Owner: page builder "pb-patients" Pages: mission.html (rules scoped to body.pg-mission) and for-patients.html (rules scoped to body.pg-patients, below). Loaded right after fable.css. Every rule here either scopes to body.pg-mission / body.pg-patients, or targets a class this file itself introduces, so nothing here can leak onto a page that does not load this stylesheet. Reuses foundation components (glass-1/2/3, .plate/.plate--chart, .quote-plate, .settle-spring, .row-light, .cc-area, the dark hairline alias) exactly as built in 50-FOUNDATION-REPORT.md; never redeclares them from scratch. Per DMITRY-REDESIGN-2026-09/30-FINAL-DESIGN-SPEC.md section 2 and section 6 (orchestrator overrides, which win). ============================================================ */ /* ------------------------------------------------------------ 0. SHARED HERO SPLIT (mission #top, for-patients #top) Both heroes flip to navy (sec-dark on-dark) and, per spec section 2 and 6.3, confine their existing photo to a right hand panel feathered into the navy ground with a mask-image gradient, an interim treatment until the generated navy plates in 40-IMAGE-PROMPTS.md arrive. This replaces the sitewide full-bleed-photo-plus-paper-scrim pattern (.phero--herobg's own ::after) for these two heroes only. Two real gaps in the foundation's dark-readiness pass surface here (see SHARED FIXES NEEDED in the final report); both are patched below, scoped to these two pages only, without editing fable.css: 1) .phero--herobg sets its own background:var(--paper) later in fable.css than .sec-dark's background:navy at equal (one class) specificity, so it wins the section's own ground color even after sec-dark/on-dark are added. Harmless while the photo is full-bleed (it hides the ground entirely); a real bug once the photo is confined to a panel and the rest of the section must show through as navy. 2) .phero__pn (the "01" kicker numeral) has a dark variant already built, but only for .phero--dark, not for the .sec-dark.phero--herobg combination this pass uses. ------------------------------------------------------------ */ .pgp-hero-split{ --pgp-copy-w: 58%; --pgp-panel-w: clamp(280px,36%,480px); } @media(min-width:861px){ .pgp-hero-split.phero--herobg{ background:var(--grain-dither),var(--navy-ramp),var(--navy-bloom-soft); background-size:160px,cover,cover; background-color:var(--near-black); } .pgp-hero-split.phero--herobg::after{ content:none; } .pgp-hero-split .phero__copy{ max-width:var(--pgp-copy-w); } .pgp-hero-split .phero__bg{ position:absolute; top:0; right:0; bottom:0; left:auto; width:var(--pgp-panel-w); z-index:0; } .pgp-hero-split .phero__bg img{ width:100%; height:100%; object-fit:cover; -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 34%); mask-image:linear-gradient(to right, transparent 0%, #000 34%); } } @media(max-width:860px){ /* Below the existing .phero--herobg mobile breakpoint, revert to the sitewide full-bleed-plus-scrim mobile treatment untouched: the base .phero--herobg mobile rule (fable.css ~1062) and the dark-readiness fix's own mobile scrim variant (fable.css ~384) already handle this correctly together. */ .pgp-hero-split .phero__bg{ width:auto; } } /* Fix 1 above, mission only now (for-patients no longer uses this hero). */ body.pg-mission #top.sec-dark.pgp-hero-split, body.pg-mission #top.on-dark.pgp-hero-split{ background:var(--grain-dither),var(--navy-ramp),var(--navy-bloom-soft); background-size:160px,cover,cover; background-color:var(--near-black); } /* ------------------------------------------------------------ 1. MISSION #top: the statement takes ~62%, set left; the heart moves to a ~34% right panel (spec section 2). ------------------------------------------------------------ */ body.pg-mission .pgp-hero-split{ --pgp-copy-w: 62%; --pgp-panel-w: clamp(300px,34%,460px); } /* Scale the statement up per spec: clamp(1.9rem,3.1vw,3.3rem) to clamp(2.3rem,3.8vw,4.4rem). Beats fable.css:5110's body.pg-mission .phero__title--statement (2 classes) via id+2classes. */ body.pg-mission #top .phero__title--statement{ font-size:clamp(2.3rem,3.8vw,4.4rem); } @media(max-width:600px){ body.pg-mission #top .phero__title--statement{ font-size:clamp(1.85rem,6.2vw,2.3rem); } } /* .mssn-kick (fable.css:1543) hardcodes color:var(--gold-deep), the NEW steel-navy remap meant for LIGHT grounds (spec 6.1); on this now-navy hero it would sit near-invisible dark-on-dark, the same class of bug the foundation already fixed for .phero__title/__deck. .mssn-kick is bespoke to this page only, so the fix lives here. */ body.pg-mission #top.sec-dark .mssn-kick, body.pg-mission #top.on-dark .mssn-kick{ color:var(--gold-soft); } body.pg-mission #top.sec-dark .mssn-kick::before, body.pg-mission #top.on-dark .mssn-kick::before{ background:var(--gold-soft); } /* Verified at 1440/1280/1024 (shots/pb-patients): the 62/34 split with this clamp() leaves a comfortable gap between the last text line and the panel's feathered edge at every one of those widths. */ /* The four "yes" words settle scale(.94) to scale(1), staggered 90ms (pg-patients.js sets each em's transition-delay, then toggles .is-set once the headline's own line-split reveal has finished). Reuses the foundation's shared .settle-spring class (already on these tags in the HTML) for the transition itself; only the two transform states are page-specific. Gated to no-preference only, so under reduced motion the words simply render at scale(1) from the very first paint, never move, and pg-patients.js also skips the whole mechanism (belt and suspenders, not either/or). */ @media (prefers-reduced-motion: no-preference){ body.pg-mission #top .phero__title em.settle-spring{ display:inline-block; transform:scale(.94); } body.pg-mission #top .phero__title em.settle-spring.is-set{ transform:scale(1); } } /* ------------------------------------------------------------ 2. MISSION #vision + #principles: quote-plate, no divider. #vision flips sec-paper-2 -> sec-dark on-dark (done in the HTML). ------------------------------------------------------------ */ /* #vision: the headline + its sentence read as ONE quoted passage (the PPT's own vision paragraph), wrapped in a single quote-plate so one drawn mark and one rule cover both lines, per signature move 3 ("no new SVG mark; the words are the illustration"). The wrapper needs no font-size of its own:

and

already carry their own sizing, which max-width does not inherit, so only the wrapper's own max-width (quote-plate's 34ch default) needs loosening back up. */ body.pg-mission #vision blockquote.quote-plate{ max-width:min(58ch,100%); margin-top:2.6rem; } /* The drawn quote mark's default -.55em offset (fable.css:341) is measured against the HOST element's own font-size. Here the host is the blockquote at quote-plate's ~2.35rem default, but the actual visible glyphs are its child

, rendered up to --t-h2's 3.5rem, taller than the mark expects: verified on screen, the mark's masked bottom edge landed on top of "Build"'s cap height. Absolute units, not em, so the offset does not depend on which child happens to be tallest. */ body.pg-mission #vision blockquote.quote-plate::before{ top:-2.6rem; } /* #principles: EACH closing line gets its own small quote-plate, keeping the existing two column grid (the grid targets direct children of .mssn-principles, unaffected by the added classes). Overrides fable.css:5133's body.pg-mission #principles .mssn-principles__stmt (id+2classes) with id+3classes. */ body.pg-mission #principles .mssn-principles__stmt.quote-plate{ font-size:clamp(1.2rem,1.8vw,1.6rem); line-height:1.32; max-width:none; margin-top:1.8rem; } body.pg-mission #principles .mssn-principles__stmt.quote-plate::before{ top:-1.8rem; } /* ============================================================ FOR-PATIENTS (body.pg-patients), round 9. Everything below is scoped to body.pg-patients or to classes that only for-patients.html uses (.pgp-*), so mission.html, which loads this same file, is untouched. Builds on fable.css tokens, the photo system (fable.css PHOTO SYSTEM and R9 FOUNDATION), the minimal box (motion-kit.css: class "box" draws the one hover and focus ring), kit4.css (M1 gradient text, M2 buttons) and medart.css (the six real medical illustrations). Palette: navy #0C1833 ground, crimson #E23A46, coral #FF6B75, deep crimson #9C1B27, white #F4F7FB. Two paper sections (voices, questions). Rules of this page: text sits straight on photographs (ink chosen from the pixels), no scrim, fade, tint or rule over a photo, a box answers hover and focus with its border ring only, no decorative lines, motion is transform and opacity, loops are gated by .is-live, and every effect resolves to its finished state under prefers-reduced-motion or without JS. ============================================================ */ body.pg-patients{ --pg-navy:var(--navy-ground,#0C1833); --pg-ink:#F4F7FB; --pg-soft:#B7C2D6; --pg-coral:#FF6B75; --pg-crimson:#E23A46; --pg-deep:#9C1B27; --pg-line:var(--line-dark,rgb(244 247 251 / .16)); --pg-ease:var(--ease-snap,cubic-bezier(.16,1,.3,1)); --pg-pad:var(--sec-pad,clamp(4.5rem,8vw,7.5rem)); --pg-r:var(--box-r,14px); /* S3 heading scale (Dev: headings bigger everywhere, easy to read, not rationing the space). Fluid: 1024 to 1920 scales smoothly, phones stay sane. */ --pgp-h1:clamp(2.75rem,7.1vw,7.25rem); --pgp-h2:clamp(2.4rem,6vw,5.75rem); --pgp-h3:clamp(1.35rem,2.6vw,2.25rem); } body.pg-patients em.k4-grad{ font-style:normal; } /* ---------- shared bits ---------- */ .pgp-sec{ position:relative; isolation:isolate; overflow:clip; } .pgp-sec > .sec-inner{ padding-block:var(--pg-pad); } .pgp-h1,.pgp-h2{ font-family:var(--display); font-weight:800; color:var(--pg-ink); margin:0; text-wrap:balance; } .pgp-h1{ font-size:var(--pgp-h1); line-height:1; letter-spacing:-.035em; } .pgp-h2{ font-size:var(--pgp-h2); line-height:1.03; letter-spacing:-.03em; } .pgp-sec.sec-paper .pgp-h2{ color:var(--ink); } .pgp-lede{ font:500 var(--t-lede,clamp(1.1rem,1rem + .5vw,1.4rem))/1.5 var(--body); color:var(--pg-soft); margin:0; max-width:36ch; } .pgp-sec.sec-paper .pgp-lede{ color:var(--ink-soft); } .pgp-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.6rem; margin-top:clamp(1.4rem,2.6vw,2rem); } body.pg-patients .sec-dark .k4-btn--text{ color:var(--pg-coral); } body.pg-patients .k4-btn--primary{ padding:1.05rem 1.8rem; font-size:1rem; } /* M1: one gradient across the whole accent phrase. fable.js splits a heading into one span per word, so pg-patients.js measures each line's accent words and gives every word the same gradient window (--gw wide, --gx in from the line start). The slow drift only runs on screen, and runs once on headings that sit over a photograph. */ body.pg-patients em.k4-grad.pgp-flow{ background-image:var(--k4-grad-text); background-size:var(--gw) 100%; background-position:calc(var(--gx,0px) * -1) 50%; background-repeat:no-repeat; animation:pgpFlow 9s ease-in-out infinite alternate; animation-play-state:paused; } body.pg-patients em.k4-grad--light.pgp-flow{ background-image:var(--k4-grad-text-light); } .pgp-grad-run em.k4-grad.pgp-flow{ animation-play-state:running; } .pgp-top em.k4-grad.pgp-flow,.pgp-story em.k4-grad.pgp-flow,.pgp-through em.k4-grad.pgp-flow{ animation-iteration-count:1; } @keyframes pgpFlow{ from{ background-position:calc(var(--gx,0px) * -1) 50%; } to{ background-position:calc(var(--gx,0px) * -1 - var(--gw,0px) * .36) 50%; } } @media (prefers-reduced-motion:reduce){ body.pg-patients em.k4-grad.pgp-flow{ animation:none; } } /* word by word reading light (pg-patients.js wraps each word in .pgp-w and arms the block); without JS, or under reduced motion, nothing is dimmed. Floor .34 on navy and paper, .55 on a photo. */ .pgp-scrub.is-armed .pgp-w{ opacity:.34; transition:opacity .45s ease; } .has-bgphoto .pgp-scrub.is-armed .pgp-w{ opacity:.55; } .pgp-scrub.is-armed .pgp-w.is-on,.has-bgphoto .pgp-scrub.is-armed .pgp-w.is-on{ opacity:1; } /* ============================================================ 01 HERO: one photograph, the full viewport. KGP26-16 (patients-top*.webp): a flat beige wall beside him carries the copy in navy ink. ============================================================ */ .pgp-top{ --photo-pos:56% 23%; --photo-pos-m:50% 25%; --photo-copy-y:center; --photo-copy-y-m:flex-start; } @media (max-aspect-ratio:3/2){ .pgp-top{ --photo-pos:72% 24%; } } @media (min-aspect-ratio:2/1){ .pgp-top{ --photo-pos:50% 0%; } } @media (max-aspect-ratio:1/1){ .pgp-top{ --photo-pos:50% 20%; } } .pgp-top__copy{ width:min(28rem,32%); margin-left:auto; } .pgp-deck{ font:500 var(--t-lede,clamp(1.1rem,1rem + .5vw,1.4rem))/1.45 var(--body); margin:1.3rem 0 0; max-width:28ch; } body.pg-patients .pgp-top .pgp-h1{ max-width:none; } /* S3: the headline is the largest type on the page. The calm wall is wider at headline height than where the deck and buttons sit (his arm comes up to about 61 percent of the frame down there), so only the headline reaches left of the copy column, by exactly what its two lines need (about 4.97em); where the column is already that wide it does not move. */ @media (min-width:901px){ body.pg-patients .pgp-top .pgp-h1{ margin-left:min(0px,calc(100% - 4.97em)); } } /* navy ink on the beige wall: the text link and the focus ring turn deep crimson */ .pgp-top [data-ink="dark"] .k4-btn--text,.pgp-top .k4-btn--text[data-ink="dark"]{ color:#9C1B27 !important; } .pgp-top [data-ink="dark"] :focus-visible,.pgp-top :focus-visible{ outline-color:#9C1B27; } /* arrival: the headline owns the one shine sweep, deck and actions follow a beat later */ @media (prefers-reduced-motion:no-preference){ .js .pgp-top:not(.is-in) :is(.pgp-deck,.pgp-cta){ opacity:0; transform:translateY(14px); } .js .pgp-top.is-in .pgp-deck{ opacity:1; transform:none; transition:opacity .7s ease .95s, transform .8s var(--pg-ease) .95s; } .js .pgp-top.is-in .pgp-cta{ opacity:1; transform:none; transition:opacity .7s ease 1.1s, transform .8s var(--pg-ease) 1.1s; } } @media (max-aspect-ratio:1/1),(max-width:700px){ .pgp-top{ --photo-copy-y:flex-start; --photo-copy-y-m:flex-start; } .pgp-top .sec-inner{ padding-top:.4rem; } .pgp-top__copy{ width:100%; margin-left:0; } } /* tablets held upright: the headline runs across the top on one line, as large as the width allows */ @media (min-width:701px) and (max-aspect-ratio:1/1){ .pgp-top .pgp-h1{ font-size:clamp(2.75rem,8.4vw,5.5rem); } } @media (min-width:701px) and (max-width:900px) and (min-aspect-ratio:1/1){ .pgp-top{ --photo-pos:100% 24%; --photo-pos-m:100% 24%; } .pgp-top__copy{ width:min(36%,22rem); } .pgp-top .pgp-h1{ font-size:clamp(2.3rem,6.2vw,3.4rem); } .pgp-deck{ font-size:1rem; } } @media (max-width:700px){ .pgp-top{ padding-top:5.4rem; } .pgp-top .pgp-h1{ font-size:clamp(2.75rem,12.8vw,3.6rem); } .pgp-deck{ font-size:1.05rem; max-width:24ch; margin-top:1rem; } .pgp-top .pgp-cta{ margin-top:1.1rem; } } /* short phones (375 by 667 and the like): the picture is cropped from the bottom, so the head sits higher; the picture rests on its top edge, the copy starts a little higher and the headline steps down, keeping a clear gap between the buttons and his cap */ @media (max-width:700px) and (max-height:720px){ .pgp-top{ --photo-pos-m:50% 0%; padding-top:4.7rem; } .pgp-top .pgp-h1{ font-size:clamp(2.5rem,11.4vw,3.2rem); } } @media (max-width:400px){ body.pg-patients .k4-btn--primary{ padding:.85rem 1.15rem; font-size:.95rem; } .pgp-top .k4-btn--text{ font-size:.95rem; } .pgp-cta{ gap:.5rem .8rem; } } /* the rhythm band (restored from round 8, recoloured for the beige wall): four uneven traces and the one steady beat they all settle into wipe in once from the left along the bottom of the photograph; it never reaches his face */ .pgp-rhythm{ position:absolute; left:0; right:0; bottom:0; z-index:2; height:clamp(86px,10.5vw,156px); pointer-events:none; } .pgp-rh__defs{ position:absolute; width:0; height:0; } .pgp-rh__l{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; } /* no white halo (Dev 2026-10-07: "remove the white radiating glow and make the lines more thick so its visible") */ .pgp-rh__l path{ fill:none; stroke:url(#pgRhG); stroke-width:3px; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; opacity:1; } .pgp-rh__l--core path{ stroke:url(#pgRhC); stroke-width:4.2px; opacity:1; } .js .pgp-top:not(.is-in) .pgp-rh__l{ clip-path:inset(-40px 100% -40px -10px); } .js .pgp-top.is-in .pgp-rh__l{ clip-path:inset(-40px -10px -40px -10px); transition:clip-path 2.7s cubic-bezier(.3,.1,.15,1) calc(var(--i,0) * .2s + .6s); } .pgp-rhythm__cap{ position:absolute; right:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter))); bottom:calc(100% + .1rem); margin:0; font:600 .74rem/1 var(--label); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-c,#0C1833); } .js .pgp-top:not(.is-in) .pgp-rhythm__cap{ opacity:0; } .js .pgp-top.is-in .pgp-rhythm__cap{ opacity:1; transition:opacity 1.2s ease 3s; } @media (max-width:700px){ .pgp-rhythm{ height:84px; } .pgp-rh__l path{ stroke-width:2.2px; } .pgp-rh__l--core path{ stroke-width:3px; } } @media (max-width:700px),(max-aspect-ratio:1/1){ .pgp-rhythm__cap{ display:none; } } /* ============================================================ 02 VIDEO LIBRARY: the film at the full content width, the three chapters in one row under it, the press as two boxes ============================================================ */ .pgp-vhead{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(1.4rem,4vw,4rem); align-items:end; margin-bottom:clamp(2rem,4vw,3.4rem); } .pgp-vhead .pgp-lede{ justify-self:end; padding-bottom:.6rem; } .pgp-vlib{ display:block; } .pgp-vid{ position:relative; display:block; color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; } body.pg-patients .pgp-vid{ outline:0; } .pgp-vid__frame{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; isolation:isolate; border:1px solid rgb(255 255 255 / .14); border-radius:var(--pg-r); background:#091227; } .pgp-vid__frame > img,.pgp-vid__frame > picture > img{ display:block; width:100%; height:100%; object-fit:cover; } .pgp-vid__frame > picture{ display:contents; } /* the Watch control: a solid chip on the film, a bare triangle on the rail thumbs */ .pgp-play{ position:absolute; z-index:2; display:inline-flex; align-items:center; gap:.55rem; color:#fff; } .pgp-play svg{ display:block; fill:#fff; stroke:#fff; stroke-width:1.2; stroke-linejoin:round; } .pgp-vid--feat .pgp-play{ right:clamp(1.2rem,2.6vw,2.1rem); bottom:clamp(1.2rem,2.6vw,2.1rem); padding:.8rem 1.25rem .8rem 1rem; border-radius:12px; font:700 .95rem/1 var(--body); background:linear-gradient(135deg,#E23A46,#C0343C); } .pgp-vid--feat .pgp-play svg{ width:1.2rem; height:1.2rem; } .pgp-vrow .pgp-play{ left:.8rem; bottom:.8rem; filter:drop-shadow(0 1px 6px rgb(0 0 0 / .6)); } .pgp-vrow .pgp-play svg{ width:28px; height:28px; } .pgp-vrow .pgp-play > span{ display:none; } /* the third still carries a printed caption along its lower edge: the control sits just above it, on the photograph */ .pgp-vrow .pgp-vid[data-video="tFnAUSJoFWs"] .pgp-play{ bottom:24%; } .pgp-vid--feat{ max-width:none; } .pgp-vid--feat .pgp-vid__body{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:.7rem clamp(1.6rem,4vw,4rem); align-items:end; margin-top:clamp(1.1rem,2vw,1.6rem); padding:0 .3rem; } .pgp-vid--feat .pgp-vid__t{ grid-column:1; font-size:clamp(1.9rem,1rem + 2.8vw,3.4rem); line-height:1.04; letter-spacing:-.03em; } .pgp-vid__d{ margin:0; font:400 1rem/1.55 var(--body); color:var(--pg-soft); max-width:40ch; } .pgp-vid--feat .pgp-vid__d{ grid-column:2; grid-row:1; align-self:end; } .pgp-vid__t{ display:block; font:800 var(--pgp-h3)/1.1 var(--display); letter-spacing:-.024em; color:#fff; text-wrap:balance; } .pgp-vrow{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2.2vw,1.8rem); margin-top:clamp(1.6rem,3vw,2.6rem); } .pgp-vrow .pgp-vid{ display:flex; flex-direction:column; align-items:stretch; gap:.9rem; } /* press: two plain boxes */ .pgp-press{ margin-top:clamp(3rem,6vw,5rem); } .pgp-press__k{ font:600 .95rem/1.2 var(--body); color:var(--pg-soft); margin:0 0 1.1rem; } .pgp-press__list{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; } .pgp-prow{ position:relative; display:grid; grid-template-columns:minmax(7rem,12rem) minmax(0,1fr) auto; align-items:center; gap:1rem clamp(1rem,3vw,2rem); padding:clamp(1.3rem,2.4vw,2rem); border:1px solid var(--pg-line); border-radius:var(--pg-r); color:#fff; text-decoration:none; } .pgp-prow__o{ font:700 .95rem/1.25 var(--body); color:var(--pg-coral); } .pgp-prow__t{ font:800 var(--pgp-h3)/1.12 var(--display); letter-spacing:-.024em; } .pgp-prow__go{ width:1.9rem; height:1.9rem; fill:none; stroke:var(--pg-coral); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* restored from round 8, inside the boxes only (a box answers with its ring, nothing else). The photo zooms inside its frame: motion-kit (data-zoom) already does it when the frame itself is hovered; these rules add the title hover and the focus twin, and keep the film image's own settle transition from swallowing the zoom. */ body.pg-patients .reveal-sec.is-in .pgp-vid__frame[data-settle] > picture > img, body.pg-patients .reveal-sec.is-in .pgp-vid__frame[data-settle] > img{ transition:transform .9s var(--ease-snap), opacity .6s ease, scale .9s var(--pg-ease); } .pgp-vrow .pgp-vid__frame img{ transition:scale .9s var(--pg-ease); } @media (hover:hover) and (pointer:fine){ .pgp-vid:hover .pgp-vid__frame img{ scale:1.05; } } .pgp-vid:focus-visible .pgp-vid__frame img{ scale:1.05; } /* the play control brightens (a control, not a box: it keeps its glow) */ .pgp-vid--feat .pgp-play{ transition:filter .4s ease, box-shadow .4s ease; } .pgp-vrow .pgp-play svg{ transition:fill .3s ease, stroke .3s ease, transform .4s var(--pg-ease); } @media (hover:hover) and (pointer:fine){ .pgp-vid--feat:hover .pgp-play{ filter:brightness(1.12) saturate(1.1); box-shadow:0 14px 36px -10px rgb(226 58 70 / .8); } .pgp-vrow .pgp-vid:hover .pgp-play svg{ fill:#FF6B75; stroke:#FF6B75; transform:scale(1.12); } } .pgp-vid--feat:focus-visible .pgp-play{ filter:brightness(1.12) saturate(1.1); box-shadow:0 14px 36px -10px rgb(226 58 70 / .8); } .pgp-vrow .pgp-vid:focus-visible .pgp-play svg{ fill:#FF6B75; stroke:#FF6B75; transform:scale(1.12); } /* press rows: the title underline draws (inside the box); the arrow nudge comes from motion-kit; no wash, no padding shift */ .pgp-prow__t span{ background:linear-gradient(90deg,var(--pg-crimson),var(--pg-coral)) 0 100% / 0% 3px no-repeat; padding-bottom:.1em; -webkit-box-decoration-break:clone; box-decoration-break:clone; transition:background-size .65s var(--pg-ease); } @media (hover:hover) and (pointer:fine){ .pgp-prow:hover .pgp-prow__t span{ background-size:100% 3px; } } .pgp-prow:focus-visible .pgp-prow__t span{ background-size:100% 3px; } /* ============================================================ 03 THE TRANSFORMATION: the quote straight on the wall beside him ============================================================ */ .pgp-story{ --photo-pos:30% 22%; --photo-pos-m:50% 0%; --drift-origin:68% 35%; --stack-ar:3/4; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; } @media (max-aspect-ratio:7/5){ .pgp-story{ --photo-pos:52% 22%; } } @media (min-aspect-ratio:21/10){ .pgp-story{ --photo-pos:50% 12%; } } .pgp-story > .pgp-story__in{ flex:1; width:100%; max-width:var(--max); margin:0 auto; display:flex; flex-direction:column; justify-content:center; } .pgp-story__copy{ max-width:min(40rem,46%); } .pgp-quote{ position:relative; margin:0 0 clamp(1.4rem,2.6vw,2rem); text-indent:-.42em; font:800 clamp(2.9rem,.9rem + 4.9vw,5.5rem)/1.02 var(--display); letter-spacing:-.034em; text-wrap:balance; } .pgp-quote::before{ content:"\201C"; color:var(--pg-coral); } .pgp-quote[data-ink="dark"]::before,[data-ink="dark"] .pgp-quote::before{ color:#9C1B27; } /* S3: the quote grows past its column to the right (the calm wall is wider than the body copy needs; the body keeps its 36ch), never nearer than about 7 percent of the frame to his hat */ .pgp-quote{ margin-right:calc(-1 * clamp(0px,9vw,9rem)); } .pgp-story__body{ font:400 clamp(1.05rem,.95rem + .4vw,1.25rem)/1.6 var(--body); max-width:36ch; margin:0; } .pgp-story__body b{ font-weight:700; color:inherit; } .pgp-story__body[data-ink="dark"] b,[data-ink="dark"] .pgp-story__body b{ color:#9C1B27; } .pgp-story__credit{ margin:1.5rem 0 0; font:500 .95rem/1.45 var(--body); } .pgp-story__credit b{ font-weight:700; } .pgp-story__credit span{ opacity:.82; } @media (max-width:1100px){ .pgp-story__copy{ max-width:min(34rem,44%); } } /* ============================================================ 04 VOICES (paper): two patient voices at real size, no cards ============================================================ */ body.pg-patients .pgp-voices,body.pg-patients .pgp-faq{ background:#F4F7FB; background-image:none; } .pgp-voices .pgp-h2{ max-width:none; } .pgp-vspread{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(1rem,2.2vw,2rem); row-gap:clamp(3.5rem,8vw,7.5rem); margin-top:clamp(2.6rem,5vw,4.6rem); } .pgp-vq{ margin:0; position:relative; } .pgp-vq--a{ grid-column:1 / span 8; } .pgp-vq--b{ grid-column:5 / -1; } .pgp-vq__q{ margin:0; font:600 clamp(2.15rem,1rem + 4vw,5rem)/1.1 'Newsreader',Georgia,serif; letter-spacing:-.015em; color:var(--ink,#0B1B33); text-wrap:balance; } .pgp-vq__mark{ position:absolute; left:0; top:-.02em; transform:translateX(-.62em); transform-origin:100% 100%; font:600 clamp(2.15rem,1rem + 4vw,5rem)/1 'Newsreader',Georgia,serif; color:#E23A46; } .pgp-vq__who{ margin-top:clamp(1.2rem,2vw,1.8rem); font:700 1rem/1.3 var(--display); letter-spacing:0; text-transform:none; color:#9C1B27; } @media (prefers-reduced-motion:no-preference){ .js .pgp-voices:not(.is-in) .pgp-vq__mark{ opacity:0; transform:translateX(-.62em) scale(.6); } .js .pgp-voices.is-in .pgp-vq__mark{ opacity:1; transform:translateX(-.62em); transition:opacity .7s ease .15s, transform .7s var(--pg-ease) .15s; } } @media (max-width:760px){ .pgp-vspread{ row-gap:3.2rem; } .pgp-vq--a,.pgp-vq--b{ grid-column:1 / -1; } .pgp-vq__mark{ position:static; display:block; transform:none; font-size:3.6rem; line-height:.7; height:.4em; margin-bottom:.15em; } .js .pgp-voices:not(.is-in) .pgp-vq__mark{ transform:scale(.6); } .js .pgp-voices.is-in .pgp-vq__mark{ transform:none; } } /* the two one line drawings sit in the empty space opposite their quote and draw themselves as the visitor scrolls (lineart.js); the drawing turns deep crimson while its own quote is hovered (an illustration reacting, inside the quote, not a box) */ .pgp-vq--a{ grid-row:1; } .pgp-vq--b{ grid-row:2; } .pgp-vart{ align-self:center; pointer-events:none; --lineart-max:460px; transition:color .5s ease; } .pgp-vart--a{ grid-column:8 / -1; grid-row:1; justify-self:end; } .pgp-vart--b{ grid-column:1 / span 4; grid-row:2; justify-self:start; } /* the heart fills only the middle half of its drawing box, so the box is made wider than its four columns (the empty sides run under the quote's own column, where nothing is drawn) to give the heart about the size of the father and son */ @media (min-width:761px){ .pgp-vq--b{ align-self:center; } .pgp-vart--b{ width:min(142%,560px); max-width:none; margin-left:-21%; } } @media (hover:hover) and (pointer:fine){ .pgp-vspread:has(.pgp-vq--a:hover) .pgp-vart--a, .pgp-vspread:has(.pgp-vq--b:hover) .pgp-vart--b{ color:#9C1B27; } } @media (max-width:760px){ .pgp-vq--a{ grid-row:1; } .pgp-vart--a{ grid-column:1 / -1; grid-row:2; justify-self:end; --lineart-max:260px; } .pgp-vq--b{ grid-row:3; } .pgp-vart--b{ grid-column:1 / -1; grid-row:4; justify-self:start; --lineart-max:260px; } } /* arrival for the lists: the rows, the questions and the tabs rise in one after another, 90 ms apart. Animations (not transitions), so a box's own hover transition is never replaced. */ .pgp-sites li:nth-child(1),.pgp-qa__item:nth-child(1),.pgp-tabs li:nth-child(1){ --k:0; } .pgp-sites li:nth-child(2),.pgp-qa__item:nth-child(2),.pgp-tabs li:nth-child(2){ --k:1; } .pgp-sites li:nth-child(3),.pgp-qa__item:nth-child(3),.pgp-tabs li:nth-child(3){ --k:2; } .pgp-sites li:nth-child(4),.pgp-qa__item:nth-child(4),.pgp-tabs li:nth-child(4){ --k:3; } .pgp-sites li:nth-child(5),.pgp-qa__item:nth-child(5),.pgp-tabs li:nth-child(5){ --k:4; } .pgp-sites li:nth-child(6),.pgp-qa__item:nth-child(6),.pgp-tabs li:nth-child(6){ --k:5; } @media (prefers-reduced-motion:no-preference){ .js .pgp-sec:not(.is-in) :is(.pgp-sites li,.pgp-qa__item,.pgp-tabs li){ opacity:0; } .js .pgp-sec.is-in :is(.pgp-sites li,.pgp-qa__item,.pgp-tabs li){ animation:pgpListIn .85s var(--pg-ease) calc(var(--k,0) * 90ms + .4s) backwards; } } @keyframes pgpListIn{ from{ opacity:0; transform:translateY(16px); } } /* ============================================================ 05 SHARE YOUR STORY: copy on navy, the photograph flush right (the .hsplit panel) ============================================================ */ .pgp-share{ --hs-w:46vw; --photo-pos:70% 30%; --photo-pos-m:62% 30%; } .pgp-share .hsplit__ph{ width:100%; } .pgp-share .pgp-h2{ margin-bottom:1.3rem; } .pgp-share .pgp-lede{ color:var(--on-dark,#E8EDF4); max-width:32ch; } /* ============================================================ 06 YOUR PLAN: six real medical illustrations on one wide stage ============================================================ */ .pgp-work__head{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(1.5rem,4vw,4rem); align-items:end; margin-bottom:clamp(2rem,4vw,3.2rem); } .pgp-work__head .pgp-lede{ max-width:34ch; justify-self:end; padding-bottom:.5rem; } .pgp-tabs{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.5rem; } .pgp-tabs > li{ display:flex; } .pgp-tab{ display:grid; gap:.35rem; align-content:start; width:100%; min-height:84px; text-align:left; padding:.9rem 1rem; border:1px solid var(--pg-line); border-radius:var(--pg-r); background:none; color:var(--pg-soft); cursor:pointer; font:inherit; } .pgp-tab__n{ font:600 .78rem/1 var(--label); letter-spacing:.06em; color:var(--on-dark-faint); } .pgp-tab__t{ font:700 clamp(1rem,1.55vw,1.5rem)/1.15 var(--display); letter-spacing:-.015em; } .pgp-tab.is-active{ border-color:#E23A46; color:#fff; } .pgp-tab.is-active .pgp-tab__n{ color:var(--pg-coral); } /* inside the box: the tab text turns white and its number coral (the box itself answers with its ring only) */ @media (hover:hover) and (pointer:fine){ .pgp-tab:hover{ color:#fff; } .pgp-tab:hover .pgp-tab__n{ color:var(--pg-coral); } } .pgp-tab:focus-visible{ color:#fff; } .pgp-tab:focus-visible .pgp-tab__n{ color:var(--pg-coral); } .pgp-stage{ position:relative; margin-top:clamp(2rem,4vw,3.4rem); min-height:clamp(430px,41vw,580px); display:grid; align-items:center; } .pgp-pane{ display:none; } .pgp-pane.is-active{ display:grid; grid-template-columns:minmax(0,.52fr) minmax(0,.48fr); align-items:center; gap:clamp(2rem,5vw,5rem); animation:pgpPane .7s var(--pg-ease) both; } @keyframes pgpPane{ from{ opacity:0; transform:translateY(14px) scale(.985); } } @media (prefers-reduced-motion:reduce){ .pgp-pane.is-active{ animation:none; } } .pgp-stage .mp-panel{ min-height:0; padding:0; background:transparent; border:0; overflow:visible; display:flex; align-items:center; justify-content:center; } .pgp-stage .mp-stage{ width:100%; min-height:0; } .pgp-stage .mp-stage__bloom{ width:min(540px,88%); height:min(540px,88%); } .pgp-stage .mp-art{ height:clamp(400px,38vw,540px); } /* the injected ECG strip adds about 3.4rem under the heart: the AHF plate gives that height back so the stage never jumps between tabs */ .pgp-stage .mp-art--ahf{ height:calc(clamp(400px,38vw,540px) - 3.4rem); } .pgp-stage .mp-canister{ height:clamp(430px,41vw,580px); } .pgp-stage .mp-art--ph{ height:auto; width:min(440px,86%); } .pgp-pane__lead{ font:600 var(--pgp-h3)/1.18 var(--display); letter-spacing:-.02em; color:#fff; max-width:22ch; margin:0 0 1.1rem; text-wrap:balance; } .pgp-pane__desc{ color:var(--pg-soft); font-size:1.05rem; line-height:1.6; max-width:42ch; margin:0; } .pgp-pane__tools{ display:grid; grid-template-columns:repeat(2,max-content); gap:.35rem 2.2rem; margin-top:1.4rem; } .pgp-pane__tk{ grid-column:1 / -1; font:600 .9rem/1.2 var(--body); color:var(--pg-soft); margin-bottom:.35rem; } .pgp-tool{ font:500 1.02rem/1.5 var(--body); color:#F4F7FB; } /* ============================================================ 07 THE QUESTIONS (paper): a portrait beside four quiet boxes ============================================================ */ .pgp-faq{ overflow:clip; } .pgp-faq__grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2rem,5vw,5rem); align-items:start; } .pgp-faq__fig{ position:sticky; top:clamp(96px,14vh,140px); margin:0; aspect-ratio:3/4; border-radius:var(--stage-r,20px); overflow:hidden; background:#DDE2EA; } .pgp-faq__fig img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 38%; } .pgp-faq__lead .pgp-h2{ max-width:11ch; margin-bottom:1.3rem; } .pgp-qa{ list-style:none; margin:clamp(2rem,4vw,3rem) 0 0; padding:0; display:grid; gap:.65rem; --qa-n:2.4rem; } .pgp-qa__item{ border:1.5px solid var(--line-light,rgb(11 27 51 / .14)); border-radius:16px; background:transparent; box-shadow:none; } .pgp-qa__item.is-open{ border-color:#E23A46; } .pgp-qa__h{ margin:0; font:inherit; } .pgp-qa__btn{ display:grid; grid-template-columns:var(--qa-n) minmax(0,1fr) auto; align-items:center; gap:1rem; width:100%; margin:0; padding:clamp(1.1rem,2vw,1.5rem) 1.25rem; background:none; border:0; border-radius:16px; cursor:pointer; text-align:left; color:var(--ink); font:inherit; } body.pg-patients .pgp-qa__btn{ outline:0; } .pgp-qa__n{ font:700 .95rem/1 var(--label); letter-spacing:.06em; color:#9C1B27; } .pgp-qa__q{ font:800 clamp(1.4rem,1.05rem + 1.2vw,2.15rem)/1.15 var(--display); letter-spacing:-.02em; } .pgp-qa__ico{ position:relative; width:1.5rem; height:1.5rem; flex:none; transition:transform .6s var(--pg-ease); } .pgp-qa__ico::before,.pgp-qa__ico::after{ content:''; position:absolute; left:0; right:0; top:50%; height:2.5px; margin-top:-1.25px; border-radius:2px; background:var(--pg-deep); } .pgp-qa__ico::after{ transform:rotate(90deg); } .pgp-qa__item.is-open .pgp-qa__ico{ transform:rotate(135deg); } .pgp-qa__a{ display:grid; grid-template-rows:1fr; transition:grid-template-rows .6s var(--pg-ease); } .js .pgp-qa__item:not(.is-open) .pgp-qa__a{ grid-template-rows:0fr; visibility:hidden; transition:grid-template-rows .6s var(--pg-ease), visibility 0s linear .6s; } .pgp-qa__in{ overflow:hidden; min-height:0; } .pgp-qa__in p{ margin:0; padding:0 1.25rem clamp(1.3rem,2.2vw,1.8rem) calc(var(--qa-n) + 1.25rem); font:500 clamp(1.2rem,1rem + .7vw,1.55rem)/1.35 var(--body); color:var(--ink); max-width:36ch; box-sizing:content-box; } .pgp-qa__in p.is-armed .pgp-w{ opacity:.18; transition:opacity .45s ease; } .pgp-qa__in p.is-armed .pgp-w.is-on{ opacity:1; } @media (prefers-reduced-motion:reduce){ .pgp-qa__a,.pgp-qa__ico{ transition:none !important; } } /* inside the row: the question turns deep crimson and the plus turns crimson (the row itself answers with its ring only) */ @media (hover:hover) and (pointer:fine){ .pgp-qa__btn:hover .pgp-qa__q{ color:var(--pg-deep); } .pgp-qa__btn:hover .pgp-qa__ico::before,.pgp-qa__btn:hover .pgp-qa__ico::after{ background:var(--pg-crimson); } } .pgp-qa__btn:focus-visible .pgp-qa__q{ color:var(--pg-deep); } .pgp-qa__item.is-open .pgp-qa__ico::before,.pgp-qa__item.is-open .pgp-qa__ico::after{ background:var(--pg-crimson); } .pgp-qa__q,.pgp-qa__ico::before,.pgp-qa__ico::after{ transition:color .3s ease, background .3s ease; } /* ============================================================ 08 PROGRAMS: the complete region map with the six hospitals, the chart, the 500+ ============================================================ */ .pgp-prog__head .pgp-h2{ max-width:22ch; } .pgp-prog__intro{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,4vw,4rem); margin-top:clamp(1.6rem,3vw,2.4rem); } .pgp-prog__intro .pgp-lede{ font-size:clamp(1.1rem,1rem + .45vw,1.32rem); max-width:44ch; } .pgp-prog__creed{ margin:0; font:400 var(--t-body)/1.62 var(--body); color:var(--on-dark); max-width:46ch; } .pgp-net{ position:relative; display:grid; margin-top:clamp(2.4rem,5vw,4rem); isolation:isolate; } .pgp-map{ grid-area:1 / 1; min-width:0; } /* the six rows sit in the empty corner of the map, below Tennessee and east of Mississippi */ .pgp-sites{ grid-area:1 / 1; justify-self:end; align-self:end; z-index:4; width:43%; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; } .pgp-site{ position:relative; display:grid; grid-template-columns:2.1rem minmax(0,1fr) auto; align-items:center; gap:.8rem; width:100%; text-align:left; padding:.85rem 1.1rem; border-radius:16px; cursor:pointer; font:inherit; color:#fff; border:1px solid var(--pg-line); background:#0F1E3F; box-shadow:none; } .pgp-site__n{ font:700 .78rem/1 var(--label); letter-spacing:.06em; color:var(--on-dark-faint); } .pgp-site__t{ display:block; font:800 1.05rem/1.2 var(--display); letter-spacing:-.01em; } .pgp-site__c{ display:block; margin-top:.2rem; font:400 .9rem/1.3 var(--body); color:var(--pg-soft); } .pgp-site__k{ font:700 .8rem/1 var(--body); padding:.4rem .6rem; border-radius:6px; color:#fff; background:#E23A46; } .pgp-site--hub .pgp-site__t,.pgp-site[data-site="memphis"] .pgp-site__t{ font-size:1.3rem; } .pgp-site.is-on{ border-color:#E23A46; } .pgp-site.is-on .pgp-site__n{ color:var(--pg-coral); } .pgp-map__stage{ position:relative; aspect-ratio:232/164; container-type:inline-size; } /* the crimson light behind the region, centred on Memphis (restored from round 8, tied to the map); the ellipse fades to nothing before it reaches any edge of this box, so no hard edge shows */ .pgp-map__stage::before{ content:''; position:absolute; inset:-8% -4%; z-index:-1; pointer-events:none; background:radial-gradient(46% 43% at 38% 34.5%, rgb(226 58 70 / .30), rgb(226 58 70 / .08) 55%, transparent 80%); } .pgp-map__svg{ position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible; } .pgp-map__s{ fill:url(#pgHot); stroke:rgb(255 107 117 / .8); stroke-width:.25px; stroke-linejoin:round; } .pgp-map__d path{ fill:none; stroke:rgb(255 255 255 / .42); stroke-width:.5px; stroke-linecap:round; } .js .pgp-prog:not(.is-in) .pgp-map__s{ opacity:0; } .js .pgp-prog:not(.is-in) .pgp-map__d path{ opacity:0; } .js .pgp-prog.is-in .pgp-map__s{ opacity:1; transition:opacity .9s ease calc(var(--i,0) * .15s + .1s); } .js .pgp-prog.is-in .pgp-map__d path{ opacity:1; transition:opacity .8s ease var(--d,0ms); } .pgp-map__st{ position:absolute; transform:translate(-50%,-50%); pointer-events:none; font:700 clamp(.6rem,.9cqw,.78rem)/1 var(--label); letter-spacing:.3em; text-transform:uppercase; color:rgb(244 247 251 / .62); text-shadow:0 0 6px #0C1833; } .pgp-pin{ position:absolute; z-index:3; transform:translate(-50%,-50%); width:1.7rem; height:1.7rem; padding:0; border:0; background:none; cursor:pointer; display:grid; place-items:center; -webkit-tap-highlight-color:transparent; } .js .pgp-prog:not(.is-in) .pgp-pin{ opacity:0; } .js .pgp-prog:not(.is-in) .pgp-pin__dot{ transform:scale(.6); } .js .pgp-prog.is-in .pgp-pin{ opacity:1; transition:opacity .45s ease var(--pd,.4s); } .js .pgp-prog.is-in .pgp-pin__dot{ transform:none; transition:transform .45s var(--pg-ease) var(--pd,.4s), background .3s ease, box-shadow .3s ease; } .pgp-pin__dot{ position:relative; display:block; width:clamp(6px,1.05cqw,12px); height:clamp(6px,1.05cqw,12px); border-radius:50%; background:#FF8F8F; box-shadow:0 0 0 3px rgb(226 58 70 / .3), 0 0 18px 2px rgb(255 107 117 / .7); } .pgp-pin--hub .pgp-pin__dot{ width:clamp(8px,1.5cqw,17px); height:clamp(8px,1.5cqw,17px); background:#fff; box-shadow:0 0 0 4px rgb(226 58 70 / .55), 0 0 26px 4px rgb(255 107 117 / .85); } /* the selected pin grows, turns white and glows harder; its label turns coral (these come after the arrival rules so they win) */ .pgp-pin.is-on{ z-index:5; } .js .pgp-prog.is-in .pgp-pin.is-on .pgp-pin__dot,.pgp-pin.is-on .pgp-pin__dot{ transform:scale(1.5); background:#fff; box-shadow:0 0 0 4px rgb(226 58 70 / .5), 0 0 28px 5px rgb(255 107 117 / .9); } .pgp-pin.is-on .pgp-pin__lb b{ color:var(--pg-coral); } .pgp-pin__dot::after{ content:''; position:absolute; inset:-.55rem; border-radius:50%; border:1.5px solid rgb(255 107 117 / .6); opacity:0; transform:scale(.6); } @media (prefers-reduced-motion:no-preference){ .pgp-prog.is-live .pgp-pin--hub .pgp-pin__dot::after{ animation:pgpPulse 2.8s var(--ease-soft,ease) infinite; } } @keyframes pgpPulse{ 0%{ transform:scale(.6); opacity:.9; } 80%,100%{ transform:scale(2); opacity:0; } } .pgp-pin__lb{ position:absolute; white-space:nowrap; pointer-events:none; text-shadow:0 1px 8px #0C1833, 0 0 3px #0C1833; } .pgp-pin__lb b{ display:block; font:700 clamp(.72rem,1cqw,.9rem)/1.2 var(--label); color:#fff; letter-spacing:.02em; } .pgp-pin--hub .pgp-pin__lb{ } .pgp-pin--r .pgp-pin__lb{ left:calc(50% + 1.1rem); top:50%; transform:translateY(-50%); text-align:left; } .pgp-pin--l .pgp-pin__lb{ right:calc(50% + 1.1rem); top:50%; transform:translateY(-50%); text-align:right; } .pgp-pin--rb .pgp-pin__lb{ left:calc(50% + .45rem); top:calc(50% + .7rem); text-align:left; } .pgp-pin--t .pgp-pin__lb{ bottom:calc(50% + 1rem); left:50%; transform:translateX(-50%); text-align:center; } .pgp-pin--hub.pgp-pin--l .pgp-pin__lb{ right:calc(50% + 1.25rem); } /* the glass popover (restored from round 8): the kind, the hospital, the city; placed by pg-patients.js clear of every pin, every row and every state name */ .pgp-pop{ position:absolute; z-index:5; width:min(17.5rem,calc(100% - 1.2rem)); padding:1.05rem 1.2rem 1.15rem; border-radius:18px; pointer-events:none; background:linear-gradient(rgb(255 255 255 / .1), rgb(255 255 255 / .04)), rgb(12 24 51 / .93); -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%); border:1px solid rgb(255 255 255 / .22); box-shadow:0 24px 50px -20px rgb(0 0 0 / .85), 0 0 44px -14px rgb(226 58 70 / .55), inset 0 1px 0 rgb(255 255 255 / .22); transition:transform .4s var(--pg-ease), opacity .3s ease; } .pgp-pop[hidden]{ display:none; } .pgp-pop.is-swap{ opacity:0; transform:translateY(6px); } .js .pgp-prog:not(.is-in) .pgp-pop{ opacity:0; } .js .pgp-prog.is-in .pgp-pop{ animation:pgpPopIn .7s var(--pg-ease) 1.5s backwards; } @keyframes pgpPopIn{ from{ opacity:0; transform:translateY(8px); } } .pgp-pop__k{ display:block; font:700 .68rem/1 var(--label); letter-spacing:.2em; text-transform:uppercase; color:var(--pg-coral); margin-bottom:.6rem; } .pgp-pop__t{ display:block; font:800 1.18rem/1.2 var(--display); letter-spacing:-.012em; color:#fff; } .pgp-pop__t + .pgp-pop__t{ margin-top:.5rem; } .pgp-pop__t.is-dim{ color:rgb(244 247 251 / .55); } .pgp-pop__c{ display:block; margin-top:.6rem; font:400 .92rem/1.3 var(--body); color:var(--pg-soft); } .pgp-map > .pgp-pop{ position:static; width:auto; pointer-events:auto; } .pgp-map__key{ position:absolute; left:0; bottom:0; display:flex; flex-direction:column; gap:.6rem; list-style:none; margin:0; padding:0; font:600 .9rem/1 var(--body); color:var(--pg-soft); } .pgp-map__key li{ display:flex; align-items:center; gap:.65rem; } .pgp-map__sw{ width:.7rem; height:.7rem; border-radius:50%; background:#FF8F8F; box-shadow:0 0 10px rgb(255 107 117 / .8); } .pgp-map__sw--hub{ width:.9rem; height:.9rem; background:#fff; box-shadow:0 0 0 3px rgb(226 58 70 / .55), 0 0 12px rgb(255 107 117 / .8); } /* chart block */ .pgp-evid{ margin-top:clamp(3.8rem,7.5vw,6.4rem); } .pgp-evid__h{ font:800 clamp(2rem,1.1rem + 2.9vw,3.6rem)/1.06 var(--display); letter-spacing:-.03em; color:#fff; max-width:19ch; margin:0 0 clamp(1.6rem,3vw,2.4rem); text-wrap:balance; } .pgp-rural-em{ font-style:normal; color:#FF6B75; } .pgp-evid__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(1.8rem,3.6vw,3rem); } .pgp-chart{ min-width:0; border-radius:16px; padding:clamp(1.3rem,2.6vw,2.2rem); isolation:isolate; background:#0F1E3F; border:1px solid var(--pg-line); box-shadow:none; } .pgp-chart__top{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.8rem 1.4rem; margin-bottom:clamp(1.2rem,2.4vw,1.8rem); } .pgp-chart__k{ margin:0; font:600 .9rem/1.35 var(--body); color:var(--on-dark-soft); } .pgp-chart__key{ display:flex; gap:1.2rem; list-style:none; margin:0; padding:0; font:600 .9rem/1 var(--body); color:#fff; } .pgp-chart__key i{ display:inline-block; width:1.5rem; height:4px; border-radius:2px; margin-right:.55rem; vertical-align:middle; } .pgp-chart__key .is-rural i{ background:linear-gradient(90deg,#E23A46,#FF8F6B); } .pgp-chart__key .is-urban i{ background:linear-gradient(90deg,#9FB3D6,#F4F7FB); } .pgp-chart__frame{ padding:0 clamp(4rem,9vw,6.2rem) 0 clamp(2.4rem,4.4vw,3rem); } .pgp-chart__box{ position:relative; aspect-ratio:2.3/1; } .pgp-chart__svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; } .pgp-chart__gl{ stroke:rgb(255 255 255 / .16); stroke-width:1px; stroke-dasharray:3 6; vector-effect:non-scaling-stroke; } .pgp-chart__ax{ stroke:rgb(255 255 255 / .32); stroke-width:1px; vector-effect:non-scaling-stroke; } .pgp-chart__cl{ stroke:rgb(255 255 255 / .6); stroke-width:1px; stroke-dasharray:3 4; vector-effect:non-scaling-stroke; display:none; } .pgp-chart__cl.is-on{ display:inline; } .pgp-chart__svg--band path{ fill:url(#pgChB); } .pgp-chart__svg--urban path{ fill:none; stroke:url(#pgChU); stroke-width:2.6px; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; } .pgp-chart__svg--rural{ filter:drop-shadow(0 0 8px rgb(226 58 70 / .6)); } .pgp-chart__svg--rural path{ fill:none; stroke:url(#pgChR); stroke-width:3.8px; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; } .js .pgp-chart:not(.is-drawn) .pgp-chart__svg--urban{ clip-path:inset(-24px 100% -24px -8px); } .js .pgp-chart:not(.is-drawn) .pgp-chart__svg--rural{ clip-path:inset(-24px 100% -24px -8px); } .js .pgp-chart:not(.is-drawn) .pgp-chart__svg--band{ opacity:0; } .js .pgp-chart.is-drawn .pgp-chart__svg--urban{ clip-path:inset(-24px -8px -24px -8px); transition:clip-path 2s cubic-bezier(.3,.1,.15,1) .15s; } .js .pgp-chart.is-drawn .pgp-chart__svg--rural{ clip-path:inset(-24px -8px -24px -8px); transition:clip-path 2s cubic-bezier(.3,.1,.15,1) .6s; } .js .pgp-chart.is-drawn .pgp-chart__svg--band{ opacity:1; transition:opacity 1.2s ease 2.2s; } .pgp-chart__yk{ position:absolute; left:-2.8rem; width:2.2rem; text-align:right; transform:translateY(-50%); font:600 .88rem/1 var(--label); color:var(--on-dark-soft); } .pgp-chart__yr{ position:absolute; top:93%; font:600 .88rem/1 var(--label); letter-spacing:.04em; color:var(--on-dark-soft); } .pgp-chart__yr--mid{ transform:translateX(-50%); } .pgp-chart__yr--end{ transform:translateX(-100%); } .pgp-chart__end{ position:absolute; left:calc(100% + 1rem); transform:translateY(-50%); display:flex; flex-direction:column; gap:.25rem; } .pgp-chart__end small{ font:600 .9rem/1 var(--body); color:var(--on-dark-soft); } .pgp-chart__end b{ font:800 clamp(1.7rem,1.2rem + 1.6vw,2.6rem)/1 var(--display); letter-spacing:-.04em; color:#fff; } .pgp-chart__end--rural b{ background:linear-gradient(100deg,#E23A46,#FF6B75 60%,#FF8F6B); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--pg-coral); } .js .pgp-chart:not(.is-drawn) .pgp-chart__end{ opacity:0; } .js .pgp-chart.is-drawn .pgp-chart__end{ opacity:1; transition:opacity .8s ease 2.4s; } .pgp-chart__dot{ position:absolute; width:14px; height:14px; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; background:#0F1E3F; border:3px solid #fff; box-shadow:0 0 14px rgb(255 255 255 / .35); } .pgp-chart__dot--rural{ border-color:var(--pg-coral); box-shadow:0 0 16px rgb(255 107 117 / .7); } .pgp-chart__tip{ position:absolute; z-index:3; transform:translate(-50%,-50%); padding:.6rem .85rem; border-radius:12px; pointer-events:none; white-space:nowrap; font:700 .88rem/1.4 var(--body); color:#fff; background:#0C1833; border:1px solid rgb(255 255 255 / .22); box-shadow:0 14px 30px -12px rgb(0 0 0 / .8); } .pgp-chart__tip b{ color:var(--pg-coral); } .pgp-chart__hit{ position:absolute; inset:-8px -4px; cursor:crosshair; touch-action:pan-y; -webkit-tap-highlight-color:transparent; border-radius:8px; } .pgp-chart__readout{ margin:1.1rem 0 0; min-height:1.4em; font:600 .95rem/1.4 var(--label); letter-spacing:.01em; color:#fff; } .pgp-chart__readout .is-hint{ font-weight:500; color:var(--on-dark-soft); } /* while the tooltip shows, the readout is kept for screen readers only */ .pgp-chart.is-reading .pgp-chart__readout{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } .pgp-take{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.4rem,4vw,4rem); } .pgp-take__p{ margin:0; font:800 clamp(1.4rem,1rem + 1.2vw,2rem)/1.2 var(--display); letter-spacing:-.022em; color:var(--pg-soft); text-wrap:balance; } .pgp-take__p--b{ color:#fff; } .pgp-src{ margin:clamp(1.4rem,2.6vw,2rem) 0 0; font:500 .9rem/1.55 var(--label); color:var(--on-dark-soft); max-width:70ch; } /* the 500+ as type */ .pgp-proof{ display:flex; align-items:flex-end; flex-wrap:wrap; gap:1rem clamp(1.6rem,4vw,4rem); margin-top:clamp(4rem,8vw,7rem); } .pgp-stat{ margin:0; display:flex; align-items:flex-start; font:800 var(--t-num,clamp(4.5rem,2rem + 9vw,10rem))/.9 var(--display); letter-spacing:-.05em; font-variant-numeric:tabular-nums; } .pgp-stat__plus{ display:inline-block; transform-origin:0 50%; margin-left:.04em; } .pgp-stat__cap{ margin:0 0 .6rem; font:600 1.2rem/1.4 var(--body); color:#fff; max-width:26ch; } .js .pgp-stat.is-armed .pgp-stat__plus{ opacity:0; transform:scale(.4); } .js .pgp-stat.is-landed .pgp-stat__plus{ opacity:1; transform:none; transition:opacity .2s ease, transform .35s var(--pg-ease); } /* ============================================================ 09 THE THROUGHLINE: the closing claim straight on the wall beside him ============================================================ */ .pgp-through{ --photo-pos:0% 40%; --photo-pos-m:50% 30%; --drift-origin:30% 45%; --stack-ar:4/5; min-height:max(100svh,640px); display:flex; flex-direction:column; } .pgp-through > .pgp-through__in{ flex:1; width:100%; max-width:none; margin:0; padding-inline:var(--gutter); display:flex; flex-direction:column; justify-content:flex-start; padding-top:clamp(5.2rem,10vh,8rem); padding-bottom:3rem; } /* the copy sits on the calm wall right of his shoulder. The picture is a 16:10 plate that fills the section from its left edge, so the copy starts at 48 percent of that plate: max(section width, 1.6 x section height) */ .pgp-through__copy{ margin-left:calc(.48 * max(100% + 2 * var(--gutter), 160svh, 1024px) - var(--gutter)); width:auto; } .pgp-stmt{ font:800 var(--pgp-h2)/1 var(--display); letter-spacing:-.035em; margin:0; max-width:none; text-wrap:balance; } .pgp-stmt__lead{ display:block; font-size:.5em; letter-spacing:-.02em; margin-bottom:.2em; } /* S3: the two lines are set by the markup (a break after "person,"); at the larger size they hold as written instead of falling to three */ @media (min-width:361px){ .pgp-stmt{ white-space:nowrap; } } .pgp-through__p{ margin:1.3rem 0 0; font:500 clamp(1.05rem,.95rem + .35vw,1.2rem)/1.5 var(--body); max-width:38ch; } .pgp-through__last{ margin:.8rem 0 0; font:800 var(--pgp-h3)/1.15 var(--display); letter-spacing:-.024em; max-width:30ch; text-wrap:balance; } .pgp-through__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.4rem; margin-top:1.3rem; } /* on this wall (mean luminance about .31) the accent is a solid deep crimson, no gradient, and the focus ring is navy */ body.pg-patients #throughline .pgp-through__copy em.k4-grad{ background:none !important; -webkit-text-fill-color:currentColor !important; color:#7A1420 !important; filter:none !important; } .pgp-through [data-ink="dark"] .k4-btn--text,.pgp-through .k4-btn--text[data-ink="dark"]{ color:#7A1420 !important; } .pgp-through__copy .k4-btn:focus-visible,.pgp-through__copy a:focus-visible{ outline:2px solid #0C1833; outline-offset:4px; } .pgp-through .k4-btn__glow{ box-shadow:0 10px 26px -12px rgb(122 20 32 / .6); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1000px){ .pgp-prog__intro{ grid-template-columns:minmax(0,1fr); gap:1.2rem; } } @media (max-width:900px){ .pgp-vhead,.pgp-work__head{ grid-template-columns:minmax(0,1fr); } .pgp-vhead .pgp-lede,.pgp-work__head .pgp-lede{ justify-self:start; padding-bottom:0; } .pgp-prow{ grid-template-columns:minmax(0,1fr) auto; } .pgp-prow__o{ grid-column:1 / -1; } .pgp-tabs{ grid-template-columns:repeat(2,minmax(0,1fr)); } .pgp-tab{ min-height:56px; } .pgp-stage{ min-height:0; display:block; } .pgp-pane.is-active{ grid-template-columns:minmax(0,1fr); gap:1.6rem; } .pgp-stage .mp-art{ height:clamp(300px,74vw,420px); } .pgp-stage .mp-art--ahf{ height:calc(clamp(300px,74vw,420px) - 3.4rem); } .pgp-stage .mp-canister{ height:clamp(320px,78vw,440px); } .pgp-stage .mp-art--ph{ height:auto; width:min(440px,86%); } .pgp-faq__grid{ grid-template-columns:minmax(0,1fr); gap:2rem; } .pgp-faq__fig{ position:static; order:3; } .pgp-faq__lead .pgp-h2{ max-width:none; } .pgp-net{ display:flex; flex-direction:column; gap:1.4rem; } .pgp-map{ order:-1; } .pgp-sites{ width:100%; } } @media (max-width:900px),(max-aspect-ratio:1/1){ /* the stacked photo sections: the whole photograph first, the copy on navy under it */ .pgp-story,.pgp-through{ min-height:0; } body.pg-patients .pgp-story__copy[data-ink],body.pg-patients .pgp-through__copy[data-ink]{ --ink-c:#F4F7FB; --ink-sh:none; --ink-fd:none; } .pgp-story__copy,.pgp-through__copy{ max-width:none; width:100%; margin-left:0; } .pgp-quote{ margin-right:0; } .pgp-story__body{ max-width:none; } body.pg-patients .pgp-quote::before{ color:var(--pg-coral); } body.pg-patients .pgp-story__body b{ color:#fff; } body.pg-patients #throughline .pgp-through__copy em.k4-grad{ background-image:var(--k4-grad-text-photo,linear-gradient(100deg,#E23A46 0%,#FF6B75 55%,#FF8F6B 80%,#E23A46 100%)) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; color:var(--pg-coral) !important; } body.pg-patients .pgp-through .pgp-through__copy .k4-btn--text{ color:var(--pg-coral) !important; } body.pg-patients .pgp-story__copy em.k4-grad{ background-image:var(--k4-grad-text-photo,linear-gradient(100deg,#E23A46 0%,#FF6B75 55%,#FF8F6B 80%,#E23A46 100%)) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; color:var(--pg-coral) !important; } .pgp-through__copy .k4-btn:focus-visible,.pgp-through__copy a:focus-visible{ outline-color:var(--pg-coral); } } @media (max-width:760px){ .pgp-take{ grid-template-columns:minmax(0,1fr); } } @media (max-width:700px){ .pgp-vid--feat .pgp-play{ right:.9rem; bottom:.9rem; } .pgp-vid--feat .pgp-vid__body{ grid-template-columns:minmax(0,1fr); } .pgp-vid__d,.pgp-vid--feat .pgp-vid__d{ grid-column:1; grid-row:auto; } .pgp-vrow{ grid-template-columns:minmax(0,1fr); } .pgp-qa__in p{ padding-left:1.25rem; } .pgp-qa__btn{ gap:.7rem; padding-inline:1rem; } .pgp-map__st{ font-size:.5rem; letter-spacing:.14em; } .pgp-pin{ width:2.4rem; height:2.4rem; pointer-events:none; } .pgp-pin:not(.is-on) .pgp-pin__lb{ display:none; } .pgp-map__d path{ stroke-width:.9px; } .pgp-map__stage{ margin-bottom:2.6rem; } .pgp-map__key{ top:calc(100% + .7rem); bottom:auto; flex-direction:row; gap:1.4rem; } .pgp-chart__yr[style*="28.57"],.pgp-chart__yr[style*="76.19"]{ display:none; } .pgp-chart__frame{ padding:0 3.6rem 0 2.4rem; } .pgp-chart__box{ aspect-ratio:3/2; } .pgp-take__p{ font-size:1.35rem; } .pgp-chart__yk{ left:-2.3rem; width:1.9rem; font-size:.82rem; } .pgp-chart__yr{ font-size:.82rem; } .pgp-chart__end{ left:calc(100% + .6rem); } .pgp-chart__end b{ font-size:1.5rem; } .pgp-prog__creed{ max-width:none; } .pgp-proof{ flex-direction:column; align-items:flex-start; } } @media (max-width:560px){ .pgp-pane__tools{ grid-template-columns:minmax(0,1fr); } } @media (prefers-reduced-motion:reduce){ .js .pgp-top .pgp-rh__l{ clip-path:none !important; transition:none !important; } .js .pgp-top .pgp-rhythm__cap{ opacity:1 !important; transition:none !important; } .js .pgp-chart .pgp-chart__svg{ clip-path:none !important; transition:none !important; } .js .pgp-chart .pgp-chart__svg--band,.js .pgp-chart .pgp-chart__end{ opacity:1 !important; transition:none !important; } .js .pgp-prog .pgp-map__s,.js .pgp-prog .pgp-map__d path,.js .pgp-prog .pgp-pin{ opacity:1 !important; transition:none !important; } .js .pgp-prog .pgp-pop{ opacity:1; animation:none; } .js .pgp-prog .pgp-pin__dot{ transform:none !important; transition:none !important; } .js .pgp-stat .pgp-stat__plus{ opacity:1 !important; transform:none !important; transition:none !important; } .js .pgp-voices .pgp-vq__mark{ opacity:1 !important; transition:none !important; } } @media (min-width:901px) and (max-height:700px){ .pgp-quote{ font-size:clamp(2.5rem,.9rem + 4.1vw,5rem); } .pgp-story__body{ font-size:1.05rem; } .pgp-stmt{ font-size:clamp(2.3rem,.8rem + 4.9vw,4.8rem); } .pgp-through__p{ font-size:1rem; margin-top:1rem; } .pgp-through__last{ font-size:clamp(1.3rem,.7rem + 1.8vw,1.9rem); } .pgp-through__cta{ margin-top:1rem; } .pgp-through > .pgp-through__in{ padding-top:6rem; } } /* T10-RHYTHM-SHINE:BEGIN */ /* the shine on the rhythm band: pg-patients.js clones each trace once (path.pgp-rh__s) and strokes the clone with the one moving gradient #pgRhS (white into pale pink). The clone sits on the line itself, a little under its width, so there is no halo and nothing at rest: between sweeps the gradient is fully transparent. Only shown once the script has armed it. */ .pgp-rh__l path.pgp-rh__s{ fill:none; stroke:url(#pgRhS); stroke-width:2.6px; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; visibility:hidden; } .pgp-rh__l--core path.pgp-rh__s{ stroke:url(#pgRhS); stroke-width:3.7px; } .pgp-rhythm.is-shine .pgp-rh__l path.pgp-rh__s{ visibility:visible; } @media (max-width:700px){ .pgp-rh__l path.pgp-rh__s{ stroke-width:1.9px; } .pgp-rh__l--core path.pgp-rh__s{ stroke-width:2.7px; } } @media (prefers-reduced-motion:reduce){ .pgp-rh__l path.pgp-rh__s{ display:none !important; } } /* T10-RHYTHM-SHINE:END */ /* T7-THROUGHLINE-ZOOM:BEGIN */ /* the plate is 16:10, so a wider screen gets a taller section instead of a tighter crop: his head stays about a third of the height */ @media (min-width:901px) and (min-aspect-ratio:101/100){ .pgp-through{ min-height:max(100svh,640px,62.5vw); } /* the first line of the copy always starts below the fixed nav */ .pgp-through > .pgp-through__in{ padding-top:max(clamp(5.2rem,10vh,8rem),6.4rem); } /* the small link sits on the tan wall (about 36 percent luminance): a deep crimson keeps it above 4.5 to 1 */ .pgp-through [data-ink="dark"] .k4-btn--text,.pgp-through .k4-btn--text[data-ink="dark"]{ color:#4E0B14 !important; } } /* big screens: the copy drops toward his eye line, still inside the first screen */ @media (min-width:1500px) and (min-aspect-ratio:101/100){ .pgp-through > .pgp-through__in{ padding-top:max(clamp(5.2rem,10vh,8rem),6.4rem,22svh); } } /* the heading never runs wider than the wall that is left of his shoulder (its width is about 7.3 times its size) */ @media (min-width:901px) and (min-aspect-ratio:101/100){ .pgp-through .pgp-stmt{ font-size:min(var(--pgp-h2),calc((100vw - 1.2 * var(--gutter) - .48 * max(100vw,160svh,1024px)) / 7.3)); } } @media (min-width:901px) and (min-aspect-ratio:101/100) and (max-height:700px){ .pgp-through .pgp-stmt{ font-size:min(clamp(2.3rem,.8rem + 4.9vw,4.8rem),calc((100vw - 1.2 * var(--gutter) - .48 * max(100vw,160svh,1024px)) / 7.3)); } } /* T7-THROUGHLINE-ZOOM:END */ /* PASS1-PAPER:BEGIN (100x pass 1, 2026-10-07: Dev, torn paper on every box and border; the map and its card become paper too) */ /* torn boxes need air: their white fibre rims never touch a neighbour's (a crowded rim reads as the "tweaking" Dev saw) */ body.pg-patients .pgp-tabs{ gap:clamp(.85rem,1.15vw,1.2rem); } body.pg-patients .pgp-sites{ gap:1rem; } body.pg-patients .pgp-qa{ gap:1.05rem; } body.pg-patients .pgp-press__list{ gap:1.5rem; } /* the map is cut paper: each state is one sheet of navy kit paper with the white fibre rim, laid on the navy ground with the kit's soft shadow (svg filter #pgPaperSh, in map units so it scales with the map). The state that holds the hospital in view lifts a little and its rim turns coral, the same answer a box gives on hover. No glow behind the paper, no shadow behind any label. */ body.pg-patients .pgp-map__stage::before{ content:none; } body.pg-patients .pgp-map__s{ fill:#17264D; stroke:#FDFDFB; stroke-width:2px; stroke-linejoin:round; vector-effect:non-scaling-stroke; filter:url(#pgPaperSh); transform-box:fill-box; transform-origin:50% 50%; transition:stroke .4s ease, fill .4s ease, transform .55s var(--pg-ease); } body.pg-patients .pgp-map__s.is-on{ stroke:#FF6B75; fill:#1B2A55; transform:translateY(-.9px); } body.pg-patients .pgp-map__d path{ stroke:rgb(244 247 251 / .26); } body.pg-patients .pgp-map__st{ text-shadow:none; color:rgb(244 247 251 / .7); } body.pg-patients .pgp-pin__lb{ text-shadow:none; } @media (prefers-reduced-motion:no-preference){ .js .pgp-prog:not(.is-in) .pgp-map__s{ transform:translateY(-4px) rotate(-.6deg); } .js .pgp-prog.is-in .pgp-map__s{ transition:opacity .7s ease calc(var(--i,0) * .18s + .1s), transform 1s var(--pg-ease) calc(var(--i,0) * .18s + .1s), stroke .4s ease, fill .4s ease; } } @media (prefers-reduced-motion:reduce){ body.pg-patients .pgp-map__s{ transition:none; } body.pg-patients .pgp-map__s.is-on{ transform:none; } } /* the hospital card is a slip of the same torn navy paper (it was a glass card): flat fill, white fibre rim, soft shadow; it swaps with a short fade as before. The paper is a static drawing made with the PAPERCUT engine's own tear (the engine keeps popups crisp). */ body.pg-patients .pgp-pop{ background:none; border:0; border-radius:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; border-image:url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='324' height='168' viewBox='0 0 324 168'%3E%3Cdefs%3E%3Cpattern id='g1' width='17' height='23' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='3' cy='4' r='.8' fill='%23fff' fill-opacity='.08'/%3E%3Ccircle cx='12' cy='16' r='.9' fill='%23000' fill-opacity='.16'/%3E%3C/pattern%3E%3Cpattern id='g2' width='29' height='31' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='9' cy='21' r='.7' fill='%23fff' fill-opacity='.06'/%3E%3Ccircle cx='22' cy='7' r='1' fill='%23000' fill-opacity='.12'/%3E%3C/pattern%3E%3Cfilter id='t' x='-20%25' y='-20%25' width='140%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='4'/%3E%3CfeOffset dy='6'/%3E%3C/filter%3E%3Cfilter id='u' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3C/filter%3E%3Cpath id='q0' d='M25 21L27 21L28 21L30 21L31 21L33 21L35 21L36 21L38 21L39 21L41 21L43 21L44 20L46 20L47 20L49 21L51 21L52 21L54 21L55 21L57 21L59 21L60 21L62 20L63 20L65 20L67 20L68 20L70 20L71 20L73 20L75 20L76 21L78 21L79 21L81 21L83 22L84 21L86 21L87 21L89 21L91 21L92 21L94 21L95 20L97 20L99 20L100 19L102 19L103 18L105 18L107 18L108 18L110 18L111 18L113 17L115 17L116 17L118 17L119 18L121 18L123 18L124 18L126 18L127 19L129 19L131 20L132 20L134 20L135 20L137 20L139 20L140 22L142 22L143 21L145 21L147 21L148 21L150 21L151 20L153 20L155 20L156 20L158 20L159 20L161 21L163 21L164 20L166 20L167 20L169 20L171 20L172 20L174 20L175 20L177 20L179 20L180 21L182 21L183 20L185 20L187 20L188 20L190 20L191 21L193 21L195 21L196 21L198 21L199 21L201 21L203 19L204 19L206 19L207 19L209 19L211 19L212 19L214 19L215 20L217 20L219 21L220 21L222 21L223 21L225 21L227 21L228 20L230 20L231 20L233 20L235 20L236 20L238 20L239 20L241 20L243 21L244 21L246 21L247 20L249 20L251 20L252 20L254 20L255 20L257 21L259 20L260 20L262 20L263 20L265 19L267 19L268 19L270 19L271 19L273 20L275 20L276 20L278 21L279 21L281 20L283 20L284 20L286 19L287 19L289 19L291 19L292 19L294 18L295 18L297 18L299 18L301 19L304 21L305 24L305 26L306 28L306 29L306 31L307 33L307 34L307 36L307 37L307 39L307 41L308 42L307 44L307 45L307 47L308 49L308 50L308 52L307 53L307 55L307 57L307 58L307 60L306 61L306 63L306 65L306 66L307 68L307 69L307 71L307 73L307 74L307 76L308 77L308 79L307 81L308 82L308 84L308 85L308 87L308 89L308 90L308 92L307 93L307 95L306 97L307 98L308 100L309 101L309 103L309 105L308 106L308 108L308 109L308 111L308 113L307 114L307 116L308 117L308 119L308 121L308 122L308 124L308 125L307 127L306 129L306 130L306 132L306 133L306 135L306 137L305 138L305 140L305 141L305 143L305 146L302 149L299 150L297 150L296 149L294 150L293 150L291 149L289 149L288 149L286 149L285 149L283 149L281 149L280 149L278 149L277 149L275 149L273 149L272 149L270 149L269 150L267 150L265 150L264 150L262 150L261 150L259 150L257 151L256 151L254 152L253 152L251 152L249 152L248 153L246 153L245 153L243 153L241 152L240 152L238 153L237 153L235 153L233 153L232 153L230 152L229 151L227 151L225 151L224 150L222 151L221 151L219 151L217 151L216 151L214 151L213 151L211 151L209 152L208 152L206 152L205 151L203 151L201 151L200 151L198 151L197 151L195 151L193 151L192 151L190 151L189 151L187 150L185 150L184 150L182 150L181 149L179 149L178 149L176 148L174 148L173 148L171 148L170 148L168 148L166 148L165 148L163 148L162 148L160 148L158 148L157 148L155 148L154 148L152 148L150 147L149 147L147 147L146 147L144 148L142 148L141 148L139 147L138 147L136 147L134 147L133 147L131 146L130 146L128 146L126 146L125 146L123 146L122 146L120 146L118 147L117 148L115 148L114 148L112 148L110 149L109 149L107 149L106 149L104 149L102 148L101 149L99 149L98 150L96 149L94 149L93 149L91 149L90 149L88 149L86 149L85 149L83 149L82 148L80 148L78 148L77 148L75 148L74 148L72 148L70 148L69 148L67 148L66 148L64 148L62 148L61 148L59 148L58 148L56 148L54 148L53 148L51 148L50 148L48 148L46 148L45 148L43 148L42 148L40 147L38 147L37 148L35 148L34 148L32 148L30 148L29 148L27 148L26 148L23 148L21 146L20 144L19 142L19 140L19 139L19 137L19 135L19 134L19 132L20 131L20 129L20 127L19 126L19 124L19 123L19 121L20 119L20 118L20 116L20 115L19 113L19 111L19 110L19 108L18 107L18 105L18 104L17 102L17 100L17 99L18 97L18 96L17 94L16 92L16 91L16 89L17 88L17 86L16 84L16 83L16 81L15 80L14 78L15 76L15 75L16 73L15 72L14 70L14 68L14 67L14 65L13 64L13 62L13 60L13 59L13 57L13 56L13 54L13 52L12 51L13 49L13 48L13 46L13 44L13 43L13 41L13 40L14 38L14 36L13 35L13 33L13 32L14 30L13 28L13 27L13 25L15 19L19 15Z'/%3E%3Cpath id='q1' d='M25 21L27 21L28 21L30 21L31 21L33 21L35 21L36 21L38 21L39 21L41 21L43 21L44 20L46 20L47 20L49 21L51 21L52 21L54 21L55 21L57 21L59 21L60 21L62 20L63 20L65 20L67 20L68 20L70 20L71 20L73 20L75 20L76 21L78 21L79 21L81 21L83 22L84 21L86 21L87 21L89 21L91 21L92 21L94 21L95 20L97 20L99 20L100 20L102 20L103 19L105 19L107 19L108 19L110 19L111 19L113 18L115 18L116 18L118 18L119 19L121 19L123 19L124 19L126 19L127 20L129 20L131 20L132 20L134 20L135 20L137 20L139 20L140 22L142 22L143 21L145 21L147 21L148 21L150 21L151 20L153 20L155 20L156 20L158 20L159 20L161 21L163 21L164 20L166 20L167 20L169 20L171 20L172 20L174 20L175 20L177 20L179 20L180 21L182 21L183 20L185 20L187 20L188 20L190 20L191 21L193 21L195 21L196 21L198 21L199 21L201 21L203 20L204 19L206 19L207 19L209 19L211 19L212 19L214 19L215 20L217 20L219 21L220 21L222 21L223 21L225 21L227 21L228 20L230 20L231 20L233 20L235 20L236 20L238 20L239 20L241 20L243 21L244 21L246 21L247 20L249 20L251 20L252 20L254 20L255 20L257 21L259 20L260 20L262 20L263 20L265 19L267 19L268 19L270 19L271 19L273 20L275 20L276 20L278 21L279 21L281 20L283 20L284 20L286 19L287 19L289 19L291 19L292 19L294 19L295 19L297 19L299 19L301 19L304 21L305 24L305 26L305 28L305 29L305 31L305 33L306 34L306 36L306 37L306 39L306 41L306 42L306 44L306 45L306 47L307 49L307 50L307 52L306 53L306 55L306 57L306 58L306 60L305 61L305 63L305 65L306 66L306 68L306 69L306 71L306 73L306 74L307 76L307 77L307 79L306 81L307 82L307 84L307 85L307 87L307 89L307 90L307 92L306 93L306 95L306 97L306 98L307 100L307 101L308 103L308 105L307 106L307 108L307 109L307 111L307 113L306 114L306 116L306 117L307 119L307 121L307 122L307 124L307 125L306 127L306 129L305 130L305 132L306 133L306 135L306 137L305 138L305 140L305 141L305 143L305 146L302 149L299 150L297 150L296 149L294 150L293 150L291 149L289 149L288 149L286 149L285 149L283 149L281 149L280 149L278 149L277 149L275 149L273 149L272 149L270 149L269 150L267 150L265 150L264 150L262 150L261 150L259 150L257 150L256 151L254 151L253 151L251 151L249 151L248 152L246 152L245 152L243 152L241 151L240 151L238 152L237 152L235 152L233 152L232 152L230 151L229 150L227 150L225 150L224 150L222 150L221 150L219 150L217 150L216 150L214 150L213 150L211 151L209 151L208 151L206 151L205 151L203 150L201 150L200 150L198 150L197 150L195 150L193 150L192 150L190 150L189 150L187 150L185 150L184 150L182 150L181 149L179 149L178 149L176 148L174 148L173 148L171 148L170 148L168 148L166 148L165 148L163 148L162 148L160 148L158 148L157 148L155 148L154 148L152 148L150 147L149 147L147 147L146 147L144 148L142 148L141 148L139 147L138 147L136 147L134 147L133 147L131 146L130 146L128 146L126 146L125 146L123 146L122 146L120 146L118 147L117 148L115 148L114 148L112 148L110 148L109 148L107 148L106 148L104 148L102 148L101 148L99 148L98 148L96 148L94 148L93 148L91 148L90 148L88 148L86 148L85 148L83 148L82 148L80 147L78 147L77 148L75 147L74 148L72 148L70 148L69 148L67 148L66 148L64 148L62 148L61 148L59 148L58 148L56 148L54 148L53 148L51 148L50 148L48 148L46 148L45 148L43 148L42 148L40 147L38 147L37 148L35 148L34 148L32 148L30 148L29 148L27 148L26 148L23 148L21 146L20 144L19 142L19 140L19 139L19 137L19 135L19 134L19 132L20 131L20 129L20 127L19 126L19 124L19 123L19 121L20 119L20 118L20 116L20 115L19 113L19 111L19 110L19 108L19 107L18 105L18 104L18 102L18 100L18 99L18 97L18 96L18 94L17 92L17 91L17 89L17 88L17 86L17 84L17 83L17 81L16 80L16 78L16 76L16 75L16 73L16 72L16 70L15 68L15 67L15 65L14 64L14 62L14 60L14 59L14 57L14 56L14 54L14 52L14 51L14 49L14 48L14 46L14 44L14 43L14 41L14 40L15 38L15 36L15 35L14 33L14 32L15 30L15 28L14 27L15 25L16 20L20 16Z'/%3E%3Cpath id='q2' d='M25 20L27 20L28 20L30 20L31 20L33 20L35 20L36 20L38 21L39 20L41 20L43 20L44 20L46 19L47 20L49 20L51 20L52 20L54 20L55 20L57 20L59 20L60 20L62 20L63 19L65 19L67 19L68 19L70 19L71 19L73 19L75 20L76 20L78 20L79 20L81 21L83 21L84 21L86 20L87 20L89 20L91 20L92 20L94 20L95 20L97 20L99 20L100 20L102 20L103 21L105 21L107 21L108 21L110 21L111 21L113 21L115 20L116 20L118 21L119 21L121 21L123 21L124 21L126 21L127 21L129 21L131 21L132 21L134 21L135 21L137 21L139 20L140 21L142 21L143 21L145 20L147 20L148 20L150 20L151 19L153 19L155 19L156 19L158 19L159 20L161 20L163 20L164 20L166 19L167 19L169 19L171 19L172 19L174 19L175 19L177 19L179 20L180 20L182 20L183 20L185 20L187 20L188 20L190 19L191 20L193 20L195 20L196 20L198 20L199 20L201 20L203 20L204 19L206 19L207 19L209 19L211 19L212 19L214 19L215 19L217 20L219 20L220 20L222 20L223 20L225 20L227 20L228 20L230 20L231 19L233 19L235 19L236 19L238 19L239 19L241 20L243 20L244 20L246 20L247 20L249 19L251 19L252 19L254 20L255 20L257 20L259 20L260 19L262 19L263 19L265 18L267 18L268 18L270 18L271 18L273 19L275 19L276 20L278 20L279 20L281 20L283 20L284 19L286 19L287 19L289 19L291 20L292 19L294 19L295 19L297 20L299 20L301 20L303 22L304 24L304 26L304 28L304 29L304 31L304 33L304 34L304 36L304 37L305 39L305 41L305 42L305 44L304 45L304 47L305 49L305 50L305 52L305 53L305 55L305 57L305 58L305 60L304 61L304 63L304 65L304 66L304 68L304 69L304 71L304 73L304 74L305 76L305 77L305 79L304 81L304 82L304 84L305 85L305 87L305 89L305 90L305 92L305 93L305 95L304 97L304 98L305 100L305 101L305 103L305 105L305 106L305 108L305 109L305 111L304 113L304 114L304 116L304 117L304 119L304 121L305 122L305 124L305 125L305 127L305 129L305 130L305 132L305 133L305 135L306 137L306 138L306 140L306 141L306 143L305 147L303 149L299 151L297 150L296 150L294 150L293 150L291 150L289 150L288 150L286 150L285 150L283 150L281 150L280 150L278 150L277 150L275 150L273 150L272 150L270 150L269 150L267 150L265 150L264 151L262 150L261 150L259 150L257 150L256 150L254 150L253 150L251 150L249 150L248 150L246 151L245 150L243 150L241 150L240 150L238 150L237 150L235 150L233 150L232 150L230 150L229 149L227 149L225 149L224 149L222 149L221 149L219 149L217 149L216 149L214 150L213 150L211 150L209 150L208 150L206 150L205 150L203 150L201 149L200 149L198 149L197 149L195 149L193 149L192 149L190 149L189 149L187 149L185 149L184 150L182 150L181 150L179 150L178 149L176 149L174 149L173 149L171 149L170 149L168 149L166 149L165 149L163 149L162 149L160 149L158 149L157 149L155 149L154 149L152 149L150 148L149 148L147 148L146 148L144 148L142 149L141 148L139 148L138 148L136 148L134 148L133 147L131 147L130 147L128 147L126 147L125 147L123 147L122 147L120 147L118 147L117 147L115 147L114 147L112 147L110 147L109 148L107 147L106 147L104 147L102 147L101 147L99 147L98 147L96 147L94 147L93 147L91 147L90 146L88 147L86 147L85 147L83 147L82 147L80 147L78 147L77 147L75 147L74 147L72 147L70 147L69 148L67 148L66 147L64 147L62 148L61 148L59 147L58 147L56 148L54 148L53 148L51 148L50 148L48 148L46 148L45 148L43 148L42 148L40 148L38 148L37 148L35 149L34 149L32 149L30 149L29 149L27 149L26 149L23 149L20 147L19 144L19 142L18 140L18 139L18 137L19 135L19 134L19 132L19 131L19 129L19 127L19 126L18 124L18 123L19 121L19 119L19 118L20 116L20 115L19 113L20 111L20 110L19 108L19 107L19 105L19 104L19 102L19 100L19 99L18 97L18 96L18 94L18 92L18 91L18 89L18 88L18 86L18 84L18 83L18 81L18 80L17 78L17 76L18 75L18 73L18 72L18 70L18 68L18 67L18 65L18 64L18 62L18 60L17 59L17 57L17 56L17 54L17 52L18 51L18 49L18 48L18 46L18 44L18 43L18 41L19 40L19 38L19 36L18 35L18 33L18 32L18 30L18 28L18 27L18 25L19 22L22 19Z'/%3E%3C/defs%3E%3Cuse href='%23q0' fill='%2302060F' opacity='.55' filter='url(%23t)'/%3E%3Cuse href='%23q0' fill='%2302060F' opacity='.42' filter='url(%23u)'/%3E%3Cuse href='%23q0' fill='%23FDFDFB' opacity='.5'/%3E%3Cuse href='%23q1' fill='%23FDFDFB'/%3E%3Cuse href='%23q2' fill='%23142349'/%3E%3Cuse href='%23q2' fill='url(%23g1)'/%3E%3Cuse href='%23q2' fill='url(%23g2)'/%3E%3C/svg%3E") 0 fill / 0 / 22px stretch; padding:1.15rem 1.35rem 1.25rem; } /* the two quote marks over the patient voices are cut from crimson paper (the Newsreader glyph's own outline as a shape): the kit's white fibre rim and a soft paper shadow, laid at a small angle; on arrival each one is set down on the page */ body.pg-patients .pgp-vq__mark{ font-size:clamp(2.15rem,1rem + 4vw,5rem); line-height:1; } body.pg-patients .pgp-qm{ display:block; width:.68em; height:auto; margin-top:.1em; overflow:visible; filter:drop-shadow(0 .03em .035em rgb(22 38 76 / .32)); } body.pg-patients .pgp-qm path{ fill:url(#pgQmG); stroke:#FDFDFB; stroke-width:3.5px; stroke-linejoin:round; vector-effect:non-scaling-stroke; paint-order:stroke; } body.pg-patients .pgp-vq__mark{ transform:translateX(-.86em) rotate(-4deg); } @media (prefers-reduced-motion:no-preference){ .js body.pg-patients .pgp-voices:not(.is-in) .pgp-vq__mark{ opacity:0; transform:translateX(-.86em) translateY(-.35em) rotate(-16deg) scale(1.2); } .js body.pg-patients .pgp-voices.is-in .pgp-vq__mark{ opacity:1; transform:translateX(-.86em) rotate(-4deg); transition:opacity .5s ease .2s, transform .95s cubic-bezier(.2,1.25,.35,1) .2s; } .js body.pg-patients .pgp-voices.is-in .pgp-vq--b .pgp-vq__mark{ transition-delay:.35s; } } /* narrower desktops and tablets: a smaller mark that always clears the left edge of the window */ @media (min-width:761px) and (max-width:1100px){ body.pg-patients .pgp-qm{ width:.52em; } body.pg-patients .pgp-vq__mark{ transform:translateX(-.68em) rotate(-4deg); } @media (prefers-reduced-motion:no-preference){ .js body.pg-patients .pgp-voices:not(.is-in) .pgp-vq__mark{ transform:translateX(-.68em) translateY(-.35em) rotate(-16deg) scale(1.2); } .js body.pg-patients .pgp-voices.is-in .pgp-vq__mark{ transform:translateX(-.68em) rotate(-4deg); } } } @media (max-width:760px){ body.pg-patients .pgp-vq__mark{ font-size:3.6rem; height:auto; line-height:1; margin-bottom:.35rem; transform:rotate(-4deg); transform-origin:30% 60%; } body.pg-patients .pgp-qm{ width:.62em; margin-top:0; } .js body.pg-patients .pgp-voices:not(.is-in) .pgp-vq__mark{ transform:translateY(-.3em) rotate(-16deg) scale(1.2); } .js body.pg-patients .pgp-voices.is-in .pgp-vq__mark{ transform:rotate(-4deg); } } /* the six plates sit on one sheet of lighter navy kit paper (the tabs above are its index tabs); the engine tears it like every box */ body.pg-patients .pgp-stage{ background:var(--pgp-paper); padding:clamp(1.6rem,3.4vw,3.2rem) clamp(1.4rem,4.2vw,4.4rem); } /* one navy paper for every box on this page (the kit's navy sheet, a little bluer than the ground), so tabs, rows, the chart, the plate sheet and the map card read as cut from the same stock */ body.pg-patients{ --pgp-paper:#142349; } body.pg-patients :is(.pgp-tab,.pgp-prow,.pgp-site,.pgp-chart){ background:var(--pgp-paper); } /* PASS1-PAPER:END */ /* PASS2-PAPER:BEGIN (100x pass 2, 2026-10-07) */ /* the transformation quote opens with the same crimson paper mark as the patient voices (it was a text glyph) */ body.pg-patients .pgp-quote::before,body.pg-patients .pgp-quote[data-ink]::before,body.pg-patients [data-ink] .pgp-quote::before{ content:''; display:inline-block; width:.4275em; height:.328em; margin-right:.027em; vertical-align:.385em; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='27 -50 855 656'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23E8414D'/%3E%3Cstop offset='1' stop-color='%23B0222F'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath transform='matrix(1 0 0 -1 0 1371)' d='M423 1292Q324 1248 290 1206Q255 1164 255 1122Q255 1091 278 1069Q300 1047 329 1030Q358 1014 380 1000Q403 985 403 968Q403 904 360 860Q317 815 244 815Q169 815 123 862Q77 910 77 994Q77 1077 106 1143Q135 1209 202 1265Q270 1321 385 1371ZM832 1292Q733 1248 698 1206Q664 1164 664 1122Q664 1091 686 1069Q709 1047 738 1030Q767 1014 790 1000Q812 985 812 968Q812 904 769 860Q726 815 653 815Q578 815 532 862Q486 910 486 994Q486 1077 515 1143Q544 1209 612 1265Q679 1321 794 1371Z' fill='url(%23g)' stroke='%23FDFDFB' stroke-width='3.5' stroke-linejoin='round' vector-effect='non-scaling-stroke' paint-order='stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; transform:rotate(-4deg); transform-origin:60% 60%; filter:drop-shadow(0 .025em .03em rgb(22 38 76 / .3)); } /* the tabs sit right over the plate sheet, as its index tabs */ body.pg-patients .pgp-stage{ margin-top:clamp(1.2rem,1.8vw,1.8rem); } /* the state sheets keep a fine cut edge (a heavy white outline reads as drawn, not cut): the lighter paper and its shadow carry it */ body.pg-patients .pgp-map__s{ stroke:rgb(253 253 251 / .7); stroke-width:1.2px; } body.pg-patients .pgp-map__s.is-on{ stroke:#FF6B75; stroke-width:2px; } /* PASS2-PAPER:END */