/* /learn-cells-not-the-same: its own sheet, loaded after site.css.
   One picture runs the page: two vials that wear the same label and hold
   different cells. Two colours are a key, used the same way in every part:
   clay is the low end of an axis, blue is the high end.
   Script: scripts/learn-cells-not-the-same.js. With that script absent every
   part is visible and every link still jumps. */

html:has(body.ns-page) {
  --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);
}
.ns-page {
  --ns-lo: #b5683c;            /* low end: marks and strokes */
  --ns-lo-ink: #8a4a22;        /* the same, as text on white */
  --ns-lo-night: #e6a880;      /* the same, on navy */
  --ns-hi: var(--accent-blue);
  --ns-hi-ink: var(--accent-blue-hover);
  --ns-ease: cubic-bezier(.16, 1, .3, 1);
  --ns-gut: clamp(20px, 4vw, 56px);
  background: #fff;
}

/* ============ GROUND RULES ============ */
.ns-wrap { max-width: calc(1240px + 2 * var(--ns-gut)); margin-inline: auto; padding-inline: var(--ns-gut); }
.ns-defs { position: absolute; }
/* text fills its column; the column sets the measure */
.ns-page main p { max-width: none; margin: 0; }
.ns-page main a:not(.btn, .ns-door) { border-bottom: 0; }
.ns-page main :is(ul, ol, dl, dd, figure) { margin: 0; padding: 0; list-style: none; }
.ns-page main section { padding-block: clamp(56px, 7vw, 104px); }
.ns-page 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 0 clamp(24px, 3.4vw, 48px); max-width: none; text-wrap: wrap;
}
.ns-page main :is(h3, h4) { font-family: var(--font-display); font-weight: 400; color: var(--ink); margin: 0; max-width: none; letter-spacing: -.005em; }
.ns-page main section p { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.ns-page main section p + p { margin-top: 18px; }
.ns-page main .ns-lead { font-family: var(--font-display); font-size: clamp(1.45rem, 2.1vw, 1.9rem); line-height: 1.25; color: var(--ink); }
.ns-page main :is(a, button, summary):focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px; }
.ns-page :is(.ns-six, .ns-verdict) :is(a, button):focus-visible { outline-color: var(--accent-ice); }
/* a part that receives focus after a jump is not itself a control */
.ns-page main :is(h1, h2, h3, section)[tabindex="-1"]:focus { outline: none; }

/* drawings: ink line art, one weight */
:is(.ns-route, .ns-site__pic, .ns-step__who, .ns-board, .ns-fan, .ns-neq, .ns-ab__vial, .ns-door__icon, .ns-next__icon) { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ns-i-fill { fill: currentColor; stroke: none; }
.ns-i-white, .ns-paper { fill: #fff; }
.ns-thin { stroke: var(--border-strong); stroke-width: 1.4; }
.ns-ground { stroke: var(--border-strong); stroke-width: 1.4; }
.ns-key { stroke: var(--ns-hi); }
.ns-fillkey { fill: var(--ns-hi); stroke: none; }

/* a term the glossary defines */
.ns-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; }
.ns-term:hover { color: var(--accent-blue-hover); text-decoration-style: solid; }
.ns-inline { color: var(--accent-blue-hover); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 4px; transition: color 200ms, text-decoration-color 200ms; }
.ns-inline:hover { color: var(--accent-blue); text-decoration-color: currentColor; }

/* the onward link: the arrow leans the way it points */
.ns-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; }
.ns-go span { display: inline-block; transition: transform 360ms var(--ns-ease); }
.ns-go:hover { color: var(--accent-blue); text-decoration-color: currentColor; }
.ns-go:hover span { transform: translateX(6px); }
.ns-go[href^="#"]:hover span { transform: translateY(4px) rotate(90deg); }
.ns-go--back:hover span { transform: translateX(-6px); }
.ns-links { display: flex; flex-wrap: wrap; gap: 4px 36px; margin-top: 14px !important; }

/* a question to carry into the room */
.ns-ask { border-left: 3px solid var(--ns-hi); padding: 4px 0 4px clamp(18px, 2.4vw, 32px); }
.ns-page main .ns-ask__label { font-size: 15px; font-weight: 600; color: var(--ns-hi-ink); }
.ns-page main .ns-ask__q { margin-top: 8px; font-family: var(--font-display); font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.32; color: var(--ink); }
.ns-page main .ns-ask p + p { margin-top: 12px; }
.ns-page main .ns-ask__why { font-size: 17px; }

/* ============ REVEALS ============
   Hidden only once the script has said motion is on (ns-js on <html>), so
   with no script nothing is ever hidden. Each part comes in its own way. */
@keyframes ns-up { from { opacity: 0; transform: translateY(22px); } }
@keyframes ns-draw { from { stroke-dashoffset: 1; opacity: 0; } 12% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes ns-pop { from { transform: scale(0); opacity: 0; } 70% { transform: scale(1.25); opacity: 1; } }
@keyframes ns-stamp { from { opacity: 0; transform: scale(1.18); } 60% { opacity: 1; transform: scale(.97); } }
@keyframes ns-die { from { fill: var(--ns-lo); stroke: var(--ns-lo); transform: scale(0); } 22% { transform: scale(1.2); } 34%, 70% { fill: var(--ns-lo); stroke: var(--ns-lo); transform: scale(1); } }
@keyframes ns-unfold { from { opacity: 0; transform: translateY(-8px); } }
@keyframes ns-ship { from { transform: translateX(-92px); } }
@keyframes ns-hop { 40% { transform: translateX(8px); } }
@keyframes ns-march { to { stroke-dashoffset: -28; } }
@keyframes ns-lit { from { opacity: 0; } }
@keyframes ns-knock { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.ns-js [data-r] { transition: opacity 620ms ease, transform 820ms var(--ns-ease); }
.ns-js [data-r]:not(.is-in) { opacity: 0; transform: translateY(18px); }
.ns-js [data-r="left"]:not(.is-in) { transform: translateX(-32px); }
.ns-js [data-r="right"]:not(.is-in) { transform: translateX(32px); }
/* these keep their box and bring their own parts in */
.ns-js :is([data-r="rows"], [data-r="stairs"], [data-r="draw"], [data-r="axis"]):not(.is-in) { opacity: 1; transform: none; }
.ns-js :is([data-r="rows"], [data-r="stairs"]) > * { transition: opacity 560ms ease, transform 760ms var(--ns-ease); transition-delay: calc(var(--i, 0) * 110ms); }
.ns-js [data-r="rows"]:not(.is-in) > * { opacity: 0; transform: translateY(16px); }
.ns-js [data-r="stairs"]:not(.is-in) > * { opacity: 0; transform: translateY(44px); }
.ns-js [data-r="draw"] [pathLength] { stroke-dasharray: 1; }
.ns-js [data-r="draw"]:not(.is-in) [pathLength] { stroke-dashoffset: 1; opacity: 0; }
.ns-js [data-r="draw"].is-in [pathLength] { animation: ns-draw 620ms var(--ns-ease) calc(var(--i, 0) * 70ms) both; }

/* ============ HERO ============ */
.ns-page main .ns-hero { padding-block: clamp(28px, 4vw, 56px) clamp(48px, 6vw, 88px); }
.ns-hero__h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.2rem, 4.1vw, 3.7rem); line-height: 1.05; letter-spacing: -.015em; color: var(--ink); margin: 0 0 clamp(28px, 4vw, 52px); max-width: none; text-wrap: wrap; }
/* a heading that has to wrap breaks where the styling changes */
.ns-hero__h1 > .h-lead, .ns-hero__h1 > em { display: inline-block; }
.ns-hero__h1 > em { color: var(--accent-blue); }
.ns-hero__row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 104px); align-items: center; }
.ns-page main .ns-hero__answer { font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.45; color: var(--ink); }
.ns-hero__answer strong { font-weight: 600; }
.ns-page main .ns-hero__more { margin-top: 18px; }
.ns-page main .ns-hero__jumps { display: flex; flex-wrap: wrap; gap: 4px 36px; margin-top: 22px; }
.ns-page main .ns-hero__reviewed { margin-top: 26px; padding: 0; font-family: var(--font-body); font-size: 14px; letter-spacing: 0; color: var(--ink-muted); }
.ns-hero__fig { justify-self: center; width: 100%; max-width: 420px; }
.ns-scene { display: block; width: 100%; height: auto; overflow: visible; }
.ns-scene :is(rect, path) { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ns-scene .ns-vial__label rect { fill: #fff; }
.ns-scene .ns-vial__label path { stroke: var(--border-strong); stroke-width: 1.6; }
.ns-vial__label, .ns-cell { transform-box: fill-box; transform-origin: center; }
.ns-vial--lo .ns-cell { fill: var(--ns-lo); stroke: var(--ns-lo); stroke-width: 1.3; }
.ns-vial--hi .ns-cell { fill: var(--ns-hi); stroke: var(--ns-hi); stroke-width: 1.3; }
.ns-scene .ns-cell--dead { fill: #fff; stroke: var(--border-strong); }

/* first paint: two vials are drawn alike, the same label is pressed onto
   each, both fill with cells, and then some of them turn out not to be alive */
.ns-js .ns-hero__h1 > * { animation: ns-up 900ms var(--ns-ease) both; }
.ns-js .ns-hero__h1 > em { animation-delay: 110ms; }
.ns-js .ns-hero__text > * { animation: ns-up 900ms var(--ns-ease) 240ms both; }
.ns-js .ns-hero__text > :nth-child(n+3) { animation-delay: 360ms; }
.ns-js .ns-scene .ns-draw { stroke-dasharray: 1; animation: ns-draw 900ms var(--ns-ease) 200ms both; }
.ns-js .ns-vial__label { animation: ns-stamp 520ms var(--ns-ease) 1000ms both; }
.ns-js .ns-cell { animation: ns-pop 380ms var(--ns-ease) calc(1400ms + var(--n) * 9ms) both; }
.ns-js .ns-vial--lo .ns-cell--dead { animation: ns-die 2600ms var(--ns-ease) calc(1400ms + var(--n) * 9ms) both; }
.ns-js .ns-vial--hi .ns-cell--dead { animation-name: ns-die; animation-duration: 2600ms; --ns-lo: var(--ns-hi); }

/* ============ CONTENTS BAR (follows the reader) ============ */
.ns-page .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(--ns-ease), visibility 0s 360ms;
}
.ns-page .hc-bar.is-on { transform: none; opacity: 1; visibility: visible; transition: opacity 260ms, transform 360ms var(--ns-ease); }
body.ns-page.nav-open .hc-bar { opacity: 0; visibility: hidden; }
.ns-page .hc-bar__track {
  max-width: calc(1240px + 2 * var(--ns-gut)); margin: 0 auto; padding: 0 var(--ns-gut);
  height: 100%; display: flex; align-items: stretch; gap: clamp(18px, 2.2vw, 30px);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: 28px;
}
.ns-page .hc-bar__track::-webkit-scrollbar { display: none; }
.ns-page .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;
}
.ns-page .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(--ns-ease);
}
.ns-page .hc-bar__track a:hover, .ns-page .hc-bar__track a[aria-current] { color: var(--ink); }
.ns-page .hc-bar__track a:hover::after { transform: scaleX(.35); }
.ns-page .hc-bar__track a[aria-current]::after { transform: scaleX(1); }
.ns-page .hc-bar__track a:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -4px; border-radius: 4px; }
.ns-page .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 the side, its ends fade */
@media (max-width: 1180px) {
  .ns-page .hc-bar__track { -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 28px), transparent); }
}

/* ============ SAME LABEL ============ */
.ns-label { border-top: 1px solid var(--border); }
.ns-label__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.ns-page main .ns-label .ns-lead { margin-bottom: 18px; }
.ns-ab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--border); border-radius: 10px; }
.ns-ab__col { display: grid; grid-template-rows: subgrid; grid-row: span 3; padding: clamp(18px, 2.2vw, 30px); }
.ns-ab__col + .ns-ab__col { border-left: 1px solid var(--border); }
.ns-ab__head { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; }
.ns-ab__vial { flex: none; width: 50px; height: 64px; }
.vial--a .ns-ab__vial { stroke: var(--ns-lo); color: var(--ns-lo); }
.vial--b .ns-ab__vial { stroke: var(--ns-hi); color: var(--ns-hi); }
.ns-ab .vial__name { font-size: 15px; font-weight: 600; }
.vial--a .vial__name { color: var(--ns-lo-ink); }
.vial--b .vial__name { color: var(--ns-hi-ink); }
/* the label itself: word for word the same on both */
.ns-ab .vial__label { margin-top: 4px; font-family: var(--font-display); font-size: 19px; line-height: 1.25; color: var(--ink); }
.ns-ab__rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); font-size: 16px; }
.ns-ab__rows dt { color: var(--ink-muted); }
.ns-ab__rows dd { font-weight: 600; text-align: right; }
.vial--a .ns-ab__rows dd { color: var(--ns-lo-ink); }
.vial--b .ns-ab__rows dd { color: var(--ns-hi-ink); }
.ns-page main .ns-ab .vial__verdict { padding-top: 16px; border-top: 1px solid var(--border); font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
@supports not (grid-template-rows: subgrid) { .ns-ab__col { display: block; } }

/* ============ THE SIX AXES (navy) ============ */
.ns-six { background: var(--ink); color: #fff; }
.ns-six__head { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-bottom: clamp(28px, 4vw, 52px); }
.ns-page main .ns-six h2 { color: #fff; margin-bottom: 14px; }
.ns-page main .ns-six p { color: rgba(255, 255, 255, .78); }
.ns-fan { display: block; width: 150px; height: 96px; stroke: #fff; }
.ns-fan .ns-fan__tag { stroke: #fff; }
.ns-fan .ns-fan__ray { stroke: var(--accent-ice); stroke-width: 1.4; }
.ns-fan .ns-fan__end { fill: var(--accent-ice); stroke: none; transform-box: fill-box; transform-origin: center; }
.ns-fan .ns-fan__end:nth-of-type(-n+3) { fill: var(--ns-lo-night); }
.ns-js .ns-fan:not(.is-in) .ns-fan__end { transform: scale(0); }
.ns-js .ns-fan.is-in .ns-fan__end { animation: ns-pop 380ms var(--ns-ease) calc(520ms + var(--i, 0) * 70ms) both; }

.ns-axes .axes__head { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; padding-bottom: 10px; }
.ns-axes .axes__head-range { grid-column: 2; display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; }
.ns-axes .axes__head-range span:first-child { color: var(--ns-lo-night); }
.ns-axes .axes__head-range span:last-child { color: #c9def2; }
.ns-axes .axis-row { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: center; min-height: 68px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .16); color: #fff; }
.ns-axes .axis-row:last-child { border-bottom: 1px solid rgba(255, 255, 255, .16); }
.ns-axes .axis-row__name { position: relative; font-family: var(--font-display); font-size: clamp(1.2rem, 1.6vw, 1.45rem); line-height: 1.2; padding-right: 30px; }
/* the row is a link to its part of the page: its arrow points down the page */
.ns-axes .axis-row__name::after { content: "\2193"; position: absolute; right: 6px; top: 50%; margin-top: -.6em; font-family: var(--font-body); font-size: 16px; color: var(--accent-ice); transition: transform 360ms var(--ns-ease), color 200ms; }
.ns-axes .axis-row:hover .axis-row__name::after { transform: translateY(5px); color: #fff; }
.ns-axes .axis-row__bar { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; align-items: center; gap: 16px; }
.ns-axes .axis-row__line { display: none; }
.ns-axes .axis-row__lo { grid-column: 1; grid-row: 1; font-size: 15px; color: var(--ns-lo-night); }
.ns-axes .axis-row__hi { grid-column: 3; grid-row: 1; font-size: 15px; color: #c9def2; text-align: right; }
.ns-axes .axis-row__track { grid-column: 2; grid-row: 1; position: relative; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--ns-lo-night), var(--accent-ice)); transform-origin: left; transition: transform 1100ms var(--ns-ease), opacity 300ms; opacity: .7; }
/* a cell rides each axis from the low end to the high end */
.ns-axes .axis-row__track::after { content: ""; position: absolute; top: 50%; left: 100%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #fff; transition: left 1100ms var(--ns-ease) 200ms; }
.ns-js .ns-axes .axis-row:not(.is-in) .axis-row__track { transform: scaleX(0); }
.ns-js .ns-axes .axis-row:not(.is-in) .axis-row__track::after { left: 0; }
.ns-js .ns-axes .axis-row :is(.axis-row__lo, .axis-row__hi, .axis-row__name) { transition: opacity 600ms ease; }
.ns-js .ns-axes .axis-row:not(.is-in) :is(.axis-row__lo, .axis-row__name) { opacity: 0; }
.ns-js .ns-axes .axis-row:not(.is-in) .axis-row__hi { opacity: 0; }
.ns-js .ns-axes .axis-row .axis-row__hi { transition-delay: 700ms; }
.ns-axes .axis-row:hover .axis-row__track { opacity: 1; }
.ns-axes .axis-row:hover .axis-row__hi { color: #fff; }

/* ============ CELL SOURCE ============ */
.ns-page main .ns-source__lead { margin-bottom: 20px; }
.ns-source__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px clamp(28px, 5vw, 80px); align-items: start; }
.ns-tree { margin-top: clamp(36px, 5vw, 64px); }
.ns-page main .ns-tree__title { font-size: clamp(1.3rem, 1.7vw, 1.55rem); }
.ns-tree__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; border-top: 1px solid var(--border); }
.ns-tree__col { padding: 28px clamp(16px, 2.4vw, 36px) 8px; }
.ns-tree__col:first-child { padding-left: 0; }
.ns-tree__col:last-child { padding-right: 0; }
.ns-tree__col + .ns-tree__col { border-left: 1px solid var(--border); }
.ns-dish { display: block; width: 120px; height: 120px; overflow: visible; }
.ns-dish__rim { fill: none; stroke: var(--ink); stroke-width: 1.7; }
.ns-dish__in { fill: none; stroke: var(--border-strong); stroke-width: 1.3; }
.ns-dot { fill: var(--ns-hi); transform-box: fill-box; transform-origin: center; }
.ns-dish--marrow .ns-dot { fill: var(--ns-lo); }
.ns-dish--fat .ns-dot { fill: var(--ns-lo); }
.ns-dish--fat .ns-dot--b { fill: #fff; stroke: var(--border-strong); stroke-width: 1.3; }
.ns-dish--fat .ns-dot--c { fill: var(--ink-muted); }
.ns-js .ns-tree__grid:not(.is-in) .ns-dot { transform: scale(0); }
.ns-js .ns-tree__grid.is-in .ns-dot { animation: ns-pop 360ms var(--ns-ease) calc(300ms + var(--n) * 16ms) both; }
.ns-page main .ns-tree__tier { margin-top: 18px; font-size: 15px; font-weight: 600; color: var(--ns-lo-ink); }
.ns-page main .ns-tree__col--cord .ns-tree__tier { color: var(--ns-hi-ink); }
.ns-page main .ns-tree__col h4 { margin-top: 4px; font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.2; }
.ns-tree__col dl { margin-top: 16px !important; }
.ns-tree__col dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 16px; }
.ns-tree__col dt { color: var(--ink-muted); }
.ns-tree__col dd { font-weight: 600; color: var(--ink); text-align: right; }
.ns-source__out { margin-top: clamp(24px, 3vw, 40px); }

/* "Read more": a passage a reader can skip */
.ns-more { margin-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--border); padding-top: 12px; }
.ns-more summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; min-height: 44px; padding-block: 8px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 600; color: var(--accent-blue-hover); transition: color 200ms; }
.ns-more summary::-webkit-details-marker { display: none; }
.ns-more__q { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.2; color: var(--ink); margin-right: auto; }
.ns-more summary::after { content: ""; width: 9px; height: 9px; margin-top: -4px; margin-left: -8px; border-right: 2px solid; border-bottom: 2px solid; transform: rotate(45deg); transition: transform 360ms var(--ns-ease); }
.ns-more summary:hover { color: var(--accent-blue); }
.ns-more summary:hover::after { transform: translateY(3px) rotate(45deg); }
.ns-more[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.ns-more[open] summary:hover::after { transform: translateY(-3px) rotate(-135deg); }
.ns-more__shut, .ns-more[open] .ns-more__open { display: none; }
.ns-more[open] .ns-more__shut { display: inline; }
.ns-more__body { padding-block: 16px 8px; }
.ns-more[open] .ns-more__body { animation: ns-unfold 420ms var(--ns-ease); }
.ns-kinds { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); margin-block: 26px; }
.ns-kind { border-top: 2px solid var(--ink); padding-top: 16px; }
.ns-page main .ns-kind__mark { font-size: 15px; font-weight: 600; color: var(--ns-hi-ink); }
.ns-page main .ns-kind h3 { margin-top: 4px; font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.2; }
.ns-kind ul { margin-top: 12px !important; }
.ns-page main :is(.ns-kind, .ns-model) li { position: relative; padding: 9px 0 9px 20px; border-top: 1px solid var(--border); font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.ns-page main :is(.ns-kind, .ns-model) li::before { content: ""; position: absolute; left: 0; top: 18px; width: 7px; height: 7px; border-radius: 50%; background: var(--ns-hi); }
.ns-more .ns-ask { margin-top: 26px; }

/* a fold: open, and its summary out of sight, on a wide screen; on a phone
   the script closes the ones a reader can skip and the summary is a control */
.ns-fold > summary { display: none; list-style: none; }
.ns-fold > summary::-webkit-details-marker { display: none; }
.ns-fold__less, .ns-fold[open] > summary .ns-fold__more { display: none; }
.ns-fold[open] > summary .ns-fold__less { display: inline; }
.ns-page main p + .ns-fold { margin-top: 18px; }
.ns-page main .ns-fold + p { margin-top: 18px; }
.ns-page main :is(.ns-source__intro, .ns-via__out) > .ns-fold { margin-top: 0; }

/* ============ WHO MANUFACTURES ============ */
.ns-maker { border-top: 1px solid var(--border); }
.ns-page main .ns-maker__intro { margin-bottom: clamp(28px, 4vw, 48px); }
.ns-models { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); }
.ns-route { display: block; width: 100%; height: auto; }
.ns-route--a { stroke: var(--ink); }
.ns-route__way { stroke: var(--ns-lo); stroke-dasharray: 3 9; }
.ns-route__box { stroke: var(--ns-lo); transform: translateX(96px); }
.ns-route__box .ns-thin { stroke: var(--ns-lo); }
.ns-route__hop { stroke: var(--ns-hi); }
.ns-js .ns-model.is-in .ns-route__box { animation: ns-ship 2600ms cubic-bezier(.5, 0, .3, 1) 300ms both; }
.ns-js .ns-model.is-in .ns-route__hop { animation: ns-hop 900ms var(--ns-ease) 700ms 2; }
.ns-page main .ns-model__tag { margin-top: 18px; font-size: 15px; font-weight: 600; }
.ns-model--a .ns-model__tag { color: var(--ns-lo-ink); }
.ns-model--b .ns-model__tag { color: var(--ns-hi-ink); }
.ns-page main .ns-model h3 { margin-top: 4px; font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.18; }
.ns-model ul { margin-top: 14px !important; }
.ns-page main .ns-model--a li::before { background: var(--ns-lo); }
.ns-maker__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: start; margin-top: clamp(36px, 5vw, 64px); }

/* ============ LAB CAPABILITY (short, on purpose) ============ */
.ns-page main .ns-lab { border-top: 1px solid var(--border); padding-block: clamp(44px, 5vw, 72px); }
.ns-lab__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3.5fr) minmax(0, 3.5fr); gap: clamp(20px, 3vw, 40px); align-items: stretch; }
.ns-page main .ns-lab h2 { margin-bottom: 16px; }
.ns-door { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px; border: 1px solid var(--border-strong); border-radius: 10px; color: var(--ink); background: #fff; transition: border-color 220ms, transform 360ms var(--ns-ease), box-shadow 360ms var(--ns-ease); }
.ns-door:hover { border-color: var(--accent-blue); transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(11, 29, 58, .35); }
.ns-door__icon { width: 52px; height: 52px; color: var(--ns-hi); }
.ns-door__t { font-family: var(--font-display); font-size: clamp(1.3rem, 1.7vw, 1.55rem); line-height: 1.2; padding-right: 28px; }
.ns-door__d { font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
.ns-door__go { position: absolute; right: 20px; top: 24px; font-size: 18px; color: var(--accent-blue-hover); transition: transform 360ms var(--ns-ease); }
.ns-door:hover .ns-door__go { transform: translateX(6px); }

/* ============ VIABILITY TIMING (the one tinted band) ============ */
.ns-via { background: var(--accent-wash); }
.ns-via__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.ns-page main .ns-via .ns-lead { margin-bottom: 18px; }
.ns-page main .ns-chart { background: #fff; border-radius: 12px; padding: clamp(18px, 2.4vw, 32px); }
.ns-page main .ns-chart h3 { font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.2; }
.ns-page main .ns-chart figcaption p { margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--ink-muted); }
.ns-chart__frame { display: grid; grid-template-columns: 34px minmax(0, 1fr); margin-top: 44px; padding-bottom: 44px; }
.ns-chart__y { display: flex; flex-direction: column; justify-content: space-between; height: 230px; margin-block: -9px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.ns-chart__plot { position: relative; height: 230px; margin-right: 22px; }
.ns-chart__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ns-chart__grid { fill: none; stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ns-chart__lines { clip-path: inset(-10px calc((1 - var(--p, 1)) * 100%) -10px -10px); }
.ns-chart__line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke !important; }
.ns-chart__line--lo { stroke: var(--ns-lo); }
.ns-chart__line--hi { stroke: var(--ns-hi); }
.ns-pt { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; border: 2.5px solid var(--ns-lo); transition: opacity 260ms, transform 420ms var(--ns-ease); }
.ns-pt--hi { border-color: var(--ns-hi); }
.ns-chart__tag { position: absolute; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; background: #fff; padding: 3px 0; transition: opacity 300ms; }
.ns-chart__tag--start { left: -4px; top: calc(5% - 30px); color: var(--ink); }
.ns-chart__tag--hi { right: -8px; top: calc(7.5% - 30px); color: var(--ns-hi-ink); }
.ns-chart__tag--lo { right: -8px; top: calc(75% + 14px); color: var(--ns-lo-ink); }
.ns-chart__x { position: absolute; left: -10%; right: -10%; top: calc(100% + 14px); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); font-size: 14px; color: var(--ink-muted); text-align: center; }
.ns-chart__x li { transition: color 300ms; }
.ns-js [data-chart] .ns-pt:not(.is-lit) { opacity: 0; transform: scale(.3); }
.ns-js [data-chart] .ns-chart__tag:not(.is-lit) { opacity: 0; }
.ns-js [data-chart] .ns-chart__x li.is-lit { color: var(--ink); }
.ns-chart__read { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 32px); margin-top: 26px; }
.ns-page main .ns-chart__cell { margin: 0; padding-left: 16px; border-left: 3px solid var(--ns-lo); font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
.ns-page main .ns-chart__cell--hi { border-left-color: var(--ns-hi); }
.ns-chart__cell strong { display: block; margin-bottom: 4px; font-weight: 600; color: var(--ns-lo-ink); }
.ns-chart__cell--hi strong { color: var(--ns-hi-ink); }
.ns-chart__cell em { font-style: normal; font-weight: 600; color: var(--ink); }
.ns-via__out { margin-top: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px clamp(28px, 5vw, 80px); }
.ns-page main .ns-via__out p + p { margin-top: 0; }
.ns-via__out .ns-links { grid-column: 1 / -1; margin-top: 0 !important; }

/* ============ PHYSICIAN ROLE: four steps up ============ */
.ns-page main .ns-stairs__title { margin-top: clamp(32px, 4vw, 56px); font-size: clamp(1.3rem, 1.7vw, 1.55rem); }
.ns-stairs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; margin-top: 20px !important; }
.ns-step { --tread: var(--ns-lo); border-top: 3px solid var(--tread); border-left: 1px solid var(--border); padding: 20px clamp(14px, 1.8vw, 26px) 8px; }
.ns-step--1 { margin-top: 132px; }
.ns-step--2 { margin-top: 88px; --tread: color-mix(in srgb, var(--ns-lo) 62%, var(--ns-hi)); }
.ns-step--3 { margin-top: 44px; --tread: color-mix(in srgb, var(--ns-lo) 28%, var(--ns-hi)); }
.ns-step--4 { --tread: var(--ns-hi); }
.ns-js [data-r="stairs"] > :nth-child(2) { --i: 1; } .ns-js [data-r="stairs"] > :nth-child(3) { --i: 2; } .ns-js [data-r="stairs"] > :nth-child(4) { --i: 3; }
.ns-step__who { display: block; width: 96px; height: 56px; }
.ns-step__who .ns-ghost { stroke: var(--border-strong); stroke-dasharray: 2 6; }
.ns-step__who .ns-brief { stroke: var(--ns-hi); stroke-dasharray: 5 5; }
.ns-step__who .ns-md { stroke: var(--ns-hi); }
.ns-page main .ns-step__tier { margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--ink-muted); }
.ns-page main .ns-step--4 .ns-step__tier { color: var(--ns-hi-ink); }
.ns-page main .ns-step h4 { margin-top: 4px; font-size: clamp(1.25rem, 1.6vw, 1.5rem); line-height: 1.2; }
.ns-page main .ns-step p:last-child { margin-top: 10px; font-size: 16px; line-height: 1.6; }
.ns-page main .ns-doc__intro p + .ns-fold { margin-top: 18px; }
.ns-page main .ns-doc__out { margin-top: clamp(32px, 4vw, 56px); }

/* ============ EMERGENCY BACKSTOP ============ */
.ns-floor { border-top: 1px solid var(--border); }
.ns-floor__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); margin-block: clamp(32px, 4vw, 56px); }
.ns-site__pic { display: block; width: 100%; max-width: 420px; height: auto; }
.ns-road { stroke: var(--ns-lo); stroke-dasharray: 5 9; }
.ns-amb { stroke: var(--ns-lo); }
.ns-floor__lit { fill: var(--accent-wash); stroke: var(--ns-hi); stroke-width: 1.4; }
/* while it is on screen the road keeps counting: the ambulance is still on its way */
.ns-site.is-live .ns-road { animation: ns-march 2.8s linear infinite; }
.ns-js .ns-site.is-in .ns-floor__lit { animation: ns-lit 900ms ease 500ms both; }
.ns-page main .ns-site__tag { margin-top: 16px; font-size: 15px; font-weight: 600; color: var(--ns-lo-ink); }
.ns-page main .ns-site--hi .ns-site__tag { color: var(--ns-hi-ink); }
.ns-page main .ns-site h3 { margin-top: 4px; font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.18; }
.ns-site .floor__list { margin-top: 14px !important; }
.ns-site .floor__list li { position: relative; padding: 10px 0 10px 24px; border-top: 1px solid var(--border); font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.ns-site .floor__list li::before { content: ""; position: absolute; left: 0; top: 17px; width: 9px; height: 9px; border-radius: 2px; background: var(--ns-hi); }
.ns-site--lo .floor__list li::before { background: var(--ns-lo); }
.ns-site .floor__list li.no::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ns-lo); }
.ns-floor__out { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px clamp(28px, 5vw, 80px); }
.ns-page main .ns-floor__out p + p { margin-top: 0; }

/* ============ THE TWELVE ============ */
.ns-list { border-top: 1px solid var(--border); }
.ns-list__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.ns-list__side { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 28px); }
.ns-board { display: block; width: 112px; height: auto; margin-bottom: 22px; }
.ns-board__rows { stroke: var(--border-strong); stroke-width: 1.4; }
.ns-board__ticks { stroke: var(--ns-hi); stroke-width: 2.2; }
.ns-board__ticks path:nth-child(2) { --i: 1; } .ns-board__ticks path:nth-child(3) { --i: 2; } .ns-board__ticks path:nth-child(4) { --i: 3; }
.ns-board__ticks path:nth-child(5) { --i: 4; } .ns-board__ticks path:nth-child(6) { --i: 5; } .ns-board__ticks path:nth-child(7) { --i: 6; }
.ns-board__ticks path:nth-child(8) { --i: 7; } .ns-board__ticks path:nth-child(9) { --i: 8; } .ns-board__ticks path:nth-child(10) { --i: 9; }
.ns-board__ticks path:nth-child(11) { --i: 10; } .ns-board__ticks path:nth-child(12) { --i: 11; }
.ns-print { display: none; align-items: center; gap: 10px; min-height: 44px; margin-top: 22px; padding: 0 18px; border: 1px solid var(--border-strong); border-radius: 4px; background: #fff; font: 600 15px/1 var(--font-body); color: var(--ink); cursor: pointer; transition: border-color 200ms, color 200ms, transform 360ms var(--ns-ease); }
.ns-on .ns-print { display: inline-flex; }
.ns-print svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform 360ms var(--ns-ease); }
.ns-print:hover { border-color: var(--accent-blue); color: var(--accent-blue-hover); }
.ns-print:hover svg { transform: translateY(2px); }
.ns-print:active { transform: scale(.98); }
.ns-twelve .nst-checklist__list { counter-reset: q; }
.ns-twelve .nst-checklist__item { counter-increment: q; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: baseline; padding: 20px 0; border-top: 1px solid var(--border); }
.ns-twelve .ns-fold .nst-checklist__item:last-child { border-bottom: 1px solid var(--border); }
.ns-twelve .nst-checklist__item::before { content: counter(q); font-family: var(--font-display); font-size: 22px; color: var(--ink-muted); font-variant-numeric: lining-nums; }
.ns-twelve .nst-checklist__q { font-family: var(--font-display); font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.25; color: var(--ink); }
.ns-twelve .nst-checklist__q em { font-style: normal; color: var(--ns-hi-ink); }
.ns-twelve .nst-checklist__why { display: block; margin-top: 6px; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--ink-muted); }

/* ticking the twelve off: the number is the button, the check is drawn in */
.ns-ticks .ns-twelve .nst-checklist__item { grid-template-columns: 56px minmax(0, 1fr); align-items: start; }
.ns-ticks .ns-twelve .nst-checklist__item::before { content: none; }
.ns-tick { position: relative; width: 44px; height: 44px; margin-top: -8px; padding: 0; border: 1.5px solid var(--border-strong); border-radius: 50%; background: #fff; color: var(--ink-muted); cursor: pointer; font: 400 20px/1 var(--font-display); font-variant-numeric: lining-nums; transition: border-color 200ms, background-color 260ms, transform 360ms var(--ns-ease); }
.ns-tick:hover { border-color: var(--accent-blue); color: var(--accent-blue-hover); transform: scale(1.06); }
.ns-tick:active { transform: scale(.96); }
.ns-tick svg { position: absolute; inset: 9px; width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.ns-tick svg path { stroke-dasharray: 1; }
.is-asked .ns-tick { background: var(--ns-hi); border-color: var(--ns-hi); }
.is-asked .ns-tick span { opacity: 0; }
.is-asked .ns-tick svg { opacity: 1; }
.is-asked.is-fresh .ns-tick svg path { animation: ns-knock 360ms var(--ns-ease) both; }
.ns-twelve .is-asked .nst-checklist__q { color: var(--ink-muted); }
.ns-twelve .is-asked .nst-checklist__q em { color: inherit; }
.ns-page main .ns-asked { display: flex; align-items: center; gap: 14px; margin-top: 12px; font-size: 16px; color: var(--ink-soft); }
.ns-page main .ns-asked[hidden] { display: none; }
.ns-asked button { min-height: 44px; padding: 0 4px; border: 0; background: none; font: 600 16px/1 var(--font-body); color: var(--accent-blue-hover); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 5px; cursor: pointer; transition: color 200ms, text-decoration-color 200ms; }
.ns-asked button:hover { color: var(--accent-blue); text-decoration-color: currentColor; }

/* ============ THE BOTTOM LINE (navy) ============ */
.ns-verdict { background: var(--ink); color: #fff; }
.ns-verdict__top { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.ns-page main .ns-verdict h2 { color: #fff; margin: 0; }
.ns-neq { display: block; width: 170px; height: 80px; stroke: #fff; color: #fff; }
.ns-neq__b { stroke: var(--accent-ice); }
.ns-neq__dot { fill: var(--accent-ice); stroke: none; }
.ns-neq__sign { stroke: #fff; stroke-width: 2.4; }
.ns-neq__slash { stroke: var(--ns-lo-night); stroke-width: 2.4; --i: 6; }
.ns-verdict__points { margin-top: clamp(32px, 4vw, 56px); }
.ns-verdict__points > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px clamp(24px, 4vw, 64px); align-items: start; padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, .16); }
.ns-js [data-r="rows"] > :nth-child(2) { --i: 1; } .ns-js [data-r="rows"] > :nth-child(3) { --i: 2; } .ns-js [data-r="rows"] > :nth-child(4) { --i: 3; } .ns-js [data-r="rows"] > :nth-child(5) { --i: 4; }
.ns-page main .ns-verdict h3 { color: #fff; font-size: clamp(1.25rem, 1.65vw, 1.5rem); line-height: 1.25; }
.ns-page main .ns-verdict p { color: rgba(255, 255, 255, .8); }

/* ============ READ ON ============ */
.ns-page main .ns-next h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin-bottom: 20px; }
.ns-next__list li { border-top: 1px solid var(--border); }
.ns-next__list li:last-child { border-bottom: 1px solid var(--border); }
.ns-next__list a { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: clamp(14px, 2vw, 28px); min-height: 76px; padding: 12px 6px 12px 0; color: var(--ink); transition: color 200ms, padding 360ms var(--ns-ease); }
.ns-next__icon { width: 48px; height: 48px; color: var(--ns-hi); transition: stroke 200ms; }
.ns-next__list a span { font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.2; }
.ns-next__list a i { font-style: normal; font-size: 20px; color: var(--accent-blue-hover); transition: transform 360ms var(--ns-ease); }
.ns-next__list a:hover { color: var(--accent-blue-hover); padding-left: 10px; }
.ns-next__list a:hover .ns-next__icon { stroke: var(--accent-blue); }
.ns-next__list a:hover i { transform: translateX(8px); }
.ns-page main .ns-next__up { display: flex; flex-wrap: wrap; gap: 4px 36px; margin-top: 22px; }

/* ============ SMALLER SCREENS ============ */
@media (max-width: 1000px) {
  .ns-lab__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ns-lab__text { grid-column: 1 / -1; }
  .ns-stairs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 28px; }
  .ns-step--1, .ns-step--3 { margin-top: 44px; }
  .ns-step--2, .ns-step--4 { margin-top: 0; }
}
@media (max-width: 860px) {
  .ns-hero__row, .ns-label__grid, .ns-source__intro, .ns-models, .ns-maker__body, .ns-via__grid, .ns-via__out, .ns-floor__pair, .ns-floor__out, .ns-list__grid { grid-template-columns: minmax(0, 1fr); }
  .ns-fold > summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: 16px; font-weight: 600; color: var(--accent-blue-hover); -webkit-tap-highlight-color: transparent; }
  .ns-fold > 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(--ns-ease); }
  .ns-fold[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
  .ns-fold[open] > summary ~ * { animation: ns-unfold 420ms var(--ns-ease); }
  .ns-page main :is(.ns-source__intro, .ns-via__out, .ns-floor__out) { row-gap: 6px; }
  .ns-page main p + .ns-fold { margin-top: 6px; }
  .ns-fold--list > summary { margin-top: 8px; }
  :is(.ns-site, .ns-model) .ns-fold > summary { margin-top: 6px; }
  :is(.ns-site, .ns-model) .ns-fold ul { margin-top: 4px !important; }
  .ns-hero__fig { max-width: 300px; }
  .ns-list__side { position: static; }
  .ns-six__head, .ns-verdict__top { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ns-axes .axes__head { display: none; }
  .ns-axes .axis-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 0; }
  /* low end on the left, high end on the right, the axis between them */
  .ns-axes .axis-row__bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 14px; }
  .ns-axes .axis-row__lo { grid-column: 1; grid-row: 1; font-size: 14px; }
  .ns-axes .axis-row__hi { grid-column: 2; grid-row: 1; font-size: 14px; }
  .ns-axes .axis-row__track { grid-column: 1 / -1; grid-row: 2; }
  /* the three sources stay side by side, so a row still reads across:
     the row's name is printed once, over the first column */
  .ns-tree__grid { column-gap: 12px; }
  .ns-tree__col, .ns-tree__col:first-child, .ns-tree__col:last-child { display: grid; grid-template-rows: subgrid; grid-row: span 8; padding: 20px 0 4px; }
  .ns-tree__col + .ns-tree__col { border-left: 0; }
  .ns-tree__col .ns-dish { width: 72px; height: 72px; }
  .ns-page main .ns-tree__tier { margin-top: 12px; font-size: 14px; }
  .ns-page main .ns-tree__col h4 { font-size: 18px; padding-bottom: 12px; }
  .ns-page main .ns-tree__col dl { display: contents; }
  .ns-tree__col dl > div { display: block; padding: 8px 0; font-size: 15px; }
  .ns-tree__col dt { font-size: 14px; white-space: nowrap; }
  .ns-tree__col + .ns-tree__col dt { opacity: 0; }
  .ns-tree__col dd { text-align: left; }
  .ns-verdict__points > div { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .ns-page main section { padding-block: 44px; }
  .ns-page main .ns-hero { padding-block: 24px 40px; }
  .ns-page main section p { font-size: 17px; }
  .ns-door { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; padding: 16px 44px 16px 16px; }
  .ns-door__icon { width: 48px; height: 48px; grid-row: span 2; }
  .ns-door__d { font-size: 15px; }
  .ns-door__go { top: 18px; right: 16px; }
  .ns-board { width: 84px; margin-bottom: 16px; }
  .ns-verdict__points > div { padding: 18px 0; }
  .ns-kinds, .ns-chart__read, .ns-lab__grid, .ns-stairs { grid-template-columns: minmax(0, 1fr); }
  .ns-ab__col { padding: 16px 12px; }
  .ns-ab__head { flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 14px; }
  .ns-ab .vial__label { font-size: 17px; }
  .ns-ab__rows > div { flex-direction: column; gap: 0; padding: 8px 0; font-size: 15px; }
  .ns-ab__rows dd { text-align: left; }
  .ns-page main .ns-ab .vial__verdict { font-size: 14px; }
  .ns-step, .ns-step--1, .ns-step--3 { margin-top: 0; }
  .ns-stairs { row-gap: 0; }
  .ns-step { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; padding: 16px 0 18px; border-left: 0; }
  .ns-step > :not(svg) { grid-column: 2; }
  .ns-step__who { grid-row: span 3; }
  .ns-page main .ns-step__tier { margin-top: 0; }
  .ns-chart__plot, .ns-chart__y { height: 200px; }
  .ns-chart__x { font-size: 13px; }
  .ns-more__q { flex-basis: 100%; }
  .ns-more summary::after { margin-left: -6px; }
  .ns-print { width: 100%; justify-content: center; }
}

/* ============ REDUCED MOTION, PRINT ============ */
@media (prefers-reduced-motion: reduce) {
  .ns-page *, .ns-page *::before, .ns-page *::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
}
@media print {
  .ns-page .hc-bar, .ns-print { display: none !important; }
  /* a printout is one still frame: nothing may be caught part way through moving */
  .ns-page main *, .ns-page main *::before, .ns-page main *::after { animation: none !important; transition: none !important; }
  .ns-page [data-r], .ns-page [data-r] > * { opacity: 1 !important; transform: none !important; }
  /* the chart is drawn by scrolling; a printout gets all of it */
  .ns-chart__lines { clip-path: none !important; }
  .ns-js [data-chart] .ns-chart__tag, .ns-js [data-chart] .ns-pt { opacity: 1 !important; transform: none !important; }
  /* the folds print open: no control beside them (the question that heads the last one stays) */
  .ns-fold > summary, .ns-more__open, .ns-more__shut, .ns-more summary::after { display: none !important; }
  /* the second vial keeps its place beside the first (a transform set in CSS replaces the attribute's) */
  .ns-page .ns-neq__b { transform: translate(124px, 8px) !important; }
  /* and the first vial and the sign, white on the navy band, print dark on the white sheet */
  .ns-neq, .ns-neq__sign { stroke: var(--ink); color: var(--ink); }
  .ns-page main section { padding-block: 24px; break-inside: auto; }
  .ns-list__side { position: static; }
  .ns-six, .ns-verdict { background: #fff; color: #000; }
  .ns-page main :is(.ns-six, .ns-verdict) :is(h2, h3, p, .axis-row, .axis-row__lo, .axis-row__hi) { color: #000; }
  .nst-checklist__item { break-inside: avoid; }
  .ns-asked { display: none !important; }
  .ns-tick { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* "Print the twelve questions": the list alone, on its own sheet */
  .ns-print-list body > :not(main), .ns-print-list main > :not(#checklist) { display: none !important; }
  .ns-print-list .ns-list__grid { grid-template-columns: 1fr; }
  .ns-print-list .ns-board { display: none; }
}

/* 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; }

/* 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; }
}