/*
  The look of it, which BRAND.md and the app already decide.

  Colour belongs to the plants. Chrome is white at four opacities on black, and
  the same hierarchy read the other way up on a light ground — the alphas are
  not mirrored, because dark type on a light ground reads heavier at the same
  opacity. Both sets are lifted from `Chrome.swift` rather than picked again.

  The app offers dark, light, and follow-the-phone. A web page has no settings
  screen, so it follows the reader: `prefers-color-scheme` is the whole of it.

  Nothing here assumes left to right — every inset, margin and border below is a
  logical property. That was written when no round-two language was right to
  left, on the argument that the pass should not have to be earned twice. The
  pass has arrived: Arabic and Hebrew are in scope, `page.js` sets `dir` on the
  document from the language, and the cost of it here is the one rule at the
  foot of this file rather than a rewrite.
*/

:root {
  /* The greys, from `Chrome.swift`. Contrast computed rather than eyeballed:
     muted 10.5:1, faint 6.5:1, section labels 13.1:1 on black. */
  --ground: #000000;
  --ink: #ffffff;
  --muted: rgba(255, 255, 255, 0.72);
  --faint: rgba(255, 255, 255, 0.56);
  --section: rgba(255, 255, 255, 0.8);
  --hairline: rgba(255, 255, 255, 0.24);
  --passage-ink: rgba(255, 255, 255, 0.84);
  /* A key's wash: enough to tell a kind of key from its neighbours, not
     enough to read as a filled button. */
  --wash: rgba(255, 255, 255, 0.09);

  /* The stage. `StageBackdrop`: a cool slate at hue 0.60, saturation 0.30,
     brightness 0.26, a little above centre, falling away to nothing rather
     than to black. */
  --pool: radial-gradient(
    circle 85vmax at 50% 46%,
    rgba(46, 54, 66, 1) 0%,
    rgba(46, 54, 66, 0.8403) 8.33%,
    rgba(46, 54, 66, 0.6944) 16.67%,
    rgba(46, 54, 66, 0.5625) 25%,
    rgba(46, 54, 66, 0.4444) 33.33%,
    rgba(46, 54, 66, 0.3403) 41.67%,
    rgba(46, 54, 66, 0.25) 50%,
    rgba(46, 54, 66, 0.1736) 58.33%,
    rgba(46, 54, 66, 0.1111) 66.67%,
    rgba(46, 54, 66, 0.0625) 75%,
    rgba(46, 54, 66, 0.0278) 83.33%,
    rgba(46, 54, 66, 0.0069) 91.67%,
    rgba(46, 54, 66, 0) 100%
  );

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue",
    sans-serif;
  --serif: ui-serif, "New York", Georgia, "Times New Roman", serif;

  /* `Chrome.readableWidth`. A paragraph set to the full width of a screen is a
     wall; the plant is allowed the whole screen, the words are not. */
  --measure: 440px;
}

@media (prefers-color-scheme: light) {
  :root {
    /* A warm near-white rather than white, so the ground is never the
       brightest thing on screen. */
    --ground: #f6f6f6;
    --ink: #121212;
    --muted: rgba(18, 18, 18, 0.7);
    /* 0.6 rather than 0.52 since 14 October 2026: 0.52 came to #7f7f7f on
       this ground, 3.71:1, under AA for the small print it sets (a passage's
       source, the dictionary's labels, the foot's link); 0.6 is #6d6d6d,
       4.79:1, and still the faintest of the four. On black the dark set's
       0.56 is 6.5:1 and stays. */
    --faint: rgba(18, 18, 18, 0.6);
    --section: rgba(18, 18, 18, 0.78);
    --hairline: rgba(18, 18, 18, 0.2);
    --passage-ink: rgba(18, 18, 18, 0.84);
    --wash: rgba(18, 18, 18, 0.06);

    /* Pulled back to a third on a light ground, where a saturated glow is a
       stain rather than a pool. */
    --pool: radial-gradient(
      circle 85vmax at 50% 46%,
      rgba(46, 54, 66, 0.3) 0%,
      rgba(46, 54, 66, 0.2521) 8.33%,
      rgba(46, 54, 66, 0.2083) 16.67%,
      rgba(46, 54, 66, 0.1687) 25%,
      rgba(46, 54, 66, 0.1333) 33.33%,
      rgba(46, 54, 66, 0.1021) 41.67%,
      rgba(46, 54, 66, 0.075) 50%,
      rgba(46, 54, 66, 0.0521) 58.33%,
      rgba(46, 54, 66, 0.0333) 66.67%,
      rgba(46, 54, 66, 0.0187) 75%,
      rgba(46, 54, 66, 0.0083) 83.33%,
      rgba(46, 54, 66, 0.0021) 91.67%,
      rgba(46, 54, 66, 0) 100%
    );
  }
}

* {
  box-sizing: border-box;
}

/* A class that sets `display` outranks the browser's own rule for `hidden`, so
   the sections this page shows one at a time need saying twice. */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
}

/* Screen space, behind everything, as the app draws it. */
.pool {
  position: fixed;
  inset: 0;
  background: var(--pool);
  pointer-events: none;
}

.page {
  position: relative;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: 28px;
  padding-block: max(32px, env(safe-area-inset-top)) 40px;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
}

/* The three voices, from `Chrome.swift` and `design/Type.dc.html`. */

.label {
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.218em; /* tracking 2.4 at 11 */
  text-transform: uppercase;
  color: var(--faint);
  margin: 0;
}

.heading {
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.14em; /* tracking 2.8 at 20 */
  text-transform: uppercase;
  color: var(--section);
  margin: 0;
}

/* Turkish, Azerbaijani, Greek and Irish keep the case they were written in.
   `Chrome.keepsWrittenCase`, and Turkish is in the chooser today. */
[data-keeps-case] .label,
[data-keeps-case] .heading {
  text-transform: none;
}

.body {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.45;
  color: var(--muted);
  margin: 0;
  max-width: var(--measure);
}

.quiet {
  color: var(--faint);
}

.value {
  text-transform: none;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* The one serif: the binomial a plant is given. An italic serif for a species
   name is the convention botany already has. */
.plant-name {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 300;
  font-style: italic;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}

.tagline {
  font-size: 24px;
  color: var(--section);
}

.masthead {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-end: 6px;
}

/* ── The bar ──────────────────────────────────────────────────────────────
   The mark and the wordmark, which lead to the front page, and the ways on
   from here as a row of glyphs at the other end — §The bar's glyphs, near the
   end of this file, draws them.

   **The site had no way between its pages at all.** Every path was reached by
   typing it or by following a link minted elsewhere, and the one route into
   the garden was the front page. So this is on every page, including the
   front, where the mark is not a link, because the front is where it leads,
   and the glyphs are the whole point of having a bar there.

   It is the masthead with two things added rather than a second kind of
   header: the same row, the same gap, the same mark at the same size. What is
   new is a rule under it — one hairline, which is the only edge this project
   draws — and the glyphs at its end. Nothing here is filled, coloured or
   underlined: each glyph is a line drawing in a hairline ring, and the link
   home is the mark and the wordmark as they stand, with no line under them.

   **It does not say which area you are standing in**, though it did for a day.
   The heading under the plot says that, and a bar naming the area a few hundred
   points above its own heading is one screen saying the same words twice.

   It wraps rather than shrinking. On a narrow phone the mark and wordmark keep
   the first line and the glyphs sit centred underneath, which is a bar of two
   lines instead of one with its ways squeezed into what is left. */
.masthead.bar {
  inline-size: 100%;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 16px;
  margin-block-end: 0;
  padding-block-end: 14px;
  border-block-end: 1px solid var(--hairline);
}

.bar__home {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.bar__ways {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  /* Pushed to the end while the bar is one line, and harmless once it wraps. */
  margin-inline-start: auto;
}


/* **The bare mark, with no tile, since 11 October**, so there is now a light and
   dark pair. The tile carried its own ground and so needed none; without it the
   drawing stands on the page's ground and has to be drawn for it.
   `tools/icon/make_icon.py` writes both from the icon's own dials, beside the
   icon and never by hand: `mark-dark.svg` is the icon's drawing exactly, and
   `mark-light.svg` is the same lines with the ramp darkened to 4.6:1 on the
   light ground and the warm white leaf in ink. A page that follows the reader picks
   between them with a `<picture>`; an area is always night, so it carries the
   dark one alone, and a light source there would put the dark-ground drawing's
   opposite on a black page. The tab and the home screen keep the tiled
   `icon.svg` and `icon-180.png`, where a ground is wanted.

   No rounded corner any more: there is no tile to round, and a radius on the
   box would only shave the drawing's own ink. The drawing fills the box to its
   ink, less a 4 % inset, where the icon kept it inside the tile's margin, so it
   reads larger at the same 60 px.

   **Larger since 24 September**, with the wordmark: at 44 px and 12 px, light and grey, the
   name sat small over a page of full-width plots and bold headings,
   and read as a caption to the site rather than its name. Marcus. */
.mark {
  inline-size: 60px;
  block-size: 60px;
  display: block;
}

.wordmark {
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--ink);
}

.seed,
.about {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  inline-size: 100%;
}

/* The stage. The plant is drawn here, at these proportions. */
.stage {
  inline-size: min(100%, 300px);
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  margin-block: 4px;
}

.stage__plant {
  flex: 1;
  inline-size: 100%;
}

/* Where the plant stands. Monoline, even weight, round ends. */
.stage__ground {
  inline-size: 64px;
  block-size: 1px;
  border-radius: 1px;
  background: var(--hairline);
}

.passage {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  max-width: var(--measure);
}

.passage p {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--passage-ink);
  margin: 0;
  text-wrap: pretty;
}

.passage footer {
  color: var(--faint);
}

.invitation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-block-start: 22px;
  border-block-start: 1px solid var(--hairline);
  inline-size: 100%;
}

.invitation h2 {
  color: var(--section);
}

.notice {
  color: var(--muted);
  max-width: var(--measure);
  line-height: 1.6;
}

.foot {
  margin-block-start: auto;
  padding-block-start: 34px;
}

/* ── The foot ─────────────────────────────────────────────────────────────
   The bar turned over: two things at opposite ends — the privacy notice at the
   start, where the mark stands in the bar, and the language at the end, where
   the way back to the garden does. They were a paragraph and a footer one
   under the other, which was a screen of scrolling for two links.

   **No hairline above it since 24 September.** Everything above the foot sits
   in a band or a card of its own now, so a rule there closed off nothing and
   was one more line on the page. Marcus.

   It wraps as the bar does: on a narrow phone the two sit centred, one line
   each, rather than squeezed. */
.bar-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  inline-size: 100%;
  margin-block-start: auto;
  padding-block: 14px 0;
}

.bar-foot__link {
  color: var(--faint);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color 200ms ease-out;
}

.bar-foot__link:hover,
.bar-foot__link:focus-visible {
  color: var(--ink);
}

@media (max-width: 420px) {
  .bar-foot {
    justify-content: center;
  }
}

/* A control that reads as a line of text rather than a button. */
.chooser {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--faint);
}

.chooser__field {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.chooser__select {
  appearance: none;
  background: transparent;
  border: 0;
  border-block-end: 1px solid var(--hairline);
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.04em;
  padding-block: 3px;
  padding-inline: 2px 22px;
  margin: 0;
  cursor: pointer;
}

.chooser__select:focus-visible {
  outline: 1px solid var(--hairline);
  outline-offset: 4px;
}

.chooser__mark {
  position: absolute;
  inset-inline-end: 2px;
  inline-size: 16px;
  block-size: 16px;
  color: var(--faint);
  pointer-events: none;
}

.noscript {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: 28px;
  padding-block-end: 32px;
  text-align: center;
}

/* The app arrives a piece at a time, at about the pace the piece is taken in.
   One step of that here: the page settles rather than snapping into place.

   The hiding is keyed to an attribute the script sets for itself, so a script
   that never arrives leaves a visible page rather than an invisible one. */
.page {
  transition: opacity 420ms ease-out;
}

body[data-loading]:not([data-ready]) .page {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .page {
    transition: none;
  }

  body[data-loading]:not([data-ready]) .page {
    opacity: 1;
  }
}

/* The sheet under `?`.

   Every row is labelled by the control it operates, so this is a table of the
   page's own words against their keys — see assets/js/keys.js for why it holds
   no wording of its own. It is the only overlay on the site, and it is drawn on
   the same four opacities as everything else. */
.keysheet {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.62);
}

@media (prefers-color-scheme: light) {
  .keysheet {
    background: rgba(246, 246, 246, 0.72);
  }
}

.keysheet-panel:focus-visible {
  outline: 1px solid var(--hairline);
  outline-offset: 3px;
}

.keysheet-panel {
  position: relative;
  max-inline-size: 30rem;
  inline-size: 100%;
  max-block-size: 80vh;
  overflow-y: auto;
  padding: 22px 24px 24px;
  background: var(--ground);
  border: 1px solid var(--hairline);
  border-radius: 14px;
}

.keysheet-panel h2 {
  margin: 0 0 14px;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--section);
}

/* Two columns, keys then what they do. `dt` and `dd` rather than a table
   because that is what this is: a term and its description. */
.keysheet-panel dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px 16px;
  margin: 0;
  align-items: baseline;
}

.keysheet-panel dt {
  display: flex;
  gap: 5px;
  justify-content: flex-end;
}

.keysheet-panel dd {
  margin: 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.92rem;
}

.keysheet-panel kbd {
  min-inline-size: 1.55em;
  padding: 2px 6px;
  border: 1px solid var(--hairline);
  border-radius: 5px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.8rem;
  text-align: center;
}

/* A rule between groups, drawn across both columns. */
.keysheet-rule {
  grid-column: 1 / -1;
  block-size: 1px;
  margin: 5px 0;
  background: var(--hairline);
}


/* Scripts the label voice must not letter-space.

   `data-keeps-case` above undresses the labels; this one is sharper, because on
   Arabic tracking is not a stylistic choice but a defect. Arabic is a joined
   script and space between letters severs the joins, leaving a row of
   disconnected forms for the reader to reassemble. Persian and Urdu are the same
   script and the same damage. CJK is here for a milder reason: it is not hurt,
   but a Han or Kana line tracked to a Latin caption's rhythm reads as badly set,
   and the small-caps device it imitates has no meaning in a script with no
   capitals.

   See assets/js/languages.js §NEVER_TRACKED, which is where the list lives. */
[data-untracked] .label,
[data-untracked] .heading,
[data-untracked] .plant-name,
[data-untracked] .chooser__select,
[data-untracked] .keysheet-panel h2 {
  letter-spacing: normal;
}

/* The garden.

   Three states on one page — the map, an area, one plant — and they share a
   vocabulary with the rest of the site rather than inventing one: the same four
   opacities, the same hairline, the same label voice. See assets/js/walk.js. */
.garden-map,
.garden-area,
.garden-plant {
  inline-size: 100%;
  max-inline-size: 44rem;
  margin-inline: auto;
  padding-inline: 20px;
}

/* Five across and two down, the layout derived in garden.js. It collapses to
   two across on a phone, which keeps the reading order — a walk right is still
   a walk right, it just wraps. */
/* And it is a slope. The garden falls from the Cold Frame end to the Crossing
   — `COLUMN_RISE` in garden.js — so each column stands a little higher than
   the one to its right, and the map a reader learns the garden from is a
   hillside rather than a table. The room for the lift is added at the top, so
   nothing moves but the cells. */
/* **Left to right in every language**, since 10 October 2026. A grid's columns
   follow the writing direction, so under Arabic or Hebrew this map used to
   mirror while the arrow keys went on following the true one: Left from the
   Knot Garden went to the Orchard, drawn on the right. The map is a drawing
   of a place, as the pad's arrows are arrows (`screenWay` in garden.js), so
   the grid is pinned and each card's name is put back in the reader's own
   direction. */
/* `minmax(0, 1fr)` rather than `1fr`, since 14 October 2026: a `1fr` column
   will not shrink below its longest word, so at a tablet's 768–820 px one long
   area name — Finnish *Puukujanne*, and the same in Swedish, Icelandic,
   Norwegian and Macedonian — widened its column and the map ran off the
   screen (design/mass-test-2026-10-13/site/README.md, finding 4). Now the five
   columns share the width whatever is in them, and a long name breaks inside
   its cell (`.garden-cell__name`). */
.garden-grid {
  display: grid;
  direction: ltr;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  --map-rise-px: 6.7px;
  padding-block-start: calc(var(--map-fall, 4.8) * var(--map-rise-px));
}

[dir="rtl"] .garden-cell {
  direction: rtl;
}

/* **Wider than the words, as the map always looked.** The map sits in the
   page's 440 px measure, so its five columns used to fit only by spilling out
   of it: each `1fr` column took its longest word, and the grid ran on past the
   column's right edge — about 90 px in English, 250 in Finnish, which at a
   tablet's width was off the screen. Shared out evenly inside the measure the
   columns are 61 px and every name breaks into syllables. So from the width
   where the map stops being a scrolling strip, it is given the width its five
   columns need, centred over the page rather than hanging off one side: about
   what the English map took, now for every language. */
@media (min-width: 46.01rem) {
  .garden-map {
    --map-width: min(36rem, 100vw - 32px);
    inline-size: var(--map-width);
    max-inline-size: none;
    /* Auto margins would go to nothing on a box wider than its column and
       leave it hanging off the right; these are the overhang, halved. */
    margin-inline: calc((100% - var(--map-width)) / 2);
  }
}

/* On a narrow screen the map scrolls sideways rather than wrapping.

   Wrapping to two columns was tried and it is wrong: the ten areas reflow in
   source order, so `peace` comes to sit beside `travel` — opposite corners of
   the real map — and the two axes stop meaning anything. Worse, the arrow keys
   go on following the true map, so Right from `ground` moves the cursor to a
   cell that is drawn below and to the left. **The picture and the keys have to
   agree, and the map is the thing that must not bend.**

   So it keeps its five columns at a legible width and the container scrolls.
   The page itself never scrolls sideways; this one element does. */
@media (max-width: 46rem) {
  .garden-map {
    padding-inline: 0;
  }

  .garden-grid {
    grid-template-columns: repeat(5, minmax(8.5rem, 1fr));
    overflow-x: auto;
    padding-inline: 20px;
    padding-block-end: 6px;
    scroll-padding-inline: 20px;
  }

  .garden-cell {
    scroll-snap-align: start;
  }
}

.garden-cell {
  position: relative;
  transform: translateY(calc(var(--rise, 0) * var(--map-rise-px, 6.7px) * -1));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  min-block-size: 8.5rem;
  padding: 12px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: none;
  color: var(--muted);
  font-family: var(--sans);
  text-align: start;
  cursor: pointer;
  transition: border-color 240ms ease-out, color 240ms ease-out;
}

.garden-cell:hover,
.garden-cell:focus-visible,
.garden-cell.is-hovered {
  border-color: var(--muted);
  color: var(--ink);
  outline: none;
}

.garden-cell__name {
  font-size: 0.86rem;
  line-height: 1.3;
  /* Hyphenated where the browser knows the language, and broken anywhere as a
     last resort, so a name longer than its cell stays in it. */
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* How full an area is, as a bar rather than a number — a number would be a
   string, and this is the same fact in no language at all. The count is on the
   cell's own aria-label for anybody listening rather than looking. */
.garden-cell__fill {
  display: block;
  block-size: 2px;
  background: var(--hairline);
  position: relative;
  overflow: hidden;
}

.garden-cell__fill::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: calc(var(--fill, 0) * 100%);
  background: var(--muted);
}

/* An area is a field, and a plant's place in it is its place. Square, so the
   256 x 256 of cells behind it is not stretched into a rectangle. */
.area-plot {
  position: relative;
  aspect-ratio: 1;
  margin-block-start: 18px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
}

.plot-plant {
  position: absolute;
  inline-size: 9px;
  block-size: 9px;
  margin: -4px 0 0 -4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--faint);
  cursor: pointer;
  transition: background-color 200ms ease-out, transform 200ms ease-out;
}

.plot-plant:hover,
.plot-plant:focus-visible {
  background: var(--ink);
  outline: none;
  transform: scale(1.5);
}

/* The pad. Four keys in the shape of the directions they mean, which is the one
   arrangement nobody has to be told. */
.pad {
  display: grid;
  grid-template-columns: repeat(3, 3rem);
  grid-template-rows: repeat(2, 3rem);
  gap: 6px;
  justify-content: center;
  margin-block-start: 26px;
}

.pad-key {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color 200ms ease-out, color 200ms ease-out;
}

.pad-key:hover:not(:disabled),
.pad-key:focus-visible:not(:disabled) {
  border-color: var(--muted);
  color: var(--ink);
  outline: none;
}

/* A direction with nothing that way is disabled rather than removed: the pad is
   a fixed shape and must not move under the hand. */
.pad-key:disabled {
  opacity: 0.3;
  cursor: default;
}

.pad-key[data-go="up"] { grid-column: 2; grid-row: 1; }
.pad-key[data-go="left"] { grid-column: 1; grid-row: 2; }
.pad-key[data-go="down"] { grid-column: 2; grid-row: 2; }
.pad-key[data-go="right"] { grid-column: 3; grid-row: 2; }

.garden-plant {
  text-align: center;
}

.garden-foot {
  margin-block-start: 30px;
  text-align: center;
}

/* Links, which this site had none of until the front page.
   Every path here was reached by typing it or by following one minted
   elsewhere, so an anchor had never been drawn and took the browser's own:
   underlined, and in a blue belonging to no palette in this project. The rule
   is the chrome's rule — the ink at two weights and nothing else carrying
   meaning by colour. A link is distinguished by where it sits and what it
   says, and underlined only when a reader reaches for it. */
a {
  color: var(--ink);
  text-decoration-color: var(--hairline);
  text-underline-offset: 0.2em;
  transition: text-decoration-color 200ms ease-out;
}

a:hover,
a:focus-visible {
  text-decoration-color: currentColor;
}

/* An anchor wearing the button's capsule is a button to a reader, and a
   capsule with a line under its word is neither. The underline comes back on
   hover as it does everywhere else, drawn on the border instead. */
a.quiet-button {
  display: inline-block;
  text-decoration: none;
}

.quiet-button {
  padding: 8px 16px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 200ms ease-out, color 200ms ease-out;
}

.quiet-button:hover,
.quiet-button:focus-visible {
  border-color: var(--muted);
  color: var(--ink);
  outline: none;
}

/* The passage on a garden plant, which needs room the seed page gives it with
   a rule above. Here the area label sits directly over it. */
.garden-plant .passage {
  margin-block-start: 22px;
}

/* ── Testers ──────────────────────────────────────────────────────────────
   The test roster and the bar that says which language you are standing in.
   See assets/js/testers.js for what a tester is, and for why there are no
   accounts behind any of this.

   Everything below is chrome about the page rather than part of it, so it is
   the one place on the site written with physical `left` rather than the
   logical properties the rest of the CSS uses: the bar must not flip under a
   right-to-left language, because the page under it flipping is the thing the
   bar is there to report. `View.drawnHand()` makes the same distinction in the
   app — layout mirrors, drawn marks do not. */

.tester-bar {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 10px 16px;
  background: var(--ground);
  border-block-end: 1px solid var(--hairline);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 300;
  direction: ltr;
  text-align: left;
}

.tester-bar__who {
  color: var(--ink);
  letter-spacing: 0.06em;
}

.tester-bar__where {
  color: var(--faint);
}

.tester-bar__out {
  margin-left: auto;
  padding: 3px 12px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: border-color 200ms ease-out, color 200ms ease-out;
}

.tester-bar__out:hover,
.tester-bar__out:focus-visible {
  border-color: var(--muted);
  color: var(--ink);
  outline: none;
}

/* The door, and the roster behind it. */

.door,
.roster {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-block-start: 26px;
  max-width: var(--measure);
  inline-size: 100%;
}

.door__field {
  appearance: none;
  background: transparent;
  border: 0;
  border-block-end: 1px solid var(--hairline);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.04em;
  padding-block: 6px;
  inline-size: 100%;
}

.door__field:focus-visible {
  outline: none;
  border-block-end-color: var(--muted);
}

.roster__list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  inline-size: 100%;
  /* Forty-three rows is a long page and a short scroller. A scroller keeps the
     filter above it in reach, which is what the list is walked with. */
  max-block-size: 52vh;
  overflow-y: auto;
}

.roster__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  inline-size: 100%;
  padding: 9px 4px;
  border: 0;
  border-block-end: 1px solid var(--hairline);
  background: none;
  color: var(--muted);
  font-family: var(--sans);
  text-align: start;
  cursor: pointer;
  transition: color 160ms ease-out, background-color 160ms ease-out;
}

.roster__row:hover,
.roster__row:focus-visible {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
  outline: none;
}

.roster__who {
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.05em;
}

.roster__what {
  font-size: 12px;
  color: var(--faint);
}

.roster__empty {
  padding: 12px 4px;
}

/* MARK: An area page

   `/walk`, `/quiet`, `/cross`, `/orchard`, `/knot` and `/seedbed`: a plot
   floating in the real night sky, and the page's own words underneath it.

   **The words used to lie across the drawing.** The plot filled the viewport
   and the title and its paragraph ran down the middle from the top, over the
   planting — which is the one part of the page anybody came for — held legible
   by a gradient that took the light off the plot to make room for them. Marcus
   settled it on 23 September: the sky and the plot floating in it are the
   metaphor, and words floating over that break it. So the drawing keeps a band
   of the screen to itself and the words sit below it, on the page rather than
   in the sky.

   **The arrangement is the app's.** `PlantDetailView` gives the drawing the
   middle of the screen and stands what it has to say underneath in one block —
   a name, then the supporting lines, then the marks you can press, inside the
   readable width and centred. Same order, same rhythm, in this project's own
   tokens: `.heading` for the name, `.body` for the sentence under it,
   `--measure` for the column, and the serif still nowhere near either of them.

   **There is still no edge.** The night is not cut off where the words begin;
   it is masked out over a hundred and fifty points, so the stars thin and
   stop. A panel behind the text would have drawn four lines on a page whose
   whole argument is that it has none.

   The page forces dark: every other page here follows the reader's system, and
   this one cannot, because the area is lit by its own sky. `.night` pins the
   tokens rather than the light-mode block being written round it, so one
   declaration says it and `prefers-color-scheme` above is left alone. */
.night {
  --ground: #000000;
  --ink: #ffffff;
  --muted: rgba(255, 255, 255, 0.72);
  --faint: rgba(255, 255, 255, 0.56);
  --section: rgba(255, 255, 255, 0.8);
  --hairline: rgba(255, 255, 255, 0.24);
  --passage-ink: rgba(255, 255, 255, 0.84);
  --wash: rgba(255, 255, 255, 0.09);
  background: #000000;
  color: #ffffff;

  /* How much of the screen the drawing gets. Floored so a short window does
     not reduce a garden to a smear, and capped so a tall one does not leave
     the words below the fold.

     **It is the largest band the words still fit under**, which is the trade
     this arrangement makes: the plot used to have the whole viewport and the
     words lay across it, and it is about half the size now. Set by looking, at
     1280 x 800 and at 375 x 812.

     `--bar` is how far down the screen that band starts — the page's top
     padding, the mark, and the rule under it — and is only ever used to say
     where the sky should have stopped. It is a measurement rather than a
     setting: nothing is positioned by it. */
  --scene: clamp(230px, 46svh, 520px);
  --bar: 92px;
}

/* A wide window gives the words more room than they need. The paragraph is two
   sentences and it is three lines at 375 and three lines at 1280; everything
   the extra height bought was sky. So the band takes more of the screen and the
   bar sits nearer the top of it.

   **A media query rather than one larger clamp.** A phone's proportions are
   already right, and this number there would push the keys off the bottom of
   the screen.

   It is as much as the band can have with the pad and the map still above the
   fold on a 1280 x 800 window, which was the measurement that set it. The privacy line
   and the chooser fall below, and scroll to. */
@media (min-width: 60rem) {
  .night {
    --scene: clamp(320px, 55svh, 700px);
    --bar: 76px;
  }

  .walk-page {
    padding-block-start: max(20px, env(safe-area-inset-top));
  }

  .walk-page > .masthead.bar {
    padding-block-end: 10px;
  }

  /* A taller band needs less air under it to be separate from the words. */
  .walk-page .heading {
    margin-block-start: 20px;
  }
}

/* The sky, behind everything, still the whole viewport — and then masked, so
   it has a horizon rather than a hem.

   The stars thin out over the last hundred and forty points of the drawing's
   band and there are none below it, so the words sit on the page and not in
   the sky. Faded rather than cut, because a rectangle of night ending in a
   straight line is an edge, and this project draws one edge: the hairline
   under the bar. */
/* Absolute rather than fixed, which it was while it was the whole page. The
   plot is in the flow now, so a sky pinned to the glass would slide out from
   under it the moment a short window made the page scroll. */
.walk {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  width: 100%;
  height: 100svh;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(var(--bar) + var(--scene) - 140px),
    transparent calc(var(--bar) + var(--scene))
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(var(--bar) + var(--scene) - 140px),
    transparent calc(var(--bar) + var(--scene))
  );
}

/* Behind the plots and behind the pool of light, so the area stands in front
   of the sky rather than on top of a picture of one. */
.walk #sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}

/* The pool of light is where the plot is, which is no longer the middle of the
   screen. */
.walk .pool {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    ellipse 50% 40% at 50% 34%,
    rgba(255, 255, 255, 0.08),
    transparent 70%
  );
}

/* The drawing's band. In the page's own flow rather than fixed behind it, so
   nothing has to be told twice how tall it is: the words start where the
   canvas ends. `makePlotStage` watches the canvas and fits the plot to
   whatever box it is given, so this is the only place the size is said. */
.walk-stage {
  display: block;
  inline-size: 100%;
  block-size: var(--scene);
  flex: none;
  /* Answers to fingers and a pointer since the pad could zoom: a pinch, a
     trackpad's pinch, and closer in a drag (movepad.js). At the whole plot a
     finger moving up or down it scrolls the page, as anywhere else. */
  pointer-events: auto;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

/* Closer in, the plot is dragged, so a finger on it moves the plot rather
   than the page. The page is still scrolled from anywhere else on it. */
.walk-stage--close {
  touch-action: none;
  cursor: grab;
}

.walk-stage--held {
  cursor: grabbing;
}

/* The Wild Fields.

   The field and the fireflies over it share one band, and the band is
   masked: opaque in the middle, thinning to nothing at every side, so the
   field runs off into the night rather than stopping at the edge of a
   rectangle. Every other area draws a plot with an edge of its own and sky
   round it; the wild has no edge, so its picture has none either, and the
   Milky Way it is lit by shows through where it thins. Two gradients, one
   across and one down, multiplied — a single ellipse left the corners
   lighter than the middle of each side. */
.wild-band {
  position: relative;
  inline-size: 100%;
  block-size: var(--scene);
  flex: none;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 26%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 26%, #000 80%, transparent 100%);
  mask-composite: intersect;
}

.wild-band .walk-stage {
  inline-size: 100%;
  block-size: 100%;
}

/* The fireflies lie over the field and let every touch through to it. */
.wild-flies {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
}

/* A column down the middle of the screen, with the drawing full width at the
   top of it and everything else kept to the measure. `.page`'s own width would
   have squeezed the plot into four hundred and forty points on a desktop. */
.walk-page {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: none;
  padding-inline: 0;
  gap: 0;
}

.walk-page > *:not(.walk-stage) {
  inline-size: 100%;
  max-inline-size: var(--measure);
  padding-inline: 28px;
}

/* The Wild Fields' band is the drawing, as the stage is on an area page, and
   runs the full width of the window like it. */
.walk-page > .wild-band {
  max-inline-size: none;
  padding-inline: 0;
}

/* The bar is the one thing here that may be wider than the measure. The
   measure is for prose; the bar is a row of three things that want to be on
   one line, and on a page whose column is the whole window there is no reason
   to make them wrap at four hundred and forty points. */
.walk-page > .masthead.bar {
  max-inline-size: min(100%, 760px);
}

.walk-page a,
.walk-page button,
.walk-page select,
.walk-page .chooser {
  pointer-events: auto;
}

/* The app's rhythm under the drawing: the name, then the sentence under it,
   then a gap, then the things you can press. */
.walk-page .heading {
  margin-block-start: 26px;
}

.walk-about {
  margin-block-start: 12px;
  max-width: var(--measure);
}

.walk-note {
  margin-block-start: 1rem;
  /* Brighter than the faint labels elsewhere: it is the one line on the page
     somebody actually has to read. */
  color: var(--muted);
}

/* ── The Seedbed's drills ─────────────────────────────────────────────────
   The six drills of a bed, under the paragraph: what claimed each one and how
   far along it is sown.

   **Only this area has a list under its paragraph** — every area has the short
   block saying what its plants mean (`meanings.js`) — **and the reason is that
   its labels carry none.** `Organic.rowLabel` leaves the tongue blank on purpose —
   at the size a plot is drawn, a word on it would be four pixels tall and would
   fight the plants — so the fact the whole area is built on, which kind claimed
   which drill, has nowhere to be but here.

   Two columns: the kind, right against the middle, and its eight places beside
   it. A grid rather than a row apiece, so the marks of all six line up whether
   the kind beside them is *rubra* or *patentifolia* — six ragged rows would
   read as six unrelated facts rather than as one bed. */
.drills {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  /* The row gap is the drill gap, and it is the whole legibility of the list.
     At a hairline's worth the six rows of marks close into one block of
     texture, which is a swatch and not six drills — the same fault the Knot's
     gravel had, one dimension down. */
  gap: 13px 14px;
  margin-block-start: 18px;
  list-style: none;
}

.drill {
  display: contents;
}

/* The serif, which this site reserves for the binomial a plant is given. An
   epithet is half a binomial — and the half that was chosen to say what the
   plant is like — so it wears the same voice at the size the line needs.
   Smaller than `.plant-name` and not a heading: six of these are a list of what
   is standing in the bed, not six titles. */
.drill__kind {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--ink);
  text-align: end;
}

/* How far along a drill is sown, as eight marks rather than as a number — the
   same argument `.garden-cell__fill` makes, and the same fact in no language at
   all. They fill from the end the drill fills from, which is the end its label
   stands at. The count is on the row's own label for anybody listening rather
   than looking. */
.drill__places {
  display: inline-flex;
  gap: 4px;
}

.drill__place {
  inline-size: 11px;
  block-size: 2px;
  background: var(--hairline);
}

.drill__place--sown {
  background: var(--muted);
}

/* ── The ways on ─────────────────────────────────────────────────────────
   Under the words, the two things a reader can do from here: move about this
   area with the pad, or leave it for another with the map. Both are drawn
   rather than written — the pad in glyphs and the map as the garden's own
   five by two — so the only words below the paragraph are the paragraph's
   and the short block on what the area's plants mean.

   **Under the text, and never over the drawing.** The sky and the plot are
   kept clear of anything floating, which is why the words moved below them in
   the first place; a control laid over the plot would undo that.

   It takes the slack, so on a tall window the pad and the map sit at the foot
   of it instead of trailing off under the words. It may be wider than the
   measure, as the bar may: on a wide window the pad and the map stand side by
   side, which keeps the map above the fold at 1280 x 800, and on a phone the
   row wraps and the map sits under the pad. */
.walk-page > .walk-ways {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 22px 56px;
  inline-size: 100%;
  max-inline-size: min(100%, 760px);
  margin-block: auto 0;
  padding-block: 22px;
  /* A hairline above and below, so the pad and the map read as one band of
     ways out, set apart from the words above and the foot below. */
  border-block: 1px solid var(--hairline);
}

/* Room between the words and the band, whatever is last before it — the
   paragraph, the Seedbed's drills, or the note while a plot grows. */
.walk-page > .walk-about,
.walk-page > .drills,
.walk-page > .walk-note {
  margin-block-end: 22px;
}

/* The foot is as wide as the bar on an area page, so the two frame it alike —
   and it takes the band's lower hairline as its own, sitting straight under
   it, rather than drawing a second one a finger's width below. */
.walk-page > .bar-foot {
  max-inline-size: min(100%, 760px);
  border-block-start: 0;
  padding-block-start: 12px;
}

/* `.foot` takes the slack on every other page. Here `.walk-ways` above it is
   already doing that, and two of them share the gap out between them, which
   leaves the pad stranded halfway down the page. */
.walk-page .foot {
  margin-block-start: 0;
}

/* The pad. Since 24 September one cluster, three keys by three: the four
   directions as a cross, the two magnifiers in its right-hand corners, and
   the two rings in its left-hand corners, beside the cross. Every way of
   changing what the window shows is in one place a thumb can cover, and the
   empty middle is what makes the cross read as a cross. It used to be two
   pairs in a row, paging and turning. Written by `movepad.js`. `pad-key` is
   the garden's own key, shared with `/g`'s pad so the two pages cannot drift
   into two kinds of button.

   A rings column a gap away from the cross was tried first, and the empty
   corners between them read as a hole rather than as a gap.

   **Left to right in every language.** Up, down, left and right are the
   screen's directions, not the reading direction's, so the pad must not
   mirror under Arabic or Hebrew the way a row of text would. */
.walk-keys {
  display: flex;
  justify-content: center;
  direction: ltr;
}

.walk-keys__pad {
  display: grid;
  grid-template-columns: repeat(3, 44px);
  grid-template-rows: repeat(3, 44px);
  gap: 6px;
}

.walk-keys__pad .pad-key[data-go="up"] { grid-column: 2; grid-row: 1; }
.walk-keys__pad .pad-key[data-go="left"] { grid-column: 1; grid-row: 2; }
.walk-keys__pad .pad-key[data-go="right"] { grid-column: 3; grid-row: 2; }
.walk-keys__pad .pad-key[data-go="down"] { grid-column: 2; grid-row: 3; }
.walk-keys__pad .pad-key[data-go="home"] { grid-column: 2; grid-row: 2; }
/* The turns across the top, clockwise first, and the magnifiers across the
   bottom, out before in: Marcus's order, 24 September. */
.walk-keys__pad .pad-key[data-go="clock"] { grid-column: 1; grid-row: 1; }
.walk-keys__pad .pad-key[data-go="anti"] { grid-column: 3; grid-row: 1; }
.walk-keys__pad .pad-key[data-go="out"] { grid-column: 1; grid-row: 3; }
.walk-keys__pad .pad-key[data-go="in"] { grid-column: 3; grid-row: 3; }

/* A key with nothing to do that way. Marked rather than disabled, so the
   keyboard's focus stays on it (see `refresh` in movepad.js), and drawn as a
   disabled key is. */
.walk-keys .pad-key[aria-disabled="true"] {
  opacity: 0.3;
  cursor: default;
}

.walk-keys .pad-key[aria-disabled="true"]:hover {
  border-color: var(--hairline);
  color: var(--muted);
}

/* Forty-four square, which is the smallest a finger is promised; the glyph
   inside is twenty, so it sits in the key with room round it rather than
   filling it. */
.walk-keys .pad-key {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
}

/* **The four directions are washed**, so the cross reads as one control
   and the turns and magnifiers in its corners as others. Marcus, 24
   September. */
.walk-keys__pad .pad-key:is([data-go="up"], [data-go="down"], [data-go="left"], [data-go="right"]) {
  background: var(--wash);
}

/* The keyboard's ring, the same one the map's cells take: a brighter edge
   alone was too near the resting hairline to find at a glance, and a key the
   keyboard is on has to be the one thing that says so. */
.walk-keys .pad-key:focus-visible {
  outline: 1px solid var(--muted);
  outline-offset: 3px;
}

/* The glyphs. Monoline, even weight, round free ends — BRAND.md §3.2, and the
   same stroke the chooser's chevron is drawn with. The weight is set here
   rather than on each path, so the four cannot come to disagree. */
.pad-glyph {
  display: block;
  inline-size: 20px;
  block-size: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The one filled mark on the pad: the dot in Home's square. */
.pad-glyph__dot {
  fill: currentColor;
}

/* The map. The garden's ten areas five by two, as `/g` draws them, at a size
   that sits under the words without competing with the plot — the plot is
   the page, and this is how to leave it.

   Each cell is a hit area of forty-eight by forty. **The grid is left to right
   in every language** (since 10 October 2026): it used to follow the writing
   direction and mirror under Arabic or Hebrew, while the gateways in the
   canvas above it and the pad's arrows did not, so the corner put the Orchard
   on the Knot Garden's right and the canvas on its left. One way round, read
   from `screenWay` in garden.js by both. Nothing in a cell is text. */
/* The map is the garden's ground, and the garden's ground falls from the Cold
   Frame end to the Crossing — so the map is a slope and not a grid. Each cell
   is lifted by its own column's rise (`--rise`, in metres, set in gates.js
   from `COLUMN_RISE`), and the room for the lift is added at the top so the
   whole map keeps its place on the page. A slope is a shape a reader can hold;
   five by two is not. */
.minimap {
  display: grid;
  direction: ltr;
  grid-template-columns: repeat(5, 48px);
  grid-template-rows: repeat(2, 40px);
  padding-block-start: calc(var(--map-fall, 4.8) * var(--map-rise-px, 4.2px));
}

/* Each cell is its area's ground with its layout's glyph on it — see `LOOK`
   in gates.js. The hit area is the whole cell; the tile is drawn inside it, so
   the ground can sit quietly and the target still be a size a finger finds. */
.minimap__cell {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transform: translateY(calc(var(--rise, 0) * var(--map-rise-px, 4.2px) * -1));
}

.minimap__cell::before {
  content: "";
  position: absolute;
  inset: 4px 4px;
  border-radius: 7px;
  background: var(--area-ground);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: box-shadow 200ms ease-out, filter 200ms ease-out;
}

/* Ringed in a little shade, as the same glyph is where it lies on a gateway
   in the canvas (10 October 2026). White on the two light grounds — the Knot
   Garden's gravel and the Cold Frame's — was 3 to 1, and the glyph is what a
   reader who cannot tell these greens and browns apart matches the corner to
   the canvas by. */
.minimap__glyph {
  position: relative;
  inline-size: 20px;
  block-size: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 0.8px rgba(0, 0, 0, 0.75));
}

a.minimap__cell:hover::before {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  filter: brightness(1.12);
}

/* The keyboard's ring, drawn round the tile rather than round the hit area,
   so it lands on what the reader can see. */
a.minimap__cell:focus-visible {
  outline: none;
}

a.minimap__cell:focus-visible::before {
  box-shadow: 0 0 0 2px var(--ground), 0 0 0 3px var(--muted);
}

/* The areas standing beside this one in the canvas above, drawn as slabs of
   their own ground out past the plot. Marked here so the corner and the canvas
   read as one garden: what is on the left of the plot is the cell on the left.
   A dashed hairline rather than a solid one, because these are places you can
   see and not the place you are — that one is ringed in ink below. */
.minimap__cell--beside::before {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
  outline: 1px dashed rgba(255, 255, 255, 0.34);
  outline-offset: 1px;
  border-radius: 7px;
}

/* Where you are: the tile ringed in ink, and the glyph at full strength. */
.minimap__cell--here {
  color: var(--ink);
}

.minimap__cell--here::before {
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

/* Not open yet. Its ground and its glyph are drawn, because the map is ten
   areas and a map with holes in it is a different map, but greyed and faint:
   a place that is coming, not one to go to. */
.minimap__cell--closed {
  color: rgba(255, 255, 255, 0.4);
}

.minimap__cell--closed::before {
  filter: saturate(0.25) brightness(0.55);
  box-shadow: none;
}

/* ══ What the names mean ══════════════════════════════════════════════════
   Added 23 September, and kept to the end of this file on purpose: everything
   below is new, and nothing above it was changed to make room.

   Two things read from one table, `meanings.js`: the block under every area's
   paragraph saying what the plants there mean, and the lookup at `/meanings`.
   Both speak in the voices the site already has — `.label` for the small
   tracked words, `.body` for the one sentence, the hairline as the only edge —
   and **the serif stays where it has always been, on pieces of plant names**:
   a genus head, an ending, an epithet. A root, a gloss or a subtheme is not a
   plant name and is set in the sans like everything else. */

/* The entry under an area's drawing is styled in §The two panels, below. The
   four-line block it replaced, and that block's rules, went on 24 September. */
.gathers p {
  margin: 0;
}

/* ── The two panels ─────────────────────────────────────────────────────────
   Under an area's drawing since 24 September: on one side what the area is —
   its name, and what its plants mean set as a dictionary entry — and on the
   other every way about it and out of it, the pad over the map. Each in an
   outline, the hairline being the only edge this project draws, drawn all
   round rather than as rules above and below.

   The paragraph that said how the area is laid out is kept for a screen
   reader, who cannot see the drawing it describes, and taken off the screen
   for everybody else, who can. */
.walk-page > .area-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 16px;
  max-inline-size: min(100%, 860px);
  margin-block: 22px;
}

.area-panel {
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 22px 24px;
}

.area-panel--words {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  text-align: start;
}

.area-panel--words .heading {
  margin: 0;
}

.area-panel--words .walk-note {
  margin: 0;
}

.area-panel--words .drills {
  margin-block-start: 4px;
  justify-content: start;
}

/* The pad over the map, and the map under it. Centred in its panel, which is
   as wide as the map. */
.area-panel--ways {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

/* The block inside the words panel keeps the panel's own alignment. A grid,
   so the drawings of the area's name-starts can stand at the end of the
   headword's line, beside the entry rather than under it, and the senses run
   the whole width beneath both. */
.area-panel--words .gathers {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px 18px;
  inline-size: 100%;
}

.gathers__entry {
  grid-column: 1;
  grid-row: 1;
}

.gathers__senses {
  grid-column: 1 / -1;
}

/* The name-starts' drawings: the entry's own at `/meanings`, smaller, and
   quieter than the headword they stand beside. */
.gathers__heads {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  padding-block-start: 5px;
  list-style: none;
  color: var(--muted);
}

.gathers__glyph {
  display: grid;
}

.gathers__head-glyph {
  inline-size: 22px;
  block-size: 22px;
}

/* A dictionary entry: the headword, then what it means. */
.gathers__entry {
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
  max-inline-size: 34em;
}

.gathers__word {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-inline-end: 4px;
  color: var(--ink);
  text-decoration: none;
}

.gathers__word dfn {
  font-style: normal;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.gathers__book {
  inline-size: 15px;
  block-size: 15px;
  align-self: center;
  fill: none;
  stroke: var(--faint);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 200ms ease-out;
}

.gathers__word:hover .gathers__book,
.gathers__word:focus-visible .gathers__book {
  stroke: var(--ink);
}

.gathers__word:focus-visible {
  outline: 1px solid var(--muted);
  outline-offset: 3px;
}

/* The three parts as the entry's numbered senses. */
.gathers__senses {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: sense;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.gathers__senses .gathers__part {
  counter-increment: sense;
  white-space: nowrap;
}

.gathers__senses .gathers__part::before {
  content: counter(sense) " ";
  color: var(--faint);
}

/* A phone: one panel above the other, the words first. */
@media (max-width: 46rem) {
  .walk-page > .area-panels {
    grid-template-columns: 1fr;
    padding-inline: 16px;
  }

  .area-panel {
    padding: 18px;
  }
}

/* The foot takes the slack again, now the panels no longer do. With no
   hairline, as on every page: the panels above it are their own edge. */
.walk-page > .bar-foot {
  margin-block-start: auto;
  padding-block-start: 14px;
}

/* ── A plant's panel ────────────────────────────────────────────────────────
   What a tap on a plant opens (`plantpanel.js`): its name, what the name
   means, and a passage, in the order the app's name sheet sets them.

   **The two panels' shape, over the drawing rather than under it**: the same
   hairline all round and the same eighteen-point corners, on the night's own
   black, solid, so the words read over whatever is planted behind them — at
   nine-tenths the page's own words showed through.
   Like the sheet under `?` it is a dialog with a veil, but a thin one, because
   the plant it is about is the one thing behind it worth seeing.

   **Where it stands keeps the plant in view.** The tap brings the plant to the
   middle of the drawing. On a phone the panel rises from the foot of the
   screen, below the middle of the band; on a wider window it stands at the end
   of the line — the right, or the left under Arabic and Hebrew — beside it.

   The dialog itself is the whole screen and draws nothing, so a tap anywhere
   outside the panel lands on it: `plantpanel.js` reads that as *close*, or as
   another plant if there is one under the finger. */
.plant-panel {
  padding: 0;
  margin: 0;
  border: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  max-block-size: none;
  background: transparent;
  color: var(--ink);
}

.plant-panel[open] {
  display: grid;
  place-items: end center;
}

.plant-panel::backdrop {
  background: rgba(0, 0, 0, 0.28);
}

.plant-panel__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  inline-size: min(100% - 32px, 27rem);
  max-block-size: min(64svh, 100% - 32px);
  overflow-y: auto;
  margin: 16px;
  margin-block-end: max(16px, env(safe-area-inset-bottom));
  padding: 18px 22px 20px;
  background: var(--ground);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  text-align: start;
}

.plant-panel__body:focus-visible {
  outline: 1px solid var(--muted);
  outline-offset: 3px;
}

@media (min-width: 46rem) {
  .plant-panel[open] {
    place-items: center end;
  }

  .plant-panel__body {
    max-block-size: min(80svh, 100% - 48px);
    margin: 24px;
  }
}

/* The name, and the way out beside it. */
.plant-panel__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.plant-panel__name {
  font-size: 24px;
  overflow-wrap: anywhere;
}

.plant-panel__lit {
  color: var(--ink);
}

.plant-panel__faint {
  color: var(--faint);
}

/* The way out: an X in a ring, as the app's `CloseButton` draws it — the
   X light and at three quarters of the ink, the ring a hairline, forty-two
   across with the X in the middle. Its word is its name, not its face. */
.plant-panel__close {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 42px;
  block-size: 42px;
  padding: 0;
  border-radius: 50%;
  color: var(--ink);
}

.plant-panel__cross {
  inline-size: 20px;
  block-size: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  opacity: 0.75;
}

.plant-panel__close:hover .plant-panel__cross,
.plant-panel__close:focus-visible .plant-panel__cross {
  opacity: 1;
}

/* A sentence rather than a label: two lines of tracked capitals under the
   name would outweigh it. */
.plant-panel__ambassador {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}

/* Who chose to stand beside a plant in the Wild Fields: the names, then where
   and when they met, in the gardeners' own words — set apart by the italic,
   as somebody's own sentence about a meeting is in the app. */
.plant-panel__beside {
  display: grid;
  gap: 2px;
}

.plant-panel__beside[hidden] {
  display: none;
}

.plant-panel__met {
  font-style: italic;
}

/* The theme as the block under the area's heading sets it: the headword,
   which is the way to its entry, and what it means. */
.plant-panel__entry {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

.plant-panel__word {
  color: var(--ink);
  font-size: 19px;
  font-weight: 400;
  text-decoration: none;
}

.plant-panel__word:hover,
.plant-panel__word:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--hairline);
}

/* The pieces of the name the lines beside them are read off, as the app sets
   them: the serif, faint. */
.plant-panel__head,
.plant-panel__tail {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--faint);
}

/* The theme's three parts, this plant's at full strength and the others
   faint — marked by weight of ink and by its ending, as in the app, not by a
   tick. */
.plant-panel__parts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

.plant-panel__part--here {
  color: var(--ink);
}

[data-keeps-case] .plant-panel__parts {
  text-transform: none;
}

[data-untracked] .plant-panel__parts {
  letter-spacing: normal;
}

/* The passage, set as `/s` sets it, to the start of the line. */
.plant-panel__passage {
  align-items: flex-start;
  text-align: start;
  gap: 8px;
}

.plant-panel__passage p {
  font-size: 16px;
}

.plant-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* What happened to a postcard with no share sheet to go by. A sentence, so
   not in the label voice. */
.plant-panel__status {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

.plant-panel__status:empty {
  display: none;
}

.plant-panel__link {
  display: block;
  inline-size: 100%;
  margin-block-start: 8px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
}

/* ── The bar's glyphs ───────────────────────────────────────────────────────
   The ways on from any page, drawn rather than written so they are the same
   in every language: the garden, as the app's own Garden mark; what the names
   mean, as an open book; and the language, as a globe beside the language's
   own name for itself. Each glyph's words are its accessible name and its
   tooltip. Flags were considered and not used: a flag is a country, and
   several of these languages are spoken in many or belong to none. */
.bar-glyph {
  display: inline-grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  color: var(--muted);
  transition: border-color 200ms ease-out, color 200ms ease-out;
}

.bar-glyph:hover,
.bar-glyph:focus-visible {
  border-color: var(--muted);
  color: var(--ink);
  outline: none;
}

.bar-glyph__mark,
.bar-language__mark {
  inline-size: 20px;
  block-size: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bar-language {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}

.bar-language .chooser__mark path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bar-language .chooser__select {
  border-block-end: 0;
}

/* A name that is read out and not shown. */
.visually-hidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0 !important;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The headword on a front-page card, as on an area page. */
.front-card__word {
  display: block;
  margin-block-end: 2px;
  font-style: normal;
  font-size: 15px;
  font-weight: 400;
  color: #ffffff;
}

/* The hub's foot holds two capsules now; a little air between them. */
.garden-foot .quiet-button + .quiet-button {
  margin-inline-start: 8px;
}

/* ── The page at /meanings ──────────────────────────────────────────────────
   A dictionary, since 24 September, where it was a table: ten entries, one per
   area, each set as a dictionary sets a word — the headword, the definition,
   the etymology, the numbered senses — and a glossary of the second words.

   **Drawn as much as written.** Every root has its drawing and so has every
   second word, so a reader with none of the page's languages can still follow
   a name by its pictures: *Nyx* is a crescent, *noctiflora* a flower under
   one. The drawings keep BRAND.md §3.2 as every glyph on the site does, and the
   one colour on the page is each area's own ground, on its tile, as the map
   has it.

   The page's own words keep to the measure and stay centred, as every page's
   do; the entries and the glossary are the one thing allowed the width, and
   read from the start edge, as a dictionary does. The edges are the hairline,
   as everywhere: a rule between entries, and on a wide window a rule between
   an entry's two columns. */
.meanings-page {
  max-width: 64rem;
}

/* Every drawing on the page, and the area page's small ones: monoline, even
   weight, round free ends, stroked in the ink of whatever holds it. A colour
   drawing — *aurea*, *rubra* — sets its own stroke on each path. */
.meanings-tile__glyph,
.meanings-example__glyph,
.entry__glyph,
.glossary__glyph,
.gathers__head-glyph {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* An area's tile: its ground, and its layout's glyph on it — the map's cell,
   brought here. The ground travels with the tile, so there is no light and
   dark pair: white on each ground reads in both. */
.meanings-tile {
  display: inline-grid;
  place-items: center;
  border-radius: 7px;
  background: var(--area-ground);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
  transition: box-shadow 200ms ease-out, filter 200ms ease-out;
}

.meanings-tile__glyph {
  inline-size: 20px;
  block-size: 20px;
}

/* ── One name, taken apart ──
   In an outline, as an area's panels are: the name, and under each piece of it
   the mark the rest of the page gives that piece and what it says. */
.meanings-example {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  inline-size: min(100%, 38rem);
  margin: 0;
  padding: 28px 24px 24px;
  border: 1px solid var(--hairline);
  border-radius: 18px;
}

.meanings-example__name {
  font-size: 30px;
}

.meanings-example__between {
  color: var(--faint);
}

.meanings-example__key {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 40px;
  margin: 0;
}

.meanings-example__pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.meanings-example__term {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 17px;
  color: var(--ink);
}

.meanings-example__glyph {
  inline-size: 26px;
  block-size: 26px;
  color: var(--muted);
}

.meanings-example__says {
  margin: 0;
  font-size: 13px;
  color: var(--faint);
}

/* A sense's number, drawn the way the entries draw it: a numeral in a ring. */
.meanings-example__number,
.entry__sense::before {
  display: inline-grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  font-family: var(--sans);
  font-style: normal;
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  color: var(--muted);
}

.meanings-example__number {
  margin-block: 1px;
}

/* ── The contents ──
   The ten tiles five by two, in the map's order and at the minimap's size, so
   the garden's own map is the way into the dictionary. The grid follows the
   writing direction, and mirrors under a right-to-left language as the map
   does. */
.meanings-index {
  display: grid;
  grid-template-columns: repeat(5, 48px);
  grid-auto-rows: 40px;
}

.meanings-index__link {
  display: grid;
  place-items: center;
  border-radius: 8px;
  text-decoration: none;
}

.meanings-index__tile {
  inline-size: 40px;
  block-size: 32px;
}

.meanings-index__link:hover .meanings-index__tile {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  filter: brightness(1.12);
}

.meanings-index__link:focus-visible {
  outline: none;
}

.meanings-index__link:focus-visible .meanings-index__tile {
  box-shadow: 0 0 0 2px var(--ground), 0 0 0 3px var(--muted);
}

/* ── The entries ── */
.lexicon {
  inline-size: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: start;
  border-block-start: 1px solid var(--hairline);
}

.entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  padding: 34px 6px;
  border-block-end: 1px solid var(--hairline);
  /* Arriving from an area page, or from a tile, the entry lands a little
     below the top of the window rather than hard against it. */
  scroll-margin-block-start: 20px;
}

/* The entry a reader came from an area page to find: ringed the way a key the
   keyboard is on is ringed, rather than filled, and rounded as the area's
   panels are. */
.entry--here {
  outline: 1px solid var(--muted);
  outline-offset: -1px;
  border-radius: 18px;
}

/* The headword, with the area's tile before it and the area's name after it,
   where a dictionary puts the part of speech. It wraps under the headword on a
   phone. */
.entry__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.entry__tile {
  flex: none;
  inline-size: 40px;
  block-size: 32px;
}

.entry__word {
  margin: 0;
  font-size: 30px;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.entry__area {
  margin: 0;
  padding-block-start: 4px;
}

.entry__area-name {
  color: var(--muted);
  text-decoration: none;
}

a.entry__area-name {
  border-block-end: 1px solid var(--hairline);
  transition: color 200ms ease-out, border-color 200ms ease-out;
}

a.entry__area-name:hover,
a.entry__area-name:focus-visible {
  color: var(--ink);
  border-color: var(--muted);
  outline: none;
}

.entry__closed {
  color: var(--faint);
}

/* A dot between the area and *not open yet*, so the two read as two things
   said of the entry rather than as one name. */
.entry__closed::before {
  content: "·";
  margin-inline: 4px 10px;
}

.entry__definition {
  margin: 16px 0 0;
  max-inline-size: 32em;
  font-size: 17px;
  line-height: 1.5;
  color: var(--muted);
}

.entry__lead {
  margin: 26px 0 12px;
}

/* The etymology. Each line is a name-start: its drawing in a ring, the
   syllable in the serif, and the root it came from with what the root means.
   The syllables are given a column of their own so the roots line up under
   one another, as a dictionary's do. */
.entry__heads {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.entry__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.entry__syllable {
  display: flex;
  flex: none;
  align-items: center;
  gap: 14px;
  min-inline-size: 7.5rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 21px;
  color: var(--ink);
}

/* A ring round the drawing, as the bar rings its ways on: it gathers a small
   drawing into a mark rather than leaving it loose beside a word. The ring
   is the box's border, so the drawing inside is twenty-two points, a
   touch over the size it is drawn for. */
.entry__glyph {
  inline-size: 40px;
  block-size: 40px;
  padding: 8px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  color: var(--ink);
}

.entry__root {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--faint);
}

/* *Gk* and *L*, as a dictionary abbreviates a language: small and tracked. */
.entry__from {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.entry__etymon {
  color: var(--muted);
}

.entry__gloss {
  quotes: "‘" "’";
  color: var(--section);
}

/* The senses: a numeral in a ring, the part in the label voice with the
   endings that choose it after it in the serif, and the instances under it. */
.entry__senses {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: sense;
  align-self: start;
}

.entry__sense {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 14px;
  counter-increment: sense;
}

.entry__sense::before {
  content: counter(sense);
  grid-row: span 2;
}

.entry__sense-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  margin: 0;
  padding-block-start: 4px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--section);
}

.entry__endings {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--faint);
  white-space: nowrap;
}

.entry__instances {
  grid-column: 2;
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--faint);
}

/* ── The second words ── */
.meanings-second {
  margin-block-start: 18px;
}

/* A glossary: each second word with its drawing at the start of its row, the
   words in the serif, what they say under them. Two columns on a wide window,
   read down, so each group — the stem, the leaves, the colours, the petals —
   stays together. The drawing stands in the row's padding rather than in the
   term, so a long pair wraps under its own first word and not under the
   drawing. */
.glossary {
  inline-size: 100%;
  margin: 0;
  text-align: start;
  column-gap: 64px;
}

.glossary__row {
  position: relative;
  break-inside: avoid;
  min-block-size: 60px;
  padding-block: 12px;
  padding-inline-start: 46px;
  border-block-end: 1px solid var(--hairline);
}

.glossary__glyph {
  position: absolute;
  inset-inline-start: 2px;
  inset-block-start: 15px;
  inline-size: 28px;
  block-size: 28px;
  color: var(--muted);
}

.glossary__word {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 17px;
  color: var(--ink);
}

.glossary__says {
  margin: 2px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--faint);
}

/* A wide window: each entry in two columns — the word, what it means and where
   it comes from on one side, its senses on the other, with a hairline between
   — and the glossary in two. */
@media (min-width: 52rem) {
  .entry {
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    column-gap: 56px;
    padding: 40px 24px;
  }

  .entry__senses {
    padding-block-start: 6px;
    padding-inline-start: 40px;
    border-inline-start: 1px solid var(--hairline);
    align-self: stretch;
  }

  .glossary {
    columns: 2;
  }
}

/* A phone: the page's margins are narrower, and so is the headword. */
@media (max-width: 30rem) {
  .meanings-example {
    padding-inline: 16px;
  }

  .meanings-example__key {
    gap: 16px 24px;
  }

  .entry {
    padding-inline: 0;
  }

  .entry--here {
    padding-inline: 14px;
  }

  .entry__word {
    font-size: 26px;
  }

  .entry__syllable {
    min-inline-size: 6.5rem;
  }
}

/* ── The front, at / ────────────────────────────────────────────────────────
   One plant on a stage, three steps, and the ten areas as cards: design B of
   the two prototypes, `tools/wasm/web/front-b.html`. The one page of words
   allowed the width of the screen, because the plant and the cards are
   pictures, and the words in it still keep to a measure of their own.

   It follows the reader's light or dark setting on the site's own four
   opacities. The cards are the exception, and on purpose: each is its area's
   ground, which is the same colour by day or night, with white on it. */
.page.front {
  --gutter: clamp(16px, 5vw, 64px);
  max-width: 1180px;
  padding-inline: var(--gutter);
  align-items: stretch;
  gap: 0;
  text-align: start;
}

/* The stage: the words on one side, the plant on the other. */
.front-hero {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: 24px;
  padding-block-start: clamp(24px, 6svh, 64px);
  min-block-size: min(86svh, 820px);
}

.front-hero__title {
  margin: 0 0 22px;
  font-size: clamp(40px, 6.4vw, 84px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

.front-hero__lead {
  margin: 0 0 32px;
  max-inline-size: 26em;
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted);
}

.front-ways {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

/* Larger than `.quiet-button`, because on this page they are the two things
   to do, and one of them filled: the app is what the page is for. */
.front-pill {
  display: inline-flex;
  align-items: center;
  min-block-size: 46px;
  padding: 0 24px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: opacity 200ms ease-out;
}

.front-pill:hover,
.front-pill:focus-visible {
  opacity: 0.75;
}

.front-pill--solid {
  background: var(--ink);
  color: var(--ground);
}

.front-plant {
  position: relative;
  justify-self: center;
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  max-block-size: 78svh;
}

/* The stage's light, as `StageBackdrop` puts one behind a plant in the app. */
.front-plant::before {
  content: "";
  position: absolute;
  inset: 8% 4% 4%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(120, 130, 150, 0.22), transparent);
}

.front-plant canvas {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  cursor: grab;
  /* A finger drawn across the plant turns it; drawn down it, scrolls the
     page, which on a phone is most of the first screen. */
  touch-action: pan-y;
}

.front-plant canvas:active {
  cursor: grabbing;
}

/* The stage keeps its place from the first paint, and its pool shows; the
   plant and the hint to turn it wait until there is a plant (`frontpage.js`
   marks the stage `data-grown`). Invisible rather than hidden, so the canvas
   has its size to draw at. */
.front-plant:not([data-grown]) canvas,
.front-plant:not([data-grown]) .front-plant__hint {
  visibility: hidden;
}

/* **The words wait for their language**, and arrive in their places. Every
   word on this page is written in by `plain.js` once the language is settled,
   which on a phone's slow connection is a second or more after the first
   paint; until then the heading and the lead are empty boxes, and filling them
   pushed the buttons and the three steps 180 px down the screen. Nothing here
   is visible before then but empty outlines, so it is kept invisible instead,
   and a box that is not visible does not count as moving. A script that never
   arrives leaves these empty either way. */
body:not([data-ready]) .page.front :is(.front-hero__words, .front-steps, .front-garden, .bar-foot) {
  visibility: hidden;
}

.front-plant__hint {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 2%;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  pointer-events: none;
}

/* Three steps, as the app's first run has them. */
.front-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 4vw, 56px);
  margin-block: clamp(48px, 10svh, 110px);
}

.front-step svg {
  display: block;
  inline-size: 56px;
  block-size: 56px;
  margin-block-end: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.front-step h2 {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--section);
}

.front-step p {
  margin: 0;
  max-inline-size: 22em;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

/* The garden: ten cards, each its ground, its glyph and what gathers there. */
.front-garden__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  margin-block-end: 22px;
}

.front-garden__title {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 200;
  line-height: 1.05;
  color: var(--ink);
}

/* A row that scrolls inside itself on anything narrower than five cards
   across; the page never scrolls sideways. */
.front-cards {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 1fr);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block-end: 12px;
  scrollbar-width: thin;
}

@media (min-width: 1100px) {
  .front-cards {
    grid-auto-flow: row;
    grid-template-columns: repeat(5, 1fr);
  }
}

.front-card {
  scroll-snap-align: start;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 10px;
  aspect-ratio: 3 / 4;
  padding: 18px;
  border-radius: 20px;
  background: var(--area-ground);
  color: #ffffff;
  text-decoration: none;
  transition: transform 240ms ease-out, filter 240ms ease-out;
}

a.front-card:hover,
a.front-card:focus-visible {
  transform: translateY(-4px);
  filter: brightness(1.08);
}

a.front-card:focus-visible {
  outline: 1px solid var(--muted);
  outline-offset: 3px;
}

.front-card svg {
  inline-size: 40px;
  block-size: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.front-card__meaning {
  align-self: end;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  /* 92% rather than the 86% it was until 14 October 2026: at 86% the
     Orchard's meaning came to 4.40:1 on its olive, and at 92% every card's
     comes to 4.6:1 or more (the two pale taupes on their `card` ground, see
     `LOOK` in gates.js). The step down from the name is still there. */
  color: rgba(255, 255, 255, 0.92);
}

.front-card__name {
  margin: 0;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.front-card__closed {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
}

.front-card--closed {
  filter: saturate(0.3) brightness(0.62);
}

.page.front .bar-foot {
  margin-block-start: 56px;
  padding-block-end: 24px;
}

@media (max-width: 760px) {
  .front-hero {
    grid-template-columns: 1fr;
    min-block-size: 0;
  }

  .front-plant {
    order: -1;
    max-inline-size: 440px;
  }

  .front-steps {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .front-card,
  .front-pill {
    transition: none;
  }

  a.front-card:hover,
  a.front-card:focus-visible {
    transform: none;
  }
}

/* The front's capitals and tracking follow the label voice's two exceptions. */
[data-keeps-case] .front-pill,
[data-keeps-case] .front-plant__hint,
[data-keeps-case] .front-step h2,
[data-keeps-case] .front-card__name {
  text-transform: none;
}

[data-untracked] .front-pill,
[data-untracked] .front-plant__hint,
[data-untracked] .front-step h2,
[data-untracked] .front-card__name,
[data-untracked] .front-hero__title {
  letter-spacing: normal;
}