/* Vikrant Deshmukh: the "Atelier Workbench" design (rationale in docs/12-site-design.md)
   04 Atelier's page (paper and ink by day, leather and foil by night) with three of 02
   Instrument's tools laid on it: the report window, the checks table and the access sheet.
   Three faces, three jobs: Newsreader is what Vikrant writes, Instrument Sans is what the
   interface shows, Fragment Mono is what an engineer would type. Every colour pair is listed
   with its contrast ratio in docs/12-site-design.md; change a token there first. */

/* ---------- 1. Fonts and tokens ---------- */

/* Self-hosted from Google Fonts, all under the SIL Open Font License, latin subset only:
   a character outside it falls through to the next face in the stack. The CSP allows
   fonts from this origin only (font-src 'self' in _headers). Newsreader is variable with
   an optical-size axis, so display and text sizes each get the cut drawn for them. */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("fonts/newsreader-roman.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url("fonts/newsreader-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/instrument-sans.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Fragment Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/fragment-mono.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallbacks (measured by 02 from the woff2 files), so the swap barely reflows. */
@font-face {
  font-family: "Instrument Sans Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 102.6%;
  ascent-override: 94.55%;
  descent-override: 24.37%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Fragment Mono Fallback";
  src: local("Menlo"), local("Menlo-Regular");
  size-adjust: 102.65%;
  ascent-override: 92.55%;
  descent-override: 24.35%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light dark;

  /* Materials, light: cotton paper, bottle-green ink, German silver, oxblood. */
  --paper: #f4efe5;
  --paper-2: #ebe4d6;
  --sheet: #faf7f0;
  --field: #fffdf8;
  --ink: #15211c;
  --ink-2: #4a564f;
  --rule: #d6cdbb;
  --rule-strong: #857b66;
  --field-line: #7d7563;
  --forest: #1d3b30;
  --forest-2: #24473a;
  --forest-deep: #142a22;
  --bench: #244437;
  --on-forest: #f4efe5;
  --on-forest-2: #b9c2b9;
  --forest-line: #3a5649;
  --forest-line-strong: #8fa294;
  --metal: #c8bb97;
  --metal-2: #d6cba9;
  --metal-ink: #6b5e3b;
  --on-metal: var(--ink);
  --oxblood: #7b2229;
  --oxblood-lit: #e39a92;
  --proof: #b3261e;
  --proof-bg: #f7e4df;
  --on-proof: #ffffff;
  --code-bg: #ece5d6;
  --selection: #e2d6b8;

  /* Defaults for roles that change with the surface (see section 3). */
  --btn-bg-default: var(--forest);
  --btn-bg-hover-default: var(--forest-2);
  --btn-text-default: var(--on-forest);
  --check-bg: var(--forest);
  --tick: url("tick.svg");
  --shadow-sheet: 0 1px 0 rgb(21 33 28 / 0.04), 0 28px 50px -34px rgb(21 33 28 / 0.42);
  --shadow-lifted: 0 1px 0 rgb(21 33 28 / 0.02), 0 48px 80px -36px rgb(21 33 28 / 0.3);
  --shadow-tool: 0 2px 4px rgb(21 33 28 / 0.1), 0 36px 64px -34px rgb(21 33 28 / 0.5);
  --shadow-tool-lifted: 0 2px 4px rgb(21 33 28 / 0.04), 0 56px 90px -36px rgb(21 33 28 / 0.36);
  --edge-foil: inset 0 1px 0 rgb(200 187 151 / 0.32);
  --tool-ring: 0 0 0 1px transparent;
  --paper-ring: 0 0 0 1px transparent;

  /* Type: three faces, three jobs (see the header comment). */
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Instrument Sans", "Instrument Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Fragment Mono", "Fragment Mono Fallback", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-label: 0.6875rem;
  --fs-control: 0.75rem;
  --fs-ui: 0.8125rem;
  --fs-data: 0.9375rem;
  --fs-data-lg: 1rem;
  --fs-small: 0.9375rem;
  --fs-body: clamp(1.125rem, 1.08rem + 0.2vw, 1.1875rem);
  --fs-lead: clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem);
  --fs-h3: clamp(1.3125rem, 1.22rem + 0.4vw, 1.5rem);
  --fs-h2: clamp(2.125rem, 1.45rem + 2.9vw, 3.5rem);
  --fs-h1: clamp(2.75rem, 1.15rem + 5.5vw, 5.75rem);

  /* Space: a 4px base. Fluid values only ever interpolate between two steps of this scale. */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --gutter: clamp(1.5rem, 5vw, 4rem);
  --measure: 40rem;
  --section-y: clamp(4rem, 2.6rem + 6vw, 8rem);
  --head-gap: clamp(2rem, 1.25rem + 3vw, 4rem);
  --sheet-pad: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  --radius: 2px;
  --radius-tool: 4px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Materials, dark: green-black leather, cream thread, foil. */
    --paper: #0e1813;
    --paper-2: #121f19;
    --sheet: #15241d;
    --field: #0f1b16;
    --ink: #ece6d8;
    --ink-2: #b4b8ac;
    --rule: #2a3a32;
    --rule-strong: #7f857b;
    --field-line: #8a8f86;
    --forest: #09120e;
    --forest-2: #0d1813;
    --forest-deep: #070e0b;
    --bench: #111e18;
    --on-forest: #ece6d8;
    --on-forest-2: #b4b8ac;
    --forest-line: #24332b;
    --forest-line-strong: #7f857b;
    --metal-ink: #c8bb97;
    --on-metal: var(--paper);
    --oxblood: #e39a92;
    --proof: #ff9c8f;
    --proof-bg: #2e1512;
    --on-proof: #1a0b09;
    --code-bg: #1b2b24;
    --selection: #3b4b40;

    --btn-bg-default: var(--metal);
    --btn-bg-hover-default: var(--metal-2);
    --btn-text-default: var(--on-metal);
    --check-bg: var(--metal);
    --tick: url("tick-dark.svg");
    --shadow-sheet: 0 0 0 1px rgb(200 187 151 / 0.06), 0 30px 60px -30px rgb(0 0 0 / 0.7);
    --shadow-lifted: 0 0 0 1px rgb(200 187 151 / 0.04), 0 50px 90px -34px rgb(0 0 0 / 0.6);
    --shadow-tool: 0 2px 6px rgb(0 0 0 / 0.35), 0 40px 70px -34px rgb(0 0 0 / 0.8);
    --shadow-tool-lifted: 0 2px 6px rgb(0 0 0 / 0.2), 0 60px 100px -36px rgb(0 0 0 / 0.7);
    /* At night the window's chrome is darker than the leather it lies on, so a gilt edge,
       not a shadow, is what lifts it off the page. */
    --edge-foil: inset 0 1px 0 rgb(200 187 151 / 0.32);
    --tool-ring: 0 0 0 1px rgb(200 187 151 / 0.26);
    --paper-ring: 0 0 0 1px rgb(200 187 151 / 0.07);
  }
}

/* ---------- 2. Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--s-5);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  font-kerning: normal;
  font-optical-sizing: auto;
  font-variant-ligatures: common-ligatures;
  overflow-wrap: break-word;
}

@media (prefers-color-scheme: dark) {
  /* Light type on a dark ground reads heavier than it is; grayscale smoothing restores the weight. */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 400;
  text-wrap: balance;
}

p,
li,
dd,
dt,
figcaption,
summary {
  text-wrap: pretty;
}

p {
  margin: 0 0 var(--s-4);
}

ul[role="list"],
ol[role="list"] {
  margin: 0;
  padding: 0;
  list-style: none;
}

strong {
  font-weight: 600;
}

em {
  font-style: italic;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.22em;
  transition: text-decoration-color 0.15s ease, text-decoration-thickness 0.15s ease;
}

a:hover {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Text links and FAQ rows get the same soft corner as the rings around buttons and fields. */
a:not(.btn):focus-visible,
summary:focus-visible {
  border-radius: var(--radius);
}

::selection {
  background: var(--selection);
  color: var(--ink);
}

code {
  font-family: var(--mono);
  font-size: 0.8em;
  padding: 0.08em 0.36em;
  background: var(--code-bg);
  border-radius: var(--radius);
}

/* Labels: Instrument Sans capitals, tracked 8%. They take over every job 04 gave its tracked
   serif capitals, so the page keeps 04's rhythm of small engraved labels under a new voice. */
.caps,
.skip-link,
.btn,
.nav-link,
.brand-tag,
.assurances,
.example-tag,
.urgency,
.coverage dt,
.findings-label,
.title-block dt,
.nav-label,
.access-bar,
.promise-key,
.plan-unit,
.plan-badge,
.step-when,
.todo-flag,
.consent-label,
.founding-title,
.founding-stub span,
.ev-ratio {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
}

.nw {
  white-space: nowrap;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
}

/* The monogram: currentColor paints the D, fill paints the italic V, and the stroke is a
   halo in the surface colour that cuts the V cleanly through the D. */
.mark {
  display: block;
  width: calc(var(--mark-h, 2.25rem) * 2310 / 1520);
  height: var(--mark-h, 2.25rem);
  color: var(--text);
  fill: var(--accent);
  stroke: var(--surface);
  stroke-width: 56px;
}

.skip-link {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 10;
  padding: var(--s-3) var(--s-4);
  background: var(--btn-bg);
  color: var(--btn-text);
  font-size: var(--fs-control);
  text-decoration: none;
  transform: translateY(-150%);
}

.skip-link:focus-visible {
  transform: none;
}

/* ---------- 3. Surfaces ---------- */

/* Paper: the page, and every sheet laid on it (including the cream sheet inside the window). */
:root,
.sheet,
.reply-card {
  --surface: var(--paper);
  --text: var(--ink);
  --text-2: var(--ink-2);
  --line: var(--rule);
  --line-strong: var(--rule-strong);
  --accent: var(--metal-ink);
  --alert: var(--oxblood);
  --focus-ring: var(--ink);
  --btn-bg: var(--btn-bg-default);
  --btn-bg-hover: var(--btn-bg-hover-default);
  --btn-text: var(--btn-text-default);
}

.tint {
  --surface: var(--paper-2);
  background: var(--surface);
}

.sheet,
.plan,
.reply-card,
.founding,
.access {
  --surface: var(--sheet);
  background: var(--surface);
  color: var(--text);
}

/* Forest: the leather bands, the window chrome, the access bar, the featured card, the colophon. */
.band,
.window,
.access-bar,
.option-human,
.plan-featured,
.colophon {
  --surface: var(--forest);
  --text: var(--on-forest);
  --text-2: var(--on-forest-2);
  --line: var(--forest-line);
  --line-strong: var(--forest-line-strong);
  --accent: var(--metal);
  --alert: var(--oxblood-lit);
  --focus-ring: var(--metal);
  --btn-bg: var(--metal);
  --btn-bg-hover: var(--metal-2);
  --btn-text: var(--on-metal);
  background: var(--surface);
  color: var(--text);
}

.colophon {
  --surface: var(--forest-deep);
}

.bench {
  --surface: var(--bench);
}

@media (prefers-color-scheme: dark) {
  .band {
    box-shadow: inset 0 1px 0 var(--forest-line), inset 0 -1px 0 var(--forest-line);
  }
}

/* ---------- 4. Layout ---------- */

.wrap {
  width: min(100% - 2 * var(--gutter), 75rem);
  margin-inline: auto;
}

.section {
  padding-block: var(--section-y);
}

.hero + .section {
  border-top: 1px solid var(--rule);
}

.section-head {
  display: grid;
  gap: var(--s-3);
  max-width: 48rem;
  margin-bottom: var(--head-gap);
}

.section-no {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
  font-size: 1.75rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  color: var(--accent);
}

.section-no::after {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.section-head h2 {
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.012em;
}

.section-lede {
  max-width: 36em;
  margin: var(--s-1) 0 0;
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--text-2);
}

.section-head-stack {
  margin-bottom: var(--s-6);
}

.split {
  display: grid;
  gap: var(--s-6);
}

.split > .section-head,
.reply > .section-head {
  margin-bottom: 0;
}

@media (min-width: 64em) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--s-8);
    align-items: start;
  }

  .split > .section-head {
    position: sticky;
    top: var(--s-6);
  }
}

/* ---------- 5. Buttons and links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: var(--s-3) var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--fs-control);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.btn-primary,
.btn-foil {
  background: var(--btn-bg);
  color: var(--btn-text);
}

.btn-primary:hover,
.btn-foil:hover {
  background: var(--btn-bg-hover);
}

.btn-quiet {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}

.btn-quiet:hover {
  border-color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  box-shadow: inset 0 0 0 1px var(--text);
}

.btn-small {
  min-height: 2.75rem;
  padding: var(--s-2) var(--s-4);
}

@media (prefers-reduced-motion: no-preference) {
  .btn:active {
    transform: translateY(1px);
  }
}

/* Standalone links are 44px tall targets, set in the reading face. */
.link-more {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: var(--fs-small);
}

/* ---------- 6. Masthead ---------- */

.masthead {
  border-bottom: 3px double var(--rule);
}

.masthead-bar {
  display: grid;
  gap: var(--s-1) var(--s-6);
  align-items: center;
  padding-block: var(--s-4) var(--s-1);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  justify-self: start;
  min-height: 2.75rem;
  color: var(--text);
  text-decoration: none;
}

.brand-text {
  display: grid;
  gap: 0.125rem;
}

.brand-name {
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.005em;
  text-decoration: underline 1px transparent;
  text-underline-offset: 0.22em;
  transition: text-decoration-color 0.15s ease;
}

.brand:hover .brand-name {
  text-decoration-color: var(--accent);
}

.brand-tag {
  color: var(--text-2);
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--s-4);
}

@media (min-width: 30em) {
  .nav-list {
    justify-content: flex-start;
    gap: 0 var(--s-5);
  }
}

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: var(--fs-control);
  color: var(--text);
  text-decoration: none;
  /* A hairline that draws in from the left on hover, sitting a fixed distance under the capitals. */
  background: linear-gradient(currentColor, currentColor) left calc(50% + 0.95em) / 0 1px no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
  .nav-link {
    transition: background-size 0.2s ease;
  }
}

.nav-link:hover {
  background-size: 100% 1px;
}

@media (max-width: 29.99em) {
  /* Keeps the three links on one row down to about 340px wide. */
  .nav-link {
    font-size: var(--fs-label);
    letter-spacing: 0.07em;
  }
}

.nav-cta {
  display: none;
}

@media (min-width: 60em) {
  .masthead-bar {
    grid-template-columns: auto 1fr;
    padding-block: var(--s-5);
  }

  .nav {
    justify-self: end;
  }
}

@media (min-width: 68em) {
  .nav-cta {
    display: block;
    margin-left: var(--s-2);
  }
}

/* ---------- 7. Hero ---------- */

.hero {
  padding-block: clamp(3rem, 1.5rem + 5vw, 6rem) var(--section-y);
  overflow-x: clip;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.hero-for {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin: 0 0 var(--s-5);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  font-style: italic;
  line-height: 1.4;
  color: var(--text-2);
}

.hero-for::before {
  content: "";
  flex: none;
  width: 2.5rem;
  height: 1px;
  margin-top: 0.75em;
  background: var(--accent);
}

.hero-title {
  margin: 0 0 clamp(2rem, 1.25rem + 3vw, 4rem);
  font-size: var(--fs-h1);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
}

.hero-line {
  display: block;
}

.hero-title em {
  font-weight: 300;
  letter-spacing: -0.01em;
}

.lead {
  max-width: 34em;
  margin: 0 0 var(--s-6);
  font-size: var(--fs-lead);
  line-height: 1.5;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}

@media (max-width: 29.99em) {
  /* On a phone the two buttons stack; equal widths make the stack read as one decision. */
  .actions .btn {
    flex: 1 1 100%;
  }
}

.assurances {
  display: grid;
  gap: var(--s-2);
  max-width: 34rem;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  color: var(--text-2);
}

.assurances li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* One tick on the whole page: the monogram's V in small, a heavy downstroke and a hairline
   upstroke, drawn inline so it takes the surface's accent colour. */
.assurances .icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-top: -0.125rem;
  color: var(--accent);
}

.exhibit {
  margin: var(--s-8) 0 0;
}

@media (min-width: 80em) {
  .hero-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s-6);
  }

  .hero-for,
  .hero-title {
    grid-column: 1 / -1;
  }

  .hero-copy {
    grid-column: 1 / span 5;
  }

  /* Trimmed to its cap height, the lead's first capital sits exactly on the window's top edge. */
  .hero-copy .lead {
    text-box: trim-start cap alphabetic;
  }

  .exhibit {
    grid-column: 6 / -1;
    margin: 0;
  }
}

.exhibit-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--s-5);
  margin-top: var(--s-3);
  font-size: var(--fs-small);
  font-style: italic;
  line-height: 1.5;
  color: var(--text-2);
}

.exhibit-caption > span {
  max-width: 30em;
  padding-block: var(--s-2);
}

/* ---------- 8. The report window ---------- */

/* 02's app window, re-dressed: a forest chrome holding a cream sheet, with one foil edge
   along the top. It is an instrument, so it gets a machined 4px corner; paper stays square. */
.window {
  container: window / inline-size;
  border-radius: var(--radius-tool);
  box-shadow: var(--edge-foil), var(--tool-ring), var(--shadow-tool);
}

/* The window is laid on the desk: it starts a little lifted, with a softer, wider shadow, and
   settles. No opacity change, so it is fully legible even if the animation never runs. */
@media (prefers-reduced-motion: no-preference) {
  .window {
    animation: settle 1.1s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  @keyframes settle {
    from {
      transform: translateY(-0.625rem);
      box-shadow: var(--edge-foil), var(--tool-ring), var(--shadow-tool-lifted);
    }
  }
}

.window-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  min-height: 3rem;
  padding: var(--s-2) var(--s-3) var(--s-2) var(--s-4);
}

.window-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-2);
  min-width: 0;
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.3;
}

.window-title .icon {
  width: 1rem;
  height: 1rem;
  color: var(--accent);
}

.window-path {
  margin-left: var(--s-1);
  padding-left: var(--s-3);
  border-left: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--fs-control);
  font-weight: 400;
  color: var(--text-2);
}

.example-tag {
  margin: 0;
  padding: var(--s-1) var(--s-2);
  border: 1px solid currentColor;
  line-height: 1.2;
  color: var(--accent);
  white-space: nowrap;
}

.window-body {
  display: grid;
  padding: 0 var(--s-1) var(--s-1);
}

/* The sidebar repeats the report's own structure, so it is hidden from assistive tech and
   appears only once the window itself is wide enough to hold it. */
.report-nav {
  display: none;
}

@container window (min-width: 40rem) {
  .window-body {
    grid-template-columns: 10.5rem minmax(0, 1fr);
    column-gap: var(--s-1);
  }

  .report-nav {
    display: flex;
    flex-direction: column;
    padding: 0 var(--s-1) var(--s-3) 0;
  }
}

.nav-label {
  margin: 0;
  padding: var(--s-4) var(--s-2) var(--s-2);
  color: var(--accent);
}

.nav-label:first-child {
  padding-top: var(--s-2);
}

.nav-items li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 2rem;
  padding-inline: var(--s-2);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: var(--fs-ui);
  line-height: 1.3;
  color: var(--text-2);
}

.nav-items .is-current {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  box-shadow: inset 2px 0 0 var(--accent);
  color: var(--text);
}

.nav-count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* His monogram, stamped on the housing of the tool he built. */
.nav-mark {
  --mark-h: 1.5rem;
  margin: auto 0 0 var(--s-2);
  color: var(--text-2);
}

.report {
  container: sheet / inline-size;
  padding: var(--s-4);
  box-shadow: var(--paper-ring);
}

@container window (min-width: 30rem) {
  .report {
    padding: var(--s-5);
  }
}

.coverage {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding-bottom: var(--s-4);
  border-bottom: 3px double var(--line);
}

.coverage-row {
  display: grid;
  gap: var(--s-2) var(--s-4);
}

.coverage dt {
  color: var(--text-2);
}

.coverage dd {
  margin: 0;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}

.chips li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: 1.5rem;
  padding: 0 var(--s-2) 0 var(--s-1);
  border-radius: var(--radius);
  background: var(--code-bg);
  font-family: var(--sans);
  font-size: var(--fs-ui);
  font-weight: 500;
  line-height: 1.3;
}

.chips .icon {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--check-bg);
}

.coverage-gap {
  display: flex;
  gap: var(--s-2);
  font-size: var(--fs-small);
  line-height: 1.45;
}

.coverage-gap .icon {
  margin-top: 0.2em;
  color: var(--text-2);
}

.findings-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-1) var(--s-4);
  padding: var(--s-4) 0 var(--s-2);
}

.findings-label,
.findings-count {
  margin: 0;
  color: var(--text-2);
}

.findings-count {
  font-family: var(--sans);
  font-size: var(--fs-ui);
  font-variant-numeric: tabular-nums;
}

.finding {
  display: grid;
  gap: var(--s-1) var(--s-4);
  padding-block: var(--s-3);
  border-top: 1px solid var(--line);
}

.finding-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
}

.finding-where {
  margin: 0;
  font-size: var(--fs-small);
  font-style: italic;
  line-height: 1.4;
  color: var(--text-2);
}

/* Urgency: always a word, a segment count and (for the two most urgent) oxblood.
   02's meter: four segments filled from the left; empty segments keep a hairline outline. */
.urgency {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  color: var(--u, var(--text-2));
  white-space: nowrap;
}

.meter {
  display: inline-flex;
  flex: none;
  gap: 2px;
}

.meter i {
  display: block;
  width: 5px;
  height: 12px;
  border-radius: 1px;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.u-now,
.u-today {
  --u: var(--alert);
}

.u-week {
  --u: var(--text);
}

.u-noted {
  --u: var(--text-2);
}

.u-now .meter i,
.u-today .meter i:nth-child(-n + 3),
.u-week .meter i:nth-child(-n + 2),
.u-noted .meter i:first-child {
  background: var(--u);
  box-shadow: none;
}

/* The title block, as on an architect's drawing: who built it, who checked it, and when. */
.title-block {
  display: grid;
  margin: var(--s-4) 0 0;
  border: 1px solid var(--line-strong);
}

.tb-cell {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--s-3);
  align-content: start;
  align-items: baseline;
  padding: var(--s-2) var(--s-3);
  border-top: 1px solid var(--line-strong);
}

.tb-cell:first-child {
  border-top: 0;
}

.title-block dt {
  color: var(--text-2);
}

.title-block dd {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.3;
}

.tb-cell:nth-child(2) dd {
  font-style: italic;
  font-weight: 500;
}

/* The urgency column and the coverage labels share one 7.5rem column, so the findings and
   what was checked start on the same vertical line. */
@container sheet (min-width: 26rem) {
  .coverage-row,
  .finding {
    grid-template-columns: 7.5rem minmax(0, 1fr);
  }

  .coverage dt {
    padding-top: 0.25rem;
  }

  .finding .urgency {
    grid-row: 1 / span 2;
    align-self: start;
    padding-top: 0.25rem;
  }

  .title-block {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  }

  .tb-cell {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-1);
    border-top: 0;
    border-left: 1px solid var(--line-strong);
  }

  .tb-cell:first-child {
    border-left: 0;
  }
}

@container sheet (min-width: 46rem) {
  .finding {
    grid-template-columns: 7.5rem minmax(0, 1.2fr) minmax(0, 1fr);
  }

  .finding .urgency {
    grid-row: auto;
  }

  .finding-where {
    padding-top: 0.125rem;
  }
}

/* ---------- 9. Why a human ---------- */

.compare {
  display: grid;
  gap: var(--s-5);
}

.option {
  display: flex;
  flex-direction: column;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-strong);
}

.option h3 {
  margin-bottom: var(--s-3);
  font-size: var(--fs-h3);
  line-height: 1.25;
}

.option > p {
  max-width: 36em;
  margin-bottom: var(--s-5);
}

.option-human {
  padding: var(--s-5);
  border-top: 0;
}

.option-fixer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-1) var(--s-4);
  margin: auto 0 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  font-style: italic;
}

.option-fixer .caps {
  font-style: normal;
  color: var(--text-2);
}

@media (min-width: 60em) {
  .compare {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--line-strong);
  }

  .option {
    padding: var(--s-6);
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .option:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .option-human {
    border-left: 0;
  }
}

.evidence {
  display: grid;
  gap: var(--s-5);
  margin: clamp(3rem, 2.25rem + 3vw, 6rem) 0 0;
  padding-top: var(--s-6);
  border-top: 3px double var(--line);
}

.evidence-figure {
  display: inline-grid;
  justify-items: center;
  justify-self: start;
  font-variation-settings: "opsz" 72;
  font-weight: 300;
  line-height: 1;
  font-variant-numeric: lining-nums;
}

.ev-part,
.ev-whole {
  font-size: clamp(3.25rem, 2.4rem + 3vw, 5rem);
  letter-spacing: -0.02em;
}

.ev-part {
  padding: 0 0.12em 0.08em;
  border-bottom: 2px solid var(--text);
}

.ev-whole {
  padding-top: 0.08em;
  color: var(--text-2);
}

.ev-ratio {
  margin-top: var(--s-3);
  color: var(--text);
}

.evidence-text p:first-child {
  max-width: 34em;
  font-size: var(--fs-lead);
  line-height: 1.45;
}

.evidence-text p:last-child {
  margin: 0;
}

@media (min-width: 48em) {
  .evidence {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--s-8);
    align-items: center;
  }
}

/* ---------- 10. What I check ---------- */

/* The bench: one raised panel on the band, ruled into six cells by the 1px gaps between them. */
.bench {
  overflow: clip;
  border: 1px solid var(--line);
  border-radius: var(--radius-tool);
  box-shadow: var(--edge-foil), 0 28px 60px -34px rgb(0 0 0 / 0.55);
}

.check-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
}

.check-item {
  padding: var(--s-5);
  background: var(--surface);
}

.check-name {
  margin-bottom: var(--s-2);
  font-size: var(--fs-h3);
  line-height: 1.25;
}

.check-desc {
  max-width: 34rem;
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-data);
  line-height: 1.55;
  color: var(--text-2);
}

@media (min-width: 40em) {
  .check-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .check-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .check-item {
    padding: var(--s-6);
  }
}

.ledger-foot {
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 3px double var(--line-strong);
}

.ledger-verify {
  max-width: 34em;
  margin: 0;
  font-size: var(--fs-lead);
  line-height: 1.45;
}

/* ---------- 11. Tick lists ---------- */

.ticks li {
  position: relative;
  margin-bottom: var(--s-4);
  padding-left: var(--s-6);
}

.ticks .icon {
  position: absolute;
  top: 0.3em;
  left: 0;
  color: var(--accent);
}

.ticks-compact li {
  margin-bottom: var(--s-3);
  font-size: 1.0625rem;
  line-height: 1.45;
}

/* ---------- 12. Prices ---------- */

.plans {
  display: grid;
  gap: var(--s-5);
}

.plan {
  display: flex;
  flex-direction: column;
  padding: var(--sheet-pad);
  border: 1px solid var(--line);
}

.plan-name {
  font-size: var(--fs-h3);
  line-height: 1.2;
}

/* A foil tab on the top edge, out of the flow, so all three cards keep the same rhythm. */
.plan-badge {
  position: absolute;
  top: 0;
  left: var(--sheet-pad);
  margin: 0;
  padding: var(--s-1) var(--s-3);
  transform: translateY(-50%);
  background: var(--metal);
  color: var(--on-metal);
}

.plan-price {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  align-content: flex-start;
  gap: var(--s-1) var(--s-4);
  margin: var(--s-4) 0 0;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}

.plan-amount {
  font-size: clamp(3rem, 2.4rem + 2vw, 4rem);
  font-variation-settings: "opsz" 72;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.025em;
  font-variant-numeric: lining-nums;
}

.plan-unit {
  max-width: 8.5em;
  padding-bottom: var(--s-2);
  line-height: 1.35;
  color: var(--text-2);
}

.plan-note {
  margin: var(--s-4) 0 var(--s-5);
  font-style: italic;
  color: var(--text-2);
}

.plan .ticks {
  margin-bottom: var(--s-5);
}

.plan-action {
  margin-top: auto;
  padding-inline: var(--s-4);
}

.plan-featured {
  position: relative;
  border-color: var(--metal);
}

@media (min-width: 40em) and (max-width: 74.99em) {
  /* Tablet and small laptop: each plan reads as a line of a price list, terms on the left,
     contents on the right. Three columns only once each card can hold its button on one line. */
  .plan {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    column-gap: var(--s-6);
    align-content: start;
  }

  .plan > * {
    grid-column: 1;
  }

  .plan > .ticks {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin: 0 0 var(--s-5);
  }

  .plan > .plan-action {
    grid-column: 2;
    grid-row: 4;
    justify-self: start;
    margin: 0;
  }
}

@media (min-width: 75em) {
  .plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Subgrid lines up name, price, note, list and button across the three cards. */
  @supports (grid-template-rows: subgrid) {
    .plans {
      grid-template-rows: repeat(5, auto);
    }

    .plan {
      display: grid;
      grid-row: span 5;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
  }
}

.provisos {
  display: grid;
  gap: var(--s-4) var(--s-7);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-strong);
}

.proviso {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.5;
}

.proviso .caps {
  display: block;
  margin-bottom: var(--s-1);
  color: var(--accent);
}

@media (min-width: 48em) {
  .provisos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The founding offer, set as a numbered ticket with a perforated stub. */
.founding {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  margin-top: var(--s-6);
  border: 1px solid var(--rule-strong);
}

.founding-stub {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  margin: 0;
  padding: var(--s-5);
  border-right: 1px dashed var(--rule-strong);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  color: var(--accent);
  white-space: nowrap;
}

.founding-stub span {
  margin-bottom: var(--s-2);
  font-style: normal;
}

.founding-stub::before,
.founding-stub::after {
  content: "";
  position: absolute;
  right: -0.5625rem;
  width: 1.125rem;
  height: 1.125rem;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: var(--paper-2);
}

.founding-stub::before {
  top: calc(-0.5625rem - 1px);
  clip-path: inset(50% 0 0 0);
}

.founding-stub::after {
  bottom: calc(-0.5625rem - 1px);
  clip-path: inset(0 0 50% 0);
}

.founding-body {
  padding: var(--s-5) var(--sheet-pad);
}

.founding-title {
  margin-bottom: var(--s-2);
  font-size: var(--fs-control);
  color: var(--accent);
}

.founding-body p {
  margin: 0;
}

.founding-body p + p {
  margin-top: var(--s-2);
}

.founding-list {
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--text-2);
}

/* ---------- 13. How it works (a scale bar) ---------- */

.steps {
  display: grid;
  counter-reset: step;
  border-left: 1px solid var(--line-strong);
}

.step {
  position: relative;
  padding: 0 0 var(--s-6) var(--s-6);
  counter-increment: step;
}

.step:last-child {
  padding-bottom: 0;
}

.step::before {
  content: counter(step);
  content: counter(step) / "";
  display: block;
  margin-bottom: var(--s-3);
  font-size: 2.5rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  color: var(--accent);
}

.step::after {
  content: "";
  position: absolute;
  top: 1.25rem;
  left: 0;
  width: 0.875rem;
  height: 1px;
  background: var(--line-strong);
}

.step-when {
  margin: 0 0 var(--s-2);
  color: var(--accent);
}

.step h3 {
  margin-bottom: var(--s-2);
  font-size: var(--fs-h3);
  line-height: 1.25;
}

.step h3 + p {
  margin: 0;
  max-width: 30em;
  color: var(--text-2);
}

@media (min-width: 56em) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-left: 0;
    border-top: 1px solid var(--line-strong);
  }

  .step,
  .step:last-child {
    padding: var(--s-6) var(--s-6) 0 0;
  }

  .step::after {
    top: 0;
    width: 1px;
    height: 0.875rem;
  }
}

/* ---------- 14. How I handle your app (02's permissions sheet) ---------- */

/* Built like the window: a forest bar over a cream sheet, with the machined 4px corner. */
.access {
  overflow: clip;
  border: 1px solid var(--line);
  border-radius: var(--radius-tool);
  box-shadow: var(--shadow-sheet);
}

.access-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-1) var(--s-5);
  margin: 0;
  padding: var(--s-3) var(--s-5);
  box-shadow: var(--edge-foil);
}

.access-bar span:first-child {
  color: var(--accent);
}

.access-bar span:last-child {
  color: var(--text-2);
}

.access-cols {
  display: grid;
}

.access-col {
  padding: var(--s-5) var(--s-5) var(--s-3);
}

.access-no {
  border-top: 1px solid var(--line);
}

.access-col h3 {
  margin-bottom: var(--s-3);
  font-size: 1.3125rem;
  line-height: 1.25;
}

.access-col li {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: var(--s-3);
  padding-block: var(--s-3);
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: var(--fs-data);
  line-height: 1.5;
}

.access-col li .icon {
  margin-top: 0.1875rem;
}

.access-yes .icon {
  color: var(--check-bg);
}

.access-no .icon {
  color: var(--text-2);
}

/* 1px gaps over a rule-coloured ground draw the dividers for any column count. */
.promises {
  display: grid;
  gap: 1px;
  border-top: 3px double var(--line-strong);
  background: var(--line);
}

.promises li {
  padding: var(--s-4) var(--s-5) var(--s-5);
  background: var(--surface);
  font-size: 1.0625rem;
  line-height: 1.5;
}

.promise-key {
  display: block;
  margin-bottom: var(--s-1);
  color: var(--accent);
}

@media (min-width: 40em) {
  .access-cols,
  .promises {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .access-no {
    border-top: 0;
    border-left: 1px solid var(--line);
  }
}

/* ---------- 15. About ---------- */

.about {
  display: grid;
  gap: var(--s-7);
}

.portrait {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 17rem;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  background: var(--paper-2);
  --surface: var(--paper-2);
}

.portrait-mark {
  --mark-h: 5.5rem;
  margin-bottom: var(--s-8);
}

/* The photo fills the 4:5 frame; the frame's border and background stay as its mat. */
.portrait-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.todo-photo {
  position: absolute;
  right: var(--s-3);
  bottom: var(--s-3);
  left: var(--s-3);
  margin: 0;
}

.about-text {
  max-width: var(--measure);
}

.about-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
}

.about-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.sep {
  color: var(--text-2);
}

.signature {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-6) 0 0;
  font-size: 1.75rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1;
}

.signature::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: var(--accent);
}

/* To-do markers are proofreader's red on purpose: they must not ship. */
.todo {
  padding: var(--s-2) var(--s-3);
  border: 1.5px dashed var(--proof);
  background: var(--proof-bg);
  color: var(--proof);
  font-size: var(--fs-small);
  line-height: 1.45;
}

.todo-flag {
  display: inline-block;
  margin-right: var(--s-2);
  padding: 0.125rem var(--s-2);
  background: var(--proof);
  color: var(--on-proof);
}

.todo-inline {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding-block: var(--s-1);
}

@media (min-width: 48em) {
  /* The text comes first in reading order; the portrait sits in the left column. */
  .about {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--s-8);
    align-items: start;
  }

  .portrait {
    grid-column: 1;
    grid-row: 1;
    max-width: 22rem;
  }

  .about-text {
    grid-column: 2;
    grid-row: 1;
  }
}

/* ---------- 16. Questions ---------- */

.faq {
  border-bottom: 1px solid var(--line-strong);
}

.faq-item {
  border-top: 1px solid var(--line-strong);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 3.5rem;
  padding-block: var(--s-4);
  font-size: var(--fs-h3);
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "";
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  color: var(--accent);
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: color 0.15s ease;
}

.faq-item summary:hover::after {
  color: var(--text);
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-body {
  max-width: 38em;
  padding-bottom: var(--s-5);
}

.faq-body p {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .faq-item summary::after {
    transition: transform 0.25s ease, color 0.15s ease;
  }

  .faq-item[open] .faq-body {
    animation: unfold 0.3s ease both;
  }

  @keyframes unfold {
    from {
      transform: translateY(-0.5rem);
    }
  }
}

/* ---------- 17. The free look (a reply card) ---------- */

.reply {
  display: grid;
  gap: var(--s-6);
}

.reply-note {
  margin: var(--s-2) 0 0;
  font-size: 1rem;
  font-style: italic;
  color: var(--text-2);
}

.reply-card {
  padding: clamp(1.5rem, 1rem + 2.2vw, 3rem);
  border-top: 2px solid var(--metal);
  box-shadow: 0 34px 60px -34px rgb(0 0 0 / 0.55);
}

.field {
  min-width: 0;
  margin: 0 0 var(--s-5);
  padding: 0;
  border: 0;
}

.field-pair {
  display: grid;
  column-gap: var(--s-5);
}

.field-label {
  display: block;
  margin-bottom: var(--s-2);
  padding: 0;
  font-family: var(--sans);
  font-size: var(--fs-data);
  font-weight: 600;
  line-height: 1.3;
}

.optional {
  font-weight: 400;
  color: var(--text-2);
}

.hint {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-small);
  font-style: italic;
  line-height: 1.45;
  color: var(--text-2);
}

.input {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: var(--s-3) var(--s-3);
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-data-lg);
  line-height: 1.4;
  transition: border-color 0.15s ease;
}

.input:hover {
  border-color: var(--text-2);
}

.input:focus-visible {
  border-color: var(--text);
  outline-offset: 1px;
}

textarea.input {
  min-height: 7.5rem;
  resize: vertical;
  line-height: 1.5;
}

.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--s-7);
  /* A hairline chevron drawn in currentColor, so it follows the theme without an image. */
  background-image:
    linear-gradient(to top right, transparent calc(50% - 0.7px), currentColor calc(50% - 0.7px) calc(50% + 0.7px), transparent calc(50% + 0.7px)),
    linear-gradient(to top left, transparent calc(50% - 0.7px), currentColor calc(50% - 0.7px) calc(50% + 0.7px), transparent calc(50% + 0.7px));
  background-position: right calc(var(--s-4) + 6px) center, right var(--s-4) center;
  background-size: 6px 7px;
  background-repeat: no-repeat;
}

.checks {
  margin-bottom: var(--s-4);
}

.checks legend {
  margin-bottom: var(--s-1);
}

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  min-height: 2.75rem;
  padding-block: var(--s-2);
  font-family: var(--sans);
  font-size: var(--fs-data-lg);
  line-height: 1.5;
  cursor: pointer;
}

.check input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--field) center / 100% no-repeat;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.check:hover input {
  border-color: var(--text);
}

.check input:checked {
  border-color: var(--check-bg);
  background-color: var(--check-bg);
  background-image: var(--tick);
}

.check input:focus-visible {
  outline-offset: 2px;
}

.consent {
  margin: var(--s-2) 0 var(--s-5);
  padding: var(--s-3) var(--s-4) var(--s-2);
  border: 1px solid var(--line-strong);
  background: var(--paper);
}

.consent-label {
  margin: 0;
  color: var(--accent);
}

.check-consent {
  font-size: var(--fs-data);
}

/* The optional data-check consent, set off from the required one above it. */
.check-optional {
  margin-top: var(--s-2);
  border-top: 1px solid var(--line);
  padding-top: var(--s-3);
  color: var(--text-2);
}

.btn-submit {
  width: 100%;
  min-height: 3.25rem;
}

@media (min-width: 40em) {
  .field-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .btn-submit {
    width: auto;
    padding-inline: var(--s-6);
  }
}

@media (min-width: 64em) {
  .reply {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s-8);
    align-items: start;
  }

  .reply-head {
    position: sticky;
    top: var(--s-6);
  }
}

/* ---------- 18. Colophon ---------- */

.colophon {
  padding-block: var(--s-8) var(--s-7);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.colophon-grid {
  display: grid;
  gap: var(--s-5);
}

.colophon-mark {
  --mark-h: 2.5rem;
}

.colophon-text p {
  margin: 0 0 var(--s-2);
  color: var(--text-2);
}

.colophon-text .colophon-name {
  color: var(--text);
}

.colophon-aside p {
  margin: 0;
}

.colophon-aside a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.colophon-type {
  font-style: italic;
  color: var(--text-2);
}

@media (min-width: 56em) {
  .colophon-grid {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--s-7);
    align-items: start;
  }

  .colophon-aside {
    text-align: right;
  }
}

/* ---------- 19. Modes ---------- */

/* Reduced motion needs no override here: every animation, every transform transition and smooth
   scrolling are declared inside prefers-reduced-motion: no-preference. Colour fades remain. */

@media (forced-colors: active) {
  .check input,
  .select {
    appearance: auto;
    -webkit-appearance: auto;
    background-image: none;
  }

  .meter i {
    forced-color-adjust: none;
    box-shadow: inset 0 0 0 1px CanvasText;
  }

  .u-now .meter i,
  .u-today .meter i:nth-child(-n + 3),
  .u-week .meter i:nth-child(-n + 2),
  .u-noted .meter i:first-child {
    background: CanvasText;
  }

  .window,
  .bench,
  .access {
    border: 1px solid CanvasText;
  }

  .btn {
    border-color: ButtonText;
  }
}