/* The Garden — one visual system, infinite variation.
 *
 * `docs/11-frontend.md` §5: nothing in a forest is out of place, and nothing in
 * it is uniform. Every specimen is the same component under different
 * parameters — kind, vitality, age, size, degree — sharing one spacing scale,
 * one colour system, one set of typographic ratios.
 */

:root {
  /* Living Editorial tokens: one scale, shared across every page and specimen. */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 5rem;   --s-9: 8rem;

  --measure: 38rem;
  --page: 76rem;
  --measure-wide: 58rem;

  /* Warm ivory ground and a restrained mineral/earth palette from
   * docs/design/12-visual-language.md. Colour is atmospheric and semantic,
   * never a green-only status system. */
  --ink:        #292a28;
  --ink-soft:   #696a63;
  --ink-faint:  #96968d;
  --paper:      #f6f3eb;
  --paper-warm: #ece9df;
  --rule:       #d8d6cd;
  --focus:      #586c9d;

  --mineral-blue:   #586c9d;
  --mineral-violet: #80628f;
  --mineral-teal:   #668489;
  --earth-ochre:    #98834e;
  --earth-rust:     #ad7057;
  --moss:           #78805d;

  --seed:    #9b9b84;
  --growing: #78805d;
  --mature:  #586c62;
  --dormant: #a3836d;

  --serif: "Iowan Old Style", "Baskerville", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Avenir Next", Avenir, "Segoe UI", Inter, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}

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

html { font-size: clamp(16px, 1.05vw + 10px, 18px); scroll-behavior: smooth; }

body {
  margin: 0;
  padding: .35rem;
  background: #e5e4df;
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

.page { width: 100%; min-height: calc(100vh - .7rem); max-width: var(--page); margin: 0 auto; padding: 0 clamp(var(--s-4), 5vw, var(--s-8)) var(--s-9); border-radius: .22rem; background-color: var(--paper); background-image: radial-gradient(circle, rgb(70 64 50 / 3.5%) .35px, transparent .55px), radial-gradient(circle, rgb(90 78 60 / 2.5%) .3px, transparent .5px); background-position: 0 0, 3px 5px; background-size: 7px 9px, 11px 13px; box-shadow: 0 .15rem 1.4rem rgb(42 40 34 / 12%); }
.prose { max-width: var(--measure); }

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

.site-header {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
  gap: 1.6rem; padding: var(--s-3) 0;
  font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase;
}
.site-header nav { display: flex; gap: 1.25rem; }
.site-name { position: relative; font-family: var(--serif); font-size: .9rem; letter-spacing: -0.02em; text-transform: none; text-decoration: none; }
.site-name::before { content: "⌁"; position: absolute; right: calc(100% + .55rem); color: var(--ink-soft); font: .8rem var(--serif); transform: rotate(-18deg); }
.nav-link { text-decoration: none; color: var(--ink-soft); padding-bottom: var(--s-2); border-bottom: 1px solid transparent; }
.nav-link:hover, .nav-link.is-active { color: var(--ink); border-color: var(--ink); }
.site-tools { justify-self: end; display: flex; align-items: center; gap: 1rem; }
.search-quiet { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink-faint); text-transform: none; letter-spacing: 0; text-decoration-color: transparent; transition: color 180ms ease, text-decoration-color 180ms ease; }
.search-symbol { position: relative; display: inline-block; width: .52rem; height: .52rem; border: 1px solid currentColor; border-radius: 50%; }
.search-symbol::after { content: ""; position: absolute; width: .24rem; border-top: 1px solid currentColor; right: -.18rem; bottom: -.08rem; transform: rotate(48deg); transform-origin: left center; }
.site-menu { color: var(--ink-soft); font-size: .78rem; }
.search-quiet:hover, .search-quiet:focus-visible { color: var(--ink); text-decoration-color: var(--ink); text-underline-offset: 0.2em; }
.search-page { max-width: var(--measure); margin: var(--s-8) auto 0; }
.search-page h1 { font-size: clamp(2.5rem, 7vw, 5rem); line-height: 0.98; letter-spacing: -0.055em; margin: 0 0 var(--s-7); }
.search-label { display: block; color: var(--ink-soft); font: 0.72rem var(--sans); letter-spacing: 0.1em; text-transform: uppercase; }
.search-input { width: 100%; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font: 1.5rem var(--serif); padding: var(--s-3) 0; }
.search-input::placeholder { color: var(--ink-faint); }
.search-status { min-height: 1.4em; color: var(--ink-faint); font: 0.75rem var(--sans); }
.search-results { margin-top: var(--s-5); }
.search-result { display: block; padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.search-result .t, .search-result .m, .search-result .x { display: block; }
.search-result .t { color: var(--ink); font-size: 1.15rem; }
.search-result .m { color: var(--ink-faint); font: 0.68rem var(--sans); letter-spacing: 0.1em; text-transform: uppercase; margin-top: var(--s-1); }
.search-result .x { color: var(--ink-soft); margin-top: var(--s-2); }
.search-result:hover .t { color: var(--growing); }
.search-noscript { color: var(--ink-soft); }

.map-shell { position: relative; border-top: 1px solid var(--rule); min-height: 70vh; overflow: hidden; }
.map-toolbar { display: flex; justify-content: flex-end; gap: var(--s-2); padding: var(--s-4) 0; position: relative; z-index: 3; }
.map-toolbar button { border: 1px solid var(--rule); background: transparent; color: var(--ink-soft); padding: var(--s-2) var(--s-3); font: 0.72rem var(--sans); cursor: pointer; }
.map-toolbar button:hover, .map-toolbar button:focus-visible { color: var(--ink); border-color: var(--ink-faint); }
.map-key { margin: 0 0 var(--s-3); color: var(--ink-faint); font: 0.7rem var(--sans); letter-spacing: 0.03em; }
.key-field, .key-trace { display: inline-block; width: 0.55rem; height: 0.55rem; margin: 0 0.2rem 0 0.45rem; vertical-align: -0.02rem; }
.key-field { border-radius: 50%; background: var(--growing); }
.key-trace { border-top: 1px dashed var(--ink-soft); }
.map-stage { position: relative; min-height: 62vh; overflow: hidden; cursor: grab; touch-action: none; overscroll-behavior: contain; user-select: none; }
.map-stage:active, .map-stage.is-dragging { cursor: grabbing; }
.map-viewport { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.map-fields, .map-viewport > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-fields { pointer-events: none; }
.map-viewport > svg { overflow: visible; }
.map-trace { fill: none; stroke: var(--ink-faint); stroke-width: 1.2; stroke-dasharray: 2 6; opacity: 0.42; }
.map-trace.is-quiet { opacity: 0.12; }
.map-trace.is-related { stroke: var(--growing); stroke-width: 2.1; opacity: 0.9; stroke-dasharray: none; }
.map-path { fill: none; stroke: var(--focus); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.62; }
.map-labels { position: absolute; inset: 0; }
/* The overlap pass hides a label by setting `hidden`, and the UA rule that acts on
   that is `[hidden] { display: none }` — which any author `display` declaration
   outranks. `.map-region` sets `display: flex`, so hidden region labels went on
   painting and the map looked as crowded as before the pass ran. */
.map-labels > [hidden] { display: none !important; }
.map-label { position: absolute; transform: translate(-50%, -50%); max-width: 10rem; color: var(--ink); font-size: 0.92rem; line-height: 1.15; text-align: center; text-decoration: none; }
.map-label[data-degree="0"] { opacity: 0; pointer-events: none; }
.map-shell[data-zoom="mid"] .map-label[data-degree="2"], .map-shell[data-zoom="far"] .map-label[data-degree="2"] { opacity: 0; pointer-events: none; }
.map-shell[data-zoom="near"] .map-label { opacity: 1; pointer-events: auto; }
.map-label[data-type="domain"] { color: var(--growing); font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
/* The stacked layout lived only under `.map-shell--explore`, so on every other map
   variant the title and its summary were two inline spans landing on top of each
   other. A region label is a title above an orientation wherever it is drawn. */
.map-region { position: absolute; display: flex; max-width: 12rem; flex-direction: column; gap: .25rem; transform: translate(-50%, -180%); color: var(--growing); font: 0.68rem var(--sans); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; }
.map-region-title { font: 600 .72rem/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.map-region-summary { display: -webkit-box; max-width: 11rem; margin: 0 auto; overflow: hidden; color: var(--ink-soft); font: italic .76rem/1.25 var(--serif); letter-spacing: 0; text-transform: none; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.map-region:hover, .map-region:focus-visible { text-decoration: underline; outline: none; }
.map-label:hover, .map-label:focus-visible { color: var(--growing); text-decoration: underline; text-underline-offset: 0.2em; outline: none; }
.map-fallback { padding: var(--s-6) 0; }
.map-enhanced .map-fallback { display: none; }
.map-list { list-style: none; padding: 0; margin: 0; columns: 2; }
.map-list li { display: flex; justify-content: space-between; gap: var(--s-4); border-bottom: 1px solid var(--rule); padding: var(--s-3) 0; break-inside: avoid; }
.map-list li span { color: var(--ink-faint); font: 0.72rem var(--sans); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ── wander: one stop surrounded by the unseen garden ───────────────────── */
body.page-wander { height: 100dvh; overflow: hidden; }
.page-wander .page { width: 100%; height: calc(100dvh - .7rem); min-height: 0; max-width: none; padding: 0 4.25rem; overflow: hidden; }
.wander-page { position: relative; height: calc(100dvh - 3.4rem); margin: 0 -4.25rem; overflow: hidden; isolation: isolate; }
.wander-atmosphere { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wander-stop { position: absolute; inset: 0; min-height: 0; transition: opacity 180ms ease, transform 180ms ease; }
.wander-field { display: grid; width: 100%; height: 100%; grid-template-columns: 32.4% 41.5% 1fr; }
/* The actions sit absolutely at `bottom: 6.2rem`, so a tall stop grew straight into
   them — visible from about 900px down, where the column narrows and the text runs
   longer. Reserving the band keeps the two apart at every width. */
.wander-content { grid-column: 2; align-self: start; width: min(36rem, 92%); padding-top: 6.3rem; padding-bottom: 10rem; }
.wander-content > .eyebrow { margin: 0 0 1.7rem !important; color: var(--mineral-violet) !important; font-weight: 600; }
/* The body is clamped but the title and summary were not, so a long stop grew past
   the reserve and into the actions — and which stop you get is the garden's choice,
   not the layout's. Everything in the column is now bounded. */
.wander-content h1 { display: -webkit-box; overflow: hidden; max-width: 38rem; margin: 0; font-size: clamp(3.25rem, 4.95vw, 5.2rem); font-weight: 400; line-height: .98; letter-spacing: -.045em; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.wander-content h1 a { text-decoration: none; transition: color 160ms ease; }
.wander-content h1 a:hover, .wander-content h1 a:focus-visible { color: var(--mineral-violet); outline: none; }
.wander-kind { margin: .85rem 0 .35rem; color: var(--ink-soft); font: .84rem/1.4 var(--sans); letter-spacing: .11em; }
.wander-summary { display: -webkit-box; overflow: hidden; max-width: 32rem; margin: 0; color: var(--ink); font-size: 1.18rem; font-style: italic; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.wander-body { max-width: 33rem; max-height: 14rem; margin-top: 1.8rem; padding-top: 1.55rem; overflow: hidden; border-top: 1px dotted color-mix(in srgb, var(--ink) 34%, transparent); }
.wander-body p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--ink); font-size: 1rem; line-height: 1.62; -webkit-box-orient: vertical; -webkit-line-clamp: 6; }
.wander-arrival { grid-column: 3; align-self: start; width: min(15.5rem, 82%); margin-top: 16.5rem; color: var(--mineral-blue); }
.wander-arrival .eyebrow { margin: 0 0 .7rem !important; color: var(--earth-ochre) !important; }
.wander-relation { display: inline-block; margin: 0 0 1.15rem; border-bottom: 1px dotted currentColor; font-size: 1rem; font-style: italic; }
.wander-arrival-from { display: block; margin: -.45rem 0 1.15rem; color: var(--ink); font-size: 1rem; text-decoration: none; }
.wander-arrival-from:hover, .wander-arrival-from:focus-visible { color: var(--mineral-blue); outline: none; }
.wander-arrival-note { margin: 0; font: .74rem/1.7 var(--mono); letter-spacing: .045em; }
.wander-actions { position: absolute; z-index: 3; left: 32.4%; bottom: 6.2rem; display: flex; width: 28rem; flex-wrap: wrap; align-items: center; gap: 1.25rem 4rem; }
.wander-actions button, .wander-actions a { border: 0; border-bottom: 1px dotted currentColor; background: none; color: var(--ink-soft); padding: 0 0 .3rem; font: 1rem var(--serif); text-decoration: none; cursor: pointer; transition: color 160ms ease, transform 160ms ease; }
.wander-actions #keep-wandering { color: var(--mineral-blue); font-size: 1.15rem; }
.wander-actions #somewhere-else { flex-basis: 100%; width: max-content; border-color: var(--rule); text-align: left; }
.wander-actions button:hover, .wander-actions button:focus-visible, .wander-actions a:hover, .wander-actions a:focus-visible { color: var(--ink); outline: none; transform: translateY(-1px); }
.wander-marginalia { position: absolute; z-index: 1; top: 40%; left: 4.3rem; width: 9rem; margin: 0; color: var(--mineral-blue); font-family: "Bradley Hand", "Segoe Print", cursive; font-size: .95rem; font-style: italic; line-height: 1.5; transform: rotate(-4deg); }
/* The quote occupies the left margin, which the stop column reclaims as the viewport
   narrows — below this width the two share the same pixels. It is atmosphere, so it
   yields rather than fighting the thing a reader came for. */
.wander-quote { display: none; }
@media (min-width: 68rem) {
  .wander-quote { position: absolute; z-index: 1; display: block; bottom: 7.2rem; left: 4.3rem; width: 13.5rem; max-height: 7.5rem; margin: 0; overflow: hidden; color: var(--ink-soft); font-size: .8rem; line-height: 1.45; }
}
.wander-quote::before { content: "“"; display: block; height: 1.2rem; color: var(--ink-faint); font-size: 2.1rem; line-height: 1; }
.wander-page.is-changing .wander-stop { opacity: 0; transform: translateY(.35rem); }
.wander-static { padding: var(--s-8) 0; }
.clearing { color: var(--ink-faint); font-style: italic; }

a { color: inherit; text-decoration-color: var(--ink-faint); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--ink); }

/* ── the front door ──────────────────────────────────────────────────────── */

/* One composition, not a document. The title is the identity — the page carries no
   site header — and the garden shows through underneath with a few things named in
   it, rather than listed below the fold. */
.page-front .page { max-width: none; padding: 0 clamp(1.5rem, 5vw, 4.25rem); }
.front-door { position: relative; isolation: isolate; }
@media (min-width: 64rem) {
  body.page-front { height: 100dvh; overflow: hidden; }
  .page-front .page { height: calc(100dvh - .7rem); overflow: hidden; }
  .front-door { height: 100%; }
}
.door-search { position: absolute; z-index: 3; top: clamp(1.5rem, 3vw, 2.6rem); right: 0;
  color: var(--ink-soft); font: .82rem var(--sans); text-decoration: none; }
.door-search:hover, .door-search:focus-visible { color: var(--ink); outline: none; }

.door { padding: clamp(3.5rem, 9vw, 7.5rem) 0 0; max-width: var(--measure); }
.door h1 {
  margin: 0 0 var(--s-3);
  font-size: clamp(2.6rem, 6.4vw, 5.1rem);
  font-weight: 400; line-height: 1.02; letter-spacing: -0.035em;
}
.door-line { margin: 0 0 var(--s-4); color: var(--ink); font-size: clamp(1.1rem, 1.8vw, 1.62rem); font-style: italic; }
.door-blurb { max-width: 22rem; margin: 0; color: var(--ink-soft); font-family: var(--sans); font-size: .92rem; line-height: 1.55; }
.eyebrow { color: var(--ink-faint) !important; font-family: var(--sans); font-size: 0.68rem !important;
  letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: var(--s-4) !important; }

.lenses { display: flex; gap: clamp(2.5rem, 6vw, 6.5rem); margin-top: clamp(2rem, 5vw, 4rem); }
.lens { display: block; text-decoration: none; color: var(--ink-soft); font-style: italic; }
.lens-title { display: block; margin-bottom: var(--s-1); color: var(--ink); font-style: normal;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem); letter-spacing: .06em; line-height: 1; text-transform: uppercase; }
.lens:hover .lens-title { color: var(--growing); transition: color 180ms ease; }

/* Entries flow by default and are placed in the field only where there is room for
   the composition. Placing them at fixed percentages and then walking the width down
   just moves the collision around: five 11.5rem columns need about 1024px before
   they stop touching, so that is where the composition begins rather than where it
   starts being patched. */
.door-field { position: static; margin: var(--s-7) 0 var(--s-6); }
.door-field .see-field { position: relative; width: 100%; height: 14rem; }
.door-entry { display: block; margin-bottom: var(--s-5); color: var(--ink); text-decoration: none; }

@media (min-width: 64rem) {
  /* Full-bleed: the field is the ground the page sits on, so it runs to the edges of
     the screen rather than stopping inside the text margin. */
  .door-field { position: absolute; z-index: -1; margin: 0; bottom: 0; top: clamp(19rem, 42vh, 27rem);
    right: calc(clamp(1.5rem, 5vw, 4.25rem) * -1); left: calc(clamp(1.5rem, 5vw, 4.25rem) * -1); }
  .door-field .see-field { position: absolute; inset: 0; width: 100%; height: 100%; }
  .door-entry { position: absolute; z-index: 2; width: 11.5rem; margin: 0; }
  .door-entry[data-slot="1"] { top: 30%; left: 13%; }
  .door-entry[data-slot="2"] { top: 46%; left: 33%; }
  .door-entry[data-slot="3"] { top: 24%; left: 53%; width: 9.5rem; }
  .door-entry[data-slot="4"] { top: 22%; left: 70%; }
  .door-entry[data-slot="5"] { top: 52%; left: 82%; }
}
.door-entry-label { display: block; margin-bottom: .5rem; color: var(--earth-ochre);
  font: 600 .56rem/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.door-entry-title { display: -webkit-box; overflow: hidden; font-size: 1.16rem; font-weight: 400; line-height: 1.14;
  letter-spacing: -.02em; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.door-entry-note { display: -webkit-box; overflow: hidden; margin-top: .5rem; color: var(--ink-soft);
  font-size: .74rem; font-style: italic; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.door-entry:hover .door-entry-title, .door-entry:focus-visible .door-entry-title {
  text-decoration: underline; text-underline-offset: .16em; outline: none; }

.band { border-top: 1px solid var(--rule); padding: var(--s-7) 0; }
.band > h2 {
  font-family: var(--sans);
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 var(--s-5);
}
.place-actions { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-7) 0; border-top: 1px solid var(--rule); }
.button-link { display: inline-block; color: var(--paper); background: var(--ink); padding: 0.7rem 1rem; text-decoration: none; transition: background 180ms ease, transform 180ms ease; }
.button-link:hover, .button-link:focus-visible { background: var(--growing); transform: translateY(-2px); }
.quiet-link { color: var(--ink-soft); }
.questions a, .paths a { color: var(--ink); text-decoration-color: var(--rule-strong); text-underline-offset: 0.2em; }
.paths { list-style: none; padding: 0; margin: 0; }
.paths li { display: flex; justify-content: space-between; gap: var(--s-5); padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.paths li span { color: var(--ink-faint); font-family: var(--sans); font-size: 0.75rem; white-space: nowrap; }

/* ── the specimen: one component, parameterised ──────────────────────────── */

.specimen {
  display: block;
  text-decoration: none;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--rule);
}
.specimen:last-child { border-bottom: 0; }
.specimen .t { display: block; line-height: 1.25; margin-bottom: var(--s-1); }
/* `.t` was block but `.m` and `.x` were left inline — the block rule above is scoped
   to `.search-result` — so the meta line and the summary ran together on one line and
   `.x`'s margin-top was silently ignored, which inline boxes do not honour. */
.specimen .m {
  display: block;
  font-family: var(--sans); font-size: 0.74rem;
  color: var(--ink-faint); letter-spacing: 0.02em;
}
.specimen .x { display: block; color: var(--ink-soft); font-size: 0.95rem; margin-top: var(--s-2); }
.specimen:hover .t { text-decoration: underline; text-underline-offset: 3px; }

/* ── see: temporal emphasis over the canonical field ────────────────────── */
body.page-see { height: 100dvh; overflow: hidden; }
.page-see .page { height: calc(100dvh - .7rem); min-height: 0; padding-bottom: 0; overflow: hidden; }
.see-heading { position: relative; z-index: 2; display: flex; height: 5.25rem; justify-content: space-between; padding-top: 1.3rem; }
.see-heading h1 { margin: 0; font-size: clamp(2.4rem, 5vw, 2.8rem); font-weight: 400; line-height: .92; letter-spacing: -.035em; }
.see-heading > div > p { margin: .7rem 0 0; color: var(--ink-soft); font-size: .98rem; font-style: italic; }
.see-since { width: 14.5rem; padding-top: .15rem; color: var(--ink-soft); }
.see-since h2 { margin: 0 0 .45rem; color: var(--ink); font: .68rem/1.4 var(--sans); letter-spacing: 0; text-transform: none; }
.see-since #diff { display: grid; gap: .28rem; font: .66rem/1.4 var(--sans); }
.see-change { position: relative; margin: 0; padding-left: 1.15rem; }
.see-change::before { content: ""; position: absolute; top: .35em; left: 0; width: .45rem; height: .45rem; border: 1px dashed var(--mineral-blue); border-radius: 50%; }
.see-change a { text-decoration: none; }
.see-landscape { position: relative; height: calc(100dvh - 8.65rem); min-height: 0; margin: 0 calc(clamp(var(--s-4), 5vw, var(--s-8)) * -1); overflow: hidden; }
.see-landscape::after { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 46% 46%, transparent 54%, var(--paper) 98%); }
.see-field { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; opacity: .9; }
.see-focus, .see-small { color: var(--ink); text-decoration: none; }
.see-focus { position: absolute; z-index: 2; display: block; }
.see-focus[data-rank="1"] { top: 8.5%; left: 35%; width: 15.5rem; }
.see-focus[data-rank="2"] { top: 16%; left: 75%; width: 11.5rem; }
.see-focus[data-rank="3"] { top: 42%; left: 19%; width: 12.5rem; }
.see-kicker { display: block; margin-bottom: .75rem; color: var(--earth-ochre); font: 600 .56rem/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.see-focus:not([data-rank="1"]) .see-kicker { display: none; }
/* Each focus card sits in an absolute slot at a fixed percentage, so it has a fixed
   amount of room whatever it holds. The slots were tuned when no Idea was public and
   the cards were short; with real summaries in them the text grew straight through
   "Recently planted" below. Clamping is what keeps a fixed slot honest. */
.see-focus-title { display: -webkit-box; overflow: hidden; font-size: 1.42rem; font-weight: 400; line-height: 1.03; letter-spacing: -.025em; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.see-focus[data-rank="1"] .see-focus-title { font-size: 2rem; }
.see-focus[data-rank="2"] .see-focus-title { font-size: 1.45rem; }
.see-focus-summary { display: -webkit-box; overflow: hidden; margin-top: .8rem; font-size: .76rem; font-style: italic; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.see-focus-meta { display: block; margin-top: .9rem; color: var(--ink-soft); font: .62rem/1.6 var(--sans); }
.see-focus:hover .see-focus-title, .see-focus:focus-visible .see-focus-title { text-decoration: underline; text-underline-offset: .16em; }
.see-focus[data-vitality="dormant"] { opacity: .52; }
.see-recent, .see-quiet { position: absolute; z-index: 2; }
.see-recent { top: 42%; left: 66%; width: 29%; }
.see-quiet { top: 69%; left: 6.5%; width: 36%; opacity: .57; }
.see-recent h2, .see-quiet h2 { margin: 0 0 1.2rem; color: var(--earth-ochre); font: 500 .56rem/1.2 var(--sans); letter-spacing: .19em; text-transform: uppercase; }
.see-small-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 1.35rem; }
.see-small { display: block; min-width: 0; }
.see-small strong { display: -webkit-box; overflow: hidden; font-size: .84rem; font-weight: 400; line-height: 1.12; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.see-small span { display: block; margin-top: .55rem; color: var(--ink-soft); font: .54rem/1.35 var(--sans); }
.see-small--recent:nth-child(3) strong { font-style: italic; }
.see-small--recent::after { content: ""; display: block; width: 2.6rem; margin-top: .55rem; border-top: 1px solid var(--earth-ochre); opacity: .65; }
.see-small:hover strong, .see-small:focus-visible strong { text-decoration: underline; text-underline-offset: .15em; }
.see-legend { position: absolute; z-index: 2; right: 5%; bottom: 6%; display: grid; grid-template-columns: repeat(2, auto); gap: .48rem 1.4rem; color: var(--ink-soft); font: .48rem/1 var(--sans); }
.see-legend span { display: flex; align-items: center; gap: .45rem; white-space: nowrap; }
.see-legend i { width: .34rem; height: .34rem; border-radius: 50%; background: var(--ink-faint); }
.see-legend i.is-growing { background: var(--mineral-blue); }
.see-legend i.is-active { background: var(--moss); }
.see-legend i.is-new { background: var(--earth-ochre); }
.see-legend i.is-quiet { background: var(--rule); }
.see-legend b { min-width: .5rem; color: var(--ink); font-weight: 400; }

/* kind → typographic voice */
.specimen[data-kind="essay"] .t,
.specimen[data-kind="article"] .t { font-size: 1.45rem; }
.specimen[data-kind="chapter"] .t { font-size: 1.3rem; }
.specimen[data-kind="note"] .t    { font-size: 1.05rem; }
.specimen[data-kind="scribble"] .t {
  font-size: 1.02rem; font-style: italic; color: var(--ink-soft);
}
.specimen[data-kind="experiment"] .t,
.specimen[data-kind="code"] .t {
  font-family: var(--mono); font-size: 0.98rem; letter-spacing: -0.01em;
}
.specimen[data-type="reference"] .t { font-size: 1.05rem; }
.specimen[data-type="reference"] .t::after {
  content: " ↗"; color: var(--ink-faint); font-size: 0.8em;
}
.specimen[data-type="question"] .t { font-size: 1.15rem; }
.specimen[data-type="idea"] .t,
.specimen[data-type="project"] .t { font-size: 1.6rem; letter-spacing: -0.015em; }

/* vitality → weight and colour temperature */
.specimen[data-vitality="seed"]    .t { color: var(--seed); }
.specimen[data-vitality="growing"] .t { color: var(--growing); }
.specimen[data-vitality="mature"]  .t { color: var(--mature); font-weight: 500; }
.specimen[data-vitality="dormant"] .t { color: var(--dormant); }

/* degree → how rooted it appears */
.specimen[data-degree="high"] { border-left: 2px solid var(--rule); padding-left: var(--s-4); }

/* age → patina */
.specimen[data-age="old"] .m { opacity: 0.7; }

/* ── ideas as places (DIG) ───────────────────────────────────────────────── */

.place { padding: var(--s-8) 0 var(--s-6); }
.place .vit { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--s-3); }
.place h1 { font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 400; line-height: 1.08;
  letter-spacing: -0.025em; margin: 0 0 var(--s-5); }
.place .framing { font-size: 1.3rem; color: var(--ink); max-width: var(--measure);
  margin: 0 0 var(--s-4); line-height: 1.4; }
.place .summary { color: var(--ink-soft); max-width: var(--measure); margin: 0; }

/* ── Domain and Idea: landscape → evidence trail ─────────────────────────── */

.semantic-page { padding-top: clamp(2.5rem, 7vw, 5.5rem); }
.semantic-hero { max-width: 47rem; padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
/* The breadcrumb had a margin override but no styling of its own, so it inherited
   body links: full-size, underlined, and with the separator glued to both labels
   ("The Idea Garden\00b7EXPLORE"). It is an eyebrow, not a sentence. */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .5em;
  color: var(--ink-faint); font: 600 .68rem/1.2 var(--sans); letter-spacing: .15em;
  text-transform: uppercase; }
.breadcrumb a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.breadcrumb a:hover, .breadcrumb a:focus-visible { color: var(--ink); border-bottom-color: currentColor; }
.breadcrumb span { color: var(--ink-faint); opacity: .6; }
.semantic-hero .breadcrumb { margin-bottom: var(--s-7); }
.semantic-hero h1 { max-width: 44rem; margin: 0; font-size: clamp(2.8rem, 8vw, 5.6rem); font-weight: 400; letter-spacing: -.045em; line-height: .98; }
.semantic-orientation { max-width: 40rem; margin: var(--s-5) 0 0; color: var(--ink-soft); font-size: clamp(1.08rem, 2vw, 1.32rem); line-height: 1.55; }
.semantic-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-5); margin-bottom: var(--s-4); border-bottom: 1px solid var(--rule); padding-bottom: var(--s-3); }
.semantic-section-heading h2, .domain-ideas > h2, .related-ideas > h2 { margin: 0; color: var(--ink-faint); font: 600 .68rem/1.2 var(--sans); letter-spacing: .15em; text-transform: uppercase; }
.semantic-section-heading p { margin: 0; color: var(--ink-faint); font: .7rem var(--sans); }
.domain-landscape { margin: 0 clamp(-4rem, -5vw, -1.5rem); padding: 0 clamp(1.5rem, 5vw, 4rem); }
.map-shell--domain { height: min(60vh, 42rem); min-height: 30rem; border-top: 0; }
.map-shell--domain .map-stage { min-height: 30rem; height: 100%; }
.map-shell--domain .map-toolbar { padding-right: 0; padding-left: 0; }
.domain-ideas { max-width: 58rem; margin-top: clamp(3rem, 7vw, 6rem); }
.domain-idea-list { list-style: none; margin: var(--s-4) 0 0; padding: 0; border-top: 1px solid var(--rule); }
.domain-idea-list li { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(14rem, 1.5fr) auto; gap: var(--s-6); align-items: baseline; padding: var(--s-5) 0; border-bottom: 1px solid var(--rule); }
.domain-idea-list a { font-size: 1.3rem; text-decoration: none; }
.domain-idea-list a:hover, .domain-idea-list a:focus-visible { color: var(--growing); }
.domain-idea-list p { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.5; }
.idea-breadth { white-space: nowrap; color: var(--ink-faint); font: .68rem var(--sans); }
.idea-appearances { max-width: 48rem; }
.appearance-trail { position: relative; margin-top: var(--s-6); padding-left: clamp(1.5rem, 4vw, 3.5rem); }
.appearance-trail::before { position: absolute; top: .5rem; bottom: 1rem; left: .35rem; width: 1px; content: ""; background: var(--rule); }
.idea-appearance { position: relative; max-width: 40rem; margin: 0 0 clamp(2.75rem, 6vw, 5rem); }
.idea-appearance::before { position: absolute; top: .45rem; left: calc(clamp(1.5rem, 4vw, 3.5rem) * -1 - .05rem); width: .8rem; height: .8rem; border: 1px solid var(--ink-faint); border-radius: 50%; content: ""; background: var(--paper); }
.appearance-role { margin: 0 0 var(--s-3); color: var(--mineral-violet); font: 600 .64rem var(--sans); letter-spacing: .14em; }
.idea-appearance blockquote { margin: 0; color: var(--ink); font-size: clamp(1.12rem, 2.2vw, 1.38rem); line-height: 1.55; }
.idea-appearance blockquote p { margin: 0; }
.appearance-source { display: inline-flex; flex-direction: column; gap: .2rem; margin-top: var(--s-4); text-decoration: none; }
.appearance-source > span { border-bottom: 1px solid var(--rule); }
.appearance-source small { color: var(--ink-faint); font: .68rem var(--sans); letter-spacing: .04em; text-transform: lowercase; }
.appearance-more { max-width: 42rem; margin-top: var(--s-5); border-top: 1px solid var(--rule); }
.appearance-more > summary { padding: var(--s-3) 0; color: var(--ink-faint); cursor: pointer; font: .72rem var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.appearance-trail--continuation { margin-top: var(--s-5); }
.related-ideas { max-width: 48rem; margin-top: var(--s-8); border-top: 1px solid var(--rule); padding-top: var(--s-6); }
.related-ideas ul { list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.related-ideas li { display: grid; grid-template-columns: 7rem 12rem 1fr; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); }
.related-ideas li > span { color: var(--ink-faint); font: .62rem var(--sans); letter-spacing: .1em; }
.related-ideas li p { margin: 0; color: var(--ink-soft); font-size: .9rem; }
.semantic-exit { margin-top: clamp(3rem, 8vw, 7rem); border-top: 1px solid var(--rule); padding-top: var(--s-5); }
.semantic-exit a { color: var(--ink-soft); font: .72rem var(--sans); letter-spacing: .08em; text-decoration: none; }
.semantic-exit a:hover, .semantic-exit a:focus-visible { color: var(--ink); }

.section { border-top: 1px solid var(--rule); padding: var(--s-6) 0; }
.section > h2 { font-family: var(--sans); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
  margin: 0 0 var(--s-4); }

.questions { list-style: none; padding: 0; margin: 0; max-width: var(--measure); }
.questions li { padding: var(--s-3) 0; border-bottom: 1px solid var(--rule);
  font-size: 1.1rem; color: var(--ink); }
.questions li:last-child { border-bottom: 0; }

/* ── artifact page ───────────────────────────────────────────────────────── */

article header { padding: var(--s-8) 0 var(--s-5); max-width: var(--measure); }
article header .m { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--s-3); }
article header h1 { font-size: clamp(1.8rem, 5vw, 2.7rem); font-weight: 400;
  line-height: 1.14; letter-spacing: -0.02em; margin: 0; }
.reading-layout { position: relative; display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(10rem, 1fr); gap: var(--s-8); align-items: start; }
.gutter-traces { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.gutter-trace { fill: none; stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 1 5; opacity: 0.28; transition: stroke 160ms ease, opacity 160ms ease, stroke-width 160ms ease; }
.gutter-trace.is-active { stroke: var(--growing); stroke-width: 1.5; opacity: 0.72; }
.reading-layout article, .semantic-gutter { position: relative; z-index: 1; }
.article-lede { color: var(--ink-soft); font-size: 1.18rem; font-style: italic; line-height: 1.45; margin: var(--s-4) 0 0; }
.semantic-gutter { border-left: 1px solid var(--rule); min-height: 18rem; padding: var(--s-8) 0 0 var(--s-5); }
.gutter-label { color: var(--ink-faint); font: 0.64rem var(--sans); letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 var(--s-6); }
.gutter-markers { display: grid; }
.gutter-cluster { position: relative; max-width: 16rem; scroll-margin-block: 32vh; transition: opacity 160ms ease; }
.gutter-cluster::before { position: absolute; top: .38rem; left: calc(var(--s-5) * -1 - 3px); width: 5px; height: 5px; border-radius: 50%; content: ""; background: var(--ink-faint); transition: background-color 160ms ease, transform 160ms ease; }
.gutter-cluster.is-source-active::before { background: var(--growing); transform: scale(1.35); }
.gutter-item + .gutter-item { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.gutter-relation { display: block; margin-bottom: .25rem; color: var(--ink-faint); font: 600 .6rem/1.2 var(--sans); letter-spacing: .14em; }
.gutter-item > a { display: inline; color: var(--ink); font-size: .96rem; line-height: 1.25; text-decoration-color: var(--rule); text-underline-offset: .2em; }
.gutter-item > a:hover, .gutter-item > a:focus-visible { color: var(--growing); text-decoration-color: currentColor; }
.gutter-item p { display: -webkit-box; margin: .35rem 0 0; overflow: hidden; color: var(--ink-soft); font-size: .78rem; font-style: italic; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.gutter-more { margin-top: var(--s-4); color: var(--ink-soft); font: .68rem var(--sans); }
.gutter-more summary { cursor: pointer; text-decoration: underline dotted; text-underline-offset: .2em; }
.gutter-more-items { margin-top: var(--s-4); }
.semantic-source { border-bottom: 1px dotted color-mix(in srgb, var(--mineral-blue) 72%, transparent); scroll-margin-block: 35vh; transition: border-color 160ms ease, background-color 160ms ease; }
.semantic-source:focus, .semantic-source.is-gutter-active { border-bottom-color: var(--growing); outline: 0; background: color-mix(in srgb, var(--growing) 8%, transparent); }
.evidence-roots { margin-top: .8rem; color: var(--ink-faint); font: .68rem/1.5 var(--sans); }
.evidence-roots summary { cursor: pointer; text-decoration: underline dotted; text-underline-offset: .2em; }
.evidence-roots ul { margin: .45rem 0 0; padding-left: 1.1rem; }
.evidence-roots q { color: var(--ink-soft); font-family: var(--serif); font-size: .88rem; }

.body { max-width: var(--measure); font-size: 1.06rem; }
.body h2 { font-size: 1.4rem; font-weight: 400; margin: var(--s-6) 0 var(--s-3); }
.body h3 { font-size: 1.15rem; font-weight: 600; margin: var(--s-5) 0 var(--s-2); }
.body blockquote { margin: var(--s-5) 0; padding-left: var(--s-4);
  border-left: 2px solid var(--rule); color: var(--ink-soft); font-style: italic; }
.body code { font-family: var(--mono); font-size: 0.88em;
  background: var(--paper-warm); padding: 0.1em 0.32em; border-radius: 3px; }
.body pre { background: var(--paper-warm); padding: var(--s-4); border-radius: 4px;
  overflow-x: auto; font-size: 0.86rem; }
.body pre code { background: none; padding: 0; }
.body img { max-width: 100%; height: auto; }
.body hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-6) 0; }

/* ── timeline ────────────────────────────────────────────────────────────── */

.timeline { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-soft); }
.track { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.dot.first { background: none; border: 1.5px solid var(--ink-faint); }
.seg { height: 1px; background: var(--rule); flex: 1 1 auto; min-width: 12px; }

/* ── connections ─────────────────────────────────────────────────────────── */

.edges { list-style: none; padding: 0; margin: 0; }
.edges li { display: grid; grid-template-columns: 9rem 1fr; gap: var(--s-4);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.edges li:last-child { border-bottom: 0; }
.edges .rel { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--ink-faint); text-transform: lowercase; }
.edges .why { display: block; color: var(--ink-soft); font-size: 0.9rem; margin-top: 2px; }
.edges .sug { font-style: italic; }

.foot { border-top: 1px solid var(--rule); margin-top: var(--s-8); padding-top: var(--s-4);
  font-family: var(--sans); font-size: 0.75rem; color: var(--ink-faint);
  display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }

@media (max-width: 34rem) {
  .page { padding: var(--s-5) var(--s-4) var(--s-8); }
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav { grid-column: 1 / -1; grid-row: 2; gap: var(--s-4); }
  .search-quiet { display: none; }
  .lenses { grid-template-columns: 1fr; gap: var(--s-5); }
  .glimpse { height: 15rem; }
  .map-shell { min-height: 55vh; margin: 0 calc(var(--s-4) * -1); padding: 0 var(--s-4); }
  .map-toolbar { justify-content: flex-start; position: sticky; top: 0; background: var(--paper); }
  .map-toolbar button { min-height: 2.5rem; }
  .map-stage { min-height: 52vh; }
  .map-label { max-width: 7rem; font-size: 0.78rem; }
  .map-list { columns: 1; }
  .edges li { grid-template-columns: 1fr; gap: var(--s-1); }
  .reading-layout { display: block; }
  .gutter-traces { display: none; }
  .semantic-gutter { display: none; }
  .body > .gutter-cluster { max-width: none; margin: calc(var(--s-2) * -1) 0 var(--s-6); border-left: 1px solid var(--rule); padding: var(--s-3) 0 var(--s-1) var(--s-4); }
  .body > .gutter-cluster::before { top: 1rem; left: -3px; }
  .domain-idea-list li, .related-ideas li { grid-template-columns: 1fr; gap: var(--s-2); }
  .domain-landscape { margin-right: calc(var(--s-4) * -1); margin-left: calc(var(--s-4) * -1); padding-right: var(--s-4); padding-left: var(--s-4); }
  .map-shell--domain { min-height: 26rem; height: 32rem; }

}

@media (prefers-reduced-motion: reduce) {
  .glimpse-mark, .lens-title, .wander-stop, .gutter-cluster, .semantic-source { transition: none; animation: none; }
}

@media (max-width: 42rem) {
  body.page-see, body.page-wander { height: auto; overflow: auto; }
  .page-see .page, .page-wander .page { height: auto; min-height: calc(100dvh - .7rem); overflow: visible; }
  .see-heading { height: auto; min-height: 9rem; gap: 2rem; }
  .see-since { width: 12rem; }
  .see-landscape { height: 54rem; }
  .see-focus[data-rank="1"] { top: 5%; left: 38%; }
  .see-focus[data-rank="2"] { top: 27%; left: 75%; }
  .see-focus[data-rank="3"] { top: 36%; left: 22%; }
  .see-recent { top: 56%; left: 48%; width: 46%; }
  .see-quiet { top: 73%; left: 7%; width: 40%; }
  .page-wander .page { padding: 0 var(--s-4) var(--s-8); }
  .wander-page { min-height: 53rem; margin: 0 calc(var(--s-4) * -1); }
  .wander-field { display: block; }
  .wander-content { width: min(34rem, calc(100% - 2rem)); margin: 0 auto; padding-top: 5rem; }
  .wander-content h1 { font-size: clamp(3rem, 11vw, 4.6rem); }
  .wander-arrival { position: absolute; right: 1rem; bottom: 4rem; width: 13rem; margin: 0; }
  .wander-actions { left: max(1rem, calc((100% - 34rem) / 2)); bottom: 4rem; width: 17rem; gap: 1.1rem 2rem; }
  .wander-marginalia, .wander-quote { display: none; }
}

@media (max-width: 34rem) {
  .see-heading { display: block; padding-top: 2rem; }
  .see-since { width: 100%; margin-top: 1.4rem; }
  .see-landscape { height: 72rem; margin-right: calc(var(--s-4) * -1); margin-left: calc(var(--s-4) * -1); }
  .see-focus[data-rank="1"] { top: 4%; left: 50%; width: 16rem; }
  .see-focus[data-rank="2"] { top: 22%; left: 28%; width: 10rem; }
  .see-focus[data-rank="3"] { top: 22%; left: 75%; width: 10rem; }
  .see-recent { top: 48%; left: 8%; width: 84%; }
  .see-quiet { top: 70%; left: 8%; width: 84%; }
  .see-legend { right: 8%; bottom: 3%; }
  .wander-page { min-height: 58rem; }
  .wander-content { padding: 4rem 1rem 0; }
  .wander-arrival { right: 2rem; bottom: 10rem; left: 2rem; width: auto; }
  .wander-actions { right: 2rem; bottom: 2rem; left: 2rem; width: auto; }
}

/* ── EXPLORE: the aerial plate ──────────────────────────────────────────── */

.explore-page { margin-left: clamp(-5rem, -5vw, -2rem); margin-right: clamp(-5rem, -5vw, -2rem); }
body.page-explore { height: 100dvh; overflow: hidden; }
.page-explore .page { height: calc(100dvh - .7rem); min-height: 0; padding-bottom: 0; overflow: hidden; }
.explore-heading { padding: clamp(1.55rem, 3.4vw, 2.3rem) clamp(2rem, 4vw, 3.5rem) .2rem; }
.explore-heading h1 { margin: 0; font-size: clamp(2.4rem, 5vw, 2.8rem); font-weight: 400; line-height: .92; letter-spacing: -.035em; }
.explore-heading p { margin: .65rem 0 0; font-size: .98rem; font-style: italic; color: var(--ink-soft); }
.explore-page > .band { display: none; }
/* Everything below the toolbar rules is the map's visual language — how a
   boundary, a trace, a landmark label and a region title are drawn. It was all
   scoped to `.map-shell--explore`, so on the Domain page the SVG had no author
   styling at all and fell back to the UA default: `fill: black`, which is why a
   scoped region rendered as a solid blob. Sizing and toolbar placement stay
   per-variant; the marks do not. */
.map-shell--explore { overflow: visible; border-top: 0; height: calc(100dvh - 10.3rem); min-height: 0; }
.map-shell--explore .map-toolbar { position: absolute; top: -5.45rem; right: clamp(1.5rem, 3.5vw, 2rem); padding: 0; align-items: flex-start; }
.map-shell--explore .map-toolbar > button { border: 0; padding: .3rem .35rem; color: var(--ink-soft); background: transparent; font-size: .64rem; }
.map-shell--explore .map-toolbar > button:hover { color: var(--ink); }
.map-shell--explore .map-toolbar > button span { font-size: .88rem; margin-right: .2rem; }
.map-zoom { display: flex; flex-direction: column; margin-left: 1rem; border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); border-radius: .85rem; overflow: hidden; background: color-mix(in srgb, var(--paper) 80%, transparent); }
.map-zoom button { width: 1.65rem; height: 1.65rem; border: 0; border-bottom: 1px solid var(--rule); background: transparent; color: var(--ink-soft); cursor: pointer; font: .85rem var(--sans); }
.map-zoom button:last-child { border-bottom: 0; }
.map-zoom button:hover, .map-zoom button:focus-visible { color: var(--ink); background: var(--paper-warm); outline: none; }
.map-shell--explore .map-stage { height: 100%; min-height: 0; }
.map-shell .map-vignette { position: absolute; z-index: 1; inset: 1%; pointer-events: none; background: radial-gradient(ellipse at center, transparent 64%, var(--paper) 99%); }
.map-shell .map-labels { z-index: 2; }
.map-shell .map-fields { opacity: .96; }
.map-shell .map-boundary { fill: none; stroke: var(--region-color, var(--mineral-blue)); stroke-width: 1; stroke-dasharray: 1 8; stroke-linecap: round; opacity: .24; }
.map-shell .map-trace { stroke: #89877f; stroke-width: 1; stroke-dasharray: 1 7; opacity: .25; }
.map-shell .map-trace.is-quiet { opacity: .08; }
.map-shell .map-trace.is-related { stroke: var(--mineral-blue); stroke-width: 1.8; opacity: .82; stroke-dasharray: none; }
.map-shell .map-path { stroke: #757d9b; stroke-width: 1.7; opacity: .56; stroke-dasharray: 1 6; }
.map-shell .map-region { display: flex; width: 12rem; transform: translate(-50%, -50%); flex-direction: column; gap: .25rem; color: var(--region-color, var(--mineral-blue)); text-align: center; text-decoration: none; }
.map-shell .map-region:hover .map-region-title, .map-shell .map-region:focus-visible .map-region-title { text-decoration: underline; text-underline-offset: .2em; }
.map-shell .map-label { max-width: 6rem; font-size: .62rem; line-height: 1.13; }
.map-shell .map-label[data-type="idea"], .map-shell .map-label[data-type="project"] { font-size: .67rem; }
.map-shell .map-label[data-kind="idea"] { max-width: 8rem; color: var(--region-color, var(--mineral-blue)); font-size: .82rem; font-style: italic; line-height: 1.05; }
.map-shell .map-scribble { position: absolute; max-width: 7.5rem; transform: translate(-50%, -50%) rotate(var(--scribble-turn, -3deg)); color: var(--region-color, var(--ink-soft)); font-family: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive; font-size: .68rem; line-height: 1.05; text-align: left; opacity: .78; pointer-events: none; }
.map-shell .map-label[data-type="domain"] { display: none; }
.map-legend-panel, .map-filter-panel { position: absolute; z-index: 4; top: 3.5rem; right: clamp(2rem, 5vw, 4rem); max-width: 17rem; padding: .8rem 1rem; border: 1px solid var(--rule); background: color-mix(in srgb, var(--paper) 92%, transparent); box-shadow: 0 .5rem 1.5rem rgb(30 28 20 / 7%); color: var(--ink-soft); font: .68rem/1.4 var(--sans); }
.map-legend-panel .key-field, .map-legend-panel .key-trace { margin-left: 0; }
.map-legend-panel .key-trace { margin-left: .8rem; }

@media (max-width: 34rem) {
  body.page-explore { height: auto; overflow: auto; }
  .page-explore .page { height: auto; min-height: calc(100dvh - .7rem); }
  .explore-page { margin-left: calc(var(--s-4) * -1); margin-right: calc(var(--s-4) * -1); }
  .explore-heading { padding-left: var(--s-4); padding-right: var(--s-4); }
  .map-shell--explore { height: 42rem; min-height: 42rem; }
  .map-shell--explore .map-stage { min-height: 42rem; }
  .map-shell--explore .map-toolbar { right: var(--s-4); }
  .map-shell .map-label { max-width: 6rem; font-size: .66rem; }
}

/* These have to come after the 42rem block: both match at 420px, and the wider one
   re-asserts the absolute coordinates this is trying to undo. Cascade order, not
   specificity, is what decides it. */
@media (max-width: 34rem) {
  .see-landscape { height: auto; padding-bottom: var(--s-6); }
  .see-focus, .see-recent, .see-quiet, .see-legend {
    position: static; top: auto; right: auto; bottom: auto; left: auto;
    width: auto; margin: 0 0 var(--s-6);
  }
  .see-focus[data-rank="1"], .see-focus[data-rank="2"], .see-focus[data-rank="3"] {
    top: auto; left: auto; width: auto;
  }
  .see-legend { justify-content: start; opacity: .75; }
  .wander-page { height: auto; min-height: 0; overflow: visible; }
  .wander-stop { position: static; inset: auto; }
  .wander-field { display: block; height: auto; }
  .wander-content { width: auto; padding-top: 3rem; padding-bottom: var(--s-6); }
  .wander-arrival { position: static; width: auto; margin: var(--s-6) 0 0; }
  .wander-actions { position: static; width: auto; margin-top: var(--s-6); }

  .door-search { position: static; display: block; margin-bottom: var(--s-5); }
  .door { padding-top: var(--s-6); }
  .lenses { flex-wrap: wrap; gap: var(--s-5) var(--s-6); }
}

/* WANDER's stop sits in a 41.5% column with the actions pinned near the bottom, and
   between about 42rem and 64rem that column is narrow enough for a long stop to run
   tall and reach them — the reserve added to `.wander-content` only buys so much,
   and the stop's length is whatever the garden hands you. Below the width the
   composition needs, it flows; last in the file so it wins over the 42rem block,
   which re-asserts the absolute coordinates. */
@media (max-width: 64rem) {
  body.page-wander { height: auto; overflow: auto; }
  .page-wander .page { height: auto; min-height: calc(100dvh - .7rem); overflow: visible; }
  .wander-page { height: auto; min-height: 0; overflow: visible; }
  .wander-stop { position: static; inset: auto; }
  .wander-field { display: block; height: auto; }
  .wander-content { width: auto; max-width: 36rem; padding-top: 3rem; padding-bottom: var(--s-6); }
  .wander-arrival { position: static; width: auto; max-width: 24rem; margin: var(--s-6) 0 0; }
  .wander-actions { position: static; width: auto; margin-top: var(--s-6); }
}