/* ===========================================================================
   Due Mari — the visual system, consolidated.
   Direction (24 Jul, from the Mistral reference Andrea pointed at): type-led
   hierarchy at real scale, whitespace instead of hairlines, SOLID COLOUR BANDS
   as the structural device, big-radius image tiles, one playful signature.
   Translated into this app's own world: the band is a glazed plate edge — a
   darkened leg-accent ground with the leg's painted border running through it —
   Instrument Sans carries the structure, EB Garamond keeps the book's voice,
   and the maiolica drawings step forward from ghosts to illustrations.
   One layer. No patches on patches.
   =========================================================================== */

:root {
  /* the tin glaze, cooled */
  --ground: #F5F6F3;
  --raised: #FCFCFA;
  --sunk:   #ECEEE9;
  --panel:  #F9FAF7;

  /* Squillace cobalt + the Seminara accents */
  --cobalt:    #17427F;
  --cobalt-lo: #2E6099;
  --azure:     #4E86B8;
  --green:     #3F7D4A;
  --yellow:    #DE8B24;
  --yellow-tx: #8A5410;
  --manganese: #5A3A46;
  --terra:     #B0533A;

  --ink:   #1C2126;
  --ink2:  #565D66;
  --ink3:  #878E97;
  --rule:  #E2E5DF;

  /* type roles: display carries structure, serif carries the voice */
  --display: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  /* a scale that jumps */
  --t-hero:  clamp(40px, 11vw, 64px);
  --t-title: 30px;
  --t-read:  19px;
  --t-row:   16.5px;
  --t-body:  15px;
  --t-small: 13px;
  --t-label: 11px;

  --air:   24px;
  --air-s: 56px;

  --tap: 44px;
  --r:   10px;
  --r-lg: 14px;
  --pad: 20px;

  --accent: var(--cobalt);
  --accent-tx: var(--cobalt);
}

/* each leg, its hand — bands, labels, pills all follow */
[data-leg="leg1"]   { --accent: #DE8B24; --accent-tx: #8A5410 }
[data-leg="leg2"]   { --accent: #3F7D4A; --accent-tx: #2F5E38 }
[data-leg="leg3"]   { --accent: #4E86B8; --accent-tx: #2F5E86 }
[data-leg="drive-a"]{ --accent: #3F7D4A; --accent-tx: #2F5E38 }
[data-leg="drive-b"]{ --accent: #4E86B8; --accent-tx: #2F5E86 }

/* ---------------------------------------------------------------- night */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --ground: #0F141A; --raised: #161C23; --sunk: #0A0E13; --panel: #141A21;
    --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: #232B34;
  }
}
:root[data-theme="dark"] {
  --ground: #0F141A; --raised: #161C23; --sunk: #0A0E13; --panel: #141A21;
  --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: #232B34;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light }
/* the band grounds are already darkened accents; they hold in both themes */

/* ----------------------------------------------------------------- fonts */
@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") }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("font/instrument-med.woff2") format("woff2") }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("font/instrument-semi.woff2") format("woff2") }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("font/instrument-bold.woff2") format("woff2") }

/* ------------------------------------------------------------------ base */
* { 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; line-height: 1.5; font-weight: 500;
  overscroll-behavior-y: none; -webkit-text-size-adjust: 100%;
}
a { color: var(--cobalt) }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; border-radius: 4px }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important }
}

#app { padding-bottom: calc(var(--tap) + 30px + env(safe-area-inset-bottom)) }
main { padding: 0 var(--pad) 48px; max-width: 720px; margin: 0 auto }

/* ================================================================ assets */

/* the painted borders — full strength, used as band edges and dividers */
.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: 8px; background-size: auto 8px }
[data-leg="leg2"] .tile, [data-leg="drive-a"] .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='%233F7D4A' stroke-width='0.9'/>\
<path d='M2 12V5h9v6h-4V7.5' fill='none' stroke='%233F7D4A' stroke-width='1.7' stroke-linecap='square'/>\
<path d='M18 4v7h9V5h-4v3.5' fill='none' stroke='%2317427F' stroke-width='1.7' stroke-linecap='square'/></svg>");
}
[data-leg="leg3"] .tile, [data-leg="drive-b"] .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='%234E86B8' stroke-width='0.9'/>\
<path d='M-3 11a9 9 0 0 1 18 0a9 9 0 0 1 18 0' fill='none' stroke='%234E86B8' stroke-width='1.5'/>\
<path d='M-3 7.5a9 9 0 0 1 18 0a9 9 0 0 1 18 0' fill='none' stroke='%2317427F' stroke-width='1.1'/>\
<circle cx='6' cy='11' r='1.3' fill='%23DE8B24'/><circle cx='24' cy='11' r='1.3' fill='%23DE8B24'/></svg>");
}

/* the small drawings — the subject's world, promoted from ghosts to spots */
.drawing { display: block; background: no-repeat center/contain; pointer-events: none }
.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>") }
.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>") }
.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>") }
.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>") }
.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>") }
.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>") }
.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>") }
.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>") }

.mask { width: 40px; height: 40px; display: block }

/* ================================================================ THE BAND
   The structural device, and the signature. A full-bleed darkened-accent
   ground: giant white display type, the leg's painted border running through
   it, the hero image ending it. Every surface opens with one, in its colour. */
.opening, .ora-lead, .now-head {
  background: var(--accent-tx);
  color: #fff;
  margin: 0 calc(-1 * var(--pad)) var(--air);
  padding: 26px var(--pad) 0;
  position: relative; overflow: hidden;
}
.now-head { padding-bottom: 18px }
.ora-lead { padding-bottom: 4px }
.opening .num, .ora-lead .now-day, .now-head .now-day {
  font: 600 var(--t-label)/1 var(--display); letter-spacing: .28em; text-transform: uppercase;
  color: rgba(255,255,255,.75); margin: 0 0 14px;
}
.opening h1, .ora-lead h1, .now-head .now-leg {
  font: 700 var(--t-hero)/.98 var(--display); letter-spacing: -.03em;
  color: #fff; margin: 0 0 10px;
}
.opening .where { font: italic 400 var(--t-read)/1.4 var(--serif); color: rgba(255,255,255,.9); margin: 0 }
.opening .when {
  font: 500 var(--t-small)/1.4 var(--display); color: rgba(255,255,255,.72);
  margin-top: 10px; font-variant-numeric: tabular-nums;
}
.ora-lead .sub, .now-head .sub { color: rgba(255,255,255,.82); font-size: var(--t-body); margin-top: 2px }
.opening .tile, .ora-lead .tile { margin: 22px calc(-1 * var(--pad)) 0; height: 16px }
.opening .shot { margin: 0 calc(-1 * var(--pad)); border-radius: 0 }
.opening .shot img { aspect-ratio: 21 / 10; border: 0; border-radius: 0 }
.opening .shot figcaption { background: none; border: 0; padding: 6px var(--pad) 14px; color: rgba(255,255,255,.65) }
.opening .shot .cred { color: rgba(255,255,255,.5) }
.now-head .now-facts { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 12px;
  font: 500 var(--t-small) var(--display); color: rgba(255,255,255,.75) }
.now-head .now-facts b { color: #fff; font-variant-numeric: tabular-nums; font-weight: 700 }
.now-head .cond { margin-top: 14px }
.now-head .cond button {
  background: transparent; border: 1.5px solid rgba(255,255,255,.45); color: #fff;
}
.now-head .cond button[aria-pressed="true"] { background: #fff; color: var(--accent-tx); border-color: #fff }
.now-head .smallnote { color: rgba(255,255,255,.65) }
.chapterdraw {
  position: absolute; right: -16px; top: 8px; width: 165px; height: 165px;
  opacity: .16; filter: brightness(6) saturate(0); z-index: 0;
}
.opening > *:not(.chapterdraw) { position: relative; z-index: 1 }
.chapterhead { display: none }

/* ============================================================== structure */
h1 { font: 700 var(--t-title)/1.1 var(--display); letter-spacing: -.02em; margin: 8px 0; color: var(--ink) }
h2 { font: 600 var(--t-label)/1.3 var(--display); letter-spacing: .18em; text-transform: uppercase;
     color: var(--accent-tx); margin: 0 }
h3 { font: 600 var(--t-row)/1.3 var(--display); margin: 20px 0 8px; color: var(--ink) }
.eyebrow { font: 600 var(--t-label)/1 var(--display); letter-spacing: .2em; text-transform: uppercase;
           color: var(--ink3); margin: 20px 0 8px }
.sub { color: var(--ink2); font-size: var(--t-body); margin: 0 0 4px }
.smallnote { font-size: var(--t-small); color: var(--ink3) }
.gloss { font: italic 400 var(--t-body)/1.6 var(--serif); color: var(--ink2); margin: 10px 0 16px; max-width: 36em }

.head { margin: var(--air-s) 0 14px }
.head .tile { display: none }
.grouphead { display: flex; align-items: baseline; gap: 8px; margin: 34px 0 4px }
.grouphead b { font: 600 var(--t-label)/1 var(--display); letter-spacing: .18em; text-transform: uppercase;
               color: var(--accent-tx) }
.grouphead span { font: 500 var(--t-small) var(--display); color: var(--ink3) }

/* ============================================================ book voice */
.overture { margin: var(--air) 0 }
.overture .tile { display: none }
.overture .body {
  font: 400 var(--t-read)/1.7 var(--serif); color: var(--ink);
  max-width: 34em; padding: 0;
}
.overture .body p { margin: 0 0 .9em }
.overture .body p:first-child::first-letter {
  float: left; font-size: 3em; line-height: .84; padding: 4px 8px 0 0;
  color: var(--accent-tx); font-weight: 600;
}

.racconto { margin: 10px 0 6px }
.racconto-open {
  display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px;
  appearance: none; border: 0; cursor: pointer; text-align: left;
  background: var(--accent-tx); color: #fff; border-radius: var(--r);
  padding: 15px 18px; min-height: var(--tap);
  font: 600 15px/1.35 var(--display);
}
.racconto-open::after { content: "→"; flex: 0 0 auto }
.racconto-open[aria-expanded="true"]::after { content: "↑" }
.racconto-body { font: 400 17.5px/1.68 var(--serif); color: var(--ink); max-width: 34em; margin: 18px 0 8px }
.racconto-body p { margin: 0 0 1em }
.racconto-body p:first-child::first-letter {
  float: left; font-size: 3em; line-height: .84; padding: 4px 8px 0 0;
  color: var(--accent-tx); font-weight: 600;
}
.thread {
  color: var(--ink); text-decoration: none;
  background: linear-gradient(var(--accent-tx), var(--accent-tx)) no-repeat 0 1.12em / 100% 1.5px;
  padding-bottom: 1px;
}
.thread:active { color: var(--accent-tx) }

.story { font: 400 16px/1.62 var(--serif); color: var(--ink) }
.story p { margin: 0 0 10px; max-width: none }
.tipline {
  font: italic 400 15px/1.55 var(--serif); color: var(--ink2);
  border-left: 2.5px solid var(--accent-tx); padding: 2px 0 2px 12px; margin: 14px 0;
}
.trucco { background: var(--panel); border-radius: var(--r-lg); padding: 16px 18px; margin: 14px 0 }
.trucco .do { font: 400 17px/1.5 var(--serif); color: var(--ink) }
.trucco .why { font: 400 14.5px/1.6 var(--ui); color: var(--ink2); margin-top: 8px }
.trucco dl { margin: 8px 0 0; font-size: 13px; color: var(--ink2) }
.trucco dt { font: 600 var(--t-label) var(--display); letter-spacing: .1em; text-transform: uppercase;
             color: var(--ink3); margin-top: 8px }

.apparatus { margin: 20px 0 4px }
.apparatus h3 { font: 600 var(--t-label)/1.3 var(--display); letter-spacing: .16em; text-transform: uppercase;
                color: var(--accent-tx); margin: 0 0 8px }
.apparatus h3 em { font: italic 400 var(--t-small) var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink3) }
.apparatus p { max-width: none; font-size: 14.5px; line-height: 1.6; color: var(--ink2); margin: 0 0 9px }
.apparatus p.pt { padding-left: 15px; position: relative }
.apparatus p.pt::before { content: "—"; position: absolute; left: 0; color: var(--accent-tx) }
.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: 12px }
.apparatus .call { display: inline-block; min-height: var(--tap); line-height: var(--tap);
                   font: 600 var(--t-row) var(--display); color: var(--cobalt) }

.nonvale { border-left: 2.5px solid var(--terra); padding: 4px 0 4px 12px; margin: 14px 0 }
.nonvale dt, .nonvale .what { font: 600 var(--t-label) var(--display); letter-spacing: .1em;
  text-transform: uppercase; color: var(--terra); margin-top: 8px }
.nonvale dd, .nonvale .why { margin: 2px 0 0; font-size: 14px; color: var(--ink2) }
.nonvale .instead { color: var(--green); font-size: 14px; margin-top: 4px; font-weight: 600 }

/* ================================================================== rows */
.row {
  display: block; width: 100%; text-align: left; position: relative;
  background: none; border: 0; padding: 16px 0; margin: 0;
  color: inherit; font: inherit; cursor: pointer;
}
.row + .row { border-top: 1px solid var(--rule) }
.row .nm { font: 600 var(--t-row)/1.3 var(--display); color: var(--ink);
           display: flex; gap: 9px; align-items: baseline }
.row .one {
  font: 400 var(--t-body)/1.5 var(--ui); color: var(--ink2); margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.row .meta { margin-top: 7px; line-height: 1.6 }
.row[data-rank="pick"] .nm::before, .card[data-rank="pick"] .nm::before {
  content: ""; flex: 0 0 11px; width: 11px; height: 11px; 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[data-done="true"] .nm { text-decoration: line-through; text-decoration-color: var(--green);
  text-decoration-thickness: 2px; color: var(--ink2) }
.row.lit, .card.lit { animation: lit 1.6s ease-out }
@keyframes lit {
  0%, 30% { background: color-mix(in srgb, var(--accent, var(--cobalt)) 12%, transparent) }
  100% { background: none }
}

/* ================================================================= chips */
.chip {
  display: inline; font: 600 10.5px/1.7 var(--display); letter-spacing: .12em; text-transform: uppercase;
  background: none; border: 0; padding: 0; color: var(--ink3); white-space: normal;
}
.chip + .chip::before { content: " · "; color: var(--rule); letter-spacing: 0 }
.chip.cobalt { color: var(--accent-tx) }
.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; text-transform: none; letter-spacing: .02em }
.nownote { font: 600 var(--t-label)/1.5 var(--display); letter-spacing: .08em; text-transform: uppercase;
           color: var(--terra); padding: 0 0 4px }

/* ================================================================= rails */
.rail {
  display: flex; gap: 14px; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  margin: 10px calc(-1 * var(--pad)) 0; padding: 4px var(--pad) 14px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none }
.card {
  flex: 0 0 74%; max-width: 320px; scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--raised); border: 1px solid var(--rule); border-radius: var(--r-lg);
  overflow: hidden; cursor: pointer; position: relative;
}
.card[aria-pressed="true"] { border-color: var(--accent-tx); box-shadow: 0 0 0 1.5px var(--accent-tx) }
.card .shot { margin: 0; background: var(--sunk) }
.card .shot img { aspect-ratio: 16 / 10; display: block; width: 100%; object-fit: cover; border: 0; border-radius: 0 }
.card .shot figcaption { padding: 3px 12px 4px; font-size: 9.5px; border: 0; background: none; color: var(--ink3) }
.card .shot .cap { display: none }
.card .shot .cred { margin-left: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block }
.card-blank { aspect-ratio: 16 / 10; background: var(--sunk); position: relative }
.card-blank .drawing { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; opacity: .22 }
.card .pad { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 5px; flex: 1 }
.card .nm { font: 600 16px/1.25 var(--display); color: var(--ink); display: flex; gap: 8px; align-items: baseline }
.card .one {
  font: 400 14px/1.5 var(--ui); color: var(--ink2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card .meta { margin-top: auto; padding-top: 7px; line-height: 1.6 }
.card .nownote { padding: 0 }
.inspect:not(:empty) { margin: 4px 0 20px }
.inspect .detail, .row .detail { background: var(--panel); border-radius: var(--r-lg); padding: 16px 16px 18px; margin-top: 10px }
.detail .shot { margin: -16px -16px 14px }
.detail .shot img { border-radius: var(--r-lg) var(--r-lg) 0 0; border: 0 }
.detail .shot figcaption { background: none; border: 0; padding: 6px 4px 0 }

/* photographs elsewhere */
.shot { margin: 0 0 16px }
.shot img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
            border-radius: var(--r-lg) }
.shot figcaption { padding: 7px 2px 0; font: 400 12px/1.45 var(--ui); color: var(--ink2);
  display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline }
.shot .cred { font-size: 10.5px; color: var(--ink3); margin-left: auto; white-space: nowrap }

/* =============================================================== controls */
.btn {
  appearance: none; cursor: pointer; min-height: var(--tap); padding: 12px 20px;
  background: var(--cobalt); color: #fff; border: 0; border-radius: 999px;
  font: 600 15px var(--display);
}
.btn.ghost { background: transparent; color: var(--accent-tx); border: 1.5px solid var(--accent-tx) }
.backlink {
  appearance: none; background: none; border: 0; padding: 12px 0; cursor: pointer;
  font: 600 var(--t-small) var(--display); letter-spacing: .04em; color: var(--ink3);
  min-height: var(--tap);
}
.opening ~ * .backlink, main > .backlink:first-child { color: var(--ink3) }
.seeall {
  appearance: none; background: none; border: 0; cursor: pointer;
  min-height: var(--tap); padding: 6px 0 10px; width: 100%; text-align: left;
  font: 600 var(--t-small) var(--display); color: var(--accent-tx);
}
.filter {
  width: 100%; min-height: var(--tap); padding: 12px 16px; font: 500 16px var(--ui);
  background: var(--raised); color: var(--ink);
  border: 1.5px solid var(--rule); border-radius: 999px; margin: 4px 0 14px;
}
.cond { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px }
.cond button {
  appearance: none; border: 1.5px solid var(--rule); background: var(--raised);
  border-radius: 999px; padding: 8px 13px; min-height: 38px;
  font: 600 13px var(--display); color: var(--ink2); cursor: pointer;
}
.cond button[aria-pressed="true"] { background: var(--accent-tx); border-color: var(--accent-tx); color: #fff }
.legswitch { display: flex; gap: 8px; margin: 0; flex-wrap: wrap; position: relative; z-index: 1;
             padding: 2px 0 20px }
.legswitch button {
  appearance: none; cursor: pointer; min-height: 40px; padding: 9px 16px;
  border: 1.5px solid rgba(255,255,255,.4); border-radius: 999px; background: transparent;
  font: 600 14px var(--display); color: #fff;
}
.legswitch button[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--accent-tx) }
.filters { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin: 6px 0 16px }
.flab { font: italic 400 var(--t-small) var(--serif); color: var(--ink3); margin-right: 2px }
.fpill {
  appearance: none; cursor: pointer; min-height: 38px; padding: 8px 14px;
  border: 1.5px solid var(--rule); border-radius: 999px; background: var(--raised);
  font: 600 13px var(--display); color: var(--ink2);
}
.fpill[aria-pressed="true"] { background: var(--accent-tx); border-color: var(--accent-tx); color: #fff }

/* the questions — the app's front door, a confident tile grid */
.chiedi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 16px }
.chiedi .q {
  appearance: none; text-align: left; cursor: pointer;
  background: var(--raised); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: 14px; min-height: 78px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 3px; justify-content: flex-end;
}
.chiedi .q b { font: 600 15.5px/1.2 var(--display); color: var(--ink); position: relative; z-index: 1 }
.chiedi .q i { font: italic 400 var(--t-small) var(--serif); color: var(--ink3); position: relative; z-index: 1 }
.chiedi .q .drawing { position: absolute; right: -6px; top: -6px; width: 58px; height: 58px; opacity: .12 }
.chiedi .q[aria-pressed="true"] { background: var(--accent-tx); border-color: var(--accent-tx) }
.chiedi .q[aria-pressed="true"] b, .chiedi .q[aria-pressed="true"] i { color: #fff }
.chiedi .q[aria-pressed="true"] .drawing { filter: brightness(6) saturate(0); opacity: .3 }
.chiedi-answer:not(:empty) { margin-top: 6px }

/* appetites — the way into a chapter */
.appetites { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0 0 4px }
.appetites button {
  appearance: none; background: none; border: 0; padding: 8px 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: 6px;
}
.appetites button b { font-weight: 400 }
.appetites button i { font: 500 var(--t-small) var(--display); font-style: normal; opacity: .7 }
.appetites button[aria-pressed="true"] { color: var(--accent-tx) }
.appetites button[aria-pressed="true"] b { font-weight: 600 }

/* collapsible reference shelves (Da sapere) */
details.shelf { border-top: 1px solid var(--rule); padding: 2px 0; margin-top: var(--air) }
details.shelf > summary {
  list-style: none; cursor: pointer; min-height: var(--tap);
  display: flex; align-items: center; justify-content: space-between;
  font: 600 var(--t-label) var(--display); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink2);
}
details.shelf > summary::-webkit-details-marker { display: none }
details.shelf > summary::after { content: "+"; font-size: 18px; color: var(--ink3) }
details.shelf[open] > summary::after { content: "–" }

/* ================================================================== ORA */
.daycard { background: var(--panel); border-radius: var(--r-lg); padding: 16px 18px; margin: var(--air) 0 }
.daycard .t { font: 400 19px/1.3 var(--serif); margin-bottom: 6px; color: var(--ink) }

/* ================================================================ money */
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px }
.keypad button {
  appearance: none; border: 1px solid var(--rule); background: var(--raised);
  border-radius: var(--r-lg); min-height: 60px; font: 500 22px var(--display);
  color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums;
}
.keypad button:active { background: var(--sunk) }
.amount { font: 700 46px/1 var(--display); font-variant-numeric: tabular-nums;
          text-align: right; padding: 16px 4px; color: var(--cobalt); letter-spacing: -.02em }
.budget-bar { height: 8px; background: var(--sunk); border-radius: 4px; overflow: hidden; margin: 8px 0 }
.budget-bar i { display: block; height: 100%; background: var(--green) }
.budget-bar i.over { background: var(--terra) }
.conto-head { padding: 8px 0 20px }
.conto-head .big { font: 700 var(--t-hero)/1 var(--display); color: var(--cobalt);
                   letter-spacing: -.03em; font-variant-numeric: tabular-nums }
.conto-head .sub { margin-top: 8px }
.conto-head .rate { font: 500 var(--t-body) var(--display); 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: 14px 0 }
.conto-line + .conto-line { border-top: 1px solid var(--rule) }
.conto-line .w { font: 600 var(--t-body) var(--display); 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: 500 var(--t-body) var(--display); color: var(--ink2); white-space: nowrap;
                 font-variant-numeric: tabular-nums }

/* =================================================================== NOI */
.feed-item { padding: 12px 0; display: flex; gap: 10px }
.feed-item + .feed-item { border-top: 1px solid var(--rule) }
.ink { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: 0 0 9px }
.ink.s { background: var(--cobalt) }
.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(--display); letter-spacing: .06em;
        padding: 5px 10px; border-radius: 999px; background: var(--sunk); color: var(--ink2) }
.pill.pending { background: color-mix(in srgb, var(--yellow) 25%, transparent); color: var(--yellow-tx) }

/* ================================================================ states */
.absent {
  background: var(--panel); border-radius: var(--r-lg);
  padding: 14px 16px; color: var(--ink2); font-size: 14.5px; line-height: 1.55;
}
.empty { text-align: center; color: var(--ink3); padding: 40px 12px }
.empty .mask { margin: 0 auto 12px; opacity: .5 }

/* ================================================================== 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: calc(var(--tap) + 6px); padding: 8px 2px 9px;
  font: 700 var(--t-label) var(--display); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink3); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
nav.bar button .g { font-size: 18px; line-height: 1 }
nav.bar button[aria-current="page"] { color: var(--accent-tx, var(--cobalt)) }

/* band edges inside composed headers */
.now-head .tile { margin: 16px calc(-1 * var(--pad)) 0 }
.ora-lead .legswitch { margin-top: 14px }