/* ohlin.co/notes: Printed Folio. A riso-printed sheet on a visible grid.
   Sections: fonts, tokens, base, plates, age fade, header, footer, then the page rules: index, TOC, tags, stacking, and the note folio. */

/* ---------- fonts ---------- */
@font-face { font-family: 'DINish'; font-weight: 500; font-style: normal; font-display: swap; src: url('/notes/fonts/dinish-500.woff2') format('woff2'); }
@font-face { font-family: 'DINish'; font-weight: 600; font-style: normal; font-display: swap; src: url('/notes/fonts/dinish-600.woff2') format('woff2'); }
/* GL-Nummernschild-Mtl (Gutenberg Labo), the open FE-Schrift revival, for note numbers. Capitals only; free to modify, so converted to WOFF2. */
@font-face { font-family: 'GL-Nummernschild'; font-weight: 400; font-style: normal; font-display: swap; src: url('/notes/fonts/gl-nummernschild-mtl.woff2') format('woff2'); }

/* ---------- tokens ---------- */
:root {
  /* inks (Riso names) + paper */
  --bench: #E7E4D4;        /* the table the sheet sits on */
  --grid: #D6D3C0;
  --paper: #F4F1E6;
  --fg: #1E3329;           /* Hunter at full density: body text, 11.9:1 */
  --ink: #3C6A5A;          /* Hunter Green: structure, links, 5.4:1 */
  --ink-soft: #536B60;     /* faded text floor, still 5.2:1 */
  --sun: #FFB511;          /* Sunflower: fills only, never text */
  --sun-wash: #FBE3A6;     /* a light Sunflower pass */
  --stamp: #D93A4A;        /* Bright Red, large stamps and rules */
  --stamp-text: #B32435;   /* Bright Red at small text sizes (5.8:1) */
  --fade-1: #A8434E; --fade-2: #9A5258; --fade-3: #8E5E60;  /* stamp ink fading: desaturates, stays >= 4.7:1 */
  --umber: #735108;        /* Sunflower taken down to a readable brown: quotes (6.4:1) */
  --rule: #B9BCA6;
  --blend: multiply;
  --on-sun: #1E3329;       /* text printed on Sunflower, both themes (~8:1) */
  --line: #74897D;         /* outlines: sections, buttons, page edges (3.2:1) */

  --display: 'DM Serif Text', Georgia, serif;
  --body: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  --label: 'DINish', 'Arial Narrow', sans-serif;
  --ui: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --plate: 'GL-Nummernschild', 'DINish', 'Arial Narrow', sans-serif;

  --measure: 65ch;
  --step--1: 0.8rem; --step-0: 1.25rem; --step-1: 1.6rem; --step-2: 2.4rem; --step-3: 3.4rem;

}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bench: #101814; --grid: #1B2620; --paper: #18221D;
    --fg: #E8E6D8; --ink: #86BBA4; --ink-soft: #A9B6AC;
    --sun: #F2B33A; --sun-wash: #3A3420; --stamp: #FF7B86; --stamp-text: #FF8F98; --fade-1: #E39AA0; --fade-2: #CBA0A3; --fade-3: #B9A3A4; --umber: #EEC779; --rule: #34433A;
    --blend: screen; --line: #5E7A6B; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bench: #101814; --grid: #1B2620; --paper: #18221D;
  --fg: #E8E6D8; --ink: #86BBA4; --ink-soft: #A9B6AC;
  --sun: #F2B33A; --sun-wash: #3A3420; --stamp: #FF7B86; --stamp-text: #FF8F98; --fade-1: #E39AA0; --fade-2: #CBA0A3; --fade-3: #B9A3A4; --umber: #EEC779; --rule: #34433A;
  --blend: screen; --line: #5E7A6B; color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--bench);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 2rem 2rem;
  color: var(--fg);
  font: 400 var(--step-0)/1.55 var(--body);
  text-rendering: optimizeLegibility;
  padding-inline: 16px;
  padding-block: 0 4rem;
}
@media (max-width: 30rem) { :root { --step-0: 1.15rem; --step-3: 2.5rem; } }
main { max-width: var(--measure); margin-inline: auto; }
a { color: var(--ink); text-underline-offset: .16em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; box-shadow: 0 0 0 5px var(--fg); border-radius: 2px; }
.label {
  font-family: var(--label); font-weight: 500; font-size: var(--step--1);
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink);
}

/* ---------- plates ---------- */
.sprig { width: 1.35em; height: 1.35em; vertical-align: -0.3em; overflow: visible; flex: none; }
.plate { transition: transform .22s cubic-bezier(.3,1.6,.5,1); }
.plate.y { color: var(--sun); transform: translate(1.4px, -1px); }
.plate.g { color: var(--ink); mix-blend-mode: var(--blend); }
.reg:hover .plate.y, .reg:focus-visible .plate.y, .reg:focus-within .plate.y { transform: translate(0, 0); }
@media (prefers-reduced-motion: reduce) { .plate { transition: none; } }

/* ---------- fade (decoration only; text never goes below --ink-soft) ---------- */
[data-age="season"] { --density: .78; --stamp-ink: var(--fade-1); }
[data-age="year"]   { --density: .56; --stamp-ink: var(--fade-2); }
[data-age="dormant"]{ --density: .38; --stamp-ink: var(--fade-3); }
[data-age] .sprig, [data-age] .leader { opacity: var(--density, 1); }
[data-age="year"] :is(.toc-title, .contents-title, .note-title, .stacked-title), [data-age="dormant"] :is(.toc-title, .contents-title, .note-title, .stacked-title) { color: var(--ink-soft); }

/* ---------- header ---------- */
.site-header {
  max-width: 72rem; margin: 0 auto 1rem; display: flex; justify-content: space-between; align-items: baseline;
  border-top: 3px solid var(--line); padding-top: .5rem; gap: 1rem; flex-wrap: wrap;
}
.logo { font-family: var(--display); font-style: italic; font-size: 1.15rem; color: var(--fg); text-decoration: none; }
.crumbs { display: flex; gap: .6rem; flex-wrap: wrap; }
.crumbs a { color: var(--ink); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ---------- footer + snail ---------- */
.site-footer { max-width: 72rem; margin: 4rem auto 0; position: relative; border-top: 3px solid var(--line); padding-top: .75rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.site-footer a { font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; text-decoration: none; color: var(--fg); }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.snail { position: absolute; top: -1.95rem; width: 2.6rem; height: 1.8rem; left: 4%; animation: crawl 240s linear infinite alternate; }
@keyframes crawl { to { left: calc(96% - 2.6rem); } }
@media (prefers-reduced-motion: reduce) { .snail { animation: none; left: 70%; } }

/* ---------- prose (all pages) ---------- */
h1, h2, h3, h4 { font-family: var(--display); font-style: italic; font-weight: 400; line-height: 1.2; margin: 1.8em 0 0.5em; }
h1 { font-size: var(--step-2); margin-top: 0.5em; }
h2 { font-size: var(--step-1); }
h3 { font-size: 1.3rem; }
img { max-width: 100%; height: auto; }
.note-body, .page-body { overflow-wrap: break-word; }
/* Quotes: a Hunter Green margin rule and umber italics, warm against the green, with no fill to compete with Questions. */
blockquote {
  margin: 1.4em 0; padding: .05em 0 .05em 1.1em;
  border-left: 2px solid var(--ink); color: var(--umber); font-style: italic;
  font-size: 1.38rem; line-height: 1.42;
}
blockquote p { margin: .4em 0; }
blockquote cite, blockquote footer {
  display: block; margin-top: .4em; font: 500 var(--step--1)/1.3 var(--label);
  font-style: normal; letter-spacing: .09em; text-transform: uppercase; color: var(--ink);
}
code { font-size: 0.85em; background: var(--sun-wash); padding: 0.1em 0.3em; }
pre { overflow-x: auto; background: var(--sun-wash); padding: 1em; font-size: 0.85rem; }
pre code { background: none; padding: 0; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5em 0; }

/* Connectors (spec §7): `and` is a green hairline, `but` a red rule. */
.thru {
  display: flex; align-items: center; gap: .8rem; margin: 1.6em 0; color: var(--ink);
  font: 500 .8rem/1 var(--label); letter-spacing: .2em; text-transform: uppercase;
}
.thru::before, .thru::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.thru-but { color: var(--stamp-text); }
.thru-but::before, .thru-but::after { border-top: 1.5px solid var(--stamp); }

/* The ## Questions section: a sheet within the sheet. */
/* ## Questions: a plot of grained soil under a rolling surface. Each question is planted as a seed, with a
   root line up to the one above; the label is a marker stake on the surface. Note pages add sprouts above
   ground and a burrow on the right (scripts/notes/questions-art.mjs, placeholder art). */
.questions {
  --soil: var(--sun-wash);
  --tunnel: color-mix(in srgb, #000 30%, var(--soil));
  position: relative; margin: 5.5em 0 1em; padding: 1.4em 11.5rem 1.4em 1.4em; min-height: 11rem;
  background: url(/notes/grain.svg), linear-gradient(transparent 40%, color-mix(in srgb, #000 12%, transparent)), var(--soil);
}
.questions::before {
  content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 14px;
  background: url(/notes/grain.svg), var(--soil);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14V8C40 0 80 0 120 8S200 16 240 8V14Z'/%3E%3C/svg%3E") 0 0 / 240px 14px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14V8C40 0 80 0 120 8S200 16 240 8V14Z'/%3E%3C/svg%3E") 0 0 / 240px 14px repeat-x;
}
.questions h2 {
  position: absolute; z-index: 1; left: 1.2em; top: -1.5em; margin: 0; padding: .35em .7em .3em;
  background: var(--paper); border: 1.5px solid var(--line);
  font: 500 var(--step--1)/1.3 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
.seeds { list-style: none; padding: 0; margin: .6em 0 0; }
.seeds li { position: relative; padding-left: 2rem; margin: .7em 0; }
.seeds li .sprig { position: absolute; left: 0; top: .2em; }
/* Root lines run through the seed's centre: down from each seed to the next (the seed spans .63em–1.35em of
   its row, rows sit .7em apart), and up from the first seed to the stake, whose label covers the overshoot. */
.seeds li::before, .seeds li:first-child::after {
  content: ""; position: absolute; left: calc(.675em - .75px);
  border-left: 1.5px dashed color-mix(in srgb, var(--ink) 55%, transparent);
}
.seeds li::before { top: 1.35em; bottom: -1.33em; }
.seeds li:last-child::before { content: none; }
.seeds li:first-child::after { top: -2em; height: 2.63em; }
.plot-above { display: block; position: absolute; left: 0; right: 0; top: -2.9em; height: 2.4em; pointer-events: none; }
.plot-above .sprig { position: absolute; bottom: 0; width: 2.4em; height: 2.4em; }
.plot-above .sprig.small { width: 1.7em; height: 1.7em; }

/* The burrow: a tunnel from a spoil heap at the surface down to a chamber, and a rabbit asleep in it. */
.burrow { position: absolute; right: .2rem; top: -1.4rem; width: 11rem; height: 11rem; overflow: visible; pointer-events: none; }
.burrow .soil { fill: var(--soil); }
.burrow .tunnel { fill: none; stroke: var(--tunnel); stroke-width: 15; }
.burrow .chamber { fill: var(--tunnel); }
.burrow .fur { fill: var(--sun); transform: translate(1.4px, -1px); }
.burrow .line { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; mix-blend-mode: var(--blend); }
.burrow .nose { fill: var(--ink); }
.burrow .tail { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; }
.burrow .z { font: 600 12px var(--label); fill: var(--ink); letter-spacing: .05em; }
.burrow .z tspan { animation: doze 3.6s ease-in-out infinite; }
.burrow .z tspan:nth-child(2) { animation-delay: .5s; }
.burrow .z tspan:nth-child(3) { animation-delay: 1s; }
@keyframes doze { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.burrow .breath { transform-box: fill-box; transform-origin: 50% 100%; animation: breathe 3.6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scaleY(1.06); } }
@media (prefers-reduced-motion: reduce) { .burrow .z tspan, .burrow .breath { animation: none; } }
/* On a phone the text takes the full width and the rabbit sleeps in a chamber at the bottom, no shaft. */
@media (max-width: 34rem) {
  .questions { padding-right: 1.4em; padding-bottom: 7.5rem; }
  .burrow { top: auto; bottom: -1rem; width: 8.5rem; height: 8.5rem; }
  .burrow .shaft { display: none; }
  .plot-above { left: 20%; }
}

/* ## Paths from here: links onward to notes on the same themes, in the same DIN voice as Questions. */
h2[id$="paths-from-here"] {
  margin: 2em 0 .3em; padding-top: .6em; border-top: 1px solid var(--rule);
  font: 500 var(--step--1)/1.3 var(--label); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
.card-body h2[id$="paths-from-here"] { font-size: var(--step--1); margin-top: 1.2em; }
h2[id$="paths-from-here"] + ul { list-style: none; padding-left: 0; }
h2[id$="paths-from-here"] + ul li { padding-left: 1.3em; text-indent: -1.3em; }
h2[id$="paths-from-here"] + ul li::before { content: "→" / ""; display: inline-block; width: 1.3em; text-indent: 0; color: var(--ink); }

/* ---------- note sheet ---------- */
/* Page edges: one by default, plus one per stacked note, up to three (stack-ui sets data-edges). */
.sheet[data-edges="2"] {
  box-shadow: 7px 7px 0 -2px var(--paper), 7px 7px 0 0 var(--line), 14px 14px 0 -2px var(--paper), 14px 14px 0 0 var(--line);
  margin-right: 14px;
}
.sheet[data-edges="3"] {
  box-shadow: 7px 7px 0 -2px var(--paper), 7px 7px 0 0 var(--line), 14px 14px 0 -2px var(--paper), 14px 14px 0 0 var(--line),
    21px 21px 0 -2px var(--paper), 21px 21px 0 0 var(--line);
  margin-right: 21px;
}
main:has(> .note.sheet) { max-width: 72rem; }
.folio > * { min-width: 0; }

/* The stamp: inline above the title on narrow screens, a rotated stamp top-right on wide ones.
   A rubber stamp: a frame with a hairline inner rule, inked into the paper, speckled where the rubber missed. */
.accession {
  display: inline-grid; place-items: center; align-content: center; gap: .3rem;
  margin: 0 0 .75rem; padding: .6rem .8rem; min-height: 3.6rem;
  font: 400 1.5rem/1 var(--plate); letter-spacing: .06em; text-align: center;
  color: var(--stamp-ink, var(--stamp)); border: 2px solid var(--stamp-ink, var(--stamp)); border-radius: 3px;
  outline: 1px solid currentColor; outline-offset: -5px; mix-blend-mode: var(--blend);
  -webkit-mask: var(--speckle); mask: var(--speckle);
  --speckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -12 8.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E") 0 0 / 160px 160px;
}
.accession small { display: block; font-size: .7rem; letter-spacing: .14em; line-height: 1; padding-left: .14em; color: var(--stamp-ink, var(--stamp-text)); }

.note-head .label { margin: 0; }
.note-title { font-family: var(--display); font-style: italic; font-weight: 400; font-size: var(--step-3); line-height: 1.05; margin: .2rem 0 1.5rem; text-wrap: balance; }

/* The rail: a strip of facts above the body, sticky beside it on wide screens. */
.rail { border-top: 2px solid var(--line); padding-top: .6rem; margin-bottom: 1.5rem; }
.rail dl { margin: 0; display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.rail dt { font: 500 .7rem/1.3 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.rail dd { margin: .1rem 0 0; font: 500 1rem/1.3 var(--label); letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.rail dd.epi { font: italic 400 1.1rem/1.3 var(--body); letter-spacing: 0; }
.rail details { margin-top: .9rem; }
.rail summary { cursor: pointer; min-height: 24px; padding-block: .3rem; /* ≥ 24px touch target */ font-size: .7rem; letter-spacing: .12em; }
.rail details ol { padding-left: 1.1rem; margin: .4rem 0 0; font: 500 .85rem/1.4 var(--label); letter-spacing: .03em; font-variant-numeric: tabular-nums; }

/* Drop cap: real text on a grained Sunflower block. Never on a connector, never on a stacked body.
   A raised cap: it rises above the first line and sits on its baseline, so a one-line opener reads level with it.
   --cap-raise lifts the cap (in its own em); the paragraph's top margin makes room for it below the title. */
.folio > .note-body > p:first-child:not(.thru, .tk-lead),
.note[data-slug="tk"] .folio > .note-body > p.tk-lead { --cap-raise: .6em; margin-top: calc(1em + 3.6 * var(--cap-raise)); }
.folio > .note-body > p:first-child:not(.thru, .tk-lead)::first-letter {
  float: left; margin: calc(-1 * var(--cap-raise)) .14em 0 0; padding: .08em .14em 0;
  font-family: var(--display); font-style: normal; font-weight: 400; font-size: 3.6em; line-height: .95;
  color: var(--on-sun); background: url(/notes/grain.svg), var(--sun);
  box-shadow: 5px 5px 0 -2px var(--paper), 5px 5px 0 0 var(--line);
}
/* A short first paragraph must not let the next block's ground run under the cap. */
.folio > .note-body > p:first-child:not(.thru, .tk-lead) + * { clear: left; }
/* One-off: the TK note opens on a two-letter TK drop cap. Elsewhere an opening TK skips the cap. */
.note[data-slug="tk"] .folio > .note-body > p.tk-lead > .tk:first-child {
  float: left; margin: calc(-1 * var(--cap-raise)) .14em 0 0; padding: .08em .14em 0; border-radius: 0;
  font-family: var(--display); font-style: normal; font-weight: 400; font-size: 3.6em; line-height: .95; letter-spacing: -.02em;
  color: var(--on-sun); background: url(/notes/grain.svg), var(--sun);
  box-shadow: 5px 5px 0 -2px var(--paper), 5px 5px 0 0 var(--line);
}
.note[data-slug="tk"] .folio > .note-body > p.tk-lead + * { clear: left; }

/* TK ("to come"): a Sunflower-filled mark that links to the note defining it. Sun is a fill, never text. */
:is(.note-body, .card-body, .page-body) .tk {
  font-family: var(--label); font-weight: 500; font-size: .82em; letter-spacing: .08em;
  padding: .05em .3em; border-radius: 2px;
  color: var(--on-sun); background: var(--sun); text-decoration: none;
}
:is(.note-body, .card-body, .page-body) a.tk:hover { text-decoration: underline; text-decoration-thickness: 1px; }

/* Sidenotes: inline with a red rule on narrow screens, in the third column on wide ones. */
.sidenote { display: block; margin: -.4rem 0 1.2rem; padding-left: .8rem; border-left: 2px solid var(--stamp); font-size: 1rem; line-height: 1.4; }
.sidenote > p { margin: 0; }
.sidenote > .sn-num + p { display: inline; }
.sn-num, .sn-ref { font-family: var(--label); font-weight: 500; color: var(--stamp-text); font-variant-numeric: tabular-nums; }
.sn-num { font-size: .8rem; }
.sn-ref { font-size: .7rem; line-height: 0; vertical-align: super; margin-left: .1em; }
.sn-ref a { color: inherit; text-decoration: none; }
.sn-ref a:hover { text-decoration: underline; }

/* Below the stacking panel: tags as DIN chips, then "Linked from". */
.note-tags { margin-top: 2.5em; display: flex; flex-wrap: wrap; gap: .6rem; }
.note-tags .tag { font: 500 var(--step--1)/1 var(--label); letter-spacing: .09em; text-transform: uppercase; }
.backlinks { margin-top: 2em; border-top: 3px solid var(--line); padding-top: .75rem; }
.backlinks h2 { margin: 0 0 .5rem; font: 500 var(--step--1)/1.3 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.backlinks ul { list-style: none; margin: 0; padding: 0; }
.backlinks li { border-bottom: 1px solid var(--rule); padding: .35rem 0; }

@media (min-width: 60rem) {
  .folio { display: grid; grid-template-columns: 11rem minmax(0, var(--measure)); gap: 0 2.5rem; }
  .note-head { grid-column: 2; grid-row: 1; }
  .note-body { grid-column: 2; grid-row: 2; }
  .rail { grid-column: 1; grid-row: 1 / span 2; align-self: start; position: sticky; top: 1rem; margin-bottom: 0; }
  .rail dl { grid-template-columns: none; }
  .accession { position: absolute; top: 1.2rem; right: 1.4rem; transform: rotate(-5deg); margin: 0; }
}
@media (min-width: 75rem) {
  .folio { grid-template-columns: 11rem minmax(0, var(--measure)) minmax(0, 15rem); }
  /* Only the main note: stacked bodies (#stack .note-body) keep the inline style at every width. */
  .folio > .note-body aside.sidenote {
    float: right; clear: right; width: 15rem; margin: 0 calc(-15rem - 2.5rem) 1rem 0;
    padding: .4rem 0 0; border-left: 0; border-top: 1px solid var(--rule);
  }
}

/* Lists: random page */
.list-header { margin-bottom: 1.5rem; }

/* ---------- INDEX ---------- */
.index-wrap { margin: 0 auto; }
.index-wrap:has(+ .cards-wrap[hidden]) { margin-bottom: 5rem; }
.arch {
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 23rem 23rem 0 0 / 10rem 10rem 0 0;
  overflow: hidden;
  box-shadow: 8px 8px 0 var(--line);
  container-type: inline-size;
}
/* The hillside's height follows its own width, from a phone's 7rem to 16rem; stack/hills.mjs redraws the hills to fit. */
.arch-art {
  display: block; width: 100%; height: clamp(7rem, 33cqi, 16rem);
  border-bottom: 2px solid var(--line); background: var(--paper);
}
.arch-body { padding: 1rem clamp(1rem, 4vw, 2.5rem) 2rem; }
.index-head { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; margin-bottom: .9rem; }
.index-head .label { flex: 1 0 100%; }
.index-title { font-family: var(--display); font-style: italic; font-weight: 400; font-size: var(--step-3); line-height: 1; margin: 0; text-wrap: balance; }
.lede { margin: 0; max-width: 40ch; flex: 1 1 18rem; font-size: 1.1rem; line-height: 1.4; color: var(--ink-soft); }

/* Stage filters: the stage words in the lede, each a toggle. Inert words until index.js wakes them. */
.stage-words { display: inline-block; }
.stage-word {
  font: inherit; color: var(--fg); background: none; border: 0; padding: 0 .1em; margin: 0 -.08em 0 0; cursor: pointer;
  white-space: nowrap; text-decoration: underline dotted 1.5px var(--line); text-underline-offset: .22em;
}
.stage-word .sprig { width: 1em; height: 1em; margin-right: .15em; vertical-align: -.1em; }
.stage-word:hover { text-decoration-style: solid; text-decoration-color: var(--ink); }
.stage-word[aria-pressed="true"] { background: var(--sun-wash); text-decoration: underline solid 2px var(--ink); }
.stage-word:disabled { cursor: default; text-decoration: none; }

/* Sort, view and contents: one quiet line of text toggles. */
.controls {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.6rem;
  border-top: 2px solid var(--line); padding-top: .45rem;
}
.control-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .1rem; }
.control-group .label { margin-right: .4rem; }
.toggle {
  font: 400 .95rem/1 var(--ui); color: var(--ink-soft); background: none; border: 0; padding: .45rem .3rem; cursor: pointer;
  text-underline-offset: .3em;
}
/* inline-block keeps the pressed toggle's underline off its separator dot */
.toggle + .toggle::before { content: "·"; display: inline-block; color: var(--rule); margin: 0 .45rem 0 -.3rem; }
.toggle:hover { color: var(--fg); }
.toggle[aria-pressed="true"] { color: var(--fg); text-decoration: underline 2px var(--sun); }
.contents-toggle { margin-left: auto; display: inline-flex; gap: .4rem; background: none; border: 0; padding: .45rem 0; cursor: pointer; }
.contents-toggle:hover { text-decoration: underline; }
.contents-toggle[hidden] { display: none; }
.contents-arrow { transition: transform .15s; }
.contents-toggle[aria-expanded="true"] .contents-arrow { transform: rotate(180deg); }

.toc { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--line); }
.toc li { border-bottom: 1px solid var(--rule); }
.toc a.row {
  display: grid; grid-template-columns: 3.9rem minmax(0, auto) 1fr auto; align-items: baseline; gap: .6rem;
  padding: .6rem .25rem; text-decoration: none; color: var(--fg);
}
.toc a.row:hover { background: var(--sun-wash); }
.toc a.row:hover .no { color: var(--stamp-text); }
.no { font-family: var(--plate); font-size: 1.05rem; color: var(--stamp-ink, var(--stamp-text)); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.toc-title { font-size: 1.3rem; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.leader { border-bottom: 2px dotted var(--ink); transform: translateY(-.3em); min-width: 1rem; }
.toc-stage { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.toc-stage .label { color: var(--fg); }
.toc-meta { grid-column: 2 / -1; display: flex; gap: 1rem; margin-top: -.15rem; }
.toc-row[hidden] { display: none; }
.empty { color: var(--ink-soft); }
.controls[hidden] { display: none; }
.toc[hidden] { display: none; }
.controls ~ .toc { margin-top: .9rem; }

/* Contents: the arrangement of the cards below, by stage. */
.contents { border-top: 2px solid var(--line); padding-top: .6rem; }
.contents[hidden], .contents-group[hidden] { display: none; }
/* With index.js the heading moves into the controls line as the Contents toggle. */
.contents.is-enhanced { border-top: 0; padding-top: 0; }
.contents.is-enhanced .contents-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.contents.is-enhanced .contents-groups { margin-top: .8rem; }
.contents-groups[hidden] { display: none; }
.contents-title { margin: 0 0 .6rem; }
.contents-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: .9rem 1.6rem; }
.contents-group h3 {
  display: flex; align-items: center; gap: .35rem; margin: 0 0 .25rem; padding-bottom: .25rem; border-bottom: 1.5px solid var(--line);
  font: 500 var(--step--1)/1.3 var(--label); letter-spacing: .09em; text-transform: uppercase; font-style: normal; color: var(--fg);
}
.contents-group .count { margin-left: auto; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.contents-group ol { list-style: none; margin: 0; padding: 0; font-size: 1.05rem; line-height: 1.3; }
.contents-group li { border-bottom: 1px solid var(--rule); }
.contents-group li a { display: block; padding: .3rem .15rem; color: var(--fg); text-decoration: none; }
.contents-group li a:hover { background: var(--sun-wash); }

/* ---------- CARDS ---------- */
main:has(> .cards-wrap) { max-width: 72rem; }
/* One spacing unit: the visible gap between cards; the grid sits two units below the arch. */
.cards-wrap {
  --card-gap: 1rem; --edge: 5px; margin-top: calc(var(--card-gap) * 2);
  /* A card is one thin outline and a flat, unoutlined offset: a sheet on the bench without a second set of lines. */
  --card-line: color-mix(in srgb, var(--line) 70%, var(--paper)); --card-edge: color-mix(in srgb, var(--line) 28%, var(--bench));
}
.cards-wrap[hidden] { display: none; }

.cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
  gap: var(--card-gap); grid-auto-flow: dense; align-items: start;
}
/* Packed by index.js (4px rows) where native masonry isn't available. */
/* The gap is measured from the page edge, so every card sits the same distance from its neighbours. */
.cards.is-packed { grid-auto-rows: 1px; row-gap: 0; margin-bottom: calc(var(--card-gap) * -1); }
.cards.is-packed > .card > .card-sheet { margin-bottom: calc(var(--edge) + var(--card-gap)); }
@supports (grid-template-rows: masonry) { .cards { grid-template-rows: masonry; } }

.card { min-width: 0; scroll-margin-top: 1rem; }
.card[hidden] { display: none; }
.card-sheet {
  display: flex; flex-direction: column; gap: .5rem;
  background: var(--paper); border: 1.5px solid var(--card-line);
  box-shadow: var(--edge) var(--edge) 0 var(--card-edge);
  margin: 0 var(--edge) var(--edge) 0; padding: .9rem 1.1rem 1rem;
}
.card:hover .card-sheet, .card:focus-within .card-sheet { border-color: var(--ink); }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.card-head .toc-stage { margin-left: auto; }
.card-title { margin: 0; font-size: var(--step-1); line-height: 1.12; text-wrap: balance; }
.card-title a { color: var(--fg); text-decoration: none; }
.card-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
[data-age="year"] .card-title a, [data-age="dormant"] .card-title a { color: var(--ink-soft); }

/* The opening lines: clipped and faded until the card is opened. */
.card-body {
  font-size: 1.05rem; line-height: 1.45; overflow: hidden; overflow-wrap: break-word;
  max-height: var(--preview, 13.5rem); /* index.js sets --preview to a share of the note's full height */
  -webkit-mask-image: linear-gradient(#000 calc(100% - 3.5rem), transparent); mask-image: linear-gradient(#000 calc(100% - 3.5rem), transparent);
}
.card[data-fits] .card-body { -webkit-mask-image: none; mask-image: none; }
.card-body > :first-child { margin-top: 0; }
.card-body > :last-child { margin-bottom: 0; }
.card-body p { margin: 0 0 .6em; }
.card-body :is(h1, h2, h3, h4) { font-size: 1.15rem; margin: 1em 0 .3em; }
.card-body blockquote { font-size: 1.05rem; line-height: 1.38; padding: 0 0 0 .8em; margin: .7em 0; }
.card-body ul, .card-body ol { padding-left: 1.2rem; margin: 0 0 .6em; }
.card-body .thru { margin: .8em 0; }
.card-body .questions { margin: 2.6em 0 .4em; padding: 1.1em .9em .5em; min-height: 0; }
.card-body .questions h2 { font-size: var(--step--1); }
.card-body .seeds li { padding-left: 1.7rem; }
.card-body .sidenote { margin: .2rem 0 .8rem; font-size: .92rem; }

/* An open card grows in its own column: spanning the row would leave holes beside it. */
.card.is-open .card-sheet { border-color: var(--ink); }
.card.is-open .card-body { max-height: none; -webkit-mask-image: none; mask-image: none; }

/* A card or stacked note reached by a link flashes Sunflower, then fades back to its usual border. */
.card.is-landed .card-sheet, .stacked-note.is-landed { animation: landed 1.6s ease-out; }
@keyframes landed { 0%, 25% { border-color: var(--sun); } }

.card-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem;
  margin-top: .2rem; padding-top: .5rem; border-top: 1px solid var(--rule);
}
.card-tags { display: flex; flex-wrap: wrap; gap: .2rem .6rem; }
.card-tags a { text-decoration: none; }
.card-tags a:hover { text-decoration: underline; }
/* Actions read like the header's Contents toggle: DIN small caps in ink, an arrow for what they do. */
.card-foot > .label:first-child { color: var(--ink-soft); }
.card-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 1.2rem; }
.card-toggle { background: none; border: 0; padding: .5rem 0; line-height: inherit; cursor: pointer; }
.card-toggle::after { content: "↓" / ""; display: inline-block; margin-left: .4rem; transition: transform .15s; }
.card-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.card-toggle:hover { text-decoration: underline; }
.card-toggle[hidden] { display: none; }

/* Paging: the next page of cards, on request. */
.more { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-top: calc(var(--card-gap) * 2); }
.more[hidden] { display: none; }
.more .label { margin: 0; color: var(--ink-soft); }
/* the fingerpost: a post planted at the "you are here" pin, so the sign walks down the trail as you page.
   Each board is an SVG shape behind its text: Sunflower prints a little off register, Hunter draws the edge. */
.fingerpost { --trail-end: 1.4rem; --x: calc((100% - var(--trail-end)) * var(--walked, 0)); position: relative; width: min(22rem, 100%); height: 8.6rem; }
.fingerpost .post { position: absolute; left: calc(var(--x) - 2px); top: .6rem; bottom: .8rem; width: 4px; background: var(--ink); transition: left .4s ease; }
.board {
  position: absolute; z-index: 1; isolation: isolate; margin: 0; display: flex; align-items: center; height: 3rem; padding: 0; border: 0; background: none;
  color: var(--fg); font: 400 1.1rem/1 var(--ui); white-space: nowrap; transition: left .4s ease, transform .3s cubic-bezier(.3,1.6,.5,1);
}
.board > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: -1; }
.board .ply { fill: var(--sun); transform: translate(4px, 3px); transition: transform .22s cubic-bezier(.3,1.6,.5,1); }
.board .face { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
/* the button points on to the bloom and swings on its nail when you reach for it */
.more-btn {
  --board: 10.5rem; --left: clamp(0px, var(--x) - 1rem, 100% - var(--board));
  top: 0; left: var(--left); width: var(--board); padding: 0 2.4rem 0 1.2rem; cursor: pointer; transform-origin: calc(var(--x) - var(--left)) 1.5rem;
  font: 600 1.1rem/1 var(--label); letter-spacing: .09em; text-transform: uppercase;  /* lettered like the labels, a weight up from the back board */
}
.more-btn:is(:hover, :focus-visible) { transform: rotate(-4deg); }
.more-btn:is(:hover, :focus-visible) .face { fill: var(--sun-wash); }
.more-btn:is(:hover, :focus-visible) .ply { transform: translate(0, 0); }
/* the back board points along the walked ink and carries the count */
.board.back { top: 3.5rem; left: clamp(0px, var(--x) + 1rem - 9.5rem, 100% - 9.5rem); width: 9.5rem; height: 2.3rem; padding: 0 1rem 0 1.9rem; font: 500 var(--step--1)/1 var(--label); }
.board.back .ply { transform: translate(3px, 2px); opacity: .55; }
/* trail map: walked ink to the "you are here" pin, dashed footpath ahead, a bloom at the end */
.trail { position: absolute; left: 0; bottom: 0; width: 100%; height: 1.6rem; }
.trail::before, .trail-walked { content: ''; position: absolute; left: 0; top: 50%; height: 0; }
.trail::before { right: var(--trail-end); border-top: 2px dashed var(--line); }
.trail-walked { width: var(--x); border-top: 2px solid var(--ink); transition: width .4s ease; }
.trail-here {
  position: absolute; top: 50%; left: var(--x); transform: translate(-50%, -50%);
  width: .8rem; height: .8rem; border-radius: 50%; background: var(--stamp); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--stamp);
  transition: left .4s ease;
}
.trail .sprig { position: absolute; right: 0; top: 50%; transform: translateY(-60%); width: var(--trail-end); height: var(--trail-end); }
.more-btn:is(:hover, :focus-visible) ~ .trail .trail-here { animation: hop .5s ease; }
@keyframes hop { 40% { transform: translate(-50%, -95%); } }
@media (prefers-reduced-motion: reduce) {
  .fingerpost .post, .board, .board .ply, .trail-walked, .trail-here { transition: none; }
  .more-btn:is(:hover, :focus-visible) ~ .trail .trail-here { animation: none; }
}
.card-open { display: inline-block; text-decoration: none; white-space: nowrap; padding: .5rem 0; }
.card-open:hover { text-decoration: underline; }

/* Plain sheet for the tag pages (the note page extends this) */
.sheet {
  position: relative; background: var(--paper); border: 2px solid var(--line);
  padding: clamp(1.25rem, 4vw, 3rem) clamp(1rem, 4vw, 3rem) 3rem;
  box-shadow: 7px 7px 0 -2px var(--paper), 7px 7px 0 0 var(--line);
  margin: 0 7px 2rem 0;
}
.sheet .index-title { margin-bottom: 1.25rem; }
/* the tags page: a bed of seed packets, each pushed onto a stake. Packets lean a little and stand up straight when you reach for them.
   Each li's soil strip joins its neighbours' into one row of bed. */
.packet-bed { --gap: 1.4rem; list-style: none; padding: 0; margin: 2rem calc(var(--gap) / 2) 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2.4rem var(--gap); }
.packet-bed li { position: relative; padding-bottom: .3rem; }
.packet-bed li::after {
  content: ''; position: absolute; z-index: 1; left: calc(var(--gap) / -2); right: calc(var(--gap) / -2); bottom: 0; height: .9rem;
  border-top: 2px solid var(--ink);
  background: var(--paper) radial-gradient(circle, var(--line) 1px, transparent 1.4px) 0 .2rem / .55rem .45rem;
}
.packet-marker {
  --lean: -2deg; display: block; color: var(--fg); text-decoration: none;
  transform: rotate(var(--lean)); transform-origin: 50% 100%; transition: transform .3s cubic-bezier(.3,1.6,.5,1);
}
.packet-bed li:nth-child(3n+2) .packet-marker { --lean: 2.5deg; }
.packet-bed li:nth-child(4n+3) .packet-marker { --lean: -3.5deg; }
.packet-bed li:nth-child(5n+4) .packet-marker { --lean: 1.5deg; }
/* the crimp is a clip-path, which clips the face's own border, so the outline and the off-register Sunflower are drop-shadows on the wrapper */
.packet, .packet-back { display: block; filter: drop-shadow(1.5px 0 0 var(--line)) drop-shadow(-1.5px 0 0 var(--line)) drop-shadow(0 1.5px 0 var(--line)) drop-shadow(0 -1.5px 0 var(--line)) drop-shadow(3px 2px 0 var(--sun)); }
.packet-face {
  display: grid; justify-items: center; gap: .35rem; width: 7rem; padding: .9rem .5rem .6rem; background: var(--paper); text-align: center;
  clip-path: polygon(0% 6px, 6.25% 0, 12.5% 6px, 18.75% 0, 25% 6px, 31.25% 0, 37.5% 6px, 43.75% 0, 50% 6px, 56.25% 0, 62.5% 6px, 68.75% 0, 75% 6px, 81.25% 0, 87.5% 6px, 93.75% 0, 100% 6px, 100% 100%, 0 100%);
}
.packet-art { display: grid; place-items: center; width: 100%; height: 2.6rem; background: var(--sun-wash); }
.packet-art .sprig { width: 2rem; height: 2rem; }
.packet-name { font: 600 var(--step--1)/1.15 var(--label); letter-spacing: .06em; text-transform: uppercase; }
.packet-count { font: 500 .68rem/1 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.packet-stake { display: block; width: 5px; height: 2.2rem; margin: -2px auto 0; background: var(--ink); }
a.packet-marker:is(:hover, :focus-visible) { --lean: 0deg; transform: rotate(0) translateY(-.35rem); }
a.packet-marker:is(:hover, :focus-visible) .packet-face { background: var(--sun-wash); }
a.packet-marker:is(:hover, :focus-visible) .packet-art { background: var(--paper); }
@media (prefers-reduced-motion: reduce) { .packet-marker { transition: none; } }

/* a tag page: its packet staked by the name, and the notes printed on the packet's back like a growing chart */
.packet-head { display: flex; align-items: flex-end; gap: 1.4rem; margin-bottom: 1.5rem; }
.packet-head .index-title { margin: 0 0 1.4rem; }
.packet-head .packet-face { width: 5.6rem; padding: .8rem .4rem .5rem; }
.packet-head .packet-art { height: 2.2rem; }
.packet-head .packet-stake { height: 1.4rem; }
.packet-back-face { background: var(--paper); padding: 1.6rem clamp(.75rem, 3vw, 1.6rem) 1.1rem; clip-path: polygon(0% 7px, 3.125% 0, 6.25% 7px, 9.375% 0, 12.5% 7px, 15.625% 0, 18.75% 7px, 21.875% 0, 25% 7px, 28.125% 0, 31.25% 7px, 34.375% 0, 37.5% 7px, 40.625% 0, 43.75% 7px, 46.875% 0, 50% 7px, 53.125% 0, 56.25% 7px, 59.375% 0, 62.5% 7px, 65.625% 0, 68.75% 7px, 71.875% 0, 75% 7px, 78.125% 0, 81.25% 7px, 84.375% 0, 87.5% 7px, 90.625% 0, 93.75% 7px, 96.875% 0, 100% 7px, 100% 100%, 0 100%); }
.contents-band { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .4rem; padding: .5rem .8rem; background: var(--sun-wash); color: var(--fg); }
.packet-contents { list-style: none; margin: 0; padding: 0; }
.contents-row a {
  display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; gap: .2rem .9rem; align-items: center; padding: .65rem .8rem;
  border-bottom: 1px dashed var(--rule); color: var(--fg); text-decoration: none;
}
.contents-row a:hover { background: var(--sun-wash); }
.contents-row .no { font: 400 1rem/1 var(--plate); color: var(--stamp-text); }
.contents-title { font-size: 1.25rem; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
.contents-row .toc-stage .label { color: var(--ink-soft); }
.packet-tally { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border: 1.5px solid var(--line); }
.tally-stage { display: grid; justify-items: center; gap: .2rem; padding: .6rem .3rem; text-align: center; }
.tally-stage + .tally-stage { border-left: 1.5px solid var(--line); }
.tally-count { font: 400 1.4rem/1 var(--plate); color: var(--stamp-text); }
.tally-stage .label { color: var(--ink-soft); }
@media (max-width: 30rem) {
  .contents-row a { grid-template-columns: 3.4rem minmax(0, 1fr); padding-inline: .4rem; }
  .contents-row .toc-stage { grid-column: 2; }
}

.note-tags .tag {
  display: inline-flex; align-items: center; gap: .5em; min-height: 2rem; padding: .3em .7em;
  border: 1.5px solid var(--line); text-decoration: none; color: var(--fg);
}
.note-tags .tag:hover { background: var(--sun-wash); }

@media (max-width: 30rem) {
  .toc a.row { grid-template-columns: 3.5rem minmax(0, 1fr) auto; }
  .leader { display: none; }
  .toc-meta { grid-column: 2 / -1; }
  blockquote { font-size: 1.2rem; padding-left: .9em; }
}

/* ---------- NEIGHBORS: the plat map ---------- */
/* The Neighbors page's list, drawn as lots on a surveyor's plat (scripts/notes/plat.mjs writes the markup).
   Everything decorative is aria-hidden or alt-less generated content; a screen reader gets a plain list. */
main:has(> .plat) { max-width: 72rem; }
.plat .page-body > p { max-width: var(--measure); }
.plat .page-body > p:has(> em:only-child) { color: var(--ink-soft); }
.plat {
  /* Property lines are a dash-dot, drawn as gradients since borders can't dash-dot. */
  --pl: 2px;
  --dashdot: transparent 0 3px, var(--line) 3px 17px, transparent 17px 21px, var(--line) 21px 24px, transparent 24px 27px;
  --h-line: repeating-linear-gradient(90deg, var(--dashdot)) 0 100% / 100% var(--pl) no-repeat;
  --v-line: repeating-linear-gradient(180deg, var(--dashdot)) 100% 0 / var(--pl) 100% no-repeat;
}

.map-key { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; margin: 2rem 0 1rem; color: var(--ink-soft); }
.map-key .here { display: inline-flex; align-items: center; gap: .45rem; color: var(--fg); }
.hatch-swatch { display: inline-block; width: 1.1rem; height: .9rem; border: 1.5px solid var(--line);
  background: repeating-linear-gradient(-45deg, var(--line) 0 1.5px, transparent 1.5px 5px); }
.map-key .north { display: inline-flex; align-items: center; gap: .3rem; }
.map-key .north svg { width: 1rem; height: 1.3rem; color: var(--ink); }
.map-key .scale { display: inline-flex; align-items: center; gap: .5rem; }
.scale-bar { display: inline-block; width: 4.5rem; height: .45rem; border: 1.5px solid var(--ink);
  background: linear-gradient(90deg, var(--ink) 0 25%, transparent 25% 50%, var(--ink) 50% 75%, transparent 75%); }

.plots {
  list-style: none; position: relative; margin: 2.2rem 0 0; padding: var(--pl) 0 0 var(--pl);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  background: repeating-linear-gradient(90deg, var(--dashdot)) 0 0 / 100% var(--pl) no-repeat,
              repeating-linear-gradient(180deg, var(--dashdot)) 0 0 / var(--pl) 100% no-repeat;
}
/* The street the block fronts on, lettered along its top edge. */
.plots::before {
  content: "Ohlin Lane" / ""; position: absolute; top: -1.45rem; left: 50%; transform: translateX(-50%);
  font: 500 .72rem var(--label); letter-spacing: .32em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap;
}
.plot { position: relative; min-width: 0; overflow-wrap: break-word; padding: 1.7rem 1.2rem 1.3rem; background: var(--h-line), var(--v-line); }
.plot:focus-within { background: var(--h-line), var(--v-line), var(--sun-wash); }
@media (hover: hover) { .plot:hover { background: var(--h-line), var(--v-line), var(--sun-wash); } }
/* Bearing and distance along each lot's front line; the empty alt keeps it out of screen readers. */
.plot::before {
  content: attr(data-b) / ""; position: absolute; top: .45rem; left: 1.2rem;
  font: 500 .62rem var(--label); letter-spacing: .12em; font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--ink-soft) 55%, var(--paper));
}
/* A survey monument where lots meet. */
.plot::after {
  content: ""; position: absolute; right: -4px; bottom: -4px; z-index: 1;
  width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink);
}
.plot h2 { margin: 0; padding-right: 2.8rem; font-size: var(--step-1); line-height: 1.12; }
.plot h2 a { color: var(--fg); text-decoration: none; }
.plot h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.plot .address { margin: .15rem 0 .7rem; }
.plot p { margin: 0 0 .5rem; font-size: 1.1rem; line-height: 1.45; }
.plot .elsewhere { color: var(--ink-soft); }
/* The owner's initials, circled, as plats circle a lot number. */
.plot .lot {
  position: absolute; top: 1.5rem; right: 1rem; display: grid; place-items: center;
  width: 2.3rem; height: 2.3rem; border: 1.5px solid var(--ink); border-radius: 50%;
  font: 400 .85rem/1 var(--plate); letter-spacing: .04em; padding-left: .04em; color: var(--ink);
}
.plot .sprig { position: absolute; bottom: .9rem; right: 1rem; width: 1.3rem; height: 1.3rem; color: var(--ink); opacity: .7; }

/* This garden: hatched, at the end of the block. */
.plot.home {
  order: 99; display: grid; align-content: center; justify-items: center; gap: .2rem; min-height: 9rem;
  background: var(--h-line), var(--v-line), repeating-linear-gradient(-45deg, color-mix(in srgb, var(--line) 45%, transparent) 0 1.5px, transparent 1.5px 9px);
}
.plot.home::before { content: none; }
.home-label { color: var(--stamp-text); }
.home-name { font-family: var(--display); font-style: italic; font-size: var(--step-1); color: var(--fg); background: var(--paper); padding: 0 .4rem; }

/* Wide screens: the 1st and 6th lots front two lots wide, and Garden Row cuts the block in two.
   The row is the list's own ::after, so it's a grid item but never a list item. */
@media (min-width: 64rem) {
  .plots { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto 3.2rem; grid-auto-flow: row dense; }
  .plot:nth-child(1), .plot:nth-child(6) { grid-column: span 2; }
  .plots::after {
    content: "Garden Row" / ""; grid-row: 3; grid-column: 1 / -1; margin: 0 calc(var(--pl) * -1);
    display: grid; justify-items: center; align-items: start; padding-top: .45rem;
    /* the far curb's property line, a dashed centre line, the road */
    background: repeating-linear-gradient(90deg, var(--dashdot)) 0 100% / 100% var(--pl) no-repeat,
                linear-gradient(90deg, var(--line) 50%, transparent 0) 0 72% / 18px 2px repeat-x,
                var(--bench);
    font: 500 .72rem var(--label); letter-spacing: .32em; text-transform: uppercase; color: var(--ink-soft);
  }
}

/* The title block, bottom right, as on a surveyor's sheet. */
.title-block {
  display: grid; gap: .15rem; width: max-content; max-width: 100%; margin: 1.6rem 0 0 auto; padding: .6rem .9rem;
  border: 1.5px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 3px; color: var(--ink-soft); line-height: 1.35;
}
.title-block strong { color: var(--fg); font-weight: 600; letter-spacing: .14em; }

/* ---------- TOOL SHED: the pegboard and the loan cases ---------- */
/* The Tool shed page's Made here list, hung as tools on a pegboard, and its Borrowed list, as loan cases on
   shelves (scripts/notes/shed.mjs writes the markup; the tools are placeholder art). The drawing is aria-hidden;
   a screen reader gets two lists of headed tools. */
main:has(> .shed) { max-width: 72rem; }
.shed .page-body > :is(p, h2) { max-width: var(--measure); }

.pegboard {
  --hole: color-mix(in srgb, var(--ink) 30%, transparent);
  list-style: none; margin: 1.4rem 0 2.6rem; padding: 1.4rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1.4rem;
  border: 1.5px solid var(--line);
  background: radial-gradient(circle, var(--hole) 0 2px, transparent 2.5px) 0 0 / 1.4rem 1.4rem, url(/notes/grain.svg), var(--sun-wash);
}
.tool { position: relative; min-width: 0; display: grid; justify-items: center; padding-top: .9rem; }
/* The peg each tool hangs from. */
.tool::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 1.1rem; height: .9rem; transform: translateX(-50%);
  border: 2px solid var(--ink); border-top: 0; border-radius: 0 0 .6rem .6rem;
}
.peg-tool { width: 2.6rem; height: 6rem; transform-origin: 50% 0; transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.peg-tool .y { fill: currentColor; stroke: currentColor; stroke-width: 3; stroke-linejoin: round; }
.peg-tool .g { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
@media (hover: hover) { .tool:hover .peg-tool { transform: rotate(4deg); } }
.tool:focus-within .peg-tool { transform: rotate(4deg); }
@media (prefers-reduced-motion: reduce) {
  .peg-tool { transition: none; }
  .tool:hover .peg-tool, .tool:focus-within .peg-tool { transform: none; }
}
/* A paper tag tied below the tool, with a punched hole. */
.tool .hang-tag {
  position: relative; width: 100%; margin-top: .5rem; padding: 1.3rem 1rem .9rem; overflow-wrap: break-word;
  background: var(--paper); border: 1.5px solid var(--line); box-shadow: 3px 3px 0 var(--sun);
}
.tool .hang-tag::before {
  content: ""; position: absolute; top: .45rem; left: 50%; width: .5rem; height: .5rem; transform: translateX(-50%);
  border-radius: 50%; border: 1.5px solid var(--line); background: var(--sun-wash);
}
/* A sprout from the garden's sprigs, tucked in the tag's corner. */
.tool .hang-tag .sprig { position: absolute; top: .3rem; right: .45rem; width: 1.2rem; height: 1.2rem; }
.tool h3 { margin: 0 0 .35rem; font-size: var(--step-1); line-height: 1.12; }
.tool p { margin: 0 0 .45rem; font-size: 1.05rem; line-height: 1.45; }
.tool .needs { font: 500 .8rem/1.4 var(--label); letter-spacing: .06em; color: var(--ink-soft); }
.tool .needs code { font-size: .95em; }
.tool .take-line { margin: .7rem 0 0; }
.tool .take {
  display: inline-block; padding: .3em .7em; font: 500 .8rem/1.2 var(--label); letter-spacing: .14em; text-transform: uppercase;
  color: var(--paper); background: var(--ink); text-decoration: none;
}
.tool .take:hover { filter: brightness(1.15); }

/* Borrowed: each tool still in the carry case it was lent in, a luggage tag tied to the handle saying who
   lent it, the cases standing on plank shelves on cut-wood brackets: three to a board, two on a tablet, and
   a short board each on a phone. Cases rock on their bottom edge when you reach for them; the shelf holds still.
   Colour is set as tokens here so dark mode gets its own palette, not this one inverted. In the light the
   cases are pastel washes of the three inks under a Hunter outline, on pale pine. At night they're the same
   inks at dusk, matched in lightness so no one case shouts, each outlined in a lifted tint of its own ink
   rather than cream; the tags are dark kraft, the twine and screws brass, the wood walnut, and the shadows
   fall darker instead of lighter. */
.cases {
  --sage: color-mix(in srgb, var(--ink) 30%, var(--paper)); --sage-edge: var(--fg);
  --butter: var(--sun-wash); --butter-edge: var(--fg);
  --blush: color-mix(in srgb, var(--stamp) 22%, var(--paper)); --blush-edge: var(--fg);
  --ledge: color-mix(in srgb, var(--fg) 85%, transparent);
  --tag: color-mix(in srgb, var(--sun) 18%, var(--paper)); --tag-edge: color-mix(in srgb, var(--fg) 35%, transparent); --lender: var(--ink-soft);
  --twine: var(--fg); --disk: var(--paper);
  --wood: color-mix(in srgb, var(--umber) 28%, var(--sun-wash)); --wood-top: color-mix(in srgb, var(--umber) 10%, var(--sun-wash));
  --wood-grain: color-mix(in srgb, var(--fg) 16%, transparent); --wood-edge: var(--fg); --wood-shadow: color-mix(in srgb, var(--fg) 22%, transparent);
  --screw: var(--paper); --nail: var(--fg); --wood-plate: .55;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cases {
    --sage: #2E4A3E; --sage-edge: #5E8C78; --butter: #4A3E1C; --butter-edge: #9A8240; --blush: #56303A; --blush-edge: #A0626E;
    --ledge: #0B100D; --tag: #2A2A21; --tag-edge: #6B6650; --lender: #B4AE92; --twine: #C9A766; --disk: #121A16;
    --wood: #4A3824; --wood-top: #6A5235; --wood-grain: #2A1F1499; --wood-edge: #8A6E45; --wood-shadow: #00000080;
    --screw: #9C8455; --nail: #9C8455; --wood-plate: .18;
  }
}
:root[data-theme="dark"] .cases {
  --sage: #2E4A3E; --sage-edge: #5E8C78; --butter: #4A3E1C; --butter-edge: #9A8240; --blush: #56303A; --blush-edge: #A0626E;
  --ledge: #0B100D; --tag: #2A2A21; --tag-edge: #6B6650; --lender: #B4AE92; --twine: #C9A766; --disk: #121A16;
  --wood: #4A3824; --wood-top: #6A5235; --wood-grain: #2A1F1499; --wood-edge: #8A6E45; --wood-shadow: #00000080;
  --screw: #9C8455; --nail: #9C8455; --wood-plate: .18;
}

.cases { list-style: none; margin: 1.8rem 0 5rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5.2rem 0; align-items: end; }
.loan { --case: var(--sage); --edge: var(--sage-edge); --tilt: -1.2deg; position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
.loan:nth-child(3n+2) { --case: var(--butter); --edge: var(--butter-edge); --tilt: 1.1deg; }
.loan:nth-child(3n) { --case: var(--blush); --edge: var(--blush-edge); --tilt: -.5deg; }
.loan .lift { position: relative; margin: 0 .8rem; padding-top: 1.5rem; transform-origin: 50% 100%; transform: rotate(var(--tilt)); transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
@media (hover: hover) { .loan:hover .lift { transform: rotate(calc(var(--tilt) * -1.8)); } }
.loan:focus-within .lift { transform: rotate(calc(var(--tilt) * -1.8)); }
@media (prefers-reduced-motion: reduce) { .loan .lift, .loan:hover .lift, .loan:focus-within .lift { transition: none; transform: rotate(var(--tilt)); } }
/* The chunky carry handle. */
.loan .lift::before { content: ""; position: absolute; top: .15rem; left: 1.6rem; width: 3.6rem; height: 1.7rem; border: .42rem solid var(--edge); border-bottom: 0; border-radius: 1.2rem 1.2rem 0 0; }
.loan .case {
  position: relative; min-height: 9.5rem; padding: 1.1rem 1rem 1rem; display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; align-items: start;
  border: 2.5px solid var(--edge); border-radius: 1.4rem; background: url(/notes/grain.svg), var(--case); box-shadow: 0 4px 0 -1px var(--ledge);
}
/* The stitched seam where the lid closes. */
.loan .case::before { content: ""; position: absolute; left: .7rem; right: .7rem; top: 2.2rem; border-top: 2px dashed color-mix(in srgb, var(--edge) 60%, transparent); }
/* The tool, on a round badge on the case's face. */
.loan .badge { position: relative; z-index: 1; margin-top: 1.5rem; width: 5.5rem; height: 5.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--disk); border: 2px solid var(--edge); }
.power-tool { display: block; width: 4.2rem; height: auto; overflow: visible; }
.power-tool .y { fill: currentColor; stroke: currentColor; stroke-width: 3; stroke-linejoin: round; }
.power-tool .g { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.loan .stickers { position: absolute; z-index: 2; left: 4.6rem; bottom: .6rem; display: flex; gap: .15rem; }
.loan .stickers svg { width: 1.5rem; height: 1.5rem; padding: .15rem; border-radius: 50%; background: var(--disk); border: 1.5px solid var(--edge); color: var(--ink); }
.loan .stickers .heart { fill: var(--stamp); }
/* The luggage tag, notched at its tied end and threaded with twine from the handle. */
.loan .twine { position: absolute; z-index: 4; top: -.6rem; left: 4.7rem; width: 2.8rem; height: 2.4rem; overflow: visible; pointer-events: none; }
.loan .twine path { fill: none; stroke: var(--twine); stroke-width: 1.6; stroke-dasharray: 3 2; stroke-linecap: round; }
.loan .luggage-tag {
  position: relative; z-index: 3; min-width: 0; margin-top: -.3rem; padding: 1rem .8rem .8rem 1.1rem; overflow-wrap: break-word; color: var(--fg); transform: rotate(2.5deg);
  background: url(/notes/grain.svg), var(--tag); box-shadow: inset 0 0 0 1.5px var(--tag-edge);
  clip-path: polygon(.9rem 0, 100% 0, 100% 100%, .9rem 100%, 0 calc(100% - .9rem), 0 .9rem);
}
.loan .luggage-tag::before { content: ""; position: absolute; top: .55rem; left: .55rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--case); box-shadow: 0 0 0 1.5px var(--edge); }
.loan .lender { display: block; margin-bottom: .25rem; font: 600 .62rem/1.2 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--lender); }
.loan h3 { margin: 0 0 .2rem; font-size: 1.12rem; line-height: 1.2; }
.loan h3 a { color: var(--fg); }
.loan .what { margin: 0; font-size: .98rem; line-height: 1.4; }
/* The plank: a lighter top face, a grained front face and nail heads; the boards join across a row. */
.loan .plank {
  position: relative; height: 1.9rem; margin-top: -1px; border-block: 2px solid var(--wood-edge); box-shadow: 0 3px 0 var(--wood-shadow);
  background: linear-gradient(var(--wood-top) 0 .5rem, var(--wood-edge) .5rem calc(.5rem + 1.5px), transparent 0),
    repeating-linear-gradient(176deg, transparent 0 .3rem, var(--wood-grain) .3rem calc(.3rem + 1px), transparent calc(.3rem + 1px) .62rem),
    url(/notes/grain.svg), var(--wood);
}
.loan .nail { position: absolute; top: .95rem; width: .38rem; height: .38rem; border-radius: 50%; background: var(--nail); }
.loan .nail.l { left: .7rem; } .loan .nail.r { right: .7rem; }
.loan .bracket { position: absolute; top: calc(100% + 2px); width: 3.6rem; height: 4.2rem; overflow: visible; }
.loan .bracket.l { left: 1.8rem; } .loan .bracket.r { right: 1.8rem; transform: scaleX(-1); }
.loan .bracket .wood { fill: var(--wood); }
.loan .bracket .y { fill: currentColor; opacity: var(--wood-plate); }
.loan .bracket .grain-line { fill: none; stroke: var(--wood-grain); stroke-width: 1; }
.loan .bracket .edge { fill: none; stroke: var(--wood-edge); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.loan .bracket .screw { fill: var(--screw); stroke: var(--wood-edge); stroke-width: 1.4; }
/* Where each board starts and ends: the first and last case in a row carry its end, nail and bracket. */
.loan .nail, .loan .bracket { display: none; }
@media (min-width: 64.01rem) {
  .loan:nth-child(3n+1) .plank { border-left: 2px solid var(--wood-edge); border-radius: .25rem 0 0 .25rem; margin-left: -.4rem; }
  .loan:is(:nth-child(3n), :last-child) .plank { border-right: 2px solid var(--wood-edge); border-radius: 0 .25rem .25rem 0; margin-right: -.4rem; }
  .loan:nth-child(3n+1) :is(.nail.l, .bracket.l), .loan:is(:nth-child(3n), :last-child) :is(.nail.r, .bracket.r) { display: block; }
}
@media (max-width: 64rem) and (min-width: 40.01rem) {
  .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loan:nth-child(2n+1) .plank { border-left: 2px solid var(--wood-edge); border-radius: .25rem 0 0 .25rem; margin-left: -.4rem; }
  .loan:is(:nth-child(2n), :last-child) .plank { border-right: 2px solid var(--wood-edge); border-radius: 0 .25rem .25rem 0; margin-right: -.4rem; }
  .loan:nth-child(2n+1) :is(.nail.l, .bracket.l), .loan:is(:nth-child(2n), :last-child) :is(.nail.r, .bracket.r) { display: block; }
}

@media (max-width: 40rem) {
  .pegboard, .cases { grid-template-columns: 1fr; }
  .cases { row-gap: 3.8rem; }
  .loan .plank { border-inline: 2px solid var(--wood-edge); border-radius: .25rem; margin-inline: .2rem; }
  .loan .nail, .loan .bracket { display: block; }
  .loan .case { grid-template-columns: 4.5rem 1fr; }
  .loan .badge { width: 4.5rem; height: 4.5rem; }
  .loan .power-tool { width: 3.5rem; }
  .loan .stickers { left: 3.8rem; }
}

/* ---------- stacking ---------- */
.stack { margin-top: 3rem; }
.stacked-note { margin: 0 7px 2rem 0; padding-top: 1.25rem; padding-bottom: 2rem; }
/* Share the main note's right edge as its page edges grow. */
.note[data-edges="2"] ~ .stack .stacked-note { margin-right: 14px; }
.note[data-edges="3"] ~ .stack .stacked-note { margin-right: 21px; }
.stacked-header {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-bottom: 1.25rem;
}
.stacked-header h2 { font-family: var(--display); font-style: italic; font-weight: 400; font-size: var(--step-1); line-height: 1.2; margin: 0; flex: 1 1 14rem; }
.stacked-title { color: var(--fg); text-decoration: none; }
.stacked-title:hover { text-decoration: underline; }
.stacked-note:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.stack-loading, .stack-error { color: var(--ink-soft); font-style: italic; margin: 0; }
.stack-error { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; font-style: normal; }
.stack-error .stack-remove { margin-left: auto; }

.btn {
  font: 400 1rem/1 var(--ui); color: var(--fg); background: var(--paper); border: 1.5px solid var(--line); border-radius: 0;
  padding: .55em .8em; cursor: pointer; min-height: 2.5rem; display: inline-flex; align-items: center; gap: .4em; text-align: left;
}
.btn:hover:not(:disabled) { background: var(--sun-wash); }
.btn.solid { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn.solid:hover:not(:disabled) { background: var(--ink); filter: brightness(1.15); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.stack-panel { margin-top: 2.5rem; border-top: 3px solid var(--line); padding-top: .75rem; }
.stack-panel h2 { font-family: var(--display); font-style: italic; font-weight: 400; font-size: var(--step-1); margin: 0 0 .75rem; }
.stack-panel h2:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.stack-panel ul { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.stack-panel ul[hidden] { display: none; }
.stack-picker { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0; }
.stack-picker label { font: 400 .95rem/1 var(--ui); }
.combo { position: relative; flex: 1 1 12rem; min-width: 0; max-width: 100%; }
.combo input {
  font: 400 1rem/1 var(--ui); color: var(--fg); background: var(--paper);
  border: 1.5px solid var(--line); border-radius: 0;
  height: 2.5rem; padding: 0 .75rem; width: 100%; min-width: 0;
}
.combo input::placeholder { color: var(--ink-soft); opacity: 1; }
/* about 8 rows, then it scrolls */
.stack-panel .stack-results {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
  display: block; margin: 0; max-height: 20rem; overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper); border: 1.5px solid var(--line); border-top: 0;
}
.stack-panel .stack-results[hidden] { display: none; }
.stack-option {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem;
  min-height: 2.5rem; padding: .45rem .75rem; font: 400 1rem/1.25 var(--ui); cursor: pointer;
}
.stack-option + .stack-option { border-top: 1px solid var(--rule); }
.stack-option:hover, .stack-option[aria-selected="true"] { background: var(--sun-wash); }
.stack-option[aria-selected="true"] { outline: 2px solid var(--ink); outline-offset: -2px; }
.stack-option[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.opt-title { flex: 1 1 10rem; min-width: 0; }
.opt-note { font: 400 .85rem/1 var(--ui); color: var(--ink-soft); }
.stack-none { margin: .5rem 0 0; color: var(--ink-soft); font-style: italic; }
.stack-none:empty { margin: 0; }
.stack-cap { color: var(--ink-soft); font-style: italic; }