/* /learn-clinic-physicians: its own sheet, loaded after site.css.
   The page is a roster, so the people carry it: three still portraits in the
   hero that are also the way in, one part per physician with the tool of
   their job drawn beside the facts, then one navy band that walks the six
   stages of care and shows who is in the room at each.
   Script: scripts/learn-clinic-physicians.js. With that script absent every
   part is visible, every "Read more" opens and every link still jumps.
   The portraits are photographs and stay still: nothing here moves a face. */

html:has(body.cphys) {
  --hc-nav-h: 64px;            /* fallback; the script sets the real header height */
  --hc-bar-h: 52px;
  /* every jump, anchor and Tab stop lands below the header and the bar */
  scroll-padding-top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 12px);
}
.cphys {
  --cp-ease: cubic-bezier(.16, 1, .3, 1);
  --cp-gut: clamp(20px, 4vw, 56px);
  --cp-no: #a8576a;            /* the crossed-out line on the checklist */
}

/* ============ GROUND RULES ============ */
.cp-wrap { max-width: calc(1240px + 2 * var(--cp-gut)); margin-inline: auto; padding-inline: var(--cp-gut); }
/* text fills its column; the column sets the measure */
.cphys main p { max-width: none; margin: 0; }
.cphys main a:not(.btn) { border-bottom: 0; }
.cphys main :is(ul, ol, dl, dd, figure) { margin: 0; padding: 0; list-style: none; }
.cphys main h2 {
  font-family: var(--font-display); font-weight: 300; color: var(--ink);
  font-size: clamp(1.9rem, 3.1vw, 2.85rem); line-height: 1.1; letter-spacing: -.01em;
  margin: 0; max-width: none; text-wrap: wrap;
}
/* a heading that has to wrap breaks where the styling changes */
.cphys main :is(h1, h2) > :is(.h-lead, em) { display: inline-block; }
.cphys main :is(h1, h2) > em { color: var(--accent-blue); }
.cphys main :is(a, summary, button):focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px; }
.cphys .cp-meet :is(a, button):focus-visible { outline-color: var(--accent-ice); }
/* a part that receives focus after a jump is not itself a control */
.cphys main :is(h1, h2, h3, section)[tabindex="-1"]:focus { outline: none; }

/* a link inside a sentence */
.cp-link { color: var(--accent-blue-hover); text-decoration: underline; text-decoration-color: var(--accent-ice); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color 200ms, text-decoration-color 200ms; }
.cp-link:hover { color: var(--accent-blue); text-decoration-color: currentColor; }

/* the onward link: the arrow leans the way it points */
.cp-go { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; font-weight: 600; color: var(--accent-blue-hover); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: color 200ms, text-decoration-color 260ms; }
.cp-go span { display: inline-block; transition: transform 360ms var(--cp-ease); }
.cp-go:hover { color: var(--accent-blue); text-decoration-color: currentColor; }
.cp-go:hover span { transform: translateX(6px); }
.cp-go--up:hover span { transform: translateX(-6px); }
.cp-meet .cp-go { color: #c9def2; }
.cp-meet .cp-go:hover { color: #fff; }

/* ============ REVEALS ============
   Hidden only once the script has said it is running (cp-js on <html>), so
   with no script nothing is ever hidden. Each part comes in its own way. */
.cp-js [data-r] { transition: opacity 620ms ease, transform 820ms var(--cp-ease); }
.cp-js [data-r]:not(.is-in) { opacity: 0; transform: translateY(18px); }
.cp-js [data-r="left"]:not(.is-in) { transform: translateX(-36px); }
.cp-js [data-r="right"]:not(.is-in) { transform: translateX(36px); }
/* these keep their box and bring their own parts in */
.cp-js :is([data-r="facts"], [data-r="charts"], [data-r="trade"], [data-r="hosp"]):not(.is-in) { opacity: 1; transform: none; }

/* ============ HERO ============ */
.cp-hero { padding-block: clamp(28px, 4vw, 60px) clamp(48px, 6vw, 88px); }
.cp-hero__h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.1rem, 3.9vw, 3.4rem); line-height: 1.06; letter-spacing: -.015em; color: var(--ink); margin: 0 0 clamp(28px, 4vw, 52px); max-width: none; text-wrap: wrap; }
.cp-hero__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.cp-hero__answer { font-size: clamp(1.08rem, 1.4vw, 1.26rem); line-height: 1.62; color: var(--ink); padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.cp-hero__note { margin-top: 18px !important; font-size: 16px; line-height: 1.55; color: var(--ink-muted); }

/* the three portraits are the page's contents list: each one is the way to its part */
.cp-faces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.cp-faces li:nth-child(2) { margin-top: clamp(18px, 3vw, 44px); }
.cp-face { display: block; color: var(--ink); text-decoration: none; }
.cp-face__frame { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px; background: var(--shape-slate); }
.cp-face__frame img[width][height] { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
/* a rule under the portrait that the pointer draws out */
.cp-face__frame::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--accent-blue); transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--cp-ease); }
.cp-face:hover .cp-face__frame::after, .cp-face:focus-visible .cp-face__frame::after { transform: scaleX(1); }
.cp-face__name { display: block; margin-top: 14px; font-family: var(--font-display); font-size: clamp(1.05rem, 1.5vw, 1.32rem); line-height: 1.2; transition: color 200ms; }
.cp-face__role { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--ink-muted); }
.cp-face__role::after { content: ""; flex: none; width: 7px; height: 7px; margin-top: -3px; border-right: 1.5px solid var(--accent-blue); border-bottom: 1.5px solid var(--accent-blue); transform: rotate(45deg); transition: transform 360ms var(--cp-ease); }
.cp-face:hover .cp-face__name { color: var(--accent-blue-hover); }
.cp-face:hover .cp-face__role::after { transform: translateY(4px) rotate(45deg); }

/* first paint: the heading, the answer, then each portrait is uncovered in turn */
@keyframes cp-up { from { opacity: 0; transform: translateY(22px); } }
@keyframes cp-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes cp-uncover { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.cp-js .cp-hero__h1 > * { animation: cp-up 900ms var(--cp-ease) both; }
.cp-js .cp-hero__h1 > em { animation-delay: 110ms; }
.cp-js .cp-hero__text > * { animation: cp-up 900ms var(--cp-ease) 240ms both; }
.cp-js .cp-hero__text > .cp-hero__note { animation-delay: 380ms; }
.cp-js .cp-face__frame { animation: cp-uncover 1000ms var(--cp-ease) calc(320ms + var(--i) * 170ms) both; }
.cp-js .cp-face :is(.cp-face__name, .cp-face__role) { animation: cp-rise 700ms var(--cp-ease) calc(820ms + var(--i) * 170ms) both; }

/* ============ CONTENTS BAR (follows the reader) ============ */
.cphys .hc-bar {
  /* under the phone menu's sheet (55) and backdrop (50), over the page */
  position: fixed; left: 0; right: 0; top: var(--hc-nav-h); z-index: 49;
  height: var(--hc-bar-h);
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity 260ms, transform 360ms var(--cp-ease), visibility 0s 360ms;
}
.cphys .hc-bar.is-on { transform: none; opacity: 1; visibility: visible; transition: opacity 260ms, transform 360ms var(--cp-ease); }
body.cphys.nav-open .hc-bar { opacity: 0; visibility: hidden; }
.cphys .hc-bar__track {
  max-width: calc(1240px + 2 * var(--cp-gut)); margin: 0 auto; padding: 0 var(--cp-gut);
  height: 100%; display: flex; align-items: stretch; gap: clamp(18px, 2.4vw, 32px);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: 28px;
}
.cphys .hc-bar__track::-webkit-scrollbar { display: none; }
.cphys .hc-bar__track a {
  position: relative; flex: none; display: flex; align-items: center;
  font-size: 14px; font-weight: 500; color: var(--ink-muted); white-space: nowrap;
  transition: color 200ms;
}
.cphys .hc-bar__track a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent-blue); transform: scaleX(0); transform-origin: left;
  transition: transform 360ms var(--cp-ease);
}
.cphys .hc-bar__track a:hover, .cphys .hc-bar__track a[aria-current] { color: var(--ink); }
.cphys .hc-bar__track a:hover::after { transform: scaleX(.35); }
.cphys .hc-bar__track a[aria-current]::after { transform: scaleX(1); }
.cphys .hc-bar__track a:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -4px; border-radius: 4px; }
.cphys .hc-bar__progress {
  position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--accent-ice); transform-origin: left; transform: scaleX(var(--hc-p, 0));
}
/* where the track can run off a phone, the edge it runs off fades */
.cphys .hc-bar::before, .cphys .hc-bar::after { content: ""; position: absolute; z-index: 1; top: 2px; bottom: 0; width: 36px; pointer-events: none; opacity: 0; transition: opacity 200ms; }
.cphys .hc-bar::before { left: 0; background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff); }
.cphys .hc-bar::after { right: 0; background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff); }
.cphys .hc-bar.is-less::before, .cphys .hc-bar.is-more::after { opacity: 1; }

/* ============ ONE PHYSICIAN ============ */
.cp-doc { padding-block: clamp(48px, 6vw, 92px); border-top: 1px solid var(--border); }
.cp-doc__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.cp-doc__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px; background: var(--shape-slate); }
.cp-doc__photo img[width][height] { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.cp-doc__grid > h2 { grid-column: 1 / -1; }
.cp-doc__grid { row-gap: clamp(24px, 3vw, 40px); }
.cp-doc__sub { font-size: 16px; line-height: 1.5; color: var(--ink-muted); margin-bottom: 18px !important; }
.cp-doc__body > p:not(.cp-doc__sub) { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.cp-doc__body strong { font-weight: 600; color: var(--ink); }

/* the second physician sits on the page's one tinted band, portrait on the other side */
.cp-doc--ambrosio { background: var(--accent-wash); border-top: 0; }
.cp-doc--ambrosio .cp-doc__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.cp-doc--ambrosio .cp-doc__photo { order: 2; }
.cp-doc--ambrosio .cp-doc__body { order: 1; }
.cp-doc--castillo { border-top: 0; }
.cp-doc--castillo .cp-doc__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }

/* the facts, with the tool of the job drawn beside them */
.cp-facts { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; margin-top: clamp(24px, 3vw, 36px); }
.cp-facts dl > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding-block: 13px; border-top: 1px solid var(--border); }
.cp-facts dl > div:last-child { border-bottom: 1px solid var(--border); }
.cp-doc--ambrosio .cp-facts dl > div { border-color: rgba(11, 29, 58, .2); }
.cp-facts dt { font-size: 15px; font-weight: 600; color: var(--ink); }
.cp-facts dd { font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
.cp-js [data-r="facts"] dl > div { transition: opacity 560ms ease calc(var(--i) * 110ms), transform 760ms var(--cp-ease) calc(var(--i) * 110ms); }
.cp-js [data-r="facts"]:not(.is-in) dl > div { opacity: 0; transform: translateX(22px); }

.cp-tool { display: block; width: 96px; height: 96px; overflow: visible; }
.cp-tool :is(path, rect, circle) { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cp-tool .cp-ink--thin { stroke: var(--border-strong); stroke-width: 2; }
.cp-tool .cp-tool__clip { fill: #fff; }
.cp-doc--ambrosio .cp-tool .cp-tool__clip { fill: var(--accent-wash); }
.cp-tool .cp-mark--yes, .cp-tool .cp-pulse, .cp-tool .cp-guide, .cp-tool .cp-target { stroke: var(--accent-blue); stroke-width: 2.4; }
.cp-tool .cp-mark--no { stroke: var(--cp-no); stroke-width: 2.4; }
.cp-tool .cp-beat { fill: var(--accent-blue); stroke: none; }
.cp-tool .cp-target { transform-box: fill-box; transform-origin: center; }
/* each tool is drawn when its facts arrive: outline, then what the job adds */
.cp-js .cp-tool :is(.cp-ink, .cp-mark, .cp-guide) { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 900ms var(--cp-ease); }
.cp-js [data-r="facts"]:not(.is-in) .cp-tool :is(.cp-ink, .cp-mark, .cp-guide) { stroke-dashoffset: 1; }
.cp-js .cp-tool .cp-mark { transition-duration: 380ms; transition-delay: calc(900ms + var(--i) * 260ms); }
.cp-js .cp-tool .cp-guide { transition-duration: 700ms; transition-delay: 800ms; }
.cp-js .cp-tool .cp-target { transition: opacity 300ms ease 1400ms, transform 520ms var(--cp-ease) 1400ms; }
.cp-js [data-r="facts"]:not(.is-in) .cp-tool .cp-target { opacity: 0; transform: scale(2.2); }
.cp-js [data-r="facts"]:not(.is-in) .cp-tool :is(.cp-pulse, .cp-beat) { opacity: 0; }
.cp-tool :is(.cp-pulse, .cp-beat) { transition: opacity 400ms ease 700ms; }
/* while the monitor is on screen the trace sweeps across it and the light keeps time */
@keyframes cp-sweep { 0% { stroke-dashoffset: 1; opacity: 1; } 62% { stroke-dashoffset: 0; opacity: 1; } 88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes cp-beat { 0%, 62%, 100% { opacity: .25; } 30% { opacity: 1; } }
@keyframes cp-lock { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
.cp-tool--monitor.is-live .cp-pulse { stroke-dasharray: 1; animation: cp-sweep 2600ms linear 900ms infinite both; }
.cp-tool--monitor.is-live .cp-beat { animation: cp-beat 2600ms ease-in-out 900ms infinite both; }
.cp-tool--film.is-live .cp-target { animation: cp-lock 2400ms ease-in-out 2200ms infinite; }

/* native "Read more": opened for print, found by in-page search */
.cp-more { margin-top: 10px; }
.cp-more summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 600; color: var(--accent-blue-hover); transition: color 200ms; }
.cp-more summary::-webkit-details-marker { display: none; }
.cp-more summary::after { content: ""; width: 9px; height: 9px; margin-top: -4px; border-right: 2px solid; border-bottom: 2px solid; transform: rotate(45deg); transition: transform 360ms var(--cp-ease); }
.cp-more summary:hover { color: var(--accent-blue); }
.cp-more summary:hover::after { transform: translateY(3px) rotate(45deg); }
.cp-more[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.cp-more[open] summary:hover::after { transform: translateY(-3px) rotate(-135deg); }
.cp-more__shut, .cp-more[open] .cp-more__open { display: none; }
.cp-more[open] .cp-more__shut { display: inline; }
.cp-more__body { padding-block: 8px 4px; }
.cp-more__body p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.cp-more__body p + p { margin-top: 14px !important; }
.cp-more__body em { font-style: italic; }
@keyframes cp-unfold { from { opacity: 0; transform: translateY(-8px); } }
.cp-more[open] .cp-more__body { animation: cp-unfold 420ms var(--cp-ease); }

/* arriving from a portrait or the bar: the part's own portrait is underlined once */
.cp-doc__photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--accent-blue); transform: scaleX(0); transform-origin: left; }
@keyframes cp-arrive { 0% { transform: scaleX(0); opacity: 1; } 45% { transform: scaleX(1); opacity: 1; } 80% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.cp-doc.is-arrived .cp-doc__photo::after { animation: cp-arrive 1700ms var(--cp-ease) 250ms both; }

/* ============ WHO YOU SEE, AND WHEN (navy) ============ */
.cp-meet { background: var(--ink); color: #fff; padding-block: clamp(56px, 7vw, 104px) clamp(40px, 5vw, 72px); }
.cphys .cp-meet h2 { color: #fff; }
.cp-meet__head p { margin-top: 16px !important; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .78); }

/* one face picked out: the stages that physician is at stay lit */
.cp-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: clamp(24px, 3vw, 36px); }
.cp-pick button { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 5px 16px 5px 6px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 8px; background: transparent; color: #fff; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; transition: border-color 200ms, background-color 200ms, transform 360ms var(--cp-ease); }

.cp-pick .cp-av { width: 36px; height: 36px; box-shadow: none; }
.cp-pick .cp-av img[width][height] { width: 122px; height: 183px; margin: -42px 0 0 -43px; }
.cp-pick button:hover { border-color: var(--accent-ice); transform: translateY(-2px); }
.cp-pick button[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--ink); }

.cphys .cp-stages { margin-top: clamp(32px, 4.4vw, 56px); }
.cp-stage { position: relative; display: grid; grid-template-columns: 28px minmax(0, 230px) minmax(0, 1fr) minmax(0, 210px); column-gap: clamp(18px, 2.6vw, 36px); align-items: start; padding-block: 0 clamp(28px, 3.4vw, 44px); transition: opacity 320ms ease; }
.cp-stage:last-child { padding-bottom: 0; }
.cp-stage__node { position: relative; z-index: 1; width: 16px; height: 16px; margin: 6px 6px 0; border-radius: 50%; border: 2px solid var(--accent-ice); background: var(--ink); transition: background-color 360ms ease, transform 520ms var(--cp-ease); }
/* one connector per gap, node to node, and nothing after the last */
.cp-stage:not(:last-child)::before, .cp-stage:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 14px; width: 2px; height: 100%; background: rgba(255, 255, 255, .16); }
.cp-stage:not(:last-child)::after { background: var(--accent-ice); transform: scaleY(var(--fill, 1)); transform-origin: top; }
.cp-js .cp-stage:not(.is-passed) .cp-stage__node { transform: scale(.8); }
.cp-stage.is-passed .cp-stage__node, html:not(.cp-js) .cp-stage__node { background: var(--accent-ice); }
.cp-stage__h h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.2; color: #fff; }
.cp-stage__h p { margin-top: 6px !important; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .7); }
.cp-stage > p { font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, .84); }
.cp-stage > p .cp-go { display: flex; margin-top: 4px; }
.cp-who { display: flex; flex-direction: column; gap: 10px; }
.cp-who__p { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: #fff; }
/* a face from the same portrait: the frame is a window onto its upper third */
.cp-av { flex: none; display: block; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--ink-soft); box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px rgba(255, 255, 255, .3); }
.cp-av img[width][height] { display: block; width: 136px; max-width: none; height: 204px; margin: -47px 0 0 -48px; }
.cp-who__p i { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .5); }
.cp-who__p--coord i { background: radial-gradient(circle, rgba(255, 255, 255, .78) 0 4px, transparent 5px); }
.cp-who__p--ask i { border-style: dashed; border-color: var(--accent-ice); }
/* as a stage is reached, the people at it step forward one by one */
@keyframes cp-pop { from { transform: scale(.6); } 70% { transform: scale(1.12); } }
.cp-js .cp-stage:not(.is-passed) .cp-who__p :is(.cp-av, i) { transform: scale(.6); }
.cp-js .cp-stage.is-passed .cp-who__p :is(.cp-av, i) { animation: cp-pop 460ms var(--cp-ease) calc(var(--i) * 110ms) both; }
/* with one physician picked, the stages without them step back */
.cp-stages[data-pick] .cp-stage:not(.has-pick) { opacity: .72; }
.cp-stages[data-pick] .cp-who__p.is-pick .cp-av { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--accent-ice); }

/* and the ones they are at answer the press, once */
@keyframes cp-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.cp-stage__node::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--accent-ice); opacity: 0; }
.cp-stages[data-pick] .cp-stage.has-pick .cp-stage__node::after { animation: cp-ping 800ms var(--cp-ease) calc(var(--n) * 70ms) both; }

/* ============ WHY THE TEAM IS SMALL ============ */
.cp-small { padding-block: clamp(56px, 7vw, 104px); }
.cp-small__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: clamp(24px, 3vw, 40px); }
.cp-small__text p { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.cp-small__text p + p { margin-top: 18px !important; }
.cp-charts svg { display: block; width: 100%; height: auto; overflow: visible; }
.cp-chart__paper { fill: #fff; stroke: var(--ink); stroke-width: 1.7; }
.cp-chart__rule { fill: none; stroke: var(--border-strong); stroke-width: 1.6; stroke-linecap: round; }
.cp-sig { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cp-sig--a { stroke: var(--accent-blue); }
.cp-sig--b { stroke: var(--ink); }
.cp-sig--c { stroke: var(--ink-muted); }
/* the charts are dealt out, then the same three hands sign each one */
.cp-js .cp-chart { transition: opacity 500ms ease calc(var(--i) * 160ms), translate 900ms var(--cp-ease) calc(var(--i) * 160ms); }
.cp-js [data-r="charts"]:not(.is-in) .cp-chart { opacity: 0; translate: calc(var(--i) * -70px + 70px) 16px; }
.cp-js .cp-sig { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 620ms ease-out; }
.cp-js [data-r="charts"]:not(.is-in) .cp-sig { stroke-dashoffset: 1; }
.cp-js .cp-sig--a { transition-delay: calc(700ms + var(--i) * 520ms); }
.cp-js .cp-sig--b { transition-delay: calc(860ms + var(--i) * 520ms); }
.cp-js .cp-sig--c { transition-delay: calc(1020ms + var(--i) * 520ms); }

/* the trade, said once and set apart */
.cp-trade { position: relative; margin-top: clamp(36px, 5vw, 64px) !important; padding-left: clamp(20px, 2.6vw, 36px); font-family: var(--font-display); font-weight: 300; font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.42; color: var(--ink); }
.cp-trade::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; background: var(--accent-blue); transform-origin: top; transition: transform 900ms var(--cp-ease); }
.cp-js .cp-trade { transition: color 700ms ease 200ms; }
.cp-js .cp-trade:not(.is-in) { color: var(--ink-muted); }
.cp-js .cp-trade:not(.is-in)::before { transform: scaleY(0); }

/* ============ READ ON ============ */
.cp-on { padding-block: clamp(48px, 6vw, 88px); border-top: 1px solid var(--border); }
.cp-hosp { display: block; width: min(200px, 60%); height: auto; margin-top: clamp(20px, 3vw, 36px); overflow: visible; }
.cp-hosp path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cp-hosp .cp-ink--thin { stroke: var(--border-strong); }
.cp-hosp .cp-hosp__cross { stroke: var(--accent-blue); stroke-width: 3.4; }
/* the building goes up from the ground, and the cross is the last thing on it */
.cp-js .cp-hosp path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1100ms var(--cp-ease); }
.cp-js .cp-hosp path:nth-of-type(2) { transition-delay: 200ms; }
.cp-js .cp-hosp path:nth-of-type(3) { transition-delay: 420ms; }
.cp-js .cp-hosp path:nth-of-type(4) { transition-delay: 640ms; }
.cp-js .cp-hosp path:nth-of-type(5) { transition-delay: 800ms; }
.cp-js .cp-hosp .cp-hosp__cross { transition-duration: 500ms; transition-delay: 1300ms; }
.cp-js .cp-hosp:not(.is-in) path { stroke-dashoffset: 1; }
.cp-on__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.cp-on__list li { border-top: 1px solid var(--border); }
.cp-on__list li:last-child { border-bottom: 1px solid var(--border); }
.cp-on__list a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 28px; gap: clamp(16px, 2.4vw, 36px); align-items: center; min-height: 72px; padding-block: 16px; color: var(--ink); text-decoration: none; transition: padding 420ms var(--cp-ease); }
.cp-on__t { font-family: var(--font-display); font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.2; transition: color 200ms; }
.cp-on__d { font-size: 16px; line-height: 1.55; color: var(--ink-muted); }
.cp-on__go { font-size: 20px; color: var(--accent-blue); transition: transform 360ms var(--cp-ease); }
.cp-on__list a:hover { padding-left: 10px; }
.cp-on__list a:hover .cp-on__t { color: var(--accent-blue-hover); }
.cp-on__list a:hover .cp-on__go { transform: translateX(6px); }
.cp-js .cp-on__list li:nth-child(2) { transition-delay: 90ms; }
.cp-js .cp-on__list li:nth-child(3) { transition-delay: 180ms; }
.cp-on__up { display: flex; flex-wrap: wrap; gap: 4px 32px; margin-top: 18px; }

/* ============ NARROWER ============ */
@media (max-width: 1100px) {
  .cp-stage { grid-template-columns: 28px minmax(0, 190px) minmax(0, 1fr) minmax(0, 200px); }
}
@media (max-width: 900px) {
  .cp-hero__row { grid-template-columns: minmax(0, 1fr); }
  .cp-doc__grid, .cp-doc--ambrosio .cp-doc__grid, .cp-doc--castillo .cp-doc__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 28px; }
  .cp-doc--ambrosio .cp-doc__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .cp-facts { grid-template-columns: minmax(0, 1fr); }
  .cp-tool { width: 72px; height: 72px; }
  .cp-stage { grid-template-columns: 28px minmax(0, 1fr); row-gap: 10px; }
  .cp-stage > :not(.cp-stage__node) { grid-column: 2; }
  .cp-who { flex-direction: row; flex-wrap: wrap; gap: 10px 18px; margin-top: 4px; }
  .cp-small__grid { grid-template-columns: minmax(0, 1fr); }
  .cp-charts { max-width: 420px; }
  .cp-on__grid { grid-template-columns: minmax(0, 1fr); }
  .cp-on__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
  .cp-hosp { width: 120px; margin-top: 0; }
}
@media (max-width: 640px) {
  /* three across on a phone: level, with room for a name that takes two lines */
  .cp-faces li:nth-child(2) { margin-top: 0; }
  .cp-face__name { font-size: 1rem; min-height: 2.4em; }
  .cp-face__role { font-size: 13px; align-items: flex-start; }
  .cp-face__role::after { margin-top: 3px; }
  .cp-doc__grid, .cp-doc--ambrosio .cp-doc__grid, .cp-doc--castillo .cp-doc__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cp-doc--ambrosio .cp-doc__photo { order: 0; }
  .cp-doc__grid { row-gap: 20px; }
  .cp-doc__photo { aspect-ratio: 5 / 4; }
  .cp-doc__photo img[width][height] { object-position: center 12%; }
  .cp-doc__body > p:not(.cp-doc__sub) { font-size: 17px; }
  .cp-facts dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cp-small__text p { font-size: 17px; }
  .cp-on__list a { grid-template-columns: minmax(0, 1fr) 24px; row-gap: 4px; }
  .cp-on__d { grid-column: 1; grid-row: 2; }
  .cp-on__go { grid-row: 1 / span 2; grid-column: 2; }
  .cp-pick button { padding-right: 12px; }
}

/* ============ REDUCED MOTION, PRINT ============ */
@media (prefers-reduced-motion: reduce) {
  .cphys *, .cphys *::before, .cphys *::after { animation: none !important; transition: none !important; }
  .cphys [data-r], .cphys [data-r] * { opacity: 1 !important; transform: none !important; translate: none !important; stroke-dashoffset: 0 !important; }
  .cphys .cp-face__frame { clip-path: none !important; }
  .cphys .cp-stage__node { background: var(--accent-ice); transform: none !important; }
  .cphys .cp-who__p :is(.cp-av, i) { transform: none !important; }
  .cphys .cp-trade { color: var(--ink) !important; }
  .cphys .cp-trade::before { transform: none !important; }
}
@media print {
  .cphys .hc-bar, .cphys .cp-pick { display: none !important; }
  /* a printout is one still frame: nothing may be caught part way through moving */
  .cphys main *, .cphys main *::before, .cphys main *::after { animation: none !important; transition: none !important; }
  .cphys [data-r], .cphys [data-r] * { opacity: 1 !important; transform: none !important; translate: none !important; stroke-dashoffset: 0 !important; }
  .cphys .cp-face__frame { clip-path: none !important; animation: none !important; }
  .cphys .cp-meet { background: #fff; color: #000; }
  .cphys .cp-meet :is(h2, h3, p, span, li, a) { color: #000 !important; }
  .cphys .cp-more summary { display: none; }
  .cphys .cp-doc, .cphys .cp-stage { break-inside: avoid; }
}

/* Parts waiting to slide in sit a little to one side; without this a phone
   could be scrolled sideways until they arrive. clip keeps sticky working. */
main { overflow-x: clip; }