@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; }
  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; }
  @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; }
  /* 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; }
  /* 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-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 */
  .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; }