/*
 * woodls brand tokens (brand book version 1, adopted 26 September 2026).
 * Two directions of one print process: whiteprint (blue ink on cool white
 * paper) and cyanotype (print white on Prussian blue). Illustration plates are
 * always cyanotype. Amber means seeds and nothing else.
 *
 * Fonts (Google Fonts, all under the SIL Open Font License):
 *   IM Fell English, Atkinson Hyperlegible Next (or Atkinson Hyperlegible),
 *   Atkinson Hyperlegible Mono, Mukta.
 */

:root {
  /* Whiteprint */
  --paper: #F3F6F7;
  --paper-2: #E7EEF2;
  --ink: #14324F;
  --ink-soft: #4E6B86;
  --rule: #C6D3DD;

  /* Plates: always cyanotype */
  --plate: #173C63;
  --plate-edge: #0F2C4A;
  --print: #EEF3F6;
  --print-soft: #A9C0D3;

  /* Seeds only */
  --seed: #9A5B00;
  --seed-on-plate: #EBAA45;

  /* Errors only */
  --error: #B8321F;

  --f-display: "IM Fell English", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --f-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --f-mono: "Atkinson Hyperlegible Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --f-deva: "Mukta", "Noto Sans Devanagari", sans-serif;

  /* Type scale (px): few sizes, far apart */
  --size-display: clamp(64px, 16vw, 160px);
  --size-headline: clamp(34px, 4.8vw, 50px);
  --size-body: 17px;
  --size-note: 14.5px;
  --size-label: 12px; /* mono, upper case, letter-spacing .09em */

  /* Layout: a field-guide spread */
  --page-max: 1080px;
  --margin-column: 13.5rem;
  --column-gap: 44px;
  --measure: 66ch;

  /* Motion: slow, easing out, never overshooting */
  --motion-short: 400ms;
  --motion-long: 900ms;
  --ease-expose: cubic-bezier(0.2, 0.6, 0.2, 1);

  color-scheme: light;
}

/* Cyanotype, when the reader's system prefers dark and they haven't chosen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0F2C4A;
    --paper-2: #13355A;
    --ink: #E6EEF3;
    --ink-soft: #9DB4C9;
    --rule: #2B4C6E;
    --plate: #0B2440;
    --plate-edge: #2B4C6E;
    --print: #E6EEF3;
    --print-soft: #8FA9C0;
    --seed: #EBAA45;
    --seed-on-plate: #EBAA45;
    --error: #F07A66;
    color-scheme: dark;
  }
}

/* Cyanotype, when the reader chose it. */
:root[data-theme="dark"] {
  --paper: #0F2C4A;
  --paper-2: #13355A;
  --ink: #E6EEF3;
  --ink-soft: #9DB4C9;
  --rule: #2B4C6E;
  --plate: #0B2440;
  --plate-edge: #2B4C6E;
  --print: #E6EEF3;
  --print-soft: #8FA9C0;
  --seed: #EBAA45;
  --seed-on-plate: #EBAA45;
  --error: #F07A66;
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-short: 0ms;
    --motion-long: 0ms;
  }
}

/*
 * woodls.com: the design system in code (docs/plans/website.md, "The design system").
 * The brand's tokens (docs/brand/tokens.css) come first in the built file.
 * Flat colour, square corners, hairline rules. Nothing moves on arrival, on scroll
 * or on hover; there are no shadows, gradients, blurs or rounded corners anywhere.
 */

@font-face { font-family: "IM Fell English"; src: url(fonts/im-fell-english.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IM Fell English"; src: url(fonts/im-fell-english-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url(fonts/atkinson-hyperlegible-next.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url(fonts/atkinson-hyperlegible-next-bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url(fonts/atkinson-hyperlegible-next-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Mono"; src: url(fonts/atkinson-hyperlegible-mono.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Mono"; src: url(fonts/atkinson-hyperlegible-mono-bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Mukta"; src: url(fonts/mukta.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Mukta"; src: url(fonts/mukta-semibold.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+25CC, U+A830-A839, U+A8E0-A8FF; }

/* Hover darkens a button: Prussian under ink, rule-grey under print white. */
:root { --hover: #0F2C4A; --grain: url(img/paper.svg); --caret: url(img/caret.svg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hover: #C6D3DD; --grain: url(img/paper-dark.svg); --caret: url(img/caret-dark.svg); } }
:root[data-theme="dark"] { --hover: #C6D3DD; --grain: url(img/paper-dark.svg); --caret: url(img/caret-dark.svg); }

*, *::before, *::after { box-sizing: border-box; }
html { background-color: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--paper);
  background-image: var(--grain);
  color: var(--ink);
  font: 400 17px/1.62 var(--f-body);
  font-feature-settings: "kern";
}
:lang(hi) { font-family: var(--f-deva), var(--f-body); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .wrap { padding: 0 16px; } }

a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--paper); padding: 8px 12px; }
.skip:focus { left: 16px; top: 12px; }

p { margin: 0 0 14px; }
b, strong { font-weight: 700; }
code, kbd, pre { font-family: var(--f-mono); }
code { font-size: 0.92em; }
img, video { display: block; max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 32px 0; }

/* Labels: mono capitals, as in a field guide's margin. */
.label { display: block; font: 700 12px/1.35 var(--f-mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 8px; }
.note { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.figure { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* Header: the wordmark, the links, one button. Never sticky; no menu button. */
.site-header { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding: 28px 0 22px; border-bottom: 1px solid var(--rule); }
.wordmark { display: block; color: var(--ink); line-height: 0; }
.wordmark-svg { width: 116px; height: auto; }
.site-nav { flex: 1 1 auto; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; margin: 0; padding: 0; }
.site-nav a { font-size: 15.5px; }
.site-nav a[aria-current="page"] { text-decoration-thickness: 2px; }
@media (max-width: 640px) { .site-header { gap: 12px 20px; } .site-nav ul { gap: 4px 16px; } }

/* Buttons: ink on paper, square, say exactly what happens. */
.button, button.button {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  font: 700 12px/1 var(--f-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 16px 12px;
  border: 1px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
}
.button:hover { background: var(--hover); border-color: var(--hover); color: var(--paper); }

/* The page's title. */
.page-head { padding: 56px 0 40px; display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); column-gap: 44px; }
.page-head > * { grid-column: 2; }
.page-head .label { margin-bottom: 14px; }
h1 { font: 400 clamp(44px, 6vw, 64px)/1.02 var(--f-display); margin: 0 0 16px; letter-spacing: -0.005em; text-wrap: balance; }
.descriptor { font: 400 italic clamp(22px, 2.6vw, 28px)/1.3 var(--f-display); color: var(--ink-soft); max-width: 34ch; margin: 0; text-wrap: balance; }

/* Entries: a margin column and a main column, divided by hairlines. */
.entry { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); column-gap: 44px; padding: 44px 0 36px; border-top: 1px solid var(--rule); }
.entry .main { max-width: 66ch; min-width: 0; }
.entry .main > :last-child { margin-bottom: 0; }
.margin { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.margin > * + * { margin-top: 22px; }
.margin p { margin: 0 0 6px; }
h2 { font: 400 clamp(34px, 4.8vw, 50px)/1.06 var(--f-display); margin: 0 0 18px; text-wrap: balance; }
h3 { font: 700 17px/1.4 var(--f-body); margin: 30px 0 8px; }
.main ul, .main ol { padding-left: 1.3em; margin: 0 0 16px; }
.main li { margin-bottom: 8px; }
.main li::marker { color: var(--ink-soft); }
@media (max-width: 760px) {
  .page-head, .entry { grid-template-columns: minmax(0, 1fr); }
  .page-head > * { grid-column: 1; }
  .page-head { padding: 36px 0 28px; }
  .entry { padding: 32px 0 28px; row-gap: 14px; }
  .margin:empty { display: none; }
}

/* The lead: the home page's film, across the page. */
.lead { padding: 28px 0 8px; }
.lead .plate { margin: 0; }
.plate-film .film-play { display: table; margin: 4px 0 12px; }

/* Field notes: one measured figure, where and when. */
.field-note .figure { display: block; font: 700 26px/1.1 var(--f-mono); color: var(--ink); margin: 0 0 6px; }
.field-note .where { color: var(--ink-soft); font-size: 13.5px; }
.main .field-note { border-top: 1px solid var(--rule); padding-top: 12px; margin: 20px 0; }
.main .field-note .figure { font-size: 22px; }

/* Plates: cyanotype figures, one idea each. */
.plate { margin: 28px 0; }
.plate-image { background-color: var(--plate); border: 1px solid var(--plate-edge); }
.plate-image img, .plate-image video { width: 100%; height: auto; }
.plate figcaption { font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); margin-top: 10px; }
.plate-no { font: 700 12px/1 var(--f-mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink); margin-right: 6px; }
.plate-title { font: 400 italic 22px/1.2 var(--f-display); color: var(--ink); margin-right: 6px; }
.plates-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 640px) { .plates-pair { grid-template-columns: minmax(0, 1fr); } .entry .plate { margin-left: -16px; margin-right: -16px; } .entry .plate figcaption { padding: 0 16px; } }

/* Limits: what woodls doesn't do, right after the promise. No box, no stripe. */
.limits { border-top: 1px solid var(--ink); margin: 24px 0 8px; padding-top: 10px; }
.limits ul { list-style: none; padding: 0; margin: 0; }
.limits li { padding: 7px 0; margin: 0; border-bottom: 1px solid var(--rule); }

/* The key: numbered couplets with dotted leaders, as in a field guide. */
.key { list-style: none; padding: 0; margin: 8px 0 16px; border-top: 1px solid var(--rule); }
.main .key li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; padding: 12px 0; margin: 0; border-bottom: 1px solid var(--rule); }
.couplet { font: 700 13px/1 var(--f-mono); color: var(--ink-soft); min-width: 2.2em; }
.key-text { flex: 0 1 auto; }
.leader { flex: 1 1 2rem; border-bottom: 1px dotted var(--ink-soft); min-width: 2rem; }
.key-to { font: 400 italic 20px/1.2 var(--f-display); white-space: nowrap; }

/* Commands: printed on the page, like a manual. */
.command { display: flex; align-items: baseline; gap: 16px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 10px 0; margin: 16px 0 20px; }
.command pre { flex: 1 1 auto; margin: 0; overflow-x: auto; font: 400 15.5px/1.55 var(--f-mono); color: var(--ink); background: transparent; }
.command code { font-size: 1em; }
.copy { flex: none; font: 700 11px/1 var(--f-mono); letter-spacing: 0.09em; text-transform: uppercase; background: transparent; color: var(--ink); border: 1px solid var(--ink); border-radius: 0; padding: 7px 9px 6px; cursor: pointer; }
.copy:hover { background: var(--ink); color: var(--paper); }

/* Transcripts: real output from a real run, shown whole. */
.transcript { margin: 20px 0; }
.transcript pre { margin: 0; padding: 12px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); font: 400 14px/1.6 var(--f-mono); white-space: pre-wrap; background: transparent; }
.transcript figcaption { font-size: 14.5px; color: var(--ink-soft); margin-top: 8px; }

/* Tables: hairline rules, left-aligned text, figures in tabular mono. */
.table-wrap { overflow-x: auto; margin: 16px 0 20px; }
table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; }
th { font: 700 12px/1.35 var(--f-mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft); text-align: left; vertical-align: bottom; border-bottom: 1px solid var(--ink); padding: 8px 14px 8px 0; }
td { border-bottom: 1px solid var(--rule); padding: 10px 14px 10px 0; vertical-align: top; }
td.num, th.num { text-align: right; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
th:last-child, td:last-child { padding-right: 0; }
.states td:first-child { width: 88px; }
.states img { width: 72px; height: auto; background-color: var(--plate); border: 1px solid var(--plate-edge); }
.states .face { font: 700 16px/1.4 var(--f-mono); white-space: nowrap; }

/* Real records from bench/results/. */
.record { margin: 20px 0 24px; }
.record figcaption { font-size: 14.5px; color: var(--ink-soft); }
.record figcaption p { margin: 0 0 4px; }
.record .source { font-size: 13.5px; }
.totals { margin: 12px 0; border-top: 1px solid var(--ink); }
.totals div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.totals dt { color: var(--ink); }
.totals dd { margin: 0; font-family: var(--f-mono); font-variant-numeric: tabular-nums; text-align: right; }

/* Seeds figures: the only amber on the site. */
.seeds { color: var(--seed); font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* COMING: a square stamp. */
.coming { display: inline-block; font: 700 10.5px/1 var(--f-mono); letter-spacing: 0.09em; color: var(--ink-soft); border: 1px solid var(--ink-soft); padding: 3px 5px 2px; vertical-align: 2px; white-space: nowrap; }

/* Right now. */
.night { font: 400 italic clamp(24px, 3vw, 32px)/1.25 var(--f-display); margin: 0 0 8px; text-wrap: balance; }

/* Forms: labels above fields; the system's own radio buttons and checkboxes. */
form { margin: 16px 0 24px; }
fieldset { border: 0; padding: 0; margin: 18px 0 0; }
legend, form label:not(.choice):not(.pick):not(.hp):not(.kind) { display: block; font: 700 12px/1.35 var(--f-mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft); margin: 18px 0 6px; padding: 0; }
legend { margin-top: 0; }
input[type="email"], input[type="text"], input[type="number"], select {
  display: block;
  width: 100%;
  max-width: 26rem;
  font: 400 16px/1.4 var(--f-body);
  color: var(--ink);
  background-color: var(--paper-2);
  border: 1px solid var(--ink-soft);
  border-radius: 0;
  padding: 10px 12px;
  appearance: none;
}
select { background-image: var(--caret); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--ink); width: 17px; height: 17px; margin: 0 8px 0 0; vertical-align: -3px; }
.choice { display: block; margin: 8px 0; font-size: 16px; }
.choice.check { margin-top: 22px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; margin: 22px 0 0; }
.form-status { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--rule); }
.form-status.error, .error { color: var(--error); }
[aria-invalid="true"] { border-color: var(--error); }
.calc-out { margin: 22px 0 10px; border-top: 1px solid var(--ink); padding-top: 12px; }
.calc-out p { margin: 0 0 10px; }
.calc-out .figure { display: block; font: 700 19px/1.3 var(--f-mono); color: var(--ink); }

/* Footer: the line, the map, terms and privacy. */
.site-footer { border-top: 1px solid var(--ink); margin-top: 56px; padding: 30px 0 44px; }
.footer-line { font: 400 italic clamp(24px, 3vw, 30px)/1.2 var(--f-display); margin: 0 0 26px; }
.footer-map { display: flex; flex-wrap: wrap; gap: 20px 56px; margin-bottom: 26px; }
.footer-map ul { list-style: none; padding: 0; margin: 0; }
.footer-map li { margin: 0 0 4px; font-size: 15.5px; }
.footer-small { font-size: 14.5px; color: var(--ink-soft); }
.footer-small a { color: var(--ink-soft); }
.footer-view { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: 14.5px; color: var(--ink-soft); }
.footer-view .label { display: inline; margin: 0 4px 0 0; }
.footer-view button { font: 400 14.5px/1.4 var(--f-body); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 0 0 1px; cursor: pointer; }
.footer-view button[aria-pressed="true"] { border-bottom: 2px solid var(--ink); }

/* The page not found. */
.lost img { width: 160px; background-color: var(--plate); border: 1px solid var(--plate-edge); margin-bottom: 20px; }

@media print {
  body { background-image: none; }
  .site-nav, .footer-map, .footer-view, .copy, .skip { display: none; }
  a { text-decoration: none; }
}

/* The night map: a field-guide map plate, live by the clock. */
.nightmap { padding: 0; }
.nightmap-svg { display: block; width: 100%; height: auto; }
.nightmap-svg .sea { fill: #173C63; }
.nightmap-svg .land { fill: #2B4C6E; stroke: #A9C0D3; stroke-width: 0.6; stroke-linejoin: round; }
.nightmap-svg .land path { fill: inherit; stroke: inherit; }
.nightmap-svg .night { fill: #0B2440; }
.nightmap-svg .night-land { fill: #13355A; stroke: #4E6B86; }
.nightmap-svg .terminator { fill: none; stroke: #EEF3F6; stroke-width: 0.8; stroke-dasharray: 3 4; }
.nightmap-svg .sun circle { fill: none; stroke: #EEF3F6; stroke-width: 1.2; }
.nightmap-svg .sun circle:first-child { fill: #EEF3F6; }
.nightmap-svg .city circle { fill: none; stroke: #A9C0D3; stroke-width: 0.8; }
.nightmap-svg .city text { display: none; font: 400 9px var(--f-mono); fill: #EEF3F6; }
.nightmap-svg .city.is-night circle { fill: #EEF3F6; stroke: #EEF3F6; }
.nightmap-svg .city.is-named text { display: block; }
.plate-map { margin: 0 0 20px; }

/* Meet your woodl: pick a machine; the species and its night appear. */
.meet { margin: 8px 0 8px; }
.meet-pick { display: grid; gap: 0; border-top: 1px solid var(--ink); margin: 0 0 22px; }
.pick { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--rule); cursor: pointer; font-size: 16px; }
.pick input { margin-top: 2px; }
.pick-name { font-weight: 700; }
.pick-note { grid-column: 2; font-size: 14.5px; color: var(--ink-soft); }
.species { display: none; }
.meet:has(#sp-mac:checked) .species-mac, .meet:has(#sp-nvidia:checked) .species-nvidia, .meet:has(#sp-cpu:checked) .species-cpu { display: block; }
.species-name { margin: 0 0 12px; }
.species-name .plate-title { font-size: 26px; margin-right: 8px; }
.night-of { list-style: none; padding: 0; margin: 0 0 12px; border-top: 1px solid var(--rule); }
.main .night-of li { display: grid; grid-template-columns: 72px 5.5ch minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 10px 0; margin: 0; border-bottom: 1px solid var(--rule); }
.night-of .what { min-width: 0; }
.night-of img { width: 72px; height: auto; background-color: var(--plate); border: 1px solid var(--plate-edge); }
.night-of .when { font: 700 14px/1 var(--f-mono); color: var(--ink-soft); }
.night-of .face { font: 700 13px/1 var(--f-mono); color: var(--ink-soft); white-space: nowrap; margin-left: 6px; }
@media (max-width: 640px) { .main .night-of li { grid-template-columns: 56px minmax(0, 1fr); row-gap: 2px; } .night-of img { width: 56px; grid-row: 1 / 3; } .night-of .when { grid-column: 2; } .night-of .what { grid-column: 2; } }

/* The seed tray. */
.tray { padding: 0; }
.tray svg { display: block; width: 100%; height: auto; }
.seeds .seed { fill: #EBAA45; }
.tray .ring { fill: none; stroke: #EEF3F6; stroke-width: 1.4; }
.tray .bracket { fill: none; stroke: #A9C0D3; stroke-width: 1; }
.tray .tray-label { font: 700 14px var(--f-mono); letter-spacing: 0.09em; text-transform: uppercase; fill: #EEF3F6; }

/* The founding register: ruled lines, empty until the first night. */
.register { margin: 16px 0 24px; }
.register-table td { height: 38px; }
.register-table tbody td:first-child { color: var(--ink-soft); font-weight: 700; }
.register figcaption { margin-top: 10px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; top: 0; }

/* Next: what to do from here. */
.next { border-top: 1px solid var(--ink); margin: 48px 0 0; padding-top: 16px; display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); column-gap: 44px; }
.next .label { margin: 4px 0 0; }
.next ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }
.next-link { font: 400 italic 21px/1.2 var(--f-display); }
@media (max-width: 760px) { .next { grid-template-columns: minmax(0, 1fr); row-gap: 10px; } }

/* The alpha band on the home page. */
.band { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 44px; align-items: center; padding: 28px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); margin: 8px 0 0; }
.band-line { font: 400 italic clamp(22px, 2.6vw, 28px)/1.3 var(--f-display); margin: 0 0 8px; text-wrap: balance; max-width: 30ch; }
.band-text .note { margin: 0; }
.band-actions { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; justify-items: start; }
@media (max-width: 760px) { .band { grid-template-columns: minmax(0, 1fr); } }

/* Home: the opening. */
.opening { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); column-gap: 44px; padding: 40px 0 8px; }
.opening h1 { font-size: clamp(40px, 5.4vw, 60px); }
.main .ways { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }
.main .ways li { margin: 0; }
@media (max-width: 760px) { .opening { grid-template-columns: minmax(0, 1fr); } }
.footer-view [data-view-why] { display: block; width: 100%; color: var(--ink-soft); margin-bottom: 4px; }

/* Questions: each a line you open, its answer under it. */
.faq { border-top: 1px solid var(--ink); margin: 8px 0 16px; }
.faq details { border-bottom: 1px solid var(--rule); padding: 12px 0; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq details > p { margin: 10px 0 4px; }

/*
 * The home page's scene (ADR 0032): a night plate across the whole window, whatever the view,
 * with the form in it and woodls on its ground. The woodls move slowly, and only for readers who
 * haven't asked their system for less motion; the one place on the site anything moves.
 */
.home .wrap { position: relative; }
.home .site-header { position: absolute; left: 32px; right: 32px; top: 0; z-index: 3; border-bottom-color: #2B4C6E; }
.home .site-nav ul { justify-content: flex-end; }
.home .site-header a, .home .wordmark { color: #EEF3F6; }
.lead-scene { padding: 0; }
.scene { position: relative; width: 100vw; margin-left: calc(50% - 50vw); min-height: max(700px, 100svh); padding: 118px 24px 280px; background-color: #0F2C4A; background-image: url(img/paper-dark.svg); color: #EEF3F6; overflow: hidden; display: grid; align-content: center; }
.scene-text { position: relative; z-index: 2; width: 100%; max-width: 64rem; margin: 0 auto; text-align: center; }
.scene-kicker { font: 700 12px/1.35 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #A9C0D3; margin: 0 0 18px; }
.scene h1 { font-size: clamp(50px, 7.6vw, 112px); line-height: 0.98; margin: 0 0 22px; color: #EEF3F6; }
.scene-lede { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: #A9C0D3; max-width: 40rem; margin: 0 auto 30px; text-wrap: balance; }
.scene-night { font: 400 italic clamp(19px, 2vw, 24px)/1.3 var(--f-display); color: #A9C0D3; margin: 22px 0 0; }
.scene-asked { font: 700 12px/1.4 var(--f-mono); letter-spacing: 0.09em; text-transform: uppercase; color: #A9C0D3; margin: 10px 0 0; }
.scene a { color: #E6EEF3; }
.scene :focus-visible { outline-color: #EEF3F6; }

.register { margin: 0 auto; max-width: 44rem; text-align: left; }
.register-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.register-field, .register-go { margin: 0; }
/* The same :not()s as the page-wide label rule, so this one outranks it: the scene is night in
   both views, and its labels stay light by day too. */
.register label:not(.choice):not(.pick):not(.hp):not(.kind) { color: #A9C0D3; margin: 0 0 6px; }
.register input[type="email"], .register input[type="text"] { max-width: none; background-color: #13355A; border-color: #8FA9C0; color: #EEF3F6; font-size: 17px; padding: 13px 14px; }
.scene .button { background: #EEF3F6; color: #0F2C4A; border-color: #EEF3F6; padding: 17px 24px 16px; }
.scene .button:hover { background: #A9C0D3; border-color: #A9C0D3; color: #0F2C4A; }
.register-note { font-size: 14px; color: #9DB4C9; margin: 14px 0 0; text-align: center; }
.suggest { font: 400 14px/1.4 var(--f-body); color: #EEF3F6; background: transparent; border: 0; border-bottom: 1px solid #8FA9C0; border-radius: 0; padding: 0; margin: 0 10px 0 0; cursor: pointer; }
.suggest:hover { border-bottom-color: #EEF3F6; }
/* Google and Apple, once woodls.com has them set up: quiet buttons, each with its owner's mark. */
.register-with { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 12px; margin: 18px 0 0; font-size: 14px; color: #9DB4C9; }
.register-with[hidden], .with[hidden] { display: none; }
.with { appearance: none; display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 9px 16px 9px 13px; background-color: transparent; color: #EEF3F6; border: 1px solid #8FA9C0; border-radius: 0; font: 700 14px/1 var(--f-body); cursor: pointer; }
.with:hover { border-color: #EEF3F6; }
.with img { width: 18px; height: 18px; }
.scene .form-status { border-top-color: #2B4C6E; color: #E6EEF3; text-align: center; }
.scene .form-status.error { color: #F07A66; }

.pass { max-width: 44rem; margin: 0 auto; text-align: left; }
.pass:focus { outline: none; }
.pass:focus-visible { outline: 2px solid #EEF3F6; outline-offset: 8px; }
.pass-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; align-items: center; border: 1px solid #8FA9C0; background-color: #173C63; padding: 20px 26px 20px 16px; }
.pass-woodl { width: 120px; height: auto; }
.pass-kicker { font: 700 11.5px/1.35 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #A9C0D3; margin: 0 0 8px; }
.pass-name { font: 400 italic clamp(40px, 6vw, 68px)/1 var(--f-display); color: #EEF3F6; margin: 0 0 12px; overflow-wrap: anywhere; }
.pass-meta { font: 400 14px/1.5 var(--f-mono); color: #A9C0D3; margin: 0; }
.pass-pick { margin: 20px 0 0; }
.pass-pick fieldset { border-top: 1px solid #2B4C6E; padding-top: 14px; margin: 0; }
.pass-pick legend { font: 400 italic 22px/1.3 var(--f-display); color: #EEF3F6; text-transform: none; letter-spacing: 0; margin: 0 0 8px; }
.kinds { display: flex; flex-wrap: wrap; gap: 10px; }
.pass-pick label.kind { flex: 1 1 8.5rem; display: grid; justify-items: center; text-align: center; gap: 6px; margin: 0; padding: 12px 10px 14px; border: 1px solid #2B4C6E; cursor: pointer; font: 400 14px/1.35 var(--f-body); letter-spacing: 0; text-transform: none; color: #A9C0D3; }
.kind img { width: 62px; height: auto; }
.kind b { display: block; font-size: 16px; color: #EEF3F6; }
.kind:hover { border-color: #8FA9C0; }
.kind:has(input:checked) { border-color: #EEF3F6; background-color: #173C63; color: #E6EEF3; }
.kind:has(input:focus-visible) { outline: 2px solid #EEF3F6; outline-offset: 3px; }
.pass-next { font-size: 14.5px; color: #9DB4C9; margin: 18px 0 0; }
.pass-mail { font-size: 14.5px; color: #EEF3F6; margin: 18px 0 0; }
.pass-mail + .pass-next { margin-top: 6px; }

.scene-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 250px; z-index: 1; }
.scene-roots { position: absolute; left: 0; bottom: 0; width: 100%; height: 150px; }
.scene-roots path { fill: none; }
.scene-roots .soil { stroke: #8FA9C0; stroke-width: 1.2; }
.scene-roots .root { stroke: #2B4C6E; stroke-width: 2; }
.scene-roots .lit { stroke: #EEF3F6; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 70 1500; opacity: 0.85; }
.scene-forest { position: absolute; left: 0; right: 0; bottom: 128px; height: 70px; }
.scene-forest img { position: absolute; bottom: 0; width: 42px; height: auto; opacity: 0.45; }
.actor { position: absolute; bottom: 128px; width: 104px; }
.actor img { display: block; width: 100%; height: auto; }
.actor-nap { left: 8%; width: 96px; }
.actor-wander { left: 0; transform: translateX(28vw); }
.actor-wander .sit { position: absolute; left: 0; bottom: 0; opacity: 0; }
.actor-play { left: 80%; }
.actor-you { left: 57%; }
.actor-name { position: absolute; left: 50%; bottom: -32px; transform: translateX(-50%); font: 700 12px/1 var(--f-mono); letter-spacing: 0.08em; color: #EEF3F6; white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) {
  .scene-roots .lit-one { animation: scene-light 7s linear infinite; }
  .scene-roots .lit-two { animation: scene-light 9s linear 3s infinite; }
  .actor-wander { animation: scene-wander 64s linear infinite; }
  .actor-wander .walk { animation: scene-hop 1.2s ease-in-out infinite, scene-walking 64s steps(1, end) infinite; }
  .actor-wander .sit { animation: scene-sitting 64s steps(1, end) infinite; }
  .actor-play img { animation: scene-hop-high 1.8s ease-in-out infinite; }
  .actor-nap img { animation: scene-breathe 4.8s ease-in-out infinite; transform-origin: 50% 100%; }
  .actor-you.arrived { animation: scene-arrive 1.6s var(--ease-expose) both; }
  .actor-you.arrived img { animation: scene-hop-high 1.8s ease-in-out 1.6s infinite; }
  @keyframes scene-light { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1570; } }
  @keyframes scene-wander { 0% { transform: translateX(-14vw); } 28% { transform: translateX(28vw); } 44% { transform: translateX(28vw); } 76% { transform: translateX(64vw); } 84% { transform: translateX(64vw); } 100% { transform: translateX(114vw); } }
  @keyframes scene-walking { 0% { opacity: 1; } 28% { opacity: 0; } 44% { opacity: 1; } }
  @keyframes scene-sitting { 0% { opacity: 0; } 28% { opacity: 1; } 44% { opacity: 0; } }
  @keyframes scene-hop { 0%, 100% { transform: translateY(0); } 45%, 60% { transform: translateY(-9px); } }
  @keyframes scene-hop-high { 0%, 55%, 100% { transform: translateY(0); } 70% { transform: translateY(-16px); } 85% { transform: translateY(-5px); } }
  @keyframes scene-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.035); } }
  @keyframes scene-arrive { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
}

@media (max-width: 640px) {
  .home .site-header { left: 16px; right: 16px; }
  .scene { padding: 104px 16px 230px; }
  .home .site-nav li:not(:last-child) { display: none; }
  .home .site-header { flex-wrap: nowrap; }
  .scene-lede { margin-bottom: 22px; }
  .kind { flex-basis: 6.5rem; }
  .register-row { grid-template-columns: minmax(0, 1fr); }
  .register-go .button { width: 100%; }
  .actor { width: 70px; }
  .actor-nap { left: 3%; width: 66px; }
  .actor-play { left: 74%; }
  .actor-you { left: 44%; }
  .scene-forest img { width: 30px; }
  .pass-card { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 16px 18px 16px 12px; }
  .pass-woodl { width: 72px; }
}

/* The home page below the scene: one clean column. */
.home .entry { grid-template-columns: minmax(0, 1fr); max-width: 48rem; margin: 0 auto; padding: 72px 0 40px; border-top: 0; }
.home .entry .margin:empty { display: none; }
.home .entry .main { max-width: none; }
.home .entry h2 { font-size: clamp(38px, 5.4vw, 60px); margin-bottom: 22px; }
.home .next { max-width: 48rem; margin-left: auto; margin-right: auto; grid-template-columns: minmax(0, 1fr); }
.steps { list-style: none; padding: 0; margin: 8px 0 0; }
.main .steps li { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 26px; align-items: center; padding: 18px 0; margin: 0; border-top: 1px solid var(--rule); }
.main .steps li:last-child { border-bottom: 1px solid var(--rule); }
.steps img { width: 112px; height: auto; background-color: var(--plate); border: 1px solid var(--plate-edge); }
.step-no { display: block; font: 400 italic 24px/1 var(--f-display); color: var(--ink-soft); margin: 0 0 8px; }
.steps b { font-size: 19px; }
@media (max-width: 640px) { .main .steps li { grid-template-columns: 76px minmax(0, 1fr); column-gap: 16px; } .steps img { width: 76px; } }
/* The form on its own page: the same night plate, framed in the page. */
.scene.scene-inline { width: auto; margin: 16px 0 24px; min-height: 0; padding: 36px 24px 32px; display: block; }

/* See it working: real sessions of the woodls command, one at a time, in the terminal's own
   colours. The screen is Prussian in both themes, because the captures are; the strip above it
   names each session, and the one shown shares the screen's ground. The panel is wider than the
   column, as wide as the header, so the screens read at their size; on a phone it spans the
   screen, and a session pans sideways at a size that reads rather than shrinking past it. Above a
   phone's width the whole screen always fits. */
.sessions { --screen: #0F2C4A; --screen-strip: #0B2440; --screen-ink: #E6EEF3; --screen-soft: #8FA9C0; --screen-rule: #2B4C6E; position: relative; margin: 30px min(0px, calc(50% - min(508px, 50vw - 40px))) 0; }
.session-tabs { display: flex; background-color: var(--screen-strip); border: 1px solid var(--plate-edge); border-bottom: 0; }
.session-tabs[hidden], .session[hidden] { display: none; }
.session-tab { appearance: none; margin: 0; border: 0; border-top: 2px solid transparent; border-radius: 0; background-color: transparent; color: var(--screen-soft); font: 700 12px/1 var(--f-mono); letter-spacing: 0.09em; text-transform: uppercase; padding: 14px 22px 15px; cursor: pointer; }
.session-tab:hover { color: var(--screen-ink); }
.session-tab[aria-selected="true"] { background-color: var(--screen); border-top-color: var(--screen-ink); color: var(--screen-ink); }
.session-tab:focus-visible { outline: 2px solid var(--screen-ink); outline-offset: -7px; }
.session:focus-visible { outline-offset: 4px; }
.session figure { margin: 0 0 30px; }
.session-screen { background-color: var(--screen); border: 1px solid var(--plate-edge); padding: 22px 26px 24px; overflow-x: auto; }
.session-screen img { width: 100%; }
.session-where { font: 400 12.5px/1.2 var(--f-mono); color: var(--screen-soft); margin: 0 0 18px; white-space: nowrap; }
.session-where span { color: var(--screen-rule); }
.sessions.tabbed .session-where { position: absolute; top: 1px; right: 1px; height: 43px; display: flex; align-items: center; gap: 0.5em; padding: 0 22px; margin: 0; }
.session figcaption { max-width: 48rem; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); margin-top: 12px; }
.session figcaption b { color: var(--ink); }
@media (max-width: 880px) { .sessions.tabbed .session-where { display: none; } }
@media (max-width: 640px) {
  .sessions { margin: 24px -16px 0; }
  .session-tabs, .session-screen { border-left: 0; border-right: 0; }
  .session-tab { flex: 1 1 auto; padding: 14px 8px 15px; }
  .session-screen { padding: 14px 16px 16px; }
  .session-screen img { min-width: 720px; }
  .session figcaption { padding: 0 16px; }
}