@page { size: A4; margin: 16mm; }
  * { box-sizing: border-box; }
  body { font-family: Georgia, 'Times New Roman', serif; color: #26241f;
         margin: 2rem auto; max-width: 50rem; padding: 0 1rem; line-height: 1.55; }
  h1.doc-title { font-weight: normal; font-size: 1.9rem; margin: 0 0 .25rem; }
  p.doc-summary { opacity: .65; font-style: italic; margin: 0 0 1.75rem; }
  .memo-kicker { text-transform: uppercase; letter-spacing: .25em; font-size: .8rem;
                 opacity: .55; margin: 0 0 1rem; }
  table.memo-fields { border-collapse: collapse; margin: 0 0 1rem; }
  table.memo-fields th { text-align: left; font-weight: normal; opacity: .55;
                         padding: .1rem 1.25rem .1rem 0; vertical-align: baseline;
                         font-size: .85rem; text-transform: uppercase;
                         letter-spacing: .05em; }
  table.memo-fields td { padding: .1rem 0; }
  hr.memo-rule { border: 0; border-top: 2px solid #26241f; margin: 0 0 1.75rem; }
  table.grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
  table.grid td { vertical-align: top; padding: .35rem .5rem; }
  img { max-width: 100%; height: auto; }
  .md h1, .md h2, .md h3 { font-weight: 600; line-height: 1.25; }
  .md pre, .md code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85em; }
  .codehilite { background: #f6f4ec; border-radius: 8px; padding: .5rem .75rem; overflow-x: auto; }
  a { color: inherit; }
  .refcard { border: 1px solid #ddd6c8; border-radius: 8px; padding: .5rem .75rem; }
  .refcard .kicker { font-size: .65rem; text-transform: uppercase; letter-spacing: .05em;
                     opacity: .5; display: flex; gap: .3rem; align-items: center; }
  .refcard .note { font-style: italic; opacity: .7; }
  .text-cell { margin: .5rem 0; white-space: pre-wrap; }
  /* A file never carries an excerpt's words (docs/adr/0070): only
     where they came from, set like a citation. */
  .excerpt-source { font-size: .8rem; opacity: .6; font-style: italic; margin: .5rem 0; }
  details.fold { border-left: 3px solid rgba(120,120,120,.35); padding: .1rem .75rem;
                 margin: .5rem 0; }
  details.fold > summary { cursor: pointer; font-weight: 500; }
  .actions-title { font-weight: 600; font-size: 1.3rem; margin: 0 0 .5rem;
                   border-bottom: 1px solid rgba(120,120,120,.25); padding-bottom: .3rem; }
  .print-hint { position: fixed; top: .75rem; right: .75rem; text-align: right; }
  .print-hint button { font: inherit; font-size: .85rem; padding: .4rem .8rem;
                       border: 1px solid #bbb; border-radius: 6px; background: #faf8f2;
                       cursor: pointer; }
  .print-hint p { font-size: .7rem; opacity: .55; margin: .3rem 0 0; max-width: 14rem; }
  /* The flavour a reader can play with (docs/adr/0024): the inputs and
     the values that follow them, in the zebra's teal, quiet until
     touched. */
  .calc-input { font: inherit; color: #00605f; font-variant-numeric: tabular-nums;
                border: none; border-bottom: 2px dotted rgba(0,128,128,.55);
                background: transparent; text-align: right; padding: 0 .1rem; width: 6ch; }
  .calc-input:focus { outline: none; background: rgba(0,128,128,.10);
                      border-radius: 4px 4px 0 0; }
  .calc-euro { color: #00605f; }
  .calc-reset { display: none; width: max-content; margin: .25rem 0 0 auto;
                font: inherit; font-size: .75rem; border: none; background: none;
                color: #00605f; cursor: pointer; opacity: .7; padding: .1rem .25rem; }
  .calc-reset.visible { display: block; }
  .calc-reset:hover { opacity: 1; text-decoration: underline; }
  @keyframes calc-flash { from { background: rgba(0,128,128,.35); } }
  .calc-flash { animation: calc-flash .6s ease-out; }
  /* A picture drawn from calc values cannot follow the reader's edits.
     Said quietly, and only once they have edited something. */
  .calc-frozen-note { margin: .2rem 0 0; font-size: .75rem; font-style: italic;
                      color: #8a7f72; text-align: center; }
  /* A phone reads one column (Bo, 2026-09-24). The grid is a desktop
     idea: it is a table with `table-layout: fixed`, so three cells
     beside each other stay three columns of a hundred pixels on a
     phone and a reference card becomes one word per line. Stacked,
     they are the cells in the order they were laid out — the same list
     the reading view builds on the phone itself (docs/adr/0031), only
     here it is the stylesheet that decides, because a file that is
     already written does not know what it will be opened on.

     Here and not in the garden's own stylesheet: an export is read on
     a phone as often as a garden page is. */
  @media (max-width: 40rem) {
    table.grid, table.grid tbody, table.grid tr, table.grid td { display: block; width: auto; }
    /* No side padding: a cell is the width of the screen now, and the
       page's own margin is the margin. A little air between them
       instead, which the columns did not need. */
    table.grid td { padding: 0 0 .75rem; }
    table.grid tr:last-child td:last-child { padding-bottom: 0; }
  }

  @media print {
    .print-hint { display: none; }
    body { margin: 0; max-width: none; padding: 0; }
    table.grid td { padding: .25rem .4rem; }
    /* On paper the interactive flavour reads as plain numbers. */
    .calc-reset { display: none !important; }
    .calc-frozen-note { display: none !important; }
    .calc-input { border-bottom-color: transparent; color: inherit; }
  }

pre { line-height: 125%; }
td.linenos .normal { color: #666666; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: #666666; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.codehilite .hll { background-color: #ffffcc }
.codehilite { background: #f0f0f0; }
.codehilite .c { color: #60A0B0; font-style: italic } /* Comment */
.codehilite .err { border: 1px solid #F00 } /* Error */
.codehilite .k { color: #007020; font-weight: bold } /* Keyword */
.codehilite .o { color: #666 } /* Operator */
.codehilite .ch { color: #60A0B0; font-style: italic } /* Comment.Hashbang */
.codehilite .cm { color: #60A0B0; font-style: italic } /* Comment.Multiline */
.codehilite .cp { color: #007020 } /* Comment.Preproc */
.codehilite .cpf { color: #60A0B0; font-style: italic } /* Comment.PreprocFile */
.codehilite .c1 { color: #60A0B0; font-style: italic } /* Comment.Single */
.codehilite .cs { color: #60A0B0; background-color: #FFF0F0 } /* Comment.Special */
.codehilite .gd { color: #A00000 } /* Generic.Deleted */
.codehilite .ge { font-style: italic } /* Generic.Emph */
.codehilite .ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */
.codehilite .gr { color: #F00 } /* Generic.Error */
.codehilite .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.codehilite .gi { color: #00A000 } /* Generic.Inserted */
.codehilite .go { color: #888 } /* Generic.Output */
.codehilite .gp { color: #C65D09; font-weight: bold } /* Generic.Prompt */
.codehilite .gs { font-weight: bold } /* Generic.Strong */
.codehilite .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.codehilite .gt { color: #04D } /* Generic.Traceback */
.codehilite .kc { color: #007020; font-weight: bold } /* Keyword.Constant */
.codehilite .kd { color: #007020; font-weight: bold } /* Keyword.Declaration */
.codehilite .kn { color: #007020; font-weight: bold } /* Keyword.Namespace */
.codehilite .kp { color: #007020 } /* Keyword.Pseudo */
.codehilite .kr { color: #007020; font-weight: bold } /* Keyword.Reserved */
.codehilite .kt { color: #902000 } /* Keyword.Type */
.codehilite .m { color: #40A070 } /* Literal.Number */
.codehilite .s { color: #4070A0 } /* Literal.String */
.codehilite .na { color: #4070A0 } /* Name.Attribute */
.codehilite .nb { color: #007020 } /* Name.Builtin */
.codehilite .nc { color: #0E84B5; font-weight: bold } /* Name.Class */
.codehilite .no { color: #60ADD5 } /* Name.Constant */
.codehilite .nd { color: #555; font-weight: bold } /* Name.Decorator */
.codehilite .ni { color: #D55537; font-weight: bold } /* Name.Entity */
.codehilite .ne { color: #007020 } /* Name.Exception */
.codehilite .nf { color: #06287E } /* Name.Function */
.codehilite .nl { color: #002070; font-weight: bold } /* Name.Label */
.codehilite .nn { color: #0E84B5; font-weight: bold } /* Name.Namespace */
.codehilite .nt { color: #062873; font-weight: bold } /* Name.Tag */
.codehilite .nv { color: #BB60D5 } /* Name.Variable */
.codehilite .ow { color: #007020; font-weight: bold } /* Operator.Word */
.codehilite .w { color: #BBB } /* Text.Whitespace */
.codehilite .mb { color: #40A070 } /* Literal.Number.Bin */
.codehilite .mf { color: #40A070 } /* Literal.Number.Float */
.codehilite .mh { color: #40A070 } /* Literal.Number.Hex */
.codehilite .mi { color: #40A070 } /* Literal.Number.Integer */
.codehilite .mo { color: #40A070 } /* Literal.Number.Oct */
.codehilite .sa { color: #4070A0 } /* Literal.String.Affix */
.codehilite .sb { color: #4070A0 } /* Literal.String.Backtick */
.codehilite .sc { color: #4070A0 } /* Literal.String.Char */
.codehilite .dl { color: #4070A0 } /* Literal.String.Delimiter */
.codehilite .sd { color: #4070A0; font-style: italic } /* Literal.String.Doc */
.codehilite .s2 { color: #4070A0 } /* Literal.String.Double */
.codehilite .se { color: #4070A0; font-weight: bold } /* Literal.String.Escape */
.codehilite .sh { color: #4070A0 } /* Literal.String.Heredoc */
.codehilite .si { color: #70A0D0; font-style: italic } /* Literal.String.Interpol */
.codehilite .sx { color: #C65D09 } /* Literal.String.Other */
.codehilite .sr { color: #235388 } /* Literal.String.Regex */
.codehilite .s1 { color: #4070A0 } /* Literal.String.Single */
.codehilite .ss { color: #517918 } /* Literal.String.Symbol */
.codehilite .bp { color: #007020 } /* Name.Builtin.Pseudo */
.codehilite .fm { color: #06287E } /* Name.Function.Magic */
.codehilite .vc { color: #BB60D5 } /* Name.Variable.Class */
.codehilite .vg { color: #BB60D5 } /* Name.Variable.Global */
.codehilite .vi { color: #BB60D5 } /* Name.Variable.Instance */
.codehilite .vm { color: #BB60D5 } /* Name.Variable.Magic */
.codehilite .il { color: #40A070 } /* Literal.Number.Integer.Long */

  /* On :root and not only body: daisyUI paints :root in its own base
     colour, and a body background stops where the content does. */
  :root { background: #fbf9f3; color: #26241f; }
  body { font-family: Georgia, 'Times New Roman', serif; color: #26241f; background: #fbf9f3;
         margin: 0; padding: 0; max-width: none; line-height: 1.55; min-height: 100vh;
         display: flex; flex-direction: column; }
  body > .g-layout, body > .g-map, body > .g-cards, body > .g-writers { flex: 1 0 auto; }
  /* A grid that fills the window keeps its rows at their own height. */
  .g-cards, .g-writers { align-content: start; }
  a { color: inherit; }
  [x-cloak] { display: none !important; }
  .g-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
           gap: 1.5rem; padding: .6rem 1.25rem; border-bottom: 1px solid #e6e1d3; font-size: .85rem;
           background: #fbf9f3; position: sticky; top: 0; z-index: 5; }
  .g-top .handle { font-family: ui-monospace, Menlo, monospace; letter-spacing: .04em;
                   text-decoration: none; white-space: nowrap; }
  .g-top .handle:hover { text-decoration: underline; }
  .g-links { display: flex; gap: 1rem; white-space: nowrap; }
  .g-links a { text-decoration: none; opacity: .7; }
  .g-links a:hover { opacity: 1; }
  /* the trail: the pages this reader opened, as dots */
  /* No overflow: hidden here — the tooltip under a dot hangs outside
     the bar's box, and a clipped tooltip is no tooltip. */
  .g-trail { display: flex; align-items: center; gap: .35rem; min-width: 0; }
  .g-trail .tooltip { display: inline-flex; }
  /* daisyUI's tooltip in the garden's own ink, whatever its theme
     variables come to without Tailwind. */
  .g-trail .tooltip:before { background: #26241f; color: #fbf9f3; font-size: .75rem;
                             font-family: Georgia, 'Times New Roman', serif; }
  .g-trail .tooltip:after { border-bottom-color: #26241f; }
  .g-trail .dot { width: 1.1rem; height: 1.1rem; border-radius: 50%; display: inline-flex;
                  align-items: center; justify-content: center; color: #fff; text-decoration: none;
                  flex: none; opacity: .85; border: 2px solid transparent; }
  .g-trail .dot:hover { opacity: 1; }
  .g-trail .dot.here { border-color: #26241f; opacity: 1; }
  .g-trail .dot i { font-size: .6rem; line-height: 1; }
  .g-trail .more { background: none; border: 0; cursor: pointer; font: inherit; font-size: .75rem;
                   opacity: .55; padding: 0 .25rem; }
  .g-trail .more:hover { opacity: 1; }
  .g-modal { position: fixed; inset: 0; background: rgba(38,36,31,.35); display: flex;
             align-items: flex-start; justify-content: center; padding: 4rem 1rem; z-index: 20; }
  .g-modal .box { background: #fbf9f3; border-radius: 12px; max-width: 34rem; width: 100%;
                  max-height: 80vh; overflow: auto; padding: 1.25rem; box-shadow: 0 12px 40px rgba(0,0,0,.2); }
  .g-modal h3 { margin: 0 0 .75rem; font-size: 1rem; display: flex; justify-content: space-between; }
  .g-modal h3 button, .g-modal .clear { background: none; border: 0; cursor: pointer; font: inherit;
                                        font-size: .8rem; opacity: .6; }
  .g-modal h3 button:hover, .g-modal .clear:hover { opacity: 1; }
  .g-modal a { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; text-decoration: none;
               border-bottom: 1px solid #ece8dc; }
  .g-modal a .when { margin-left: auto; font-size: .75rem; opacity: .5; white-space: nowrap; }
  .g-modal .who { font-family: ui-monospace, Menlo, monospace; font-size: .75rem; opacity: .6; }
  /* search */
  .g-search { position: relative; width: 16rem; max-width: 40vw; }
  .g-search input { width: 100%; box-sizing: border-box; font: inherit; font-size: .85rem;
                    padding: .3rem .6rem; border: 1px solid #d9d3c2; border-radius: 999px;
                    background: #fff; }
  .g-search .results { position: absolute; right: 0; top: 2.2rem; width: 24rem; max-width: 90vw;
                       background: #fbf9f3; border: 1px solid #e6e1d3; border-radius: 10px;
                       box-shadow: 0 12px 40px rgba(0,0,0,.15); padding: .35rem; z-index: 15;
                       max-height: 60vh; overflow: auto; }
  .g-search .results a { display: block; padding: .4rem .6rem; text-decoration: none; border-radius: 6px; }
  .g-search .results a:hover, .g-search .results a.picked { background: #f0ece0; }
  .g-search .results .where { display: block; font-size: .75rem; opacity: .55; }
  .g-search .results .snip { display: block; font-size: .8rem; opacity: .75; }
  .g-search .results .none { padding: .5rem .6rem; font-size: .8rem; opacity: .55; }
  /* The writer's own markdown, given its rhythm back (Bo, 2026-09-22).
     daisyUI 5 brings Tailwind's reset with it, which zeroes every
     margin and makes a heading the size and weight of body text — so
     a page arrived as one grey slab. Nothing here is a redesign: it
     is the browser's own rhythm, said out loud because the reset took
     it away.

     The measure is the grid's to decide and not this file's (Bo,
     2026-09-23). A cell fills its column, the way it does in the
     editor; holding the text to 42rem inside it left half of a
     full-width cell empty and made the page disagree with the layout
     its writer laid out. */
  .md p, .md ul, .md ol, .md blockquote, .md pre, .md table { margin: 0 0 1em; }
  .md > :last-child { margin-bottom: 0; }
  .md h1, .md h2, .md h3, .md h4 { font-weight: 600; line-height: 1.25; }
  .md h1 { font-size: 1.5rem; margin: 1.8rem 0 .6rem; }
  .md h2 { font-size: 1.2rem; margin: 1.6rem 0 .5rem; }
  .md h3 { font-size: 1.05rem; margin: 1.3rem 0 .4rem; }
  .md h4 { font-size: 1rem; margin: 1.1rem 0 .3rem; }
  .md > :first-child { margin-top: 0; }
  .md ul, .md ol { padding-left: 1.3rem; }
  .md ul { list-style: disc; }
  .md ol { list-style: decimal; }
  .md li { margin: .2rem 0; }
  .md li > ul, .md li > ol { margin: .2rem 0; }
  .md blockquote { border-left: 3px solid #e6e1d3; padding-left: .9rem; opacity: .85; font-style: italic; }
  .md hr { border: 0; border-top: 1px solid #e6e1d3; margin: 1.75rem 0; }
  .md a { text-decoration: underline; text-underline-offset: .15em; }
  .md strong { font-weight: 700; }
  .md em { font-style: italic; }
  .md code { background: #f4f1e8; border-radius: 4px; padding: .1em .3em; font-size: .85em;
             font-family: ui-monospace, Menlo, Consolas, monospace; }
  .md pre { background: #f6f4ec; border-radius: 8px; padding: .6rem .85rem; overflow-x: auto; }
  .md pre code { background: none; padding: 0; }
  .md table { border-collapse: collapse; }
  .md th, .md td { border-bottom: 1px solid #e6e1d3; padding: .35rem .6rem .35rem 0; text-align: left; }
  .md th { font-weight: 600; }
  .md img { max-width: 100%; height: auto; }

  /* a page */
  .g-layout { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 2rem; align-items: start;
              margin: 1.5rem 0; padding: 0 1.5rem; }
  .g-layout.with-story { grid-template-columns: 15rem minmax(0, 1fr) 17rem; }
  @media (max-width: 64rem) { .g-layout, .g-layout.with-story { grid-template-columns: 1fr; } }
  .g-layout > main { min-width: 0; }
  .g-card { border: 1px solid #e6e1d3; border-radius: 10px; padding: .75rem 1rem; margin: 0 0 1rem;
            font-size: .85rem; background: #fdfcf8; }
  .g-card h4 { margin: 0 0 .4rem; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
               opacity: .55; font-weight: 600; }
  .g-card ul { margin: 0; padding: 0; list-style: none; }
  .g-card li { padding: .15rem 0; }
  .g-card .none { opacity: .5; }
  .g-card .where { display: block; font-size: .75rem; opacity: .55; }
  /* What other people wrote about this page, under it: where the
     reading ends (docs/adr/0069). Quieter than the page and louder
     than the footer — it is somebody's writing, not a control. */
  .g-reactions { margin: 2.5rem 0 0; padding: 1rem 0 0; border-top: 1px solid #e6e1d3; }
  .g-reactions h4 { margin: 0 0 .5rem; font-size: .7rem; letter-spacing: .08em;
                    text-transform: uppercase; opacity: .55; font-weight: 600; }
  /* One card each, in the same shape as a page card on a writer's own
     page — four things on four lines rather than four things in a row
     that read as one sentence. */
  .g-answers { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
               gap: .75rem; margin: 0 0 1rem; padding: 0; list-style: none; }
  .g-answers a { display: block; border: 1px solid #e6e1d3; border-radius: 10px;
                 padding: .75rem .9rem; text-decoration: none; background: #fdfcf8; }
  .g-answers a:hover { background: #f4f1e8; }
  .g-answers .k { display: block; font-size: .7rem; letter-spacing: .06em;
                  text-transform: uppercase; opacity: .5; }
  .g-answers .t { display: block; font-weight: 600; margin: .15rem 0 .25rem; }
  .g-answers .s { display: block; font-size: .8rem; opacity: .75; }
  .g-answers .w { display: block; font-size: .72rem; opacity: .5; margin-top: .5rem; }
  .g-said { display: block; font-size: .85rem; opacity: .7; margin: .1rem 0 .3rem; }
  .g-write { margin: 0; font-size: .85rem; opacity: .8; }
  /* the view card: one of three drawings, the reader's choice */
  .g-tabs { display: flex; gap: .25rem; margin: 0 0 .6rem; }
  .g-tabs button { font: inherit; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
                   background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
                   color: inherit; opacity: .5; padding: 0 .1rem .2rem; }
  .g-tabs button:hover { opacity: .85; }
  .g-tabs button.on { opacity: 1; border-bottom-color: #26241f; }
  .g-tabs .g-enlarge { margin-left: auto; opacity: .5; font-size: .7rem; border: 0; }
  .g-tabs .g-enlarge:hover { opacity: 1; }
  .g-view { max-height: 24rem; overflow: auto; }
  .g-modal .box.wide { max-width: none; width: calc(100vw - 4rem); height: calc(100vh - 6rem); }
  .g-view.big { max-height: none; height: calc(100vh - 11rem); }
  .g-view.big .g-board.small, .g-view.big .g-graph { height: calc(100vh - 11.5rem); }

  .g-view .g-board.small { height: 18rem; }
  .g-graph { height: 20rem; }
  .g-graph svg { display: block; }
  /* the story map: the export's drawing, in the garden's ink, in a
     frame you drag and scroll — never shrunk to fit */
  .visual { height: 22rem; overflow: hidden; cursor: grab; touch-action: none; user-select: none; }
  .visual:active { cursor: grabbing; }
  .visual svg { display: block; width: 100%; height: 100%; }
  .visual-pan { transform-origin: 0 0; }
  .g-view.big .visual { height: calc(100vh - 11.5rem); }
  .visual-node rect { fill: #fdfcf8; stroke: #e6e1d3; }
  .visual-node.spine rect { fill: #f4f1e8; stroke: #d9d3c2; }
  .visual-node.current rect { stroke: #26241f; stroke-width: 2; }
  .visual-node.repeat rect { stroke-dasharray: 4 3; fill: transparent; }
  .visual-node text { font-size: 11px; fill: #26241f; font-family: Georgia, serif; }
  .visual-reading-time { font-size: 9px; fill: #9aa1ab; }
  .visual-heading { font-size: 9px; font-weight: 600; letter-spacing: .06em; fill: #9aa1ab; }
  .visual-lines path { fill: none; stroke: #e6e1d3; stroke-width: 2; }
  .g-story ol { margin: 0; padding-left: 1rem; font-size: .85rem; }
  .g-story ol ol { padding-left: .9rem; font-size: .8rem; opacity: .85; }
  .g-story li { margin: .2rem 0; }
  .g-story a { text-decoration: none; }
  .g-story a:hover { text-decoration: underline; }
  .g-story [aria-current] { font-weight: 700; }
  .g-story .title { font-size: .95rem; margin: 0 0 .5rem; }
  .g-under-review { font-size: .8rem; background: #fff4d6; border: 1px solid #ecd9a0; border-radius: 8px;
                    padding: .4rem .7rem; margin: 0 0 .75rem; }
  .g-grown { font-size: .8rem; opacity: .65; margin: -.5rem 0 1rem; display: flex; gap: 1rem; flex-wrap: wrap; }
  .g-grown .stage i { font-size: .75rem; margin-right: .2rem; }
  .g-pager { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem;
             margin: .75rem 0 1.25rem; }
  .g-pager a { text-decoration: none; opacity: .75; }
  .g-pager a:hover { opacity: 1; text-decoration: underline; }
  .g-pager.bottom { margin-top: 2.5rem; border-top: 1px solid #e6e1d3; padding-top: .75rem; }
  .g-part-of { font-size: .8rem; opacity: .6; margin: 0 0 1rem; }
  .g-foot { margin: 2rem 0 0; padding: .75rem 1.5rem 1rem; border-top: 1px solid #e6e1d3;
            font-size: .75rem; opacity: .55; }
  .g-kind { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; opacity: .55; }
  /* the writer's page and the front page */
  .g-hero { margin: 2rem 0 0; padding: 0 1.5rem; }
  .g-hero h1 { margin: 0 0 .25rem; }
  .g-hero p { margin: 0; opacity: .75; max-width: 46rem; }
  .g-hero .g-lead > p + p { margin-top: .75rem; }
  /* The two ways out of the hero are the point of it, not a footnote:
     the app's teal, underlined at a distance from the type, and big
     enough to be read (Bo, 2026-09-22). */
  .g-hero p.g-invite { margin: 1rem 0 0; max-width: 46rem; opacity: 1; }
  .g-invite a { color: #0d6e6e; text-decoration: underline; text-underline-offset: .18em;
                text-decoration-thickness: 1px; font-weight: 600; }
  .g-invite a:hover { text-decoration-thickness: 2px; }
  .g-profile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem;
               align-items: start; margin: 1.5rem 0; padding: 0 1.5rem; }
  @media (max-width: 64rem) { .g-profile { grid-template-columns: 1fr; } }
  .g-about { display: flex; gap: 1.25rem; align-items: flex-start; }
  .g-about .pic { width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; flex: none;
                  background: #e6e1d3; display: flex; align-items: center; justify-content: center;
                  font-size: 2.2rem; color: #7c7f8c; font-family: ui-monospace, Menlo, monospace; }
  .g-about h1 { margin: 0 0 .35rem; font-size: 1.4rem; font-family: ui-monospace, Menlo, monospace; }
  .g-about p { margin: 0; white-space: pre-line; }
  .g-where { font-size: .8rem; opacity: .6; margin: 0 0 .4rem !important; }
  .g-where i { font-size: .7rem; margin-right: .2rem; }
  /* the writers */
  /* A phone (Bo, 2026-09-23: "de garden is niet zo mooi op een
     mobiel"). Not a second interface: a garden page is static html and
     the same html on every screen, so what a narrow one needs is the
     room it has, not a second build to keep in step. One breakpoint,
     at 40rem, and below it everything is one column anyway.

     It is a stylesheet and nothing else, which is why this reaches
     every page anybody ever published without rebuilding one of
     them. */
  /* The strip a phone puts under the bar (backend/garden/_render.py).
     Above 40rem the page and its drawings and its links are one
     screen, so there is nothing to choose between and it is not
     drawn. */
  .g-panels { display: none; }
  /* A wrapper that holds the state for a screen and nothing else: with
     `display: contents` its children stay exactly where they were in
     the layout — direct children of the body's flex column — while
     reading `panel` from it (backend/garden/_render.py). */
  .g-screen { display: contents; }
  /* The hero says the whole thing on a screen that has room for it. */
  .g-hero .g-more { display: none; }

  @media (max-width: 40rem) {
    /* Under the bar, whose own height on a phone is two rows —
       measured, not guessed. */
    .g-panels { display: flex; align-items: baseline; gap: .75rem; overflow-x: auto;
                scrollbar-width: none; position: sticky; top: 4.95rem; z-index: 4;
                background: #fbf9f3; border-bottom: 1px solid #e6e1d3;
                padding: .4rem 1rem; margin: 0; font-size: .8rem; }
    .g-panels::-webkit-scrollbar { display: none; }
    .g-panels .what { font-weight: 600; white-space: nowrap; max-width: 40vw;
                      overflow: hidden; text-overflow: ellipsis; }
    .g-panels .strip { display: flex; gap: .6rem; margin-left: auto; }
    .g-panels button { font: inherit; background: none; border: 0; cursor: pointer;
                       color: inherit; opacity: .5; padding: 0 .1rem .15rem;
                       border-bottom: 2px solid transparent; white-space: nowrap; }
    .g-panels button.on { opacity: 1; border-bottom-color: #26241f; }
    /* One panel at a time, so nothing beside the page keeps its own
       margins: they are the page now. */
    .g-layout > .g-side, .g-layout > .g-story { margin-top: .5rem; }
    /* And the rows keep their own height. The layout stretches to fill
       the window (body is a flex column), and a stretched grid hands
       the spare height to its rows — which with one panel showing is a
       hand's width of nothing between the strip and the panel. The
       same line the cards and the writers already needed. */
    .g-layout { align-content: start; }
    /* The card's own tabs say what the strip above already says. */
    .g-views > .g-tabs { display: none; }

    /* The hero, three lines of it, with the rest one press away: the
       front page is a way in and not a text to read standing up. */
    .g-hero .g-lead { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
                      overflow: hidden; }
    .g-hero .g-lead.open { -webkit-line-clamp: unset; overflow: visible; }
    /* Two paragraphs in the clamped block: kept as paragraphs, with the
       clamp counting across them. */
    .g-hero .g-lead > p { display: inline; }
    .g-hero .g-lead > p + p::before { content: " "; }
    .g-hero .g-lead.open > p { display: block; }
    .g-hero .g-lead.open > p + p::before { content: none; }
    .g-hero .g-more { display: inline; font: inherit; font-size: .8rem; background: none;
                      border: 0; padding: 0; margin: .2rem 0 0; cursor: pointer;
                      color: inherit; opacity: .6; text-decoration: underline; }

    /* The bar holds three things and has room for two. The search goes
       to a second row, full width, where a thumb can reach it; the
       links scroll sideways inside their own box rather than pushing
       the rest off the screen (they are nowrap, deliberately). */
    .g-top { grid-template-columns: minmax(0, 1fr) auto; gap: .5rem .9rem; padding: .5rem .9rem; }
    /* The three links have the first row to themselves — squeezed
       into a column beside `history` they lose their last word to an
       overflow box. `history` goes next to the search instead, which
       has width to spare. */
    .g-links { grid-area: 1 / 1 / 2 / -1; gap: .9rem; overflow-x: auto; }
    .g-search { grid-area: 2 / 1; width: 100%; max-width: none; }
    .g-trail { grid-area: 2 / 2; }
    /* The trail keeps its way in and loses its dots. Eleven-pixel
       circles are a poor target for a thumb and tell a reader nothing
       at that size; `all` opens the same pages with their titles on,
       which is what somebody on a phone wants from a trail. The bar
       stays two rows — it is sticky, and a third row of it would be a
       third of the screen. */
    .g-trail .tooltip { display: none; }
    .g-links { scrollbar-width: none; }
    .g-links::-webkit-scrollbar { display: none; }

    /* A label and its line, stacked: side by side they leave the
       label two words on two lines. */
    .g-section { flex-direction: column; gap: .15rem; align-items: stretch; }

    /* 1.5rem on each side is a seventh of a phone. */
    .g-layout, .g-map, .g-cards, .g-writers, .g-hero, .g-section {
      padding-left: 1rem; padding-right: 1rem; }
    .g-foot { padding-left: 1rem; padding-right: 1rem; }

    /* The page first. In the markup a narrative's own navigation comes
       before it, which is right beside the text and wrong above it —
       and then the strip has to be pulled in front of the page again.
       Only inside the layout: on the other screens the strip is a
       child of the body (through .g-screen), where an order of its own
       would put it above the bar and behind it. */
    .g-layout > main { order: -1; }
    .g-layout > .g-panels { order: -2; }

    /* One thing that scrolls, not three. Beside the map these have a
       height of their own and a scrollbar of their own; underneath it,
       that is a box you have to catch before you can read it. */
    .g-map.front .g-list, .g-view { max-height: none; min-height: 0; overflow: visible; }
    /* And the map itself gets a share of the screen rather than
       whatever is left after a desktop's furniture. */
    .g-board { height: 55vh; min-height: 13rem; }
    .g-board.small { height: 16rem; }
    .g-graph { height: 16rem; }

    /* A table wider than the screen scrolls inside itself instead of
       taking the whole page sideways. */
    .md table { display: block; overflow-x: auto; }
  }

  .g-writers { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1rem;
               margin: 1.5rem 0 2rem; padding: 0 1.5rem; }
  .g-writer { display: flex; gap: 1rem; align-items: flex-start; border: 1px solid #e6e1d3; border-radius: 10px;
              padding: 1rem; text-decoration: none; background: #fdfcf8; }
  .g-writer:hover { background: #f4f1e8; }
  .g-writer .pic { width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; flex: none; background: #e6e1d3;
                   display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #7c7f8c;
                   font-family: ui-monospace, Menlo, monospace; }
  .g-writer .handle { display: block; font-family: ui-monospace, Menlo, monospace; font-size: 1rem; }
  .g-writer .where { display: block; font-size: .75rem; opacity: .6; margin-top: .1rem; }
  .g-writer .where i { font-size: .7rem; margin-right: .2rem; }
  .g-writer p { margin: .4rem 0; font-size: .85rem; white-space: pre-line; }
  .g-writer .w { display: block; font-size: .72rem; opacity: .5; margin-top: .4rem; }
  .g-map { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 2rem; align-items: start;
           margin: 1rem 0; padding: 0 1.5rem; }
  @media (max-width: 64rem) { .g-map { grid-template-columns: 1fr; } }
  /* The front page fits the window: the bar, the hero and the foot
     take about 22rem, the map takes the rest, and the list beside it
     scrolls on its own rather than the page. */
  .g-board { background: #f4f1e8; border: 1px solid #e6e1d3; border-radius: 12px; position: relative;
             height: calc(100vh - 24rem); min-height: 20rem; }
  .g-map.front .g-list { max-height: calc(100vh - 24rem); min-height: 20rem; overflow-y: auto;
                         padding-right: .5rem; }
  .g-board.small { height: 22rem; min-height: 0; }
  .g-board svg { width: 100%; height: 100%; display: block; }
  .g-focus { display: flex; align-items: baseline; gap: .5rem; font-size: .85rem; margin: .5rem 0 0; }
  .g-focus button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit;
                    padding: 0; text-decoration: underline dotted; }
  .g-focus .here { font-weight: 600; }
  .g-list { font-size: .9rem; }
  .g-list a { display: block; text-decoration: none; padding: .3rem 0; border-bottom: 1px solid #ece8dc; }
  .g-list a:hover { background: #f4f1e8; }
  .g-list .where { display: block; font-size: .75rem; opacity: .55; }
  .g-list .who { font-family: ui-monospace, Menlo, monospace; font-size: .75rem; opacity: .6; }
  .g-hint { font-size: .8rem; opacity: .55; margin: .5rem 0 0; }
  .g-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem;
             margin: 1rem 0 2rem; padding: 0 1.5rem; }
  .g-cards a { display: block; border: 1px solid #e6e1d3; border-radius: 10px; padding: .85rem 1rem;
               text-decoration: none; background: #fdfcf8; min-height: 6rem; }
  .g-cards a:hover { background: #f4f1e8; }
  /* Edge to edge across the card, at the picture's own proportions;
     only a very tall one is cut, from the top down. */
  .g-cards .cover { display: block; width: calc(100% + 2rem); max-width: none; height: auto; max-height: 16rem;
                    object-fit: cover; object-position: top; margin: -.85rem -1rem .6rem;
                    border-radius: 10px 10px 0 0; background: #fff; border-bottom: 1px solid #ece8dc; }
  .g-cards .t { font-weight: 600; display: block; margin: .15rem 0 .25rem; }
  .g-cards .s { display: block; font-size: .8rem; opacity: .75; }
  .g-cards .w { display: block; font-size: .72rem; opacity: .5; margin-top: .5rem; }
  .g-section { margin: 1.5rem 0 0; padding: 0 1.5rem; display: flex;
               justify-content: space-between; align-items: baseline; gap: 1rem; }
  .g-section h2 { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; opacity: .55; margin: 0; }