/* Layout B: one frame, one left edge.
   Every block sits in the same --wide frame. Labels and step numbers live in a left rail;
   prose runs in the main column at a readable length; figures span the full frame. */

:root { --rail: 10.5rem; --gap: clamp(1.5rem, 4vw, 3rem); }

.frame { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }

.grid { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: var(--gap); }
.grid > * { grid-column: 2; }
.grid > .rail { grid-column: 1; grid-row: 1; }
.grid > .span { grid-column: 1 / -1; }

.sec { margin-top: 5rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.sec.first { margin-top: 3rem; border-top-color: var(--ink); }

.rail-label {
  font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); margin: 0.35rem 0 0; line-height: 1.4;
}

.prose p { margin: 0 0 1.1rem; }
.prose ul { padding-left: 1.2rem; margin: 0 0 1.2rem; }
.prose li { margin-bottom: 0.35rem; }
.prose li::marker { color: var(--ink-3); }
.prose .lede { font-size: 1.15em; line-height: 1.5; }

/* Decisions */
.decision { margin-top: 3.5rem; }
.decision .num {
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem); line-height: 1; font-weight: 400; letter-spacing: -0.02em;
  color: var(--sky); font-variant-numeric: lining-nums tabular-nums; margin: 0;
}
.decision h3, .decision h4 {
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem); line-height: 1.15; letter-spacing: -0.01em; font-weight: 500;
  margin: 0.15rem 0 1rem;
}

/* Results in the grid */
.b-results ol {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.75rem 2rem;
}
.b-results .num {
  display: block; font-size: clamp(2.8rem, 2rem + 3vw, 4.2rem); line-height: 1; letter-spacing: -0.03em;
  font-weight: 400; font-variant-numeric: lining-nums tabular-nums; color: var(--sky);
}
.b-results .what { display: block; margin-top: 0.5rem; font-size: 1rem; line-height: 1.4; color: var(--ink-2); }
.b-results .source { margin: 1.6rem 0 0; font-family: var(--mono); font-size: 0.75rem; line-height: 1.55; color: var(--ink-3); }

/* Figures span the frame */
figure.span { margin: 2.5rem 0; }
.sec > figure.span:last-child, .decision > figure.span:last-child { margin-bottom: 0; }

.lessons { margin-top: 0.25rem; }

@media (max-width: 48rem) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .grid > *, .grid > .rail, .grid > .span { grid-column: 1; }
  .grid > .rail { grid-row: auto; margin-bottom: 0.75rem; }
  .decision .num { font-size: 2rem; }
}

/* Portrait artifacts sit in the main column so they don't run a full screen tall */
.grid > figure.portrait { grid-column: 2; }
@media (max-width: 48rem) { .grid > figure.portrait { grid-column: 1; } }

/* ---------- System flow (Karat) ---------- */
.flow { list-style: none; margin: 1.75rem 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; border-top: 1px solid var(--ink); }
.flow li { position: relative; padding: 0.9rem 1.1rem 1rem 0; }
.flow li + li { padding-left: 1.1rem; border-left: 1px solid var(--rule); }
.flow li + li::before {
  content: "→"; position: absolute; left: -0.55rem; top: 0.75rem; width: 1.1rem; text-align: center;
  background: var(--paper); color: var(--sky); font-family: var(--mono); font-size: 0.9rem; line-height: 1.2;
}
.flow .who { display: block; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.3rem; }
.flow .does { display: block; font-size: 0.9375rem; line-height: 1.4; }
@media (max-width: 40rem) {
  .flow { grid-template-columns: 1fr; }
  .flow li + li { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); }
  .flow li + li::before { content: "↓"; left: auto; right: 0; top: 0.85rem; }
}
.constraints { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.75rem 2rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.constraints li { padding-top: 0.6rem; border-top: 1px solid var(--rule); font-size: 0.9375rem; line-height: 1.45; color: var(--ink-2); }
.constraints b { display: block; font-weight: 500; color: var(--ink); font-size: 1.05rem; }

.track { margin-top: 3.5rem; }
.track-label { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0; }

video { width: 100%; display: block; border: 1px solid var(--rule); background: #000; }
.prose ul.constraints { padding-left: 0; }

/* Track headers: a labeled band that groups the decisions beneath it */
.track { margin-top: 4rem; padding-top: 1rem; border-top: 2px solid var(--sky); }
.track .track-label { margin: 0.35rem 0 0; color: var(--accent); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
.track .track-title { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); line-height: 1.1; letter-spacing: -0.015em; font-weight: 500; margin: 0 0 0.6rem; }
.track p:not(.track-label) { color: var(--ink-2); margin-bottom: 0; }
.track + .decision { margin-top: 2.5rem; }

/* Linked artifacts: half-width thumbnails that open the full image or original document */
.pair > a { display: block; position: relative; }
.pair > a img { transition: border-color .15s ease; }
.pair > a:hover img, .pair > a:focus-visible img { border-color: var(--accent); }
.pair > a::after {
  content: "↗"; position: absolute; right: 0.5rem; top: 0.5rem; width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center; font-family: var(--mono); font-size: 0.8rem;
  background: var(--paper); color: var(--accent); border: 1px solid var(--rule);
  opacity: 0; transition: opacity .15s ease;
}
.pair > a:hover::after, .pair > a:focus-visible::after { opacity: 1; }
@media (hover: none) { .pair > a::after { opacity: 1; } }
figcaption .open { white-space: nowrap; }

.prose ul.moves { list-style: none; padding-left: 0; margin: 0 0 1.2rem; }
.moves li { padding: 0.75rem 0 0.75rem 1rem; border-left: 2px solid var(--sky); margin-bottom: 0.6rem; }
.moves b { font-weight: 500; }

/* Breadcrumb */
.crumbs { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.02em; margin: 0 0 1.4rem; display: flex; flex-wrap: wrap; gap: 0.4rem; color: var(--ink-3); }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs > * + *::before { content: "/"; margin-right: 0.4rem; color: var(--rule); }
.eyebrow a { color: inherit; text-decoration: none; } .eyebrow a:hover { color: var(--accent); text-decoration: underline; }

/* ---------- Portrait artifacts ---------- */
/* Single portrait document: half-width image with its caption beside it */
figure.media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1rem; align-items: end; }
figure.media > a { display: block; position: relative; }
figure.media figcaption { margin-top: 0; flex-direction: column; gap: 0.35rem; padding-bottom: 0.25rem; }
/* Three portraits in a row */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.trio > a { display: block; position: relative; }
@media (max-width: 40rem) {
  figure.media { grid-template-columns: 1fr; }
  figure.media figcaption { margin-top: 0.6rem; flex-direction: row; }
  .trio { grid-template-columns: 1fr 1fr; }
  .trio > a:first-child { grid-column: 1 / -1; }
}
/* Shared link affordance for all linked artifacts */
figure.media > a img, .trio > a img { transition: border-color .15s ease; }
figure.media > a:hover img, .trio > a:hover img, figure.media > a:focus-visible img, .trio > a:focus-visible img { border-color: var(--accent); }
figure.media > a::after, .trio > a::after {
  content: "↗"; position: absolute; right: 0.5rem; top: 0.5rem; width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center; font-family: var(--mono); font-size: 0.8rem;
  background: var(--paper); color: var(--accent); border: 1px solid var(--rule); opacity: 0; transition: opacity .15s ease;
}
figure.media > a:hover::after, .trio > a:hover::after, figure.media > a:focus-visible::after, .trio > a:focus-visible::after { opacity: 1; }
@media (hover: none) { figure.media > a::after, .trio > a::after { opacity: 1; } }
.pair .vid { display: flex; justify-content: center; background: #000; border: 1px solid var(--rule); }
.pair .vid video { width: auto; max-width: 100%; height: 100%; max-height: 32rem; aspect-ratio: 9 / 16; border: 0; }
@media (max-width: 40rem) { .pair .vid video { max-height: 36rem; } }

/* Pull quotes (mission, testimonials) */
.b-quote { margin: 2rem 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--sky); color: var(--ink); }
.b-quote p { font-size: 1.15em; line-height: 1.45; font-style: italic; margin: 0 0 0.6rem; }
.b-quote footer { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--ink-3); }

/* Vertical video as a half-width media figure */
figure.media > .vid { display: flex; justify-content: center; background: #000; border: 1px solid var(--rule); }
figure.media > .vid video { width: auto; max-width: 100%; max-height: 32rem; aspect-ratio: 9 / 16; border: 0; }

/* Operating tenets: banner, title, paragraph */
ul.tenets { list-style: none; margin: 2rem 0 2.5rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
.tenets li { margin: 0; }
.tenets img { width: 100%; aspect-ratio: 1266 / 309; object-fit: cover; border: 1px solid var(--rule); }
.tenets h5 { font-size: 1.3rem; line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; margin: 1rem 0 0.5rem; }
.tenets p { font-size: 0.975rem; line-height: 1.55; color: var(--ink-2); margin: 0; }
@media (max-width: 40rem) { ul.tenets { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- Composition pass: vertical rhythm ----------
   One spacing scale, largest between sections, then tracks, decisions, figures, and text.
   Grid items don't collapse margins, so consecutive figures share one gap. */
:root {
  --s-section: clamp(5.5rem, 4rem + 4.5vw, 8.5rem);
  --s-track: clamp(5rem, 3.75rem + 4vw, 7.5rem);
  --s-decision: clamp(4rem, 3rem + 3vw, 6rem);
  --s-figure: clamp(2.75rem, 2rem + 2.25vw, 4rem);
  --s-block: clamp(2rem, 1.6rem + 1.25vw, 2.75rem);
}
.cs-head { padding-bottom: 2.75rem; }
.facts { margin-top: 3.25rem; }
.sec { margin-top: var(--s-section); padding-top: 1.6rem; }
.sec.first { margin-top: clamp(4rem, 3rem + 3vw, 5.5rem); }
.track { margin-top: var(--s-track); padding-top: 1.6rem; }
.track .track-title { margin-bottom: 0.9rem; }
.track + .decision { margin-top: var(--s-block); padding-top: 0.5rem; }
.decision { margin-top: var(--s-decision); }
.decision h3, .decision h4 { margin-bottom: 1.35rem; }
figure.span { margin: var(--s-figure) 0; }
figure.span + figure.span { margin-top: 0; }
figcaption { margin-top: 0.9rem; }
figure.span + p { margin-top: 0; }
.b-quote { margin: var(--s-block) 0; }
.b-results ol + .b-quote { margin-top: calc(var(--s-block) + 0.75rem); }
.b-results .source { margin-top: var(--s-block); }
.flow { margin: 2.25rem 0 2rem; }
.prose ul.constraints { margin: 1.5rem 0 0.5rem; gap: 1.25rem 2rem; }
.prose ul.moves { margin: 1.5rem 0 1.75rem; }
.moves li { margin-bottom: 1rem; }
ul.tenets { margin: var(--s-figure) 0; row-gap: 3.5rem; }
.lessons li { margin-bottom: 2.1rem; }
.signoff { margin-top: var(--s-decision); }
.pager { margin-top: var(--s-section); }
@media (max-width: 48rem) {
  .grid > .rail { margin-bottom: 1rem; }
  .decision .num { margin-bottom: 0.25rem; }
}

/* Results: company outcomes row and platform legacy line */
.results-sub {
  font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
  margin: var(--s-figure) 0 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--rule);
}
.b-results p.legacy { font-size: 1.15em; line-height: 1.5; margin: var(--s-block) 0 0; }
.b-results ol + .b-quote, .b-results .legacy + .b-quote { margin-top: calc(var(--s-block) + 0.75rem); }
.b-results .num { font-size: clamp(2.8rem, 2rem + 3vw, 3.9rem); }
.results-sub--first { margin-top: 0.35rem; padding-top: 0; border-top: 0; }

/* One horizontal rule: 1px light gray everywhere */
.facts dl { border-top: 1px solid var(--rule); }
.sec.first { border-top-color: var(--rule); }
.flow { border-top: 1px solid var(--rule); }
.track { border-top: 1px solid var(--rule); }
.signoff { border-top: 1px solid var(--rule); }

/* Half-width media in the right column, caption directly beneath it */
figure.media--right > .vid, figure.media--right > a, figure.media--right > figcaption { grid-column: 2; }
figure.media--right > figcaption { margin-top: 0.9rem; flex-direction: row; padding-bottom: 0; }
@media (max-width: 40rem) { figure.media--right > .vid, figure.media--right > a, figure.media--right > figcaption { grid-column: 1; } }

/* Tenets: three columns on wide screens, two on tablets, one on phones */
ul.tenets { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.75rem; row-gap: 3rem; }
.tenets h5 { font-size: 1.2rem; }
.tenets p { font-size: 0.9375rem; }
@media (max-width: 62rem) { ul.tenets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { ul.tenets { grid-template-columns: 1fr; row-gap: 2.25rem; } }

/* A pair cell holding two stacked artifacts */
.pair > .stack { display: grid; gap: 1rem; align-content: start; }
.pair > .stack > a { display: block; position: relative; }
.pair > .stack > a img { transition: border-color .15s ease; }
.pair > .stack > a:hover img, .pair > .stack > a:focus-visible img { border-color: var(--accent); }
.pair > .stack > a::after {
  content: "↗"; position: absolute; right: 0.5rem; top: 0.5rem; width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center; font-family: var(--mono); font-size: 0.8rem;
  background: var(--paper); color: var(--accent); border: 1px solid var(--rule); opacity: 0; transition: opacity .15s ease;
}
.pair > .stack > a:hover::after, .pair > .stack > a:focus-visible::after { opacity: 1; }
@media (hover: none) { .pair > .stack > a::after { opacity: 1; } }

/* Team composition row: icon, count, role, one-line description */
.prose ul.team { list-style: none; padding: 0; margin: 1.75rem 0 2rem; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.team li { margin: 0; padding: 1rem 0.9rem 1rem 0; }
.team li + li { padding-left: 0.9rem; border-left: 1px solid var(--rule); }
.team svg { display: block; width: 28px; height: 28px; margin-bottom: 0.7rem; fill: none; stroke: var(--sky); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.team .count { display: block; font-size: 2rem; line-height: 1; letter-spacing: -0.02em; color: var(--sky); font-variant-numeric: lining-nums tabular-nums; }
.team .role { display: block; margin: 0.45rem 0 0.3rem; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); line-height: 1.35; }
.team .does { display: block; font-size: 0.9rem; line-height: 1.4; color: var(--ink-2); }
@media (max-width: 48rem) {
  .prose ul.team { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; column-gap: 1.25rem; }
  .team li, .team li + li { padding: 1rem 0; border-left: 0; border-top: 1px solid var(--rule); }
}
/* Keep descriptions aligned when a role label fits on one line */
@media (min-width: 48.01rem) { .team .role { min-height: calc(2em * 1.35); } }

/* Small, uniform artifact thumbnails inside the prose column (for dated or secondary artifacts) */
figure.thumbs { margin: var(--s-block) 0; }
.decision > figure.thumbs:last-child { margin-bottom: 0; }
.thumb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.thumb-grid > a { display: block; position: relative; }
.thumb-grid img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; border: 1px solid var(--rule); padding: 0.4rem; transition: border-color .15s ease; }
.thumb-grid > a:hover img, .thumb-grid > a:focus-visible img { border-color: var(--accent); }
.thumb-grid > a::after {
  content: "↗"; position: absolute; right: 0.4rem; top: 0.4rem; width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center; font-family: var(--mono); font-size: 0.75rem;
  background: var(--paper); color: var(--accent); border: 1px solid var(--rule); opacity: 0; transition: opacity .15s ease;
}
.thumb-grid > a:hover::after, .thumb-grid > a:focus-visible::after { opacity: 1; }
@media (hover: none) { .thumb-grid > a::after { opacity: 1; } }
@media (max-width: 40rem) { .thumb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Results expressed as short phrases rather than numbers */
.b-results ol.words .num { font-size: clamp(1.9rem, 1.4rem + 1.5vw, 2.4rem); letter-spacing: -0.02em; white-space: nowrap; }

/* Testimonials section */
.voices { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
.voices .b-quote { margin: 0 0 1.5rem; }
.voices .b-quote p { font-size: 1.05em; }

/* ---------- Story page (.matrix project) ---------- */
.story-hero { margin: 3rem 0 0; }
.story-hero img { border: 0; }
.story-question p { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem); line-height: 1.4; }
.prose ul.deal { margin-top: 1.75rem; }
.deal li { color: var(--ink-2); }
.impact-wrap { margin: var(--s-block) 0; overflow-x: auto; }
table.impact { width: 100%; border-collapse: collapse; font-variant-numeric: lining-nums tabular-nums; }
table.impact caption { text-align: left; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1rem; }
table.impact th, table.impact td { padding: 0.9rem 0.6rem; text-align: right; border-bottom: 1px solid var(--rule); vertical-align: bottom; }
table.impact thead th { font-family: var(--mono); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); line-height: 1.35; }
table.impact tbody th { text-align: left; font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; color: var(--accent); }
table.impact tbody td { font-size: 1.35rem; color: var(--ink); }
table.impact tbody tr:last-child td { color: var(--sky); font-size: 1.6rem; }
.impact-note { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); margin: 0.6rem 0 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 48rem) {
  table.impact, table.impact tbody, table.impact tr { display: block; }
  table.impact thead { display: none; }
  table.impact tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; margin-bottom: 1.5rem; }
  table.impact tbody th { grid-column: 1 / -1; border-bottom: 1px solid var(--ink-3); }
  table.impact td { text-align: left; display: flex; flex-direction: column-reverse; gap: 0.2rem; }
  table.impact td::after { content: attr(data-label); font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
}

/* Room between card grids and the paragraph that follows */
.prose ul.constraints { margin-bottom: var(--s-block); }
.prose ul.constraints + p { margin-top: 0; }

/* Source lines outside the results band */
.prose p.source { font-family: var(--mono); font-size: 0.75rem; line-height: 1.55; color: var(--ink-3); margin: 0 0 1.1rem; }

/* Two-run comparison diagram (Aquarium) */
.runs { border: 1px solid var(--rule); padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: 1.1rem; }
.run { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 6.5rem; align-items: center; column-gap: 1rem; }
.run-label { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.ops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.ops li { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 3.6rem; border: 1px solid var(--rule); padding: 0.6rem; font-size: 0.95rem; line-height: 1.25; text-align: center; color: var(--ink); background: var(--paper); }
.ops li + li::before { content: "→"; position: absolute; left: -0.5rem; top: 50%; transform: translate(-50%, -50%); font-family: var(--mono); font-size: 0.9rem; color: var(--ink-2); }
.run--b .ops li:not(.changed) { color: var(--ink-3); }
.ops li.changed { border: 2px solid var(--ink); font-weight: 500; }
.ops li small { display: block; margin-top: 0.25rem; font-family: var(--mono); font-size: 0.6875rem; font-weight: 400; color: var(--accent); }
.result { display: flex; align-items: center; justify-content: center; min-height: 3.6rem; font-family: var(--mono); font-size: 0.8125rem; padding: 0 0.5rem; background: var(--paper-2); color: var(--ink); }
.runs-note { margin: 0.25rem 0 0; font-size: 0.95rem; color: var(--ink-2); }
@media (max-width: 40rem) {
  .run { grid-template-columns: 1fr; row-gap: 0.5rem; }
  .ops { grid-template-columns: 1fr 1fr; }
  .ops li + li::before { content: none; }
  .result { justify-content: flex-start; min-height: 2.75rem; padding: 0 0.75rem; }
  .ops li { min-height: 3rem; }
}

/* ---------- Persona roster (Scripps) ---------- */
.prose ul.personas { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.personas li { margin: 0; padding-top: 0.9rem; border-top: 1px solid var(--rule); display: flex; flex-direction: column; }
.personas img { width: 4.5rem; height: 4.5rem; object-fit: cover; border: 0; margin-bottom: 0.8rem; filter: grayscale(1); }
.personas .p-name { font-weight: 500; font-size: 1.05rem; line-height: 1.25; color: var(--ink); }
.personas .p-role { display: block; margin: 0.2rem 0 0.6rem; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.personas q { display: block; font-size: 0.95rem; line-height: 1.4; color: var(--ink-2); quotes: "“" "”"; }
.personas .p-scen { display: block; margin-top: auto; padding-top: 0.8rem; font-family: var(--mono); font-size: 0.6875rem; line-height: 1.5; color: var(--accent); }
.personas li.secondary { background: var(--paper-2); border-top-color: var(--paper-2); padding: 0.9rem 1rem 1rem; }
.personas li.secondary .p-role { margin-top: 0; }
.personas li.secondary p { margin: 0; font-size: 0.95rem; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 52rem) { .prose ul.personas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; } }

/* Role-by-activity matrix (Scripps) */
.matrix-wrap { margin-top: var(--s-block); }
table.roles { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.roles caption { text-align: left; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.9rem; }
table.roles th, table.roles td { border-bottom: 1px solid var(--rule); padding: 0.55rem 0.25rem; }
table.roles thead th { font-family: var(--mono); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); vertical-align: bottom; text-align: center; line-height: 1.3; }
table.roles thead th:first-child { width: 11rem; text-align: left; }
table.roles tbody th { text-align: left; font-weight: 400; font-size: 0.95rem; line-height: 1.25; color: var(--ink); }
table.roles tbody th span { display: block; font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-top: 0.15rem; }
table.roles td { text-align: center; }
.dot { display: inline-block; width: 0.95rem; height: 0.95rem; border-radius: 50%; vertical-align: middle; }
.dot.full { background: var(--sky); }
.dot.some { border: 2px solid var(--sky); width: 0.7rem; height: 0.7rem; }
.matrix-key { margin: 0.8rem 0 0; font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; align-items: center; }
.matrix-key .dot { margin-right: 0.45rem; }
@media (max-width: 40rem) {
  table.roles thead th:first-child { width: 6.5rem; }
  table.roles thead th:not(:first-child) { writing-mode: vertical-rl; transform: rotate(180deg); text-align: left; height: 7.5rem; padding: 0.4rem 0; }
  table.roles tbody th { font-size: 0.85rem; }
  table.roles th, table.roles td { padding-left: 0.1rem; padding-right: 0.1rem; }
}

/* Topical long tail ladder (Scripps) */
.tail { border-top: 1px solid var(--ink); }
.tail-head, .tier { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr) 19rem; column-gap: 2rem; }
.tail-head { padding: 0.7rem 0; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.tier { padding: 1.1rem 0; border-bottom: 1px solid var(--rule); align-items: center; }
.tier-name { font-weight: 500; font-size: 1.1rem; line-height: 1.25; color: var(--ink); margin: 0; }
.tier-name small { display: block; margin-top: 0.3rem; font-family: var(--mono); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); line-height: 1.4; }
.pages { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.4rem; }
.pages i { display: block; width: var(--s); height: var(--s); }
.pages i.nav { background: var(--sky); }
.pages i.man { background: var(--ink-2); }
.pages i.auto { border: 1.5px solid var(--ink-3); }
.tier.t-sections { --s: 2.4rem; }
.tier.t-featured { --s: 1.9rem; }
.tier.t-3 { --s: 1.5rem; }
.tier.t-2 { --s: 1.15rem; }
.tier.t-1 { --s: 0.8rem; }
.tier.t-1 .pages { gap: 0.3rem; }
.moves-text { margin: 0; font-size: 0.95rem; line-height: 1.45; color: var(--ink-2); }
.moves-text b { font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-right: 0.35rem; }
.tier.hinge { background: var(--accent-wash); margin: 0 calc(-1 * clamp(0.75rem, 2vw, 1.25rem)); padding-left: clamp(0.75rem, 2vw, 1.25rem); padding-right: clamp(0.75rem, 2vw, 1.25rem); }
.tail-key { margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); align-items: center; }
.tail-key span { display: inline-flex; align-items: center; gap: 0.5rem; }
.tail-key i { display: inline-block; width: 0.85rem; height: 0.85rem; }
.tail-key i.nav { background: var(--sky); }
.tail-key i.man { background: var(--ink-2); }
.tail-key i.auto { border: 1.5px solid var(--ink-3); }
@media (max-width: 52rem) {
  .tail-head { display: none; }
  .tier { grid-template-columns: minmax(0, 1fr); row-gap: 0.8rem; }
}
.personas li.secondary .p-role, .tier.hinge .tier-name small { color: var(--ink-2); }
.tier.hinge .moves-text b { color: var(--ink); }

/* Long tail chart above the ladder */
.tail-chart { position: relative; margin-bottom: 2.25rem; }
.tc-bars { display: flex; align-items: flex-end; gap: 2px; height: clamp(9rem, 6rem + 9vw, 14rem); border-bottom: 1px solid var(--ink); }
.tc-bars i { flex: 1 1 0; height: var(--h); min-width: 0; }
.tc-bars i.nav { background: var(--sky); }
.tc-bars i.man { background: var(--ink-2); }
.tc-bars i.auto { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--ink-3); }
.tc-note { position: absolute; margin: 0; font-family: var(--mono); font-size: 0.75rem; line-height: 1.45; color: var(--ink-2); max-width: 15rem; }
.tc-head { left: 16%; top: 0.25rem; }
.tc-tail { right: 0; bottom: calc(2rem + 22%); text-align: right; max-width: 17rem; }
.tc-axis { margin-top: 0.5rem; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.pages i.auto { background: var(--paper-2); border: 0; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.tail-key i.auto { background: var(--paper-2); border: 0; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
@media (max-width: 40rem) {
  .tc-bars { gap: 1px; }
  .tc-bars i.auto { box-shadow: none; background: var(--rule); }
  .tc-note { font-size: 0.6875rem; max-width: 11rem; }
  .tc-head { left: 22%; }
  .tc-tail { bottom: calc(1.6rem + 20%); max-width: 12rem; }
}
@media (min-width: 40.01rem) { table.roles thead th:not(:first-child) { font-size: 0.625rem; letter-spacing: 0.02em; } table.roles thead th:first-child { width: 9.5rem; } }

/* ---------- PrescriberPoint ---------- */
/* Service blueprint, redrawn */
.bp-wrap { overflow-x: auto; border-top: 1px solid var(--ink); -webkit-overflow-scrolling: touch; }
table.bp { width: 100%; min-width: 60rem; border-collapse: collapse; table-layout: fixed; font-size: 0.8125rem; line-height: 1.35; }
table.bp th, table.bp td { padding: 0.55rem 0.5rem; vertical-align: top; text-align: left; border-bottom: 1px solid var(--rule); }
table.bp td + td, table.bp th + th, table.bp thead th { border-left: 1px solid var(--rule); }
table.bp thead tr.phases th { font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper); background: var(--ink); border-left: 1px solid var(--paper); }
table.bp thead tr.phases th.pa { background: var(--accent); }
table.bp thead tr.steps th { font-weight: 500; font-size: 0.8125rem; color: var(--ink); background: var(--paper-2); }
table.bp tbody th { width: 7.5rem; font-family: var(--mono); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
table.bp td { color: var(--ink-2); }
table.bp tr.visibility th, table.bp tr.visibility td { border-bottom: 2px solid var(--ink); }
table.bp td.none { color: var(--ink-3); }
table.bp tr.burden td { padding: 0.35rem 0.5rem 0.6rem; }
.load { display: block; height: 0.5rem; margin-bottom: 0.35rem; background: var(--accent); }
.load.l1 { opacity: 0.25; } .load.l2 { opacity: 0.5; } .load.l3 { opacity: 0.75; } .load.l4 { opacity: 1; }
.bp-note { margin: 0.6rem 0 0; font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); }

/* Homepage as a system, redrawn */
.quad { display: grid; grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 0.75rem; }
.quad .axis { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.quad .axis.top { grid-row: 1; text-align: center; }
.quad .axis.side { writing-mode: vertical-rl; transform: rotate(180deg); align-self: center; justify-self: center; }
.quad .cell { padding: 1rem 1.1rem 1.1rem; background: var(--paper-2); border-top: 3px solid var(--rule); }
.quad .cell.use { border-top-color: var(--accent); }
.quad .cell.signal { border-top-color: var(--ink-3); }
.quad h5 { margin: 0 0 0.35rem; font-size: 1.05rem; font-weight: 500; line-height: 1.25; }
.quad .cell p { margin: 0 0 0.7rem; font-size: 0.9rem; line-height: 1.45; color: var(--ink-2); }
.quad dl { margin: 0; display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.25rem 0.6rem; font-size: 0.8125rem; line-height: 1.4; }
.quad dt { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding-top: 0.15rem; }
.quad dd { margin: 0; color: var(--ink); }
@media (max-width: 40rem) {
  .quad { grid-template-columns: minmax(0, 1fr); }
  .quad .axis { display: none; }
  .quad .cell::before { content: attr(data-axis); display: block; margin-bottom: 0.4rem; font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
}

/* Four-tier pipeline */
.pipeline { position: relative; }
.pl-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; align-items: end; }
.pl-steps li { margin: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.pl-bar { position: relative; height: var(--h); min-height: 7.5rem; padding: 0.9rem 0.9rem 1rem; display: flex; flex-direction: column; justify-content: flex-end; color: var(--ink); }
.pl-steps li:nth-child(1) .pl-bar { --h: 9rem; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--rule); }
.pl-steps li:nth-child(2) .pl-bar { --h: 12rem; background: color-mix(in srgb, var(--sky) 22%, var(--paper)); }
.pl-steps li:nth-child(3) .pl-bar { --h: 15rem; background: color-mix(in srgb, var(--sky) 48%, var(--paper)); }
.pl-steps li:nth-child(4) .pl-bar { --h: 18rem; background: var(--accent); color: #fff; }
.pl-tier { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; }
.pl-name { display: block; margin: 0.15rem 0 0.4rem; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); font-weight: 500; line-height: 1.15; }
.pl-what { font-size: 0.875rem; line-height: 1.4; }
.pl-loop { position: absolute; top: 0.7rem; right: 0.7rem; font-family: var(--mono); font-size: 0.6875rem; padding: 0.2rem 0.45rem; background: var(--paper); color: var(--accent); border-radius: 999px; }
.pl-gate { margin-top: 0.6rem; padding-top: 0.5rem; border-top: 1px solid var(--rule); font-size: 0.8125rem; line-height: 1.4; color: var(--ink-2); min-height: 4.2em; }
.pl-gate b { display: block; font-family: var(--mono); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.15rem; }
.pl-band { display: grid; grid-template-columns: 3fr 1fr; gap: 0.6rem; margin-top: 0.9rem; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.pl-band span { padding-top: 0.45rem; border-top: 2px solid var(--ink-3); }
.pl-band span + span { border-top-color: var(--accent); color: var(--accent); }
.pl-adopt { margin-top: 1.4rem; padding: 0.9rem 1rem; border-left: 3px solid var(--accent); background: var(--paper-2); font-size: 0.9375rem; line-height: 1.45; color: var(--ink-2); }
.pl-adopt b { color: var(--ink); font-weight: 500; }
.pl-chain { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.55rem; padding: 0; list-style: none; }
.pl-chain li { margin: 0; font-family: var(--mono); font-size: 0.6875rem; padding: 0.25rem 0.55rem; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); }
.pl-chain li + li::before { content: "→ "; color: var(--ink-3); }
@media (max-width: 40rem) {
  .pl-steps { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .pl-bar { height: auto; min-height: 0; width: var(--w); }
  .pl-steps li:nth-child(1) .pl-bar { --w: 70%; }
  .pl-steps li:nth-child(2) .pl-bar { --w: 80%; }
  .pl-steps li:nth-child(3) .pl-bar { --w: 90%; }
  .pl-steps li:nth-child(4) .pl-bar { --w: 100%; }
  .pl-gate { min-height: 0; margin-bottom: 0.4rem; }
  .pl-band { display: none; }
}
table.bp { min-width: 52rem; font-size: 0.78rem; }
table.bp tbody th { width: 6.5rem; }
.quad dt, .pl-gate b { color: var(--ink-2); }
.pl-steps li:nth-child(4) .pl-tier { opacity: 1; }
.prose ul.pl-chain { padding-left: 0; }
@media (max-width: 40rem) { .quad .cell { grid-column: 1 !important; grid-row: auto !important; } }

/* Slide grid (PrescriberPoint AI principles) */
figure.slides { margin-top: 1rem; }
.slide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.slide-grid > a { display: block; position: relative; }
.slide-grid img { width: 100%; height: auto; border: 1px solid var(--rule); transition: border-color .15s ease; }
.slide-grid > a:hover img, .slide-grid > a:focus-visible img { border-color: var(--accent); }
@media (max-width: 40rem) { .slide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; } }
figure.slide-cover img { border: 1px solid var(--rule); }
@media (min-width: 40.01rem) {
  .pl-steps { align-items: stretch; }
  .pl-steps li { justify-content: flex-end; }
  .pl-what { min-height: calc(3 * 1.4em); }
  .pl-gate { height: 5.2em; min-height: 0; }
}
.pl-note { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.5rem; padding-bottom: 0.45rem; border-bottom: 1px dashed color-mix(in srgb, var(--sky) 60%, var(--paper)); font-family: var(--mono); font-size: 0.6875rem; line-height: 1.3; color: var(--ink-2); }
.pl-note svg { flex: none; width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 40.01rem) { .pl-what { min-height: calc(2 * 1.4em); } }

/* PrescriberPoint brand fonts, self-hosted (SIL OFL), loaded only where .ppb uses them */
@font-face { font-family: "Sora"; src: url("fonts/sora-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Mulish"; src: url("fonts/mulish-latin-wght-normal.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }
/* Homepage system, in PrescriberPoint's visual language (fixed brand colors in both themes) */
.ppb { --pp-orange: #E2652A; --pp-navy: #23323F; --pp-teal: #249894; --pp-bg: #F3F2EC; --pp-line: #E7E2D0;
  background: var(--pp-bg); color: var(--pp-navy); border-radius: 1.25rem; padding: clamp(1.1rem, 3vw, 2rem);
  font-family: "Mulish", "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif; }
.ppb h5, .ppb-kicker { font-family: "Sora", "Avenir Next", "Segoe UI", system-ui, sans-serif; font-weight: 700; }
.ppb-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem; margin-bottom: 1.1rem; }
.ppb-kicker { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); letter-spacing: -0.01em; }
.ppb-legend { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; color: #4a5560; }
.ppb-dot { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 50%; border: 1.5px solid var(--pp-navy); margin-left: 0.5rem; }
.ppb-dot.filled { background: var(--pp-orange); border-color: var(--pp-orange); margin-left: 0; }
.ppb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin-bottom: 0.6rem; }
.ppb-cols span { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pp-teal); }
.ppb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.ppb-card { background: #fff; border: 1px solid var(--pp-line); border-radius: 1rem; padding: 1.15rem 1.2rem 1.25rem; }
.ppb-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1.5px solid var(--pp-navy); margin-bottom: 0.8rem; }
.ppb-icon svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--pp-navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ppb-icon.filled { background: var(--pp-orange); border-color: var(--pp-orange); }
.ppb-icon.filled svg { stroke: #fff; }
.ppb h5 { margin: 0 0 0.3rem; font-size: 1.05rem; line-height: 1.25; color: var(--pp-navy); }
.ppb-card p { margin: 0 0 0.85rem; font-size: 0.9rem; line-height: 1.45; color: #3b4652; }
.ppb dl { margin: 0; padding-top: 0.75rem; border-top: 1px solid var(--pp-line); display: grid; grid-template-columns: 4.6rem 1fr; gap: 0.35rem 0.6rem; font-size: 0.8125rem; line-height: 1.4; }
.ppb dt { font-weight: 700; color: #4a5560; }
.ppb dd { margin: 0; color: var(--pp-navy); }
@media (max-width: 40rem) {
  .ppb-cols { display: none; }
  .ppb-grid { grid-template-columns: 1fr; }
  .ppb-card::before { content: attr(data-axis); display: block; margin-bottom: 0.6rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pp-teal); }
}
.ppb-cols span, .ppb-card::before { color: #2E516A; }

/* Context scenario timeline */
.scn { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.scn li { position: relative; display: grid; grid-template-columns: 4.5rem 1.5rem 9.5rem minmax(0, 1fr); align-items: baseline; padding: 0.95rem 0; border-bottom: 1px solid var(--rule); margin: 0; }
.scn li::before { content: ""; grid-column: 2; grid-row: 1; justify-self: center; width: 0.7rem; height: 0.7rem; border-radius: 50%; border: 2px solid var(--ink-2); background: var(--paper); transform: translateY(0.05rem); }
.scn li.system::before { background: var(--accent); border-color: var(--accent); }
.scn time { grid-column: 1; grid-row: 1; font-family: var(--mono); font-size: 0.875rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.scn-who { grid-column: 3; grid-row: 1; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.scn li.system .scn-who { color: var(--accent); }
.scn p { grid-column: 4; grid-row: 1; margin: 0; font-size: 1rem; line-height: 1.5; }
@media (max-width: 40rem) {
  .scn li { grid-template-columns: 1.4rem minmax(0, 1fr); row-gap: 0.3rem; }
  .scn li::before { grid-column: 1; grid-row: 1; }
  .scn time { grid-column: 2; grid-row: 1; }
  .scn-who { grid-column: 2; grid-row: 2; }
  .scn p { grid-column: 2; grid-row: 3; }
}

/* Leadership, discovery, delivery diagram */
.dd-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
svg.dd { display: block; width: 100%; min-width: 44rem; height: auto; font-family: var(--mono); }
.dd .b-lead, .dd .b-del { fill: var(--paper-2); }
.dd .b-disc { fill: var(--accent-wash); }
.dd .band { font-size: 11px; letter-spacing: 0.12em; fill: var(--ink-3); }
.dd .role { font-family: var(--serif); font-size: 14px; font-weight: 500; fill: var(--ink); }
.dd .resp { font-family: var(--serif); font-size: 12.5px; fill: var(--ink-2); }
.dd .lane { font-family: var(--serif); font-style: italic; font-size: 14px; fill: var(--ink-2); }
.dd .node rect { fill: var(--paper); stroke: var(--ink-2); stroke-width: 1.2; }
.dd .node.hi rect { fill: var(--accent); stroke: var(--accent); }
.dd .nl { font-family: var(--serif); font-size: 13.5px; font-weight: 500; fill: var(--ink); }
.dd .node.hi .nl { fill: #fff; }
.dd .ln { fill: none; stroke: var(--ink-2); stroke-width: 1.4; }
.dd .ln.thin { stroke-width: 1; stroke: var(--accent); }
.dd .axis { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.dd .tick { stroke: var(--ink-3); stroke-width: 1.5; }
.dd .tick.hi { stroke: var(--accent); stroke-width: 3; }
.dd .tag { font-size: 10.5px; letter-spacing: 0.12em; fill: var(--accent); }
.dd .note { font-size: 11px; fill: var(--ink-2); }
.dd .note.acc { fill: var(--accent); }
.dd .note.fbt { fill: var(--note); }
.dd .ship { fill: none; stroke: var(--accent); stroke-width: 2.2; }
.dd .fb { fill: none; stroke: var(--note); stroke-width: 1.6; stroke-dasharray: 5 4; }
.dd .adj { fill: none; stroke: var(--ink-3); stroke-width: 1.3; stroke-dasharray: 5 5; }
.dd .rl { font-family: var(--serif); font-size: 14px; font-weight: 500; fill: var(--ink); }
.dd .rs { font-size: 10.5px; fill: var(--ink-2); }
.dd .ahf { fill: var(--ink-2); } .dd .ahA { fill: var(--accent); } .dd .ahN { fill: var(--note); }

/* Tier map */
svg.tmap { display: block; width: 100%; min-width: 46rem; height: auto; font-family: var(--mono); }
.tmap .tl { font-size: 11px; letter-spacing: 0.12em; fill: var(--ink); }
.tmap .ts { font-family: var(--serif); font-size: 12.5px; fill: var(--ink-2); }
.tmap .eb { font-size: 11px; fill: var(--ink-2); }
.tmap .rule { stroke: var(--rule); stroke-width: 1; }
.tmap .n { fill: var(--paper); stroke: var(--ink-3); stroke-width: 1.2; }
.tmap .n2 { fill: var(--paper-2); }
.tmap .n3 { fill: color-mix(in srgb, var(--sky) 18%, var(--paper)); stroke: var(--accent); }
.tmap .n4 { fill: color-mix(in srgb, var(--sky) 34%, var(--paper)); stroke: var(--accent); }
.tmap .nl { font-family: var(--serif); font-size: 13px; font-weight: 500; fill: var(--ink); }
.tmap .l { fill: none; stroke: var(--ink-3); stroke-width: 1.3; }
.tmap .taf { fill: var(--ink-3); }
.tmap .d { fill: var(--ink-2); }
.tmap .dh { fill: var(--paper); stroke: var(--ink-2); stroke-width: 1.4; }
.tmap .j1 { fill: #E9C84A; } .tmap .j2 { fill: #D9475A; } .tmap .j3 { fill: #7A2350; } .tmap .j4 { fill: #8E8CE6; } .tmap .j5 { fill: #5ECFC4; }
.tmap .lg { fill: var(--paper-2); stroke: var(--rule); }
.tmap .lt { font-family: var(--serif); font-size: 12.5px; fill: var(--ink-2); }
.tmap .it { font-style: italic; }