/* ===========================================================================
   Due Mari — majolica & Seminara.
   Not cream and terracotta. Real maiolica is graphic: flat saturated fields of
   colour painted onto a hard tin-glaze white, with the pattern kept to edges and
   grounds. The ground here is cool, not buttery — that single choice is what
   stops it reading as the default warm travel app.
   =========================================================================== */

:root {
  /* the tin glaze: an opaque white with a breath of grey-green in it, the way a
     fired stannic glaze actually sits. Never #FFF, never cream. */
  --ground: #F4F5F2;
  --raised: #FBFBF9;
  --sunk:   #E8EAE4;

  /* SQUILLACE — the base register. Calabria's ceramic town glazed white and painted
     in cobalt in deliberate imitation of Chinese porcelain, and blue has dominated its
     output since the 1800s. So this app is blue-on-white first; everything else is an
     accent, used the way a painter uses a second brush. */
  --cobalt:    #17427F;   /* the porcelain blue. Nav, links, actives, numbers, Sanchi's ink */
  --cobalt-lo: #2E6099;
  --azure:     #4E86B8;   /* the lighter wash — Seminara's azzurro, for second strokes */

  /* SEMINARA — greens, azure and one very particular yellow-orange, in contrast.
     Sparing: these are what the pignatàri put on a mask, not what they covered a plate in. */
  --green:     #3F7D4A;
  --yellow:    #DE8B24;   /* the giallo-arancio. Display sizes only — hot and rare */
  --yellow-tx: #8A5410;   /* the same, darkened until it passes contrast as text */
  --manganese: #5A3A46;   /* line work, the mask's features, Andrea's ink */
  --terra:     #B0533A;   /* rarest. hairlines and the three real warnings */

  --ink:   #22262B;
  --ink2:  #5B6169;
  --ink3:  #8A9098;
  --rule:  #D6D9D1;

  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  /* A REAL SCALE. The old one ran 11·12·12·5·16·18·19·23·27 — nine sizes inside one
     octave, which reads as mush: nothing looks chosen because nothing looks different.
     These jump. Confidence in a layout is mostly just contrast that was decided on. */
  --t-display: 42px;   /* a leg name. The biggest thing on the screen, by a distance */
  --t-title:   32px;   /* a chapter, a day */
  --t-read:    20px;   /* the overture. Set to be read, not scanned */
  --t-row:     17px;   /* the name of a thing */
  --t-body:    15px;   /* its line */
  --t-small:   13px;   /* reference, captions */
  --t-label:   11px;   /* eyebrows, chips — the only place this small is allowed */

  --air:   22px;       /* between things */
  --air-s: 44px;       /* between sections. Twice, so a section reads as a section */

  --tap: 44px;
  --pad: 16px;
  --r: 3px;                /* ceramic edges are barely rounded, not pill-shaped */
}

/* NIGHT. Not "dark mode" as a system courtesy — a blue-ground ware.
   Maiolica is a light medium and a first pass simply inverted the greys, which left
   the painted scroll glaring white on black: the ornament shouting instead of framing.
   But blue-ground maiolica is a real thing — the decoration reserved in white on a
   cobalt field — so night is that plate rather than a dimmed version of the day one.

   The scoping matters more than the colours. The old rule put these variables behind
   the media query and gave [data-theme="light"] nothing but `color-scheme`, so a phone
   set to dark stayed dark whatever the toggle said. `:not([data-theme])` is the fix:
   an explicit choice always wins over the system. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --ground: #10151C; --raised: #18202A; --sunk: #0A0E13;
    --cobalt: #8FB6E4; --cobalt-lo: #7BA0CC; --azure: #A8C8E8;
    --green: #83B98F; --yellow: #E8BC4A; --yellow-tx: #E8BC4A;
    --manganese: #C7A3AE; --terra: #E08A70;
    --ink: #EDEFF2; --ink2: #A9B0BA; --ink3: #767E89; --rule: #262F3A;
  }
}
:root[data-theme="dark"] {
  --ground: #10151C; --raised: #18202A; --sunk: #0A0E13;
  --cobalt: #8FB6E4; --cobalt-lo: #7BA0CC; --azure: #A8C8E8;
  --green: #83B98F; --yellow: #E8BC4A; --yellow-tx: #E8BC4A;
  --manganese: #C7A3AE; --terra: #E08A70;
  --ink: #EDEFF2; --ink2: #A9B0BA; --ink3: #767E89; --rule: #262F3A;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light }

/* Self-hosted, OFL, no external request. EB Garamond is a Renaissance Garamond
   revival — the same centuries as the maiolica this app is dressed in, which makes it
   a period choice rather than an arbitrary pretty one. Three cuts only: text, its
   italic, and a semibold for display. ~74 KB once, then cached forever. */
@font-face {
  font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("font/ebgaramond-reg.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("font/ebgaramond-ital.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("font/ebgaramond-semi.woff2") format("woff2");
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent }

html, body {
  margin: 0; padding: 0;
  background: var(--ground); color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;                       /* never smaller. this is read in sunlight */
  line-height: 1.5;
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
}

/* ======================================================================== *
   THE ORNAMENT
   Maiolica is not a palette, it is a craft: a white tin-glazed ground, painted
   borders framing panels, rosettes, hard outlines, flat colour. Colour alone
   just borrows the look. Everything below is drawn as inline SVG data URIs —
   no external request, no image weight, scales to any screen.
 * ======================================================================== */

/* The ground is glaze: clean, white, undecorated. A first pass put a grout grid
   here, which is a tile FLOOR — the wrong object. Squillace was imitating porcelain,
   and a porcelain plate is bare white with the painting driven to the rim and the
   centre. Everything ornamental in this app therefore happens at edges and in
   reserves, never as wallpaper behind text. */
body { background-color: var(--ground) }

/* ---- THE RUNNING SCROLL — the border that frames a Squillace plate.
   An acanthus scroll: a wave stem with palmettes turning alternately up and down,
   caught between two rim rules, with an orange berry at each crossing. This is the
   documented Squillace framing device, not a geometric approximation of one. Blue on
   white, because that is what the pignatàri were imitating: porcelain. */
.tile {
  height: 16px;
  background-repeat: repeat-x;
  background-size: auto 16px;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='48' height='16' viewBox='0 0 48 16'>\
<rect width='48' height='16' fill='%23F5F6F4'/>\
<path d='M0 2.4H48M0 13.6H48' stroke='%2317427F' stroke-width='0.9'/>\
<path d='M0 8C6 3.4 10 3.4 12 8C14 12.6 18 12.6 24 8C30 3.4 34 3.4 36 8C38 12.6 42 12.6 48 8' \
fill='none' stroke='%2317427F' stroke-width='1.25' stroke-linecap='round'/>\
<path d='M12 7.7C10.2 5.9 10.3 4.6 12 3.6C13.7 4.6 13.8 5.9 12 7.7Z' fill='%2317427F'/>\
<path d='M9.4 7.4C8.2 6.3 8.2 5.4 9.5 4.9C10.2 5.8 10.2 6.7 9.4 7.4Z' fill='%234E86B8'/>\
<path d='M14.6 7.4C15.8 6.3 15.8 5.4 14.5 4.9C13.8 5.8 13.8 6.7 14.6 7.4Z' fill='%234E86B8'/>\
<path d='M36 8.3C34.2 10.1 34.3 11.4 36 12.4C37.7 11.4 37.8 10.1 36 8.3Z' fill='%2317427F'/>\
<path d='M33.4 8.6C32.2 9.7 32.2 10.6 33.5 11.1C34.2 10.2 34.2 9.3 33.4 8.6Z' fill='%234E86B8'/>\
<path d='M38.6 8.6C39.8 9.7 39.8 10.6 38.5 11.1C37.8 10.2 37.8 9.3 38.6 8.6Z' fill='%234E86B8'/>\
<circle cx='24' cy='8' r='1.6' fill='%23DE8B24'/><circle cx='0' cy='8' r='1.6' fill='%23DE8B24'/>\
<circle cx='48' cy='8' r='1.6' fill='%23DE8B24'/></svg>");
}
.tile.thin {
  height: 7px; background-size: auto 7px;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='24' height='7' viewBox='0 0 24 7'>\
<rect width='24' height='7' fill='%23F5F6F4'/>\
<path d='M0 3.5C4 0.9 8 6.1 12 3.5C16 0.9 20 6.1 24 3.5' fill='none' stroke='%2317427F' stroke-width='1'/>\
<circle cx='12' cy='3.5' r='1' fill='%23DE8B24'/></svg>");
}

/* The night plate: the scroll reserved in tin-glaze white on a cobalt ground, which
   is how blue-ground maiolica is actually painted. Same drawing, inverted pigment —
   so at night the ornament sits back into the page instead of glaring off it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .tile { background-image: var(--tile-night) }
  :root:not([data-theme]) .tile.thin { background-image: var(--tile-night-thin) }
}
:root[data-theme="dark"] .tile { background-image: var(--tile-night) }
:root[data-theme="dark"] .tile.thin { background-image: var(--tile-night-thin) }

:root {
  --tile-night: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='48' height='16' viewBox='0 0 48 16'>\
<rect width='48' height='16' fill='%2317427F'/>\
<path d='M0 2.4H48M0 13.6H48' stroke='%23DCE6F2' stroke-width='0.9'/>\
<path d='M0 8C6 3.4 10 3.4 12 8C14 12.6 18 12.6 24 8C30 3.4 34 3.4 36 8C38 12.6 42 12.6 48 8' \
fill='none' stroke='%23F2F6FB' stroke-width='1.25' stroke-linecap='round'/>\
<path d='M12 7.7C10.2 5.9 10.3 4.6 12 3.6C13.7 4.6 13.8 5.9 12 7.7Z' fill='%23F2F6FB'/>\
<path d='M9.4 7.4C8.2 6.3 8.2 5.4 9.5 4.9C10.2 5.8 10.2 6.7 9.4 7.4Z' fill='%23A8C8E8'/>\
<path d='M14.6 7.4C15.8 6.3 15.8 5.4 14.5 4.9C13.8 5.8 13.8 6.7 14.6 7.4Z' fill='%23A8C8E8'/>\
<path d='M36 8.3C34.2 10.1 34.3 11.4 36 12.4C37.7 11.4 37.8 10.1 36 8.3Z' fill='%23F2F6FB'/>\
<path d='M33.4 8.6C32.2 9.7 32.2 10.6 33.5 11.1C34.2 10.2 34.2 9.3 33.4 8.6Z' fill='%23A8C8E8'/>\
<path d='M38.6 8.6C39.8 9.7 39.8 10.6 38.5 11.1C37.8 10.2 37.8 9.3 38.6 8.6Z' fill='%23A8C8E8'/>\
<circle cx='24' cy='8' r='1.6' fill='%23DE8B24'/><circle cx='0' cy='8' r='1.6' fill='%23DE8B24'/>\
<circle cx='48' cy='8' r='1.6' fill='%23DE8B24'/></svg>");
  --tile-night-thin: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='24' height='7' viewBox='0 0 24 7'>\
<rect width='24' height='7' fill='%2317427F'/>\
<path d='M0 3.5C4 0.9 8 6.1 12 3.5C16 0.9 20 6.1 24 3.5' fill='none' stroke='%23F2F6FB' stroke-width='1'/>\
<circle cx='12' cy='3.5' r='1' fill='%23DE8B24'/></svg>");
}

/* ---- THE FLOWER — the six-petal rosette painted at the centre of a plate and in
   the reserves of a border. Cobalt petals, a lighter azure heart, an orange eye.
   It marks sections and stands in for a bullet. */
.rosette {
  width: 20px; height: 20px; display: inline-block; vertical-align: -4px;
  background: no-repeat center/contain url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<g fill='%2317427F'>\
<ellipse cx='12' cy='5.4' rx='2.9' ry='4.6'/>\
<ellipse cx='12' cy='5.4' rx='2.9' ry='4.6' transform='rotate(60 12 12)'/>\
<ellipse cx='12' cy='5.4' rx='2.9' ry='4.6' transform='rotate(120 12 12)'/>\
<ellipse cx='12' cy='5.4' rx='2.9' ry='4.6' transform='rotate(180 12 12)'/>\
<ellipse cx='12' cy='5.4' rx='2.9' ry='4.6' transform='rotate(240 12 12)'/>\
<ellipse cx='12' cy='5.4' rx='2.9' ry='4.6' transform='rotate(300 12 12)'/></g>\
<circle cx='12' cy='12' r='3.6' fill='%234E86B8'/>\
<circle cx='12' cy='12' r='1.7' fill='%23DE8B24'/></svg>");
}

/* ---- a section head: band, then the words, with a rosette holding the line */
.head { margin: var(--air-s) 0 var(--air) }
.head .tile { margin-bottom: 9px }
.head h2 { margin: 0; display: flex; align-items: center; gap: 8px }
.head h2::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}

/* ---- the panel. Content sits in a painted frame, not a material-design box:
   square corners, a hairline in manganese the way a brush outlines a reserve,
   and the rank declared as a painted band across the top rather than a stripe
   down the side. */
.row {
  border: 1px solid var(--rule);
  border-left-width: 1px;
  border-radius: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.row > * { padding-left: 16px; padding-right: 16px }
.row::before {
  content: ""; display: block; height: 5px; background: var(--rule);
}
.row[data-rank="pick"]::before { background: var(--cobalt) }
.row[data-rank="solid"]::before { background: var(--green) }
.row[data-rank="situational"]::before { background: var(--rule) }
.row[data-rank="skip"]::before { background: var(--terra) }
.row .nm { padding-top: 14px }
.row .meta { padding-bottom: 14px }

/* done. Not greyed into illegibility — you still want to read what you did on
   day twelve. The band goes green and the title takes a quiet rule through it. */
.row[data-done="true"]::before { background: var(--green) }
.row[data-done="true"] .nm { text-decoration: line-through; text-decoration-color: var(--green);
                             text-decoration-thickness: 2px; color: var(--ink2) }

/* A pick earns a painted sprig in the corner — the little three-leaf spray a
   maiolica painter drops into an empty reserve so the white does not sit idle.
   It is the difference between a card and a decorated one. */
.row[data-rank="pick"]::after {
  content: ""; position: absolute; top: 12px; right: 12px;
  width: 20px; height: 20px; opacity: .7; pointer-events: none;
  background: no-repeat center/contain url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M12 22C12 16 12 10 12 4' stroke='%2317427F' stroke-width='1.3' fill='none' stroke-linecap='round'/>\
<path d='M12 15C8.5 14.4 6.6 12.2 6.8 9.4C9.8 9.6 11.8 11.7 12 15Z' fill='%2317427F'/>\
<path d='M12 15C15.5 14.4 17.4 12.2 17.2 9.4C14.2 9.6 12.2 11.7 12 15Z' fill='%234E86B8'/>\
<path d='M12 9.4C9.9 8.9 8.8 7.3 9 5.4C10.9 5.7 12 7.2 12 9.4Z' fill='%234E86B8'/>\
<path d='M12 9.4C14.1 8.9 15.2 7.3 15 5.4C13.1 5.7 12 7.2 12 9.4Z' fill='%2317427F'/>\
<circle cx='12' cy='3.4' r='1.7' fill='%23DE8B24'/></svg>");
}

/* ---- the overture: the art piece. A painted panel, framed on all four sides
   the way a maiolica plaque is, with the tile band top and bottom. This is the
   one place the app stops being useful and just is. */
.overture {
  background: var(--raised);
  border: 1px solid var(--manganese);
  padding: 0;
  margin: 16px 0 22px;
  max-width: none;
}
.overture .tile { height: 11px; background-size: auto 11px }
.overture .body {
  color: var(--ink);
  padding: 30px 26px 32px;
  font: 400 var(--t-read)/1.72 var(--serif);
  max-width: 33em;
}
.overture .body p:first-child::first-letter {
  float: left; font-size: 3.1em; line-height: .82; padding: 4px 9px 0 0;
  color: var(--cobalt); font-weight: 600;
}

/* ---- the drop of colour a chapter opens with */
.chapterhead { margin: 0 0 6px }
.chapterhead .tile { height: 18px; background-size: auto 18px; margin-bottom: 14px }

/* ------------------------------------------------------------------ layout */
#app { padding-bottom: calc(var(--tap) + 26px + env(safe-area-inset-bottom)) }
main { padding: var(--pad) var(--pad) 40px; max-width: 700px; margin: 0 auto }

/* ---------------------------------------------------------------- bottom bar */
nav.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--raised);
  border-top: 1px solid var(--rule);
  padding-bottom: env(safe-area-inset-bottom);
}
nav.bar button {
  appearance: none; border: 0; background: none;
  min-height: var(--tap); padding: 6px 2px 8px;
  font: 600 11px/1.2 var(--ui); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink3); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border-top: 2px solid transparent; margin-top: -1px;
}
nav.bar button .g { font-size: 17px; line-height: 1 }
nav.bar button[aria-current="page"] { color: var(--cobalt); border-top-color: var(--cobalt) }

/* ------------------------------------------------------------------ type */
h1 { font: 600 var(--t-title)/1.08 var(--serif); margin: 4px 0 6px; letter-spacing: -.015em;
     color: var(--ink) }
h2 { font: 600 var(--t-label)/1.3 var(--ui); letter-spacing: .15em; text-transform: uppercase;
     color: var(--cobalt); margin: 0 }
h3 { font: 600 var(--t-row)/1.3 var(--ui); margin: 22px 0 8px; color: var(--ink) }
.eyebrow { font: 600 var(--t-label)/1 var(--ui); letter-spacing: .18em; text-transform: uppercase;
           color: var(--ink3); margin: 0 0 10px }
.sub { color: var(--ink2); font-size: var(--t-body); margin: 0 0 4px }

/* the narrative voice. Wider measure, serif, and deliberately not the same
   object as the menu — the wall between them is the whole design. */
.overture {
  font: 400 18px/1.62 var(--serif);
  margin: 14px 0 6px; max-width: 34em; color: var(--ink);
}
.overture p { margin: 0 0 .8em }
.overture p:last-child { margin-bottom: 0 }

/* ------------------------------------------------------------------ cards */
.row {
  display: block; width: 100%; text-align: left; margin-bottom: 12px;
  background: var(--raised); border: 1px solid var(--rule); border-left: 3px solid var(--rule);
  border-radius: var(--r); padding: 11px 13px; margin: 0 0 8px;
  color: inherit; font: inherit; cursor: pointer;
}
.row[data-rank="pick"] { border-left-color: var(--cobalt) }
.row[data-rank="solid"] { border-left-color: var(--green) }
.row[data-rank="situational"] { border-left-color: var(--rule) }
.row[data-rank="skip"] { border-left-color: var(--terra); opacity: .82 }
.row .nm { font-weight: 600; font-size: var(--t-row); line-height: 1.3; letter-spacing: -.005em;
           color: var(--ink) }
.row .one { color: var(--ink2); font-size: 16px; line-height: 1.55; margin-top: 6px;
            font-family: var(--serif); }
.row .meta { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 5px }

.chip {
  font: 600 10px/1 var(--ui); letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 6px; border-radius: 2px; background: var(--sunk); color: var(--ink2);
  white-space: nowrap;
}
.chip.effort-climb, .chip.effort-uphill { background: color-mix(in srgb, var(--yellow) 22%, transparent); color: var(--yellow-tx) }
.chip.restores { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green) }
.chip.unknown { background: transparent; border: 1px dashed var(--rule); color: var(--ink3) }
.chip.stale { background: color-mix(in srgb, var(--terra) 16%, transparent); color: var(--terra) }
.chip.cobalt { background: color-mix(in srgb, var(--cobalt) 14%, transparent); color: var(--cobalt) }

/* ---- photographs. A picture in a maiolica panel is a RESERVE: the painted white
   field the decoration is cleared away for. So it sits flush inside the frame with
   a hairline under it, not floating in a rounded card. */
.shot { margin: 0; padding: 0; background: var(--sunk) }
.shot img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  object-fit: cover; border-bottom: 1px solid var(--rule);
}
.shot.hero img { aspect-ratio: 16 / 9 }
.shot figcaption {
  padding: 7px 13px 8px; font: 400 12.5px/1.45 var(--ui); color: var(--ink2);
  background: var(--raised); border-bottom: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline;
}
.shot .cred {
  font-size: 10.5px; color: var(--ink3); letter-spacing: .02em; margin-left: auto;
  white-space: nowrap;
}
.row > .shot { padding-left: 0; padding-right: 0 }

/* a hero sits above a chapter, framed by the scroll like a plate's cavetto */
.chapterhead .shot { border: 1px solid var(--rule); border-top: 0; margin-bottom: 14px }

/* ======================================================================== *
   I DISEGNINI — the small drawings.
   A maiolica painter fills an empty reserve with a sprig, a fruit, a fish: not
   decoration for its own sake but the local world, drawn small, sitting in the
   white. So these are the things that are ACTUALLY HERE — the Tropea onion, the
   bergamot, the chilli, the swordfish, the olive, the prickly pear — set at low
   opacity in the corner of a card, keyed to what the card is about.
   Semi-transparent and behind the text on purpose: found rather than presented.
 * ======================================================================== */

.row { position: relative }
.row[data-draw]::before,
.row[data-draw] > .drawing {
  /* the drawing sits in the bottom-right reserve, under everything */
  position: absolute; right: 10px; bottom: 10px;
  width: 76px; height: 76px; pointer-events: none;
  opacity: .07; z-index: 0;
  background: no-repeat center/contain;
}
:root[data-theme="dark"] .drawing { opacity: .13; filter: brightness(2.6) }
.row > *:not(.drawing) { position: relative; z-index: 1 }

/* Drawn as a maiolica painter works: a flat filled silhouette with details
   RESERVED — left as unpainted glaze — rather than hairlines laid on top. Outline
   drawings disappear at 8% opacity; a filled shape still reads. Each one is a thing
   that is genuinely here, not a generic icon. */

/* cipolla rossa di Tropea — the bulb with its plaited tops, which is how it is sold:
   braided into a treccia and hung from a hook. */
.drawing[data-draw="onion"] { background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
<g fill='%2317427F'>\
<path d='M32 24c11 0 18 9 18 19 0 11-8 18-18 18s-18-7-18-18c0-10 7-19 18-19Z'/>\
<path d='M31 23c-1-6-5-10-11-13 1 6 4 11 8 14Zm2 0c1-6 5-10 11-13-1 6-4 11-8 14Z'/>\
<path d='M31 22V6h2v16Z'/></g>\
<g fill='%23F4F5F2' opacity='.55'>\
<path d='M32 26c-3 5-4 11-4 17s1 12 4 17c-1 .3-2 .3-3 0-3-5-4-11-4-17s1-12 4-17Z'/>\
<path d='M40 28c2 4 3 9 3 14s-1 10-3 14c-1-.3-1.6-.8-2-1.4 2-4 3-8 3-12.6s-1-8.6-3-12.6Z'/>\
</g></svg>") }

/* peperoncino — hung in strings on every wall in the region */
.drawing[data-draw="chilli"] { background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
<g fill='%2317427F'>\
<path d='M30 18c9 0 16 8 16 19 0 12-8 22-18 22-7 0-11-5-11-10 0-8 6-10 6-16 0-7-2-15 7-15Z'/>\
<path d='M27 19c-1-4 0-7 2-9 2 2 3 5 2 9Zm-2-8c-3-2-7-2-10 0 3 3 7 4 10 2Z'/></g>\
<path d='M33 25c4 4 6 10 6 17 0 6-2 11-5 15-1-.5-1.6-1.2-2-2 3-4 4-8 4-13 0-6-1-12-5-16Z' \
fill='%23F4F5F2' opacity='.5'/></svg>") }

/* bergamotto — grown here and almost nowhere else, and what makes Earl Grey */
.drawing[data-draw="bergamot"] { background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
<g fill='%2317427F'>\
<circle cx='29' cy='40' r='17'/>\
<path d='M29 22c1-8 7-13 16-14 0 9-5 15-13 16-1 0-2-1-3-2Z'/>\
<path d='M29 22V13h1.6v9Z'/></g>\
<path d='M20 34c3-4 7-6 12-6v2.4c-4 0-8 2-11 5.4Z' fill='%23F4F5F2' opacity='.6'/>\
<circle cx='38' cy='47' r='2' fill='%23F4F5F2' opacity='.45'/>\
<circle cx='24' cy='48' r='1.4' fill='%23F4F5F2' opacity='.45'/></svg>") }

/* pesce spada — the fish, and the passerelle it was hunted from off Scilla */
.drawing[data-draw="swordfish"] { background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
<g fill='%2317427F'>\
<path d='M22 32c4-7 12-11 21-11 8 0 14 4 17 11-3 7-9 11-17 11-9 0-17-4-21-11Z'/>\
<path d='M2 31.2 22 30.6v2.8L2 32.8Z'/>\
<path d='M36 21c1-8 4-13 9-16-1 7-2 12-4 16Z'/>\
<path d='M34 43c-1 6-3 9-6 11 1-5 2-8 3-11Z'/>\
<path d='M60 32 64 23v18Z'/></g>\
<circle cx='30' cy='29' r='2.2' fill='%23F4F5F2' opacity='.8'/>\
<path d='M26 36c6 2 13 2 19 0-6 3-13 3-19 0Z' fill='%23F4F5F2' opacity='.4'/></svg>") }

/* ulivo — the Locride is a plain of olive, and they sleep inside a grove */
.drawing[data-draw="olive"] { background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
<g fill='%2317427F'>\
<path d='M8 54C20 47 34 33 54 10l2 1.6C36 35 22 49 10 56Z'/>\
<path d='M28 33c-5-3-6-9-3-14 5 3 6 9 3 14Zm10-10c-5-3-6-9-3-14 5 3 6 9 3 14Z'/>\
<path d='M31 39c6-2 11 1 13 7-6 2-11-1-13-7Zm11-13c6-2 11 1 13 7-6 2-11-1-13-7Z'/>\
<circle cx='20' cy='44' r='4'/><circle cx='31' cy='48' r='3.4'/></g>\
<circle cx='19' cy='43' r='1.2' fill='%23F4F5F2' opacity='.6'/></svg>") }

/* fico d'India — on every dry wall in the south, and fruiting exactly now */
.drawing[data-draw="pear"] { background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
<g fill='%2317427F'>\
<path d='M24 58c-7 0-11-6-11-14 0-9 5-16 11-16s11 7 11 16c0 8-4 14-11 14Z'/>\
<path d='M40 42c-6 0-9-5-9-12 0-7 3-13 9-13s9 6 9 13c0 7-3 12-9 12Z'/>\
<ellipse cx='30' cy='16' rx='4' ry='5.4'/></g>\
<g fill='%23F4F5F2' opacity='.55'><circle cx='20' cy='38' r='1.1'/><circle cx='27' cy='44' r='1.1'/>\
<circle cx='22' cy='50' r='1.1'/><circle cx='38' cy='28' r='1.1'/><circle cx='44' cy='34' r='1.1'/>\
<circle cx='40' cy='22' r='1.1'/></g></svg>") }

/* la barca — anchored, which is the strongest single thing either of them asked for */
.drawing[data-draw="boat"] { background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
<g fill='%2317427F'>\
<path d='M6 40h52l-8 13H14Z'/>\
<path d='M30.4 38V8h2.6v30Z'/>\
<path d='M34 12c8 5 13 12 15 22H34Z'/>\
<path d='M29 18c-6 4-10 10-12 18h12Z'/></g>\
<path d='M4 58c4-3 8-3 12 0s8 3 12 0 8-3 12 0 8 3 12 0' fill='none' stroke='%2317427F' \
stroke-width='2.2' stroke-linecap='round'/></svg>") }

/* la maschera — the Seminara grotesque, for the sacred and the strange */
.drawing[data-draw="mask"] { background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
<g fill='%2317427F'>\
<circle cx='32' cy='35' r='20'/>\
<path d='M15 24 5 11l14 6Zm34 0 10-13-14 6Z'/></g>\
<g fill='%23F4F5F2'>\
<ellipse cx='24' cy='31' rx='5.4' ry='3.8'/><ellipse cx='40' cy='31' rx='5.4' ry='3.8'/>\
<path d='M20 45c4 4 8 5.6 12 5.6s8-1.6 12-5.6c-3.4 1-6.6-1.4-12-1.4s-8.6 2.4-12 1.4Z'/></g>\
<g fill='%2317427F'><circle cx='24' cy='31' r='1.8'/><circle cx='40' cy='31' r='1.8'/></g></svg>") }

/* the honest blank. Absence is a value, and it should look deliberate. */
.absent {
  border: 1px dashed var(--rule); border-radius: var(--r);
  padding: 10px 12px; color: var(--ink3); font-size: 14px; font-style: italic;
}

/* ------------------------------------------------------------------ trucco */
.trucco {
  background: var(--raised); border: 1px solid var(--cobalt);
  border-radius: var(--r); padding: 13px; margin: 0 0 10px;
  position: relative; overflow: hidden;
}
.trucco::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: repeating-linear-gradient(180deg, var(--cobalt) 0 6px, var(--yellow) 6px 12px);
}
.trucco .do { font-weight: 650; padding-left: 8px; color: var(--ink) }
.trucco .why { color: var(--ink2); font-size: 14px; margin-top: 6px; padding-left: 8px }
.trucco dl { margin: 8px 0 0; padding-left: 8px; font-size: 13px; color: var(--ink2) }
.trucco dt { font-weight: 650; color: var(--ink3); font-size: 11px;
             letter-spacing: .08em; text-transform: uppercase; margin-top: 6px }

/* --------------------------------------------------------------- non vale */
.nonvale { border-left: 3px solid var(--terra); padding: 8px 0 8px 12px; margin: 0 0 12px }
.nonvale .what { font-weight: 650 }
.nonvale .why { color: var(--ink2); font-size: 14px; margin-top: 2px }
.nonvale .instead { color: var(--green); font-size: 14px; margin-top: 4px; font-weight: 600 }

/* ------------------------------------------------------------------- ORA */
.now-head { background: var(--raised); border: 1px solid var(--rule); border-radius: var(--r);
            padding: 13px; margin-bottom: 12px }
.now-day { font: 600 11px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--cobalt) }
.now-leg { font: 400 23px/1.2 var(--serif); margin: 5px 0 2px }
.now-facts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 9px;
             font-size: 13px; color: var(--ink2) }
.now-facts b { color: var(--ink); font-variant-numeric: tabular-nums }

.cond { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px }
.cond button {
  appearance: none; border: 1px solid var(--rule); background: var(--ground);
  border-radius: 2px; padding: 7px 9px; min-height: 36px;
  font: 600 12px var(--ui); color: var(--ink2); cursor: pointer;
}
.cond button[aria-pressed="true"] { background: var(--cobalt); border-color: var(--cobalt); color: #fff }

.daycard { border: 1px solid var(--cobalt); border-radius: var(--r); padding: 13px; margin-bottom: 12px;
           background: color-mix(in srgb, var(--cobalt) 5%, var(--raised)) }
.daycard .t { font: 400 19px/1.25 var(--serif); margin-bottom: 5px }

/* ------------------------------------------------------------- expenses */
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px }
.keypad button {
  appearance: none; border: 1px solid var(--rule); background: var(--raised);
  border-radius: var(--r); min-height: 58px; font: 500 23px var(--ui);
  color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums;
}
.keypad button:active { background: var(--sunk) }
.amount { font: 500 42px/1 var(--ui); font-variant-numeric: tabular-nums;
          text-align: right; padding: 14px 4px; color: var(--cobalt) }
.budget-bar { height: 8px; background: var(--sunk); border-radius: 2px; overflow: hidden; margin: 8px 0 }
.budget-bar i { display: block; height: 100%; background: var(--green) }
.budget-bar i.over { background: var(--terra) }

/* ----------------------------------------------------------------- NOI */
.feed-item { border-bottom: 1px solid var(--rule); padding: 10px 0; display: flex; gap: 10px }
.ink { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: 0 0 8px }
.ink.s { background: var(--cobalt) }     /* Sanchi — the lead pigment */
.ink.a { background: var(--manganese) }
.feed-item .when { color: var(--ink3); font-size: 12px; font-variant-numeric: tabular-nums }

.pill { display: inline-block; font: 600 11px var(--ui); padding: 4px 8px; border-radius: 2px;
        background: var(--sunk); color: var(--ink2) }
.pill.pending { background: color-mix(in srgb, var(--yellow) 25%, transparent); color: var(--yellow-tx) }

/* --------------------------------------------------------------- controls */
.filter {
  width: 100%; min-height: var(--tap); padding: 10px 12px; font: 400 16px var(--ui);
  background: var(--raised); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r); margin-bottom: 12px;
}
details.shelf { border-bottom: 1px solid var(--rule); padding: 2px 0 }
details.shelf > summary {
  list-style: none; cursor: pointer; min-height: var(--tap);
  display: flex; align-items: center; justify-content: space-between;
  font: 600 12px var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink2);
}
details.shelf > summary::-webkit-details-marker { display: none }
details.shelf > summary::after { content: "+"; font-size: 17px; color: var(--ink3) }
details.shelf[open] > summary::after { content: "–" }

.btn {
  appearance: none; min-height: var(--tap); padding: 11px 15px; cursor: pointer;
  background: var(--cobalt); color: #fff; border: 0; border-radius: var(--r);
  font: 600 15px var(--ui);
}
.btn.ghost { background: transparent; color: var(--cobalt); border: 1px solid var(--cobalt) }
.smallnote { font-size: 13px; color: var(--ink3) }
a { color: var(--cobalt) }

/* the mask. drawn, not imaged — an apotropaic face is the icon, the empty state
   and the decay badge, so the ornament and the honesty rule are one object. */
.mask { width: 34px; height: 34px; display: block }
.empty { text-align: center; color: var(--ink3); padding: 34px 12px }
.empty .mask { margin: 0 auto 10px; opacity: .45 }

/* ======================================================================== *
   IL LIBRO — the book layer.
   Everything above built entries as CARDS: a border, a fill, a coloured band
   across the top, pill chips in four colours. Stacked four deep that reads as a
   UI kit, and Andrea's word for it was "a kid app". He was right.
   A book does none of it. It sets an entry on the page — a fine rule, a title,
   the text, air — and lets type carry the hierarchy. This layer takes the
   furniture back out. It is last in the file so it wins the cascade.
 * ======================================================================== */

.row {
  display: block; width: 100%; text-align: left;
  background: none !important; border: 0; border-top: 1px solid var(--rule);
  border-radius: 0; padding: 22px 0 24px; margin: 0; overflow: visible;
  color: inherit; font: inherit; cursor: pointer; position: relative;
}
.row::before, .row::after { content: none !important }
.row:first-of-type { border-top: 0 }
.row > *:not(.drawing) { padding-left: 0; padding-right: 0 }

/* rank, marked the way a book marks it: a painted fleuron in the margin */
.row .nm { padding-top: 0; display: flex; gap: 10px; align-items: baseline }
.row[data-rank="pick"] .nm::before {
  content: ""; flex: 0 0 12px; width: 12px; height: 12px; align-self: flex-start;
  margin-top: 5px;
  background: no-repeat center/contain url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<g fill='%2317427F'><ellipse cx='12' cy='5.6' rx='2.5' ry='4.3'/>\
<ellipse cx='12' cy='5.6' rx='2.5' ry='4.3' transform='rotate(72 12 12)'/>\
<ellipse cx='12' cy='5.6' rx='2.5' ry='4.3' transform='rotate(144 12 12)'/>\
<ellipse cx='12' cy='5.6' rx='2.5' ry='4.3' transform='rotate(216 12 12)'/>\
<ellipse cx='12' cy='5.6' rx='2.5' ry='4.3' transform='rotate(288 12 12)'/></g>\
<circle cx='12' cy='12' r='2.3' fill='%23DE8B24'/></svg>");
}
.row[data-rank="skip"] .nm { color: var(--ink2) }
.row .meta { padding-bottom: 0; margin-top: 10px; display: block; line-height: 1.7 }

/* chips become marginalia: no fill, no border, no pill. Middot between them. */
.chip {
  display: inline; font: 400 var(--t-small)/1.7 var(--ui); letter-spacing: 0;
  background: none !important; border: 0 !important; padding: 0; border-radius: 0;
  color: var(--ink3); white-space: normal;
}
.chip + .chip::before { content: " · "; color: var(--rule) }
.chip.cobalt { color: var(--cobalt) }
.chip.restores { color: var(--green) }
.chip.effort-climb, .chip.effort-uphill { color: var(--yellow-tx) }
.chip.stale { color: var(--terra) }
.chip.unknown { font-style: italic }

/* photographs sit on the page, not inside a frame inside a card */
.shot { background: none; margin: 0 0 16px }
.shot img { border-bottom: 0; border-radius: 0 }
.shot figcaption { background: none; border-bottom: 0; padding: 8px 0 0 }

/* THE DRAWING, demoted. It was a filled silhouette in the corner of every pick —
   which is exactly how you manufacture clipart. Now: none on entries, and ONE per
   chapter, large and very faint behind the opening, where it reads as an engraved
   frontispiece ornament rather than an icon. */
.row .drawing { display: none }
.chapterdraw {
  position: absolute; right: -18px; top: -24px;
  width: 200px; height: 200px; pointer-events: none;
  opacity: .05; z-index: 0; background: no-repeat center/contain;
}
:root[data-theme="dark"] .chapterdraw { opacity: .09; filter: brightness(2.4) }
.chapterhead, main > .eyebrow, main > h1 { position: relative; z-index: 1 }

/* the trucco stops being a bordered box and becomes an indented passage */
.trucco {
  background: none; border: 0; border-left: 2px solid var(--cobalt);
  border-radius: 0; padding: 4px 0 4px 18px; margin: 20px 0 24px;
}
.trucco::before { content: none }
.trucco .do { padding-left: 0; font-family: var(--serif); font-size: var(--t-read);
              font-weight: 400; line-height: 1.5 }
.trucco .why { padding-left: 0; font-size: 15px; line-height: 1.6; margin-top: 8px }

/* sections: the rule does the work, not a background */
.head { margin: 46px 0 8px }
.head h2 { letter-spacing: .18em }

/* and give the page a margin worth the name */
main { padding: 20px 22px 56px }

/* the appetite chooser — the way into a chapter. Set as a list of choices in the
   serif, not a row of tabs: the question is "what are we hungry for", and a tab bar
   is the wrong voice for a question. */
.appetites { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0 0 6px;
             border-bottom: 1px solid var(--rule); padding-bottom: 12px }
.appetites button {
  appearance: none; background: none; border: 0; padding: 6px 0; cursor: pointer;
  min-height: var(--tap); color: var(--ink3);
  font: 400 var(--t-read)/1.2 var(--serif); display: flex; align-items: baseline; gap: 5px;
}
.appetites button b { font-weight: 400 }
.appetites button i { font: 400 var(--t-small) var(--ui); font-style: normal; opacity: .65 }
.appetites button[aria-pressed="true"] { color: var(--cobalt) }
.appetites button[aria-pressed="true"] b { font-weight: 600 }
.gloss { font: italic 400 var(--t-body)/1.6 var(--serif); color: var(--ink2);
         margin: 14px 0 20px; max-width: 34em }

/* il conto — the number first, big, and always as a range */
.conto-head { padding: 8px 0 18px; border-bottom: 1px solid var(--rule) }
.conto-head .big { font: 600 var(--t-display)/1 var(--serif); color: var(--cobalt);
                   letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.conto-head .sub { margin-top: 6px }
.conto-head .rate { font: 400 var(--t-body) var(--ui); color: var(--ink3); margin-top: 4px;
                    font-variant-numeric: tabular-nums }
.conto-line { display: flex; gap: 16px; align-items: baseline; justify-content: space-between;
              padding: 13px 0; border-top: 1px solid var(--rule) }
.conto-line:first-of-type { border-top: 0 }
.conto-line .w { font-weight: 600; font-size: var(--t-body); color: var(--ink) }
.conto-line .d { font: 400 var(--t-small)/1.55 var(--ui); color: var(--ink2); margin-top: 3px;
                 max-width: 44ch }
.conto-line .n { font: 400 var(--t-body) var(--ui); color: var(--ink2); white-space: nowrap;
                 font-variant-numeric: tabular-nums }

/* ======================================================================== *
   OGNI LEGA LA SUA MANO — each leg its own hand.
   One border across the whole book is a template pretending to be a book. A
   well-made book gives each chapter its own head-piece. These are not three
   arbitrary patterns: the motif says where you are.
     leg1  the acanthus scroll — the Squillace plate border, the base register
     leg2  the GREEK MEANDER — the Greeks landed at Locri and the town is named
           for them; the key is the oldest ornament on that shore
     leg3  the WAVE SCALE — the Strait, two seas trading places, water on water
   The accent shifts with it: Seminara's yellow-orange on the Tyrrhenian, copper
   green through the olive plain, azure at the water.
 * ======================================================================== */

[data-leg] { --accent: var(--yellow) }
[data-leg="leg2"] { --accent: var(--green) }
[data-leg="leg3"] { --accent: var(--azure) }

/* leg 2 — the meander */
[data-leg="leg2"] .tile {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'>\
<rect width='32' height='16' fill='%23F5F6F4'/>\
<path d='M0 2.4H32M0 13.6H32' stroke='%2317427F' stroke-width='0.9'/>\
<path d='M2 12V5h9v6h-4V7.5' fill='none' stroke='%2317427F' stroke-width='1.7' \
stroke-linecap='square'/>\
<path d='M18 4v7h9V5h-4v3.5' fill='none' stroke='%233F7D4A' stroke-width='1.7' \
stroke-linecap='square'/></svg>");
}
/* leg 3 — the wave scale */
[data-leg="leg3"] .tile {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='36' height='16' viewBox='0 0 36 16'>\
<rect width='36' height='16' fill='%23F5F6F4'/>\
<path d='M0 2.4H36M0 13.6H36' stroke='%2317427F' stroke-width='0.9'/>\
<path d='M-3 11a9 9 0 0 1 18 0a9 9 0 0 1 18 0' fill='none' stroke='%2317427F' stroke-width='1.4'/>\
<path d='M-3 7.5a9 9 0 0 1 18 0a9 9 0 0 1 18 0' fill='none' stroke='%234E86B8' stroke-width='1.2'/>\
<circle cx='6' cy='11' r='1.3' fill='%23DE8B24'/><circle cx='24' cy='11' r='1.3' fill='%23DE8B24'/>\
</svg>");
}

/* ---- THE CHAPTER OPENING.
   Was a back button, a heading and a rule — a page header. A chapter opening in a
   book is a whole gesture: air above it, the number, the name set large, and the
   head-piece under it. It should be obvious you have arrived somewhere. */
.opening { padding: 8px 0 6px; position: relative }
.opening .num {
  font: 400 var(--t-small)/1 var(--ui); letter-spacing: .3em; text-transform: uppercase;
  color: var(--accent, var(--ink3)); margin-bottom: 26px;
}
.opening h1 {
  font: 600 var(--t-display)/.98 var(--serif); letter-spacing: -.025em;
  margin: 0 0 8px; color: var(--ink);
}
.opening .where { font: italic 400 var(--t-read)/1.4 var(--serif); color: var(--ink2); margin: 0 0 4px }
.opening .when {
  font: 400 var(--t-small) var(--ui); letter-spacing: .04em; color: var(--ink3);
  margin-top: 10px; font-variant-numeric: tabular-nums;
}
.opening .tile { margin-top: 24px }
.opening .shot { margin: 20px 0 0 }
.opening .shot img { aspect-ratio: 21 / 9 }

/* the back link stops being a button and becomes what it is: a small way out */
.backlink {
  appearance: none; background: none; border: 0; padding: 10px 0; cursor: pointer;
  font: 400 var(--t-small) var(--ui); color: var(--ink3); letter-spacing: .04em;
  min-height: var(--tap);
}

/* the apparatus — the useful half, one tap down. Set as a passage, not a data table:
   it is still writing, it just stops being about how a place feels and starts being
   about how to judge it. */
.apparatus { margin: 26px 0 4px }
.apparatus h3 { font: 600 var(--t-label)/1.3 var(--ui); letter-spacing: .16em;
                text-transform: uppercase; color: var(--cobalt); margin: 0 0 10px }
.apparatus h3 em { font: italic 400 var(--t-small) var(--serif); letter-spacing: 0;
                   text-transform: none; color: var(--ink3) }
.apparatus p { font: 400 var(--t-body)/1.62 var(--ui); color: var(--ink2); margin: 0 0 10px;
               max-width: 46ch }
.apparatus p.pt { padding-left: 16px; position: relative }
.apparatus p.pt::before { content: "—"; position: absolute; left: 0; color: var(--accent, var(--cobalt)) }
.apparatus p.who { font: italic 400 var(--t-small)/1.55 var(--serif); color: var(--ink3);
                   border-top: 1px solid var(--rule); padding-top: 9px; margin-top: 14px }
.apparatus .call { display: inline-block; min-height: var(--tap); line-height: var(--tap);
                   font: 400 var(--t-row) var(--ui); color: var(--cobalt) }