/* Seen From Outside: the public site (landing, the area pages, how it works, the guided tour,
   about, privacy, terms, 404).
   Own palette and type; it does not share the dashboard's. Fonts are self-hosted: Bricolage
   Grotesque for headings (variable weight and optical size), Atkinson Hyperlegible Next for
   body text (400 and 600 only), JetBrains Mono (400) for domain names and configuration
   examples only. Nothing is fetched from elsewhere.
   Tokens: paper (page ground), sheet (report paper), ink and ink-2 (muted), line (hairline),
   accent (buttons, links, passed), pencil (the inspector's line and margin marks only),
   sev-* (issue marks only), night-* (the report room, the same dark set in both themes). */

@font-face { font-family: "Bricolage Grotesque"; font-weight: 200 800; font-display: swap; src: url("fonts/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 400; font-display: swap; src: url("fonts/atkinson-hyperlegible-next-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 600; font-display: swap; src: url("fonts/atkinson-hyperlegible-next-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }

:root {
  --paper: #EEF1EC; --sheet: #F9FAF7; --field: #FFFFFF; --code: #E3E8E2;
  --ink: #1B2421; --ink-2: #4B5852; --line: #C4CCC6;
  --accent: #1F5B45; --accent-2: #163F30; --accent-ink: #FFFFFF;
  --pencil: #AE7311; --focus: #1F5B45;
  --sev-high: #8E2F1B; --sev-medium: #8A4A14; --sev-low: #55621E;
  --sev-high-bg: #F6E6DF; --sev-medium-bg: #F3E7D6; --sev-low-bg: #E8ECD9;
  --night: #070B0A; --night-sheet: #17201D; --night-ink: #E2E8E3; --night-ink-2: #A6B1AB;
  --font-display: "Bricolage Grotesque", ui-sans-serif, "Segoe UI", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible Next", ui-sans-serif, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --max: 72rem; --gutter: clamp(1rem, 4vw, 3rem); --nav-h: 4rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #111816; --sheet: #18211E; --field: #0D1311; --code: #0D1311;
    --ink: #E2E8E3; --ink-2: #A2ADA7; --line: #33403A;
    --accent: #8CCBAB; --accent-2: #B0DEC6; --accent-ink: #0D1A14;
    --pencil: #E3A94B; --focus: #8CCBAB;
    --sev-high: #E8957A; --sev-medium: #CF8A5C; --sev-low: #98A659;
    --sev-high-bg: #2E1F1A; --sev-medium-bg: #2B2118; --sev-low-bg: #222816;
    color-scheme: dark;
  }
}
/* The report room: the same night set in both themes. */
.night {
  --paper: var(--night); --sheet: var(--night-sheet); --field: #0D1311; --code: #0D1311;
  --ink: var(--night-ink); --ink-2: var(--night-ink-2); --line: #2F3B36;
  --accent: #8CCBAB; --accent-2: #B0DEC6; --accent-ink: #0D1A14;
  --pencil: #E3A94B; --focus: var(--accent);
  --sev-high: #EDA088; --sev-medium: #D9926A; --sev-low: #A3B163;
  --sev-high-bg: #2E1F1A; --sev-medium-bg: #2B2118; --sev-low-bg: #222816;
  background: var(--paper); color: var(--ink); color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; accent-color: var(--accent); scroll-padding-top: calc(var(--nav-h) + 1rem); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.125rem/1.6 var(--font-body); }
::selection { background: var(--accent); color: var(--accent-ink); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; font-optical-sizing: auto; line-height: 1.06; letter-spacing: -0.02em; margin: 0 0 1rem; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 1.2rem + 4.6vw, 4.25rem); max-width: 20ch; }
h2 { font-size: clamp(1.75rem, 1rem + 2.6vw, 3rem); max-width: 24ch; }
h3 { font-size: 1.2rem; font-weight: 750; line-height: 1.2; }
p { margin: 0 0 1rem; max-width: 60ch; text-wrap: pretty; }
b, strong { font-weight: 600; }
a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
code, pre { font-family: var(--font-mono); }
pre { margin: 0 0 1rem; padding: 0.75rem 0.9rem; border-radius: 4px; background: var(--code); font-size: 0.85rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 30; padding: 0.6rem 1rem; border-radius: 6px; background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.skip:focus { top: 1rem; }
html:not(.js) .js-only { display: none; }
.js .no-js-only { display: none; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.25rem; border: 1px solid var(--accent); border-radius: 6px; background: var(--accent); color: var(--accent-ink); font: 600 1.0625rem/1.1 var(--font-body); text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn:active { translate: 0 1px; }
.btn-small { padding: 0 1rem; font-size: 0.95rem; white-space: nowrap; }
.btn-quiet { background: transparent; color: var(--accent); }
.btn-quiet:hover { background: transparent; color: var(--accent-2); border-color: var(--accent-2); }

/* The nav's contents line up with the page's content column (.wrap) on wide screens. */
.nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--nav-h); padding: 0.5rem calc(max(0px, (100% - var(--max)) / 2) + var(--gutter)); background: var(--paper); border-bottom: 1px solid transparent; }
.nav.is-scrolled { border-bottom-color: var(--line); }
.wordmark { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.nav-links { display: flex; gap: 1.75rem; margin-left: auto; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); font-weight: 600; font-size: 1rem; text-decoration: none; }
.nav-links a:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }

main { overflow-x: clip; }
/* one section of running text (the about, privacy and terms pages): several h2s share it, so they
   need space above, and plain lists keep the paragraphs' measure */
.prose h2 { margin-top: clamp(2.75rem, 6vw, 4rem); font-size: clamp(1.5rem, 1rem + 1.6vw, 2.1rem); }
.prose h3 { margin-bottom: 0.75rem; }
.prose pre { margin-bottom: 1rem; }
.prose .two-lists { margin-block: 1.5rem 2rem; }
.prose > ul { max-width: 60ch; margin: 0 0 1rem; padding-left: 1.25rem; }
.prose > ul li + li { margin-top: 0.4rem; }
/* the older pages' first heading sits right under its part's own padding */
.prose > :first-child { margin-top: 0; }

.two-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem clamp(2rem, 5vw, 4rem); margin-top: 2rem; }
.two-lists ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; align-content: start; }
.two-lists li { display: grid; grid-template-columns: 1.75rem 1fr; align-items: start; }
.list-yes li::before { content: "\2713"; color: var(--accent); font-weight: 600; }
.list-no li::before { content: "\00D7"; color: var(--ink-2); font-weight: 600; }

/* Result marks: the product's own classes (perimeter/report/sections.py). Severity colours
   are used only by issue marks. */
.st { display: inline-flex; gap: 0.3rem; align-items: center; padding: 0.15rem 0.5rem; border: 1px solid transparent; border-radius: 4px; font-size: 0.8rem; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.st-passed { color: var(--accent); border-color: var(--accent); }
.st-info { color: var(--ink-2); border-color: var(--line); }
.st-not-checked { color: var(--ink-2); border-style: dashed; border-color: var(--ink-2); }
.st-na { color: var(--ink-2); }
.st-issue.sev-high { color: var(--sev-high); background: var(--sev-high-bg); }
.st-issue.sev-medium { color: var(--sev-medium); background: var(--sev-medium-bg); }
.st-issue.sev-low { color: var(--sev-low); background: var(--sev-low-bg); }

.footer { position: relative; max-width: var(--max); margin: 0 auto; padding: 2.5rem var(--gutter) 3rem; color: var(--ink-2); font-size: 0.95rem; }
/* the rule above the footer runs the text column's width, inside the gutters */
.footer::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--line); }
.footer p { margin: 0 0 0.5rem; max-width: none; }
.footer-name { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--ink); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-links a[aria-current] { color: var(--ink); font-weight: 600; text-decoration: none; }
.footer-note { font-size: 0.9rem; }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .two-lists { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .nav { gap: 0.75rem; }
  .wordmark { font-size: 1.05rem; }
}
@media (max-width: 359px) {
  .wordmark, .btn-small { white-space: normal; }
}

/* ---- The landing page (redesign spec §5). The pencil line and the motion follow below. ---- */
/* Each band's padding is a pair of variables so the pencil line can reach its edges. */
.band { position: relative; --pad-t: clamp(4.5rem, 10vw, 8rem); --pad-b: var(--pad-t); padding-block: var(--pad-t) var(--pad-b); }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.dn { font-family: var(--font-mono); font-size: 0.9em; font-weight: 400; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.textlink { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.ring { position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: 44px; height: 44px; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring .rb { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; }
.ring .ri { fill: none; stroke: var(--pencil); stroke-width: 2.6; stroke-dasharray: 1 2; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: center; transform-box: fill-box; }
.ring b { position: relative; font: 600 1.05rem/1 var(--font-body); }
.chip { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; max-width: 100%; margin: 0.75rem 0 0; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: 4px; background: var(--sheet); color: var(--ink); font-size: 0.95rem; line-height: 1.4; text-align: left; }
.chip-text { min-width: 0; }
.chip-nc { border: 1.5px dashed var(--ink-2); }

/* hero */
.hero { --pad-t: clamp(2.5rem, 6vw, 5rem); --pad-b: clamp(4.5rem, 9vw, 7.5rem); }
.hero h1 { max-width: 22ch; font-size: clamp(2.4rem, 1.2rem + 4.2vw, 4rem); line-height: 1.02; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.75rem 5%; align-items: center; margin-top: clamp(1.75rem, 4vw, 2.75rem); }
.hero-lede { font-size: 1.25rem; line-height: 1.55; max-width: 36ch; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; margin-top: 1.75rem; }
.fine { margin: 1.25rem 0 0; max-width: 36ch; font-size: 1rem; color: var(--ink-2); }
.facade-fig { display: flex; flex-direction: column; margin: 0; }
.facade { display: block; width: 100%; height: auto; overflow: visible; }
.facade .ln { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.facade .face { fill: var(--sheet); }
.facade .sh { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.facade .url { font: 400 13px var(--font-mono); fill: var(--ink-2); }
.facade .ld { fill: none; stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 2 4; }
.facade .hw { fill: none; stroke: var(--pencil); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.facade .hr circle { fill: var(--paper); stroke: var(--pencil); stroke-width: 2.2; }
.facade .hr .n { font: 600 14px var(--font-body); fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.facade .hr .lb { font: 600 16px var(--font-body); fill: var(--ink); }
.facade-fig figcaption { margin-top: 0.9rem; padding-left: 54%; font-size: 0.95rem; line-height: 1.5; color: var(--ink-2); }
/* the items are flex boxes, which the list-item counter skips, so the legend keeps its own */
.legend { counter-reset: legend; margin: 0.9rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.4rem 2rem; font-size: 1rem; }
.legend li { counter-increment: legend; display: flex; align-items: center; gap: 0.6rem; }
.legend li::before { content: counter(legend); display: inline-grid; place-items: center; flex: none; width: 1.6rem; height: 1.6rem; border: 2px solid var(--pencil); border-radius: 50%; font-size: 0.8rem; font-weight: 600; }
@media (min-width: 600px) {
  .legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 599.98px) {
  .facade .hr .lb { display: none; }
  .facade .hr circle { r: 21px; }
  .facade .hr .n { font-size: 22px; }
  .facade .ln { stroke-width: 2.6; }
  .facade .hw { stroke-width: 4; }
  .facade .ld { stroke-width: 1.6; }
  .facade-fig figcaption { order: -1; margin: 0 0 0.75rem; padding-left: 0; }
}
@media (max-width: 859.98px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }

/* statement */
.statement { --pad-t: clamp(5rem, 12vw, 10rem); }
.statement-text { max-width: 30ch; margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.75rem, 1.1rem + 2.8vw, 3.25rem); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.statement-text span { color: var(--ink-2); }

/* the walk: stops on alternating sides of a centre column; under 700px the rings run down the left */
.walk-head { max-width: 40rem; }
.walk-head p { color: var(--ink-2); }
.walk-legend { font-size: 1rem; line-height: 1.9; }
.walk-legend .st { vertical-align: 0.1em; }
.walk { --stops-gap: clamp(3rem, 6vw, 5rem); }
@media (min-width: 700px) and (max-width: 899.98px) { .walk { --stops-gap: clamp(4.5rem, 10vw, 5rem); } }
.walk-stops { margin: var(--stops-gap) 0 0; padding: 0; list-style: none; }
.stop { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem minmax(0, 1fr); align-items: start; }
.stop + .stop { margin-top: 3rem; }
.stop .ring { grid-column: 2; grid-row: 1; justify-self: center; }
.stop-body { grid-row: 1; min-width: 0; max-width: 30rem; padding-top: 0.35rem; }
.stop:nth-child(odd) .stop-body { grid-column: 1; justify-self: end; text-align: right; }
.stop:nth-child(even) .stop-body { grid-column: 3; }
.stop-name { margin: 0; font-size: clamp(1.35rem, 1rem + 0.9vw, 1.7rem); }
.stop-line { margin: 0.5rem 0 0; color: var(--ink-2); }
.stop-more { margin: 0.25rem 0 0; }
.stop:nth-child(odd) .stop-line { margin-left: auto; }
.walk-end { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem minmax(0, 1fr); margin-top: 4rem; }
.walk-end > * { grid-column: 3; max-width: 30rem; }
.walk-end > p + p { margin-top: 0.6rem; color: var(--ink-2); }
@media (min-width: 1000px) { .stop + .stop { margin-top: -2rem; } }
@media (max-width: 699.98px) {
  .stop, .walk-end { grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 0.75rem; }
  .stop .ring { grid-column: 1; width: 40px; height: 40px; }
  .stop:nth-child(odd) .stop-body, .stop:nth-child(even) .stop-body { grid-column: 2; justify-self: start; text-align: left; }
  .walk-end > * { grid-column: 2; }
}

/* the report room: the night ground in both themes */
.report { --pad-t: clamp(5rem, 11vw, 9rem); }
.lit, .scene .part { background: var(--sheet); border: 1px solid var(--line); border-radius: 4px; box-shadow: 6px 6px 0 rgb(0 0 0 / 0.45); }
/* the lamp: a pencil bar along the top edge of each sheet (with motion it lights as the sheet arrives) */
.lit::before, .scene .part::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; border-radius: 3px 3px 0 0; background: var(--pencil); pointer-events: none; }
.report h2 { max-width: 22ch; }
.report h4, .report h5, .tour-sheet h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; margin: 0; }

/* the scene, static: each beat is its caption then its part of the sheet (in that DOM order);
   from 900px the captions sit in a left column beside their parts. In beat a the sheet label
   comes between the caption and part a, right above the part at every width (from 900px it
   takes its own first row in the sheet column, so each beat is given its row). The track holds the scene; it is three
   screens tall when the scene is pinned (below). */
.report { --scene-gap: clamp(2.5rem, 5vw, 4rem); }
.scene-track { margin-top: var(--scene-gap); }
.scene { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.beat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.beat + .beat { margin-top: 2.5rem; }
.cap h3 { margin: 0; max-width: 26ch; font-size: clamp(1.3rem, 1rem + 0.9vw, 1.65rem); line-height: 1.2; }
.sheet-label { margin: 0; font-size: 0.9rem; color: var(--ink-2); }
@media (max-width: 899.98px) {
  .beat-a > .sheet-label { margin-bottom: -0.25rem; }
}
.scene .part { min-width: 0; padding: 1.5rem clamp(1rem, 3vw, 2rem) 1.6rem; }
@media (min-width: 900px) {
  .scene { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 3.5rem 6%; align-items: start; }
  .beat { display: contents; }
  .sheet-label { grid-column: 2; grid-row: 1; margin-bottom: -2.75rem; }
  .beat-a > .cap, .beat-a > .part { grid-row: 2; }
  .beat-b > .cap, .beat-b > .part { grid-row: 3; }
  .beat-c > .cap, .beat-c > .part { grid-row: 4; }
  .cap { grid-column: 1; padding-top: 1.5rem; }
  .scene .part { grid-column: 2; }
  .beat + .beat { margin-top: 0; }
}
.score-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; }
.score { margin: 0; font: 800 4.5rem/1 var(--font-display); letter-spacing: -0.04em; }
.score-max { margin-left: 0.15rem; font-size: 0.32em; font-weight: 700; letter-spacing: 0; color: var(--ink-2); }
.score-none { margin: 0; font-weight: 600; }
.score-note { margin: 0; max-width: 24ch; font-size: 1rem; line-height: 1.45; color: var(--ink-2); }
.score-note strong { display: block; color: var(--ink); font-weight: 600; font-size: 1.05rem; }
.cats { container-type: inline-size; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.cats li { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 3ch; align-items: center; gap: 0.25rem 1rem; padding: 0.45rem 0; border-top: 1px solid var(--line); font-size: 1rem; line-height: 1.3; }
.cat-count { display: block; font-size: 0.84rem; color: var(--ink-2); }
.cat-score { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.cat-state { grid-column: 2 / span 2; text-align: right; font-size: 0.92rem; color: var(--ink-2); }
/* the tick scale: ten ticks (a hard-stop repeating gradient) and a marker at the score's tens */
.ticks { position: relative; height: 14px; border-right: 1px solid var(--line); background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 10%); }
.tick-at { position: absolute; top: 0; bottom: 0; width: 3px; border-radius: 1px; background: var(--ink); translate: -50% 0; }
.tick-0 { left: 0%; } .tick-10 { left: 10%; } .tick-20 { left: 20%; } .tick-30 { left: 30%; }
.tick-40 { left: 40%; } .tick-50 { left: 50%; } .tick-60 { left: 60%; } .tick-70 { left: 70%; }
.tick-80 { left: 80%; } .tick-90 { left: 90%; } .tick-100 { left: 100%; }
@container (max-width: 380px) {
  .cats li { grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 0.75rem; }
  .cats .ticks { grid-column: 1 / -1; order: 3; height: 10px; }
  .cats .cat-state { grid-column: 2; }
}
.f-mark { margin: 0; }
.f-title { margin: 0.5rem 0 0; max-width: 32ch; font: 700 1.3rem/1.25 var(--font-display); letter-spacing: -0.012em; }
.who { margin: 1rem 0 0; font-size: 0.95rem; color: var(--ink-2); }
.who b { color: var(--ink); font-weight: 600; }
.toggle { display: inline-flex; gap: 3px; margin-top: 1rem; padding: 3px; max-width: 100%; border: 1px solid var(--ink-2); border-radius: 6px; }
.toggle button { min-height: 44px; padding: 0 0.9rem; border: 0; border-radius: 4px; background: transparent; color: var(--ink); font: 600 0.95rem/1.2 var(--font-body); cursor: pointer; }
.toggle button[aria-pressed="true"] { background: var(--ink); color: var(--sheet); }
.panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: 1rem; }
/* .scene .panel-h outranks .report h4, so the toggle's headings keep the body font where they show */
.panel-h, .scene .panel-h { margin: 0 0 0.4rem; font: 600 0.9rem/1.3 var(--font-body); letter-spacing: 0; color: var(--ink-2); }
.panel p { font-size: 1rem; margin-bottom: 0.6rem; }
/* the two views share one cell, so the box is always the taller view's height and switching
   never moves the page; the one not chosen is is-off */
.js .panels > .panel { grid-area: 1 / 1; }
.js .panels > .panel.is-off { visibility: hidden; }
/* until the script has set the toggle up, only the first view shows in the shared cell */
.js:not(.toggles-ready) .panels > [data-panel] ~ [data-panel] { visibility: hidden; }
.js .panel-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cfg-platform { margin: 0.75rem 0 0.3rem; font-size: 0.9rem; font-weight: 600; color: var(--ink-2); }
.report pre, .area-sheet pre, .tour-sheet pre { max-width: 100%; margin: 0; overflow-x: auto; border: 1px solid var(--line); color: var(--ink); font-size: 0.8rem; line-height: 1.6; }
/* configuration examples keep whole lines and scroll inside themselves (each is focusable, so a
   keyboard can scroll it); every grid or flex parent holds them with minmax(0, ...) or min-width: 0.
   The selectors outrank `.report pre, .area-sheet pre, .tour-sheet pre` (print wraps them again) */
.report pre.cfg-code, .area-sheet pre.cfg-code, .tour-sheet pre.cfg-code, pre.cfg-code { white-space: pre; overflow-x: auto; overflow-wrap: normal; max-width: 100%; }
.gh { padding: 0.5rem 0 0.5rem 2rem; font-size: 1.08rem; }
.fi-list + .gh { margin-top: 1rem; }
.ct, .tour-cat .cat-state { font: 600 0.95rem var(--font-body); letter-spacing: 0; color: var(--ink-2); }
.fi-list { margin: 0; padding: 0; list-style: none; }
.fi { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); align-items: baseline; gap: 0.15rem 0.75rem; padding: 0.55rem 0; border-top: 1px solid var(--line); font-size: 0.98rem; line-height: 1.4; }
.fi .st { justify-self: start; }
/* the pencil's margin marks: a ring round the score, a line under the finding, a tick before each group */
.score, .f-title, .gh { position: relative; }
.mk { position: absolute; overflow: visible; pointer-events: none; }
.mk path { fill: none; stroke: var(--pencil); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; }
.score .mk { left: -12px; top: -10px; width: calc(100% + 24px); height: calc(100% + 20px); }
.f-title .mk { left: 0; bottom: -11px; width: min(100%, 320px); height: 12px; }
.gh .mk { left: 0; top: 0.45rem; width: 22px; height: 22px; }

/* the report reader: tabs once the script runs, otherwise four panels in order */
.report { --reader-gap: clamp(4rem, 8vw, 6.5rem); }
.reader { margin-top: var(--reader-gap); padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 3.4vw, 2.75rem) clamp(1.75rem, 4vw, 3rem); }
.rd-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1.5rem; padding-bottom: 0.9rem; border-bottom: 3px double var(--line); }
.rd-dom { margin: 0; font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); line-height: 1.2; }
.rd-meta { margin: 0; font-size: 0.95rem; color: var(--ink-2); }
.tabs { display: flex; flex-wrap: wrap; gap: 0 4px; margin-top: 0.5rem; border-bottom: 1px solid var(--line); }
.tabs button { min-height: 48px; padding: 0 0.9rem; margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--ink-2); font: 600 1rem/1.2 var(--font-body); cursor: pointer; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.rp { padding-top: 1.75rem; }
.rp + .rp { margin-top: 2.75rem; border-top: 1px solid var(--line); }
.js .rp + .rp { margin-top: 0; border-top: 0; }
.js [role="tabpanel"][hidden] { display: none; }
/* until the script has set the tabs up (it waits for the DOM), only the first panel shows, so the
   page is laid out once, before the first paint, and an anchor below the reader stays put */
.js:not(.tabs-ready) [role="tabpanel"] ~ [role="tabpanel"] { display: none; }
.rp > .panel-h { margin-bottom: 1.25rem; font: 800 1.6rem/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
.reader h5, .tour-sheet .wg h3 { font-size: 1.2rem; }
.sum { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.75rem 6%; align-items: start; }
.sum .cats { margin-top: 0; }
.sum-l .score { margin: 0.4rem 0 0.75rem; }
.lead { font-size: 1.05rem; }
.top3 { margin-top: 2rem; }
.top3 ol { margin: 0.6rem 0 0; padding: 0 0 0 1.5rem; }
.top3 li { padding: 0.5rem 0 0.5rem 0.25rem; border-top: 1px solid var(--line); }
.disclaimer { margin: 1.5rem 0 0; max-width: 70ch; font-size: 0.92rem; color: var(--ink-2); }
.fl { margin: 0; padding: 0; list-style: none; }
.fl li { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); align-items: baseline; gap: 0.25rem 0.9rem; padding: 1.25rem 0; border-top: 1px solid var(--line); }
.fl li .st { justify-self: start; }
.fl h5, .fl h3, .fl p { grid-column: 2; }
.fl p { margin: 0; font-size: 1rem; }
.fl .who { margin-top: 0.15rem; }
.wg + .wg { margin-top: 2.25rem; }
.wg-note { margin: 0.4rem 0 0; font-size: 0.95rem; color: var(--ink-2); }
.wg ul { margin: 0.75rem 0 0; padding: 0; list-style: none; }
.wg li { padding: 1rem 0; border-top: 1px solid var(--line); }
.wg li > p { margin: 0.4rem 0 0; font-size: 1rem; }
.wg li > .wt { margin-top: 0; font-weight: 600; font-size: 1.05rem; }
.wt .st { margin-right: 0.4rem; vertical-align: 0.1em; }
.cfg { margin-top: 0.5rem; }
.cfg summary { display: list-item; min-height: 44px; padding-block: 0.6rem; color: var(--accent); font-weight: 600; font-size: 1rem; cursor: pointer; }
.ck { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem 2.25rem; }
.ck p { margin: 0.5rem 0 0; font-size: 1rem; }
.ck .st { margin-right: 0.4rem; }
.ck-rows { margin: 0.5rem 0 0; padding: 0; list-style: none; }
.ck-rows li { margin: 0.4rem 0 0; font-size: 1rem; }
.ck-rows .st { margin-right: 0.4rem; }
.ck-x { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem 2.25rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.ck-x p { margin: 0.4rem 0 0; font-size: 1rem; }
.ck-x p:first-child { margin-top: 0; }
@media (max-width: 899.98px) { .ck { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699.98px) {
  .tabs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tabs button { padding: 0.5rem 0.4rem; text-align: left; }
  .sum, .ck, .ck-x { grid-template-columns: minmax(0, 1fr); }
  .fl li, .fi { grid-template-columns: minmax(0, 1fr); }
  .fl h5, .fl h3, .fl p { grid-column: 1; }
}
.reader-after { margin-top: 2.25rem; max-width: 40rem; }
.reader-cap { font-size: 0.95rem; color: var(--ink-2); }
.reader-links { display: flex; flex-wrap: wrap; gap: 0 1.75rem; margin: 0; }

/* it looks, it doesn't poke */
.scope-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 2rem 6%; align-items: start; }
.scope-copy p { color: var(--ink-2); }
.scope-copy p:last-child { margin: 0; }
.scope-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-auto-flow: column; border: 1.5px solid var(--ink); border-radius: 4px; background: var(--sheet); }
.scope-box h3 { margin: 0; padding: 1.1rem 1.4rem 0; font-size: 1.15rem; }
.scope-box ul { margin: 0; padding: 0.75rem 1.4rem 1.4rem; list-style: none; }
.scope-box li { position: relative; padding-left: 1.75rem; font-size: 1rem; line-height: 1.45; }
.scope-box li + li { margin-top: 0.6rem; }
.scope-no-h, .scope-no { border-left: 1px solid var(--line); }
.scope-yes li::before { content: ""; position: absolute; left: 3px; top: 0.3em; width: 12px; height: 6px; border-left: 2.5px solid var(--pencil); border-bottom: 2.5px solid var(--pencil); transform: rotate(-45deg); }
.scope-no li::before, .scope-no li::after { content: ""; position: absolute; left: 3px; top: 0.68em; width: 13px; height: 2px; background: var(--ink-2); transform: rotate(45deg); }
.scope-no li::after { transform: rotate(-45deg); }
@media (max-width: 899.98px) { .scope-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 559.98px) {
  .scope-box { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .scope-box h3 { padding-inline: 1rem; }
  .scope-box ul { padding-inline: 1rem; }
  .scope-no-h, .scope-no { border-left: 0; }
  .scope-no-h { border-top: 1px solid var(--line); }
}

/* three steps */
.steps-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 2.5rem 6%; align-items: start; }
.step-list { margin: 0; padding: 0; list-style: none; }
.step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 1.25rem; align-items: start; }
.step + .step { margin-top: 2.5rem; }
.step-body { padding-top: 0.4rem; max-width: 28rem; }
.step-body h3 { margin: 0; font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem); }
.step-body p { margin: 0.4rem 0 0; color: var(--ink-2); }
@media (max-width: 699.98px) { .steps-grid { grid-template-columns: minmax(0, 1fr); } }
/* the link under the steps sits in the steps' column, in line with their text and so clear of
   the pencil line through the rings */
.steps-more { grid-column: 2; margin: -1rem 0 0; padding-left: calc(44px + 1.25rem); }
@media (max-width: 699.98px) { .steps-more { grid-column: 1; } }

/* the request */
.request-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 2.5rem 6%; align-items: start; }
.request-copy p { color: var(--ink-2); }
/* the paper sheets on the day ground: the request slip, an area page's sample and the tour's sheets */
.slip, .area-sheet, .tour-sheet { border: 1px solid var(--line); border-radius: 4px; background: var(--sheet); box-shadow: 6px 6px 0 var(--line); }
.slip { min-width: 0; padding: 0 clamp(1rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem); }
.slip-top { margin: 0; padding: 0.9rem 0; border-bottom: 1.5px dashed var(--ink-2); font-size: 0.92rem; font-weight: 600; }
.slip > .no-js-only { margin: 1.25rem 0 0; }
.field { margin-top: 1.25rem; }
.field label { display: block; margin-bottom: 0.35rem; font-weight: 600; font-size: 1rem; }
.field label span { font-weight: 400; color: var(--ink-2); }
.field input, .field textarea { display: block; width: 100%; min-height: 48px; padding: 0.6rem 0.75rem; border: 1px solid var(--ink-2); border-radius: 6px; background: var(--field); color: var(--ink); font: 400 1.0625rem/1.4 var(--font-body); }
.field input[aria-invalid="true"] { border-width: 2px; border-color: var(--ink); }
.field-hint { margin: 0 0 0.4rem; font-size: 0.95rem; color: var(--ink-2); }
.field input::placeholder { color: var(--ink-2); }
#req-domain { font-family: var(--font-mono); font-size: 1rem; }
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.field-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 1rem; }
#request-form .btn { width: 100%; min-height: 48px; margin-top: 1.5rem; }
.form-help, .form-watch { margin: 0.75rem 0 0; font-size: 0.95rem; color: var(--ink-2); }
.form-status { margin: 0.5rem 0 0; font-weight: 600; }
.form-status:empty { margin: 0; }
.copy-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.98rem; }
.request .btn-quiet { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid var(--accent); border-radius: 6px; font: 600 0.95rem/1.1 var(--font-body); cursor: pointer; }
@media (max-width: 859.98px) { .request-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599.98px) { .field-pair { grid-template-columns: minmax(0, 1fr); } }

/* ---- The pencil line (spec §5.1): one line from the hero's first ring to the small ring
   beside the request slip, built from pieces that meet edge to edge. Each piece is an
   absolutely placed SVG spanning its section's content column (grid-column 1 / -1 on a
   positioned grid), so every x below is a share of that column, and every y is a section
   edge, a padding (--pad-t, --pad-b) or a row of that grid (given as start / end: an
   absolutely placed item's auto end is the grid's far edge, not the next line). An SVG box
   ignores top plus bottom, so every piece sets top and a height (straight pieces through --h).
   Straight pieces are 24px wide boxes with the line down their middle. Curves ("swoops") stretch a 100 by 100 box between
   two lanes; their visible path keeps a fixed screen width and is drawn on through a mask
   path, because a path with a fixed screen width cannot be dashed by pathLength.
   Lanes: --lane-l (left margin, under 700px), --lane-c (the walk's centre), --lane-r (right
   margin), --lane-w (beside the walk heading), --lane-in (into the first sheet), --lane-g
   (the scope gutter), --lane-s (the steps' rings), --lane-q (beside the slip) and --lane-h
   (the hero's first ring). Text keeps clear of them; boxes (the sheets, the reader, the scope
   box, the slip) sit above the line, so where it meets one it passes under it.
   Where the shares come from (re-check them if these grids change): --lane-h is the hero's
   ring 1 (x 350 in the facade's 20 to 720 viewBox, so 330/700 = 47.143% of the drawing),
   which from 860px sits in the 7fr column of 5fr/7fr with a 5% gap: 44.583% + 47.143% of
   55.417% = 70.708%. --lane-s is the steps' ring centre: the 1.2fr column of 1fr/1.2fr with a
   6% gap starts at 94% / 2.2 + 6% = 48.7273%, plus half the 44px ring; --lane-q is the
   middle of that gap in the request grid (42.7273% + 3%); --lane-g is the middle of the
   scope grid's gap (2fr/3fr, 6%: 37.6% + 3%). ---- */
:root {
  --lane-l: 1.375rem; --lane-c: 50%; --lane-r: calc(100% - 1.25rem); --lane-w: 43rem;
  --lane-in: calc(100% - 6rem); --lane-g: 40.6%; --lane-s: calc(48.7273% + 22px);
  --lane-q: 45.7273%; --lane-h: 70.708%; --thr-w: 2.4px;
}
@media (max-width: 859.98px) { :root { --lane-h: 47.143%; } }
@media (max-width: 699.98px) { :root { --thr-w: 2px; } }

.statement .wrap, .walk .wrap, .report .wrap { display: grid; grid-template-columns: minmax(0, 1fr); }
.statement .wrap, .walk .wrap, .report .wrap, .scope-grid, .steps-grid, .request-grid { position: relative; }
.walk-head > :last-child, .report .wrap > h2 { margin-bottom: 0; }
.scene .part, .reader, .scope-box, .slip, .facade { position: relative; }

.thr { position: absolute; grid-column: 1 / -1; overflow: visible; pointer-events: none; }
.thr path { fill: none; stroke: var(--pencil); stroke-width: var(--thr-w); stroke-linecap: butt; stroke-dasharray: 1 2; }
/* straight pieces reach 1px past each end, so two pieces never meet on a seam of half-covered pixels */
.thr-v { width: 24px; height: calc(var(--h) + 2px); margin: -1px 0 0 -12px; }
.thr-s .ink { stroke-dasharray: none; vector-effect: non-scaling-stroke; }
.thr-s mask path { stroke: #FFFFFF; stroke-width: 24; }

/* hero: from the first ring down out of the hero, which clips it */
.hero { overflow-y: clip; }
/* without overflow: clip (Safari before 16) the tail would run on into the statement */
@supports not (overflow: clip) { .hero-tail { display: none; } }
.fac { position: relative; }
.hero-tail { left: 47.143%; top: 90.385%; --h: 60rem; }

/* statement: round the right of the text (the left under 700px) */
.st-in-r, .st-in-l { top: calc(-1 * var(--pad-t)); height: var(--pad-t); }
.st-in-r { left: var(--lane-h); width: calc(var(--lane-r) - var(--lane-h)); }
.st-in-l { left: var(--lane-l); width: calc(var(--lane-h) - var(--lane-l)); }
.st-side { top: 0; --h: calc(100% + var(--pad-b)); left: var(--lane-r); }
.st-out { top: 100%; height: var(--pad-b); left: var(--lane-w); width: calc(var(--lane-r) - var(--lane-w)); }

/* the walk: beside the heading, a turn into the centre at the first ring, then the spine */
.walk-in { grid-row: 1 / 2; top: calc(-1 * var(--pad-t)); --h: calc(100% + var(--pad-t)); left: var(--lane-r); }
.walk-turn { grid-row: 2 / 3; top: 0; height: calc(var(--stops-gap) + 22px); left: var(--lane-c); width: calc(var(--lane-r) - var(--lane-c)); }
/* rows 2 and 3 are the stops and the end note; top is the stops' margin plus ring 1's centre */
.walk-spine { grid-row: 2 / 4; top: calc(var(--stops-gap) + 22px); --h: calc(100% - var(--stops-gap) - 22px + var(--pad-b)); left: var(--lane-c); }

/* the report: in beside the heading and under the first sheet; out from under the reader */
.rep-in-s { grid-row: 1 / 2; top: calc(-1 * var(--pad-t)); height: var(--pad-t); left: var(--lane-c); width: calc(var(--lane-r) - var(--lane-c)); }
.rep-in { grid-row: 1 / 2; top: 0; --h: calc(100% + var(--scene-gap) + 20rem); left: var(--lane-r); }
/* rows 3 and 4 are the reader and the text after it; it starts 2rem under the reader's top */
.rep-out { grid-row: 3 / 5; top: calc(var(--reader-gap) + 2rem); --h: calc(100% - var(--reader-gap) - 2rem + var(--pad-b)); left: var(--lane-r); }
.rep-out-s { grid-row: 4 / 5; top: 100%; height: var(--pad-b); left: var(--lane-g); width: calc(var(--lane-w) - var(--lane-g)); }

/* scope, steps (through the rings), request (to the small ring) */
.scope-line { top: calc(-1 * var(--pad-t)); --h: calc(100% + var(--pad-t)); left: var(--lane-r); }
.steps-in-d, .steps-in-t { top: calc(-2 * var(--pad-t)); height: calc(2 * var(--pad-t) + 22px); }
.steps-in-d { left: var(--lane-g); width: calc(var(--lane-s) - var(--lane-g)); }
.steps-in-t { left: var(--lane-s); width: calc(var(--lane-r) - var(--lane-s)); }
.steps-spine { top: 22px; --h: calc(100% - 22px); left: var(--lane-s); }
.req-in-d, .req-in-t { top: calc(-2 * var(--pad-t)); height: calc(2 * var(--pad-t)); }
.req-in-d { left: var(--lane-q); width: calc(var(--lane-s) - var(--lane-q)); }
.req-in-t { left: var(--lane-s); width: calc(var(--lane-r) - var(--lane-s)); }
.req-end { grid-row: 1 / 2; top: 0; --h: calc(100% + 1.25rem); left: var(--lane-r); }
.endring { position: absolute; grid-row: 1 / 2; grid-column: 1 / -1; top: calc(100% + 1.25rem); left: var(--lane-r); width: 20px; height: 20px; margin: -10px 0 0 -10px; }
.endring svg { display: block; width: 100%; height: 100%; overflow: visible; }
.endring .rb { fill: var(--pencil); }
.endring .ri { fill: none; stroke: var(--pencil); stroke-width: 2.2; stroke-dasharray: 1 2; transform: rotate(-90deg); transform-origin: center; transform-box: fill-box; }

.st-in-l, .st-out, .rep-out-s, .steps-in-d, .req-in-d { display: none; }
@media (min-width: 900px) {
  .st-side { --h: 100%; }
  .st-out, .rep-out-s, .steps-in-d { display: block; }
  .walk-in { left: var(--lane-w); }
  .walk-turn { width: calc(var(--lane-w) - var(--lane-c)); }
  .rep-in-s { width: calc(var(--lane-in) - var(--lane-c)); }
  .rep-in { left: var(--lane-in); --h: calc(100% + var(--scene-gap) + 5.5rem); }
  .rep-out { left: var(--lane-w); --h: calc(100% - var(--reader-gap) - 2rem); }
  .scope-line { left: var(--lane-g); }
  .steps-in-t { display: none; }
}
@media (min-width: 860px) {
  .req-in-d { display: block; }
  .req-in-t { display: none; }
  .req-end { grid-row: auto; --h: 1.875rem; left: var(--lane-q); }
  .endring { grid-row: auto; top: 1.875rem; left: var(--lane-q); }
}
@media (max-width: 699.98px) {
  .st-in-r, .walk-turn, .rep-in-s, .steps-in-t, .req-in-t { display: none; }
  .st-in-l { display: block; }
  .st-side, .scope-line { left: var(--lane-l); }
  .walk-in { left: var(--lane-l); --h: calc(100% + var(--pad-t) + var(--stops-gap) + 20px); }
  .walk-spine { top: calc(var(--stops-gap) + 20px); --h: calc(100% - var(--stops-gap) - 20px + var(--pad-b)); left: var(--lane-l); }
  .rep-in { top: calc(-1 * var(--pad-t)); --h: calc(100% + var(--pad-t) + var(--scene-gap) + 20rem); left: var(--lane-l); }
  .rep-out { left: var(--lane-l); }
  .steps-spine { top: calc(-2 * var(--pad-t)); --h: calc(100% + 2 * var(--pad-t)); left: var(--lane-l); }
  .req-end { top: calc(-2 * var(--pad-t)); --h: calc(100% + 2 * var(--pad-t) + 1.25rem); left: var(--lane-l); }
  .endring { left: var(--lane-l); }
}

/* Text keeps out of the line's lanes: clear of the right margin from 700px, and indented past
   the left margin under 700px (the walk's stops and the steps already are). */
@media (min-width: 700px) {
  .statement-text { max-width: min(30ch, 100% - 4rem); }
  .walk-head { max-width: min(40rem, 100% - 4rem); }
  .reader-after { max-width: min(40rem, 100% - 4rem); }
}
@media (min-width: 700px) and (max-width: 899.98px) { .scope-copy { max-width: calc(100% - 4rem); } }
@media (min-width: 700px) and (max-width: 859.98px) { .request-copy { max-width: calc(100% - 4rem); } }
@media (max-width: 699.98px) {
  .statement-text, .walk-head, .report .wrap > h2, .sheet-label, .cap, .reader-after,
  .scope-copy, .steps-grid > h2, .request-copy { padding-left: 3.5rem; }
}

/* ---------- Area pages (/checks/…) ---------- */
.area-top { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 5vw, 3.5rem); }
.area-top-grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) { .area-top-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); } }
.area-count { margin: 0 0 0.75rem; font-size: 0.95rem; font-weight: 600; color: var(--ink-2); }
.area-lede { max-width: 34ch; margin: 1rem 0 0; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); color: var(--ink-2); }
.area-fig figcaption { padding-left: 0; }
.facade .hr.here circle { stroke-width: 4.5; }
.facade-here .hr:not(.here) circle { stroke: var(--ink-2); }
.area-part { padding-block: clamp(2rem, 5vw, 3.25rem); border-top: 1px solid var(--line); }
/* the sections keep the full wrap, so they share the area head's left edge; their content is
   held to a reading width (:where keeps the headings' and paragraphs' own measures) */
:where(.area-col) > * { max-width: 46rem; }
.area-col > p { max-width: 62ch; }
/* the older pages' prose column is also an `.area-col`: it keeps the prose measure (60ch), so
   this comes after the rule above and ties it in weight */
.prose > p { max-width: 60ch; }
.lookat + p { margin-top: 1.25rem; }
.lookat { display: grid; gap: 0.9rem; max-width: 62ch; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.lookat b { font-weight: 600; }
.noscore { color: var(--ink-2); }
.who-list { display: grid; gap: 0.5rem; max-width: 62ch; margin: 1rem 0 0; padding-left: 1.25rem; }
.stop-nav { padding-block: clamp(2rem, 5vw, 3rem) clamp(3rem, 7vw, 5rem); border-top: 1px solid var(--line); }
.stop-nav-grid { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
.stop-nav a:not(.btn) { display: inline-flex; flex-direction: column; min-height: 44px; justify-content: center; font-weight: 600; }
.sn-dir { font-size: 0.85rem; font-weight: 400; color: var(--ink-2); }
.stop-nav .btn { margin-left: auto; }
/* a button that comes first (How it works, the guided tour) keeps the page's left edge; area
   pages put it last, on the right */
.stop-nav .btn:first-child { margin-left: 0; }
.area-sheet { margin-top: 1.5rem; padding: clamp(1.25rem, 3vw, 2rem); }
.as-label { margin: 0 0 0.75rem; font-size: 0.85rem; color: var(--ink-2); }
.as-top { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: baseline; }
.as-name { margin: 0; }
.as-score { margin: 0; color: var(--ink-2); }
/* the report's counts line under an area's score (area sheet) or heading (tour) */
.as-counts, .tour-counts { margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--ink-2); }
.as-partial { display: inline-block; margin-left: 0.35rem; padding: 0 0.4rem; border: 1px solid var(--line); border-radius: 4px; font-size: 0.85rem; line-height: 1.5; }
.as-note { max-width: 62ch; margin: 0.75rem 0 0; font-size: 0.95rem; color: var(--ink-2); }
.as-num { font: 800 1.6rem/1 var(--font-display); color: var(--ink); }
.as-num .score-max { font-size: 0.55em; }
.as-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.as-row { padding-top: 1rem; border-top: 1px solid var(--line); }
.as-head { margin: 0 0 0.3rem; }
.as-head .st { margin-right: 0.4rem; vertical-align: 0.1em; }
.as-check { font-weight: 600; }
.as-title { margin: 0; color: var(--ink-2); }
.as-issue { margin-top: 0.75rem; }
.how-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; margin: 0; padding: 0; list-style: none; counter-reset: how; }
.how-steps > li { position: relative; padding-left: 3.25rem; counter-increment: how; }
.how-steps > li::before { content: counter(how); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 2px solid var(--pencil); border-radius: 50%; font-weight: 600; }
.how-steps h3 { margin: 0.2rem 0 0.5rem; }
.how-steps pre { max-width: 100%; white-space: pre; overflow-x: auto; }
.qa h3 { margin: 1.75rem 0 0.4rem; font-size: 1.15rem; }
.qa h3:first-child { margin-top: 0.5rem; }
.qa p { max-width: 62ch; }

/* ---- Motion (spec §5.2, §5.3). Every starting state is under .js.motion, which the script
   sets only without reduced motion; print and reduced motion undo them all (below). ---- */
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pop { to { opacity: 1; transform: none; } }

/* The hero walk: once the drawing is in view (on load on most screens) the line goes round
   the building in 1.6s, and each ring pops in as the line reaches it. */
.facade .hr { transform-box: fill-box; transform-origin: center; }
.js.motion .facade .hw { stroke-dashoffset: 1; }
.js.motion .facade .hr { opacity: 0; transform: scale(0.4); }
.js.motion .fac.is-in .hw { animation: draw 1.6s ease-out 0.2s both; }
.js.motion .fac.is-in .hr { animation: pop 0.45s cubic-bezier(.2, .7, .2, 1) 0.2s both; }
.js.motion .fac.is-in .hr.d2 { animation-delay: 0.25s; }
.js.motion .fac.is-in .hr.d3 { animation-delay: 0.35s; }
.js.motion .fac.is-in .hr.d4 { animation-delay: 0.45s; }
.js.motion .fac.is-in .hr.d5 { animation-delay: 0.7s; }
.js.motion .fac.is-in .hr.d6 { animation-delay: 1.1s; }
.js.motion .fac.is-in .hr.d7 { animation-delay: 1.2s; }

/* The line: undrawn until reached. Without scroll timelines the script adds is-drawn to each
   piece as it reaches 60% of the screen; with them, each piece draws as that 60% line passes
   over it (a view timeline whose end edge is inset 40%), so the tip stays there. */
.js.motion .thr path { stroke-dashoffset: 1; }
.js.motion .thr.is-drawn path { stroke-dashoffset: 0; transition: stroke-dashoffset 0.9s ease-out; }
@supports (animation-timeline: view()) {
  .js.motion .thr { view-timeline: --thr block; view-timeline-inset: 0% 40%; }
  .js.motion .thr path { animation: draw linear both; animation-timeline: --thr; animation-range: entry-crossing 0% entry-crossing 100%; }
  /* at the end of the page the script draws whatever the 60% line could not reach */
  .js.motion .thr.is-drawn path { animation: none; }
}

/* Rings ink in when the line reaches their stop or step; the small ring when it arrives. */
.js.motion .stop .ring .ri, .js.motion .step .ring .ri, .js.motion .endring .ri { stroke-dashoffset: 1; }
.js.motion .stop.is-in .ring .ri, .js.motion .step.is-in .ring .ri, .js.motion .endring.is-in .ri { stroke-dashoffset: 0; transition: stroke-dashoffset 0.6s ease-out 0.1s; }

/* Content arrives with the line: each block rises into place as the tip reaches it, once. */
.js.motion [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease-out, transform 0.6s cubic-bezier(.2, .7, .2, 1); }
.js.motion [data-reveal].is-in { opacity: 1; transform: none; }

/* The lamp lights as its sheet arrives; the margin marks draw once their part has arrived (when
   the scene is pinned, once their beat is on the stage instead: below). */
.js.motion .lit::before, .js.motion .scene .part::before { opacity: 0; }
.js.motion .lit.is-in::before, .js.motion .scene .part.is-in::before { opacity: 1; transition: opacity 0.8s ease-out; }
/* The reader opens from its top edge once its top is 15% above the bottom of the window (or it
   has been passed), or as focus enters it. It starts
   at 0.0001, not 0, so it is laid out and reachable; it is visible as soon as is-open lands. */
.js.motion .reader { transform: scale(0.72); transform-origin: 50% 0; opacity: 0.0001; }
.js.motion .reader.is-open { transform: none; opacity: 1; transition: transform 0.7s cubic-bezier(.2,.7,.2,1), opacity 0.4s ease-out; }
/* a block revealed or a reader opened because focus landed in it arrives at once, so the focus
   ring shows straight away */
.js.motion [data-reveal].is-instant, .js.motion .reader.is-instant { transition: none; }
.js.motion .mk path { stroke-dashoffset: 1; }
.js.motion:not(.pin) .part.is-in .mk path { animation: draw 0.6s ease-out 0.4s both; }

/* ---- The pinned report scene (spec §5.4). Only under `pin`: motion is welcome, the window is
   big enough and the script measured that every part fits the stage. Only on screen: print lays
   the scene out as the static one. The track is three screens tall and the stage (.scene)
   sticks under the nav for as long as the track lasts; three marks at thirds of the track tell
   the script which beat the stage shows (data-beat on the stage); they split the stuck range
   in three equal steps, so each beat gets the same scroll. The beats share one cell:
   captions in the caption column and parts in the sheet column from 900px, the caption above
   the part under it. One beat shows at a time; the others are only transparent and let
   clicks through to it, so they stay in the tab order and the accessibility tree. A beat that
   takes keyboard focus shows at once and the others step aside, so focus is never on a
   transparent beat.
   A bar beside the captions fills by thirds. Part c starts in order of importance (is-ranked)
   and, the first time beat c shows, its findings slide into their groups. ---- */
.beat-mark { display: none; }
@media screen {
  /* The stage is stuck while the middle of the window runs from --mark-b's first term (the
     window's middle less the stage's top margin) over 200vh + nav + 2rem (the track less the
     stage); --mark-step is a third of that, and beat b starts one step in. */
  .js.motion.pin .scene-track {
    position: relative; height: 300vh; height: 300svh;
    --mark-step: calc((200vh + var(--nav-h) + 2rem) / 3);
    --mark-b: calc(50vh - var(--nav-h) - 1rem + var(--mark-step));
  }
  @supports (height: 1svh) {
    .js.motion.pin .scene-track {
      --mark-step: calc((200svh + var(--nav-h) + 2rem) / 3);
      --mark-b: calc(50svh - var(--nav-h) - 1rem + var(--mark-step));
    }
  }
  .js.motion.pin .beat-mark { display: block; position: absolute; left: 0; width: 1px; pointer-events: none; }
  .js.motion.pin .beat-mark[data-beat-mark="a"] { top: 0; height: var(--mark-b); }
  .js.motion.pin .beat-mark[data-beat-mark="b"] { top: var(--mark-b); height: var(--mark-step); }
  .js.motion.pin .beat-mark[data-beat-mark="c"] { top: calc(var(--mark-b) + var(--mark-step)); bottom: 0; }
  .js.motion.pin .scene { position: sticky; top: calc(var(--nav-h) + 1rem); height: calc(100vh - var(--nav-h) - 2rem); height: calc(100svh - var(--nav-h) - 2rem); align-content: start; align-items: start; }
  .js.motion.pin .scene .sheet-label { grid-row: 1; }
  .js.motion.pin .scene .cap, .js.motion.pin .scene .part { grid-row: 2; }
  .js.motion.pin .scene .cap { padding-left: 1.75rem; }
  /* a little tighter than the static scene, so the tallest part (b, which holds the IT view's
     three examples) fits the stage of a 1280 by 800 window */
  .js.motion.pin .scene { row-gap: 0.75rem; }
  .js.motion.pin .scene .sheet-label { margin-bottom: 0; }
  .js.motion.pin .scene .part { padding-block: 1.25rem; }
  .js.motion.pin .scene .toggle, .js.motion.pin .scene .panels { margin-top: 0.75rem; }

  .js.motion.pin .scene .cap, .js.motion.pin .scene .part { opacity: 0; pointer-events: none; transform: none; transition: opacity 0.3s ease-out; }
  .js.motion.pin .scene[data-beat="a"] .beat-a > .cap, .js.motion.pin .scene[data-beat="a"] .beat-a > .part,
  .js.motion.pin .scene[data-beat="b"] .beat-b > .cap, .js.motion.pin .scene[data-beat="b"] .beat-b > .part,
  .js.motion.pin .scene[data-beat="c"] .beat-c > .cap, .js.motion.pin .scene[data-beat="c"] .beat-c > .part { opacity: 1; pointer-events: auto; transition: opacity 0.5s ease-out 0.15s; }
  /* kept apart from the rules above: a browser without :has() drops only these (the script
     still moves data-beat to a beat that takes focus) */
  .js.motion.pin .scene .beat:has(:focus-visible) > .cap, .js.motion.pin .scene .beat:has(:focus-visible) > .part { opacity: 1; pointer-events: auto; transition: none; }
  .js.motion.pin .scene:has(:focus-visible) .beat:not(:has(:focus-visible)) > .cap, .js.motion.pin .scene:has(:focus-visible) .beat:not(:has(:focus-visible)) > .part { opacity: 0; pointer-events: none; transition: none; }

  /* the progress bar: a hairline with a pencil fill, a third per beat */
  .js.motion.pin .scene::before, .js.motion.pin .scene::after { content: ""; grid-column: 1; grid-row: 2; justify-self: start; width: 2px; height: 8rem; margin-top: 1.5rem; background: var(--line); }
  .js.motion.pin .scene::after { background: var(--pencil); transform-origin: 50% 0; transform: scaleY(0.33); transition: transform 0.6s cubic-bezier(.2, .7, .2, 1); }
  .js.motion.pin .scene[data-beat="b"]::after { transform: scaleY(0.66); }
  .js.motion.pin .scene[data-beat="c"]::after { transform: scaleY(1); }

  /* the margin marks draw each time their beat takes the stage, stay drawn while it fades out
     (0.3s) and then reset unseen; part c's ticks wait for their headings to fade in (the
     headings are always rendered, only clipped while ranked, so the ticks draw from undrawn) */
  .js.motion.pin .scene .mk path { transition: stroke-dashoffset 0s linear 0.3s; }
  .js.motion.pin .scene[data-beat="a"] .part-a.is-in .mk path, .js.motion.pin .scene[data-beat="b"] .part-b.is-in .mk path { stroke-dashoffset: 0; transition: stroke-dashoffset 0.6s ease-out 0.4s; }
  .js.motion.pin .scene[data-beat="c"] .part-c.is-in .mk path { stroke-dashoffset: 0; transition: stroke-dashoffset 0.6s ease-out 0.9s; }

  /* part c in order of importance, then (the script) sliding into its groups, which fade in */
  .js.motion.pin .part-c.is-ranked { display: flex; flex-direction: column; }
  .js.motion.pin .is-ranked .fi-list { display: contents; }
  /* clipped out of the flow, not removed, so the headings stay in the accessibility tree */
  .js.motion.pin .is-ranked .gh { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .js.motion.pin .is-ranked .fi[data-rank="1"] { order: 1; }
  .js.motion.pin .is-ranked .fi[data-rank="2"] { order: 2; }
  .js.motion.pin .is-ranked .fi[data-rank="3"] { order: 3; }
  .js.motion.pin .is-ranked .fi[data-rank="4"] { order: 4; }
  .js.motion.pin .is-ranked .fi[data-rank="5"] { order: 5; }
  .js.motion.pin .is-ranked .fi[data-rank="6"] { order: 6; }
  .js.motion.pin .is-ranked .fi[data-rank="7"] { order: 7; }
  .js.motion.pin .is-ranked .fi[data-rank="8"] { order: 8; }
  .js.motion.pin .is-ranked .fi[data-rank="9"] { order: 9; }
  .js.motion.pin .part-c .gh { opacity: 0; }
  .js.motion.pin .part-c:not(.is-ranked) .gh { animation: pop 0.4s ease-out 0.7s both; }
  .js.motion.pin .fi.is-moving { transition: transform 0.5s cubic-bezier(.2, .7, .2, 1) 0.3s; }
  .js.motion.pin .fi.is-moving[data-rank="2"] { transition-delay: 0.36s; }
  .js.motion.pin .fi.is-moving[data-rank="3"] { transition-delay: 0.42s; }
  .js.motion.pin .fi.is-moving[data-rank="4"] { transition-delay: 0.48s; }
  .js.motion.pin .fi.is-moving[data-rank="5"] { transition-delay: 0.54s; }
  .js.motion.pin .fi.is-moving[data-rank="6"] { transition-delay: 0.6s; }
  .js.motion.pin .fi.is-moving[data-rank="7"] { transition-delay: 0.66s; }
  .js.motion.pin .fi.is-moving[data-rank="8"] { transition-delay: 0.72s; }
  .js.motion.pin .fi.is-moving[data-rank="9"] { transition-delay: 0.78s; }
}
/* from 700 to 899px the stage is one column: the captions, the sheet label, then the parts
   (nothing pins under 700px: see PIN_QUERY in site.js) */
@media screen and (max-width: 899.98px) {
  .js.motion.pin .scene .beat { display: contents; }
  .js.motion.pin .scene .cap, .js.motion.pin .scene .sheet-label, .js.motion.pin .scene .part { grid-column: 1; }
  .js.motion.pin .scene .cap { grid-row: 1; }
  .js.motion.pin .scene .sheet-label { grid-row: 2; margin-bottom: -0.25rem; }
  .js.motion.pin .scene .part { grid-row: 3; }
  .js.motion.pin .scene::before, .js.motion.pin .scene::after { grid-row: 1; height: auto; margin-top: 0; align-self: stretch; }
}

/* Nothing moves under reduced motion. Opacity and transform are reset only on the elements
   that fade or move (the list below), so fixed decorative rotations (a ring's start at the top,
   the scope box's tick and cross) keep their shape. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .js.motion *, .js.motion *::before, .js.motion *::after {
    animation: none !important; transition: none !important; stroke-dashoffset: 0 !important;
  }
  .js.motion [data-reveal], .js.motion .reader, .js.motion .facade .hr, .js.motion .lit::before, .js.motion .scene .part::before, .js.motion .scene .cap, .js.motion .scene .part, .js.motion .scene::after, .js.motion .gh, .js.motion .fi {
    opacity: 1 !important; transform: none !important;
  }
}

/* Print: white paper, black text, no navigation. The report room (.night) prints on white too,
   and everything the tabs and the toggle would keep out of view is shown. */
@media print {
  :root, .night { --paper: #FFFFFF; --sheet: #FFFFFF; --field: #FFFFFF; --code: #F0F0F0; --ink: #000000; --ink-2: #333333; --line: #999999; --accent: #000000; --accent-2: #000000; --accent-ink: #FFFFFF; --pencil: #AE7311; --focus: #000000; --sev-high: #8E2F1B; --sev-medium: #8A4A14; --sev-low: #55621E; --sev-high-bg: #F6E6DF; --sev-medium-bg: #F3E7D6; --sev-low-bg: #E8ECD9; color-scheme: light; }
  body, .night { background: #FFFFFF; color: #000000; }
  a { color: #000000; }
  .nav, .skip, .no-print, .tabs, .toggle { display: none !important; }
  .btn { background: none; color: #000000; border-color: #000000; }
  .lit, .scene .part, .slip, .area-sheet, .tour-sheet { box-shadow: none; }
  .reader [role="tabpanel"][hidden], .js:not(.tabs-ready) [role="tabpanel"] ~ [role="tabpanel"] { display: block !important; }
  .js .panels > .panel { grid-area: auto; }
  .js .panels > .panel.is-off, .js:not(.toggles-ready) .panels > [data-panel] ~ [data-panel] { visibility: visible !important; }
  /* The pinned scene's layout is screen-only (inside @media screen), so these never match in
     print today; they are kept as a backstop should that scoping change. */
  .pin .scene-track { height: auto !important; }
  .pin .scene { position: static !important; height: auto !important; }
  .pin .scene .beat, .pin .scene .cap, .pin .scene .part { opacity: 1 !important; visibility: visible !important; }
  .is-ranked { display: block !important; }
  .is-ranked .gh { display: block !important; position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip-path: none !important; white-space: normal !important; }
  .is-ranked .fi-list { display: block !important; }
  .js .panel-h { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  /* paper can't scroll: examples and the record block wrap again, one step more specific than
     the screen rules they undo */
  :root .report pre.cfg-code, :root .area-sheet pre.cfg-code, :root .tour-sheet pre.cfg-code, :root pre.cfg-code, :root .how-steps pre { white-space: pre-wrap; overflow-wrap: anywhere; overflow: visible; }
  .js.motion *, .js.motion *::before, .js.motion *::after {
    animation: none !important; transition: none !important; stroke-dashoffset: 0 !important;
    visibility: visible !important;
  }
  /* as under reduced motion: only what fades or moves, never the fixed rotations */
  .js.motion [data-reveal], .js.motion .reader, .js.motion .facade .hr, .js.motion .lit::before, .js.motion .scene .part::before, .js.motion .scene .cap, .js.motion .scene .part, .js.motion .scene::after, .js.motion .gh, .js.motion .fi {
    opacity: 1 !important; transform: none !important;
  }
}

/* ---------- Guided tour (/sample-tour) ---------- */
/* every grid here holds text and configuration examples, so each track is minmax(0, ...) */
.tour { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 3.5rem); padding-block: clamp(1rem, 3vw, 2rem) clamp(2.5rem, 6vw, 4rem); }
.tour-step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 900px) {
  .tour-step { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 2rem; align-items: start; }
}
/* the note stays beside its section as it scrolls; on screen only, so print lays it out plain */
@media screen and (min-width: 900px) {
  .tour-note { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
}
.tour-note { padding-left: 1rem; border-left: 3px solid var(--pencil); }
.tour-note p { margin: 0; max-width: 34ch; font-size: 1.05rem; }
.tour-sheet { min-width: 0; padding: clamp(1.25rem, 3vw, 2rem); }
.tour-sheet h2 { margin-top: 0; font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem); }
.tour-passed { padding-left: 1.25rem; }
.tour-cat + .tour-cat { margin-top: 1.25rem; }
.tour-export { margin: 0; }
/* a paragraph right under the lede: the tour's demonstration-domain line, and the 404 page's
   link home */
.area-lede + p { margin: 1rem 0 0; }