/* The three drawings: the roots on the Sanctum, the rings on the Constitution,
   the rows on a person's record.

   All three are drawn in the page by src/views/art/grown.js. There are no image
   files here, nothing to load, and nothing that computes a shape at run time.

   Two things this file is responsible for.

   The colours. Every drawing takes its ink from this one block, so the whole
   set moves together and a dark theme, when there is one, is one more block
   rather than eight files of literals. The eight Article colours are the same
   eight in content/stories.json, in Article order.

   The swap. Each drawing ships twice, wide and deep, and one of them is shown.
   That is not the same picture shrunk: a fan of eight names needs width a phone
   does not have, so the narrow root system is a taproot with laterals instead,
   and the narrow record keeps its rows because standing the bars up would mean
   writing "Dig" and "Flo", which is a label nobody reads. The names are the
   point of all three pictures and no drawing abbreviates one. */

.grown {
  --root: #3a3f38;
  --soil: #f2f1ed;
  --line: #ddddd9;
  --leaf-a: #8fb3a0;
  --leaf-b: #b7c98f;
  --lbl-ink: #1c1c1a;
  --cap-ink: #6b6b6b;
  --a1: #d1bc7d; --a2: #d7a58c; --a3: #b7add0; --a4: #c6a0a6;
  --a5: #8fbcd0; --a6: #8fb3a0; --a7: #9caed0; --a8: #b7c98f;
}

/* No `display` here. It belongs to the swap at the bottom of this file, and a
   `.grown svg` rule setting it outranks a `.grown-wide` rule that clears it:
   both drawings then show at once, at every width. */
.grown svg { width: 100%; height: auto; }

/* Type inside a drawing is sized in the drawing's own units, not in pixels, so
   it grows and shrinks with the picture it belongs to. The sizes here are
   chosen so that at each drawing's real width on the page the names land above
   the 13px floor the rest of the site keeps. */
.grown .lbl { font-family: "Urbanist", "Avenir Next", "Helvetica Neue", Arial, sans-serif; font-weight: 500; font-size: 24px; fill: var(--lbl-ink); }
.grown .cap { font-family: "Urbanist", "Avenir Next", "Helvetica Neue", Arial, sans-serif; font-weight: 400; font-size: 16px; fill: var(--cap-ink); }
.grown .row-name { font-family: "Urbanist", "Avenir Next", "Helvetica Neue", Arial, sans-serif; font-weight: 500; font-size: 22px; fill: var(--lbl-ink); }
.grown-deep .cap { font-size: 13px; }
.grown-deep .row-name { font-size: 14px; }
.grown-roots .grown-deep .lbl { font-size: 16px; }
.grown-rings .grown-deep .lbl { font-size: 18px; }

/* Which of the two is shown is decided by the width of the box the drawing is
   in, not by the width of the screen. The same drawing appears on a phone, in
   a hero column half a page wide and in a narrow aside beside a heading, and
   the screen size says nothing useful about the last two. Asking the box is
   also what keeps the names readable: each threshold below is the width at
   which that drawing's own names stop clearing 13px, which is the floor the
   rest of the site keeps.

   The narrow drawing is the default, so a browser that cannot answer the
   question gets the one that fits anywhere. */
.grown { container-type: inline-size; }
.grown > .grown-wide { display: none; }
.grown > .grown-deep { display: block; margin-inline: auto; }
.grown-roots > .grown-deep { max-width: 340px; }
.grown-rings > .grown-deep { max-width: 400px; }
.grown-record > .grown-deep { max-width: 420px; }

@container (min-width: 430px) {
  .grown-roots > .grown-wide { display: block; }
  .grown-roots > .grown-deep { display: none; }
}
@container (min-width: 400px) {
  .grown-rings > .grown-wide { display: block; }
  .grown-rings > .grown-deep { display: none; }
}
@container (min-width: 420px) {
  .grown-record > .grown-wide { display: block; }
  .grown-record > .grown-deep { display: none; }
}

/* A drawing needs a column, not a gutter. The intro aside is sized to its
   contents, and an SVG set to the width of its box tells it nothing, so
   without this the drawing collapses to the aside's minimum and every name in
   it lands under 12px.

   Below 880px the intro stacks and the aside is already the width of the page,
   so the rule is only for the two-column case. */
@media (min-width: 881px) {
  .page-intro-aside:has(.grown) { width: clamp(300px, 34vw, 460px); }
}
.page-intro-aside .grown + .intro-facts { margin-top: 20px; }

/* Each of the eight endings is a link to that Article.

   A reader who sees Dignity at the end of a root and wants to answer Dignity
   should touch the word, not scroll the page looking for the card. The whole
   ending is the control: the dot, the name and a box around both, because a
   line of text is about as tall as its letters and a finger is not.

   The box is invisible until it is wanted. It fills on hover and takes a ring
   on keyboard focus, so a reader tabbing through the page can see where they
   are inside a picture. */
.grown-end .grown-hit { fill: transparent; }
.grown-end { cursor: pointer; }
.grown-end:hover .grown-hit { fill: var(--root); fill-opacity: .07; }
.grown-end:hover .lbl, .grown-end:hover .row-name { fill: var(--lbl-ink); text-decoration: underline; text-underline-offset: 3px; }
.grown-end:focus { outline: none; }
.grown-end:focus-visible .grown-hit { fill: var(--root); fill-opacity: .07; stroke: var(--lbl-ink); stroke-width: 1.5; }
a.grown-end { text-decoration: none; }

@media (hover: none) {
  /* On a touch screen there is no hover to say a word can be touched, so the
     names that are links carry a faint underline from the start. */
  a.grown-end .lbl, a.grown-end .row-name { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
}

/* Nothing here moves. A drawing that animates in is a drawing a reader who
   arrives mid-scroll never sees. */