/* ------------------------------------------------------------------
   Is my doctor using AI?
   World: a hospital wayfinding system. Corridor-grey walls, charcoal
   sign plates with white signage type, square pictogram tags coded
   information blue, procedure green, emergency red, caution yellow.
   Yellow is reserved for direction and action. Square corners, no
   shadows, no cards: plates and rules carry the structure, and the
   reading column stays calm.
   ------------------------------------------------------------------ */

/* Self-hosted fonts (latin subset), SIL Open Font License, see fonts/ */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("fonts/archivo-var.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/atkinson-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/atkinson-400.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/atkinson-700.woff2") format("woff2");
}

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("fonts/caveat-var.woff2") format("woff2");
}

:root {
  --wall: #f4f5f3;          /* corridor wall, the page ground: clinical white */
  --wall-2: #e9ece9;        /* a second wing, one step darker */
  --paper: #ffffff;         /* forms, door plates, instrument panels */
  --plate: #1e252b;         /* charcoal enamel sign plate */
  --plate-2: #2a333a;       /* hovered row on a plate */
  --on-plate: #ffffff;
  --on-plate-2: #b9c2c9;
  --ink: #1b2126;
  --ink-2: #47515a;
  --rule: #d3d8d5;
  --rule-strong: #1b2126;
  --link: #1b56ad;
  --blue: #1f5fbf;          /* information */
  --green: #007a53;         /* care and procedures */
  --red: #c8102e;           /* emergency */
  --yellow: #f2c230;        /* direction, action, caution */
  --grey: #5f6870;          /* behind the scenes */
  --bar-0: #9aa3a8;         /* "without AI" series */
  --hud: #8ff5c2;
  --box: #19d17a;
  --focus: #1f5fbf;
  --good: #006b49;          /* green as text, AA on --wall-2 */
  --bad: #b00e29;           /* red as text, AA on --wall-2 */

  --sign: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Atkinson Hyperlegible", "Segoe UI", Roboto, system-ui, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --measure: 66ch;
  --gutter: clamp(16px, 4vw, 40px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --wall: #111518;
    --wall-2: #161b1f;
    --paper: #1a2025;
    --plate: #232b32;
    --plate-2: #2e3840;
    --on-plate-2: #b9c2c9;
    --ink: #e8ecee;
    --ink-2: #b3bdc4;
    --rule: #2f3a42;
    --rule-strong: #e8ecee;
    --link: #7fb0ff;
    --bar-0: #56626a;
    --focus: #7fb0ff;
    --good: #4fd19a;
    --bad: #ff7a8a;
    color-scheme: dark;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; scrollbar-color: var(--ink-2) var(--wall); }
body {
  margin: 0;
  background: var(--wall);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  padding-inline: var(--gutter);
  overflow-x: hidden;
}
::selection { background: var(--yellow); color: #1b2126; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--sign); font-weight: 700; line-height: 1.1; margin: 0; letter-spacing: -0.01em; text-wrap: balance; font-stretch: 100%; }
h1 { font-size: clamp(2.9rem, 6.4vw, 5.4rem); font-weight: 800; line-height: 0.98; letter-spacing: -0.03em; font-stretch: 94%; }
h2 { font-size: clamp(2rem, 3.4vw, 2.6rem); letter-spacing: -0.02em; font-stretch: 98%; }
h3 { font-size: 1.7rem; }
h4 { font-size: 1.35rem; }
p, li { text-wrap: pretty; }
p { margin: 0; }
.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1em; }
.lede { font-size: clamp(1.1rem, 1.6vw, 1.28rem); line-height: 1.5; color: var(--ink-2); max-width: 60ch; }
sup.cite { font-size: 0.7em; line-height: 0; vertical-align: super; margin-left: 1px; }
sup.cite a { text-decoration: none; font-variant-numeric: tabular-nums; }
sup.cite a:hover { text-decoration: underline; }
abbr[title] { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.wrap { max-width: 1160px; margin-inline: auto; }
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 30;
  padding: 10px 16px; background: var(--yellow); color: #1b2126; font-family: var(--sign); font-weight: 700;
}
.skip-link:focus { top: 12px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- pictogram tags: the signage system's one repeated element ---------- */
.pict { display: grid; place-items: center; flex: 0 0 auto; width: 64px; height: 64px; color: #fff; background: var(--blue); }
.pict svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.pict.green { background: var(--green); }
.pict.yellow { background: var(--yellow); color: #1b2126; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  background: var(--plate); color: var(--on-plate);
}
.topbar .wrap { display: flex; align-items: center; gap: 28px; min-height: 58px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--sign); font-weight: 700; font-size: 1.05rem; font-stretch: 92%; text-decoration: none; color: var(--on-plate); white-space: nowrap; }
.topbar nav { margin-left: auto; min-width: 0; overflow-x: auto; scrollbar-width: none; align-self: stretch; }
.topbar nav::-webkit-scrollbar { display: none; }
.topbar nav ul { list-style: none; margin: 0; padding: 0; display: flex; height: 100%; }
.topbar nav a {
  display: flex; align-items: center; height: 100%; padding: 0 12px;
  font-family: var(--sign); font-weight: 600; font-size: 0.92rem; font-stretch: 92%;
  color: var(--on-plate-2); text-decoration: none; white-space: nowrap;
  border-bottom: 4px solid transparent; border-top: 4px solid transparent;
}
.topbar nav a:hover { color: var(--on-plate); }
.topbar nav a[aria-current="true"] { color: var(--on-plate); border-bottom-color: var(--yellow); }
.topbar :focus-visible, .entrance :focus-visible, .board :focus-visible, .quiz-result :focus-visible, footer :focus-visible { outline-color: var(--yellow); }

/* ---------- hero: the main entrance sign ---------- */
.hero { padding-block: clamp(32px, 6vw, 80px) clamp(40px, 6vw, 72px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.hero-copy { display: grid; gap: 16px; min-width: 0; }
.entrance { background: var(--plate); color: var(--on-plate); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(24px, 3.5vw, 44px); row-gap: 22px; padding-right: clamp(24px, 4vw, 48px); }
.entrance .pict { grid-row: 1 / span 3; align-self: start; }
.entrance > :not(.pict) { grid-column: 2; }
.entrance .hero-actions { padding-bottom: clamp(28px, 4vw, 44px); }
.entrance h1 { max-width: 11ch; padding-top: clamp(28px, 4vw, 44px); color: var(--on-plate); }
.entrance .lede { color: var(--on-plate-2); max-width: 44ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 4px; }
.entrance .text-link { color: var(--yellow); font-family: var(--sign); font-weight: 700; font-stretch: 92%; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 0.9rem; color: var(--ink-2); }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px; border: 2px solid var(--ink); background: transparent; color: var(--ink);
  font-family: var(--sign); font-weight: 700; font-size: 1rem; font-stretch: 92%; text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn:hover { background: var(--ink); color: var(--wall); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--yellow); border-color: var(--yellow); color: #1b2126; }
.btn.primary:hover { background: #ffd54f; border-color: #ffd54f; color: #1b2126; }
.arrow, .go { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; }
.scope-frame { min-width: 0; }
.scope-frame figcaption { margin-top: 14px; padding-top: 10px; border-top: 2px solid var(--rule-strong); font-size: 0.88rem; line-height: 1.5; color: var(--ink-2); max-width: 52ch; }
figure { margin: 0; }

/* ---------- the scope view (shared by hero + demo) ---------- */
.scope { display: block; width: 100%; aspect-ratio: 1 / 1; background: #07090b; }
.scope text { font-family: var(--mono); }
.scope .hud text { fill: var(--hud); font-size: 15px; letter-spacing: 0.04em; }
.scope .hud path { stroke: var(--hud); stroke-width: 2; fill: none; opacity: 0.8; }
.scope .det rect.box { fill: none; stroke: var(--box); stroke-width: 3; }
.scope .det rect.tag { fill: var(--box); }
.scope .det text { fill: #06200f; font-size: 14px; font-weight: 600; }
.scope.loop .det { opacity: 0; transform-origin: center; animation: detect 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards; }
.scope.loop .det-2 { animation-delay: 2s; }
@keyframes detect { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }
.scope.demo .det { opacity: 0; transition: opacity 0.25s ease; }
.scope.demo.ai-on .det { opacity: 1; }
.scope.demo:not(.ai-on) .hud .ai-state { fill: #e0827d; }

/* ---------- sections and their sign plates ---------- */
section { padding-block: clamp(64px, 9vw, 120px) clamp(56px, 8vw, 104px); }
.section-head { display: grid; gap: 22px; justify-items: start; margin-bottom: clamp(32px, 4.5vw, 52px); }
.sign { --band: var(--blue); --band-ink: #fff; display: flex; align-items: center; gap: 4px; max-width: 100%; padding: 6px 34px 6px 10px; background: var(--band); color: var(--band-ink); }
.sign:has(> .pict.green) { --band: var(--green); }
.sign:has(> .pict.yellow) { --band: var(--yellow); --band-ink: #1b2126; }
.sign > .pict { background: none; color: inherit; }
.sign h2 { color: inherit; padding: 16px 0 18px; max-width: 24ch; }

/* short answer: three stops on a visit */
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.5vw, 44px); }
.three article { display: grid; gap: 14px; align-content: start; padding-top: 18px; border-top: 4px solid var(--rule-strong); }
.three article h3 { font-size: 1.7rem; }
.three article p { color: var(--ink-2); }

/* ---------- directory board and door plate ---------- */
.directory { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
.board { list-style: none; margin: 0; padding: 10px 0 18px; background: var(--paper); color: var(--ink); }
.board ul { list-style: none; margin: 0; padding: 0; }
.wing h3 { font-size: 0.98rem; font-weight: 600; font-stretch: 92%; color: var(--ink-2); padding: 16px 24px 8px; letter-spacing: 0; }
.dir-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 20px; align-items: center; gap: 14px;
  width: 100%; padding: 8px 20px 8px 24px; border: 0; border-top: 1px solid var(--rule);
  background: none; color: var(--ink); text-align: left; cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.dir-row:hover { background: var(--wall); }
.dir-row .tag { display: grid; place-items: center; width: 40px; height: 40px; background: var(--wing); color: var(--wing-ink, #fff); }
.dir-row .tag svg { width: 26px; height: 26px; }
.dir-row .name { font-family: var(--sign); font-weight: 700; font-size: 1.18rem; font-stretch: 92%; line-height: 1.2; }
.dir-row .lik { font-size: 0.86rem; color: var(--ink-2); white-space: nowrap; }
.dir-row .lik.l3 { color: var(--ink); font-weight: 700; }
.dir-row .go { opacity: 0; color: var(--ink); }
.dir-row[aria-pressed="true"] { background: color-mix(in srgb, var(--wing) 13%, #fff); }
.dir-row[aria-pressed="true"] .go { opacity: 1; }
.w-imaging { --wing: var(--blue); }
.w-procedures { --wing: var(--green); }
.w-acute { --wing: var(--red); }
.w-clinics { --wing: var(--plate); }
.w-behind { --wing: var(--grey); }

.door { background: var(--paper); position: sticky; top: 76px; min-width: 0; }
.door-head { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: start; gap: 18px; padding: 22px 28px; background: var(--wing); color: var(--wing-ink, #fff); animation: open 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
.door-head.w-clinics { --wing: var(--plate); --wing-ink: #fff; }
.door-head .tag svg { width: 48px; height: 48px; }
.door-head h3 { font-size: clamp(1.9rem, 3vw, 2.4rem); color: inherit; }
.door-head p { margin-top: 6px; font-size: 1rem; }
.door-head .lik { font-family: var(--sign); font-weight: 700; font-stretch: 92%; font-size: 0.95rem; border: 2px solid currentColor; padding: 3px 9px; white-space: nowrap; margin-top: 6px; }
@keyframes open { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.door-body { display: grid; gap: 22px; padding: 26px 28px 30px; }
.door-body .how { color: var(--ink); }
.door-body h4 { margin-bottom: 8px; }
.door-body .example { font-size: 0.97rem; color: var(--ink-2); padding-top: 10px; border-top: 2px solid var(--rule-strong); }
.door-body .example strong { color: var(--ink); }
.door-body ul.links { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }

/* ---------- check-in sheet and result ticket ---------- */
.quiz { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(20px, 3vw, 36px); align-items: start; }
.quiz fieldset { margin: 0; min-width: 0; border: 0; background: var(--paper); padding: 26px 30px 18px; }
.quiz legend { float: left; width: 100%; font-family: var(--sign); font-weight: 700; font-size: 1.35rem; font-stretch: 92%; margin-bottom: 12px; }
.check { display: flex; gap: 16px; align-items: flex-start; padding: 13px 0; border-top: 1px solid var(--rule); cursor: pointer; clear: both; }
.check input { margin: 2px 0 0; width: 22px; height: 22px; accent-color: var(--green); flex: 0 0 auto; }
.check:has(input:checked) span { font-weight: 700; }
.check span { min-width: 0; }
.quiz-result { --on-plate: #fff; --on-plate-2: #e2f2ea; position: sticky; top: 80px; background: var(--green); color: var(--on-plate); padding: 28px 30px 30px; display: grid; gap: 16px; min-width: 0; }
.quiz-result .verdict { font-family: var(--sign); font-weight: 800; font-stretch: 88%; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.05; letter-spacing: -0.015em; }
.quiz-result .why { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; font-size: 0.95rem; color: var(--on-plate-2); }
.quiz-result .why li { padding-left: 22px; position: relative; }
.quiz-result .why li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; background: var(--on-plate); }
.quiz-result .why li strong { color: var(--on-plate); }
.quiz-result .empty { color: var(--on-plate-2); }

/* ---------- endoscopy suite ---------- */
#colonoscopy { background: var(--wall-2); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
.deep { display: grid; gap: clamp(56px, 7vw, 96px); }
.deep-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: start; }
.deep-block.flip > :first-child { order: 2; }
.deep-block .prose { display: grid; gap: 14px; }
.deep-block .prose p + p { margin-top: 0; }
.deep-block h3 { font-size: clamp(1.9rem, 3vw, 2.4rem); margin-bottom: 4px; }
.panel { border-top: 2px solid var(--rule-strong); padding-top: 16px; display: grid; gap: 16px; min-width: 0; }

/* ADR slider */
.adr-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.adr-row label { font-weight: 700; }
.adr-row .big { font-family: var(--sign); font-weight: 800; font-stretch: 85%; font-size: 3.2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.adr-row .big small { font-size: 1.1rem; font-weight: 600; color: var(--ink-2); margin-left: 4px; }
input[type="range"] { width: 100%; accent-color: var(--green); margin: 6px 0; }
.ticks { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.readout { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--rule-strong); }
.readout div { padding: 12px 14px 4px 0; display: grid; gap: 2px; min-width: 0; }
.readout div + div { padding-left: 14px; border-left: 1px solid var(--rule); }
.readout .v { font-family: var(--sign); font-weight: 800; font-stretch: 88%; font-size: 1.8rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.readout .k { font-size: 0.84rem; color: var(--ink-2); }
.meter { height: 10px; background: var(--wall-2); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--green); }
.footnote { font-size: 0.84rem; color: var(--ink-2); }

/* demo toggle */
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-family: var(--sign); font-weight: 700; font-stretch: 92%; font-size: 1.1rem; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { width: 52px; height: 28px; background: var(--bar-0); position: relative; transition: background 0.2s ease; flex: 0 0 auto; }
.switch .track::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; background: #fff; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.switch input:checked + .track { background: var(--green); }
.switch input:checked + .track::after { transform: translateX(24px); }
.switch input:focus-visible + .track { outline: 3px solid var(--focus); outline-offset: 2px; }
.det-count { font-family: var(--mono); font-size: 0.88rem; color: var(--ink-2); }
.det-count b { color: var(--ink); }
.demo-legend { display: grid; gap: 6px; font-size: 0.92rem; color: var(--ink-2); }
.demo-legend span::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 10px; vertical-align: -1px; }
.demo-legend .p1::before { background: #c86a70; }
.demo-legend .p2::before { background: #efc3bf; outline: 1px solid #c86a70; outline-offset: -1px; }

/* evidence chart */
.chart { display: grid; gap: 12px; }
.legend { display: flex; gap: 20px; flex-wrap: wrap; font-size: 0.9rem; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 16px; height: 10px; display: inline-block; }
.legend .s0 i { background: var(--bar-0); }
.legend .s1 i { background: var(--green); }
.rows { display: grid; gap: 16px; }
.row { display: grid; gap: 4px; }
.row .lab { font-size: 0.94rem; color: var(--ink); font-weight: 700; }
.row .lab small { color: var(--ink-2); font-weight: 400; }
.bars { display: grid; gap: 3px; }
.bar { display: grid; grid-template-columns: minmax(0, 1fr) 54px; align-items: center; gap: 8px; height: 16px; }
.bar i { display: block; height: 14px; width: var(--w); }
.bar.s0 i { background: var(--bar-0); }
.bar.s1 i { background: var(--green); }
.bar b { font-size: 0.9rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.axis { display: flex; justify-content: space-between; font-size: 0.76rem; color: var(--ink-2); border-top: 2px solid var(--rule-strong); padding-top: 4px; margin-right: 62px; font-variant-numeric: tabular-nums; }
details.table { font-size: 0.92rem; }
details.table summary { cursor: pointer; color: var(--link); font-weight: 700; }
table { border-collapse: collapse; width: 100%; margin-top: 10px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th { font-family: var(--sign); font-size: 0.9rem; font-stretch: 92%; color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--rule-strong); }
td.num, th.num { text-align: right; }
.table-scroll { overflow-x: auto; }

/* ledger tables */
.ledger { font-size: 0.96rem; }
.ledger th, .ledger td { padding: 10px 8px; }
.ledger tbody th { font-weight: 400; color: var(--ink); }
.ledger tbody th small { display: block; margin-top: 2px; font-size: 0.84rem; line-height: 1.45; color: var(--ink-2); }
.ledger td.num { font-family: var(--mono); font-size: 0.9rem; white-space: nowrap; }
.ledger tr.total td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--rule-strong); }
.ledger .up { color: var(--bad); }
.ledger .down { color: var(--good); }
.outcomes { max-width: 780px; }

/* glossary */
.glossary dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 9px 18px; font-size: 0.94rem; }
.glossary dt { font-family: var(--sign); font-weight: 700; font-stretch: 92%; }
.glossary dd { margin: 0; color: var(--ink-2); }

/* ---------- caution notices ---------- */
.catch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 64px) clamp(24px, 5vw, 64px); }
.catch { display: grid; gap: 14px; align-content: start; }
.catch h3 { padding-top: 14px; border-top: 4px solid var(--ink); font-size: 1.7rem; }
.catch p { color: var(--ink-2); }
.catch .fix { padding-top: 12px; border-top: 2px solid var(--rule-strong); color: var(--ink); }
.mini-bars { display: grid; gap: 6px; margin-top: 2px; }
.mini { display: grid; grid-template-columns: 130px minmax(0, 1fr) 56px; align-items: center; gap: 10px; font-size: 0.88rem; }
.mini i { display: block; height: 12px; width: var(--w); }
.mini.before i { background: var(--bar-0); }
.mini.after i { background: var(--red); }
.mini b { font-variant-numeric: tabular-nums; }

/* ---------- survey results, ranked ---------- */
.pew-list { list-style: none; margin: 0; padding: 0; display: grid; max-width: 880px; border-bottom: 2px solid var(--rule-strong); }
.pew { display: grid; grid-template-columns: 6rem minmax(0, 1fr); column-gap: 22px; row-gap: 10px; align-items: start; padding: 18px 0; border-top: 2px solid var(--rule-strong); }
.pew .value { grid-row: span 2; font-family: var(--sign); font-weight: 800; font-stretch: 85%; font-size: clamp(2.2rem, 3.6vw, 2.8rem); line-height: 1; font-variant-numeric: tabular-nums; }
.pew .label { color: var(--ink-2); }
.pew .bar { grid-column: 2; display: block; height: 6px; background: var(--wall-2); }
.pew .bar i { display: block; height: 100%; width: var(--w); background: var(--blue); }
.pew-list + .prose { margin-top: 40px; }

/* ---------- the take-home question card ---------- */
.ask { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.ask ol { list-style: none; counter-reset: q; margin: 0; padding: 0; border-top: 2px solid var(--rule-strong); }
.ask li { counter-increment: q; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 0; }
.ask li + li { border-top: 1px solid var(--rule); }
.ask li::before { content: counter(q); display: grid; place-items: center; width: 34px; height: 34px; background: var(--green); color: #fff; font-family: var(--sign); font-weight: 800; font-size: 1.05rem; }
.ask li > div { min-width: 0; }
.ask li q { display: block; font-family: var(--sign); font-weight: 700; font-stretch: 92%; font-size: 1.28rem; line-height: 1.34; quotes: "“" "”"; }
.ask li span { display: block; color: var(--ink-2); font-size: 0.95rem; margin-top: 6px; }
.ask aside { display: grid; gap: 14px; justify-items: start; }
.ask .copied { font-weight: 700; color: var(--good); min-height: 1.5em; }

/* ---------- records: sources ---------- */
.refs { counter-reset: ref; list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; font-size: 0.94rem; max-width: 80ch; }
.refs li { counter-increment: ref; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; scroll-margin-top: 90px; }
.refs li::before { content: counter(ref); font-family: var(--sign); font-weight: 700; font-variant-numeric: tabular-nums; }
.refs li:target { background: var(--yellow); color: #1b2126; outline: 6px solid var(--yellow); }
.refs li:target a { color: #1b2126; }
.refs .wiki { color: var(--ink-2); font-size: 0.86rem; }
.wiki-list li { grid-template-columns: minmax(0, 1fr); }
.wiki-list li::before { content: none; }
.refs-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); }
.refs-split h3 { margin-bottom: 16px; padding-bottom: 10px; border-bottom: 4px solid var(--rule-strong); }

/* ---------- footer: the building plate ---------- */
footer { margin-inline: calc(-1 * var(--gutter)); padding: 40px var(--gutter) 56px; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: 0.92rem; }
footer .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; }
footer p { max-width: 62ch; }
footer .brand + p { margin-top: 14px; }
footer a { color: var(--link); }
footer .brand { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scope.loop .det { animation: none; opacity: 1; }
  .scope.demo .det, .switch .track, .switch .track::after { transition: none; }
  .door-head { animation: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1040px) {
  .topbar nav { mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 28px), transparent); }
  .topbar nav ul { padding-right: 28px; }
}
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .scope-frame { max-width: 520px; width: 100%; }
  .three { grid-template-columns: 1fr; }
  .directory, .quiz, .deep-block, .catch-grid, .ask, .refs-split { grid-template-columns: 1fr; }
  .deep-block.flip > :first-child { order: 0; }
  .door, .quiz-result { position: static; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .pict { width: 52px; height: 52px; }
  .pict svg { width: 28px; height: 28px; }
  .sign h2 { padding: 14px 18px 16px 16px; }
  .readout { grid-template-columns: 1fr; }
  .readout div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
  .door-head { grid-template-columns: 44px minmax(0, 1fr); padding: 18px 20px; }
  .door-head .tag svg { width: 40px; height: 40px; }
  .door-head .lik { grid-column: 2; justify-self: start; }
  .door-body { padding: 22px 20px 24px; }
  .quiz fieldset { padding-inline: 20px; }
  .glossary dl { grid-template-columns: 1fr; gap: 2px 0; }
  .glossary dd { margin-bottom: 8px; }
  .mini { grid-template-columns: 96px minmax(0, 1fr) 50px; }
  .pew { grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 14px; }
  footer .wrap { grid-template-columns: 1fr; }
  .topbar .wrap { gap: 14px; }
}

/* ---------- hospital map (script.js adds html.tour; without it the page stays the long version) ---------- */
.tour [hidden] { display: none !important; }
/* A hospital is always lit: with the map on, the page keeps its light values even in dark mode.
   (Without JavaScript the plain page still follows the system setting.) */
@media (prefers-color-scheme: dark) {
  html.tour {
    --wall: #f4f5f3; --wall-2: #e9ece9; --paper: #ffffff; --plate: #1e252b; --plate-2: #2a333a; --on-plate-2: #b9c2c9;
    --ink: #1b2126; --ink-2: #47515a; --rule: #d3d8d5; --rule-strong: #1b2126; --link: #1b56ad; --bar-0: #9aa3a8;
    --focus: #1f5fbf; --good: #006b49; --bad: #b00e29;
    color-scheme: light;
  }
}
html.intro-open { overflow: hidden; }
@property --p { syntax: "<number>"; inherits: false; initial-value: 0.04; }

/* the front page is the map: the title stays, the rest of the entrance plate steps aside */
.tour .hero { height: calc(100dvh - var(--tb, 58px)); min-height: 420px; padding: 20px 0 16px; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: clip; }
.tour .hero .wrap { display: block; width: 100%; position: relative; z-index: 1; pointer-events: none; }
.tour .hero .wrap a { pointer-events: auto; }
.tour .entrance { display: block; background: none; color: var(--ink); padding: 0; }
.tour .entrance h1 { padding: 0; max-width: none; color: var(--ink); font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.tour .entrance .pict, .tour .entrance .lede, .tour .hero-actions, .tour .scope-frame, .tour .hero-meta span:nth-child(3) { display: none; }
.tour .hero-meta { margin-top: 6px; }
.tour .hero h1:focus { outline: none; }
.in-room .topbar .brand { display: none; }
@media (min-width: 1041px) { .in-room .topbar .brand { display: inline-flex; } }

.map { position: relative; overflow: hidden; transition: transform 0.42s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.42s ease-in; }
.map.zoom { transform: scale(3.2); opacity: 0; }
.map.snap { transition: none; }
.floor {
  --rx: 56deg; --rz: 45deg; --wh: 46px;
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: grid; grid-template-columns: repeat(4, 230px); grid-template-rows: 200px 130px 200px;
  transform: scale(var(--s, 1)) rotateX(var(--rx)) rotateZ(var(--rz)); transform-style: preserve-3d;
  pointer-events: none; /* the plan itself would win hit tests over the rooms lying in its plane */
}
.room {
  --band: var(--blue); --band-ink: #fff;
  position: relative; container-type: size; transform-style: preserve-3d; pointer-events: auto;
  outline-offset: -5px; transition: background-color 0.18s ease;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M8 4v32l8-8 6 13 6-3-6-13h11z' fill='%231b2126' stroke='%23f2c230' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 8 4, pointer;
}
.room.band-green { --band: var(--green); }
.room.band-yellow { --band: var(--yellow); --band-ink: #1b2126; }
.room:hover, .room:focus-visible { background-color: rgb(242 194 48 / 0.16); outline: 5px solid var(--yellow); }
.corridor {
  grid-area: 2 / 1 / 3 / -1; position: relative; container-type: size; transform-style: preserve-3d;
}
/* the rendered building: --k is render pixels per floor unit, --cx/--cy the floor centre in the render */
.art { --w: 2400px; --k: 2.2003; --cx: 50%; --cy: 52.268%; position: absolute; left: 50%; top: 50%; width: calc(var(--w) * var(--s, 1) / var(--k)); translate: calc(var(--cx) * -1) calc(var(--cy) * -1); pointer-events: none; }
.art img { display: block; width: 100%; height: auto; }

/* billboards: stand upright facing you, wherever they are on the floor */
.room-sign, .walker { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; transform: rotateZ(calc(var(--rz) * -1)) rotateX(calc(var(--rx) * -1)); }
.room-sign { left: 50%; top: 6%; }
.room-name {
  position: absolute; bottom: 30px; left: 0; translate: -50% 0;
  display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; white-space: nowrap;
  background: var(--band); color: var(--band-ink); border: 3px solid #fff; outline: 2px solid #b7bec2;
  font: 800 22px/1 var(--sign); font-stretch: 88%; letter-spacing: -0.01em;
}
.room-name::after { content: ""; position: absolute; left: calc(50% - 2px); top: 100%; width: 4px; height: 33px; background: #8b9599; }
.room-name .pict { width: 40px; height: 40px; background: #fff; color: var(--band); }
.room-name .pict svg { width: 26px; height: 26px; }
.band-yellow .room-name .pict { background: #1b2126; color: var(--yellow); }

/* pixel people, walking a lane back and forth: --p runs along the floor, --k picks the lane */
.walker { translate: calc(var(--p) * 100cqw) calc(var(--k) * 100cqh); animation: walk var(--t) linear var(--d) infinite; }
.px {
  position: absolute; bottom: 0; left: -16px; width: 32px; height: 48px; max-width: none; overflow: visible;
  filter: drop-shadow(2px 0 0 #1b2126) drop-shadow(-2px 0 0 #1b2126) drop-shadow(0 2px 0 #1b2126) drop-shadow(0 -2px 0 #1b2126);
  animation: face var(--t) step-end var(--d) infinite;
}
.px .fb, .px .fa { animation: stride 0.36s steps(1) infinite; }
.px .fb { animation-delay: -0.18s; }
@keyframes walk { 50% { --p: 0.96; } }
@keyframes face { 50% { scale: -1 1; } }
@keyframes stride { 50% { opacity: 0; } }

/* first-visit hint, in handwriting */
.tutorial {
  position: absolute; left: max(8px, 4%); bottom: 4%; width: 270px;
  display: flex; flex-direction: column; align-items: flex-end;
  font-family: "Caveat", "Segoe Print", cursive; font-weight: 600; font-size: 2rem; line-height: 1.05; color: #1b2126;
}
.tutorial .note { padding: 14px 18px 12px; background: #fff; transform: rotate(-2deg); outline: 2px solid #1b2126; }
.tutorial p { margin: 0 0 10px; }
.scribble { order: -1; width: 110px; height: 76px; margin-right: -30px; fill: none; stroke: #1b2126; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; transform: scaleX(-1); }
.tutorial-skip { font: 700 1rem var(--sign); color: #1b2126; background: none; border: 0; border-bottom: 2px solid currentColor; padding: 2px 0; cursor: pointer; }

/* inside a room: the section reads as its own page, with a way back to the map and on to the next room */
.to-map {
  display: inline-flex; align-items: center; gap: 8px; align-self: stretch; padding: 0 4px;
  color: var(--yellow); font: 700 0.95rem var(--sign); font-stretch: 92%; text-decoration: none; white-space: nowrap;
  border-block: 4px solid transparent;
}
.to-map:hover { border-bottom-color: var(--yellow); }
.tour main > section { padding-top: clamp(24px, 4vw, 48px); }
.to-lobby { margin-bottom: clamp(28px, 4vw, 44px); }
.to-lobby .arrow { margin-left: -2px; }
/* the door to the next room is that room's sign */
.next-room {
  --band: var(--yellow); --band-ink: #1b2126;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 520px; margin-top: clamp(48px, 6vw, 72px);
  padding: 20px 22px; background: var(--band); color: var(--band-ink); text-decoration: none;
  font: 700 1.3rem var(--sign); transition: background-color 0.15s ease;
}
.next-room.band-blue { --band: var(--blue); --band-ink: #fff; }
.next-room.band-green { --band: var(--green); --band-ink: #fff; }
.next-room:hover { background: color-mix(in srgb, var(--band) 86%, #000); }
.next-room .arrow { width: 24px; height: 24px; transition: translate 0.15s ease; }
.next-room:hover .arrow { translate: 4px 0; }

/* first visit: two title slides */
.intro { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; background: var(--plate); color: var(--on-plate); transition: opacity 0.4s ease; }
.intro.leaving { opacity: 0; pointer-events: none; }
.intro .slide { grid-area: 1 / 1; width: min(100%, 980px); }
.intro-title { margin: 0; max-width: 13ch; font-family: var(--sign); font-weight: 800; font-stretch: 85%; font-size: clamp(3rem, 9vw, 7.4rem); line-height: 0.95; letter-spacing: -0.025em; text-wrap: balance; }
.intro-lede { margin: 26px 0 34px; max-width: 46ch; font-size: clamp(1.1rem, 1.8vw, 1.35rem); line-height: 1.5; color: var(--on-plate-2); }
.intro a { color: var(--on-plate); }
.intro :focus-visible { outline-color: var(--yellow); }
.slide.one { animation: fade-in 0.5s ease both; }
.slide.two { opacity: 0; visibility: hidden; transition: opacity 0.5s ease 0.3s; }
.intro.two .slide.one { opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s 0.35s; }
.intro.two .slide.two { opacity: 1; visibility: visible; }
.intro-skip { position: absolute; top: 18px; right: 18px; padding: 8px 14px; background: none; border: 2px solid var(--on-plate-2); color: var(--on-plate); font: 700 0.95rem var(--sign); cursor: pointer; }
@keyframes fade-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .intro, .intro .slide { animation: none; transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .walker, .px, .px .fa, .px .fb { animation-play-state: paused; }
  .map { transition: none; }
}
@media (max-width: 900px) {
  /* phones: a taller plan seen from the front, rooms on both sides of one corridor */
  .floor { --rx: 40deg; --rz: 0deg; grid-template-columns: 175px 90px 175px; grid-template-rows: repeat(4, 190px); }
  .map { margin-inline: calc(-1 * var(--gutter)); }
  .corridor { grid-area: 1 / 2 / -1 / 3; }
  .art { --w: 1200px; --k: 2.5636; --cy: 52.528%; }
  .walker { translate: calc(var(--k) * 100cqw) calc(var(--p) * 100cqh); }
  .room > .walker { display: none; } /* seen from the front, the signs would hide them */
  .room:nth-child(odd) .room-sign { left: 56%; }
  .room:nth-child(even) .room-sign { left: 42%; }
  .room-name { font-size: 19px; white-space: normal; width: max-content; max-width: 190px; line-height: 0.95; padding-right: 10px; }
  .tutorial { left: 50%; translate: -50% 0; bottom: 4px; width: min(300px, 90%); text-align: center; font-size: 1.45rem; }
  .tutorial .note { padding: 8px 12px 6px; }
  .tutorial p { margin-bottom: 4px; }
  .scribble { display: none; }
}

/* ---------- printed question card ---------- */
@media print {
  body { background: #fff; color: #000; }
  .skip-link, .topbar, footer, .hero, main > section:not(#ask), .ask aside, .sign .pict, .intro, .to-map, .to-lobby, .next-room { display: none !important; }
  #ask { display: block !important; }
  #ask { margin: 0 !important; padding: 0 !important; border: 0 !important; }
  #ask .sign { background: none; color: #000; }
  #ask .sign h2 { color: #000; padding: 0; }
}