/* Notchbook site. A printed, poster-like look: paper with a fine grain, big condensed "stamp"
   headlines, italic serif labels, flat colour blocks and heavy ink rules, in Notchbook's colours
   (burnt orange, espresso, cream and sage, as in the store screenshots). Body text stays a plain
   sans at a comfortable size and measure; the grain sits under the content, never over the text. */

@font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/plus-jakarta-sans-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/plus-jakarta-sans-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/plus-jakarta-sans-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/plus-jakarta-sans-extrabold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* Display faces (SIL OFL): Bricolage Grotesque, variable in width for the condensed headlines,
   and Instrument Serif italic for the hand-set labels. Latin subsets. */
@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage-grotesque-latin.woff2") format("woff2"); font-weight: 700 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-italic-latin.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  /* Paper and ink */
  --bg: #fdf6ee;
  --bg-alt: #f8ecdf;
  --card: #fffaf5;
  --card-2: #f4e6d8;
  --line: #e2d2c4;
  --rule: #2a1a14;
  --ink: #1e1612;
  --ink-2: #4f413a;
  --ink-3: #6b5c54;
  /* Brand */
  --brand: #b04600;
  --brand-ink: #fff6ef;
  --caramel: #c24e00;
  --caramel-wash: #ffe3cf;
  --caramel-text: #9a3f00;
  --terracotta: #c24e00;
  --sage: #3e5a3e;
  --sage-wash: #dfeedb;
  /* Colour blocks (same in light and dark, so they read as printed panels) */
  --block-orange: #c24e00;
  --block-orange-ink: #fff6ef;
  --block-orange-accent: #ffd9bf;
  --block-espresso: #2a1a14;
  --block-espresso-ink: #f6ece6;
  --block-espresso-accent: #ffb68c;
  --block-sage: #3e5a3e;
  --block-sage-ink: #f2f7f0;
  --block-sage-accent: #cfe6c8;
  --block-cream: #fef3e2;
  --block-cream-ink: #1e1815;
  --block-cream-accent: #c24e00;
  --button-bg: #2a1a14;
  --button-ink: #ffc56e;
  --hero-1: #fef3e2;
  --hero-2: #fdf6ee;
  --shadow: 0 30px 60px -20px rgba(70, 30, 5, .28), 0 12px 24px -12px rgba(70, 30, 5, .18);
  --radius: 22px;
  --max: 1180px;
  --display: "Bricolage Grotesque", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --script: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Fine paper grain, drawn under the content as a background layer. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.09 0 0 0 0 0.05 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* Speckled "printed ink" mask, for the biggest headlines only. */
  --ink-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='i'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -14 11.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23i)'/%3E%3C/svg%3E");
  color-scheme: light dark;
}

/* Dark theme: follows the system unless the visitor picked a theme with the header toggle
   (stored in localStorage and applied as html[data-theme] before first paint). */
:root[data-theme="dark"] {
  --bg: #15100d;
  --bg-alt: #1b1410;
  --card: #211915;
  --card-2: #2c221c;
  --line: #3a2f28;
  --rule: #e9dcd2;
  --ink: #f3eae4;
  --ink-2: #d0c3ba;
  --ink-3: #ab9d94;
  --brand: #ffb238;
  --brand-ink: #3a2400;
  --caramel: #ffc94a;
  --caramel-wash: #3b2618;
  --caramel-text: #ffc56e;
  --terracotta: #ff9a4d;
  --sage: #b9d3b6;
  --sage-wash: #24331f;
  --block-cream: #241a14;
  --block-cream-ink: #f3eae4;
  --block-cream-accent: #ffb68c;
  --button-bg: #ffb238;
  --button-ink: #2a1a14;
  --hero-1: #1d1511;
  --hero-2: #15100d;
  --shadow: 0 30px 70px -20px rgba(0, 0, 0, .7), 0 12px 24px -12px rgba(0, 0, 0, .5);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.92 0 0 0 0 0.85 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15100d;
    --bg-alt: #1b1410;
    --card: #211915;
    --card-2: #2c221c;
    --line: #3a2f28;
    --rule: #e9dcd2;
    --ink: #f3eae4;
    --ink-2: #d0c3ba;
    --ink-3: #ab9d94;
    --brand: #ffb238;
    --brand-ink: #3a2400;
    --caramel: #ffc94a;
    --caramel-wash: #3b2618;
    --caramel-text: #ffc56e;
    --terracotta: #ff9a4d;
    --sage: #b9d3b6;
    --sage-wash: #24331f;
    --block-cream: #241a14;
    --block-cream-ink: #f3eae4;
    --block-cream-accent: #ffb68c;
    --button-bg: #ffb238;
    --button-ink: #2a1a14;
    --hero-1: #1d1511;
    --hero-2: #15100d;
    --shadow: 0 30px 70px -20px rgba(0, 0, 0, .7), 0 12px 24px -12px rgba(0, 0, 0, .5);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.92 0 0 0 0 0.85 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  }
}

/* ---------------------------------------------------------------- Notchbook web app
   Tokens and fonts above are copied from the site's styles.css (keep them in step).
   Layout: a side rail on wide screens, a bottom tab bar on phones; cards on paper. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: var(--grain), var(--bg);
  color: var(--ink);
  font: 400 16px/1.5 "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--caramel-text); }
.boot { display: grid; place-items: center; align-content: center; gap: 8px; min-height: 100vh; font-family: var(--script); font-style: italic; font-size: 26px; color: var(--ink); }
.boot-dots span { animation: nbg-dot 1.44s infinite; }
.boot-dots span:nth-child(2) { animation-delay: .18s; }
.boot-dots span:nth-child(3) { animation-delay: .36s; }
@keyframes nbg-dot { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* <nb-grinder> (grinder-loader.js): the hopping hand grinder, poster style, from the theme tokens. */
nb-grinder { display: inline-block; line-height: 0; flex: none;
  --nbg-espresso: var(--block-espresso); --nbg-lid: #fffaf2; --nbg-walnut: #6b3a1f; --nbg-shadow: rgba(42, 26, 20, .22); }
:root[data-theme="dark"] nb-grinder { --nbg-espresso: #5b3d2c; --nbg-lid: #2e231c; --nbg-walnut: #8a4b26; --nbg-shadow: rgba(0, 0, 0, .5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) nb-grinder { --nbg-espresso: #5b3d2c; --nbg-lid: #2e231c; --nbg-walnut: #8a4b26; --nbg-shadow: rgba(0, 0, 0, .5); } }
.nbg { overflow: visible; display: block; }
.nbg-ink { stroke: var(--rule); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.nbg-orange { fill: var(--block-orange); }
.nbg-espresso { fill: var(--nbg-espresso); }
.nbg-cream { fill: var(--block-cream); }
.nbg-lid { fill: var(--nbg-lid); }
.nbg-walnut { fill: var(--nbg-walnut); }
.nbg-shine { fill: none; stroke: var(--block-espresso-accent); stroke-width: 2.2; stroke-linecap: round; opacity: .75; }
.nbg-tick { fill: none; stroke: var(--rule); stroke-width: 2.5; stroke-linecap: round; opacity: .55; }
.nbg-arm-ink { fill: none; stroke: var(--rule); stroke-width: 9; stroke-linecap: round; }
.nbg-arm { fill: none; stroke: var(--block-cream); stroke-width: 4.5; stroke-linecap: round; }
.nbg-shadow { fill: var(--nbg-shadow); transform-box: fill-box; transform-origin: center; animation: nbg-shade .9s infinite; }
.nbg-ground { fill: var(--nbg-espresso); stroke: var(--rule); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: nbg-puff .9s ease-out infinite; }
.nbg-ground.g2 { animation-name: nbg-puff-2; } .nbg-ground.g3 { animation-name: nbg-puff-3; }
.nbg-body { transform-box: view-box; transform-origin: 80px 128px; animation: nbg-hop .9s infinite; }
@keyframes nbg-hop {
  0%   { transform: translateY(0) scale(1.12, .86); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  12%  { transform: translateY(-6px) scale(.94, 1.08); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  48%  { transform: translateY(-40px) scale(1, 1); animation-timing-function: cubic-bezier(.6, 0, .9, .4); }
  88%  { transform: translateY(-4px) scale(.95, 1.07); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  100% { transform: translateY(0) scale(1.12, .86); }
}
@keyframes nbg-shade { 0%, 100% { transform: scale(1.08, 1); opacity: 1; } 48% { transform: scale(.62, .8); opacity: .55; } }
@keyframes nbg-puff   { 0% { opacity: .9; transform: translate(0, 0) scale(1); } 40% { opacity: 0; transform: translate(-16px, -10px) scale(.4); } 100% { opacity: 0; } }
@keyframes nbg-puff-2 { 0% { opacity: .9; transform: translate(0, 0) scale(1); } 40% { opacity: 0; transform: translate(16px, -12px) scale(.4); } 100% { opacity: 0; } }
@keyframes nbg-puff-3 { 0% { opacity: .9; transform: translate(0, 0) scale(1); } 40% { opacity: 0; transform: translate(4px, -18px) scale(.4); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nbg-body, .nbg-shadow, .nbg-ground, .boot-dots span { animation: none; } .nbg-ground { opacity: 0; } }

/* Icons: sized to the text around them unless a screen sets its own (the SVGs carry no size,
   so without this they collapse to nothing and only their flex gap shows). */
.icon { display: inline-grid; place-items: center; flex: none; line-height: 0; }
.icon svg { width: 1.25em; height: 1.25em; }

/* Shell */
.shell { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
.rail { display: none; }
.main { padding: 16px 16px calc(96px + env(safe-area-inset-bottom)); max-width: 820px; width: 100%; min-width: 0; margin: 0 auto; }
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.tab { display: grid; justify-items: center; gap: 2px; padding: 6px 0; border: 0; background: none; color: var(--ink-3); font-size: 12px; font-weight: 600; cursor: pointer; border-radius: 14px; }
.tab svg { width: 24px; height: 24px; }
.tab[aria-current="page"] { color: var(--ink); background: var(--caramel-wash); }
@media (min-width: 900px) {
  .shell { grid-template-columns: 236px 1fr; }
  .rail { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; padding: 22px 14px; border-right: 1px solid var(--line); }
  .rail .brand { font-family: var(--display); font-weight: 800; font-stretch: 80%; font-size: 30px; letter-spacing: -.01em; text-transform: uppercase; padding: 0 10px 14px; color: var(--ink); text-decoration: none; }
  .rail .tab { grid-template-columns: 24px 1fr; justify-items: start; align-items: center; gap: 12px; padding: 10px 12px; font-size: 15px; text-align: left; }
  .rail .spacer { flex: 1; }
  .tabbar { display: none; }
  .main { padding: 28px 32px 64px; }
}

/* Page headers */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 4px 0 18px; }
.page-title { margin: 0; font-family: var(--display); font-weight: 800; font-stretch: 78%; text-transform: uppercase; font-size: clamp(38px, 8vw, 54px); line-height: .92; letter-spacing: -.01em; }
.page-sub { margin: 4px 0 0; color: var(--ink-3); font-size: 14px; }
.section-title { margin: 26px 0 10px; font-family: var(--display); font-weight: 800; font-stretch: 80%; text-transform: uppercase; font-size: 22px; letter-spacing: .01em; display: flex; justify-content: space-between; align-items: baseline; }
.section-title small { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.overline { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.overline.caramel { color: var(--caramel-text); }
.script { font-family: var(--script); font-style: italic; }
.mono { font-family: var(--mono); }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.stack { display: grid; gap: 12px; }
.stack.tight { gap: 6px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 520px) { .grid-3.collapse { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.card.flush { padding: 0; overflow: hidden; }
.card.wash { background: var(--caramel-wash); border-color: transparent; }
.card.block { background: var(--block-orange); color: var(--block-orange-ink); border: 0; }
.card.espresso { background: var(--block-espresso); color: var(--block-espresso-ink); border: 0; }
.card-link { display: block; text-decoration: none; color: inherit; cursor: pointer; transition: transform .15s ease, border-color .15s ease; }
.card-link:hover { border-color: var(--caramel); }
.well { background: var(--card-2); border-radius: 16px; padding: 12px; }
.list { display: grid; }
.list > .item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--line); text-decoration: none; color: inherit; cursor: pointer; background: none; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; text-align: left; }
.list > .item:first-child { border-top: 0; }
.list > .item:hover { background: var(--card-2); }
.item .title { font-weight: 700; }
.item .sub { color: var(--ink-3); font-size: 13px; }
.chev { color: var(--ink-3); }

/* Numbers */
.big-num { font-family: var(--mono); font-weight: 700; font-size: 34px; line-height: 1; color: var(--caramel-text); }
.num { font-family: var(--mono); font-weight: 700; }
.unit { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-left: 4px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-weight: 700; cursor: pointer; text-decoration: none; color: var(--ink); }
.btn:hover { border-color: var(--caramel); }
.btn.primary { background: var(--button-bg); color: var(--button-ink); border-color: transparent; }
.btn.action { background: var(--brand); color: var(--brand-ink); border-color: transparent; }
.btn.ghost { background: none; border-color: transparent; color: var(--caramel-text); padding: 0 8px; }
.btn.danger { color: var(--terracotta); }
.btn.small { min-height: 34px; padding: 0 12px; font-size: 14px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .45; cursor: default; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--line); background: var(--card); cursor: pointer; color: var(--ink); }
.icon-btn svg { width: 20px; height: 20px; }
.fab { position: fixed; right: 18px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 25; box-shadow: var(--shadow); }
@media (min-width: 900px) { .fab { display: none; } }

/* Chips and segmented choices */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--card-2); color: var(--ink-2); white-space: nowrap; }
.chip.sour { background: color-mix(in srgb, var(--terracotta) 18%, transparent); color: var(--terracotta); }
.chip.bitter { background: color-mix(in srgb, var(--ink-2) 16%, transparent); color: var(--ink-2); }
.chip.balanced, .chip.sage { background: var(--sage-wash); color: var(--sage); }
.chip.caramel { background: var(--caramel-wash); color: var(--caramel-text); }
.choice { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-weight: 600; cursor: pointer; white-space: nowrap; }
.choice[aria-pressed="true"] { background: var(--button-bg); color: var(--button-ink); border-color: transparent; }
.choices { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.segmented button { border: 0; background: none; padding: 9px 6px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.segmented button[aria-pressed="true"] { background: var(--button-bg); color: var(--button-ink); font-weight: 800; }

/* Fields */
.field { display: grid; gap: 6px; }
.field label, .field .label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.input, select.input, textarea.input { width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); }
textarea.input { min-height: 88px; resize: vertical; }
.input:focus { outline: 2px solid var(--caramel); outline-offset: 1px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 10px 14px; display: grid; gap: 2px; }
.tile input { border: 0; background: none; padding: 0; font-family: var(--mono); font-weight: 700; font-size: 22px; width: 100%; outline: none; }
.tile.accent { background: var(--caramel-wash); border-color: transparent; }

/* Stars */
.stars { display: inline-flex; gap: 2px; }
.stars button { border: 0; background: none; padding: 2px; cursor: pointer; color: var(--line); font-size: 26px; line-height: 1; }
.stars button.on { color: var(--caramel); }
.stars.static { font-size: 14px; color: var(--caramel); letter-spacing: 1px; }

/* Sheets (modal) */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(20, 10, 4, .45); display: grid; align-items: end; justify-items: center; }
.sheet { width: min(720px, 100%); max-height: 94vh; overflow: auto; background: var(--bg); border-radius: 26px 26px 0 0; padding: 0 16px calc(24px + env(safe-area-inset-bottom)); box-shadow: var(--shadow); }
.sheet-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0 10px; background: var(--bg); }
.sheet-head h2 { margin: 0; font-size: 18px; color: var(--caramel-text); }
@media (min-width: 720px) { .scrim { align-items: center; } .sheet { border-radius: 26px; max-height: 88vh; } }

/* Banners and toasts */
.banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--caramel-wash); color: var(--ink); margin-bottom: 14px; }
.banner.warn { background: color-mix(in srgb, var(--terracotta) 16%, var(--card)); }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 60; background: var(--block-espresso); color: var(--block-espresso-ink); padding: 12px 18px; border-radius: 999px; font-weight: 600; box-shadow: var(--shadow); max-width: calc(100% - 32px); }
/* With a sheet open the toast moves to the top, clear of the sheet's buttons. */
.scrim ~ .toast { bottom: auto; top: calc(16px + env(safe-area-inset-top)); }
.empty { text-align: center; padding: 36px 16px; color: var(--ink-3); }
.empty .script { font-size: 24px; color: var(--ink-2); display: block; margin-bottom: 6px; }
.divider { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.prose p { margin: 0 0 10px; }
.prose ul { margin: 0 0 10px; padding-left: 20px; }
.hidden { display: none !important; }
:focus-visible { outline: 2px solid var(--caramel); outline-offset: 2px; }

/* Spot illustrations (Illustrations.kt): poster-style flat blocks under an ink line, from theme tokens. */
.illustration { width: calc(var(--il-size, 120px) * 160 / 140); height: var(--il-size, 120px); flex: none; }
.illustration svg { width: 100%; height: 100%; display: block; overflow: visible; }
.illustration .il-ink { stroke: var(--rule); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.illustration .il-orange { fill: var(--block-orange); }
.illustration { --il-espresso: var(--block-espresso); --il-shadow: color-mix(in srgb, var(--block-espresso) 22%, transparent); }
:root[data-theme="dark"] .illustration { --il-espresso: #5b3d2c; --il-shadow: rgba(0, 0, 0, .45); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .illustration { --il-espresso: #5b3d2c; --il-shadow: rgba(0, 0, 0, .45); } }
.illustration .il-espresso { fill: var(--il-espresso); }
.illustration .il-shadow { fill: var(--il-shadow); }
.illustration .il-cream { fill: var(--block-cream); }
.illustration .il-sage { fill: var(--sage); }
.illustration .il-wash { fill: var(--caramel-wash); }
.illustration .il-none { fill: none; }
.illustration .il-accent { fill: var(--caramel); }
.illustration .il-line, .illustration .il-tick, .illustration .il-crimp { fill: none; stroke: var(--rule); stroke-width: 2.5; stroke-linecap: round; opacity: .55; }
.illustration .il-crimp { stroke: var(--block-espresso-accent); stroke-dasharray: 4 4; opacity: 1; }
.illustration .il-stream { fill: none; stroke: var(--caramel); stroke-width: 4; stroke-linecap: round; }
.illustration .il-steam { fill: none; stroke: var(--ink-3); stroke-width: 2.5; stroke-linecap: round; opacity: .7; }
.illustration .il-trend { fill: none; stroke: var(--rule); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.illustration .il-bean ellipse { fill: var(--il-espresso); stroke: var(--rule); stroke-width: 3; }
.illustration .il-bean path { fill: none; stroke: var(--block-espresso-accent); stroke-width: 2.5; stroke-linecap: round; }
.illustration .il-bean.light ellipse { fill: var(--caramel); }
.illustration .il-bean.light path { stroke: var(--block-espresso); }
.illustration .il-bean.big ellipse { stroke-width: 3.5; }

/* Page heads with a drawing: title left, illustration right, actions under the title. */
.page-head.with-art { align-items: center; }
.page-head .page-actions { margin-top: 12px; }
.page-art { margin: -6px -4px -6px 8px; }
@media (max-width: 520px) { .page-art { --il-size: 86px !important; margin-right: -8px; } }
.empty-art { margin: 0 auto 10px; }

/* "Paper" headlines: the site's speckled printed-ink texture on the condensed display type. */
.page-title, .section-title > span:first-child {
  -webkit-mask-image: var(--ink-mask); mask-image: var(--ink-mask);
  -webkit-mask-size: 320px; mask-size: 320px;
}
.section-title > span:first-child { -webkit-mask-size: 220px; mask-size: 220px; }