:root {
  --bg: #fff;
  --ink: #000;
  --quiet: #767676;
  --rule: #eee;
  --mark: #c8102e;
  --code-bg: #f7f7f7;
  --u: 1.75rem;
  --small: 0.8125rem;
  --note-width: 22rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --headline: clamp(1.6rem, 3.3vw, 3.25rem);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

[hidden] { display: none; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 1.0625rem/var(--u) "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-kerning: normal;
}

a, a:visited { color: inherit; text-underline-offset: 0.12em; text-decoration-thickness: 0.06em; }
a:hover { text-decoration-thickness: 0.12em; }

/* Element defaults. A part of a page that wants something else says so further down. */
/* The triangle that marks a high or a sunrise, one size wherever it appears. */
:where(svg[viewBox="0 0 10 9"]) { width: 0.53em; height: 0.5em; fill: currentColor; }
/* A date under a title. Times inside a tool carry no datetime and look however the tool sets them. */
:where(time[datetime]) { display: block; color: var(--quiet); margin-bottom: 1.5em; }
h1, h2, h3 {
  hyphens: manual;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin: 1.75em 0 0.4em;
}
h1 { font-size: 2.25em; margin-top: 0.5em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }
sup { line-height: 0; }

img, video, iframe { display: block; max-width: 100%; height: auto; }
figure { margin: 1.75em 0; }
figcaption { color: var(--quiet); font-size: 0.9em; margin-top: 0.4em; }

code, pre { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.85em; }
pre { background: var(--code-bg); border: 1px solid var(--rule); padding: 1em; overflow-x: auto; line-height: 1.5; }
pre code { font-size: 1em; }

blockquote { margin: 1.25em 0; padding: 0 1.5em; }

main table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; }
main :is(th, td) { text-align: left; padding: 0.3em 0.75em 0.3em 0; border-bottom: 1px solid var(--rule); }

hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5em 0; }

kbd { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.85em; }

/* The head of a page: home, the sections above this page, then search and the key list at the right.
   A link here goes without its underline until it is pointed at. The contents line at the foot is set the same way. */
nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
:is(nav, spread-page > header) :is(a, a:visited) { text-decoration: none; }
:is(nav, spread-page > header) :is(a, button):is(:hover, :focus-visible) { text-decoration: underline 0.06em; }
a[rel="home"] { font-weight: 600; }
nav button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
nav button:first-of-type { margin-left: auto; }
nav kbd { color: var(--quiet); }
/* The homepage masthead: Joel's portrait where other pages have the wave, and his name set like the headlines on the right page.
   static/portrait.js draws the portrait. The name's last line stands on the portrait's foot. Search and the key list share
   what's left of the row, and stack at its right when it's too narrow for both. */
spread-page > header { display: flex; align-items: flex-start; gap: 0 1.25rem; }
spread-page > header h1 { flex: none; margin: 0; font-size: inherit; line-height: inherit; letter-spacing: inherit; }
spread-page > header nav { flex: 1; justify-content: flex-end; }
a[rel="home"]:has(canvas) { display: flex; align-items: flex-end; gap: 0.4em; font-size: var(--headline); line-height: 1; letter-spacing: -0.04em; font-weight: 700; }
a[rel="home"] canvas { flex: none; width: 6rem; aspect-ratio: 4 / 5; }
a[rel="home"] span { margin-bottom: -0.14em; }
/* A screen with no pointer over it is a phone or a tablet: no keys to list. */
@media (hover: none) { nav button[data-opens="keys"], nav kbd { display: none; } }
/* The contents line wraps into lines of even length, and no title breaks in two. */
footer nav { display: block; text-wrap: balance; }
footer nav span { display: inline-block; margin-right: 1.25rem; }
/* The wave beside the name: as tall as a capital, and at that height its stroke is as thick as the name's stems. */
a[rel="home"] svg { height: 0.72em; margin-right: 0.35em; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; }

/* Every page but the homepage: one column. */
page-column {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 44rem;
  margin: 0 auto;
  padding: 1rem 1rem 1.5rem;
}
page-column > nav { margin-bottom: 2.5rem; }
page-column > main { flex: 1; padding-bottom: 3rem; hyphens: auto; }
page-column > footer { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 2rem; color: var(--quiet); font-size: var(--small); line-height: 1.6; }
:is(page-column, page-spread) > footer small { font-size: inherit; white-space: nowrap; }
:is(page-column, page-spread) > footer > nav[aria-label="Contents"] { flex: 1; }
/* The things numbered just before and after this one, in ink, across the top of the foot: the earlier at the left, the
   later at the right. templates/by-number.html finds them. */
footer nav[aria-label="By number"] { flex-basis: 100%; display: flex; gap: 1rem; margin-bottom: 1.5rem; padding-top: 0.75rem; border-top: 1px solid var(--ink); color: var(--ink); font-size: 1.0625rem; }
footer nav[aria-label="By number"] a[rel="next"] { margin-left: auto; text-align: right; }
/* The keys most worth knowing, fainter than anything else on the page, along its very bottom. A screen with no keyboard
   to speak of goes without. templates/key-hints.html. */
key-hints { display: flex; flex-wrap: wrap; gap: 0 1.25rem; color: var(--quiet); opacity: 0.6; }
page-column > footer key-hints, page-spread > footer:has(nav) key-hints { flex-basis: 100%; margin-top: 1rem; }
@media (hover: none) { key-hints { display: none; } }

/* The homepage and the parks page: two equal pages and a fold. The symmetry is the grid; the content ignores it. */
page-spread { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; font-variant-numeric: tabular-nums; }
spread-page { display: flex; flex-direction: column; padding: var(--u) var(--gutter); }
spread-page + spread-page { border-left: 1px solid var(--ink); }
spread-page > footer {
  display: flex; justify-content: space-between;
  margin-top: auto; padding-top: var(--u); align-items: flex-end;
  color: var(--quiet); font-size: var(--small);
}
/* The headlines on the right page: the folders on the homepage, the things on a shelf, the heading on the parks page.
   A thing's number goes before its name at the regular weight. */
spread-page main > :is(ul, ol) { margin: 0; padding: 0; list-style: none; }
spread-page :is(h2, main > :is(ul, ol) > li) {
  font-size: var(--headline);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 700;
  margin: 0;
  padding-bottom: calc(var(--u) / 2);
  text-wrap: balance;
}
spread-page main > ol > li data { font-weight: 400; }
/* The favorites under the folders on the homepage: one plate of nine screens packed edge to edge, with hairline rules
   between them, each labeled on its own corner like the tide face labels its curves. A shelf's
   apps make the same plate under its list, in one row, each screen a third of the page wide, labeled with what you do
   there, so no cell is ever empty. */
:is(favorite-wall, app-screens, weather-pictures) { display: grid; gap: 1px; margin-top: calc(var(--u) * 2.5); background: var(--ink); border: 1px solid var(--ink); }
favorite-wall { grid-template-columns: repeat(3, 1fr); }
spread-page:has(app-screens) { container-type: inline-size; }
app-screens { grid-auto-flow: column; grid-auto-columns: calc((100cqw - 4px) / 3); width: fit-content; }
:is(favorite-wall, app-screens, weather-pictures) a { position: relative; display: block; text-decoration: none; background: var(--bg); }
:is(favorite-wall, app-screens) :is(img, span) { display: block; width: 100%; aspect-ratio: 1; }
:is(favorite-wall, app-screens, weather-pictures) a b { position: absolute; left: 0; bottom: 0; padding: 0.3em 0.55em 0.25em 0.45em; background: var(--bg); border-top: 1px solid var(--ink); border-right: 1px solid var(--ink); font-size: 0.75rem; line-height: 1.2; letter-spacing: -0.005em; }
favorite-wall i { font-style: normal; font-weight: 400; font-variant-numeric: tabular-nums; margin-right: 0.2em; }
:is(favorite-wall, app-screens, weather-pictures) a:hover b { text-decoration: underline; }
@media (max-width: 720px) { app-screens { grid-auto-flow: row; grid-template-columns: 1fr; width: auto; } }
/* On a phone the favorites are nine lines, set like a shelf's list: the number plain, the name underlined. Their
   pictures load lazily and are never drawn there, so a phone doesn't ask for them. An inline block keeps the link's
   underline off the number and the space after it. */
@media (max-width: 720px) {
  favorite-wall { display: block; border: 0; background: none; }
  favorite-wall :is(img, span) { display: none; }
  favorite-wall a { padding-bottom: calc(var(--u) / 2); font-size: var(--headline); line-height: 1; letter-spacing: -0.04em; text-decoration: underline; text-wrap: balance; }
  favorite-wall a b { position: static; padding: 0; border: 0; background: none; font-size: inherit; line-height: inherit; letter-spacing: inherit; }
  favorite-wall i { display: inline-block; white-space: pre; margin-right: 0; }
}

/* The contents line under the parks spread, as wide as both pages. */
page-spread:has(> footer) { grid-template-rows: 1fr auto; }
page-spread > footer { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 2rem; grid-column: 1 / -1; padding: calc(var(--u) / 2) var(--gutter); border-top: 1px solid var(--ink); color: var(--quiet); font-size: var(--small); line-height: 1.6; }

/* The conversation starters, under both pages, set like the index at the back of a book. The row above stops short so their first line shows at the foot of a tall window. */
page-spread:has(> conversation-starters) { grid-template-rows: minmax(calc(100vh - 3.5rem), auto) auto; }
conversation-starters { grid-column: 1 / -1; padding: var(--u) var(--gutter) calc(var(--u) * 2); border-top: 1px solid var(--ink); }
conversation-starters h2 { margin: 0; font-size: inherit; line-height: inherit; letter-spacing: inherit; }
/* At most four columns, each wide enough to keep an entry on one line. */
conversation-starters ul { margin: 0; padding: 0; list-style: none; columns: 22.5rem 4; column-gap: 2rem; font-size: var(--small); line-height: 1.4; }
conversation-starters li { break-inside: avoid; padding: 0 0 0.35em 1em; text-indent: -1em; }
/* Its page number at the right, where page 2 keeps its own. */
page-spread:has(> conversation-starters) > footer { display: flex; justify-content: space-between; }

/* A design's drawing sheet, templates/design.html: the drawing on the left and its title block on the right, filling the
   first screen, set like an engineering drawing. static/drawing.js turns the drawing. On a phone the two stack. */
drawing-sheet {
  display: grid; grid-template-columns: 1fr minmax(16rem, 21rem); grid-template-rows: auto 1fr;
  column-gap: clamp(1.5rem, 4vw, 3.5rem); min-height: 100vh; padding: 1rem clamp(1rem, 3vw, 2.5rem) 1.5rem;
  font-variant-numeric: tabular-nums;
}
drawing-sheet > nav { grid-column: 1 / -1; margin-bottom: 1.5rem; }
drawing-sheet figure { position: relative; min-height: 22rem; margin: 0; }
drawing-sheet figure :is(img, canvas) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; touch-action: pan-y; }
drawing-sheet figcaption { position: absolute; left: 0; bottom: 0; margin: 0; }
drawing-sheet figcaption kbd { margin-right: 0.15em; }
@media (hover: none) { drawing-sheet figcaption { display: none; } }
title-block { display: flex; flex-direction: column; font-size: 0.9375rem; line-height: 1.45; }
title-block h1 { margin: 0 0 auto; padding-bottom: var(--u); font-size: clamp(2rem, 3.3vw, 3.25rem); line-height: 1; letter-spacing: -0.04em; font-weight: 700; }
title-block dl { display: grid; grid-template-columns: max-content 1fr; margin: 0; }
title-block :is(dt, dd) { margin: 0; padding: 0.4em 0; border-top: 1px solid var(--ink); }
title-block dt { padding-right: 1rem; color: var(--quiet); }
title-block p { margin: 0; padding: 0.4em 0; border-top: 1px solid var(--ink); }
title-block p a { margin-right: 0.6em; white-space: nowrap; }
title-block small { padding-top: 0.4em; border-top: 1px solid var(--ink); color: var(--quiet); font-size: var(--small); }
@media (max-width: 720px) {
  drawing-sheet { grid-template-columns: 1fr; min-height: 0; padding-bottom: 0; }
  drawing-sheet figure { min-height: 0; aspect-ratio: 1; }
  title-block h1 { margin-top: var(--u); }
}
/* Printed, the sheet alone fills a landscape Letter page inside a drawing's border, as turned on screen. */
drawing-sheet { page: drawing-sheet; }
@page drawing-sheet { size: letter landscape; margin: 0.35in; }
@media print {
  body:has(drawing-sheet) :is(drawing-sheet > nav, drawing-sheet figcaption, page-column, dialog) { display: none; }
  drawing-sheet { height: 7.75in; min-height: 0; grid-template-columns: 1fr 3.1in; grid-template-rows: 1fr; padding: 0.25in; border: 1.5pt solid #000; font-size: 9pt; }
  drawing-sheet figure { min-height: 0; }
  title-block { font-size: 9pt; }
  title-block a { text-decoration: none; }
}

@media (max-width: 720px) {
  page-spread { grid-template-columns: 1fr; }
  page-spread:has(> conversation-starters, > footer) { grid-template-rows: none; }
  spread-page + spread-page { border-left: 0; border-top: 1px solid var(--ink); }
}

/* A relief plate: a park's ground lit from where the sun is over it. static/relief.js draws it and fills in the times. */
relief-plate { display: block; font-variant-numeric: tabular-nums; hyphens: manual; }
relief-plate :is(h1, h2) { margin: 0; padding: 0; font-size: clamp(2.5rem, 9vw, 4.5rem); line-height: 0.9; letter-spacing: -0.05em; font-weight: 700; }
relief-plate p { margin: 0; }
relief-plate header p { margin-top: calc(var(--u) / 2); }
relief-plate i { color: var(--quiet); font-size: var(--small); }
/* The plate is square. Its label sits on the highest ground, where the script puts it. */
relief-plate figure { position: relative; margin: var(--u) 0 calc(var(--u) / 2); aspect-ratio: 1; }
relief-plate canvas { display: block; width: 100%; height: 100%; }
relief-plate figcaption {
  position: absolute; margin: 0; transform: translate(-0.55em, -50%);
  padding: 0 0.3em; background: var(--bg); color: inherit; font-size: var(--small); line-height: 1.25; white-space: nowrap;
}
relief-plate svg { margin-right: 0.3em; }
/* The row under the plate: sunrise and sunset, then where the sun is. A bare plate's row starts with the park's name. */
relief-plate > p { display: flex; align-items: baseline; }
relief-plate > p a { margin-right: 0.6em; font-weight: 600; }
relief-plate > p :is(time, data) { margin-right: 0.45em; }
relief-plate > p i { margin-right: 1.5rem; }
relief-plate > p data { margin-left: auto; }
relief-plate > p :last-child { margin-right: 0; }
/* The day as an axis: night is a bar of ink (relief.js sets --night), and the dot is the moment on the plate. Dragging it moves the sun. */
relief-plate input {
  display: block; width: 100%; height: 19px; margin: calc(var(--u) / 2) 0 0; appearance: none; -webkit-appearance: none;
  background: var(--night, none) 0 7px / 100% 4px no-repeat, linear-gradient(var(--ink), var(--ink)) 0 11px / 100% 1px no-repeat;
  cursor: ew-resize;
}
relief-plate input::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; margin-top: 3px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--bg); }
relief-plate input::-moz-range-thumb { width: 11px; height: 11px; border: 0; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--bg); }
relief-plate input::-moz-range-track { background: none; }
relief-plate input:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* The hours under the axis. After the dot is dragged, a "now" at the right end puts the plate back on the clock. */
relief-plate ol { position: relative; height: var(--u); margin: 0; padding: 0; list-style: none; font-size: var(--small); }
relief-plate li { position: absolute; transform: translateX(-50%); }
relief-plate li:last-child { right: 0; transform: none; }
relief-plate button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 0.12em; text-decoration-thickness: 0.06em; }
relief-plate small { display: block; margin-top: var(--u); max-width: var(--note-width); color: var(--quiet); font-size: var(--small); line-height: 1.4; }

/* The parks page: one plate on the left page and every park on the right.
   static/parks.js puts the chosen park's plate in <plate-holder>. */
plate-holder { display: block; margin-top: calc(var(--u) * 2); max-width: 34rem; }
park-list ol { columns: 3 8rem; column-gap: 1.5rem; margin: calc(var(--u) * 1.5) 0 0; padding: 0; list-style: none; font-size: 0.9375rem; }
park-list li { break-inside: avoid; }
park-list a { text-decoration: none; }
park-list a:hover { text-decoration: underline; }
park-list a[aria-current] { font-weight: 700; }

/* Keyboard browsing: static/keys.js moves focus with j and k and opens the two dialogs in templates/keys.html. */
a:focus-visible { outline: 2px solid currentColor; outline-offset: 0.15em; }
dialog {
  width: min(32rem, calc(100vw - 2rem)); max-height: calc(100vh - 4rem);
  margin-top: 4rem; padding: var(--u);
  border: 1px solid var(--ink); background: var(--bg); color: var(--ink);
}
dialog::backdrop { background: var(--bg); opacity: 0.85; }
dialog h2 { margin-top: 0; }
dialog dl { display: grid; grid-template-columns: max-content 1fr; gap: 0 1.5rem; margin: 0; }
dialog dd { margin: 0; }
search input {
  width: 100%; padding: 0 0 0.2em; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; outline: 0;
  background: transparent; color: inherit;
  font: inherit; font-size: 1.5em; font-weight: 600; letter-spacing: -0.03em;
}
search ol { list-style: none; margin: 0; padding: 0; }
search li { margin-top: calc(var(--u) / 2); }
/* A result is one link: the page's title, the heading the match is under, then the text around the match with the found words in ink. */
search a { display: block; text-decoration: none; }
search cite { font-style: normal; text-decoration: underline; text-underline-offset: 0.12em; text-decoration-thickness: 0.06em; }
search a:hover cite { text-decoration-thickness: 0.12em; }
search span { color: var(--quiet); }
search span::before { content: " \203A  "; }
search small { display: block; color: var(--quiet); font-size: var(--small); line-height: 1.4; }
search mark { background: none; color: var(--ink); }

/* A one-pager: a page meant to print on one sheet. templates/one-pager.html wraps it. */
one-pager { display: block; page: one-pager; }
one-pager > footer { margin-top: 2.5em; color: var(--quiet); font-size: 0.9em; }
/* The page's own address, for the printed sheet only. */
one-pager > footer small { display: none; }
@page one-pager { margin: 0.5in; }
@media print {
  body:has(one-pager) { font-size: 9pt; line-height: 1.35; }
  body:has(one-pager) :is(page-column > nav, page-column > footer, dialog), one-pager > footer p:has(a[href$=".pdf"]) { display: none; }
  body:has(one-pager) page-column { display: block; max-width: none; min-height: 0; padding: 0; }
  body:has(one-pager) main { padding-bottom: 0; hyphens: manual; }
  one-pager h1 { margin: 0 0 0.3em; font-size: 2em; }
  one-pager :is(h2, h3) { margin: 0.6em 0 0.15em; break-after: avoid; }
  one-pager h2 { font-size: 1.25em; }
  one-pager h3 { font-size: 1.05em; }
  one-pager :is(p, ul, ol) { margin: 0 0 0.3em; }
  one-pager a { text-decoration: none; }
  one-pager > footer { margin-top: 0.6em; color: var(--ink); font-size: 1em; }
  one-pager > footer small { display: block; }
  one-pager .footnotes { margin-top: 0.8em; color: var(--ink); }
  one-pager .footnotes ol { columns: 3; column-gap: 2em; margin: 0; }
  one-pager .footnotes p { margin: 0; }
}

/* An AuDHD card. templates/card.html wraps it and ends it with the whole deck. */
audhd-card { display: block; page: audhd-card; }
audhd-card > footer { margin-top: 2.5em; color: var(--quiet); font-size: 0.9em; }
/* The card's own address, for the printed sheet only. */
audhd-card > footer small { display: none; }
/* Printed, a card is set like the recording rig's cards (finish/cheatsheet.html in the video tools repo):
   system type in near-black, a rule under each heading, a heavy rounded box around the one thing to read first,
   and each step's letter on a key cap. Two columns fit each card on one US Letter page, D.A.N.G.E.R. on two. */
@page audhd-card { size: letter; margin: 0.3in 0.4in; }
@media print {
  body:has(audhd-card) { font: 7.9pt/1.29 -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #111; }
  body:has(audhd-card) :is(page-column > nav, page-column > footer, dialog) { display: none; }
  body:has(audhd-card) page-column { display: block; max-width: none; min-height: 0; padding: 0; }
  body:has(audhd-card) main { padding-bottom: 0; hyphens: manual; }
  audhd-card { columns: 2; column-gap: 0.3in; }
  audhd-card > :is(h1, h1 + p) { column-span: all; }
  audhd-card h1 { margin: 0 0 4pt; font-size: 17pt; letter-spacing: 0.03em; }
  /* "Use this when", boxed like the printouts' recipe. */
  audhd-card h1 + p { margin: 0 0 6pt; padding: 5pt 9pt; border: 2pt solid #111; border-radius: 8pt; font-size: 9pt; }
  audhd-card hr { display: none; }
  audhd-card h2 { margin: 6pt 0 3pt; padding-bottom: 2.5pt; border-bottom: 1.5pt solid #111; font-size: 10.5pt; line-height: 1.3; letter-spacing: 0; break-after: avoid; }
  audhd-card h2 em { font-weight: 400; color: #555; font-size: 8.5pt; }
  audhd-card h2 > strong:first-child { display: inline-block; min-width: 15pt; margin-right: 1pt; padding: 2pt 4pt; border: 1.2pt solid #111; border-radius: 4pt; box-shadow: 0 1.5pt 0 #111; text-align: center; line-height: 1; }
  audhd-card h3 { margin: 6pt 0 2pt; font-size: 9pt; letter-spacing: 0; break-after: avoid; }
  audhd-card :is(p, ul, ol) { margin: 0 0 2.5pt; }
  audhd-card :is(ul, ol) { padding-left: 12pt; }
  audhd-card :is(p, blockquote) { break-inside: avoid; }
  /* Words to say out loud, in a lighter box. */
  audhd-card blockquote { margin: 3pt 0 4pt; padding: 3pt 7pt; border: 1pt solid #111; border-radius: 5pt; }
  audhd-card blockquote p { margin: 0; }
  audhd-card a { text-decoration: none; }
  /* The deck and the card's address sit at the top right, beside the name, where the printouts keep their subtitle. */
  audhd-card { position: relative; }
  audhd-card > footer { position: absolute; top: 2pt; right: 0; margin: 0; color: #555; font-size: 7.5pt; line-height: 1.4; text-align: right; }
  audhd-card > footer p { margin: 0; }
  audhd-card > footer small { display: block; font-size: inherit; }
}

/* Footnotes: Zola gathers them at the foot of the page. On the ADHD, autism and trauma pages they hold the studies. */
.footnotes { margin-top: 2.5em; color: var(--quiet); font-size: 0.9em; }
.footnotes p { margin: 0 0 0.4em; }

/* The head of a numbered thing's write-up, templates/page.html: the number in the title at the regular weight, as on its
   shelf, then a folio line of its shelf, when it was started and its links, ruled off from what it does. */
article > header h1 data { font-weight: 400; font-variant-numeric: tabular-nums; }
article > header p { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: 0; padding-bottom: 0.5rem; border-bottom: 1px solid var(--ink); font-size: 0.9375rem; }
article > header time { display: inline; margin: 0; color: inherit; }
article > header a:nth-of-type(2) { margin-left: auto; }
article > header + p, article > header + human-mark + p { font-size: 1.25em; line-height: 1.4; letter-spacing: -0.01em; }
article > header ~ img { margin: 1.75em 0; border: 1px solid var(--ink); }


/* A shelf, templates/section.html: a spread like the homepage. The left page carries the shelf's whole name at the
   clock's weight, spaced like the homepage's headlines, its noun underlined like its link there, sized so the longest
   word in any shelf's name, "understanding", fits the page. A whole line of leading keeps each underline clear of the
   line below. */
spread-page:has(> h1) { container-type: inline-size; }
spread-page > h1 { margin: calc(var(--u) * 2) 0 0 -0.04em; font-size: 15.6cqw; line-height: 1; letter-spacing: -0.04em; font-weight: 700; }
spread-page > h1 a { text-decoration-thickness: 0.05em; }


human-mark {
  display: block;
  margin: 0 0 1.5em;
  color: var(--mark);
  font-size: 0.9em;
  font-weight: 600;
}


/* From the 2020 site: recipe photos, the worksheet's lined paper, mermaid diagrams (drawn for a white page). */
photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 1.75em 0; }
photo-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
lined-paper { display: block; background: linear-gradient(transparent, transparent 29px, #ccc 29px) 0 0 / 30px 30px; }
lined-paper textarea {
  display: block; width: 100%; padding: 0 10px; border: 0; outline: 0; resize: vertical;
  background: transparent; color: red; font: bold 18px/30px Arial, sans-serif;
}
.mermaid { background: #fff; color: #000; }


/* Dark mode: every color on the page inverted, drawings included. It follows the device's setting unless the buttons at
   the foot of the page (templates/dark-mode.html) turn it on or off. The filter sits on body, and html turns black behind
   it for the edges a scroll overshoots. A dialog is drawn above the page, outside body's filter, so it inverts on its
   own. Photos, video and the homepage portrait invert a second time, back to their real colors, so the portrait keeps
   its white ground. Printing always comes out black on white. */
dark-mode { display: none; }
:root[data-dark-mode] dark-mode { display: block; }
dark-mode button { margin-left: 0.35em; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
dark-mode button:is(:hover, :focus-visible) { text-decoration: underline 0.06em; }
dark-mode button[aria-pressed="true"] { color: var(--ink); }
@media screen {
  :root[data-dark-mode="on"] { background: #000; color-scheme: dark; }
  :root[data-dark-mode="on"] :is(body, dialog) { filter: invert(1); color-scheme: light; }
  :root[data-dark-mode="on"] dialog::backdrop { filter: invert(1); }
  :root[data-dark-mode="on"] :is(img, video, a[rel="home"] canvas) { filter: invert(1); }
}
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-dark-mode="off"]) { background: #000; color-scheme: dark; }
  :root:not([data-dark-mode="off"]) :is(body, dialog) { filter: invert(1); color-scheme: light; }
  :root:not([data-dark-mode="off"]) dialog::backdrop { filter: invert(1); }
  :root:not([data-dark-mode="off"]) :is(img, video, a[rel="home"] canvas) { filter: invert(1); }
}