/* ============================================================
pg-amc.css - about.html, media.html, contact.html only
Page-builder stylesheet for the redesign-2026-09 branch (pb-about-
media-contact). Loaded right after fable.css, on these three pages
only. Every rule below is scoped with a body.pg-* prefix because
this one file is shared across all three pages and several of
their section ids repeat (#top on all three, #contact on both
contact.html and index.html), so a bare id selector here would
leak across pages. Never touches a shared class's base definition
in fable.css; only adds page-scoped overrides on top of it.
============================================================ */
/* ABOUT:begin */
/* ============================================================
ABOUT (round 9). Every rule in this block is scoped to body.pg-about,
because pg-amc.css is shared with media.html and contact.html (their
own rules sit below this block, untouched).
Sections, in page order:
I #top one full viewport photo, copy placed on the cabinet and desk
II #path papercut band on one sheet of paper, four chapters under it
III #roles two photographs side by side, edge to edge
IV #building the cath lab as a full page photo, three phrases that light in turn
V #leadership roster left, one portrait pinned to the right edge
VI #close one statement on light paper
No scrim, fade, mask, vignette, tint, blur chip or grain over any photo.
Text sits directly on the picture; the ink runtime in fable.js chooses
navy or white per text block from the real pixels. Boxes that are not
links carry data-box="off" in the markup and have no hover at all.
Reuses kit4.css (.k4-grad M1, .k4-btn M2). Zero em or en dashes.
============================================================ */
body.pg-about{
--ab-ink:#F4F7FB;
--ab-soft:rgb(244 247 251 / .82);
--ab-faint:rgb(244 247 251 / .62);
--ab-coral:#FF6B75;
--ab-crimson:#E23A46;
--ab-deep:#9C1B27;
--ab-navy:var(--navy-ground,#0C1833);
--ab-paper:#F0E3CC;
--ab-ease:var(--ease-snap,cubic-bezier(.16,1,.3,1));
/* HEADING SCALE (S3): one fluid scale for the page. Hero h1 about 86px at 1200 and 44px at 390, section h2 about 72px
at 1200 and 38px at 390, card and role titles about 31px at 1200. Copy that sits on a photo (hero, mission band,
the two role panels) is also limited by the calm area of that photo, so a heading never reaches his face. */
--ab-h1:clamp(2.75rem,calc(5.2vw + 1.5rem),7.25rem);
--ab-h2:clamp(2.375rem,calc(4.2vw + 1.35rem),5.75rem);
--ab-h3:clamp(1.35rem,2.6vw,2.25rem);
}
/* ---------- grounds and the section heading ---------- */
body.pg-about :is(.ab-roles,.ab-build,.ab-lead){background:var(--ab-navy);color:var(--ab-ink);}
/* the close is the page's one light paper (Dev 2026-10-07: alternate light and dark so the torn edges read calm) */
body.pg-about .ab-close{background:#F4F7FB;color:#0B1B33;}
body.pg-about .ab-hero{background-color:var(--ab-navy);color:var(--ab-ink);}
body.pg-about .ab-path{background:var(--ab-paper);color:var(--ink,#0B1B33);}
body.pg-about .ab-h2{
font-family:var(--display);font-weight:800;color:var(--ab-ink);
font-size:var(--ab-h2);line-height:1.02;letter-spacing:-.03em;
margin:0;max-width:15ch;text-wrap:balance;
}
body.pg-about .ab-h2--ink{color:var(--ink,#0B1B33);}
/* the phone and portrait layout everywhere on this page */
/* ============================================================
I. HERO. One photo fills the whole viewport. The headline, the deck and
the button are one block on the left, centred vertically, over the dark
cabinet and the shaded wall and monitor under it. The runtime
(data-photo-region) keeps the block on that column at every width.
============================================================ */
body.pg-about .ab-hero{--photo-pos:22% 0%;--photo-pos-m:50% 0;--drift-origin:12% 30%;}
body.pg-about .ab-hero .phero__bg img{transform-origin:12% 30%;}
body.pg-about .ab-hero__in{
position:absolute;inset:0;max-width:none;margin:0;padding:0;pointer-events:none;
}
/* ONE block holds the headline, the deck and the button (Dev T12: "centre the heading and the text below on the left side").
Desktop and landscape: it is the left column of the photo (data-photo-region "0 0 0.345 1": from the window edge to just past
the dark cabinet, clamped by the runtime to what is visible under the nav), the copy starts at the page gutter (the nav brand's
left edge) and the whole block is centred vertically. The headline is sized from that column, so it never reaches his face and
never leaves the window. The values on the block are the same cover maths, used until the runtime writes its own and when JS is off. */
body.pg-about .ab-hero__copy{pointer-events:auto;--pr-w:34.5vw;--pr-h:calc(100svh - 92px);--ab-h1-pad:var(--gutter);}
@media (min-width:901px) and (orientation:landscape){
body.pg-about .ab-hero__copy{
position:absolute;z-index:3;box-sizing:border-box;margin:0;max-width:none;
left:var(--pr-x,0px);top:var(--pr-y,92px);width:var(--pr-w);height:var(--pr-h);
padding:0 0 0 var(--gutter);
display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;
}
/* under the cabinet the dark ground is the shaded wall and the monitor, which end at about 25 percent of the frame (the
column is 34.5 percent): the deck stays inside them, so it is a narrower step under the headline */
body.pg-about .ab-hero__foot{margin-top:clamp(1.1rem,2.1vw,1.9rem);max-width:calc(var(--pr-w) * .72 - var(--gutter));}
body.pg-about .ab-deck{font-size:clamp(1rem,1.3vw,1.25rem);max-width:none;}
}
body.pg-about .ab-h1{
font-family:var(--display);font-weight:800;color:var(--ab-ink);
font-size:clamp(2.75rem,min(calc((var(--pr-w) - var(--ab-h1-pad)) / 5.8),calc((var(--pr-h) - 19rem) / 2.94)),7.25rem);line-height:.98;letter-spacing:-.04em;margin:0;
}
body.pg-about .ab-ln{display:block;white-space:nowrap;}
body.pg-about .ab-ln > span{display:block;}
body.pg-about .ab-deck{
font-weight:500;font-size:clamp(1.05rem,1.45vw,1.35rem);line-height:1.5;
max-width:28ch;margin:0;text-wrap:balance;
}
body.pg-about .ab-hero__cta{margin-top:clamp(1.3rem,2.4vw,1.9rem);}
/* the deck crosses pale wall, a monitor edge or a forearm depending on the crop: the stronger soft shadow (no box, no band) */
body.pg-about .ab-deck[data-ink="light"]{--ink-sh:var(--pi-sh-light-busy);}
/* masked line rise, js only; the finished state is the default */
html.js body.pg-about .ab-ln{overflow:hidden;padding-bottom:.22em;margin-bottom:-.22em;}
html.js body.pg-about .ab-ln > span{transform:translateY(112%);transition:transform 1.15s var(--ab-ease) calc(.1s + var(--l,0) * .11s);}
html.js body.pg-about .ab-hero.is-in .ab-ln > span{transform:none;}
/* the button's down arrow answers hover and focus by moving down, not sideways */
@media (hover:hover) and (pointer:fine){
body.pg-about .ab-hero__cta .k4-btn:hover .arr{transform:translateY(4px);}
}
body.pg-about .ab-hero__cta .k4-btn:focus-visible .arr{transform:translateY(4px);}
/* a quiet cue after the lines have risen: the arrow dips and returns, only while the hero is on screen */
@media (prefers-reduced-motion:no-preference){
body.pg-about .ab-hero .phero__bg.is-live ~ .ab-hero__in .ab-hero__cta .arr{animation:abCue 2.6s ease-in-out 2.4s infinite;}
}
@keyframes abCue{0%,52%,100%{translate:0 0;}26%{translate:0 4px;}}
/* ============================================================
II. THE PATH. The papercut band runs edge to edge on its own sheet of
paper; the headline sits on the paper sky; four gold beads on the wave
are the four chapters. The chapter itself is a flat navy band under it.
============================================================ */
body.pg-about .ab-path{padding:0;scroll-margin-top:90px;}
/* the shared navy bloom layer is not used on this page: every ground here is flat navy or a photo */
body.pg-about .mkx-navy-bg{display:none !important;}
body.pg-about .pa{position:relative;}
body.pg-about .pa-stage{
position:relative;container-type:inline-size;
width:min(100%,calc(88svh * 2.5171));margin-inline:auto;
padding-top:calc(min(100vw,88svh * 2.5171) * .065);
}
body.pg-about .pa-strip{position:relative;margin:0;overflow:clip;}
body.pg-about .pa-strip > img{display:block;width:100%;height:auto;aspect-ratio:3200 / 1271;}
/* the paper above the strip is the same sheet; the top few percent of this illustration is empty sky, so it feathers into
the page paper and no seam shows (an illustration, not a photo) */
body.pg-about .pa-strip > img{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 5%);mask-image:linear-gradient(to bottom,transparent,#000 5%);}
/* and the bottom few percent (empty paper under the chapter names) feathers into the sheet too, so the band has no straight seam */
body.pg-about .pa-strip > img{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 5%,#000 93%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 5%,#000 93%,transparent);}
body.pg-about .pa-head{position:absolute;z-index:5;left:24cqw;top:2.6cqw;width:74cqw;}
body.pg-about .ab-path .ab-h2{
font-size:clamp(2.375rem,min(calc(4.2cqw + 1.35rem),6cqw),5.75rem);max-width:26ch;line-height:1.02;
}
body.pg-about .ab-hint{
margin:.6em 0 0;font:500 clamp(1rem,1.25cqw,1.35rem)/1.4 var(--body);color:rgb(12 24 51 / .72);
}
body.pg-about .pa-zone{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);z-index:1;cursor:pointer;}
body.pg-about .pa-pins{position:absolute;inset:0;z-index:3;pointer-events:none;}
body.pg-about .pa:not(.pa-js) .pa-zone{cursor:default;}
/* a pin is a 44px transparent button on a gold bead; nothing shows at rest */
body.pg-about .pa-pin{
position:absolute;left:calc(var(--px) * 1%);top:calc(var(--py) * 1%);translate:-50% -50%;z-index:3;
width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;border-radius:50%;
pointer-events:auto;-webkit-tap-highlight-color:transparent;font:inherit;color:inherit;
}
body.pg-about .pa:not(.pa-js) .pa-pin{pointer-events:none;cursor:default;}
body.pg-about .pa-pin:focus{outline:none;}
/* the ring: border only */
body.pg-about .pa-pin::after{
content:'';position:absolute;left:50%;top:50%;translate:-50% -50%;
width:clamp(24px,2.6cqw,48px);aspect-ratio:1;border-radius:50%;
border:2px solid var(--ab-crimson);opacity:0;scale:.7;transition:opacity .22s ease,scale .4s var(--ab-ease);pointer-events:none;
}
body.pg-about .pa-pin:focus-visible::after,
body.pg-about .pa-pin.is-hot::after{opacity:1;scale:1;}
@media (hover:hover) and (pointer:fine){
body.pg-about .pa-pin:hover::after{opacity:1;scale:1;}
}
/* the one ring that marks the open chapter; it slides from bead to bead */
body.pg-about .pa-ring{
position:absolute;left:0;top:0;z-index:2;pointer-events:none;
width:clamp(24px,2.6cqw,48px);aspect-ratio:1;border-radius:50%;
border:2px solid var(--ab-crimson);
--rx:14.71;--ry:72.76;
translate:calc(var(--rx) * 1cqw - 50%) calc(var(--ry) * .3973cqw - 50%);
display:none;
}
body.pg-about .pa-js .pa-ring{display:block;transition:translate .65s var(--ab-ease);}
/* the open chapter's glow (R8 .pa-pin::before, restored): a soft crimson bloom behind the open building that travels with the ring */
body.pg-about .pa-ring::before{
content:'';position:absolute;left:50%;top:50%;width:clamp(170px,25cqw,340px);aspect-ratio:1;
translate:-50% calc(-50% - 7cqw);border-radius:50%;pointer-events:none;
background:radial-gradient(circle,rgb(226 58 70 / .32),rgb(226 58 70 / .1) 40%,transparent 66%);
}
body.pg-about .pa[data-active="2"] .pa-ring{--rx:38.95;--ry:73;}
body.pg-about .pa[data-active="3"] .pa-ring{--rx:62.28;--ry:73.25;}
body.pg-about .pa[data-active="4"] .pa-ring{--rx:84.83;--ry:73.41;}
/* chapter names: plain text on the empty paper under each bead */
body.pg-about .pa-pin__t{
position:absolute;left:50%;top:calc(50% + 4.2vw);top:calc(50% + 4.6cqw);translate:-50% 0;
width:max-content;max-width:17cqw;text-align:center;
font:600 clamp(.95rem,1.15vw,1.1rem)/1.2 var(--body);color:var(--ink,#0B1B33);
text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.2em;
transition:text-decoration-color .22s ease,translate .4s var(--ab-ease);
}
body.pg-about .pa-pin[aria-pressed="true"] .pa-pin__t{color:var(--ab-deep);translate:-50% -3px;}
body.pg-about .pa-pin:focus-visible .pa-pin__t,
body.pg-about .pa-pin.is-hot .pa-pin__t{text-decoration-color:currentColor;translate:-50% -3px;}
@media (hover:hover) and (pointer:fine){
body.pg-about .pa-pin:hover .pa-pin__t{text-decoration-color:currentColor;translate:-50% -3px;}
}
/* the paper art unrolls from the left on arrival, then the four beads light in order */
@media (prefers-reduced-motion:no-preference){
html.js body.pg-about .pa-strip::after{
content:'';position:absolute;inset:0;z-index:4;pointer-events:none;background:var(--ab-paper);
transform-origin:100% 50%;transform:scaleX(1);
}
html.js body.pg-about .ab-path.is-in .pa-strip::after{transform:scaleX(0);transition:transform 1.4s cubic-bezier(.16,1,.3,1);}
html.js body.pg-about .ab-path.is-in .pa-pin::after{animation:abBead .9s var(--ab-ease) backwards;animation-delay:calc(.5s + var(--k,0) * .3s);}
}
body.pg-about .pa-pin:nth-child(1){--k:0;}
body.pg-about .pa-pin:nth-child(2){--k:1;}
body.pg-about .pa-pin:nth-child(3){--k:2;}
body.pg-about .pa-pin:nth-child(4){--k:3;}
@keyframes abBead{0%{opacity:0;scale:.55;}35%{opacity:1;scale:1;}100%{opacity:0;scale:1;}}
/* the chapter card: one sheet of navy paper laid on the cream sheet under the band (Dev: torn paper on every box). The papercut
runtime in fable.js tears it (data-paper="on") and tears its photo just inside the paper; it stays under 90 percent of the
window so the runtime treats it as a box, not a band. The cards swap inside it, so the paper never changes. */
body.pg-about .ab-path{padding-bottom:clamp(2.6rem,4.6vw,4.2rem);}
body.pg-about .pa-panel{
position:relative;z-index:4;display:grid;background:var(--ab-navy);color:var(--ab-ink);
width:min(calc(100% - 2 * var(--gutter)),88vw);margin:clamp(1.4rem,2.6vw,2.6rem) auto 0;
}
body.pg-about .pa-card{
grid-area:1 / 1;display:grid;grid-template-columns:min(46%,680px) minmax(0,1fr);gap:0;align-items:center;
background:transparent;
}
body.pg-about .pa-card__fig{margin:0;aspect-ratio:3 / 2;width:100%;overflow:hidden;background:transparent;}
body.pg-about .pa-card__fig img{display:block;width:100%;height:100%;object-fit:cover;}
body.pg-about .pa-card__txt{padding:clamp(1.8rem,3vw,3rem) clamp(2rem,5vw,5rem);}
body.pg-about .pa-card__n{
display:block;font-family:var(--display);font-weight:800;font-size:2.3rem;letter-spacing:-.03em;line-height:.9;
color:var(--ab-coral);
}
body.pg-about .pa-card__t{
font-family:var(--display);font-weight:800;color:var(--ab-ink);
font-size:clamp(1.7rem,3.3vw,3rem);line-height:1.04;letter-spacing:-.03em;margin:.8rem 0 .9rem;text-wrap:balance;
}
body.pg-about .pa-card__p{font-size:clamp(1.05rem,1.4vw,1.26rem);line-height:1.5;color:var(--ab-soft);max-width:38ch;margin:0 0 1.2rem;}
body.pg-about .pa-next{color:var(--ab-coral);}
/* the cards stack in one grid cell only when js drives them; without js
all four read as a plain list under the band */
body.pg-about .pa:not(.pa-js) .pa-panel{display:block;}
body.pg-about .pa:not(.pa-js) .pa-card{grid-area:auto;}
body.pg-about .pa:not(.pa-js) .pa-next{display:none;}
body.pg-about .pa-js .pa-card{
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .5s ease,visibility 0s linear .5s;
}
body.pg-about .pa-js .pa-card.is-active{
opacity:1;visibility:visible;pointer-events:auto;
transition:opacity .5s ease,visibility 0s;
}
body.pg-about .pa-js .pa-card__fig img{transform:scale(1.09);transition:transform 1.3s var(--ab-ease);}
body.pg-about .pa-js .pa-card.is-active .pa-card__fig img{transform:none;}
@media (hover:hover) and (pointer:fine){
body.pg-about .pa-js .pa-card.is-active:hover .pa-card__fig img{transform:scale(1.045);}
}
body.pg-about .pa-js .pa-card__txt{translate:0 16px;transition:translate .75s var(--ab-ease) .1s;}
body.pg-about .pa-js .pa-card.is-active .pa-card__txt{translate:0 0;}
/* ============================================================
III. THE ROLES. Two photographs meet on a hard seam and run edge to
edge. Nothing is laid over them: the copy sits on calm parts of each
frame and the runtime picks its ink.
============================================================ */
body.pg-about .ab-roles{padding:0;}
body.pg-about .ro-pair{display:grid;grid-template-columns:minmax(0,62fr) minmax(0,38fr);gap:0;margin:0;}
/* the role titles are one line each and as large as his face allows: --ab-xc is where his cap starts in the clinician
panel (the photo is cover cropped, so it follows the panel width or height, whichever limits it), minus the title's
left margin and a clear gap; 5.3em is the width of "The Clinician" */
body.pg-about .ro-pair{
--ab-wp:62vw;--ab-ph:clamp(620px,100svh,1000px);
--ab-xc:calc(max(.115 * var(--ab-wp),.1437 * var(--ab-ph)) + .38 * var(--ab-wp));
--ab-ro-t:clamp(2.375rem,min(var(--ab-h2),calc((var(--ab-xc) - clamp(1.5rem,3vw,3rem) - 1.25rem) / 5.3)),5.75rem);
}
body.pg-about .ro-panel{
position:relative;isolation:isolate;overflow:hidden;margin:0;
min-height:clamp(620px,100svh,1000px);
display:flex;flex-direction:column;justify-content:flex-end;
background:transparent;border:0;border-radius:0;box-shadow:none;
}
body.pg-about .ro-panel > picture{display:contents;}
body.pg-about .ro-panel > picture > img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;
}
body.pg-about .ro-panel--clin > picture > img{object-position:38% 50%;}
body.pg-about .ro-panel--edu > picture > img{object-position:50% 35%;}
body.pg-about .ro-body{padding:clamp(1.3rem,2.6vw,2.4rem);}
body.pg-about .ro-panel--clin .ro-body{
position:absolute;top:clamp(4.5rem,8vw,7rem);left:clamp(1.5rem,3vw,3rem);
max-width:none;padding:0;
}
body.pg-about .ro-title{
font-family:var(--display);font-weight:800;color:var(--ab-ink);
font-size:var(--ab-ro-t);line-height:1;letter-spacing:-.035em;margin:0 0 clamp(.9rem,1.6vw,1.3rem);white-space:nowrap;
padding-right:.1em;
}
body.pg-about .ro-list{list-style:none;margin:0;padding:0;display:grid;gap:0;}
body.pg-about .ro-list li{
font-weight:600;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.25;padding-block:.35rem;color:var(--ab-ink);
}
body.pg-about .ro-line{display:grid;gap:.2rem;margin:0;color:var(--ab-soft);font-size:clamp(1rem,1.3vw,1.2rem);line-height:1.4;max-width:34ch;}
body.pg-about .ro-line > span{display:block;}
body.pg-about .ro-line__n{
font-family:var(--display);font-weight:800;color:var(--ab-ink);
font-size:clamp(2.4rem,4.7vw,4.6rem);line-height:1;letter-spacing:-.04em;padding:.04em 0 .1em;white-space:nowrap;
}
/* no JS: the page's own ink on each frame (the runtime replaces this per block) */
html:not(.photo-ink) body.pg-about .ro-panel--clin .ro-body :is(.ro-title,li){color:#0C1833;}
/* hover (R8, restored): what is INSIDE the panel moves, the panel does not. The photo eases in 5 percent
(the individual scale property, because the shared photo drift animates transform); a specialty row slides 5px */
body.pg-about .ro-list li{transition:transform .45s var(--ab-ease);}
@media (hover:hover) and (pointer:fine){
body.pg-about .ro-panel:hover > picture > img{scale:1.05;}
body.pg-about .ro-list li:hover{transform:translateX(5px);}
}
/* ABOUT PASS1 SEAM:begin (Dev: "LITERALLY EVERYWHERE there are the boxes or borders ... it has to have the paper cut or torn paper
thing"). Side by side, the seam between the two role photographs is torn: the educator print is torn along its left side (a calm
seeded tear, the same smooth noise as the section edges) and laid over the clinician print, which runs on 40px under it; the kit's
white fibre rim and a soft shadow (.ro-tear) fall on the clinician. The tear is a clip-path (fable.css keeps masks off ground
photos), so the photo zoom on hover happens inside the torn print and the edge never moves. Stacked (900px and below) the two
prints are parted by the navy sheet and the section edges tear them instead. */
body.pg-about .ro-tear{display:none;}
@media (min-width:901px){
body.pg-about .ro-panel--clin{margin-right:-40px;}
body.pg-about .ro-panel--edu > picture{
display:block;position:absolute;inset:0;z-index:-1;
clip-path:polygon(17.4px 0%, 17.7px 0.3%, 17.3px 0.6%, 17.2px 0.9%, 17.1px 1.2%, 17.2px 1.5%, 17.2px 1.8%, 17.1px 2.1%, 17px 2.4%, 17px 2.7%, 17.2px 3%, 17.5px 3.3%, 17.1px 3.6%, 17.5px 3.9%, 17.3px 4.2%, 17.2px 4.5%, 17.1px 4.8%, 17px 5.1%, 17.4px 5.4%, 17.3px 5.7%, 16.9px 6%, 17.2px 6.3%, 17.7px 6.6%, 17.8px 6.9%, 17.5px 7.2%, 17.5px 7.5%, 17.9px 7.8%, 17.9px 8.1%, 17.7px 8.4%, 17.9px 8.7%, 17.8px 9%, 17.9px 9.3%, 17.9px 9.6%, 17.9px 9.9%, 18px 10.2%, 18.3px 10.5%, 18.1px 10.8%, 18.1px 11.1%, 17.9px 11.4%, 17.7px 11.7%, 17.8px 12%, 17.8px 12.3%, 17.9px 12.6%, 18.2px 12.9%, 18.4px 13.2%, 18.3px 13.5%, 18.2px 13.8%, 18.2px 14.1%, 18.1px 14.4%, 17.9px 14.7%, 17.7px 15%, 17.5px 15.3%, 17.2px 15.6%, 16.6px 15.9%, 15.8px 16.2%, 15.8px 16.5%, 15.6px 16.8%, 15.6px 17.1%, 15.5px 17.4%, 15px 17.7%, 15.4px 18%, 15px 18.3%, 15.5px 18.6%, 15.8px 18.9%, 15.9px 19.2%, 15.8px 19.5%, 16px 19.8%, 15.6px 20.1%, 15.5px 20.4%, 15.5px 20.7%, 15.5px 21%, 15.6px 21.3%, 15.8px 21.6%, 15.4px 21.9%, 15.2px 22.2%, 15.3px 22.5%, 15.2px 22.8%, 14.8px 23.1%, 15.1px 23.4%, 15.1px 23.7%, 14.8px 24%, 15px 24.3%, 15.2px 24.6%, 15.2px 24.9%, 15.3px 25.2%, 15px 25.5%, 15.5px 25.8%, 15.4px 26.1%, 15.3px 26.4%, 15.5px 26.7%, 15.9px 27%, 16.3px 27.3%, 16.3px 27.6%, 16.6px 27.9%, 17px 28.2%, 17.1px 28.5%, 17.4px 28.8%, 16.9px 29.1%, 16.8px 29.4%, 17px 29.7%, 17.2px 30%, 16.9px 30.3%, 17.2px 30.6%, 17.7px 30.9%, 17.5px 31.2%, 17.5px 31.5%, 17.5px 31.8%, 17.2px 32.1%, 17px 32.4%, 17px 32.7%, 17px 33%, 16.8px 33.3%, 16.7px 33.6%, 16.7px 33.9%, 16.2px 34.2%, 16.1px 34.5%, 16.1px 34.8%, 16.2px 35.1%, 16.4px 35.4%, 16.6px 35.7%, 16.4px 36%, 16.3px 36.3%, 16.1px 36.6%, 16.1px 36.9%, 16.2px 37.2%, 16.3px 37.5%, 17px 37.8%, 17.1px 38.1%, 17.3px 38.4%, 17.6px 38.7%, 17.9px 39%, 17.8px 39.3%, 17.6px 39.6%, 17.8px 39.9%, 18.1px 40.2%, 18.3px 40.5%, 18.4px 40.8%, 18.5px 41.1%, 18.7px 41.4%, 18.7px 41.7%, 18.6px 42%, 18.7px 42.3%, 18.6px 42.6%, 18.2px 42.9%, 18.1px 43.2%, 18.6px 43.5%, 18.4px 43.8%, 18.7px 44.1%, 19.2px 44.4%, 19.7px 44.7%, 20.2px 45%, 20.1px 45.3%, 19.8px 45.6%, 19.8px 45.9%, 20px 46.2%, 20.5px 46.5%, 19.9px 46.8%, 20px 47.1%, 19.6px 47.4%, 19.1px 47.7%, 18.8px 48%, 19.1px 48.3%, 19.2px 48.6%, 19.6px 48.9%, 20px 49.2%, 20px 49.5%, 19.8px 49.8%, 19.2px 50.1%, 19.1px 50.4%, 19.3px 50.7%, 19px 51%, 18.8px 51.3%, 18.8px 51.6%, 19.1px 51.9%, 19px 52.2%, 18.5px 52.5%, 18.6px 52.8%, 18.7px 53.1%, 18.8px 53.4%, 18.8px 53.7%, 19px 54%, 18.9px 54.3%, 18.6px 54.6%, 18.6px 54.9%, 18.5px 55.2%, 18.2px 55.5%, 18.1px 55.8%, 18.1px 56.1%, 18.3px 56.4%, 18.6px 56.7%, 18.6px 57%, 18.3px 57.3%, 18.7px 57.6%, 18.4px 57.9%, 18.8px 58.2%, 18.9px 58.5%, 18.8px 58.8%, 18.5px 59.1%, 18.2px 59.4%, 18px 59.7%, 17.9px 60%, 18.2px 60.3%, 18.5px 60.6%, 18.6px 60.9%, 18.6px 61.2%, 19px 61.5%, 18.9px 61.8%, 19.1px 62.1%, 19.5px 62.4%, 19.8px 62.7%, 19.9px 63%, 19.9px 63.3%, 20.4px 63.6%, 20.7px 63.9%, 20.7px 64.2%, 20.6px 64.5%, 21.1px 64.8%, 21.1px 65.1%, 21.2px 65.4%, 21.2px 65.7%, 21.2px 66%, 21.1px 66.3%, 21.3px 66.6%, 20.7px 66.9%, 20.8px 67.2%, 20.7px 67.5%, 20.8px 67.8%, 21.3px 68.1%, 21.6px 68.4%, 21.4px 68.7%, 21.6px 69%, 21.5px 69.3%, 21.3px 69.6%, 21.2px 69.9%, 21.4px 70.2%, 21.4px 70.5%, 21.5px 70.8%, 21.4px 71.1%, 21.2px 71.4%, 20.9px 71.7%, 21.5px 72%, 21.3px 72.3%, 21.7px 72.6%, 21.9px 72.9%, 22.1px 73.2%, 22.5px 73.5%, 22.4px 73.8%, 21.9px 74.1%, 21.8px 74.4%, 21.8px 74.7%, 21.9px 75%, 21.9px 75.3%, 21.3px 75.6%, 21.6px 75.9%, 21.3px 76.2%, 21.3px 76.5%, 21.5px 76.8%, 21.6px 77.1%, 21.4px 77.4%, 21.3px 77.7%, 21.5px 78%, 21.7px 78.3%, 21.8px 78.6%, 21.7px 78.9%, 22.3px 79.2%, 22px 79.5%, 21.8px 79.8%, 21.5px 80.1%, 21px 80.4%, 20.5px 80.7%, 20.4px 81%, 20.4px 81.3%, 20px 81.6%, 19.9px 81.9%, 20px 82.2%, 19.9px 82.5%, 19.5px 82.8%, 19.7px 83.1%, 19.6px 83.4%, 19.9px 83.7%, 20.1px 84%, 19.9px 84.3%, 19.9px 84.6%, 19.4px 84.9%, 19.3px 85.2%, 19.3px 85.5%, 19.3px 85.8%, 19.2px 86.1%, 19.9px 86.4%, 20.1px 86.7%, 20.1px 87%, 20px 87.3%, 19.9px 87.6%, 19.9px 87.9%, 19.6px 88.2%, 19.1px 88.5%, 19.4px 88.8%, 19.6px 89.1%, 19.8px 89.4%, 20.2px 89.7%, 19.8px 90%, 19.8px 90.3%, 19.3px 90.6%, 18.8px 90.9%, 18.2px 91.2%, 17.7px 91.5%, 17.7px 91.8%, 17.5px 92.1%, 17.2px 92.4%, 16.9px 92.7%, 16.5px 93%, 16.2px 93.3%, 16px 93.6%, 15.5px 93.9%, 15.1px 94.2%, 14.9px 94.5%, 14.7px 94.8%, 14.6px 95.1%, 14.8px 95.4%, 14.8px 95.7%, 14.9px 96%, 14.8px 96.3%, 14.7px 96.6%, 14.7px 96.9%, 14.4px 97.2%, 14.2px 97.5%, 13.9px 97.8%, 13.8px 98.1%, 13.7px 98.4%, 13.3px 98.7%, 13.3px 99%, 13.5px 99.3%, 13.6px 99.6%, 13.9px 99.9%, 14.3px 100.2%, 100% 100%, 100% 0%);
}
body.pg-about .ro-tear{
display:block;position:absolute;left:0;top:0;bottom:0;width:40px;z-index:-2;pointer-events:none;
background:url('data:image/svg+xml,') 0 0 / 100% 100% no-repeat;
}
}
/* the torn edge answers hover and keyboard focus like every torn box: its rim turns crimson (the print itself does not move) */
body.pg-about .ro-tear::after{
content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .22s ease;
background:url('data:image/svg+xml,') 0 0 / 100% 100% no-repeat;
}
@media (hover:hover) and (pointer:fine){
body.pg-about .ro-panel--edu:hover .ro-tear::after{opacity:1;}
}
body.pg-about .ro-panel--edu:focus-within .ro-tear::after{opacity:1;}
/* ABOUT PASS1 SEAM:end */
/* ABOUT PASS2 STRIP:begin. Under the two role prints the papercut runtime lays a strip of off white paper torn down over the cath lab
photo; side by side, the prints' own bottom edge is torn too: the same off white paper is torn up over them here (a seamless 800px
tile of the calm tear, rim and soft shadow; its last rows are clear and sit on the strip, so no tile edge ever shows), so the strip between the two photo sections is torn on both sides, never a flat bar. */
@media (min-width:901px){
body.pg-about .ab-roles{position:relative;}
body.pg-about .ab-roles::after{
content:'';position:absolute;left:0;right:0;bottom:-6px;height:40px;z-index:3;pointer-events:none;
background:url('data:image/svg+xml,') 0 0 / 800px 40px repeat-x;
}
}
/* ABOUT PASS2 STRIP:end */
/* arrival: the photo settles, then the copy fades in; nothing hides without js */
@media (prefers-reduced-motion:no-preference){
body.pg-about .ro-panel > picture > img{transition:transform 1.6s var(--ab-ease),scale 1.7s var(--ab-ease);}
body.pg-about .ro-body{transition:opacity .4s ease .3s;}
html.js body.pg-about .ab-roles:not(.is-in) .ro-panel > picture > img{transform:scale(1.06);}
html.js body.pg-about .ab-roles:not(.is-in) .ro-body{opacity:0;}
}
/* ============================================================
IV. THE MISSION BAND. The cath lab fills the page; the three phrases
sit on the dark monitors. They light one at a time as it arrives.
============================================================ */
body.pg-about .ab-build{--photo-pos:70% 30%;--photo-pos-m:50% 50%;--drift-origin:30% 40%;}
body.pg-about .ab-build .phero__bg img{transform-origin:30% 40%;}
body.pg-about .ab-build__in{position:absolute;inset:0;max-width:none;margin:0;padding:0;pointer-events:none;}
body.pg-about .ab-build__copy{
--pr-x:52.5vw;--pr-y:16.2svh;--pr-w:46vw;--pr-h:23.8svh;--ab-pf:clamp(.95rem,1.28vw,1.3rem);--ab-pn:1.9;
position:absolute;z-index:3;pointer-events:auto;left:var(--pr-x);top:var(--pr-y);width:var(--pr-w);
}
body.pg-about .bd-tri{
margin:0;display:grid;gap:.05em;max-width:none;
font-family:var(--display);font-weight:800;color:var(--ab-ink);
/* sized from the calm monitor area the runtime reserves: three lines plus the one line of copy under them */
font-size:clamp(2.1rem,calc((var(--pr-h) - var(--ab-pn) * var(--ab-pf)) / 3.1),6.5rem);line-height:1;letter-spacing:-.04em;
}
body.pg-about .bd-ph{position:relative;display:block;padding-bottom:.05em;white-space:nowrap;transition:transform .5s var(--ab-ease);}
/* the lit copy of a phrase: the coral ramp, wide enough to flow (R8, restored). It flows only on the last phrase and only
while the headline is on screen (.is-live, set by pg-amc.js); no glow, no shadow */
body.pg-about .bd-ph::after{
content:attr(data-t);content:attr(data-t) / "";
position:absolute;left:0;top:0;width:100%;pointer-events:none;
background-image:linear-gradient(100deg,#FF4A57 0%,#FF6B75 32%,#FF8F7A 62%,#FF6B75 84%,#FF4A57 100%);background-size:230% 100%;background-position:18% 50%;
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
text-shadow:none;opacity:0;transition:opacity .45s ease;
}
body.pg-about .bd-ph:last-child::after{opacity:1;animation:k4GradDrift 11s ease-in-out infinite;animation-play-state:paused;}
body.pg-about .bd-tri.is-live .bd-ph:last-child::after{animation-play-state:running;}
body.pg-about [data-ink="dark"] .bd-ph::after{background-image:var(--pi-grad-dark);}
/* hover (R8, restored): a phrase slides 8px and lights in the coral ramp */
@media (hover:hover) and (pointer:fine){
body.pg-about .bd-ph:hover{transform:translateX(8px);}
body.pg-about .bd-ph:hover::after{opacity:1;}
}
body.pg-about .ab-prose{
margin:.45em 0 0;max-width:none;white-space:nowrap;
font-weight:500;font-size:var(--ab-pf);line-height:1.4;
}
/* the lighting sequence: armed and started by pg-amc.js when the band is mostly on screen.
With no js, no IntersectionObserver or reduced motion nothing is dimmed. */
@media (prefers-reduced-motion:no-preference){
html.js body.pg-about .ab-build.bd-armed:not(.bd-go) .bd-ph{opacity:.55;}
html.js body.pg-about .ab-build.bd-go .bd-ph{
animation:bdBase 1.1s var(--ab-ease) backwards;animation-delay:calc(.3s + var(--n,0) * 1.2s);
}
html.js body.pg-about .ab-build.bd-go .bd-ph::after{
animation:bdLit 1.9s ease backwards;animation-delay:calc(.3s + var(--n,0) * 1.2s);
}
html.js body.pg-about .ab-build.bd-go .bd-ph:last-child::after{animation:bdLitStay 1.9s ease backwards,k4GradDrift 11s ease-in-out infinite;animation-delay:calc(.3s + var(--n,0) * 1.2s),0s;animation-play-state:running,paused;}
html.js body.pg-about .ab-build.bd-go .bd-tri.is-live .bd-ph:last-child::after{animation-play-state:running,running;}
}
@keyframes bdBase{from{opacity:.55;transform:translateY(16px);}}
@keyframes bdLit{0%{opacity:0;}28%{opacity:1;}72%{opacity:1;}100%{opacity:0;}}
@keyframes bdLitStay{0%{opacity:0;}45%{opacity:1;}}
/* ============================================================
V. LEADERSHIP. The roster reads on the left; the portrait is pinned to
the right edge and stays in view while the roster scrolls past it.
============================================================ */
body.pg-about .ab-lead{
--hs-w:min(44vw,74svh);
display:grid;grid-template-columns:minmax(0,1fr) var(--hs-w);
grid-template-areas:"head photo" "body photo";grid-template-rows:auto 1fr;
align-items:start;padding:0;overflow:clip;
}
body.pg-about .ld-head{grid-area:head;padding:var(--sec-pad) var(--gutter) 0;}
body.pg-about .ld-body{grid-area:body;padding:clamp(2rem,4vw,3.4rem) var(--gutter) var(--sec-pad);}
body.pg-about .ld-lede{
margin:clamp(1.2rem,2.2vw,1.8rem) 0 0;max-width:30ch;font-family:var(--display);font-weight:700;
font-size:clamp(1.25rem,1.9vw,1.7rem);line-height:1.2;letter-spacing:-.015em;color:var(--ab-ink);
}
body.pg-about .ld-photo{
grid-area:photo;position:sticky;top:0;align-self:start;margin:0;
width:var(--hs-w);height:min(100svh,calc(var(--hs-w) * 1.5));min-height:0;max-height:none;
overflow:hidden;background:#0F1F41;border:0;border-radius:0;box-shadow:none;aspect-ratio:auto;
}
body.pg-about .ld-photo > img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 14%;
}
/* the portrait is a torn print laid on the navy sheet: a band of navy above it where the section starts and below it where the
section ends, so its torn top and bottom and their white rim show there (pinned, it still rides at the top of the window) */
@media (min-width:901px) and (orientation:landscape){
body.pg-about .ld-photo{margin:clamp(1.25rem,2.4vw,2.25rem) 0;}
}
body.pg-about .ld-rows{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.8rem,3vw,2.6rem);max-width:620px;}
body.pg-about .ld-t{
font-family:var(--display);font-weight:800;color:var(--ab-ink);
font-size:var(--ab-h3);line-height:1.12;letter-spacing:-.02em;margin:0 0 .5rem;text-wrap:balance;
}
body.pg-about .ld-d{
margin:0;color:var(--ab-soft);font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.5;max-width:46ch;text-wrap:pretty;
}
body.pg-about .ld-sub{
list-style:none;margin:.7rem 0 0;padding:0;display:grid;gap:.5rem;
color:var(--ab-soft);font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.5;max-width:46ch;text-wrap:pretty;
}
body.pg-about .ld-sub b{color:var(--ab-ink);font-weight:800;}
body.pg-about .ld-memb{
margin-top:clamp(2.2rem,4vw,3.4rem);display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.6rem;
}
body.pg-about .ld-memb__l{font:500 1rem/1 var(--body);color:var(--ab-soft);}
body.pg-about .ld-memb__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;}
body.pg-about .ld-memb__list li{
font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.4vw,2.2rem);letter-spacing:-.01em;color:var(--ab-ink);
}
/* hover (R8, restored): a role slides 6px; the portrait eases in 4 percent inside its frame (scale property: the shared drift animates transform) */
body.pg-about .ld-row{transition:transform .5s var(--ab-ease);}
body.pg-about .ab-lead .ld-photo > img{transition:transform .9s var(--ab-ease),opacity .6s ease,scale 1.6s var(--ab-ease);}
@media (hover:hover) and (pointer:fine){
body.pg-about .ld-row:hover{transform:translateX(6px);}
}
/* the roster lights as it is read, each role rising 24px as it lights; the portrait arrives once from the right edge */
@media (prefers-reduced-motion:no-preference){
html.js body.pg-about .ab-lead.ld-armed .ld-row{opacity:.34;translate:0 24px;transition:opacity .6s ease,translate .85s var(--ab-ease),transform .5s var(--ab-ease);}
html.js body.pg-about .ab-lead.ld-armed .ld-row.is-on{opacity:1;translate:0 0;}
/* the clip runs 40px outside the frame so the torn paper rim and its shadow are never cut */
html.js body.pg-about .ab-lead:not(.is-in) .ld-photo{clip-path:inset(-40px -40px -40px 100%);}
html.js body.pg-about .ab-lead.is-in .ld-photo{clip-path:inset(-40px);transition:clip-path 1.1s var(--ab-ease);}
}
/* ============================================================
VI. CLOSE. One scroll lit statement and the one primary button, on
light paper (navy ink, the deep crimson ramp on the accent).
============================================================ */
body.pg-about .ab-close{
position:relative;isolation:isolate;overflow:hidden;text-align:left;
min-height:min(72svh,640px);display:flex;align-items:center;
}
body.pg-about .ab-close .sec-inner{width:100%;max-width:none;padding-block:clamp(5rem,10vw,9rem);}
body.pg-about .ab-close__t{
font-family:var(--display);font-weight:800;color:#0B1B33;
font-size:clamp(2.7rem,calc(5.6vw + .9rem),7.5rem);line-height:.98;letter-spacing:-.045em;
margin:0 0 clamp(2rem,3.6vw,3.2rem);text-wrap:balance;max-width:none;
}
body.pg-about .ab-close__t em{display:block;padding-bottom:.08em;}
body.pg-about .ab-close__cta .k4-btn{padding:1.2rem 2.3rem;font-size:1.08rem;}
/* ABOUT PASS1 ECG:begin. The close's one illustration: the heartbeat that runs along the path band above (its crimson paper ECG)
comes back here and runs on out of the button to the page edge, a crimson paper ribbon on a white paper rim with a soft shadow, cut
to a real trace (P wave, QRS, T wave). It draws once on arrival; a glint of light travels along it now and then while it is on
screen, and hovering or focusing the button sends the glint along it in quick beats. Static, fully drawn, under reduced motion. */
/* the ribbon starts just under the button's right end and runs to the page edge, so no beat ever hides behind the button */
body.pg-about .ab-close__cta{position:relative;display:flex;align-items:center;margin-right:calc(-1 * var(--gutter));}
body.pg-about .ab-close__cta .k4-btn{position:relative;z-index:1;flex:none;}
body.pg-about .ab-ecg-wrap{position:relative;z-index:0;flex:1 1 auto;min-width:0;align-self:stretch;margin-left:-28px;pointer-events:none;}
body.pg-about .ab-ecg{
position:absolute;left:0;top:50%;pointer-events:none;
width:100%;max-width:none;height:clamp(100px,12vw,200px);translate:0 -50%;
}
body.pg-about .ab-ecg path{fill:none;stroke-linecap:round;stroke-linejoin:round;}
/* cut paper: a soft shadow, the white fibre rim, the deep crimson underside of the ribbon (1.6 units lower, its paper thickness),
then the crimson face */
body.pg-about .ab-ecg__sh{stroke:#16264C;stroke-width:12;opacity:.26;}
body.pg-about .ab-ecg__rim{stroke:#FDFDFB;stroke-width:16;}
body.pg-about .ab-ecg__deep{stroke:#9C1B27;stroke-width:9.5;transform:translateY(1.8px);}
body.pg-about .ab-ecg__ink{stroke:#C9303D;stroke-width:8.5;}
body.pg-about .ab-ecg__glint{stroke:#FFE4E6;stroke-width:4;opacity:0;stroke-dasharray:.035 .965;stroke-dashoffset:.035;filter:blur(.7px);}
@media (prefers-reduced-motion:no-preference){
html.js body.pg-about .ab-close :is(.ab-ecg__sh,.ab-ecg__rim,.ab-ecg__deep,.ab-ecg__ink){stroke-dasharray:1 1;stroke-dashoffset:1;}
html.js body.pg-about .ab-close.is-in :is(.ab-ecg__sh,.ab-ecg__rim,.ab-ecg__deep,.ab-ecg__ink){stroke-dashoffset:0;transition:stroke-dashoffset 2.4s cubic-bezier(.45,0,.2,1) .45s;}
html.js body.pg-about .ab-close.is-in .ab-ecg__glint{animation:abEcgGlint 7s linear 3s infinite;animation-play-state:paused;}
html.js body.pg-about .ab-close.is-in .ab-ecg.is-live .ab-ecg__glint{animation-play-state:running;}
html.js body.pg-about .ab-close.is-in .ab-close__cta:has(.k4-btn:is(:hover,:focus-visible)) .ab-ecg__glint{animation:abEcgRun 1.3s cubic-bezier(.4,0,.25,1) infinite;}
}
@keyframes abEcgGlint{0%{stroke-dashoffset:.035;opacity:.9;}42%{stroke-dashoffset:-1;opacity:.9;}42.1%,100%{stroke-dashoffset:-1;opacity:0;}}
@keyframes abEcgRun{0%{stroke-dashoffset:.035;opacity:.95;}100%{stroke-dashoffset:-1;opacity:.95;}}
/* ABOUT PASS1 ECG:end */
/* ABOUT PASS2: on a phone the close is as tall as its words and its heartbeat, not 72 percent of the screen of empty paper */
@media (max-width:600px){
body.pg-about .ab-close{min-height:0;}
body.pg-about .ab-close .sec-inner{padding-block:clamp(4.5rem,18vw,5.5rem);}
}
body.pg-about .ab-scrub.ab-armed .ab-w{opacity:.34;transition:opacity .55s ease;}
body.pg-about .ab-scrub.ab-armed .ab-w.is-on{opacity:1;}
/* the kit's glint band repeats on a wide button and leaves a pale patch at
rest; the band must show once, on hover only */
body.pg-about .k4-btn__glint::after{background-repeat:no-repeat;}
/* ============================================================
PHONE AND PORTRAIT (900px and below, or any portrait window)
============================================================ */
@media (max-width:900px),(orientation:portrait){
/* hero: the whole viewport is the photo, all copy is one block at the bottom over the navy tee */
body.pg-about .ab-hero{--photo-pos:50% 0;align-items:flex-end;}
body.pg-about .ab-hero__in{position:relative;inset:auto;width:100%;padding:0 20px max(1.2rem,env(safe-area-inset-bottom));pointer-events:auto;}
/* the copy block dissolves here: the headline and the deck+button are the direct children of the hero grid again */
html.photo-ink body.pg-about .ab-hero [data-photo-region],
body.pg-about .ab-hero__copy{display:contents;}
/* the headline may use the room between his stethoscope earpieces and the deck: the earpieces sit at 65.4 percent of the
frame height (or 116.3vw down when the photo is width limited); 171px is the deck, the button, their gaps and a clear gap */
body.pg-about .ab-h1{font-size:clamp(1.8rem,min(calc(5.2vw + 1.5rem),calc((100svh - max(65.4svh,116.3vw) - 171px) / 2.94)),3.4rem);}
body.pg-about .ab-deck{font-size:1.02rem;line-height:1.45;max-width:31ch;margin-top:.6rem;}
body.pg-about .ab-hero__cta{margin-top:.85rem;}
body.pg-about .ab-hero__cta .k4-btn{max-width:220px;}
/* the path: headline above the band on the same paper */
body.pg-about .pa-stage{width:100%;padding-top:0;}
body.pg-about .pa-head{position:static;width:auto;padding:clamp(2.6rem,9vw,4rem) 20px 1.6rem;}
body.pg-about .ab-path .ab-h2{font-size:clamp(2.375rem,calc(4.2cqw + 1.35rem),5.75rem);max-width:20ch;}
body.pg-about .pa-pin__t{display:none;}
body.pg-about .pa-panel{background:var(--ab-navy);}
body.pg-about .pa-card{grid-template-columns:1fr;}
body.pg-about .pa-card__txt{padding:1.4rem clamp(1.1rem,4vw,1.6rem) 2rem;}
/* the mission band: headline at the top over the wall, lede at the bottom over the console */
body.pg-about .ab-build{--photo-pos:50% 50%;}
body.pg-about .ab-build__in{position:relative;inset:auto;width:100%;align-self:stretch;padding:0 20px;display:flex;flex-direction:column;pointer-events:auto;}
html.photo-ink body.pg-about .ab-build [data-photo-region],
body.pg-about .ab-build__copy{
position:static;left:auto;top:auto;width:auto;height:auto;max-width:none;
flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:.4rem 0 1.4rem;
}
body.pg-about .bd-tri{font-size:clamp(1.9rem,9vw,2.6rem);}
body.pg-about .ab-lead .ab-h2{font-size:var(--ab-h2);}
body.pg-about .bd-ph{white-space:normal;}
body.pg-about .ab-prose{white-space:normal;max-width:30ch;padding-left:.5rem;}
/* leadership: heading, portrait, roster, memberships */
body.pg-about .ab-lead{display:flex;flex-direction:column;}
body.pg-about .ld-head{order:1;padding:var(--sec-pad) var(--gutter) 2rem;}
body.pg-about .ld-photo{order:2;position:relative;width:100%;height:auto;aspect-ratio:4 / 5;max-height:78svh;}
body.pg-about .ld-body{order:3;padding:2rem var(--gutter) 3.2rem;}
}
@media (max-width:1024px){
body.pg-about .ro-pair{grid-template-columns:minmax(0,58fr) minmax(0,42fr);--ab-wp:58vw;}
}
/* portrait: the three phrases sit above his head, so they are as large as the room above his hair allows (it is 28 percent of
the frame height; 110px is the nav and the first margin) */
@media (orientation:portrait){
body.pg-about .bd-tri{font-size:clamp(2.1rem,min(calc(4.2vw + 1.35rem),calc((28svh - 110px) / 3.3)),3.6rem);}
}
/* narrow desktop windows: the line of copy under the mission headline wraps to two lines (the headline gives it the room) */
@media (min-width:901px) and (max-width:1100px){
body.pg-about .ab-build__copy{--ab-pn:3.4;}
body.pg-about .ab-prose{white-space:normal;max-width:36ch;}
}
/* the two column leadership head: the headline is never wider than its column */
@media (min-width:901px) and (orientation:landscape){
body.pg-about .ab-lead .ab-h2{font-size:min(var(--ab-h2),calc((100vw - var(--hs-w) - 2 * var(--gutter)) / 7));}
}
/* tablet and portrait: one column; the clinician keeps the wide frame whole, the educator keeps a tall panel */
@media (max-width:900px){
body.pg-about .ro-pair{grid-template-columns:1fr;--ab-wp:100vw;--ab-xc:calc(.495 * 100vw);}
/* stacked, the two photos are parted by a band of the navy sheet, so each gets one calm torn edge (no two edges on one line) */
body.pg-about .ro-pair{row-gap:clamp(12px,3vw,18px);}
body.pg-about .ro-panel--clin{min-height:0;aspect-ratio:5 / 4;}
body.pg-about .ro-panel--edu{min-height:clamp(600px,120vw,820px);}
/* one column: the educator panel is as wide as the page, so the figure can grow with it */
body.pg-about .ro-line__n{font-size:clamp(2.4rem,7vw,4rem);}
}
/* phone: the clinician photo is shown whole as a plate, the title on the ceiling strip, the list on navy under it */
@media (max-width:600px){
body.pg-about .ro-panel--clin{display:block;aspect-ratio:auto;}
body.pg-about .ro-panel--clin > picture{display:block;position:relative;aspect-ratio:2 / 3;}
body.pg-about .ro-panel--clin > picture > img{object-position:50% 0;}
body.pg-about .ro-panel--clin .ro-body{display:contents;}
body.pg-about .ro-panel--clin .ro-title{position:absolute;top:clamp(1.3rem,5vw,1.8rem);left:20px;margin:0;}
body.pg-about .ro-panel--clin .ro-list{position:relative;padding:1.4rem 20px 2.4rem;background:var(--ab-navy);}
body.pg-about .ro-panel--clin .ro-list li{color:var(--ab-ink);}
body.pg-about .ro-panel--edu{min-height:clamp(640px,176vw,800px);}
}
/* tablet held upright: the whole frame shows on top, a hard edge, and the copy sits on the navy under it in two columns.
(his arm, the desk and the stethoscope fill the lower part of this crop, so there is no calm place to lay copy on it) */
@media (min-width:601px) and (orientation:portrait){
body.pg-about .ab-hero .phero__bg{bottom:auto !important;height:calc(100svh - 14.5rem) !important;}
body.pg-about .ab-hero__in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:1.4rem 2.4rem;align-items:end;padding:0 var(--gutter) 2.2rem;}
/* the copy strip under the photo is 14.5rem tall: three lines at the cap fit in it with the bottom padding */
body.pg-about .ab-h1{font-size:clamp(2.6rem,7.4vw,3.9rem);}
body.pg-about .ab-deck{font-size:1.1rem;margin-top:0;max-width:38ch;}
}
/* a phone held sideways: the wide frame again, copy in a compact column on the cabinet side */
@media (max-width:900px) and (orientation:landscape){
body.pg-about .ab-hero{--photo-pos:22% 38%;}
body.pg-about .ab-hero__in{width:min(52%,34rem);padding:0 0 max(1rem,env(safe-area-inset-bottom)) var(--gutter);}
body.pg-about .ab-h1{font-size:clamp(1.6rem,5.4vw,2.4rem);}
body.pg-about .ab-deck{font-size:.9rem;line-height:1.4;max-width:34ch;margin-top:.7rem;}
body.pg-about .ab-hero__cta{margin-top:.8rem;}
}
/* a short phone: the stethoscope sits low in this crop, so the copy block shrinks to stay clear of the earpieces */
@media (max-width:600px) and (max-height:800px) and (orientation:portrait){
body.pg-about .ab-h1{font-size:clamp(1.8rem,calc((100svh - max(65.4svh,116.3vw) - 150px) / 2.94),2.75rem);}
body.pg-about .ab-deck{font-size:.93rem;line-height:1.38;margin-top:.6rem;max-width:34ch;}
body.pg-about .ab-hero__cta{margin-top:.75rem;}
body.pg-about .ab-hero__cta .k4-btn{padding:.8rem 1.4rem;}
body.pg-about .ab-hero__in{padding-bottom:max(.9rem,env(safe-area-inset-bottom));}
}
/* reduced motion: finished states, no travelling parts */
@media (prefers-reduced-motion:reduce){
html.js body.pg-about .ab-ln{overflow:visible;padding-bottom:0;margin-bottom:0;}
html.js body.pg-about .ab-ln > span{transform:none;transition:none;}
body.pg-about .pa-strip::after{display:none;}
body.pg-about :is(.pa-card,.pa-card__fig img,.pa-card__txt,.pa-ring,.pa-pin::after,.pa-pin__t,.ro-panel > picture > img,.ro-body,.ro-list li,.bd-ph,.bd-ph::after,.ld-photo,.ld-photo > img,.ld-row,.ab-scrub .ab-w){transition:none !important;}
body.pg-about .bd-ph:last-child::after{animation:none !important;}
body.pg-about .pa-card__fig img,body.pg-about .pa-card__txt{transform:none !important;translate:none !important;}
body.pg-about .ro-panel > picture > img{transform:none !important;}
body.pg-about .ro-body,body.pg-about .ld-row{opacity:1 !important;}
body.pg-about .ld-photo{clip-path:none !important;}
}
/* ABOUT:end */
/* ============================================================
MEDIA #top: small code-drawn broadcast glyph beside the headline,
same register as contact.html's phero__art--pulse (three identical
concentric circles that merge into one static ring at rest and
ring outward on reveal), sized down for an inline kicker mark
instead of a large background wash.
============================================================ */
body.pg-media #top .phero__kicker{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;}
/* fable.css pins body.pg-media .label--plain to --ink-soft (fable.css:1807),
tuned for the light .phero--paper hero this section used to be; on the
navy flip that reads as dark-on-dark, so it needs its own pass here,
same pattern as the rest of this file's dark-readiness fixes. */
body.pg-media #top.sec-dark .label--plain,
body.pg-media #top.on-dark .label--plain{color:var(--on-dark-faint);-webkit-text-fill-color:var(--on-dark-faint);}
body.pg-media .amc-signal{width:28px;height:28px;flex:none;display:inline-block;}
body.pg-media .amc-signal svg{width:100%;height:100%;overflow:visible;}
body.pg-media .amc-signal .amc-ring{fill:none;stroke:rgb(var(--paper-rgb) / .55);stroke-width:2;transform-box:fill-box;transform-origin:center;}
body.pg-media .amc-signal .amc-dot{fill:var(--crimson-bright);stroke:none;}
html.js body.pg-media .reveal-sec.is-in .amc-signal .amc-ring{animation:ringOut 3.2s ease-out infinite;animation-delay:var(--d);}
@media(prefers-reduced-motion:reduce){
body.pg-media .amc-signal .amc-ring{animation:none!important;opacity:.55;}
}
/* ============================================================
MEDIA #reach: moves to navy per 6.2 (fable.css already pins
.reachfig__n/__k dark colors for #reach.sec-dark, see fable.css
~5028). Pair each numeral with a small ascending-bar mark, built
from the two numbers already on the page, so neither one floats
alone in empty space.
============================================================ */
body.pg-media .amc-numrow{display:flex;align-items:flex-end;gap:.9rem;}
body.pg-media .amc-bars{width:clamp(38px,4.4vw,52px);height:clamp(1.6rem,4vw,2.4rem);flex:none;display:inline-block;margin-bottom:.5rem;}
body.pg-media .amc-bars svg{width:100%;height:100%;overflow:visible;}
body.pg-media .amc-bar{fill:rgb(var(--paper-rgb) / .28);transform-box:fill-box;transform-origin:center bottom;}
body.pg-media .amc-bar--hi{fill:var(--crimson-bright);}
html.js body.pg-media #reach .amc-bar{opacity:0;transform:scaleY(0);transition:transform .6s var(--ease-snap),opacity .4s;transition-delay:calc(var(--i,0) * .09s);}
html.js body.pg-media #reach.is-in .amc-bar{opacity:1;transform:scaleY(1);}
@media(prefers-reduced-motion:reduce){
body.pg-media .amc-bar{opacity:1!important;transform:scaleY(1)!important;transition:none!important;}
}
/* ============================================================
CONTACT #contact: moves to navy per 6.2, the doors and the form
on glass. fable.css already ships #contact.sec-dark .cform as
glass-1 (fable.css ~5073); .contact__ways gets the same tier
here since it was not covered there. Text colors that pin an
explicit light-mode ink still need their own dark pass, matching
the pattern fable.css already used for #contact.sec-dark .cform*.
============================================================ */
body.pg-contact .contact__ways.glass-1{padding:.3rem clamp(1.1rem,2.2vw,1.6rem);margin-top:1.6rem;}
body.pg-contact .contact__ways.glass-1 li{padding-inline:0;}
body.pg-contact .contact__ways.glass-1 li:first-child{border-top:none;}
body.pg-contact .contact__ways.glass-1 li:last-child{border-bottom:none;}
body.pg-contact #contact.sec-dark .contact__body,
body.pg-contact #contact.on-dark .contact__body{color:var(--on-dark-soft);}
body.pg-contact #contact.sec-dark .contact__title em,
body.pg-contact #contact.on-dark .contact__title em{color:var(--crimson-bright);}
body.pg-contact #contact.sec-dark .contact__ways .t,
body.pg-contact #contact.on-dark .contact__ways .t{color:var(--paper);}
body.pg-contact #contact.sec-dark .contact__ways .d,
body.pg-contact #contact.on-dark .contact__ways .d{color:var(--on-dark-soft);}
@media(pointer:fine){
body.pg-contact #contact.sec-dark .contact__ways .way__btn:hover .t,
body.pg-contact #contact.on-dark .contact__ways .way__btn:hover .t{color:var(--crimson-bright);}
}
body.pg-contact #contact.sec-dark .contact__ways .way__btn:focus-visible .t,
body.pg-contact #contact.on-dark .contact__ways .way__btn:focus-visible .t{color:var(--crimson-bright);}
body.pg-contact #contact.sec-dark .contact__ways .way__go,
body.pg-contact #contact.on-dark .contact__ways .way__go{color:var(--crimson-bright);}
body.pg-contact #contact.sec-dark .contact__direct,
body.pg-contact #contact.on-dark .contact__direct{color:var(--on-dark-soft);}
body.pg-contact #contact.sec-dark .contact__direct a,
body.pg-contact #contact.on-dark .contact__direct a{color:var(--paper);border-bottom-color:var(--hair-inv-strong);}
body.pg-contact #contact.sec-dark .contact__direct a:hover,
body.pg-contact #contact.on-dark .contact__direct a:hover{color:var(--crimson-bright);border-color:var(--crimson-bright);}
/* Hub-and-spoke drawing (.contact-conv), recolored per 6.3 now that
its section is navy: the fan lines and center-to-heart line use
.dr-soft/.dr-c, tuned for a light ground (fable.css:1937-1938); the
sitewide generic .sec-dark .ill .dr-soft fallback (fable.css:1323)
still reads dark-on-dark by design elsewhere, so this page needs
its own pass the same way body.pg-stories's .care-net already did
(fable.css:1906). */
body.pg-contact #contact.sec-dark .contact-conv .dr-soft,
body.pg-contact #contact.on-dark .contact-conv .dr-soft{stroke:rgb(var(--paper-rgb) / .4);}
body.pg-contact #contact.sec-dark .contact-conv .dr-c,
body.pg-contact #contact.on-dark .contact-conv .dr-c{stroke:var(--crimson-bright);}
body.pg-contact #contact.sec-dark .contact-conv .fill-c,
body.pg-contact #contact.on-dark .contact-conv .fill-c,
body.pg-contact #contact.sec-dark .contact-conv__heart,
body.pg-contact #contact.on-dark .contact-conv__heart{fill:var(--crimson-bright);}
body.pg-contact #contact.sec-dark .contact-conv .care-net__pulse,
body.pg-contact #contact.on-dark .contact-conv .care-net__pulse{stroke:var(--crimson-bright);}
/* ============================================================
CONTACT #close: "The door is open" becomes a genuine closing
statement on .quote-plate instead of a plain .lead-stmt (spec
section 2). The section already centers its column (.center-col),
but .center-col's own auto-margin rule (fable.css:436) only
targets .lead-stmt/.prose, not .quote-plate, so the left-ruled
block needs its own centering here. The corridor photo already
runs its scrim off entirely on this page by design (fable.css:3768,
"the corridor is already near-black at its own colours"), and
.quote-plate's dark-ground colors (fable.css:351-354) already
apply automatically since #close already carries .sec-dark.on-dark.
============================================================ */
body.pg-contact #close .quote-plate{margin-inline:auto;text-align:left;}