/* /learn-clinic-hospital-not-clinic: its own sheet, loaded after site.css.
   One idea runs the page: the building. The hero shows the real one, the
   street drawing sets three kinds of "clinic" on one ground line, the board
   lays out what is down the hall, and the navy band lists who is in it.
   Script: scripts/learn-clinic-hospital-not-clinic.js. With that script absent
   every part is visible and every link still jumps. */

html:has(body.hnc) {
  --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);
}
.hnc {
  --hn-ease: cubic-bezier(.16, 1, .3, 1);
  --hn-gut: clamp(20px, 4vw, 56px);
  --hn-gap: 40px;              /* between the rooms on the board */
}

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

/* a term the glossary defines */
.hn-term { color: inherit; text-decoration: underline dotted; text-decoration-color: var(--accent-blue); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color 200ms, text-decoration-color 200ms; }
.hn-term:hover { color: var(--accent-blue-hover); text-decoration-style: solid; }

/* a link inside a sentence */
.hn-link { color: var(--accent-blue-hover); text-decoration: underline; text-decoration-color: rgba(45, 110, 177, .45); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color 200ms, text-decoration-color 200ms, text-underline-offset 200ms; }
.hn-link:hover { color: var(--accent-blue); text-decoration-color: currentColor; text-underline-offset: 6px; }
.hn-staff .hn-link { color: #fff; text-decoration-color: var(--accent-ice); }
.hn-staff .hn-link:hover { color: #fff; text-decoration-color: #fff; }

/* the onward link: the arrow leans the way it points */
.hn-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; }
.hn-go span { display: inline-block; transition: transform 360ms var(--hn-ease); }
.hn-go:hover { color: var(--accent-blue); text-decoration-color: currentColor; }
.hn-go:hover span { transform: translateX(6px); }
.hn-go--back:hover span { transform: translateX(-6px); }
.hn-staff .hn-go { color: #c9def2; }
.hn-staff .hn-go:hover { color: #fff; }

/* ============ REVEALS ============
   Hidden only once the script has said it is running (hn-js on <html>), so
   with no script nothing is ever hidden. Each part comes in its own way. */
.hn-js [data-r] { transition: opacity 620ms ease, transform 820ms var(--hn-ease); }
.hn-js [data-r]:not(.is-in) { opacity: 0; transform: translateY(18px); }
.hn-js [data-r="left"]:not(.is-in) { transform: translateX(-36px); }
.hn-js [data-r="right"]:not(.is-in) { transform: translateX(36px); }
.hn-js .hn-layer[data-r]:not(.is-in) { transform: translateX(28px); }
.hn-js .hn-layer + .hn-layer { transition-delay: 140ms; }
.hn-js :is(.hn-ask, .hn-rows) [data-r] { transition-delay: calc(var(--i, 0) * 90ms); }
/* a drawing is never faded: its lines are drawn */
.hn-js [data-r="draw"]:not(.is-in), .hn-js [data-r="map"]:not(.is-in) { opacity: 1; transform: none; }
.hn-d { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hn-d--thin { stroke: var(--border-strong); stroke-width: 1.4; }
.hn-d--blue { stroke: var(--accent-blue); }
.hn-js [data-r="draw"] .hn-d { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 950ms var(--hn-ease) calc(var(--d, 0) * 280ms), opacity 160ms linear calc(var(--d, 0) * 280ms); }
.hn-js [data-r="draw"]:not(.is-in) .hn-d { stroke-dashoffset: 1; opacity: 0; }
.hn-js [data-r="draw"] .hn-tick { transition-delay: calc(var(--d, 0) * 280ms + 700ms); transition-duration: 420ms, 160ms; }

/* ============ HERO ============ */
.hn-hero { padding-block: clamp(28px, 4vw, 56px) clamp(48px, 6vw, 88px); }
.hn-hero__h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.1rem, 4.4vw, 3.5rem); line-height: 1.06; letter-spacing: -.015em; color: var(--ink); margin: 0 0 clamp(28px, 4vw, 52px); max-width: none; text-wrap: wrap; }
.hn-hero__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.hn-hero__answer { font-size: clamp(1.12rem, 1.5vw, 1.32rem); line-height: 1.6; color: var(--ink); }

.hn-toc { position: relative; margin-top: clamp(24px, 3vw, 36px) !important; }
.hn-toc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--border-strong); transform-origin: left; }
.hn-toc li { border-bottom: 1px solid var(--border); }
.hn-toc a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding-block: 8px; font-size: 16px; line-height: 1.35; color: var(--ink-soft); transition: color 200ms, padding-left 360ms var(--hn-ease); }
.hn-toc a span { flex: none; color: var(--accent-blue); transition: transform 360ms var(--hn-ease); }
.hn-toc a:hover { color: var(--accent-blue-hover); padding-left: 8px; }
.hn-toc a:hover span { animation: hn-nudge 700ms var(--hn-ease); }

.hn-hero__photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px; background: var(--accent-wash); }
/* the photo is taller than its frame by the distance it travels */
.hn-hero__photo img[width][height] { display: block; width: 100%; height: calc(100% + 56px); margin-top: -28px; object-fit: cover; object-position: 38% 50%; translate: 0 var(--hn-py, 0px); will-change: translate; }

/* first paint: the name, the answer, then the building itself */
@keyframes hn-up { from { opacity: 0; transform: translateY(22px); } }
@keyframes hn-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes hn-wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hn-settle { from { transform: scale(1.09); } to { transform: scale(1); } }
@keyframes hn-line { from { transform: scaleX(0); } }
@keyframes hn-nudge { 40% { transform: translateY(5px); } }
.hn-js .hn-hero__h1 > * { animation: hn-up 900ms var(--hn-ease) both; }
.hn-js .hn-hero__h1 > em { animation-delay: 120ms; }
.hn-js .hn-hero__answer { animation: hn-up 900ms var(--hn-ease) 260ms both; }
.hn-js .hn-hero__photo { animation: hn-wipe 1100ms var(--hn-ease) 320ms both; }
.hn-js .hn-hero__photo img { animation: hn-settle 1800ms var(--hn-ease) 320ms both; }
.hn-js .hn-toc::before { animation: hn-line 800ms var(--hn-ease) 620ms both; }
.hn-js .hn-toc li { animation: hn-rise 640ms var(--hn-ease) both; }
.hn-js .hn-toc li:nth-child(1) { animation-delay: 700ms; }
.hn-js .hn-toc li:nth-child(2) { animation-delay: 780ms; }
.hn-js .hn-toc li:nth-child(3) { animation-delay: 860ms; }
.hn-js .hn-toc li:nth-child(4) { animation-delay: 940ms; }
.hn-js .hn-toc li:nth-child(5) { animation-delay: 1020ms; }

/* ============ CONTENTS BAR (follows the reader) ============ */
.hnc .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(--hn-ease), visibility 0s 360ms;
}
.hnc .hc-bar.is-on { transform: none; opacity: 1; visibility: visible; transition: opacity 260ms, transform 360ms var(--hn-ease); }
body.hnc.nav-open .hc-bar { opacity: 0; visibility: hidden; }
.hnc .hc-bar__track {
  max-width: calc(1240px + 2 * var(--hn-gut)); margin: 0 auto; padding: 0 var(--hn-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;
}
.hnc .hc-bar__track::-webkit-scrollbar { display: none; }
.hnc .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;
}
.hnc .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(--hn-ease);
}
.hnc .hc-bar__track a:hover, .hnc .hc-bar__track a[aria-current] { color: var(--ink); }
.hnc .hc-bar__track a:hover::after { transform: scaleX(.35); }
.hnc .hc-bar__track a[aria-current]::after { transform: scaleX(1); }
.hnc .hc-bar__track a:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -4px; border-radius: 4px; }
.hnc .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));
}

/* ============ WHY THE BUILDING MATTERS ============
   Two paragraphs side by side over one street. */
.hn-why { padding-block: clamp(48px, 6vw, 96px) clamp(40px, 5vw, 72px); border-top: 1px solid var(--border); }
.hnc .hn-why h2 { margin-bottom: clamp(24px, 3.4vw, 44px); }
.hn-why__text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); }
.hn-why__text p { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.hn-street { display: block; width: 100%; max-width: 760px; height: auto; margin: clamp(32px, 4vw, 56px) auto 0; overflow: visible; }
.hn-street__ground { stroke: var(--border-strong); }
.hn-lit { fill: var(--accent-blue); transform-box: fill-box; transform-origin: center; }
@keyframes hn-pop { from { transform: scale(0); opacity: 0; } 70% { transform: scale(1.2); opacity: 1; } }
.hn-js .hn-street:not(.is-in) .hn-lit { opacity: 0; }
.hn-js .hn-street.is-in .hn-lit { animation: hn-pop 460ms var(--hn-ease) calc(var(--d, 0) * 280ms + 760ms) both; }

/* ============ INSIDE THE HOSPITAL ============
   The words in a narrow column, the board beside them. */
.hn-inside { padding-block: clamp(40px, 5vw, 72px) clamp(56px, 7vw, 104px); }
.hn-inside > .hn-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(32px, 5vw, 80px); align-items: start; }
.hnc .hn-inside h2 { grid-column: 1 / -1; margin-bottom: clamp(28px, 4vw, 52px); }
.hn-inside__lede, .hn-inside__note { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.hn-inside__note { margin-top: 18px !important; }

.hn-map__board { position: relative; }
.hn-map__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* drawn in the board's own units, so a line can be drawn from one end */
.hn-map__lines path { fill: none; stroke: var(--border-strong); stroke-width: .6; }
.hn-map__lines .hn-map__to { stroke: var(--accent-blue); stroke-width: .8; }
.hn-map__grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--hn-gap); }
.hn-room { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 18px 18px 16px; background: #fff; border: 1px solid var(--border-strong); border-radius: 6px; }
.hn-room strong { font-size: 16.5px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.hn-room span { font-size: 14.5px; line-height: 1.4; color: var(--ink-muted); }
.hn-room b { margin-top: 6px; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--accent-blue-hover); }
.hn-room--crit { border: 1.5px solid var(--accent-blue); }
.hn-ic { width: 52px; height: 52px; padding: 13px; margin-bottom: 10px; border-radius: 50%; background: var(--accent-wash); overflow: visible; }
.hn-ic path { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* the suite sits in the middle of the board */
.hn-room--suite { grid-column: 2; grid-row: 2; background: var(--accent-blue-hover); border-color: var(--accent-blue-hover); }
.hn-room--suite strong { color: #fff; }
.hn-room--suite span { color: #d6e4f2; }
.hn-room__mark { flex: none; width: 52px; height: 52px; margin-bottom: 10px; border-radius: 50%; background: #fff url(../assets/celva-icon.svg) center / 30px auto no-repeat; }
.hn-map__grid > :nth-child(2) { grid-column: 1; grid-row: 1; }
.hn-map__grid > :nth-child(3) { grid-column: 2; grid-row: 1; }
.hn-map__grid > :nth-child(4) { grid-column: 3; grid-row: 1; }
.hn-map__grid > :nth-child(5) { grid-column: 1; grid-row: 2; }
.hn-map__grid > :nth-child(6) { grid-column: 3; grid-row: 2; }
.hn-map__grid > :nth-child(7) { grid-column: 1; grid-row: 3; }
.hn-map__grid > :nth-child(8) { grid-column: 2; grid-row: 3; }
.hn-map__grid > :nth-child(9) { grid-column: 3; grid-row: 3; }
/* someone on the way from the suite to the ICU, across the hall between them */
.hn-room--suite::after { content: ""; position: absolute; left: calc(50% - 5px); top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-blue); opacity: 0; }
@keyframes hn-travel { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(calc(-1 * var(--hn-gap))); opacity: 0; } }
.hn-js .hn-map.is-live .hn-room--suite::after { animation: hn-travel 2400ms cubic-bezier(.45, 0, .2, 1) 1600ms infinite; }

/* the board assembles from the suite outward */
@keyframes hn-glow { 0% { box-shadow: 0 0 0 0 rgba(45, 110, 177, .5); } 100% { box-shadow: 0 0 0 22px rgba(45, 110, 177, 0); } }
.hn-js .hn-map .hn-room { transition: opacity 520ms ease calc(var(--i, 0) * 80ms + 520ms), transform 760ms var(--hn-ease) calc(var(--i, 0) * 80ms + 520ms); }
.hn-js .hn-map:not(.is-in) .hn-room { opacity: 0; transform: scale(.94); }
.hn-js .hn-map .hn-room--suite { transition-delay: 0ms; }
.hn-js .hn-map.is-in .hn-room--suite { animation: hn-glow 1200ms ease-out 300ms; }
.hn-js .hn-map__lines path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 700ms var(--hn-ease) calc(var(--i, 0) * 80ms + 220ms); }
.hn-js .hn-map:not(.is-in) .hn-map__lines path { stroke-dashoffset: 1; }
.hn-js .hn-map .hn-ic path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 900ms var(--hn-ease) calc(var(--i, 0) * 80ms + 760ms); }
.hn-js .hn-map:not(.is-in) .hn-ic path { stroke-dashoffset: 1; }

.hn-map figcaption { margin-top: 22px; }
.hn-map__key { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.hn-key { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ink-muted); }
.hn-key::before { content: ""; width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border-strong); background: #fff; }
.hn-key--suite::before { background: var(--accent-blue-hover); border-color: var(--accent-blue-hover); }
.hn-key--crit::before { border: 1.5px solid var(--accent-blue); }

/* "Read more": native, opened for print, found by in-page search */
.hn-more { margin-top: 14px; }
.hn-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; }
.hn-more summary::-webkit-details-marker { display: none; }
.hn-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(--hn-ease); }
.hn-more summary:hover { color: var(--accent-blue); }
.hn-more summary:hover::after { transform: translateY(3px) rotate(45deg); }
.hn-more[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.hn-more[open] summary:hover::after { transform: translateY(-3px) rotate(-135deg); }
.hn-more__shut, .hn-more[open] .hn-more__open { display: none; }
.hn-more[open] .hn-more__shut { display: inline; }
.hn-more__body { padding-block: 8px 4px; }
.hn-more__body p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.hn-more__body p + p { margin-top: 14px !important; }
@keyframes hn-unfold { from { opacity: 0; transform: translateY(-8px); } }
.hn-more[open] .hn-more__body { animation: hn-unfold 420ms var(--hn-ease); }

/* ============ WHO INSPECTS IT ============
   Two papers held beside the two entries that explain them. */
.hn-over { padding-block: clamp(56px, 7vw, 104px); border-top: 1px solid var(--border); }
.hnc .hn-over h2, .hnc .hn-verify h2 { margin-bottom: clamp(28px, 4vw, 52px); }
.hn-over__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(32px, 5vw, 80px); align-items: start; }
.hn-over__aside { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 32px); }
.hn-papers { display: block; width: 100%; max-width: 380px; height: auto; overflow: visible; }
.hn-papers__sheet { fill: #fff; }
.hn-over__lede { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.hn-layer { margin-top: clamp(24px, 3vw, 36px); padding-top: clamp(20px, 2.4vw, 28px); border-top: 1px solid var(--border-strong); }
.hn-layer h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.2; }
.hn-layer p { margin-top: 10px !important; font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.hn-over__limit { margin-top: clamp(36px, 5vw, 64px) !important; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.7rem, 2.9vw, 2.6rem); line-height: 1.15; color: var(--ink); }
.hn-over__after { margin-top: 14px !important; font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
/* the seal lands on each paper once it is drawn */
@keyframes hn-stamp { from { transform: scale(1.5); opacity: 0; } 60% { transform: scale(.94); opacity: 1; } }
.hn-papers circle { transform-box: fill-box; transform-origin: center; }
.hn-js .hn-papers.is-in circle { animation: hn-stamp 520ms var(--hn-ease) calc(var(--d, 0) * 280ms + 520ms) both; }
.hn-js .hn-papers circle.hn-d { stroke-dasharray: none; transition: none; }
.hn-js .hn-papers:not(.is-in) circle.hn-d { opacity: 0; }

/* ============ WHO ELSE IS IN THE BUILDING (navy) ============
   Two buildings, and what each one holds, row for row. */
.hn-staff { padding-block: clamp(56px, 7vw, 104px); background: var(--navy-brand); color: #fff; }
.hnc .hn-staff h2 { color: #fff; }
.hn-staff__head { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.hn-staff__head > * { grid-column: 1; }
.hnc .hn-staff__head h2 { grid-column: 1 / -1; }
.hn-staff__head p { margin-top: clamp(16px, 2vw, 24px) !important; font-size: 18px; line-height: 1.7; color: rgba(255, 255, 255, .86); }
.hn-staff__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: clamp(36px, 5vw, 64px); }
.hn-col { display: grid; grid-template-rows: subgrid; grid-row: span 4; padding-right: clamp(20px, 4vw, 64px); }
.hn-col--hosp { padding-right: 0; padding-left: clamp(20px, 4vw, 64px); border-left: 1px solid rgba(255, 255, 255, .22); }
.hn-col__ic { width: 120px; height: 96px; align-self: end; overflow: visible; }
.hn-col__ic path { fill: none; stroke: var(--accent-ice); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hn-col__ic .hn-col__cross { stroke: #fff; stroke-width: 2.4; }
.hnc .hn-staff h3 { margin-top: 14px; font-size: clamp(1.4rem, 2.1vw, 1.9rem); line-height: 1.15; color: #fff; }
.hn-col > p { margin-top: 6px !important; font-size: 15px; color: #c9def2; }
.hn-col ul { margin-top: 18px !important; }
.hn-col li { padding-block: 13px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 17px; line-height: 1.5; color: #fff; }
/* each row arrives after the building it belongs to */
.hn-js .hn-col li { transition: opacity 520ms ease, transform 700ms var(--hn-ease); }
.hn-js .hn-col:not(.is-in) li { opacity: 0; transform: translateY(10px); }
.hn-js .hn-col li:nth-child(1) { transition-delay: 240ms; }
.hn-js .hn-col li:nth-child(2) { transition-delay: 310ms; }
.hn-js .hn-col li:nth-child(3) { transition-delay: 380ms; }
.hn-js .hn-col li:nth-child(4) { transition-delay: 450ms; }
.hn-js .hn-col li:nth-child(5) { transition-delay: 520ms; }
.hn-js .hn-col li:nth-child(6) { transition-delay: 590ms; }
.hn-staff__foot { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); row-gap: 10px; margin-top: clamp(36px, 5vw, 60px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid rgba(255, 255, 255, .22); }
.hn-staff__foot p { font-size: 18px; line-height: 1.7; color: rgba(255, 255, 255, .86); }
.hn-staff__foot > * { grid-column: 1; justify-self: start; }

/* ============ FIVE QUESTIONS (the one tinted band) ============
   The heading stays put while the five rows go past. */
.hn-verify { padding-block: clamp(56px, 7vw, 104px); background: var(--accent-wash); }
.hn-verify__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 80px); align-items: start; }
.hn-verify__head { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 32px); }
.hn-verify__head p { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.hn-glass { display: block; width: 180px; height: 180px; margin-top: 24px; overflow: visible; }
.hn-glass__lens { fill: rgba(255, 255, 255, .7); }
.hn-ask > li { padding-block: clamp(18px, 2.2vw, 26px); border-top: 1px solid var(--border-strong); }
.hn-ask > li:first-child { padding-top: 0; border-top: 0; }
.hn-ask h3 { font-size: clamp(1.35rem, 1.9vw, 1.7rem); line-height: 1.2; }
.hn-ask p { margin-top: 8px !important; font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
.hn-ask .hn-ask__where { font-size: 15.5px; color: var(--ink-muted); }
.hn-ask__where .hn-link { display: inline-block; padding-block: 10px; margin-block: -10px; }
/* each question can be ticked off while the reader is on the phone with a clinic */
.hn-ask > li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 8px; }
.hn-ask > li > :not(input) { grid-column: 2; }
.hn-ask input {
  -webkit-appearance: none; appearance: none; grid-column: 1; grid-row: 1 / span 3; align-self: start;
  width: 44px; height: 44px; margin: -6px 0 0 -9px; border: 9px solid transparent; border-radius: 14px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 0 0 no-repeat padding-box;
  box-shadow: inset 0 0 0 1.5px var(--ink-muted);
  transition: background-color 200ms, background-size 320ms var(--hn-ease), box-shadow 200ms;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.hn-ask input:hover { box-shadow: inset 0 0 0 2px var(--accent-blue); }
.hn-ask input:checked { background-color: var(--accent-blue); background-size: 18px 18px; box-shadow: inset 0 0 0 1.5px var(--accent-blue); }
.hn-ask input:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -5px; }
.hn-ask label { cursor: pointer; }
/* all five answered: the last line is the one that matters now */
.hn-verify__close { transition: border-color 500ms; }
.hn-verify__list:not(:has(.hn-ask input:not(:checked))) .hn-verify__close { border-top: 2px solid var(--accent-blue); }
.hn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hnc main a[target="_blank"]::after { content: "\2197" / ""; display: inline-block; margin-left: 4px; font-size: .85em; transition: transform 300ms var(--hn-ease); }
.hnc main a[target="_blank"]:hover::after { transform: translate(2px, -2px); }
.hn-verify__close { margin-top: clamp(20px, 2.6vw, 32px) !important; padding-top: clamp(20px, 2.6vw, 32px); border-top: 1px solid var(--border-strong); font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.hn-verify__close strong { font-weight: 600; color: var(--ink); }

/* ============ WHERE CELVA SITS, AND WHERE TO READ ON ============ */
.hn-next { padding-block: clamp(56px, 7vw, 104px); }
.hn-next__top { display: grid; grid-template-columns: clamp(72px, 9vw, 120px) minmax(0, 1fr); column-gap: clamp(20px, 4vw, 56px); align-items: center; }
.hn-pin { display: block; width: 100%; height: auto; overflow: visible; }
.hn-next__stand { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.6rem, 2.7vw, 2.4rem); line-height: 1.25; color: var(--ink); }
.hnc .hn-next h2 { margin-top: clamp(44px, 6vw, 80px); font-size: clamp(1.5rem, 2.2vw, 2rem); }
.hn-rows { margin-top: clamp(16px, 2vw, 24px) !important; border-top: 1px solid var(--border-strong); }
.hn-rows li { border-bottom: 1px solid var(--border); }
.hnc .hn-rows a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) 32px; align-items: center; column-gap: clamp(16px, 3vw, 48px); padding-block: 20px; color: var(--ink); transition: padding-left 420ms var(--hn-ease), background-color 300ms; }
.hn-rows__t { font-family: var(--font-display); font-size: clamp(1.3rem, 1.9vw, 1.65rem); line-height: 1.2; transition: color 200ms; }
.hn-rows__d { font-size: 16px; line-height: 1.55; color: var(--ink-muted); }
.hn-rows__go { justify-self: end; font-size: 20px; color: var(--accent-blue); transition: transform 420ms var(--hn-ease); }
.hnc .hn-rows a:hover { padding-left: 12px; }
.hn-rows a:hover .hn-rows__t { color: var(--accent-blue-hover); }
.hn-rows a:hover .hn-rows__go { transform: translateX(8px); }
.hn-next__up { display: flex; flex-wrap: wrap; gap: 4px 32px; margin-top: 20px !important; }

/* ============ NARROWER ============ */
@media (max-width: 1100px) {
  /* the bar's track can scroll here, so its edges fade */
  .hnc .hc-bar__track { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); }
  .hnc { --hn-gap: 28px; }
}
@media (max-width: 900px) {
  .hn-hero__row, .hn-inside > .hn-wrap, .hn-over__grid, .hn-verify__grid { grid-template-columns: minmax(0, 1fr); }
  .hn-hero__photo { order: -1; }
  .hn-hero__row { gap: 24px; }
  .hn-map { margin-top: 28px; }
  .hn-over__aside, .hn-verify__head { position: static; }
  .hn-papers { max-width: 260px; margin-bottom: 20px; }
  .hn-glass { display: none; }
  .hn-verify__list { margin-top: 28px; }
  .hn-staff__foot, .hn-staff__head { grid-template-columns: minmax(0, 1fr); }
  .hnc .hn-rows a { grid-template-columns: minmax(0, 1fr) 32px; }
  .hn-rows__d { grid-column: 1; grid-row: 2; margin-top: 4px; }
  .hn-rows__go { grid-column: 2; grid-row: 1; }
}
@media (max-width: 760px) {
  .hn-why__text { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* the two buildings stack, and each keeps its own list */
  .hn-staff__cols { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .hn-col, .hn-col--hosp { display: block; grid-row: auto; padding: 0; border-left: 0; }
  .hn-col--hosp { padding-top: 36px; border-top: 1px solid rgba(255, 255, 255, .22); }
  .hn-col__ic { width: 96px; height: 77px; }
  .hn-js [data-r="left"]:not(.is-in), .hn-js [data-r="right"]:not(.is-in) { transform: translateY(18px); }
  /* the board becomes a list of rooms, the suite first */
  .hnc { --hn-gap: 10px; }
  .hn-map__lines { display: none; }
  .hn-map__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: auto; }
  .hn-map__grid > .hn-room { grid-column: auto; grid-row: auto; padding: 14px 12px 12px; }
  .hn-map__grid > .hn-room--suite { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; }
  .hn-room__mark { width: 44px; height: 44px; margin-bottom: 0; background-size: 26px auto; }
  .hn-room--suite strong { flex: 1; }
  .hn-room--suite span { flex-basis: 100%; }
  .hn-room--suite::after { display: none; }
  .hn-ic { width: 44px; height: 44px; padding: 11px; margin-bottom: 8px; }
  .hn-room strong { font-size: 15.5px; }
  .hn-room span, .hn-room b { font-size: 14px; }
}
@media (max-width: 600px) {
  html:has(body.hnc) { --hc-bar-h: 48px; }
  .hnc .hc-bar__track { gap: 22px; }
  .hn-hero__photo { aspect-ratio: 4 / 3; }
  .hn-toc a { font-size: 15.5px; }
  .hn-next__top { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .hn-pin { width: 64px; }
}

@supports not (grid-template-rows: subgrid) {
  .hn-col { display: block; }
}

/* ============ STILL ============
   Reduced motion: every drawing holds its finished state and nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .hnc main *, .hnc main *::before, .hnc main *::after { animation: none !important; transition: none !important; }
  .hn-js [data-r]:not(.is-in), .hn-js .hn-map:not(.is-in) .hn-room, .hn-js .hn-col:not(.is-in) li { opacity: 1 !important; transform: none !important; }
  .hn-js [data-r="draw"] .hn-d, .hn-js .hn-map__lines path, .hn-js .hn-map .hn-ic path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
  .hn-js .hn-street:not(.is-in) .hn-lit, .hn-js .hn-papers:not(.is-in) circle.hn-d { opacity: 1 !important; }
  .hn-hero__photo img[width][height] { translate: none; }
  .hnc .hc-bar { transition: none !important; }
  .hn-go:hover span, .hn-rows a:hover .hn-rows__go { transform: none; }
  .hn-toc a:hover, .hnc .hn-rows a:hover { padding-left: 0; }
}
@media print {
  .hnc .hc-bar, .hn-more > summary { display: none !important; }
  .hn-js [data-r], .hn-js .hn-map .hn-room, .hn-js .hn-col li, .hn-js .hn-lit, .hn-js .hn-papers circle.hn-d { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .hn-js [data-r="draw"] .hn-d, .hn-js .hn-map__lines path, .hn-js .hn-map .hn-ic path { stroke-dasharray: none !important; opacity: 1 !important; }
  .hn-js .hn-hero :is(h1 > *, p, figure, li, img) { animation: none !important; }
  .hn-staff { background: #fff; color: var(--ink); }
  .hnc .hn-staff :is(h2, h3, li, p) { color: var(--ink); }
  .hn-over__aside, .hn-verify__head { position: static; }
  .hn-verify { background: #fff; }
  .hn-ask > li, .hn-layer, .hn-col { break-inside: avoid; }
  .hnc main a[target="_blank"]::after { content: none; }
}

/* Paper is taken the instant the print dialog opens: nothing may still be fading or sliding in. */
@media print {
  main *, main *::before, main *::after { animation: none !important; transition: none !important; }
}