/* assets/css/fonts.css */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-normal-200-800.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url(/assets/fonts/literata-italic-200-900.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(/assets/fonts/literata-normal-200-900.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/courier-prime-normal-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/courier-prime-normal-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nanum Pen Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/nanum-pen-normal-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/atkinson-italic-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/atkinson-normal-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/atkinson-normal-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* assets/css/tokens.css */
/* ==========================================================================
   Stray Book Society: design tokens
   Layout concept: a riso-printed club zine. Near-white newsprint, ink-navy
   type, and three "drums" of colour (riso blue, fluorescent pink, highlighter
   yellow). Paper objects from the library and the post office (catalog
   cards, due-date stamps, postage, clue tags) carry the content.
   ========================================================================== */
:root {
  /* Paper & ink */
  --paper: #fafaf7;
  --paper-2: #f0efe9;
  --card: #ffffff;
  --ink: #1b1a2e;
  --ink-2: #47455e;
  --ink-3: #636179;
  --rule: rgba(27, 26, 46, 0.14);
  --rule-strong: rgba(27, 26, 46, 0.56);

  /* Riso drums */
  --blue: #2b4ea2;
  --blue-ink: #2b4ea2;
  --blue-soft: #e0e7fb;
  --on-blue: #ffffff;
  --pink: #ff48b0;
  --pink-ink: #b0106a;
  --pink-soft: #ffe2f1;
  --yellow: #ffe34d;
  --yellow-soft: #fff6c4;
  --on-yellow: #1b1a2e;
  --lilac: #b9a6ff;
  --lilac-soft: #ece6ff;

  /* Semantic */
  --green: #00a95c;
  --green-ink: #00703d;
  --green-soft: #d8f3e4;
  --red: #d62f2f;
  --red-ink: #b31f1f;
  --red-soft: #fde4e2;
  --amber-ink: #8a5a00;
  --amber-soft: #fff0cc;

  /* Post office */
  --kraft: #d4b081;
  --kraft-2: #c39a62;
  --kraft-ink: #5b3f1e;

  --shadow-ink: #1b1a2e;
  --band: #1b1a2e;
  --on-band: #fafaf7;
  --focus: #2b4ea2;
  --grain-opacity: 0.055;
  --grain-blend: multiply;

  /* Type */
  --font-display: 'Bricolage Grotesque', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Literata', Georgia, 'Times New Roman', serif;
  --font-ui: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Courier Prime', 'Courier New', ui-monospace, monospace;
  --font-hand: 'Nanum Pen Script', 'Segoe Print', 'Bradley Hand', cursive;

  --step--2: clamp(0.74rem, 0.72rem + 0.08vw, 0.8rem);
  --step--1: clamp(0.86rem, 0.83rem + 0.13vw, 0.94rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1: clamp(1.18rem, 1.1rem + 0.4vw, 1.42rem);
  --step-2: clamp(1.42rem, 1.26rem + 0.8vw, 1.95rem);
  --step-3: clamp(1.75rem, 1.45rem + 1.5vw, 2.75rem);
  --step-4: clamp(2.15rem, 1.6rem + 2.7vw, 3.9rem);
  --step-5: clamp(2.6rem, 1.7rem + 4.4vw, 5.6rem);

  /* Space */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --measure: 65ch;
  --wrap: 1180px;

  /* Shape */
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;
  --radius-hand: 255px 15px 225px 15px / 15px 225px 15px 255px;

  /* Elevation */
  --shadow-paper: 0 1px 0 rgba(27, 26, 46, 0.05), 0 2px 6px -2px rgba(27, 26, 46, 0.12), 0 14px 28px -14px rgba(27, 26, 46, 0.22);
  --shadow-lift: 0 2px 0 rgba(27, 26, 46, 0.05), 0 10px 20px -8px rgba(27, 26, 46, 0.2), 0 30px 50px -24px rgba(27, 26, 46, 0.3);
  /* Same paper shadow as a filter, so it follows torn edges. */
  --drop-paper: drop-shadow(0 1px 0 rgba(27, 26, 46, 0.06)) drop-shadow(0 6px 7px rgba(27, 26, 46, 0.11));
  --shadow-hard: 3px 3px 0 var(--shadow-ink);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;
  --dur-4: 800ms;

  --header-h: 68px;
  color-scheme: light;
}

/* Lamp off: dark palette. Lights on is the default for everyone; dark applies
   when chosen, or when "Match device" is chosen on a dark device. ---------- */
:root[data-theme='dark'] {
  --paper: #13152b;
  --paper-2: #0d0f21;
  --card: #1c1f3b;
  --ink: #f2f0fc;
  --ink-2: #cac8df;
  --ink-3: #a4a2bf;
  --rule: rgba(242, 240, 252, 0.14);
  --rule-strong: rgba(242, 240, 252, 0.42);
  --blue: #8ea7ff;
  --blue-ink: #a9bcff;
  --blue-soft: #232c5e;
  --on-blue: #0f1124;
  --pink: #ff5fbe;
  --pink-ink: #ff93d2;
  --pink-soft: #46193a;
  --yellow: #ffe34d;
  --yellow-soft: #3a3415;
  --on-yellow: #1b1a2e;
  --lilac: #9f8bf2;
  --lilac-soft: #2b2650;
  --green: #3dd598;
  --green-ink: #74e5b5;
  --green-soft: #12382a;
  --red: #ff6b6b;
  --red-ink: #ff9d97;
  --red-soft: #46191c;
  --amber-ink: #ffd27a;
  --amber-soft: #3d2f10;
  --kraft: #6b5133;
  --kraft-2: #5c452b;
  --kraft-ink: #f2d6ab;
  --shadow-ink: #04050e;
  --band: #0a0b19;
  --on-band: #f2f0fc;
  --focus: #ffe34d;
  --grain-opacity: 0.07;
  --grain-blend: screen;
  --shadow-paper: 0 1px 0 rgba(0, 0, 0, 0.3), 0 4px 10px -4px rgba(0, 0, 0, 0.5), 0 16px 30px -16px rgba(0, 0, 0, 0.6);
  --shadow-lift: 0 2px 0 rgba(0, 0, 0, 0.3), 0 12px 24px -8px rgba(0, 0, 0, 0.55), 0 30px 50px -24px rgba(0, 0, 0, 0.7);
  --drop-paper: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.3)) drop-shadow(0 7px 9px rgba(0, 0, 0, 0.5));
  color-scheme: dark;
}

/* Reading comfort: high contrast ----------------------------------------- */
:root[data-contrast='high'] {
  --ink: #000000;
  --ink-2: #111111;
  --ink-3: #2a2a2a;
  --paper: #ffffff;
  --paper-2: #f2f2f2;
  --rule: rgba(0, 0, 0, 0.45);
  --rule-strong: #000000;
  --blue: #0b2f8a;
  --blue-ink: #0b2f8a;
  --pink-ink: #8a0050;
  --green-ink: #00512c;
  --red-ink: #8f0000;
  --grain-opacity: 0;
}
:root[data-contrast='high'][data-theme='dark'] {
  --ink: #ffffff;
  --ink-2: #f2f2f2;
  --ink-3: #dddddd;
  --paper: #000000;
  --paper-2: #0a0a0a;
  --card: #0f0f0f;
  --rule: rgba(255, 255, 255, 0.5);
  --rule-strong: #ffffff;
  --blue: #b8c8ff;
  --blue-ink: #c9d5ff;
  --pink-ink: #ffb3de;
  --green-ink: #9ff0c8;
  --red-ink: #ffb8b3;
}

/* Reading comfort: text size and readable font --------------------------- */
:root[data-text='s'] { font-size: 93.75%; }
:root[data-text='l'] { font-size: 112.5%; }
:root[data-text='xl'] { font-size: 125%; }
:root[data-readable='true'] {
  --font-body: 'Atkinson Hyperlegible', Verdana, Tahoma, sans-serif;
  --font-hand: 'Atkinson Hyperlegible', Verdana, Tahoma, sans-serif;
  --font-mono: 'Atkinson Hyperlegible', Verdana, sans-serif;
}

/* assets/css/base.css */
/* ==========================================================================
   Base: reset, typography, links, focus, utilities
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion='reduce']) { scroll-behavior: smooth; }
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-optical-sizing: auto;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Riso grain over everything, never interactive. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main { flex: 1 0 auto; display: block; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
svg { overflow: visible; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:disabled { cursor: not-allowed; }
[hidden] { display: none !important; }
.no-js .needs-js { display: none !important; }
table { border-collapse: collapse; }
p, h1, h2, h3, h4, h5, h6, figure, blockquote, dl, dd { margin: 0; }
ul[role='list'], ol[role='list'] { list-style: none; margin: 0; padding: 0; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--space-l) 0; }
::selection { background: var(--yellow); color: var(--on-yellow); }

/* Headings ------------------------------------------------------------- */
h1, h2, h3, h4, .display, .h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  font-weight: 750;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
  color: var(--ink);
  font-stretch: 88%;
}
.display { font-size: var(--step-5); font-weight: 800; letter-spacing: -0.028em; line-height: 0.95; font-stretch: 82%; word-spacing: 0.04em; }
h1, .h1 { font-size: var(--step-4); }
h2, .h2 { font-size: var(--step-3); }
h3, .h3 { font-size: var(--step-2); line-height: 1.12; }
h4, .h4 { font-size: var(--step-1); line-height: 1.2; letter-spacing: -0.015em; }
p { text-wrap: pretty; }

.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); max-width: 52ch; }
.small { font-size: var(--step--1); }
.tiny { font-size: var(--step--2); }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.mono { font-family: var(--font-mono); }
.ui { font-family: var(--font-ui); }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.center-text { text-align: center; }
strong, b { font-weight: 700; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pink-ink);
}
.eyebrow--ink { color: var(--ink-2); }
.eyebrow--blue { color: var(--blue-ink); }

.hand {
  font-family: var(--font-hand);
  font-size: 1.55em;
  line-height: 1.05;
  color: var(--blue-ink);
  font-weight: 400;
  letter-spacing: 0;
}
:root[data-readable='true'] .hand { font-size: 1em; font-style: italic; }

/* Links ------------------------------------------------------------------ */
a { color: var(--blue-ink); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 0.16em; text-decoration-color: var(--pink); }
.link-quiet { color: inherit; text-decoration: none; }
.link-quiet:hover { text-decoration: underline; text-decoration-color: var(--pink); }
:root[data-underline='true'] a { text-decoration: underline !important; }

/* Focus ------------------------------------------------------------------ */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
:root[data-contrast='high'] :focus-visible { outline-width: 4px; }

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 1001;
  padding: 0.75em 1em;
  background: var(--yellow);
  color: var(--on-yellow);
  font: 700 var(--step-0) var(--font-ui);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-hard);
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.visually-hidden, .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Layout primitives ------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) + var(--gutter-r));
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
}
.wrap--narrow { max-width: calc(760px + var(--gutter) + var(--gutter-r)); }
.wrap--mid { max-width: calc(960px + var(--gutter) + var(--gutter-r)); }
.wrap--wide { max-width: calc(1360px + var(--gutter) + var(--gutter-r)); }

.section { padding-block: clamp(3rem, 2rem + 4vw, 6rem); position: relative; }
.section--tight { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.section--sunken { background: var(--paper-2); }

.stack { display: flex; flex-direction: column; gap: var(--stack, var(--space-s)); }
.stack > * { min-width: 0; }
.stack-2xs { --stack: var(--space-2xs); }
.stack-xs { --stack: var(--space-xs); }
.stack-m { --stack: var(--space-m); }
.stack-l { --stack: var(--space-l); }
.stack-xl { --stack: var(--space-xl); }

.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster, var(--space-xs)); }
.cluster--between { justify-content: space-between; }
.cluster--end { justify-content: flex-end; }
.cluster--start { align-items: flex-start; }
.cluster--tight { --cluster: var(--space-2xs); }

.grid { display: grid; gap: var(--grid-gap, var(--space-m)); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 260px)), 1fr)); }
.grid > * { min-width: 0; }
.grid--2 { --grid-min: 340px; }
.grid--3 { --grid-min: 260px; }
.grid--4 { --grid-min: 200px; }

.split {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
  align-items: center;
}
.split > * { min-width: 0; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 1.15fr 0.85fr; }
  .split--wide-right { grid-template-columns: 0.85fr 1.15fr; }
  .split--top { align-items: start; }
}

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: var(--step-2); margin-top: 2em; }
.prose h3 { font-size: var(--step-1); margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.35em; }
.prose li::marker { color: var(--pink-ink); }
.prose blockquote { border-left: 4px solid var(--pink); padding-left: 1em; font-style: italic; color: var(--ink-2); }
.prose table { width: 100%; font-size: var(--step--1); }
.prose th, .prose td { text-align: left; padding: 0.5em 0.6em; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose th { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }

/* Motion preferences ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion='full']) *,
  :root:not([data-motion='full']) *::before,
  :root:not([data-motion='full']) *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
:root[data-motion='reduce'] *,
:root[data-motion='reduce'] *::before,
:root[data-motion='reduce'] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* Cross-document page transitions where supported (progressive). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

@media print {
  body::after, .site-header, .site-footer, .announce, .toast-region, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; }
}

/* assets/css/components.css */
/* ==========================================================================
   Components
   ========================================================================== */

/* Buttons ----------------------------------------------------------------
   Every button is wrapped like a parcel. On hover (or keyboard focus) the
   wrapping rips off diagonally, left to right, showing its white paper core
   along the tear, and reveals a second colour underneath. The label never
   moves, and every wrap/reveal pair keeps AA contrast with it. Moving away
   lets the reveal fade, so the next hover gets fresh paper.
   ::before is the white core (rim), ::after the revealed colour above it. */
.btn {
  --btn-bg: var(--card);
  --btn-fg: var(--ink);
  --btn-border: var(--ink);
  --btn-shadow: var(--shadow-ink);
  --btn-reveal: var(--btn-reveal-default);
  --btn-radius: var(--radius-m);
  --tear-rest: var(--tear-a-rest);
  --tear-done: var(--tear-a-done);
  --rim-rest: var(--rim-a-rest);
  --rim-done: var(--rim-a-done);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 48px;
  padding: 0.7em 1.3em;
  font-family: var(--font-ui);
  font-size: var(--step-0);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 2px solid var(--btn-border);
  border-radius: var(--btn-radius);
  box-shadow: 3px 3px 0 var(--btn-shadow);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), background-color var(--dur-2);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn:nth-child(2n) { --tear-rest: var(--tear-b-rest); --tear-done: var(--tear-b-done); --rim-rest: var(--rim-b-rest); --rim-done: var(--rim-b-done); }
.btn::before, .btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: max(0px, calc(var(--btn-radius) - 2px));
  opacity: 0;
  pointer-events: none;
  /* Leaving: fade the reveal, then quietly re-wrap. */
  transition: opacity var(--dur-2) var(--ease-out), clip-path 0s linear var(--dur-2);
}
.btn::before { background: #fffdf5; clip-path: var(--rim-rest); }
.btn::after {
  background-color: var(--btn-reveal);
  /* Faint riso dots so the reveal reads as paper, not a flat fill. */
  background-image: radial-gradient(color-mix(in srgb, var(--btn-fg) 9%, transparent) 0.7px, transparent 1.2px);
  background-size: 5px 5px;
  clip-path: var(--tear-rest);
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--btn-shadow); text-decoration: none; color: var(--btn-fg); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--btn-shadow); }
@media (hover: hover) {
  .btn:hover { animation: btn-tug 420ms var(--ease-out); }
  .btn:hover::before, .btn:hover::after {
    opacity: 1;
    transition: opacity 0s, clip-path 560ms cubic-bezier(0.3, 0.7, 0.25, 1);
    /* The rip catches for a beat halfway, then goes. */
    transition-timing-function: linear, linear(0, 0.34 26%, 0.4 42%, 0.82 70%, 1);
  }
  .btn:hover::before { clip-path: var(--rim-done); }
  .btn:hover::after { clip-path: var(--tear-done); }
}
.btn:focus-visible::before, .btn:focus-visible::after { opacity: 1; transition: opacity 0s, clip-path 560ms cubic-bezier(0.3, 0.7, 0.25, 1); }
.btn:focus-visible::before { clip-path: var(--rim-done); }
.btn:focus-visible::after { clip-path: var(--tear-done); }
/* The tug of a hand starting the rip. */
@keyframes btn-tug {
  0% { transform: translate(0, 0); }
  35% { transform: translate(-1px, -1px) rotate(-1.4deg); }
  70% { transform: translate(-1px, -1px) rotate(0.5deg); }
  100% { transform: translate(-1px, -1px); }
}
.btn:disabled, .btn[aria-disabled='true'] { opacity: 0.5; transform: none; box-shadow: 3px 3px 0 var(--btn-shadow); animation: none; }
.btn:disabled::before, .btn:disabled::after, .btn[aria-disabled='true']::before, .btn[aria-disabled='true']::after { display: none; }
.btn--primary { --btn-bg: var(--blue); --btn-fg: var(--on-blue); --btn-shadow: var(--pink); --btn-reveal: var(--pink-ink); }
.btn--pink { --btn-bg: var(--pink); --btn-fg: #1b1a2e; --btn-shadow: var(--shadow-ink); --btn-reveal: var(--yellow); }
.btn--yellow { --btn-bg: var(--yellow); --btn-fg: var(--on-yellow); --btn-shadow: var(--shadow-ink); --btn-reveal: var(--pink); }
.btn--ghost { --btn-bg: transparent; --btn-border: transparent; --btn-shadow: transparent; --btn-reveal: var(--yellow-soft); text-decoration: underline; text-underline-offset: 0.2em; }
.btn--ghost:hover { --btn-shadow: transparent; }
.btn--danger { --btn-bg: var(--red-soft); --btn-fg: var(--red-ink); --btn-border: var(--red-ink); --btn-shadow: var(--red-ink); --btn-reveal: var(--card); }
.btn--small { --btn-radius: var(--radius-s); min-height: 38px; padding: 0.45em 0.85em; font-size: var(--step--1); box-shadow: 2px 2px 0 var(--btn-shadow); }
.btn--small:hover { box-shadow: 3px 3px 0 var(--btn-shadow); }
.btn--large { min-height: 58px; padding: 0.85em 1.6em; font-size: var(--step-1); }
.btn--block { width: 100%; }
.btn .icon { width: 1.15em; height: 1.15em; flex: none; }
.btn[aria-busy='true'] { color: transparent !important; pointer-events: none; }
.btn[aria-busy='true']::before { display: none; }
.btn[aria-busy='true']::after {
  inset: auto;
  z-index: 0;
  width: 1.2em; height: 1.2em;
  opacity: 1;
  clip-path: none;
  background: none;
  border: 3px solid var(--btn-fg);
  border-right-color: transparent;
  border-radius: 50%;
  transition: none;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Tear shapes: two hand-torn fronts, alternated so neighbours differ. The
   default wrap reveals yellow with the lights on, plum with them off. */
:root {
  --btn-reveal-default: var(--yellow);
  --tear-a-rest: polygon(-2px -2px, -8.9px -2px, -8.2px 5.24%, -10.9px 8.65%, -11.7px 13.98%, -12.7px 18.81%, -13.5px 22.99%, -16.6px 28.14%, -16.1px 33.03%, -19.9px 39.12%, -20.9px 41.83%, -20.5px 47.14%, -23.6px 52.88%, -24.0px 57.3%, -25.8px 61.81%, -24.8px 65.64%, -24.4px 70.94%, -26.0px 75.18%, -26.1px 81.46%, -25.9px 85.04%, -25.7px 89.53%, -26.5px 94.7%, -26.6px calc(100% + 2px), -2px calc(100% + 2px));
  --tear-a-done: polygon(-2px -2px, calc(100% + 25.1px) -2px, calc(100% + 25.8px) 5.24%, calc(100% + 23.1px) 8.65%, calc(100% + 22.3px) 13.98%, calc(100% + 21.3px) 18.81%, calc(100% + 20.5px) 22.99%, calc(100% + 17.4px) 28.14%, calc(100% + 17.9px) 33.03%, calc(100% + 14.1px) 39.12%, calc(100% + 13.1px) 41.83%, calc(100% + 13.5px) 47.14%, calc(100% + 10.4px) 52.88%, calc(100% + 10.0px) 57.3%, calc(100% + 8.2px) 61.81%, calc(100% + 9.2px) 65.64%, calc(100% + 9.6px) 70.94%, calc(100% + 8.0px) 75.18%, calc(100% + 7.9px) 81.46%, calc(100% + 8.1px) 85.04%, calc(100% + 8.3px) 89.53%, calc(100% + 7.5px) 94.7%, calc(100% + 7.4px) calc(100% + 2px), -2px calc(100% + 2px));
  --rim-a-rest: polygon(-2px -2px, -4.5px -2px, -6.8px 5.24%, -8.3px 8.65%, -9.6px 13.98%, -10.3px 18.81%, -8.3px 22.99%, -11.8px 28.14%, -13.4px 33.03%, -18.0px 39.12%, -15.6px 41.83%, -17.9px 47.14%, -21.6px 52.88%, -22.3px 57.3%, -20.6px 61.81%, -22.9px 65.64%, -20.3px 70.94%, -24.3px 75.18%, -24.5px 81.46%, -21.4px 85.04%, -20.1px 89.53%, -23.9px 94.7%, -23.6px calc(100% + 2px), -2px calc(100% + 2px));
  --rim-a-done: polygon(-2px -2px, calc(100% + 29.5px) -2px, calc(100% + 27.2px) 5.24%, calc(100% + 25.7px) 8.65%, calc(100% + 24.4px) 13.98%, calc(100% + 23.7px) 18.81%, calc(100% + 25.7px) 22.99%, calc(100% + 22.2px) 28.14%, calc(100% + 20.6px) 33.03%, calc(100% + 16.0px) 39.12%, calc(100% + 18.4px) 41.83%, calc(100% + 16.1px) 47.14%, calc(100% + 12.4px) 52.88%, calc(100% + 11.7px) 57.3%, calc(100% + 13.4px) 61.81%, calc(100% + 11.1px) 65.64%, calc(100% + 13.7px) 70.94%, calc(100% + 9.7px) 75.18%, calc(100% + 9.5px) 81.46%, calc(100% + 12.6px) 85.04%, calc(100% + 13.9px) 89.53%, calc(100% + 10.1px) 94.7%, calc(100% + 10.4px) calc(100% + 2px), -2px calc(100% + 2px));
  --tear-b-rest: polygon(-2px -2px, -7.2px -2px, -9.7px 5.23%, -10.8px 9%, -11.4px 15.26%, -12.1px 18.28%, -13.3px 23.96%, -16.8px 28.39%, -18.5px 34.3%, -17.6px 37.67%, -21.5px 42.75%, -20.6px 47.55%, -23.7px 52.59%, -23.0px 58.09%, -25.6px 61.6%, -24.3px 66.47%, -26.8px 72.37%, -26.3px 77.03%, -25.8px 81.29%, -25.8px 85.8%, -27.1px 90.35%, -25.3px 96.28%, -26.5px calc(100% + 2px), -2px calc(100% + 2px));
  --tear-b-done: polygon(-2px -2px, calc(100% + 26.8px) -2px, calc(100% + 24.3px) 5.23%, calc(100% + 23.2px) 9%, calc(100% + 22.6px) 15.26%, calc(100% + 21.9px) 18.28%, calc(100% + 20.7px) 23.96%, calc(100% + 17.2px) 28.39%, calc(100% + 15.5px) 34.3%, calc(100% + 16.4px) 37.67%, calc(100% + 12.5px) 42.75%, calc(100% + 13.4px) 47.55%, calc(100% + 10.3px) 52.59%, calc(100% + 11.0px) 58.09%, calc(100% + 8.4px) 61.6%, calc(100% + 9.7px) 66.47%, calc(100% + 7.2px) 72.37%, calc(100% + 7.7px) 77.03%, calc(100% + 8.2px) 81.29%, calc(100% + 8.2px) 85.8%, calc(100% + 6.9px) 90.35%, calc(100% + 8.7px) 96.28%, calc(100% + 7.5px) calc(100% + 2px), -2px calc(100% + 2px));
  --rim-b-rest: polygon(-2px -2px, -4.8px -2px, -4.4px 5.23%, -7.9px 9%, -6.5px 15.26%, -10.8px 18.28%, -10.6px 23.96%, -14.9px 28.39%, -16.6px 34.3%, -15.5px 37.67%, -20.2px 42.75%, -17.9px 47.55%, -21.4px 52.59%, -17.9px 58.09%, -24.3px 61.6%, -18.9px 66.47%, -25.4px 72.37%, -24.5px 77.03%, -24.0px 81.29%, -24.3px 85.8%, -25.7px 90.35%, -24.0px 96.28%, -23.6px calc(100% + 2px), -2px calc(100% + 2px));
  --rim-b-done: polygon(-2px -2px, calc(100% + 29.2px) -2px, calc(100% + 29.6px) 5.23%, calc(100% + 26.1px) 9%, calc(100% + 27.5px) 15.26%, calc(100% + 23.2px) 18.28%, calc(100% + 23.4px) 23.96%, calc(100% + 19.1px) 28.39%, calc(100% + 17.4px) 34.3%, calc(100% + 18.5px) 37.67%, calc(100% + 13.8px) 42.75%, calc(100% + 16.1px) 47.55%, calc(100% + 12.6px) 52.59%, calc(100% + 16.1px) 58.09%, calc(100% + 9.7px) 61.6%, calc(100% + 15.1px) 66.47%, calc(100% + 8.6px) 72.37%, calc(100% + 9.5px) 77.03%, calc(100% + 10.0px) 81.29%, calc(100% + 9.7px) 85.8%, calc(100% + 8.3px) 90.35%, calc(100% + 10.0px) 96.28%, calc(100% + 10.4px) calc(100% + 2px), -2px calc(100% + 2px));
}
:root[data-theme='dark'] { --btn-reveal-default: var(--pink-soft); }
/* Reduced motion: no tug and no sweep; the reveal simply appears. */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion='full']) .btn { animation: none !important; }
  :root:not([data-motion='full']) .btn:not([aria-busy='true'])::before, :root:not([data-motion='full']) .btn:not([aria-busy='true'])::after { transition: none !important; }
}
:root[data-motion='reduce'] .btn { animation: none !important; }
:root[data-motion='reduce'] .btn:not([aria-busy='true'])::before, :root[data-motion='reduce'] .btn:not([aria-busy='true'])::after { transition: none !important; }
/* High contrast and forced colours: plain buttons, nothing between label and face. */
:root[data-contrast='high'] .btn { animation: none; }
:root[data-contrast='high'] .btn:not([aria-busy='true'])::before, :root[data-contrast='high'] .btn:not([aria-busy='true'])::after { display: none; }
@media (forced-colors: active) {
  .btn { animation: none; }
  .btn:not([aria-busy='true'])::before, .btn:not([aria-busy='true'])::after { display: none; }
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  transition: background var(--dur-2);
}
.icon-btn:hover { background: var(--paper-2); }
.icon-btn .icon { width: 22px; height: 22px; }

.icon { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: -0.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon--fill { fill: currentColor; stroke: none; }

.text-btn {
  background: none; border: 0; padding: 0;
  color: var(--blue-ink);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}
.text-btn:hover { text-decoration-color: var(--pink); text-decoration-thickness: 0.15em; }

/* Highlighter, scribbles, marginalia ------------------------------------- */
.hl {
  color: var(--on-yellow);
  background-image: linear-gradient(100deg, transparent 0.15em, var(--yellow) 0.25em, var(--yellow) calc(100% - 0.3em), transparent calc(100% - 0.1em));
  background-repeat: no-repeat;
  background-size: 100% 78%;
  background-position: 0 60%;
  padding: 0 0.18em;
  margin: 0 -0.08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size var(--dur-4) var(--ease-out);
}
.hl--pink { background-image: linear-gradient(100deg, transparent 0.15em, var(--pink-soft) 0.25em, var(--pink-soft) calc(100% - 0.3em), transparent calc(100% - 0.1em)); color: inherit; }
.hl--blue { background-image: linear-gradient(100deg, transparent 0.15em, var(--blue-soft) 0.25em, var(--blue-soft) calc(100% - 0.3em), transparent calc(100% - 0.1em)); color: inherit; }
.hl.is-pending { background-size: 0% 78%; }

.scribble { position: relative; display: inline-block; white-space: nowrap; }
.scribble::after {
  content: '';
  position: absolute;
  left: -0.05em; right: -0.05em;
  bottom: -0.18em;
  height: 0.38em;
  background: var(--pink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14 C 60 4, 120 18, 180 9 S 270 6, 297 11' stroke='black' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14 C 60 4, 120 18, 180 9 S 270 6, 297 11' stroke='black' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  transform-origin: left center;
  transition: transform var(--dur-4) var(--ease-out);
}
.scribble.is-pending::after { transform: scaleX(0); }

.circled { position: relative; display: inline-block; }
.circled::before {
  content: '';
  position: absolute;
  inset: -0.25em -0.45em;
  border: 3px solid var(--pink);
  border-radius: 50% 45% 55% 48% / 55% 50% 48% 52%;
  transform: rotate(-3deg);
  pointer-events: none;
}

.margin-note {
  font-family: var(--font-hand);
  font-size: var(--step-2);
  line-height: 1;
  color: var(--blue-ink);
  display: inline-flex;
  align-items: flex-end;
  gap: 0.3em;
  transform: rotate(-4deg);
}
.margin-note svg { width: 2.4em; height: auto; color: var(--blue-ink); }
:root[data-readable='true'] .margin-note { font-size: var(--step-0); transform: none; }

/* Paper objects ---------------------------------------------------------- */
.paper {
  position: relative;
  background: var(--card);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-paper);
  padding: var(--pad, var(--space-m));
}
.paper--flat { box-shadow: none; border: 1.5px solid var(--rule); }
.paper--outline { box-shadow: var(--shadow-hard); border: 2px solid var(--ink); border-radius: var(--radius-m); }
.paper--lift { transition: transform var(--dur-3) var(--ease-spring), box-shadow var(--dur-3); }
.paper--lift:hover { transform: translateY(-4px) rotate(-0.4deg); box-shadow: var(--shadow-lift); }
.tilt-l { transform: rotate(-1.2deg); }
.tilt-r { transform: rotate(1.1deg); }

.stock-yellow { background: var(--yellow-soft); }
.stock-pink { background: var(--pink-soft); }
.stock-blue { background: var(--blue-soft); }
.stock-green { background: var(--green-soft); }
.stock-lilac { background: var(--lilac-soft); }
.stock-kraft { background: var(--kraft); color: var(--kraft-ink); }

/* Folded corner. Set --dogear-bg to the colour behind the card. */
.dogear { --fold: 26px; }
.dogear::before, .dogear::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: var(--fold); height: var(--fold);
  transition: width var(--dur-3) var(--ease-spring), height var(--dur-3) var(--ease-spring);
  pointer-events: none;
}
.dogear::before { background: linear-gradient(225deg, var(--dogear-bg, var(--paper)) 50%, transparent 50%); border-top-right-radius: inherit; }
.dogear::after {
  background: linear-gradient(45deg, var(--dogear-fold, var(--paper-2)) 50%, transparent 50%);
  box-shadow: -3px 3px 4px -2px rgba(0, 0, 0, 0.18);
  border-bottom-left-radius: 3px;
}
.dogear:hover, .dogear:focus-within { --fold: 40px; }

/* Masking tape strip at the top of a card. */
.taped::before {
  content: '';
  position: absolute;
  top: -12px; left: 50%;
  width: 96px; height: 26px;
  transform: translateX(-50%) rotate(-3deg);
  background: color-mix(in srgb, var(--yellow) 55%, transparent);
  border-left: 1px dashed rgba(0, 0, 0, 0.08);
  border-right: 1px dashed rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
  z-index: 2;
}
.taped--pink::before { background: color-mix(in srgb, var(--pink) 45%, transparent); }
.taped--blue::before { background: color-mix(in srgb, var(--blue) 35%, transparent); }

/* Library catalog card: red header rule, blue ruled lines, punched hole and a
   hand-torn bottom edge. Three tear shapes rotate by position so a row of
   cards never tears the same way twice; the shadow is a filter so it follows
   the tear. */
:root {
  --tear-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 14' preserveAspectRatio='none'%3E%3Cpath d='M0 0H600V6.3L590 4.9L584.7 5.9L575.6 6.1L568.1 6.9L565 5.5L556.5 5.9L551.4 6.5L543.3 6.2L533.5 5.4L525.8 4.8L515.5 7.8L509.1 10.9L500.1 9.1L493.6 8.4L485.1 5.5L477.8 7.3L470.8 8.4L466.3 10.2L459.3 8.5L455.6 9.9L451.6 7.5L448.3 8L442.4 9L434.2 9.6L423.8 7.3L412.9 7.1L402.9 6.5L392.3 9.6L382.8 9L377.5 6.6L367.2 8.4L360.7 6.9L357.3 6.9L349.8 6.1L340.8 3.1L333.2 4.9L328.3 5.2L318.4 5.6L311.7 4.8L307.9 4.8L300.7 4.9L294.2 6.4L285.7 4.7L275.8 4.4L269.9 4.7L263.6 5.9L256.5 4.1L247.5 7.5L242.1 6.1L237.4 8.8L226.8 7.6L222.2 9.1L216.6 8.1L207.3 5.5L200.3 6.1L192.2 4.1L186.2 5.2L177.3 3.7L173.1 4.4L164.6 2.1L160.1 3.7L155.7 4.2L148 6.1L143 4.1L136.1 7.1L130.1 6.2L120.1 4.9L114.6 6.7L107.5 5.5L101.7 6.5L96.6 7.7L88.7 5.5L79.5 7.9L75.6 6.6L69 8.3L65 10.3L60.6 8.5L50.9 10L47.2 9.1L41.3 10L34.5 8.2L25.2 8.6L17.4 7.4L10.8 7L0 8.3Z'/%3E%3C/svg%3E");
  --tear-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 14' preserveAspectRatio='none'%3E%3Cpath d='M0 0H600V7L597.8 7.9L592 6.6L588.2 8.1L577.8 5.8L572.6 5.9L563 6.4L557.5 7.3L551.3 5.8L547.1 5.3L540.2 5.4L534.3 5.4L529.2 7.5L519.9 6.5L511.6 7.8L501.6 7.1L491 4.3L480.5 4.8L473.8 6.2L467.5 8.1L457.2 8L451.6 6.9L442.9 8.7L439.4 7.7L434.7 8.5L424.4 9.1L414.5 9.2L405 8.5L397.8 8.4L388.1 7.1L380.6 7.1L372.5 8.3L365.6 7.7L360 7.7L355.3 7.2L348 5.4L343.2 6.3L338.1 5.6L334.3 4.1L329.2 6.2L323 6.9L315 5.3L306.5 5.8L295.6 3.3L289.9 5.9L280.9 6.2L276.1 5.4L267.5 5.8L259.4 5.3L252.9 6.6L243.5 7.6L237.7 10L234.3 9.5L225 8.3L217.9 7.1L214.8 6.3L207 7.2L196.7 4.9L192.9 6.7L184.8 5.1L180.7 4.9L174.1 5.3L164.3 3L155.2 3.5L151.4 3.2L141.6 4.2L132.2 4.1L121.6 5.8L113.5 5L106 6L101.2 8L97.1 5.9L93.7 7.4L83.6 5.5L76.3 8.1L67.9 8.9L60.8 9.1L51.1 7.7L45.2 9.6L40.2 9.7L36.1 8.5L27.9 9.2L24.4 9.4L16.5 8.1L10.7 9.5L6.3 8.5L0 7.8Z'/%3E%3C/svg%3E");
  --tear-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 14' preserveAspectRatio='none'%3E%3Cpath d='M0 0H600V5.7L599 6L592.7 4.2L585.1 6.2L579.3 6L568.8 5.3L559.8 6.6L551.9 7.8L548.4 8.6L540.5 9.1L529.5 7.1L520.6 7.7L511.7 7L508.5 5.8L499.7 4.9L493 6.5L484.8 5.8L477.2 5.4L466.4 8.4L459.7 7.2L456.3 8.4L448.8 7.1L439.3 8.3L428.5 9L421.4 7.8L416.4 6.3L406 8.6L395.4 10.2L390.5 10.4L384.2 8.6L379.3 9.1L371.9 9L364.1 6.8L357.3 6.4L349.2 4.5L342.9 4.8L335.7 4.5L331.1 6.3L321.4 5L316.1 4.7L311.8 6.1L300.9 6.1L297.3 3.6L290.9 7.5L284.5 9.8L276.3 9L272.2 7.6L266 8.9L257.5 6.7L247.4 5.3L242.6 4.1L235.7 6.2L227.8 5.2L223.9 6.3L219.9 5.7L211.3 6.1L201.8 7.3L198 7.2L194 4.9L188.3 6.4L178.3 5.8L167.6 8.4L162 6.5L158.8 6.4L154.1 6.7L144.7 6.5L135.5 4.2L128.9 4.3L125.1 5.1L114.2 5.6L105.5 5.5L97.8 4.6L89.4 6.6L79.8 6.6L76.6 5.4L69.8 8.6L65.6 9L55.1 8L47.7 7.9L40.3 10.1L29.9 9.9L25.7 7L18 9.2L9.8 8L0 9.6Z'/%3E%3C/svg%3E");
}
.catalog-card {
  --cc-line: 1.6rem;
  --cc-head: calc(var(--cc-line) * 2);
  --cc-rule: color-mix(in srgb, var(--red) 70%, transparent);
  --tear: var(--tear-1);
  --tear-h: 12px;
  position: relative;
  background-color: var(--card);
  background-image:
    linear-gradient(var(--cc-rule), var(--cc-rule)),
    linear-gradient(var(--card), var(--card)),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--cc-line) - 1px), color-mix(in srgb, var(--blue) 22%, transparent) calc(var(--cc-line) - 1px) var(--cc-line));
  background-size: 100% 2px, 100% var(--cc-head), 100% 100%;
  background-position: 0 calc(var(--cc-head) - 1px), 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, repeat;
  border-radius: 4px 4px 0 0;
  filter: var(--drop-paper);
  padding: 0 var(--space-m) calc(var(--cc-line) * 2);
  margin-bottom: var(--tear-h);
  line-height: var(--cc-line);
}
.catalog-card:nth-child(3n + 2) { --tear: var(--tear-2); }
.catalog-card:nth-child(3n) { --tear: var(--tear-3); }
.catalog-card::before,
.torn-paper::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: calc(100% - 1px);
  height: var(--tear-h);
  background: inherit;
  background-image: none;
  -webkit-mask: var(--tear) no-repeat 0 0 / 100% 100%;
  mask: var(--tear) no-repeat 0 0 / 100% 100%;
  pointer-events: none;
}
.catalog-card::after {
  content: '';
  position: absolute;
  bottom: 0.7em; left: 50%;
  width: 14px; height: 14px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
}
/* A heading that opens a card sits on the red rule; text then rides the lines. */
:where(.catalog-card) > :where(h2, h3, h4):first-child { min-height: var(--cc-head); display: flex; align-items: flex-end; padding-bottom: 0.35rem; margin: 0; }
/* Any other slip of paper can opt in: position it and give it a background. */
.torn-paper { --tear: var(--tear-2); --tear-h: 12px; position: relative; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none; filter: var(--drop-paper); margin-bottom: var(--tear-h); }

/* Postage stamp with perforated edge. */
.postage {
  --r: 7px;
  position: relative;
  padding: calc(var(--r) * 2.4);
  background: var(--card);
  -webkit-mask:
    radial-gradient(var(--r), #0000 97%, #000) round calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
  mask:
    radial-gradient(var(--r), #0000 97%, #000) round calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.12));
}
.postage__inner {
  border: 2px solid currentColor;
  padding: var(--space-m);
  height: 100%;
}

/* Rubber stamp: inked unevenly via a noise mask. */
.stamp {
  --stamp-color: var(--pink-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 0.75em;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stamp-color);
  border: 3px double var(--stamp-color);
  border-radius: 6px;
  transform: rotate(var(--stamp-rot, -4deg));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 1.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 1.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
}
.stamp--blue { --stamp-color: var(--blue-ink); }
.stamp--green { --stamp-color: var(--green-ink); }
.stamp--red { --stamp-color: var(--red-ink); }
.stamp--ink { --stamp-color: var(--ink-2); }
.stamp--round { border-radius: 50%; aspect-ratio: 1; justify-content: center; text-align: center; padding: 0.9em; line-height: 1.15; max-width: 100%; }
.stamp.is-thunk { animation: thunk var(--dur-3) var(--ease-spring); }
@keyframes thunk {
  0% { transform: rotate(var(--stamp-rot, -4deg)) scale(1.9); opacity: 0; }
  60% { transform: rotate(var(--stamp-rot, -4deg)) scale(0.94); opacity: 1; }
  100% { transform: rotate(var(--stamp-rot, -4deg)) scale(1); }
}

/* Sticky note */
.sticky {
  background: var(--yellow);
  color: var(--on-yellow);
  padding: var(--space-m);
  box-shadow: 0 10px 18px -12px rgba(0, 0, 0, 0.45);
  transform: rotate(-1.5deg);
  border-bottom-right-radius: 40px 6px;
}
.sticky a { color: var(--on-yellow); }

/* Chips & tags ----------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.2em 0.65em;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.4;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-2);
  border: 1.5px solid var(--rule);
  white-space: nowrap;
}
.chip--blue { background: var(--blue-soft); color: var(--blue-ink); border-color: transparent; }
.chip--pink { background: var(--pink-soft); color: var(--pink-ink); border-color: transparent; }
.chip--green { background: var(--green-soft); color: var(--green-ink); border-color: transparent; }
.chip--yellow { background: var(--yellow-soft); color: var(--ink); border-color: transparent; }
.chip--red { background: var(--red-soft); color: var(--red-ink); border-color: transparent; }
.chip--amber { background: var(--amber-soft); color: var(--amber-ink); border-color: transparent; }
.chip--outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.chip .dot { width: 0.55em; height: 0.55em; border-radius: 50%; background: currentColor; }

.label-mono {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Forms ------------------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.field__label { font-family: var(--font-ui); font-weight: 700; font-size: var(--step-0); line-height: 1.25; color: var(--ink); }
.field__label .opt { font-weight: 500; color: var(--ink-3); font-size: var(--step--1); }
.field__hint { font-size: var(--step--1); color: var(--ink-2); line-height: 1.45; }
.field__error {
  display: flex;
  align-items: flex-start;
  gap: 0.4em;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--red-ink);
  line-height: 1.35;
}
.field__error::before {
  content: '';
  flex: none;
  width: 1.05em; height: 1.05em;
  margin-top: 0.1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5v.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5v.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.field__error:empty { display: none; }

.input, .select, .textarea {
  width: 100%;
  min-height: 50px;
  padding: 0.7em 0.9em;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--rule-strong);
  border-radius: var(--radius-m);
  transition: border-color var(--dur-2), box-shadow var(--dur-2);
  appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-2); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  border-color: var(--blue);
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.input[aria-invalid='true'], .select[aria-invalid='true'], .textarea[aria-invalid='true'] {
  border-color: var(--red-ink);
  background-image: linear-gradient(var(--red-soft), var(--red-soft));
}
.select {
  padding-right: 2.6em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23636179' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8em center;
  background-size: 1.1em;
}
.textarea { min-height: 7.5em; resize: vertical; }
.textarea--ruled {
  line-height: 1.8em;
  padding-top: 0.45em;
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(1.8em - 1px), color-mix(in srgb, var(--blue) 20%, transparent) calc(1.8em - 1px) 1.8em);
  background-attachment: local;
  background-position: 0 0.45em;
}
.input--code { font-family: var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; }
.input-group { display: flex; gap: var(--space-2xs); }
.input-group > .input { flex: 1; min-width: 0; }

.check {
  display: flex;
  align-items: flex-start;
  gap: 0.65em;
  cursor: pointer;
  line-height: 1.45;
}
.check input[type='checkbox'], .check input[type='radio'] {
  flex: none;
  width: 1.3rem; height: 1.3rem;
  margin: 0.12em 0 0;
  accent-color: var(--blue);
  cursor: pointer;
}

/* Toggle switch built on a native checkbox with role="switch". */
.switch {
  appearance: none;
  flex: none;
  position: relative;
  width: 3.1rem; height: 1.75rem;
  margin: 0;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper-2);
  cursor: pointer;
  transition: background var(--dur-2);
}
.switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: calc(1.75rem - 8px); height: calc(1.75rem - 8px);
  border-radius: 50%;
  background: var(--ink);
  transition: transform var(--dur-2) var(--ease-spring);
}
.switch:checked { background: var(--green); }
.switch:checked::after { transform: translateX(1.35rem); background: #fff; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); padding-block: var(--space-xs); }
.switch-row + .switch-row { border-top: 1px solid var(--rule); }

/* Segmented radio control */
.seg {
  display: inline-flex;
  flex-wrap: wrap;
  padding: 4px;
  gap: 4px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-m);
  background: var(--card);
  max-width: 100%;
}
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-height: 42px;
  padding: 0.4em 0.95em;
  border-radius: 8px;
  font-family: var(--font-ui);
  font-weight: 650;
  font-size: var(--step--1);
  cursor: pointer;
  color: var(--ink-2);
  transition: background var(--dur-2), color var(--dur-2);
}
.seg label:hover { background: var(--paper-2); color: var(--ink); }
.seg input:checked + label { background: var(--ink); color: var(--paper); }
.seg input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.seg--block { display: flex; }
.seg--block label { flex: 1; }

/* Choice cards: big tappable options (quiz, plan builder) */
.choice { position: relative; display: block; cursor: pointer; }
.choice__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  height: 100%;
  padding: var(--space-s) var(--space-s);
  border: 2px solid var(--rule-strong);
  border-radius: var(--radius-m);
  background: var(--card);
  transition: border-color var(--dur-2), background var(--dur-2), transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2);
}
.choice:hover .choice__body { border-color: var(--ink); transform: translateY(-2px); }
.choice__input:checked + .choice__body {
  border-color: var(--ink);
  background: var(--blue-soft);
  box-shadow: 3px 3px 0 var(--ink);
}
.choice__input:focus-visible + .choice__body { outline: 3px solid var(--focus); outline-offset: 3px; }
.choice__title { font-family: var(--font-ui); font-weight: 700; font-size: var(--step-0); line-height: 1.2; }
.choice__note { font-size: var(--step--1); color: var(--ink-2); line-height: 1.4; }
.choice__check {
  position: absolute;
  top: 10px; right: 10px;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid var(--rule-strong);
  background: var(--card);
  display: grid;
  place-items: center;
}
.choice__input:checked + .choice__body .choice__check { background: var(--ink); border-color: var(--ink); }
.choice__input:checked + .choice__body .choice__check::after {
  content: '';
  width: 10px; height: 6px;
  border-left: 2.5px solid var(--paper);
  border-bottom: 2.5px solid var(--paper);
  transform: rotate(-45deg) translate(1px, -1px);
}

/* Range slider: a bookmark tab on a ruler */
.range {
  --pct: 50%;
  appearance: none;
  width: 100%;
  height: 34px;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
.range::-webkit-slider-runnable-track {
  height: 14px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background:
    linear-gradient(to right, var(--pink) 0 var(--pct), transparent var(--pct)),
    repeating-linear-gradient(to right, var(--rule-strong) 0 1.5px, transparent 1.5px 10%),
    var(--card);
}
.range::-moz-range-track {
  height: 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: repeating-linear-gradient(to right, var(--rule-strong) 0 1.5px, transparent 1.5px 10%), var(--card);
}
.range::-moz-range-progress { height: 10px; background: var(--pink); border-radius: 999px; border: 2px solid var(--ink); }
.range::-webkit-slider-thumb {
  appearance: none;
  width: 30px; height: 30px;
  margin-top: -10px;
  border-radius: 8px 8px 50% 50%;
  background: var(--yellow);
  border: 2.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform var(--dur-1);
}
.range::-moz-range-thumb {
  width: 26px; height: 26px;
  border-radius: 8px 8px 50% 50%;
  background: var(--yellow);
  border: 2.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}
.range:active::-webkit-slider-thumb { transform: scale(1.12); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--focus); outline-offset: 3px; }
.range:focus-visible::-moz-range-thumb { outline: 3px solid var(--focus); outline-offset: 3px; }
.range-labels { display: flex; justify-content: space-between; gap: 1em; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }

/* Form summary errors */
.form-alert { display: none; }
.form-alert:not(:empty) { display: block; }

/* Notices ---------------------------------------------------------------- */
.notice {
  display: flex;
  gap: var(--space-xs);
  align-items: flex-start;
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-m);
  border: 2px solid var(--notice-border, var(--rule-strong));
  background: var(--notice-bg, var(--paper-2));
  color: var(--ink);
  line-height: 1.5;
}
.notice > .icon { margin-top: 0.15em; color: var(--notice-fg, var(--ink-2)); }
.notice strong { font-family: var(--font-ui); }
.notice--info { --notice-bg: var(--blue-soft); --notice-border: color-mix(in srgb, var(--blue) 45%, transparent); --notice-fg: var(--blue-ink); }
.notice--success { --notice-bg: var(--green-soft); --notice-border: color-mix(in srgb, var(--green) 50%, transparent); --notice-fg: var(--green-ink); }
.notice--warning { --notice-bg: var(--amber-soft); --notice-border: color-mix(in srgb, var(--amber-ink) 45%, transparent); --notice-fg: var(--amber-ink); }
.notice--error { --notice-bg: var(--red-soft); --notice-border: color-mix(in srgb, var(--red) 50%, transparent); --notice-fg: var(--red-ink); }

/* Toasts: sticky notes slapped onto the screen --------------------------- */
.toast-region {
  position: fixed;
  z-index: 1000;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
  max-width: min(380px, calc(100vw - 32px));
}
.toast {
  pointer-events: auto;
  display: flex;
  gap: 0.6em;
  align-items: flex-start;
  padding: 0.85em 1em 0.85em 1.05em;
  background: var(--yellow);
  color: var(--on-yellow);
  font-family: var(--font-ui);
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 14px 24px -14px rgba(0, 0, 0, 0.55);
  transform: rotate(-1deg);
  animation: toast-in var(--dur-3) var(--ease-spring);
  border-bottom-right-radius: 30px 5px;
}
.toast--success { background: #c9f2dc; }
.toast--error { background: #ffd2cf; }
.toast--info { background: #dbe4ff; }
.toast__close { margin-left: auto; background: none; border: 0; padding: 0 0 0 0.3em; color: inherit; font-size: 1.3em; line-height: 1; cursor: pointer; min-width: 24px; min-height: 24px; }
.toast.is-leaving { animation: toast-out var(--dur-2) ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(20px) rotate(4deg) scale(0.9); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(40px) rotate(6deg); } }

/* Dialogs ---------------------------------------------------------------- */
dialog.modal {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: var(--radius-m);
  background: var(--card);
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--ink), var(--shadow-lift);
  overflow: auto;
}
dialog.modal--wide { width: min(860px, calc(100vw - 32px)); }
dialog.modal::backdrop { background: rgba(13, 15, 33, 0.55); backdrop-filter: blur(3px); }
dialog.modal[open] { animation: modal-in var(--dur-3) var(--ease-spring); }
@keyframes modal-in { from { opacity: 0; transform: translateY(16px) rotate(-1deg) scale(0.97); } }
.modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-s); padding: var(--space-m) var(--space-m) 0; }
.modal__title { font-size: var(--step-2); }
.modal__body { padding: var(--space-m); }
.modal__footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-xs); padding: 0 var(--space-m) var(--space-m); }

/* Tabs styled as folder index tabs --------------------------------------- */
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 2px solid var(--ink); padding-inline: 4px; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none;
  position: relative;
  padding: 0.6em 1.1em 0.5em;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--step--1);
  color: var(--ink-2);
  background: var(--paper-2);
  border: 2px solid var(--rule-strong);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected='true'], .tab[aria-current='page'] {
  background: var(--card);
  color: var(--ink);
  border-color: var(--ink);
  margin-bottom: -2px;
  padding-bottom: calc(0.5em + 2px);
}

/* Data display ----------------------------------------------------------- */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.4em 1.2em; margin: 0; }
.kv dt { font-family: var(--font-mono); font-size: var(--step--2); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding-top: 0.25em; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.stat { display: flex; flex-direction: column; gap: 0.1em; }
.stat__value { font-family: var(--font-display); font-weight: 800; font-size: var(--step-3); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; font-stretch: 85%; }
.stat__label { font-family: var(--font-mono); font-size: var(--step--2); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); }
.stat__delta { font-family: var(--font-ui); font-size: var(--step--1); font-weight: 650; }
.stat__delta--up { color: var(--green-ink); }
.stat__delta--down { color: var(--red-ink); }

.table-wrap { overflow-x: auto; border: 2px solid var(--ink); border-radius: var(--radius-m); background: var(--card); }
.table { width: 100%; font-size: var(--step--1); }
.table th, .table td { text-align: left; padding: 0.7em 0.9em; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.table th {
  position: sticky; top: 0;
  background: var(--paper-2);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  z-index: 1;
}
.table tbody tr:hover { background: color-mix(in srgb, var(--yellow-soft) 60%, transparent); }
.table tbody tr:last-child td { border-bottom: 0; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table .actions { text-align: right; white-space: nowrap; }

.meter, .meter__fill { display: block; }
.meter { height: 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--card); overflow: hidden; }
.meter__fill { height: 100%; width: var(--pct, 0%); background: var(--pink); transition: width var(--dur-4) var(--ease-out); }
.meter--blue .meter__fill { background: var(--blue); }
.meter--green .meter__fill { background: var(--green); }

/* Status timeline (box progress) */
.timeline { display: grid; grid-template-columns: repeat(var(--steps, 5), 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.timeline__step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.45rem; padding: 0 0.2rem; font-size: var(--step--1); }
.timeline__step::before {
  content: '';
  position: absolute;
  top: 15px; left: -50%; right: 50%;
  border-top: 3px dashed var(--rule-strong);
  z-index: 0;
}
.timeline__step:first-child::before { display: none; }
.timeline__dot {
  position: relative; z-index: 1;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2.5px solid var(--rule-strong);
  background: var(--card);
  display: grid; place-items: center;
}
.timeline__label { font-family: var(--font-ui); font-weight: 700; line-height: 1.2; color: var(--ink-3); }
.timeline__date { font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-3); }
.timeline__step.is-done::before { border-top-style: solid; border-color: var(--ink); }
.timeline__step.is-done .timeline__dot { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.timeline__step.is-done .timeline__label { color: var(--ink); }
.timeline__step.is-current .timeline__dot { background: var(--yellow); border-color: var(--ink); color: var(--on-yellow); box-shadow: 0 0 0 5px color-mix(in srgb, var(--yellow) 40%, transparent); }
.timeline__step.is-current .timeline__label { color: var(--ink); }
@media (max-width: 520px) {
  .timeline { grid-template-columns: 1fr; gap: 0.4rem; }
  .timeline__step { flex-direction: row; text-align: left; gap: 0.8rem; padding: 0; }
  .timeline__step::before { display: none; }
}

/* Empty states ----------------------------------------------------------- */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-s);
  padding: var(--space-xl) var(--space-m);
  border: 2px dashed var(--rule-strong);
  border-radius: var(--radius-l);
  color: var(--ink-2);
}
.empty .dewey { width: 110px; }
.empty__title { font-family: var(--font-ui); font-weight: 750; font-size: var(--step-1); color: var(--ink); }

/* Skeleton loading */
.skeleton {
  border-radius: var(--radius-s);
  background: linear-gradient(90deg, var(--paper-2) 0%, color-mix(in srgb, var(--paper-2) 40%, var(--card)) 50%, var(--paper-2) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  min-height: 1em;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* Accordion (details/summary) -------------------------------------------- */
.accordion { border-top: 2px solid var(--ink); }
.accordion details { border-bottom: 1.5px solid var(--rule-strong); }
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-s) 0.2em;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: '';
  flex: none;
  width: 28px; height: 28px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 12px 2.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 2.5px 12px no-repeat;
  transition: transform var(--dur-3) var(--ease-spring), background-color var(--dur-2);
}
.accordion details[open] > summary::after { transform: rotate(135deg); background-color: var(--yellow); }
.accordion summary:hover { color: var(--blue-ink); }
.accordion .accordion__body { padding: 0 0.2em var(--space-m); max-width: var(--measure); color: var(--ink-2); }
.accordion .accordion__body > * + * { margin-top: 0.8em; }

/* Marquee ---------------------------------------------------------------- */
.marquee { position: relative; overflow: hidden; border-block: 2px solid var(--ink); background: var(--band); color: var(--on-band); }
.marquee__track { display: flex; width: max-content; gap: 3rem; padding: 0.7rem 0; animation: marquee 60s linear infinite; }
.marquee.is-paused .marquee__track { animation-play-state: paused; }
.marquee__item { display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.05em; white-space: nowrap; }
.marquee__item b { color: var(--yellow); font-weight: 700; }
.marquee__toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  z-index: 2;
  background: var(--band); color: var(--on-band);
  border: 2px solid var(--on-band); border-radius: 999px;
  min-height: 32px; padding: 0 0.8em;
  font: 700 var(--step--2) var(--font-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
}
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { :root:not([data-motion='full']) .marquee__track { animation: none; flex-wrap: wrap; width: auto; } }
:root[data-motion='reduce'] .marquee__track { animation: none; flex-wrap: wrap; width: auto; }

/* Dividers --------------------------------------------------------------- */
.torn-top, .torn-bottom { position: relative; }
.torn-bottom::after, .torn-top::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 16px;
  background: inherit;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 16' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1200 V10 L1180 11 L1164 13 L1147 8 L1131 7 L1118 6 L1100 8 L1086 12 L1070 7 L1050 7 L1043 11 L1036 14 L1029 5 L1010 6 L995 10 L980 9 L964 10 L944 13 L923 10 L915 12 L904 9 L882 11 L861 13 L841 8 L824 14 L804 4 L792 5 L784 12 L771 4 L763 12 L743 11 L722 14 L706 10 L691 9 L682 12 L663 8 L645 15 L627 7 L614 8 L598 10 L585 11 L578 16 L556 6 L549 13 L540 10 L521 5 L511 9 L490 9 L471 10 L462 13 L454 8 L444 16 L437 11 L429 12 L416 15 L395 14 L380 8 L373 13 L364 9 L347 15 L335 11 L315 9 L307 15 L297 11 L283 10 L277 14 L263 13 L253 9 L238 15 L221 12 L199 9 L189 11 L179 11 L164 15 L155 5 L145 12 L134 5 L122 11 L111 12 L98 12 L85 12 L66 10 L56 5 L37 12 L30 7 L9 7 L0 13 Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 16' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1200 V10 L1180 11 L1164 13 L1147 8 L1131 7 L1118 6 L1100 8 L1086 12 L1070 7 L1050 7 L1043 11 L1036 14 L1029 5 L1010 6 L995 10 L980 9 L964 10 L944 13 L923 10 L915 12 L904 9 L882 11 L861 13 L841 8 L824 14 L804 4 L792 5 L784 12 L771 4 L763 12 L743 11 L722 14 L706 10 L691 9 L682 12 L663 8 L645 15 L627 7 L614 8 L598 10 L585 11 L578 16 L556 6 L549 13 L540 10 L521 5 L511 9 L490 9 L471 10 L462 13 L454 8 L444 16 L437 11 L429 12 L416 15 L395 14 L380 8 L373 13 L364 9 L347 15 L335 11 L315 9 L307 15 L297 11 L283 10 L277 14 L263 13 L253 9 L238 15 L221 12 L199 9 L189 11 L179 11 L164 15 L155 5 L145 12 L134 5 L122 11 L111 12 L98 12 L85 12 L66 10 L56 5 L37 12 L30 7 L9 7 L0 13 Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}
.torn-bottom::after { top: 100%; }
.torn-top::before { bottom: 100%; transform: scaleY(-1); }

.dashed-rule { border: 0; border-top: 2px dashed var(--rule-strong); margin: var(--space-l) 0; }

/* Confetti pieces (spawned by JS) */
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 950; overflow: hidden; }
.confetti-bit { position: absolute; top: -20px; width: 10px; height: 14px; will-change: transform; }

/* Badge stamps in the member passport */
.badge-stamp {
  display: grid;
  place-items: center;
  text-align: center;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px dashed var(--rule-strong);
  padding: 0.8rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.2;
}
.badge-stamp.is-earned {
  border: 3px double var(--pink-ink);
  color: var(--pink-ink);
  background: var(--pink-soft);
  transform: rotate(var(--rot, -6deg));
}

/* assets/css/books.css */
/* ==========================================================================
   Book objects: procedural covers, spines, shelves, wrapped mystery books,
   clue tags and Dewey the dog. No cover images: every cover is printed in
   CSS from the book's title hash, riso style.
   ========================================================================== */

/* Palettes (background / ink / accent) ----------------------------------- */
.pal-0 { --bk-bg: #2b4ea2; --bk-fg: #ffffff; --bk-ac: #ff48b0; }
.pal-1 { --bk-bg: #ff48b0; --bk-fg: #1b1a2e; --bk-ac: #2b4ea2; }
.pal-2 { --bk-bg: #ffe34d; --bk-fg: #1b1a2e; --bk-ac: #2b4ea2; }
.pal-3 { --bk-bg: #00a95c; --bk-fg: #10131f; --bk-ac: #ffe34d; }
.pal-4 { --bk-bg: #1b1a2e; --bk-fg: #ffe34d; --bk-ac: #ff48b0; }
.pal-5 { --bk-bg: #d4b081; --bk-fg: #1b1a2e; --bk-ac: #b0106a; }
.pal-6 { --bk-bg: #f4f2ea; --bk-fg: #2b4ea2; --bk-ac: #ff48b0; }
.pal-7 { --bk-bg: #b9a6ff; --bk-fg: #1b1a2e; --bk-ac: #00a95c; }
.pal-8 { --bk-bg: #ff7a45; --bk-fg: #1b1a2e; --bk-ac: #2b4ea2; }
.pal-9 { --bk-bg: #8fd3ff; --bk-fg: #1b1a2e; --bk-ac: #b0106a; }

/* Covers ----------------------------------------------------------------- */
.cover {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 2 / 3;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background: var(--bk-bg);
  color: var(--bk-fg);
  border-radius: 3px 8px 8px 3px;
  box-shadow: inset 6px 0 0 rgba(0, 0, 0, 0.12), inset 7px 0 0 rgba(255, 255, 255, 0.18), var(--shadow-paper);
  container-type: inline-size;
  isolation: isolate;
}
.cover__art { position: absolute; inset: 0; z-index: -1; }
.cover__band { position: relative; padding: 9cqw 9cqw 7cqw 12cqw; display: flex; flex-direction: column; gap: 3cqw; }
.cover__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 78%;
  font-size: clamp(0.8rem, 13cqw, 2.6rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.cover__title.is-long { font-size: clamp(0.7rem, 10cqw, 2rem); }
.cover__author { font-family: var(--font-mono); font-size: clamp(0.55rem, 6.5cqw, 1rem); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.92; }
.cover__foot { position: relative; padding: 0 9cqw 8cqw 12cqw; display: flex; justify-content: space-between; align-items: flex-end; font-family: var(--font-mono); font-size: clamp(0.5rem, 5.5cqw, 0.8rem); letter-spacing: 0.1em; text-transform: uppercase; }
.cover__seal {
  width: 22cqw; height: 22cqw;
  border-radius: 50%;
  border: 0.8cqw solid currentColor;
  display: grid; place-items: center;
  font-weight: 700; font-size: 6cqw;
  transform: rotate(-12deg);
}

/* Cover patterns, printed with the accent drum. */
.pat-0 .cover__art { background: radial-gradient(circle, var(--bk-ac) 22%, transparent 24%) 0 0 / 9cqw 9cqw; opacity: 0.55; mask-image: linear-gradient(to top, #000 15%, transparent 75%); -webkit-mask-image: linear-gradient(to top, #000 15%, transparent 75%); }
.pat-1 .cover__art { background: repeating-linear-gradient(-45deg, var(--bk-ac) 0 4cqw, transparent 4cqw 10cqw); opacity: 0.5; clip-path: polygon(0 55%, 100% 35%, 100% 100%, 0 100%); }
.pat-2 .cover__art { background: radial-gradient(circle at 70% 72%, var(--bk-ac) 0 30cqw, transparent calc(30cqw + 1px)); mix-blend-mode: multiply; }
.pat-3 .cover__art { background: linear-gradient(var(--bk-ac) 0 0) 50% 78% / 76% 1.2cqw no-repeat, linear-gradient(var(--bk-ac) 0 0) 50% 84% / 76% 1.2cqw no-repeat, linear-gradient(var(--bk-ac) 0 0) 50% 90% / 76% 1.2cqw no-repeat; }
.pat-4 .cover__art { background: conic-gradient(from 200deg at 50% 100%, var(--bk-ac) 0 20deg, transparent 20deg 40deg, var(--bk-ac) 40deg 60deg, transparent 60deg 80deg, var(--bk-ac) 80deg 100deg, transparent 100deg 120deg, var(--bk-ac) 120deg 140deg, transparent 140deg); opacity: 0.55; clip-path: inset(45% 0 0 0); }
.pat-5 .cover__art { background: radial-gradient(ellipse 42% 28% at 50% 100%, var(--bk-bg) 0 97%, transparent 100%), radial-gradient(ellipse 62% 42% at 50% 100%, var(--bk-ac) 0 97%, transparent 100%); }
.pat-6 .cover__art { background: linear-gradient(115deg, transparent 58%, var(--bk-ac) 58% 66%, transparent 66% 72%, var(--bk-ac) 72% 76%, transparent 76%); opacity: 0.85; }
.pat-7 .cover__art { background: radial-gradient(circle at 30% 80%, transparent 12cqw, var(--bk-ac) calc(12cqw + 1px) 15cqw, transparent calc(15cqw + 1px) 24cqw, var(--bk-ac) calc(24cqw + 1px) 27cqw, transparent calc(27cqw + 1px)); opacity: 0.8; }

/* Misregistered shadow block behind the title band for the riso look. */
.cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.12), transparent 6%);
  pointer-events: none;
}

.cover--sm .cover__band { padding: 8cqw 8cqw 6cqw 11cqw; }
.cover-grade {
  position: absolute;
  top: 6px; right: 6px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.1em 0.45em;
  background: var(--card);
  color: var(--ink);
  border-radius: 4px;
  border: 1.5px solid var(--ink);
}

/* Spines & shelves ------------------------------------------------------- */
.shelf {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  padding: 18px 14px 0;
  min-height: 210px;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
}
.shelf::after {
  content: '';
  position: sticky;
  left: 0;
}
.shelf-board {
  height: 18px;
  margin-top: -2px;
  background: var(--kraft-2);
  border: 2px solid var(--ink);
  border-radius: 3px;
  box-shadow: 0 8px 0 -2px color-mix(in srgb, var(--ink) 20%, transparent);
}
.spine {
  --h: 168px;
  --w: 38px;
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: var(--h);
  width: var(--w);
  padding: 10px 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  background: var(--bk-bg);
  color: var(--bk-fg);
  border: 2px solid var(--ink);
  border-radius: 3px 3px 2px 2px;
  font-family: var(--font-display);
  font-stretch: 80%;
  font-weight: 750;
  font-size: 0.84rem;
  line-height: 1;
  cursor: pointer;
  transform-origin: bottom center;
  transition: transform var(--dur-3) var(--ease-spring), box-shadow var(--dur-2);
  overflow: hidden;
}
.spine::before, .spine::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  background: var(--bk-ac);
}
.spine::before { top: 8px; }
.spine::after { bottom: 8px; }
.spine__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-height: calc(var(--h) - 60px); }
.spine__author { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.9; white-space: nowrap; }
.spine:hover, .spine:focus-visible { transform: translateY(-14px) rotate(-1.5deg); box-shadow: 0 14px 14px -10px rgba(0, 0, 0, 0.4); }
.spine:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.spine.is-leaning { transform: rotate(-7deg); margin-inline: 8px 4px; }
.spine.is-leaning:hover { transform: translateY(-10px) rotate(-9deg); }
.spine.is-mystery { background: repeating-linear-gradient(45deg, var(--kraft) 0 8px, var(--kraft-2) 8px 16px); color: var(--kraft-ink); }
.spine.is-released { opacity: 0.45; }
.sh-0 { --h: 150px; } .sh-1 { --h: 168px; } .sh-2 { --h: 184px; } .sh-3 { --h: 138px; }
.sw-0 { --w: 34px; } .sw-1 { --w: 40px; } .sw-2 { --w: 48px; }

/* Wrapped mystery books -------------------------------------------------- */
.mystery {
  --wrap-bg: var(--pink);
  --wrap-ac: var(--blue);
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4.1;
  padding: 0;
  border: 2.5px solid #1b1a2e;
  border-radius: 6px;
  background: var(--wrap-bg);
  box-shadow: 5px 6px 0 var(--shadow-ink);
  cursor: pointer;
  transition: transform var(--dur-3) var(--ease-spring);
  color: var(--ink);
}
.mystery:hover { transform: translateY(-6px) rotate(var(--hover-rot, -2deg)); }
.mystery:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
.mystery__paper { position: absolute; inset: 0; border-radius: 4px; overflow: hidden; }
.wrap-0 { --wrap-bg: #ff48b0; --wrap-ac: #2b4ea2; }
.wrap-0 .mystery__paper { background: radial-gradient(circle, var(--wrap-ac) 18%, transparent 20%) 0 0 / 16px 16px, radial-gradient(circle, var(--wrap-ac) 18%, transparent 20%) 8px 8px / 16px 16px; opacity: 0.55; }
.wrap-1 { --wrap-bg: #2b4ea2; --wrap-ac: #ffe34d; }
.wrap-1 .mystery__paper { background: repeating-linear-gradient(-35deg, var(--wrap-ac) 0 6px, transparent 6px 22px); opacity: 0.8; }
.wrap-2 { --wrap-bg: #d4b081; --wrap-ac: #1b1a2e; }
.wrap-2 .mystery__paper {
  background:
    radial-gradient(circle at 20% 30%, transparent 9px, var(--wrap-ac) 10px 11.5px, transparent 12.5px) 0 0 / 46px 46px,
    radial-gradient(circle at 70% 75%, var(--wrap-ac) 2px, transparent 3px) 0 0 / 23px 23px;
  opacity: 0.4;
}
.wrap-3 { --wrap-bg: #ffe34d; --wrap-ac: #ff48b0; }
.wrap-3 .mystery__paper { background: linear-gradient(90deg, var(--wrap-ac) 0 3px, transparent 3px) 0 0 / 26px 26px, linear-gradient(var(--wrap-ac) 0 3px, transparent 3px) 0 0 / 26px 26px; opacity: 0.6; }
.wrap-4 { --wrap-bg: #00a95c; --wrap-ac: #fafaf7; }
.wrap-4 .mystery__paper { background: repeating-radial-gradient(circle at 0 100%, transparent 0 14px, var(--wrap-ac) 14px 17px); opacity: 0.45; }

/* Twine, tied in a cross with a bow. */
.mystery__twine { position: absolute; inset: 0; pointer-events: none; }
.mystery__twine::before, .mystery__twine::after {
  content: '';
  position: absolute;
  background: repeating-linear-gradient(90deg, #f6ead2 0 3px, #c79b5d 3px 5px);
  box-shadow: 0 0 0 1px rgba(27, 26, 46, 0.4);
}
.mystery__twine::before { left: 0; right: 0; top: 58%; height: 5px; }
.mystery__twine::after { top: 0; bottom: 0; left: 36%; width: 5px; background: repeating-linear-gradient(0deg, #f6ead2 0 3px, #c79b5d 3px 5px); }
.mystery__bow { position: absolute; left: 36%; top: 58%; width: 0; height: 0; z-index: 2; }
.mystery__bow::before, .mystery__bow::after {
  content: '';
  position: absolute;
  width: 26px; height: 16px;
  top: -6px;
  border: 4px solid #e8d2a8;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(27, 26, 46, 0.4);
}
.mystery__bow::before { right: 0; transform: rotate(-20deg); transform-origin: right center; }
.mystery__bow::after { left: 5px; transform: rotate(20deg); transform-origin: left center; }

/* Clue tag hanging off the twine. */
.clue-tag {
  position: absolute;
  z-index: 3;
  left: calc(36% + 10px);
  top: calc(58% + 10px);
  width: min(160px, 62%);
  perspective: 600px;
  transform: rotate(var(--tag-rot, 8deg));
  transform-origin: 8px 8px;
  transition: transform var(--dur-3) var(--ease-spring);
}
.mystery:hover .clue-tag { transform: rotate(calc(var(--tag-rot, 8deg) - 10deg)); }
.clue-tag__inner {
  position: relative;
  display: grid;
  transform-style: preserve-3d;
  transition: transform 600ms var(--ease-spring);
}
.mystery.is-flipped .clue-tag__inner { transform: rotateY(180deg); }
.clue-tag__face {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  padding: 0.6em 0.7em 0.65em 1.6em;
  background: #fbf8f0;
  color: #1b1a2e;
  border: 2px solid #1b1a2e;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
  border-radius: 0 6px 6px 0;
  text-align: left;
  min-height: 4.2em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1em;
}
.clue-tag__face::before {
  content: '';
  position: absolute;
  left: 9px; top: 50%;
  width: 8px; height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  border: 2px solid #1b1a2e;
  background: var(--wrap-bg, #ff48b0);
}
.clue-tag__back { transform: rotateY(180deg); background: #fff7c7; }
.clue-tag__no { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #636179; }
.clue-tag__text { font-family: var(--font-hand); font-size: 1.3rem; line-height: 0.95; color: #2b4ea2; }
:root[data-readable='true'] .clue-tag__text { font-size: 0.85rem; line-height: 1.2; }
.clue-tag__role { font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; line-height: 1; letter-spacing: -0.01em; }

.mystery.is-wiggling { animation: wiggle 500ms var(--ease-spring); }
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-4deg) translateY(-6px); }
  45% { transform: rotate(3deg); }
  70% { transform: rotate(-1.5deg); }
}

/* Dewey ------------------------------------------------------------------ */
.dewey { width: 100%; height: auto; overflow: visible; }
.dewey__misreg { fill: var(--pink); }
.dewey__head { fill: var(--blue); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.dewey__ear { fill: color-mix(in srgb, var(--blue) 70%, var(--ink)); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; transform-origin: 28px 44px; transition: transform var(--dur-3) var(--ease-spring); }
.dewey__fold { fill: var(--pink); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; transform-origin: 91px 33px; transition: transform var(--dur-3) var(--ease-spring); }
.dewey__snout { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; }
.dewey__eye { fill: var(--ink); transform-box: fill-box; transform-origin: center; animation: blink 5.5s infinite; }
.dewey__glint { fill: #fff; }
.dewey__nose { fill: var(--ink); }
.dewey__line { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.dewey__tongue { fill: var(--pink); stroke: var(--ink); stroke-width: 2; }
.dewey__brow { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; transition: transform var(--dur-3) var(--ease-spring); transform-box: fill-box; transform-origin: center; }
.dewey__blush { fill: var(--pink); opacity: 0.45; }
.dewey:hover .dewey__ear, .dewey.is-happy .dewey__ear { transform: rotate(-14deg); }
.dewey:hover .dewey__fold { transform: rotate(6deg); }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
.dewey--bob { animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-5px) rotate(1.5deg); } }

.dewey-loader { display: inline-flex; flex-direction: column; align-items: center; gap: 0.5rem; color: var(--ink-2); font-family: var(--font-hand); font-size: 1.5rem; }
.dewey-loader .dewey { width: 64px; animation: sniff 0.9s ease-in-out infinite; }
@keyframes sniff { 50% { transform: translateY(-3px) rotate(-4deg); } }

/* assets/css/site.css */
/* ==========================================================================
   Site chrome: announcement bar, header, nav, lamp switch, drawer, footer,
   reading-comfort panel and the demo-mode bar.
   ========================================================================== */
body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: var(--paper);
}

/* Announcement bar ------------------------------------------------------- */
.announce { background: var(--pink); color: #1b1a2e; font-family: var(--font-ui); font-weight: 650; font-size: var(--step--1); }
.announce__inner { display: flex; align-items: center; justify-content: center; gap: var(--space-s); min-height: 40px; padding-block: 0.35rem; text-align: center; }
.announce a { color: #1b1a2e; font-weight: 800; }
.announce__close { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: #1b1a2e; font-size: 1.3rem; line-height: 1; }
.announce__close:hover { background: rgba(0, 0, 0, 0.1); }

/* Header ----------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: var(--paper);
  transition: box-shadow var(--dur-2);
}
.site-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 12px;
  background: var(--paper);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 16' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1200 V10 L1180 11 L1164 13 L1147 8 L1131 7 L1118 6 L1100 8 L1086 12 L1070 7 L1050 7 L1043 11 L1036 14 L1029 5 L1010 6 L995 10 L980 9 L964 10 L944 13 L923 10 L915 12 L904 9 L882 11 L861 13 L841 8 L824 14 L804 4 L792 5 L784 12 L771 4 L763 12 L743 11 L722 14 L706 10 L691 9 L682 12 L663 8 L645 15 L627 7 L614 8 L598 10 L585 11 L578 16 L556 6 L549 13 L540 10 L521 5 L511 9 L490 9 L471 10 L462 13 L454 8 L444 16 L437 11 L429 12 L416 15 L395 14 L380 8 L373 13 L364 9 L347 15 L335 11 L315 9 L307 15 L297 11 L283 10 L277 14 L263 13 L253 9 L238 15 L221 12 L199 9 L189 11 L179 11 L164 15 L155 5 L145 12 L134 5 L122 11 L111 12 L98 12 L85 12 L66 10 L56 5 L37 12 L30 7 L9 7 L0 13 Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 16' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1200 V10 L1180 11 L1164 13 L1147 8 L1131 7 L1118 6 L1100 8 L1086 12 L1070 7 L1050 7 L1043 11 L1036 14 L1029 5 L1010 6 L995 10 L980 9 L964 10 L944 13 L923 10 L915 12 L904 9 L882 11 L861 13 L841 8 L824 14 L804 4 L792 5 L784 12 L771 4 L763 12 L743 11 L722 14 L706 10 L691 9 L682 12 L663 8 L645 15 L627 7 L614 8 L598 10 L585 11 L578 16 L556 6 L549 13 L540 10 L521 5 L511 9 L490 9 L471 10 L462 13 L454 8 L444 16 L437 11 L429 12 L416 15 L395 14 L380 8 L373 13 L364 9 L347 15 L335 11 L315 9 L307 15 L297 11 L283 10 L277 14 L263 13 L253 9 L238 15 L221 12 L199 9 L189 11 L179 11 L164 15 L155 5 L145 12 L134 5 L122 11 L111 12 L98 12 L85 12 L66 10 L56 5 L37 12 L30 7 L9 7 L0 13 Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.06));
  pointer-events: none;
}
.site-header__inner { display: flex; align-items: center; gap: var(--space-m); min-height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink); text-decoration: none; flex: none; }
.brand:hover { text-decoration: none; }
.brand__mark { width: 44px; height: 44px; transition: transform var(--dur-3) var(--ease-spring); }
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.06); }
.brand__word { font-family: var(--font-display); font-weight: 800; font-stretch: 78%; font-size: 1.12rem; line-height: 0.9; letter-spacing: -0.02em; text-transform: uppercase; }
.brand__word span { display: block; color: var(--pink-ink); }

.nav { margin-inline: auto; }
.nav__list { display: flex; align-items: center; gap: 0.15rem; }
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.8rem;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-weight: 650;
  font-size: var(--step--1);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}
.nav__link:hover { background: var(--paper-2); color: var(--ink); text-decoration: none; }
.nav__link[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0.8rem; right: 0.8rem; bottom: 6px;
  height: 7px;
  background: var(--pink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 25 2, 50 9, 75 4 S 95 5, 98 6' stroke='black' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 25 2, 50 9, 75 4 S 95 5, 98 6' stroke='black' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.site-header__actions { display: flex; align-items: center; gap: 0.35rem; flex: none; margin-left: auto; }
.nav + .site-header__actions { margin-left: 0; }
.nav-toggle { display: none; }
.account-pill {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 44px; padding: 0 0.8rem 0 0.35rem;
  border: 2px solid var(--ink); border-radius: 999px;
  font: 700 var(--step--1) var(--font-ui);
  color: var(--ink); text-decoration: none; background: var(--card);
}
.account-pill:hover { text-decoration: none; background: var(--yellow-soft); color: var(--ink); }
.account-pill__avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--pink); color: #1b1a2e; font-size: 0.8rem; font-weight: 800; }

@media (max-width: 1080px) {
  .nav, .site-header__actions .hide-md { display: none; }
  .nav-toggle { display: inline-grid; }
}
@media (max-width: 560px) {
  .site-header__actions .hide-sm { display: none; }
  .brand__word { font-size: 1rem; }
  .brand__mark { width: 38px; height: 38px; }
}

/* Lamp pull-cord: toggles "lights off" (dark mode) ----------------------- */
.lamp {
  position: relative;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  display: grid;
  place-items: start center;
}
.lamp__cord {
  position: absolute;
  top: -12px; left: 50%;
  width: 2px; height: 32px;
  margin-left: -1px;
  background: repeating-linear-gradient(to bottom, var(--ink-2) 0 3px, transparent 3px 5px);
  transform-origin: top center;
  transition: transform var(--dur-3) var(--ease-spring);
}
.lamp__pull {
  position: absolute;
  top: 18px; left: 50%;
  width: 14px; height: 20px;
  margin-left: -7px;
  border: 2.5px solid var(--ink);
  border-radius: 7px 7px 9px 9px;
  background: var(--yellow);
  transition: transform var(--dur-3) var(--ease-spring), background var(--dur-2);
}
.lamp__pull::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -8px;
  width: 8px; height: 8px;
  margin-left: -4px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 1.5px, transparent 1.5px 3px);
}
.lamp[aria-pressed='true'] .lamp__pull { background: var(--blue); }
.lamp:hover .lamp__cord { transform: rotate(6deg); }
.lamp:hover .lamp__pull { transform: translateX(4px) rotate(-6deg); }
.lamp.is-pulling .lamp__cord { animation: cord 520ms var(--ease-spring); }
.lamp.is-pulling .lamp__pull { animation: pull 520ms var(--ease-spring); }
@keyframes cord { 40% { transform: scaleY(1.25); } }
@keyframes pull { 40% { transform: translateY(12px); } }
/* A little handwritten tag; sits above the header's torn edge so it is never
   clipped, on its own scrap so it stays legible over the page below. */
.lamp__tip {
  position: absolute;
  z-index: 2;
  top: 48px; right: -10px;
  padding: 0.05em 0.5em 0.15em;
  font-family: var(--font-hand);
  font-size: 1.25rem;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--blue-ink);
  background: var(--card);
  border-radius: 3px 5px 4px 6px;
  box-shadow: var(--shadow-paper);
  opacity: 0;
  transform: translateY(-4px) rotate(-6deg);
  transform-origin: 80% 0;
  transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-spring);
  pointer-events: none;
}
.lamp:hover .lamp__tip, .lamp:focus-visible .lamp__tip { opacity: 1; transform: rotate(-6deg); }
:root[data-readable='true'] .lamp__tip { font-size: 0.8rem; }

/* Theme switch reveal (View Transitions) */
::view-transition-new(root) { animation: none; }
::view-transition-old(root) { animation: none; }
.lamp-reveal::view-transition-new(root) { animation: lamp-reveal 600ms var(--ease-out); }
@keyframes lamp-reveal { from { clip-path: circle(0 at var(--lamp-x, 90%) var(--lamp-y, 0%)); } to { clip-path: circle(150% at var(--lamp-x, 90%) var(--lamp-y, 0%)); } }

/* Drawer (mobile nav) ---------------------------------------------------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  justify-content: flex-end;
  background: rgba(13, 15, 33, 0.5);
}
.drawer__panel {
  width: min(380px, 100%);
  height: 100%;
  overflow-y: auto;
  background: var(--paper);
  border-left: 2px solid var(--ink);
  padding: calc(env(safe-area-inset-top, 0px) + var(--space-s)) max(20px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + var(--space-l)) 20px;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  animation: drawer-in var(--dur-3) var(--ease-out);
}
@keyframes drawer-in { from { transform: translateX(40px); opacity: 0; } }
.drawer__head { display: flex; align-items: center; justify-content: space-between; }
.drawer__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  font-family: var(--font-display);
  font-weight: 750;
  font-size: var(--step-2);
  font-stretch: 85%;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1.5px dashed var(--rule-strong);
}
.drawer__nav a:hover { color: var(--blue-ink); }
.drawer__nav a[aria-current='page'] { color: var(--pink-ink); }

/* Footer ----------------------------------------------------------------- */
.site-footer {
  position: relative;
  margin-top: var(--space-2xl);
  background: var(--band);
  color: var(--on-band);
  padding-block: var(--space-2xl) calc(var(--space-l) + env(safe-area-inset-bottom, 0px));
}
.site-footer::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 14px;
  background: var(--band);
  transform: scaleY(-1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 16' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1200 V10 L1180 11 L1164 13 L1147 8 L1131 7 L1118 6 L1100 8 L1086 12 L1070 7 L1050 7 L1043 11 L1036 14 L1029 5 L1010 6 L995 10 L980 9 L964 10 L944 13 L923 10 L915 12 L904 9 L882 11 L861 13 L841 8 L824 14 L804 4 L792 5 L784 12 L771 4 L763 12 L743 11 L722 14 L706 10 L691 9 L682 12 L663 8 L645 15 L627 7 L614 8 L598 10 L585 11 L578 16 L556 6 L549 13 L540 10 L521 5 L511 9 L490 9 L471 10 L462 13 L454 8 L444 16 L437 11 L429 12 L416 15 L395 14 L380 8 L373 13 L364 9 L347 15 L335 11 L315 9 L307 15 L297 11 L283 10 L277 14 L263 13 L253 9 L238 15 L221 12 L199 9 L189 11 L179 11 L164 15 L155 5 L145 12 L134 5 L122 11 L111 12 L98 12 L85 12 L66 10 L56 5 L37 12 L30 7 L9 7 L0 13 Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 16' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1200 V10 L1180 11 L1164 13 L1147 8 L1131 7 L1118 6 L1100 8 L1086 12 L1070 7 L1050 7 L1043 11 L1036 14 L1029 5 L1010 6 L995 10 L980 9 L964 10 L944 13 L923 10 L915 12 L904 9 L882 11 L861 13 L841 8 L824 14 L804 4 L792 5 L784 12 L771 4 L763 12 L743 11 L722 14 L706 10 L691 9 L682 12 L663 8 L645 15 L627 7 L614 8 L598 10 L585 11 L578 16 L556 6 L549 13 L540 10 L521 5 L511 9 L490 9 L471 10 L462 13 L454 8 L444 16 L437 11 L429 12 L416 15 L395 14 L380 8 L373 13 L364 9 L347 15 L335 11 L315 9 L307 15 L297 11 L283 10 L277 14 L263 13 L253 9 L238 15 L221 12 L199 9 L189 11 L179 11 L164 15 L155 5 L145 12 L134 5 L122 11 L111 12 L98 12 L85 12 L66 10 L56 5 L37 12 L30 7 L9 7 L0 13 Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}
.site-footer a { color: var(--on-band); text-decoration-color: color-mix(in srgb, var(--on-band) 40%, transparent); }
.site-footer a:hover { color: var(--yellow); text-decoration-color: var(--yellow); }
.site-footer :focus-visible { outline-color: var(--yellow); }
/* Brand and newsletter across the top, then four link columns (two on phones). */
.footer-grid { display: grid; gap: var(--space-xl) var(--space-m); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-brand { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); column-gap: var(--space-xl); align-items: end; padding-bottom: var(--space-l); border-bottom: 1.5px dashed color-mix(in srgb, var(--on-band) 30%, transparent); }
  .footer-brand form { grid-column: 2; grid-row: 1 / span 2; }
}
.footer-brand .brand { color: var(--on-band); }
.footer-brand .brand__word span { color: var(--pink); }
.footer-brand p { color: color-mix(in srgb, var(--on-band) 78%, transparent); max-width: 34ch; margin-top: var(--space-s); font-size: var(--step--1); }
.footer-col h2 { font-family: var(--font-mono); font-size: var(--step--2); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yellow); margin-bottom: var(--space-s); font-stretch: 100%; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.15rem; }
.footer-col a { display: inline-flex; min-height: 34px; align-items: center; font-family: var(--font-ui); font-weight: 600; font-size: var(--step--1); text-decoration: none; }
.footer-col a:hover { text-decoration: underline; }
.footer-col .text-btn { color: var(--on-band); font-family: var(--font-ui); font-weight: 600; font-size: var(--step--1); text-decoration: none; min-height: 34px; text-align: left; }
.footer-col .text-btn:hover { color: var(--yellow); text-decoration: underline; }
.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-s);
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1.5px dashed color-mix(in srgb, var(--on-band) 30%, transparent);
  font-size: var(--step--2);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--on-band) 70%, transparent);
}
/* External references get a small arrow (announced as nothing; the link text
   already says where it goes). */
.footer-refs a { display: inline-block; min-height: 0; padding-block: 0.4rem; line-height: 1.35; }
.footer-refs a::after { content: '\2197'; content: '\2197' / ''; margin-left: 0.3em; font-size: 0.85em; opacity: 0.7; }
.footer-base p { margin: 0; }
.footer-base a { text-decoration: underline; text-underline-offset: 0.2em; }
.footer-sign {
  margin: var(--space-l) 0 0;
  text-align: center;
  font-family: var(--font-hand);
  font-size: var(--step-2);
  line-height: 1.1;
  color: var(--on-band);
  transform: rotate(-1.5deg);
}
.footer-sign span { color: var(--pink); }
.footer-stamp { --stamp-color: var(--yellow); }
.footer-label { color: var(--yellow); }
.footer-brand form { margin-top: var(--space-m); }
.site-footer .input { background: color-mix(in srgb, var(--on-band) 8%, transparent); color: var(--on-band); border-color: color-mix(in srgb, var(--on-band) 45%, transparent); }
.site-footer .input::placeholder { color: color-mix(in srgb, var(--on-band) 60%, transparent); }
.site-footer .field__error { color: #ffb3ad; }

/* Logo mark */
.logo__misreg { fill: var(--pink); }
.logo__cover { fill: var(--blue); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.site-footer .logo__cover, .site-footer .logo__fold { stroke: var(--on-band); }
.logo__spine { fill: none; stroke: var(--on-blue); stroke-opacity: 0.35; stroke-width: 2; }
.logo__fold { fill: var(--pink); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.logo__eye, .logo__nose { fill: var(--on-blue); }
.logo__mouth { fill: none; stroke: var(--on-blue); stroke-width: 2; stroke-linecap: round; }

/* Reading comfort panel -------------------------------------------------- */
.comfort-grid { display: grid; gap: var(--space-m); }
.comfort-grid .seg { width: 100%; }
.comfort-preview {
  padding: var(--space-s);
  border: 2px dashed var(--rule-strong);
  border-radius: var(--radius-m);
  background: var(--paper);
}

/* Demo bar --------------------------------------------------------------- */
.demo-bar {
  position: relative;
  z-index: 55;
  background: var(--band);
  color: var(--on-band);
  font-family: var(--font-ui);
  font-size: var(--step--1);
}
.demo-bar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding-block: 0.45rem; }
.demo-bar__label { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 650; }
.demo-bar__label .stamp { --stamp-color: var(--yellow); --stamp-rot: -3deg; font-size: 0.68rem; padding: 0.15em 0.5em; border-width: 2px; }
.demo-bar__roles { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.demo-bar button {
  min-height: 34px;
  padding: 0 0.8rem;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--on-band) 50%, transparent);
  background: transparent;
  color: var(--on-band);
  font: 700 var(--step--2) var(--font-ui);
  letter-spacing: 0.02em;
}
.demo-bar button[aria-pressed='true'] { background: var(--yellow); color: #1b1a2e; border-color: var(--yellow); }
.demo-bar button:hover { border-color: var(--yellow); }
.demo-bar :focus-visible { outline-color: var(--yellow); }
.demo-bar__short { display: none; }
/* Phones: one short line, then the controls in a single swipeable row. */
@media (max-width: 700px) {
  .demo-bar__long { display: none; }
  .demo-bar__short { display: inline; }
  .demo-bar__inner { gap: 0.35rem; padding-block: 0.4rem; }
  .demo-bar__roles {
    flex-wrap: nowrap;
    max-width: calc(100% + 4px);
    overflow-x: auto;
    padding: 3px 2.5rem 3px 3px;
    margin: -3px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .demo-bar__roles::-webkit-scrollbar { display: none; }
  .demo-bar button { flex: none; white-space: nowrap; }
}

/* Page header band used by inner pages ----------------------------------- */
.page-head { padding-block: clamp(2.5rem, 2rem + 3vw, 5rem) clamp(1.5rem, 1rem + 2vw, 3rem); position: relative; }
.page-head .lede { margin-top: var(--space-s); }
.page-head__eyebrow { margin-bottom: var(--space-s); }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 0.4em; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--space-s); }
.breadcrumbs a { color: var(--ink-2); }
.breadcrumbs li + li::before { content: '/'; margin-right: 0.4em; color: var(--ink-3); }

.demo-outbox { display: flex; flex-direction: column; gap: var(--space-s); }
.demo-outbox__item { display: flex; flex-direction: column; gap: 0.3rem; padding: var(--space-s); border: 1.5px dashed var(--rule-strong); border-radius: var(--radius-m); background: var(--paper); }
.demo-tips { display: flex; flex-direction: column; gap: 0.7rem; padding-left: 1.1rem; list-style: disc; }
.demo-tips code { background: var(--yellow-soft); padding: 0.05em 0.35em; border-radius: 4px; overflow-wrap: anywhere; }

/* assets/css/pages/account.css */
/* ==========================================================================
   My shelf (account app). Prefix: .ac-
   A library card on top, index tabs down the side, a calm paper panel.
   ========================================================================== */
.ac-main { padding-block: clamp(1.25rem, 1rem + 1.5vw, 2.5rem) var(--space-xl); }
.ac { display: flex; flex-direction: column; gap: var(--space-l); }

/* Library card header ---------------------------------------------------- */
.ac-head__card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'dewey text' 'chips chips';
  align-items: center;
  gap: var(--space-xs) var(--space-m);
  padding: var(--space-m) var(--space-l);
  background:
    linear-gradient(var(--card), var(--card)) 0 0 / 100% 2.4rem no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 calc(1.6rem - 1px), color-mix(in srgb, var(--blue) 14%, transparent) calc(1.6rem - 1px) 1.6rem),
    var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--radius-m);
  box-shadow: 5px 5px 0 var(--pink);
}
.ac-head__card::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 2.4rem;
  border-top: 2px solid color-mix(in srgb, var(--red) 65%, transparent);
}
.ac-head__dewey { grid-area: dewey; width: 76px; }
.ac-head__text { grid-area: text; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.ac-head__title { font-size: var(--step-3); }
.ac-head__chips { grid-area: chips; }
.ac-chipbtn { cursor: pointer; font: inherit; font-family: var(--font-ui); font-weight: 650; font-size: var(--step--1); min-height: 32px; }
.ac-chipbtn .icon { width: 1em; height: 1em; }
@media (min-width: 760px) {
  .ac-head__card { grid-template-columns: auto 1fr auto; grid-template-areas: 'dewey text chips'; }
  .ac-head__chips { justify-content: flex-end; }
}

/* Layout: index tabs + panel ---------------------------------------------- */
.ac-layout { display: grid; grid-template-columns: 1fr; gap: 0; align-items: start; }
.ac-nav { position: relative; z-index: 2; min-width: 0; }
.ac-nav__list {
  position: relative;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 4px 0;
  border-bottom: 2px solid var(--ink);
  scroll-snap-type: x proximity;
}
.ac-nav__list::-webkit-scrollbar { display: none; }
.ac-nav__list li { flex: none; scroll-snap-align: start; }
.ac-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 46px;
  padding: 0.55rem 0.95rem 0.5rem;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--step--1);
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  background: var(--paper-2);
  border: 2px solid var(--rule-strong);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  transition: background var(--dur-2), color var(--dur-2), transform var(--dur-2) var(--ease-out);
}
.ac-tab .icon { width: 1.1em; height: 1.1em; }
.ac-tab:hover { color: var(--ink); background: var(--yellow-soft); text-decoration: none; }
.ac-tab[aria-current='page'] {
  background: var(--card);
  color: var(--ink);
  border-color: var(--ink);
  margin-bottom: -2px;
  padding-bottom: calc(0.5rem + 2px);
}
.ac-tab[aria-current='page'] .icon { color: var(--pink-ink); }
.ac-logout {
  display: none;
  align-items: center;
  gap: 0.45rem;
  margin-top: var(--space-m);
  padding: 0.5rem 0.9rem;
  min-height: 44px;
  background: none;
  border: 0;
  font: 650 var(--step--1) var(--font-ui);
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.ac-logout:hover { color: var(--red-ink); }
.ac-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding: var(--space-l) var(--space-m) var(--space-xl);
  background: var(--card);
  border: 2px solid var(--ink);
  border-top: 0;
  border-radius: 0 0 var(--radius-m) var(--radius-m);
  box-shadow: var(--shadow-paper);
  min-height: 420px;
}
.ac-panel:focus { outline: none; }
.ac-panel > * { min-width: 0; }
@media (max-width: 959px) {
  .ac-nav { display: flex; flex-direction: column-reverse; }
  .ac-logout { display: inline-flex; align-self: flex-end; margin: 0 0 0.3rem; min-height: 36px; padding: 0.3rem 0.4rem; }
}
@media (min-width: 960px) {
  .ac-layout { grid-template-columns: 230px minmax(0, 1fr); }
  .ac-nav { position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 16px); padding-top: var(--space-l); }
  .ac-nav__list { flex-direction: column; gap: 6px; overflow: visible; padding: 0; border: 0; }
  .ac-tab {
    width: calc(100% - 14px);
    margin-left: 14px;
    border: 2px solid var(--rule-strong);
    border-right: 0;
    border-radius: 12px 0 0 12px;
    padding: 0.6rem 1rem;
  }
  .ac-tab:hover { transform: translateX(-4px); }
  .ac-tab[aria-current='page'] {
    position: relative;
    z-index: 3;
    width: calc(100% + 2px);
    margin: 0 -2px 0 0;
    padding: 0.6rem 1rem;
    border-color: var(--ink);
    box-shadow: -4px 4px 0 var(--pink);
    transform: none;
  }
  .ac-logout { display: inline-flex; }
  .ac-panel { border: 2px solid var(--ink); border-radius: var(--radius-m); padding: var(--space-xl) clamp(1.5rem, 1rem + 2vw, 2.75rem); }
}
.ac-loading { display: grid; place-items: center; min-height: 320px; }

/* Shared panel pieces ------------------------------------------------------ */
.ac-shead { display: flex; flex-direction: column; gap: 0.35rem; max-width: 70ch; }
.ac-shead.cluster { flex-direction: row; max-width: none; }
.ac-section { display: flex; flex-direction: column; gap: var(--space-m); }
.ac-section + .ac-section { padding-top: var(--space-xl); border-top: 2px dashed var(--rule); }
.ac-card {
  min-width: 0;
  padding: var(--space-m);
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-m);
}
.ac-grid2 { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
.ac-grid2 > * { min-width: 0; }
.ac-fs { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.ac-legend { padding: 0; margin-bottom: 0.2rem; font-family: var(--font-ui); font-weight: 750; font-size: var(--step-1); }
.ac-legend .opt, .field__label .opt { font-weight: 500; font-size: var(--step--1); color: var(--ink-3); }
.ac-rows { display: flex; flex-direction: column; }
.ac-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
.ac-row > :first-child { flex: 1 1 14rem; min-width: 0; }
.ac-row:last-child { border-bottom: 0; }
.ac-panel kbd { font-family: var(--font-mono); font-size: 0.85em; padding: 0.05em 0.35em; border: 1.5px solid var(--rule-strong); border-bottom-width: 3px; border-radius: 4px; background: var(--card); }
.ac-panel .seg { max-width: 100%; }

/* Overview ------------------------------------------------------------------ */
.ac-welcome { --pad: var(--space-l); display: grid; gap: var(--space-m); grid-template-columns: 1fr; border: 2px solid var(--ink); }
.ac-welcome__dewey { width: 96px; }
@media (min-width: 700px) { .ac-welcome { grid-template-columns: 110px 1fr; align-items: start; } .ac-welcome__dewey { width: 110px; } }
.ac-welcome__steps { display: flex; flex-direction: column; gap: 0.45rem; padding-left: 1.2rem; list-style: decimal; }
.ac-welcome__steps li::marker { color: var(--pink-ink); font-family: var(--font-mono); font-weight: 700; }

.ac-box__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-s); }
.ac-timeline { --steps: 5; margin-block: var(--space-2xs); }
.ac-box__line { max-width: 70ch; }
.ac-gifts { display: grid; gap: var(--space-l) var(--space-m); grid-template-columns: repeat(auto-fill, minmax(min(100%, 215px), 1fr)); margin-top: var(--space-s); }
.ac-gift { position: relative; display: flex; flex-direction: column; gap: var(--space-s); min-width: 0; }
.ac-gift__stage { position: relative; width: min(100%, 190px); margin-inline: auto; }
.ac-gift__stage .mystery { cursor: default; }
.ac-gift__stage .mystery:hover { transform: none; }
.ac-gift__stage--open .cover { box-shadow: 5px 6px 0 var(--ink); border: 2px solid var(--ink); }
.ac-gift.is-fresh .ac-gift__stage--open { animation: ac-pop var(--dur-4) var(--ease-spring); }
@keyframes ac-pop { from { transform: scale(0.8) rotate(-6deg); opacity: 0; } }
.ac-gift__wrap.is-torn { animation: ac-tear 650ms var(--ease-out) forwards; }
@keyframes ac-tear {
  0% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: none; }
  35% { clip-path: polygon(0 0, 100% 0, 100% 100%, 62% 92%, 45% 100%, 30% 90%, 0 100%); transform: rotate(-3deg); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 8%, 70% 4%, 52% 12%, 34% 3%, 0 10%); transform: translateY(-40px) rotate(-10deg); opacity: 0; }
}
.ac-gift__tag {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: var(--space-s) var(--space-s) var(--space-s) 1.6rem;
  background: #fbf8f0;
  color: #1b1a2e;
  border: 2px solid var(--ink);
  border-radius: 6px;
  min-height: 9rem;
}
.ac-gift__tag::before {
  content: '';
  position: absolute;
  left: 0.55rem; top: 1rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2px solid #1b1a2e;
  background: var(--pink);
}
.ac-gift__tag .muted, .ac-gift__tag .small.muted { color: #47455e; }
.ac-gift__tag .clue-tag__no { color: #636179; }
.ac-gift__tag .btn { --btn-border: #1b1a2e; --btn-shadow: #1b1a2e; }
.ac-gift__tag .btn:not(.btn--primary):not(.btn--ghost) { --btn-bg: #ffffff; --btn-fg: #1b1a2e; --btn-reveal: #ffe34d; }
.ac-gift__tag .btn--ghost { --btn-fg: #1b1a2e; --btn-reveal: #fff6c4; }
.ac-gift__title { font-size: var(--step-1); color: #1b1a2e; line-height: 1.15; }
.ac-gift.is-placeholder { opacity: 0.85; }
.ac-clues { position: relative; min-height: 4.6rem; border-radius: 6px; overflow: hidden; }
.ac-clues__list { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.3rem 0.4rem; }
.ac-clues__list .hand { font-size: 1.4rem; line-height: 1.05; color: #2b4ea2; }
:root[data-readable='true'] .ac-clues__list .hand { font-size: 0.95rem; }
.ac-clues.is-covered::after {
  content: '3 clues inside';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 700 0.8rem var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5b3f1e;
  background: repeating-linear-gradient(45deg, #d4b081 0 10px, #c9a472 10px 20px);
  border: 1.5px dashed rgba(91, 63, 30, 0.45);
  border-radius: 6px;
}
.ac .scratch { position: relative; }
.ac .scratch__foil { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 6px; touch-action: none; cursor: crosshair; z-index: 2; transition: opacity 450ms var(--ease-out); }
.ac .scratch__foil.is-gone { opacity: 0; }
.ac-note { margin: 0; max-width: 560px; }
.ac-note__head { height: calc(var(--cc-line) * 2); display: flex; align-items: flex-end; padding-bottom: 0.35rem; }
.ac-note__text { margin: 0; font-size: 1.6rem; line-height: var(--cc-line); color: var(--blue-ink); }
:root[data-readable='true'] .ac-note__text { font-size: 1rem; }

/* Next box: a shipping label */
.ac-label {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: 0 0 var(--space-m);
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--radius-s);
  box-shadow: 4px 4px 0 var(--ink);
  overflow: hidden;
}
.ac-label__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.55rem var(--space-m);
  background: var(--band);
  color: var(--on-band);
  font: 700 var(--step--2) var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ac-label__body { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-m); padding: 0 var(--space-m); }
.ac-label__date { font-family: var(--font-display); font-size: var(--step-4); font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; font-stretch: 80%; }
.ac-label__count { font-family: var(--font-hand); font-size: 1.8rem; line-height: 1; color: var(--pink-ink); }
:root[data-readable='true'] .ac-label__count { font-size: 1.1rem; }
.ac-label__to { padding: 0.6rem 0.9rem; border: 2px dashed var(--rule-strong); border-radius: var(--radius-s); align-self: flex-start; font-size: var(--step--1); }
.ac-label__fine { padding: 0 var(--space-m); color: var(--ink-2); max-width: 70ch; }
.ac-label__actions { padding: 0 var(--space-m); }
.ac-coming { margin-top: var(--space-s); }
.ac-sched { position: relative; display: flex; gap: var(--space-s); overflow-x: auto; padding: 6px 4px 8px; scrollbar-width: thin; }
.ac-sched__day { flex: none; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; min-width: 5.2rem; }
.ac-sched__stamp {
  --r: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 5rem;
  padding: 0.55rem 0.3rem 0.5rem;
  background: var(--yellow-soft);
  color: var(--ink);
  -webkit-mask: radial-gradient(var(--r), #0000 97%, #000) round calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)), linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
  mask: radial-gradient(var(--r), #0000 97%, #000) round calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)), linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
}
.ac-sched__month { font: 700 var(--step--2) var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.ac-sched__num { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; line-height: 1; font-stretch: 80%; }
.ac-sched__state { font: 700 0.62rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.ac-sched__day.is-skipped .ac-sched__stamp { background: var(--paper-2); color: var(--ink-3); }
.ac-sched__day.is-skipped .ac-sched__num { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--pink); }
.ac-sched__day.is-paused .ac-sched__stamp { background: var(--blue-soft); }

.ac-nudge { display: flex; flex-direction: column; gap: 0.5rem; max-width: 560px; }
.ac-nudge__title { font-family: var(--font-ui); font-weight: 800; font-size: var(--step-1); }
.ac-nudge .btn { --btn-bg: #fff; --btn-fg: #1b1a2e; --btn-border: #1b1a2e; --btn-shadow: #1b1a2e; --btn-reveal: #ffe34d; }
.ac-nudge .btn--ghost { --btn-bg: transparent; --btn-shadow: transparent; --btn-border: transparent; --btn-reveal: #fff6c4; }

.ac-stats { display: flex; flex-direction: column; gap: var(--space-s); background: var(--yellow-soft); border-color: transparent; }
.ac-stats__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--ink); }
.ac-stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--space-m) var(--space-s); margin: 0; }
.ac-stats__grid .stat { flex-direction: column-reverse; justify-content: flex-end; }
.ac-stats__grid dd { margin: 0; font-size: var(--step-2); }
.ac-moneycard { background: var(--green-soft); border-color: transparent; }
.ac-moneycard .text-btn { align-self: flex-start; }
.ac-moneycard__amt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }

.ac-badges { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.ac-badge { display: grid; grid-template-columns: 4.6rem 1fr; gap: 0.7rem; align-items: center; }
.ac-badge .badge-stamp { width: 4.6rem; padding: 0.35rem; font-size: 0.5rem; letter-spacing: 0.02em; overflow-wrap: anywhere; word-break: break-word; }
.ac-badge:nth-child(3n + 1) .badge-stamp.is-earned { --rot: -8deg; }
.ac-badge:nth-child(3n + 2) .badge-stamp.is-earned { --rot: 6deg; }
.ac-badge:nth-child(3n) .badge-stamp.is-earned { --rot: -3deg; }
.ac-badge__text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }

/* Shelf ----------------------------------------------------------------------- */
.ac-shelfbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-s); }
.ac-filter { border: 0; margin: 0; padding: 0; min-width: 0; max-width: 100%; }
.ac-filter .seg label { min-height: 40px; padding: 0.35rem 0.75rem; }
.ac-count { font-family: var(--font-mono); font-size: 0.72rem; opacity: 0.75; }
.ac-sort { width: min(100%, 14rem); }
.ac-bookcase {
  --row: 222px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  align-content: flex-start;
  gap: 0 4px;
  padding: 0 12px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background:
    linear-gradient(to bottom, transparent calc(var(--row) - 20px), var(--ink) calc(var(--row) - 20px), var(--ink) calc(var(--row) - 18px), var(--kraft-2) calc(var(--row) - 18px), var(--kraft-2) calc(var(--row) - 4px), color-mix(in srgb, var(--ink) 35%, transparent) calc(var(--row) - 4px), transparent var(--row)) 0 0 / 100% var(--row),
    color-mix(in srgb, var(--kraft) 18%, var(--paper));
}
.ac-slot { position: relative; height: var(--row); display: flex; align-items: flex-end; padding-bottom: 20px; }
.ac-slot .spine { cursor: pointer; }
.ac-slot__wags {
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  min-width: 1.4rem; height: 1.4rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--yellow);
  color: #1b1a2e;
  border: 1.5px solid #1b1a2e;
  font: 700 0.7rem var(--font-mono);
  pointer-events: none;
}
.ac-book { display: grid; gap: var(--space-l); grid-template-columns: 1fr; }
.ac-book__cover { width: min(100%, 220px); margin-inline: auto; }
.ac-book__cover .cover { border: 2px solid var(--ink); box-shadow: 5px 6px 0 var(--ink); }
@media (min-width: 680px) { .ac-book { grid-template-columns: 200px 1fr; } .ac-book__cover { margin: 0; } }
.ac-book__by { font-family: var(--font-ui); font-weight: 650; }
.ac-rate__row { display: grid; gap: var(--space-s); grid-template-columns: minmax(0, 16rem); }
.ac-wags { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.ac-wags__row { display: flex; gap: 0.35rem; }
.ac-wags__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ac-wags__label {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border: 2px solid var(--rule-strong);
  border-radius: 12px;
  color: var(--ink-3);
  background: var(--card);
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease-spring), background var(--dur-2), color var(--dur-2);
}
.ac-wags__label .icon { width: 28px; height: 28px; transform-origin: 20% 90%; }
.ac-wags__label:hover { transform: translateY(-2px); border-color: var(--ink); }
.ac-wags__label.is-lit { background: var(--yellow); color: #1b1a2e; border-color: var(--ink); }
.ac-wags__label.is-lit .icon { fill: color-mix(in srgb, var(--pink) 55%, transparent); }
.ac-wags__input:checked + .ac-wags__label .icon { animation: ac-wag 0.6s var(--ease-spring) 2; }
.ac-wags__input:focus-visible + .ac-wags__label { outline: 3px solid var(--focus); outline-offset: 3px; }
@keyframes ac-wag { 25% { transform: rotate(-18deg); } 75% { transform: rotate(14deg); } }
.ac-wags__word { min-height: 1.4em; }
.ac-wagsmall { display: inline-flex; gap: 1px; color: var(--rule-strong); }
.ac-wagsmall .icon { width: 1.05rem; height: 1.05rem; }
.ac-wagsmall .is-lit { color: var(--pink-ink); }
.ac-badmatch { display: flex; gap: 0.4rem; align-items: flex-start; color: var(--green-ink); }
.ac-tags, .ac-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ac-tag { position: relative; display: inline-flex; cursor: pointer; }
.ac-tag input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ac-tag > span {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.35rem;
  min-height: 40px;
  padding: 0.45rem 0.85rem;
  border: 2px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--card);
  font: 650 var(--step--1) var(--font-ui);
  color: var(--ink-2);
  transition: background var(--dur-2), border-color var(--dur-2), color var(--dur-2);
}
.ac-tag:hover > span { border-color: var(--ink); color: var(--ink); }
.ac-tag input:checked + span { background: var(--blue-soft); border-color: var(--ink); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.ac-tag input:checked + span::before { content: '\2713'; font-weight: 800; color: var(--blue-ink); }
.ac-tag--no input:checked + span { background: var(--red-soft); }
.ac-tag--no input:checked + span::before { content: '\2715'; color: var(--red-ink); }
.ac-tag input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.ac-tag__hint { font-weight: 500; font-size: 0.8em; color: var(--ink-3); }
.ac-wrapped__book { width: 140px; margin-inline: auto; }

/* Boxes ------------------------------------------------------------------------ */
.ac-boxsum { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.9rem; font-size: var(--step-0); }
.ac-boxsum__no { font-size: var(--step--1); color: var(--ink-3); letter-spacing: 0.06em; }
.ac-boxbody { display: flex; flex-direction: column; gap: var(--space-s); max-width: none !important; }
.ac-boxitems { display: flex; flex-direction: column; }
.ac-boxitem { display: grid; grid-template-columns: 8.5rem 1fr auto; gap: 0.4rem 0.8rem; align-items: center; padding: 0.55rem 0; border-bottom: 1px dashed var(--rule); }
.ac-boxitem .chip { justify-self: start; }
.ac-boxitem__main { display: flex; flex-direction: column; min-width: 0; }
.ac-boxitem__title { font-family: var(--font-ui); font-weight: 700; color: var(--ink); text-align: left; }
.ac-boxitem__title.text-btn { color: var(--blue-ink); }
@media (max-width: 560px) { .ac-boxitem { grid-template-columns: 1fr; } }
.ac-boxnote { margin: 0; padding-left: 1rem; border-left: 4px solid var(--pink); font-size: 1.45rem; line-height: 1.15; color: var(--blue-ink); }
:root[data-readable='true'] .ac-boxnote { font-size: 1rem; }

/* Taste ------------------------------------------------------------------------- */
.ac-readerpick { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.ac-typecard {
  --tc: var(--blue-soft);
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--space-m);
  align-items: center;
  padding: var(--space-m);
  background: var(--tc);
  border: 2px solid var(--ink);
  border-radius: var(--radius-m);
  box-shadow: 4px 4px 0 var(--ink);
}
.ac-typecard--pink { --tc: var(--pink-soft); }
.ac-typecard--yellow { --tc: var(--yellow-soft); }
.ac-typecard--green { --tc: var(--green-soft); }
.ac-typecard--ink { --tc: var(--lilac-soft); }
.ac-typecard__name { font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); line-height: 1; letter-spacing: -0.02em; font-stretch: 82%; }
.ac-genres { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
.ac-genre {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  min-height: 76px;
  padding: 0.65rem 0.75rem 0.7rem;
  text-align: left;
  background: var(--card);
  color: var(--ink);
  border: 2px solid var(--rule-strong);
  border-radius: var(--radius-m);
  transition: background var(--dur-2), border-color var(--dur-2), box-shadow var(--dur-2);
}
.ac-genre:hover { border-color: var(--ink); }
.ac-genre__name { font: 750 var(--step--1) var(--font-ui); line-height: 1.2; padding-right: 3.4rem; }
.ac-genre__blurb { font-size: var(--step--2); color: var(--ink-3); line-height: 1.3; }
.ac-genre__state { position: absolute; top: 0.45rem; right: 0.45rem; font: 700 0.62rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 0.1em 0.45em; border-radius: 4px; }
.ac-genre[data-state='1'] { background: var(--blue-soft); border-color: var(--ink); }
.ac-genre[data-state='1'] .ac-genre__state { background: var(--blue); color: var(--on-blue); }
.ac-genre[data-state='2'] { background: var(--pink-soft); border-color: var(--ink); box-shadow: 3px 3px 0 var(--pink); }
.ac-genre[data-state='2'] .ac-genre__state { background: var(--pink); color: #1b1a2e; }
.ac-genre[data-state='-1'] { background: var(--paper-2); border-style: dashed; }
.ac-genre[data-state='-1'] .ac-genre__name { text-decoration: line-through; text-decoration-color: var(--red-ink); text-decoration-thickness: 2px; color: var(--ink-2); }
.ac-genre[data-state='-1'] .ac-genre__state { background: var(--ink); color: var(--paper); }
.ac-genre.is-thunk { animation: thunk var(--dur-3) var(--ease-spring); }
.ac-formats { --grid-min: 200px; }
.ac-wild__row { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-m); align-items: center; }
.ac-wild__ctl { min-width: 0; }
@media (max-width: 480px) { .ac-wild__row { grid-template-columns: 64px 1fr; } .ac-typecard { grid-template-columns: 64px 1fr; } }
.ac-savebar {
  position: sticky;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.7rem 1rem;
  background: var(--yellow);
  color: #1b1a2e;
  border: 2px solid #1b1a2e;
  border-radius: var(--radius-m);
  box-shadow: 4px 4px 0 #1b1a2e;
  animation: toast-in var(--dur-3) var(--ease-spring);
}
.ac-savebar .btn--ghost { --btn-fg: #1b1a2e; --btn-reveal: #fff6c4; }
.ac-read__tools { display: flex; flex-direction: column; gap: var(--space-s); }
.ac-read__add { display: grid; gap: var(--space-s); grid-template-columns: 1fr; align-items: end; }
@media (min-width: 720px) { .ac-read__add { grid-template-columns: 1.3fr 1fr auto; } .ac-read__add .btn { min-height: 50px; } }
.ac-read__search { max-width: 22rem; }
.ac-exlist { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.ac-exlist__item { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0; border-bottom: 1px solid var(--rule); }
.ac-exlist__main { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ac-pager { margin-top: var(--space-s); }

/* Household ---------------------------------------------------------------------- */
.ac-readers { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.ac-reader { display: grid; grid-template-columns: 64px 1fr; gap: 0.4rem var(--space-s); padding: var(--space-m); background: var(--paper); border: 1.5px solid var(--rule); border-radius: var(--radius-m); align-items: center; }
.ac-reader__dewey { width: 64px; grid-row: span 1; }
.ac-reader__info { min-width: 0; }
.ac-reader__name { font: 800 var(--step-1) var(--font-ui); display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.ac-reader__actions { grid-column: 1 / -1; }
.ac-addreader { display: flex; flex-direction: column; gap: var(--space-s); }
.ac-addreader__row { display: grid; gap: var(--space-s); grid-template-columns: 1fr; align-items: end; }
@media (min-width: 720px) { .ac-addreader__row { grid-template-columns: 1.3fr 1fr auto; } .ac-addreader__row .btn { min-height: 50px; } }
.ac-split__list { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: var(--space-s); }
.ac-split__row { display: grid; grid-template-columns: minmax(5rem, 10rem) auto 1fr; gap: var(--space-s); align-items: center; padding: 0.45rem 0; border-bottom: 1px dashed var(--rule); }
.ac-split__name { font: 700 var(--step-0) var(--font-ui); overflow-wrap: anywhere; }
.ac-stepper { display: inline-flex; align-items: center; gap: 0.2rem; border: 2px solid var(--ink); border-radius: 999px; padding: 2px; background: var(--card); }
.ac-stepper .icon-btn { width: 40px; height: 40px; }
.ac-stepper .icon-btn:disabled { opacity: 0.35; }
.ac-stepper__out { min-width: 1.8rem; text-align: center; font: 800 var(--step-1) var(--font-ui); font-variant-numeric: tabular-nums; }
.ac-split__books { display: flex; gap: 4px; align-items: flex-end; height: 34px; }
.ac-split__books i { display: block; width: 12px; height: 30px; border: 2px solid var(--ink); border-radius: 2px; background: var(--blue); }
.ac-split__books i:nth-child(2) { background: var(--pink); height: 26px; }
.ac-split__books i:nth-child(3) { background: var(--yellow); height: 32px; }
.ac-split__books i:nth-child(4) { background: var(--green); height: 28px; }
.ac-split__total { font: 700 var(--step-0) var(--font-ui); margin-bottom: var(--space-s); }
.ac-split__total.is-ok { color: var(--green-ink); }
.ac-split__total.is-off { color: var(--amber-ink); }
@media (max-width: 520px) { .ac-split__row { grid-template-columns: 1fr auto; } .ac-split__books { display: none; } }

/* Plan & billing ------------------------------------------------------------------- */
.ac-plancard { display: grid; grid-template-columns: auto 1fr; gap: var(--space-m) var(--space-l); align-items: center; }
@media (max-width: 520px) { .ac-plancard { grid-template-columns: 1fr; } }
.ac-plancard__stamp { --r: 6px; width: 9.5rem; color: var(--ink); }
.ac-plancard__stamp .postage__inner { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-s); background: var(--yellow-soft); }
.ac-plancard__price { font-family: var(--font-display); font-weight: 800; font-size: var(--step-3); line-height: 1; letter-spacing: -0.04em; color: var(--pink-ink); font-stretch: 80%; }
.ac-builder { max-width: 820px; }
.ac-books label { flex-direction: column; gap: 0.3rem; padding: 0.55rem 0.5rem; text-align: center; }
.ac-books__pile { display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; height: 34px; justify-content: flex-start; }
.ac-books__pile i { display: block; width: 26px; height: 6px; border: 1.5px solid currentColor; border-radius: 2px; background: color-mix(in srgb, var(--pink) 50%, transparent); }
.ac-books__pile i:nth-child(2) { width: 22px; background: color-mix(in srgb, var(--blue) 45%, transparent); }
.ac-books__pile i:nth-child(3) { width: 28px; background: color-mix(in srgb, var(--yellow) 70%, transparent); }
.ac-books__pile i:nth-child(4) { width: 20px; background: color-mix(in srgb, var(--green) 50%, transparent); }
.ac-fresh { border: 1.5px solid var(--rule); border-radius: var(--radius-m); padding: 0.7rem 1rem; }
.ac-builder__sum { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m); padding: var(--space-m); background: var(--paper); border: 2px dashed var(--rule-strong); border-radius: var(--radius-m); }
.ac-builder__sum > .stack { flex: 1 1 16rem; min-width: 0; }
.ac-builder__stamp { --r: 5px; width: 9rem; color: var(--ink); }
.ac-builder__stamp .postage__inner { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0.6rem; }
.ac-builder__stamp.is-thunk { animation: thunk var(--dur-3) var(--ease-spring); }
.ac-pause { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-s); }
.ac-addons { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.ac-addon { display: flex; justify-content: space-between; align-items: center; gap: var(--space-s); padding: var(--space-s) var(--space-m); border: 1.5px solid var(--rule); border-radius: var(--radius-m); background: var(--paper); }
.ac-addon.is-on { border-color: var(--ink); background: var(--blue-soft); }
.ac-addresses { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.ac-address { display: flex; flex-direction: column; gap: var(--space-s); padding: var(--space-m); border: 2px dashed var(--rule-strong); border-radius: var(--radius-s); background: var(--paper); }
.ac-address.is-here { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); background: var(--card); }
.ac-address address { font-style: normal; line-height: 1.5; margin-top: 0.3rem; }
.ac-addrform { display: grid; gap: 0 var(--space-s); grid-template-columns: 1fr 1fr; }
.ac-addrform > * { min-width: 0; }
.ac-af--name, .ac-af--line1, .ac-af--line2, .ac-af--full { grid-column: 1 / -1; }
@media (max-width: 480px) { .ac-addrform { grid-template-columns: 1fr; } }
.ac-addrform .field { margin-bottom: var(--space-s); }
.ac-ledger { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.ac-ledger li { display: grid; grid-template-columns: 1fr auto; gap: 0 0.6rem; padding: 0.4rem 0; border-bottom: 1px solid var(--rule); }
.ac-ledger li .tiny { grid-column: 1 / -1; }
.ac-plus { color: var(--green-ink); font-weight: 700; }
.ac-cancel { padding: var(--space-m); border: 1.5px solid var(--rule); border-radius: var(--radius-m); background: var(--paper); }
.ac-section.ac-cancel { padding-top: var(--space-m); border-top: 1.5px solid var(--rule); margin-top: var(--space-s); }
.ac-billgrid { display: grid; gap: var(--space-m); grid-template-columns: 1fr; align-items: start; }
.ac-billgrid > * { min-width: 0; }
@media (min-width: 1100px) { .ac-billgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); } }
.ac-reasons { display: grid; gap: 0.35rem 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }

/* Friends -------------------------------------------------------------------------- */
.ac-refer { display: grid; gap: var(--space-l); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 820px) { .ac-refer { grid-template-columns: 280px 1fr; } }
.ac-refer__ticket {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  padding: var(--space-m) var(--space-m) var(--space-l);
  background: var(--pink-soft);
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: 5px 5px 0 var(--ink);
  -webkit-mask: radial-gradient(circle 10px at 0 50%, #0000 98%, #000) 0 0 / 51% 100% no-repeat, radial-gradient(circle 10px at 100% 50%, #0000 98%, #000) 100% 0 / 51% 100% no-repeat;
  mask: radial-gradient(circle 10px at 0 50%, #0000 98%, #000) 0 0 / 51% 100% no-repeat, radial-gradient(circle 10px at 100% 50%, #0000 98%, #000) 100% 0 / 51% 100% no-repeat;
}
.ac-refer__code { font-size: var(--step-3); font-weight: 700; letter-spacing: 0.08em; overflow-wrap: anywhere; color: var(--ink); }
.ac-refer__stamp { --stamp-rot: -6deg; align-self: flex-end; margin-top: 0.5rem; font-size: 0.68rem; }

/* Security --------------------------------------------------------------------------- */
.ac-strength .meter { height: 10px; }
.ac-strength[data-score='0'] .meter__fill { background: var(--red); }
.ac-strength[data-score='1'] .meter__fill { background: var(--amber-ink); }
.ac-strength[data-score='2'] .meter__fill, .ac-strength[data-score='3'] .meter__fill, .ac-strength[data-score='4'] .meter__fill { background: var(--green); }
.ac-mfa__steps { display: grid; gap: var(--space-l); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.ac-mfa__step { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.ac-mfa__qr { width: min(100%, 200px); padding: 6px; background: #fff; border: 2px solid var(--ink); border-radius: var(--radius-s); }
.ac-mfa__qr .qr { width: 100%; height: auto; display: block; }
.ac-mfa__secret code { font-size: var(--step-0); letter-spacing: 0.1em; overflow-wrap: anywhere; background: var(--yellow-soft); color: var(--on-yellow); padding: 0.15em 0.4em; border-radius: 4px; }
.ac-mfa__code { max-width: 12rem; font-size: var(--step-1); }
.ac-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.4rem; padding: var(--space-s); background: var(--paper-2); border: 2px dashed var(--rule-strong); border-radius: var(--radius-s); font-size: var(--step-0); letter-spacing: 0.08em; }

/* Privacy ---------------------------------------------------------------------------- */
.ac-json { max-height: 55vh; overflow: auto; margin: 0; padding: var(--space-s); background: var(--paper-2); border: 1.5px solid var(--rule); border-radius: var(--radius-s); font: 0.78rem/1.45 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.ac-danger { border-color: color-mix(in srgb, var(--red) 45%, transparent); background: var(--red-soft); }

/* Phones: each gift is a row (small wrapped book beside its tag). */
@media (max-width: 600px) {
  .ac-gifts { grid-template-columns: 1fr; gap: var(--space-m); }
  .ac-gift { flex-direction: row; align-items: flex-start; gap: var(--space-s); }
  .ac-gift__stage { flex: none; width: 92px; margin: 0.4rem 0 0; }
  .ac-gift__stage .mystery { box-shadow: 3px 4px 0 var(--ink); }
  .ac-gift__stage .mystery__bow::before, .ac-gift__stage .mystery__bow::after { width: 16px; height: 10px; border-width: 3px; }
  .ac-gift__tag { flex: 1; min-width: 0; min-height: 0; }
  .ac-gift__stage--open .cover { box-shadow: 3px 4px 0 var(--ink); }
  .ac-panel { gap: var(--space-l); padding-inline: var(--space-s); }
  .ac-head__card { padding: var(--space-s) var(--space-m); }
  .ac-head__dewey { width: 60px; }
  .ac-label__date { font-size: var(--step-3); }
}

/* assets/css/pages/admin.css */
/* ==========================================================================
   The Back Room (admin). Dense, calm, information first; brand touches kept
   to stamps, catalog-card rules and the odd handwritten note.
   ========================================================================== */
.admin {
  /* Chart colours, validated for both surfaces (dataviz six checks). */
  --viz-1: #2b4ea2;
  --viz-2: #ff48b0;
  --viz-good: var(--green);
  --viz-bad: var(--red);
  --admin-side: 232px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h) - env(safe-area-inset-top, 0px));
}
:root[data-theme='dark'] .admin { --viz-1: #6f8cf0; --viz-2: #e8479e; }

.admin-body .announce, .admin-body .site-footer { display: none; }
.admin-main { padding-bottom: 0; }

@media (min-width: 1000px) {
  .admin { grid-template-columns: var(--admin-side) minmax(0, 1fr); }
}

/* Sidebar ---------------------------------------------------------------- */
.admin-side {
  background: var(--paper-2);
  border-bottom: 2px solid var(--ink);
  padding: var(--space-s) var(--gutter-r) var(--space-s) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}
.admin-side__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.admin-side__who { font-family: var(--font-ui); font-size: var(--step--1); font-weight: 650; color: var(--ink-2); }
.admin-side__help { display: none; align-self: flex-start; color: var(--ink-2); }
.admin-nav { min-width: 0; }
.admin-nav__group { display: none; }
.admin-nav__list { display: flex; gap: 0.25rem; }
.admin-nav { display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.admin-nav__link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 42px;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-s);
  font-family: var(--font-ui);
  font-weight: 650;
  font-size: var(--step--1);
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid transparent;
}
.admin-nav__link .icon { color: var(--ink-3); }
.admin-nav__link:hover { color: var(--ink); background: var(--card); text-decoration: none; }
.admin-nav__link[aria-current='page'] { color: var(--ink); background: var(--card); border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.admin-nav__link[aria-current='page'] .icon { color: var(--blue-ink); }
.admin-nav__badge {
  margin-left: auto;
  min-width: 1.6rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--on-yellow);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 1000px) {
  .admin-side {
    position: sticky;
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    align-self: start;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h) - env(safe-area-inset-top, 0px));
    overflow-y: auto;
    border-bottom: 0;
    border-right: 2px solid var(--ink);
    padding: var(--space-m) var(--space-s) var(--space-m) max(var(--space-s), env(safe-area-inset-left, 0px));
  }
  .admin-nav { display: block; overflow: visible; }
  .admin-nav__group { display: block; margin: var(--space-s) 0.6rem 0.3rem; color: var(--ink-3); }
  .admin-nav__list { display: flex; flex-direction: column; gap: 2px; }
  .admin-side__help { display: inline-flex; margin-top: auto; padding-top: var(--space-m); }
}

/* Content ---------------------------------------------------------------- */
.admin-content {
  min-width: 0;
  padding: var(--space-m) var(--gutter-r) var(--space-l) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
@media (min-width: 1000px) { .admin-content { padding: var(--space-l) clamp(1.25rem, 2.5vw, 2.5rem); } }
.admin-loading { display: grid; place-items: center; min-height: 40vh; }
.admin-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-s) var(--space-m); }
.admin-head__text { display: flex; flex-direction: column; gap: 0.25rem; max-width: 70ch; min-width: 0; }
.admin-head__title { font-size: var(--step-3); font-stretch: 85%; }
.admin-head__title:focus { outline: none; }
.admin-head__lede { color: var(--ink-2); font-size: var(--step--1); line-height: 1.55; }
.admin-head__actions { --cluster: 0.5rem; }

.admin-panel {
  background: var(--card);
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius-m);
  padding: var(--space-m);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.admin-panel__title { font-size: var(--step-1); font-stretch: 90%; letter-spacing: -0.01em; }
.admin-panel__sub { font-size: var(--step--1); color: var(--ink-2); margin-top: -0.4rem; }
.admin-grid-2 { display: grid; gap: var(--space-m); grid-template-columns: 1fr; align-items: start; }
.admin-grid-2 > * { min-width: 0; }
@media (min-width: 1150px) { .admin-grid-2 { grid-template-columns: 1fr 1fr; } }

kbd {
  font-family: var(--font-mono);
  font-size: 0.82em;
  padding: 0.05em 0.4em;
  border: 1.5px solid var(--rule-strong);
  border-bottom-width: 3px;
  border-radius: 5px;
  background: var(--card);
  color: var(--ink);
  white-space: nowrap;
}
.admin-keys { display: grid; grid-template-columns: max-content 1fr; gap: 0.6rem 1rem; margin: 0 0 var(--space-s); }
.admin-keys dd { margin: 0; }

/* To-do strip -------------------------------------------------------------- */
.admin-todo { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: var(--space-xs); }
.admin-todo__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 56px;
  padding: 0.6rem 0.9rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius-m);
  background: var(--yellow-soft);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--step--1);
  line-height: 1.25;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform var(--dur-1), box-shadow var(--dur-1);
}
.admin-todo__item:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); text-decoration: none; color: var(--ink); }
.admin-todo__n { font-family: var(--font-display); font-size: var(--step-2); font-weight: 800; font-stretch: 80%; line-height: 1; }
.admin-todo__arrow { margin-left: auto; color: var(--ink-2); }

/* Ledger of figures ---------------------------------------------------------- */
.ledger { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); column-gap: var(--space-xs); margin: 0; border-top: 1px solid var(--rule); }
@media (min-width: 700px) { .ledger { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); column-gap: 0; } }
.ledger--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }
@media (min-width: 700px) { .ledger--3 { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } }
@media (min-width: 480px) { .inv-stats .ledger--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ledger__cell {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: var(--space-s) var(--space-s) var(--space-s) 0;
  border-bottom: 1px solid var(--rule);
  min-width: 0;
}
.ledger__cell dd { margin: 0; }
.ledger__label { font-family: var(--font-ui); font-size: var(--step--1); font-weight: 600; color: var(--ink-2); line-height: 1.3; min-height: 2.6em; display: flex; align-items: flex-end; }
.ledger__value { font-family: var(--font-ui); font-weight: 750; font-size: var(--step-2); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); }
.ledger__unit { font-size: var(--step-0); font-weight: 650; letter-spacing: 0; color: var(--ink-2); }
.admin .table tbody th[scope='row'] { position: static; background: none; font-family: var(--font-ui); font-size: var(--step--1); font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--ink); white-space: normal; }
.ledger__delta { display: inline-flex; align-items: center; gap: 0.25rem; font-family: var(--font-ui); font-size: var(--step--2); font-weight: 650; color: var(--ink-2); }
.ledger__delta--good { color: var(--green-ink); }
.ledger__delta--bad { color: var(--red-ink); }
.ledger__delta .icon { width: 1em; height: 1em; }
.ledger__note { font-size: var(--step--2); color: var(--ink-3); display: inline-flex; align-items: center; gap: 0.35rem; }
.ledger__spark { margin-top: 0.2rem; }
.tone-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; flex: none; background: var(--ink-3); }
.tone-dot--good { background: var(--green); }
.tone-dot--warn { background: var(--amber-ink); }
.tone-dot--bad { background: var(--red); }

/* Charts --------------------------------------------------------------------- */
.viz { display: flex; flex-direction: column; gap: var(--space-xs); }
.viz__plot { position: relative; width: 100%; min-width: 0; }
.viz__svg { display: block; overflow: visible; border-radius: 4px; }
.viz__svg:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.viz__grid, .viz__baseline, .viz__tick { stroke: var(--rule); stroke-width: 1; shape-rendering: crispEdges; }
.viz__baseline { stroke: var(--rule-strong); }
.viz__axis { fill: var(--ink-3); font-family: var(--font-ui); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.viz__area { fill: var(--viz-1); fill-opacity: 0.1; stroke: none; }
.viz__line { fill: none; stroke: var(--viz-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz__end { fill: var(--viz-1); stroke: var(--card); stroke-width: 2; }
.viz__endlabel { fill: var(--ink); font-family: var(--font-ui); font-size: 12px; font-weight: 700; }
.viz__cross { stroke: var(--ink-2); stroke-width: 1; shape-rendering: crispEdges; }
.viz__focus { fill: var(--viz-1); stroke: var(--card); stroke-width: 2; }
.viz__tip {
  position: absolute;
  left: 0; top: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  padding: 0.35rem 0.6rem;
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-s);
  box-shadow: 2px 2px 0 var(--ink);
  pointer-events: none;
  white-space: nowrap;
}
.viz__tip-value { font-family: var(--font-ui); font-size: var(--step-0); font-weight: 750; color: var(--ink); }
.viz__tip-label { font-size: var(--step--2); color: var(--ink-2); }
.viz__table summary { font-family: var(--font-ui); font-size: var(--step--1); font-weight: 650; color: var(--blue-ink); cursor: pointer; width: max-content; min-height: 32px; display: flex; align-items: center; }
.viz__table-wrap { max-height: 260px; overflow: auto; margin-top: 0.4rem; }
.spark { display: block; overflow: visible; }
.spark__line { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.spark__end { fill: var(--viz-1); stroke: var(--card); stroke-width: 1.5; }

.barlist { display: flex; flex-direction: column; gap: 0.55rem; }
.barlist__row { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; }
.barlist__label { font-family: var(--font-ui); font-size: var(--step--1); font-weight: 600; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.barlist__note { display: block; font-weight: 500; color: var(--ink-3); font-size: var(--step--2); }
.barlist__track { height: 18px; display: flex; align-items: center; }
.barlist__bar { display: block; height: 18px; width: var(--w, 0%); background: var(--viz-1); border-radius: 0 4px 4px 0; transition: width var(--dur-3) var(--ease-out); }
.barlist__value { font-family: var(--font-ui); font-size: var(--step--1); font-weight: 700; white-space: nowrap; }
.barlist--compact .barlist__row { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto; }
.barlist--compact .barlist__bar, .barlist--compact .barlist__track { height: 12px; }
@media (max-width: 560px) {
  .barlist__row, .barlist--compact .barlist__row { grid-template-columns: 1fr auto; row-gap: 0.25rem; }
  .barlist__track { grid-column: 1 / -1; grid-row: 2; }
}

.radar-summary { font-size: var(--step-0); }
.radar th[scope='row'] { font-family: var(--font-ui); font-weight: 650; position: static; background: none; text-transform: none; letter-spacing: 0; font-size: var(--step--1); color: var(--ink); }
.cover-meter { display: inline-flex; align-items: center; gap: 0.6rem; min-width: 150px; }
.cover-meter__track { position: relative; display: block; width: 110px; height: 10px; border-radius: 999px; background: var(--paper-2); }
.cover-meter__fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: var(--viz-1); border-radius: 999px; }
.cover-meter__mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink-2); }
.cover-meter__mark--low { left: 18.75%; }
.cover-meter__mark--high { left: 75%; }
.cover-meter__text { font-family: var(--font-ui); font-size: var(--step--1); font-weight: 650; }

/* Shared bits ------------------------------------------------------------------ */
.admin-filters { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: flex-end; }
.admin-filters .field { flex: 0 1 auto; }
.admin-filters__search { flex: 1 1 260px !important; }
.admin-filters .select, .admin-filters .input { min-height: 44px; }
.admin-seg { align-self: flex-start; }
.admin-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); margin-top: var(--space-xs); }
.is-refreshing { opacity: 0.55; transition: opacity var(--dur-2); }
.table .chip { white-space: nowrap; }
.table td.mono { white-space: nowrap; }
.admin .meter { display: block; }
.admin .meter__fill { display: block; }
.table td .btn { white-space: nowrap; }

/* Curation ----------------------------------------------------------------------- */
.auto-progress { display: flex; flex-direction: column; gap: 0.4rem; }
.auto-progress__bar { height: 10px; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; background: var(--card); }
.auto-progress__fill { display: block; height: 100%; width: var(--w, 0%); background: repeating-linear-gradient(-45deg, var(--viz-1) 0 8px, color-mix(in srgb, var(--viz-1) 75%, var(--card)) 8px 16px); transition: width 380ms var(--ease-out); }
.cur { display: grid; gap: var(--space-m); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) { .cur { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); } }
.cur__items { display: flex; flex-direction: column; gap: 0.5rem; }
@media (min-width: 1000px) {
  .cur__list { position: sticky; top: calc(var(--header-h) + var(--space-s)); max-height: calc(100vh - var(--header-h) - var(--space-l)); overflow-y: auto; padding: 4px 6px 6px 2px; }
}
.cur-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
  text-align: left;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius-m);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--dur-2), box-shadow var(--dur-2);
}
.cur-item:hover { border-color: var(--ink); }
.cur-item.is-selected { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); background: var(--yellow-soft); }
.cur-item__top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.cur-item__name { font-family: var(--font-ui); font-weight: 750; font-size: var(--step-0); line-height: 1.2; }
.cur-item__readers { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.cur-item__readers .chip { font-size: var(--step--2); padding: 0.05em 0.5em; }
.cur-item__warn { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--amber-ink); font-weight: 650; }
.cur__detail { display: flex; flex-direction: column; gap: var(--space-m); min-width: 0; }
.cur__detail:focus { outline: none; }
.cur__back { display: none; align-self: flex-start; }
@media (max-width: 999px) {
  .cur.has-detail .cur__list { display: none; }
  .cur:not(.has-detail) .cur__detail { display: none; }
  .cur__back { display: inline-flex; }
}
.cur__placeholder { padding-top: var(--space-l); }
.cur-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-s); padding-bottom: var(--space-s); border-bottom: 2px solid var(--ink); }
.cur-head__title { font-size: var(--step-2); }
.cur-note-preview { margin-top: 0.4rem; font-size: 1.35rem; }
.cur-reader { display: grid; gap: var(--space-s); grid-template-columns: 1fr; }
@media (min-width: 1280px) {
  .cur-reader { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); align-items: start; }
  .cur-reader > .reader-card { position: sticky; top: calc(var(--header-h) + var(--space-s)); }
}

.reader-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-s) var(--space-m);
  border-left: 4px solid var(--viz-1);
  background: var(--paper-2);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  min-width: 0;
}
.reader-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs); }
.reader-card__name { font-size: var(--step-1); }
.reader-card__facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 0.75rem; margin: 0; align-items: start; }
.reader-card__facts dt { font-family: var(--font-mono); font-size: var(--step--2); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding-top: 0.3rem; }
.reader-card__facts dd { margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; min-width: 0; }
.reader-card__facts .chip { font-size: var(--step--2); }
.reader-card__notes { padding: 0.5rem 0.7rem; background: var(--card); border-radius: var(--radius-s); border: 1px dashed var(--rule-strong); }
.reader-card__history summary { cursor: pointer; font-family: var(--font-ui); font-weight: 650; color: var(--blue-ink); min-height: 32px; display: flex; align-items: center; }
.reader-card__history ul { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.3rem; }
.reader-card__history li { display: flex; justify-content: space-between; gap: 0.6rem; }
.wags { color: var(--pink-ink); letter-spacing: 1px; font-size: 0.7rem; white-space: nowrap; }
.wags__off { color: var(--rule-strong); }
.wild { display: flex; flex-direction: column; gap: 0.2rem; min-width: 140px; }
.wild .meter { height: 10px; }

.picks { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); min-width: 0; }
.picks__empty { padding: var(--space-m); border: 2px dashed var(--rule-strong); border-radius: var(--radius-m); }
.pick {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--space-s);
  padding: var(--space-s);
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius-m);
  background: var(--card);
}
.pick__cover .cover { box-shadow: var(--shadow-paper); }
.pick__body { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; min-width: 0; }
.pick__role { font-size: 0.68rem; padding: 0.15em 0.5em; --stamp-rot: -2deg; border-width: 2px; }
.pick__title { font-size: var(--step-0); line-height: 1.2; overflow-wrap: anywhere; }
.pick__conf { display: flex; align-items: center; gap: 0.5rem; width: 100%; }
.pick__conf .meter { flex: 1; max-width: 120px; height: 9px; }
.pick__reasons .chip { font-size: var(--step--2); white-space: normal; }

.cands { display: flex; flex-direction: column; gap: var(--space-xs); }
.cand { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: var(--space-s); align-items: center; padding: 0.6rem; border: 1.5px solid var(--rule); border-radius: var(--radius-m); }
.cand__body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.cand__body .chip { font-size: var(--step--2); white-space: normal; }
@media (max-width: 520px) { .cand { grid-template-columns: 54px minmax(0, 1fr); } .cand .btn { grid-column: 1 / -1; } }
.approve { --pad: var(--space-m); }
.note-starter { cursor: pointer; font-size: var(--step--2); white-space: normal; text-align: left; min-height: 32px; }
.note-starter:hover { background: var(--yellow-soft); }

/* Fulfillment ---------------------------------------------------------------- */
.tab__count { display: inline-block; min-width: 1.4em; margin-left: 0.3em; padding: 0 0.35em; border-radius: 999px; background: var(--paper-2); font-size: 0.85em; text-align: center; }
.tab[aria-selected='true'] .tab__count { background: var(--yellow); color: var(--on-yellow); }
.ff-panel { padding-top: var(--space-m); }
.ff-boxes { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }
.ff-box { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-s) var(--space-m); background: var(--card); border: 1.5px solid var(--rule-strong); border-radius: var(--radius-m); }
.ff-box__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-xs); }
.ff-box__items { display: flex; flex-direction: column; gap: 0.35rem; padding: var(--space-xs) 0; border-block: 1px dashed var(--rule-strong); }
.ff-box__items li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); column-gap: 0.6rem; }
.ff-box__items .tiny { grid-column: 2; }
.ff-bin { display: inline-flex; justify-content: center; align-items: center; height: 1.6rem; padding: 0 0.35rem; border: 1.5px solid var(--ink); border-radius: 4px; font-size: var(--step--2); font-weight: 700; background: var(--yellow-soft); color: var(--ink); }
.ff-item__title { min-width: 0; overflow-wrap: anywhere; }
.ff-paste summary { cursor: pointer; font-weight: 700; min-height: 32px; display: flex; align-items: center; }
.ff-paste[open] summary { margin-bottom: var(--space-xs); }
.ff-track { min-width: 14rem; min-height: 42px; letter-spacing: 0.08em; font-size: var(--step--1); }

.picklist { display: flex; flex-direction: column; gap: var(--space-s); }
.picklist__bay-title { font-size: var(--step-0); font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 0.3rem; }
.picklist__line { display: grid; grid-template-columns: auto 3.4rem minmax(0, 1fr); gap: 0.6rem; align-items: start; padding: 0.4rem 0; border-bottom: 1px dashed var(--rule); }
.picklist__line:has(input:checked) strong { text-decoration: line-through; color: var(--ink-3); }

.slip { display: flex; flex-direction: column; gap: var(--space-m); padding: var(--space-m); background: var(--yellow-soft); color: var(--ink); border-radius: var(--radius-s); border: 1px solid var(--rule); }
.slip__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-s); }
.slip__addr { font-style: normal; font-family: var(--font-mono); font-size: var(--step--1); line-height: 1.5; margin-top: 0.3rem; }
.slip__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }
.slip__items { display: flex; flex-direction: column; gap: var(--space-s); }
.slip__item { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-s); align-items: center; }
@media (max-width: 560px) { .slip__item { grid-template-columns: 1fr; } }
.slip__tag {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6em 0.8em 0.6em 1.8em;
  background: #fbf8f0;
  color: #1b1a2e;
  border: 2px solid #1b1a2e;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
  border-radius: 0 6px 6px 0;
}
.slip__tag::before { content: ''; position: absolute; left: 10px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; border: 2px solid #1b1a2e; background: #ff48b0; }
.slip__tag .clue-tag__no { color: #636179; }
.slip__tag .clue-tag__text { color: #2b4ea2; }
.slip__book { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.slip__note { padding: var(--space-s); background: var(--card); border-radius: var(--radius-s); border: 1px dashed var(--rule-strong); }
.slip__note .hand { font-size: 1.5rem; margin-top: 0.3rem; }
.slip__checks { display: flex; flex-direction: column; gap: 0.3rem; }
.slip__checks .icon { color: var(--green-ink); }
.csv-pre { max-height: 320px; overflow: auto; padding: var(--space-s); background: var(--paper-2); border-radius: var(--radius-s); font-family: var(--font-mono); font-size: var(--step--2); line-height: 1.5; white-space: pre; }

@media print {
  html.is-printing-slip body > *:not(dialog) { display: none !important; }
  html.is-printing-slip dialog { position: static; box-shadow: none; border: 0; width: 100%; max-height: none; }
  html.is-printing-slip dialog .modal__header, html.is-printing-slip dialog .modal__footer { display: none; }
  html.is-printing-slip .slip { background: #fff; border: 0; }
}

/* Inventory ---------------------------------------------------------------- */
.inv-stats .ledger { border-top: 0; }
.inv-table td { vertical-align: top; }
.add-book { display: flex; flex-direction: column; gap: var(--space-m); }
.add-book__section { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-s); }
.add-book__section > legend { margin-bottom: var(--space-xs); color: var(--pink-ink); }
.add-book__row { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.add-book__row > * { min-width: 0; }
.add-book__row--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.add-book__clues { display: grid; gap: var(--space-m); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 720px) { .add-book__clues { grid-template-columns: 1fr 1fr; } }
.clue-preview { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1.6rem; }
.clue-preview .clue-tag__text { font-family: var(--font-hand); font-size: 1.35rem; line-height: 1; }
.add-book__submit { position: sticky; bottom: 0; padding-top: var(--space-xs); background: var(--card); }
.choice-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.choice-chip { position: relative; display: inline-flex; cursor: pointer; }
.choice-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-chip span {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0.25rem 0.75rem;
  border: 1.5px solid var(--rule-strong); border-radius: 999px; background: var(--card);
  font-family: var(--font-ui); font-size: var(--step--1); font-weight: 600; color: var(--ink-2);
}
.choice-chip:hover span { border-color: var(--ink); color: var(--ink); }
.choice-chip input:checked + span { background: var(--blue-soft); border-color: var(--ink); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.choice-chip input:checked + span::before { content: '\2713'; margin-right: 0.35rem; font-weight: 800; }
.choice-chips--flags .choice-chip input:checked + span { background: var(--red-soft); }
.choice-chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.imp-table { max-height: 300px; overflow: auto; }
code.mono { overflow-wrap: anywhere; }

/* Members -------------------------------------------------------------------- */
.member-file .kv { grid-template-columns: max-content minmax(0, 1fr); }
.member-actions { display: flex; flex-direction: column; gap: var(--space-s); padding: var(--space-s) var(--space-m); background: var(--paper-2); border-radius: var(--radius-m); }
.member-credit { display: grid; gap: var(--space-s); grid-template-columns: 1fr; align-items: end; }
@media (min-width: 640px) { .member-credit { grid-template-columns: 9rem minmax(0, 1fr) auto; } .member-credit .btn { margin-bottom: 1.6rem; } }
.member-role { width: auto; min-height: 38px; padding-block: 0.3rem; }
.member-sec { border-top: 1.5px solid var(--rule-strong); padding-top: var(--space-xs); }
.member-sec > summary { cursor: pointer; font-weight: 700; min-height: 40px; display: flex; align-items: center; }
.member-sec[open] > summary { margin-bottom: var(--space-xs); }
.member-box { padding: 0.6rem 0.8rem; border: 1px solid var(--rule); border-radius: var(--radius-s); }
.member-box ul { margin-top: 0.3rem; padding-left: 1rem; list-style: disc; }

/* Trade-ins, tickets, notes ------------------------------------------------ */
.ti-list, .tk-list { display: flex; flex-direction: column; gap: var(--space-s); }
.ti-card, .tk-card { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-s) var(--space-m); background: var(--card); border: 1.5px solid var(--rule-strong); border-radius: var(--radius-m); }
.ti-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-xs); flex-wrap: wrap; }
.ti-card__note { font-style: italic; color: var(--ink-2); }
.ti-card details summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; color: var(--blue-ink); }
.ti-card__actions { display: grid; gap: var(--space-xs) var(--space-s); grid-template-columns: 1fr; align-items: end; padding-top: var(--space-xs); border-top: 1px dashed var(--rule-strong); }
@media (min-width: 760px) { .ti-card__actions { grid-template-columns: minmax(0, 1fr) auto auto; } }
.ti-amount { max-width: 8rem; }
.tk-card details > summary { list-style: none; }
.tk-card details > summary::-webkit-details-marker { display: none; }
.tk-card__sum { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-xs); cursor: pointer; flex-wrap: wrap; min-height: 40px; }
.tk-card__who { min-width: 0; }
.tk-card__body { padding-top: var(--space-xs); }
.tk-card__msg { white-space: pre-wrap; max-width: 70ch; padding: var(--space-s); background: var(--paper-2); border-radius: var(--radius-s); }
.tk-status { width: auto; min-height: 38px; padding-block: 0.3rem; }

.notes { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.note-card { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-m); background: var(--yellow-soft); border-radius: 4px; box-shadow: var(--shadow-paper); color: var(--ink); }
.note-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.note-card__text { font-size: 1.6rem; line-height: 1.1; color: var(--blue-ink); margin: 0; }

/* Coupons -------------------------------------------------------------------- */
.cp-list { display: flex; flex-direction: column; }
.cp-item { display: flex; justify-content: space-between; align-items: center; gap: var(--space-s); padding: var(--space-xs) 0; border-bottom: 1px solid var(--rule); }
.cp-item__main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.cp-code { font-weight: 700; font-size: var(--step-0); letter-spacing: 0.08em; }
.cp-usage { display: flex; align-items: center; gap: 0.5rem; }
.cp-usage .meter { width: 90px; height: 8px; }
.cp-item.is-off .cp-code { color: var(--ink-3); text-decoration: line-through; }
.cp-toggle { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-ui); font-weight: 650; cursor: pointer; }

/* Economics -------------------------------------------------------------------- */
.econ { display: grid; gap: var(--space-m); grid-template-columns: 1fr; align-items: start; }
.econ > * { min-width: 0; }
@media (min-width: 1150px) {
  .econ { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); }
  .econ__inputs { position: sticky; top: calc(var(--header-h) + var(--space-s)); max-height: calc(100vh - var(--header-h) - var(--space-l)); overflow-y: auto; }
}
.econ__out { display: flex; flex-direction: column; gap: var(--space-m); }
.econ__group { border: 0; padding: 0; margin: 0 0 var(--space-xs); display: flex; flex-direction: column; gap: var(--space-s); }
.econ__group > legend { margin-bottom: 0.4rem; color: var(--pink-ink); }
.econ-field { display: flex; flex-direction: column; gap: 0.15rem; }
.econ-field__top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.econ-field__label { font-family: var(--font-ui); font-weight: 650; font-size: var(--step--1); line-height: 1.25; }
.econ-field__num { display: inline-flex; align-items: center; gap: 0.2rem; font-family: var(--font-ui); font-weight: 700; color: var(--ink-2); }
.econ-field__input { width: 6.6rem; min-height: 38px; padding: 0.3rem 0.5rem; text-align: right; font-family: var(--font-ui); font-weight: 700; font-variant-numeric: tabular-nums; }
.econ-field__range { height: 28px; }
.econ-field__help { margin-top: -0.1rem; }
.econ-hero { gap: var(--space-2xs); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.econ-hero__figure { font-family: var(--font-ui); font-weight: 800; font-size: clamp(2.6rem, 2rem + 2.5vw, 3.6rem); letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.econ-hero__of { font-size: var(--step-0); font-weight: 600; letter-spacing: 0; color: var(--ink-2); margin-left: 0.4rem; }
.econ-hero__verdict { color: var(--ink-2); max-width: 60ch; }

.wf-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.wf-legend li { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink-2); font-family: var(--font-ui); }
.wf-key { width: 14px; height: 10px; border-radius: 2px; }
.wf { display: flex; flex-direction: column; gap: 6px; }
.wf__row { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) 6.5rem; align-items: center; gap: 0.75rem; }
.wf__label { font-family: var(--font-ui); font-size: var(--step--1); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.wf__track { position: relative; height: 22px; background: linear-gradient(var(--rule), var(--rule)) 0 50% / 100% 1px no-repeat; }
.wf__bar { position: absolute; top: 0; bottom: 0; left: var(--l, 0%); width: var(--w, 0%); border-radius: 4px; transition: left var(--dur-2) var(--ease-out), width var(--dur-2) var(--ease-out); }
.wf__bar--price { background: var(--viz-1); }
.wf__bar--cost { background: var(--viz-2); }
.wf__bar--good { background: var(--viz-good); }
.wf__bar--bad { background: var(--viz-bad); }
.wf__zero { position: absolute; top: -4px; bottom: -4px; left: var(--l); width: 2px; background: var(--ink); }
.wf__value { font-family: var(--font-ui); font-size: var(--step--1); font-weight: 700; text-align: right; white-space: nowrap; }
.wf__row--total { padding-top: 6px; border-top: 2px solid var(--ink); }
.wf__row--total .wf__label, .wf__row--total .wf__value { font-weight: 800; color: var(--ink); }
@media (max-width: 560px) {
  .wf__row { grid-template-columns: 1fr auto; row-gap: 0.2rem; }
  .wf__track { grid-column: 1 / -1; grid-row: 2; }
}

.audit-meta { max-width: 28rem; overflow-wrap: anywhere; color: var(--ink-3); }
.dev-form { max-width: 34rem; }

/* assets/css/pages/faq.css */
/* ==========================================================================
   FAQ
   ========================================================================== */
.fq-search { --pad: var(--space-m); display: flex; flex-direction: column; gap: 0.6rem; background: var(--card); position: sticky; top: calc(var(--header-h) + 12px); z-index: 5; }
@media (max-width: 720px) { .fq-search { position: static; } }
.fq-search__row { position: relative; }
.fq-search__row .icon { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.fq-search__row .input { padding-left: 2.7rem; }
.fq-nav { --cluster: 0.4rem; }
.fq-nav .chip { min-height: 34px; text-decoration: none; }
.fq-nav .chip:hover { background: var(--yellow-soft); }
.fq-group { display: flex; flex-direction: column; gap: var(--space-s); scroll-margin-top: calc(var(--header-h) + 160px); }
.fq-group__title { font-size: var(--step-2); }
.fq-mark { background: var(--yellow); color: var(--on-yellow); border-radius: 3px; padding: 0 0.1em; }
.fq details { scroll-margin-top: calc(var(--header-h) + 160px); }

/* assets/css/pages/funnel.css */
/* ==========================================================================
   Funnel shared bits: auth cards, password fields, code inputs, file
   triggers, done states. Used by login, reset, verify, join, gift, redeem.
   ========================================================================== */
.file-trigger:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 3px; }

.au { padding-block: clamp(2.5rem, 2rem + 4vw, 6rem); }
.au__wrap { max-width: calc(520px + var(--gutter) + var(--gutter-r)); }
.au-card {
  position: relative;
  padding: clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
  padding-top: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--radius-m);
  box-shadow: 6px 6px 0 var(--ink);
}
.au-card::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0;
  height: 10px;
  background: repeating-linear-gradient(90deg, var(--pink) 0 22px, var(--blue) 22px 44px, var(--yellow) 44px 66px);
  border-radius: calc(var(--radius-m) - 2px) calc(var(--radius-m) - 2px) 0 0;
  border-bottom: 2px solid var(--ink);
}
.au-card__dog { position: absolute; width: 84px; right: 18px; top: -46px; transform: rotate(8deg); }
.au-card__dog .dewey { filter: drop-shadow(3px 3px 0 rgba(27, 26, 46, 0.2)); }
.au-card--center { text-align: center; }
.au-card--center .cluster { justify-content: center; }
.au-title { font-size: var(--step-3); }
.au-title:focus { outline: none; }
.au-done { align-items: flex-start; }
.au-card--center .au-done { align-items: center; }
.au-done .stamp { align-self: flex-start; }
.au-card--center .au-done .stamp { align-self: center; }

.pw { align-items: stretch; }
.pw__toggle { min-width: 92px; box-shadow: none; border-width: 2px; }
.pw__toggle::before, .pw__toggle::after { display: none; }
.pw__toggle:hover { box-shadow: none; transform: none; animation: none; background: var(--paper-2); }
.pw__toggle[aria-pressed='true'] { background: var(--yellow-soft); }

.au-meter { display: flex; flex-direction: column; gap: 0.35rem; }
.au-meter .meter { height: 10px; }
.au-meter[data-score='0'] .meter__fill { background: var(--red); }
.au-meter[data-score='1'] .meter__fill { background: var(--amber-ink); }
.au-meter[data-score='2'] .meter__fill { background: var(--yellow); }
.au-meter[data-score='3'] .meter__fill, .au-meter[data-score='4'] .meter__fill { background: var(--green); }

.au-code { font-size: 1.6rem; letter-spacing: 0.4em; text-align: center; padding-inline: 0.5em; }

.fn-legal { font-size: var(--step--1); color: var(--ink-2); line-height: 1.5; }
.fn-legal a { color: var(--blue-ink); }
.fn-renewal {
  padding: var(--space-s) var(--space-m);
  border: 2px dashed var(--rule-strong);
  border-radius: var(--radius-m);
  background: var(--paper);
  font-size: var(--step--1);
}
.fn-renewal strong { font-family: var(--font-ui); }

/* Scratch-to-reveal foil (redeem page) */
.scratch { position: relative; isolation: isolate; }
.scratch__foil { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; z-index: 2; cursor: grab; touch-action: none; transition: opacity 450ms var(--ease-out); }
.scratch__foil:active { cursor: grabbing; }
.scratch__foil.is-gone { opacity: 0; pointer-events: none; }

/* Barcode scanner dialog */
.scan { display: flex; flex-direction: column; gap: var(--space-s); }
.scan__frame { position: relative; border: 2px solid var(--ink); border-radius: var(--radius-m); overflow: hidden; background: #000; aspect-ratio: 4 / 3; }
.scan__video { width: 100%; height: 100%; object-fit: cover; }
.scan__guide { position: absolute; left: 12%; right: 12%; top: 34%; bottom: 34%; border: 3px dashed var(--yellow); border-radius: 10px; box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.35); }
.scan__status { font-family: var(--font-ui); font-weight: 650; }

/* assets/css/pages/gift.css */
/* ==========================================================================
   Gift purchase and redemption
   ========================================================================== */
.gf-promises { margin-top: var(--space-m); --cluster: 0.5rem; }
.gf-promises .icon { color: var(--green-ink); }
.gf { display: grid; gap: var(--space-xl); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 980px) { .gf { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }
.gf-form { background: var(--card); border: 2px solid var(--ink); border-radius: var(--radius-m); box-shadow: 6px 6px 0 var(--ink); padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.gf-group { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-s); }
.gf-months { display: grid; gap: var(--space-s); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 520px) { .gf-months { grid-template-columns: 1fr; } }
.gf-months .choice__body { padding-right: 2.4rem; }
.gf-row { display: grid; gap: var(--space-m); grid-template-columns: 1fr; }
@media (min-width: 640px) { .gf-row { grid-template-columns: 1fr 1fr; } }
.gf-date { max-width: 260px; }
.gf-total { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-m); padding-top: var(--space-m); border-top: 2px dashed var(--rule-strong); }
.gf-total__price { font: 800 var(--step-4) var(--font-display); line-height: 0.95; letter-spacing: -0.04em; color: var(--pink-ink); font-stretch: 80%; }

.gf-preview { min-width: 0; }
.gf-preview__sticky { display: flex; flex-direction: column; gap: var(--space-l); align-items: center; }
@media (min-width: 980px) { .gf-preview__sticky { position: sticky; top: calc(var(--header-h) + 24px); } }
.gf-preview__sticky > .label-mono { align-self: flex-start; }
.gf-ecard {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 3 / 2;
  padding: var(--space-m);
  background: var(--blue);
  color: var(--on-blue);
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  box-shadow: 7px 7px 0 var(--pink);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 0.4rem;
  overflow: hidden;
  isolation: isolate;
}
.gf-ecard::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle, var(--pink) 22%, transparent 24%) 0 0 / 18px 18px;
  opacity: 0.35;
  mask-image: linear-gradient(to bottom, #000, transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 70%);
}
.gf-ecard__stamp { position: absolute; top: 14px; right: 14px; width: 88px; color: var(--ink); --r: 5px; }
.gf-ecard__stamp .postage__inner { display: flex; flex-direction: column; align-items: center; padding: 0.4rem; border-color: var(--ink); background: var(--yellow-soft); }
.gf-ecard__stamp span { font: 800 2rem var(--font-display); line-height: 1; }
.gf-ecard__stamp small { font: 700 0.6rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
.gf-ecard__kicker { color: inherit; opacity: 0.9; }
.gf-ecard__title { font: 800 var(--step-2) var(--font-display); line-height: 1; letter-spacing: -0.02em; font-stretch: 85%; max-width: 15ch; }
.gf-ecard__date { position: absolute; left: 16px; top: 18px; --stamp-color: var(--yellow); --stamp-rot: -6deg; font-size: 0.7rem; }
.gf-tag { justify-self: center; width: min(100%, 380px); transform: rotate(3deg); }
.gf-tag .hand { overflow-wrap: anywhere; }
.gf-tag__msg { font-size: 1.5rem !important; max-height: 9em; overflow: hidden; }

.gf-success { grid-column: 1 / -1; max-width: 720px; }
.gf-success:focus { outline: none; }
.gf-success__card { background: var(--card); }
.gf-success__card .stamp { align-self: flex-start; }
.gf-code { display: flex; flex-direction: column; gap: 0.4rem; padding: var(--space-m); border: 2px dashed var(--pink-ink); border-radius: var(--radius-m); background: var(--pink-soft); }
.gf-code__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s); }
.gf-code__value { font: 700 clamp(1.15rem, 0.9rem + 1.2vw, 1.7rem) var(--font-mono); letter-spacing: 0.08em; color: var(--ink); user-select: all; overflow-wrap: anywhere; }
.gf-next { display: flex; flex-direction: column; gap: 0.6rem; padding-left: 1.4rem; list-style: decimal; }
.gf-next li::marker { font-family: var(--font-mono); font-weight: 700; color: var(--pink-ink); }
.gf-faq { max-width: 760px; }

/* Redeem */
.rd { max-width: calc(680px + var(--gutter) + var(--gutter-r)); display: flex; flex-direction: column; gap: var(--space-m); }
.rd-progress { display: flex; flex-wrap: wrap; gap: 0.4rem; counter-reset: rd; }
.rd-progress li {
  counter-increment: rd;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.8rem 0.3rem 0.35rem;
  border: 2px solid var(--rule-strong); border-radius: 999px;
  font: 650 var(--step--1) var(--font-ui); color: var(--ink-3);
}
.rd-progress li::before { content: counter(rd); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid currentColor; font: 700 0.7rem var(--font-mono); }
.rd-progress li.is-here { border-color: var(--ink); color: var(--ink); background: var(--yellow-soft); }
.rd-progress li.is-done { color: var(--green-ink); border-color: var(--green-ink); }
.rd-progress li.is-done::before { content: '\2713'; }
.rd-card { background: var(--card); border: 2px solid var(--ink); border-radius: var(--radius-m); box-shadow: 6px 6px 0 var(--ink); padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.rd-card h2:focus { outline: none; }
.rd-card--done { text-align: center; align-items: center; }
.rd-card--done .cluster { justify-content: center; }
.rd-done__dog { width: 120px; }
.rd-code { font-size: var(--step-1); }
.rd-giftcard { border: 2.5px solid var(--ink); border-radius: 12px; overflow: hidden; background: var(--yellow-soft); }
.rd-giftcard__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3rem 1rem; padding: 0.6rem 1rem; background: var(--blue); color: var(--on-blue); }
.rd-giftcard__head .label-mono { color: inherit; }
.rd-giftcard__msg { position: relative; min-height: 170px; padding: var(--space-m) var(--space-l); display: flex; flex-direction: column; justify-content: center; gap: 0.4rem; border-radius: 0 0 10px 10px; }
.rd-giftcard__note { font-size: 1.9rem; color: var(--blue-ink); overflow-wrap: anywhere; }
.gf-tag .gift-tag__hole { background: var(--paper); }

/* assets/css/pages/home.css */
/* ==========================================================================
   Home
   ========================================================================== */
.section-head { display: flex; flex-direction: column; gap: var(--space-xs); max-width: 720px; }
.section-head--center { margin-inline: auto; text-align: center; align-items: center; }
.section-head .lede { margin-top: var(--space-2xs); }

/* Hero ------------------------------------------------------------------- */
.hero { padding-block: clamp(2rem, 1rem + 4vw, 5rem) clamp(3rem, 2rem + 4vw, 6rem); overflow: hidden; }
.hero__grid { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 980px) { .hero__grid { grid-template-columns: 1.05fr 0.95fr; } }
.hero__copy { position: relative; z-index: 2; }
.hero__stamp { align-self: flex-start; --stamp-rot: -3deg; }
.hero__title .hl { white-space: nowrap; }
@media (min-width: 980px) { .hero__title { max-width: 11.5ch; } }
@media (max-width: 400px) { .hero__title .hl { white-space: normal; } }
.hero__price { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 0.9rem; row-gap: 0.2rem; }
.hero__price-line { font-family: var(--font-ui); font-weight: 600; color: var(--ink-2); line-height: 1.3; }
.hero__price-num { font-family: var(--font-display); font-size: var(--step-5); font-weight: 800; line-height: 0.85; color: var(--ink); letter-spacing: -0.04em; font-stretch: 80%; }
.hero__note { grid-column: 1 / -1; padding-left: 1.6rem; transform: rotate(-3deg); align-items: flex-start; font-size: var(--step-1); }
.hero__note svg { width: 2.2em; margin-top: -0.9em; }
.hero__trust { --cluster: 0.5rem; }
.hero__trust .icon { color: var(--green-ink); }

.hero__stack { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-m); }
.mystery-stack {
  position: relative;
  width: min(100%, 540px);
  aspect-ratio: 1 / 0.74;
}
.mystery-stack::before, .mystery-stack::after {
  content: '';
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  width: 76%;
  aspect-ratio: 1;
  left: 12%; top: -4%;
}
.mystery-stack::before { background: var(--pink-soft); }
.mystery-stack::after { border: 3px solid var(--blue); transform: translate(14px, -10px); opacity: 0.55; }
.mystery-stack .mystery { position: absolute; width: 31%; z-index: 1; }
.mystery-stack .clue-tag { left: 6%; top: 74%; width: 100%; transform-origin: 14px 50%; }
.mystery--1 { left: 2%; top: 9%; transform: rotate(-7deg); --hover-rot: -9deg; --tag-rot: 7deg; }
.mystery--2 { left: 34.5%; top: 1%; transform: rotate(2deg); --hover-rot: 0deg; --tag-rot: -4deg; }
.mystery--3 { left: 67%; top: 11%; transform: rotate(8deg); --hover-rot: 10deg; --tag-rot: -8deg; }
.mystery--1:hover { transform: translateY(-8px) rotate(-9deg); }
.mystery--2:hover { transform: translateY(-8px) rotate(0deg); }
.mystery--3:hover { transform: translateY(-8px) rotate(10deg); }
@media (max-width: 560px) { .mystery-stack .clue-tag__text { font-size: 1.12rem; } .mystery-stack { aspect-ratio: 1 / 0.84; } }
.mystery-stack .mystery.is-flipped { z-index: 3 !important; }
.hero__dewey { position: absolute; z-index: 4; width: 20%; right: 2%; bottom: -6%; transform: rotate(9deg); }
.hero__dewey .dewey { filter: drop-shadow(3px 4px 0 rgba(27, 26, 46, 0.25)); }
.hero__stack-actions { display: flex; align-items: center; gap: var(--space-s); flex-wrap: wrap; justify-content: center; position: relative; z-index: 3; }

/* Steps ------------------------------------------------------------------ */
.steps { display: grid; gap: var(--space-l) var(--space-m); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); counter-reset: none; }
.step { display: flex; flex-direction: column; --cc-head: calc(var(--cc-line) * 3); }
.step h3 { height: var(--cc-head); display: flex; align-items: flex-end; padding: 0 2.6rem 0.4rem 0; line-height: 1.05; }
.step p { font-size: var(--step--1); color: var(--ink-2); line-height: var(--cc-line); }
.step__no {
  position: absolute;
  top: 0.35rem; right: 0.9rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--pink);
  -webkit-text-stroke: 1.5px var(--ink);
  font-stretch: 78%;
}

/* Trio + dial ------------------------------------------------------------ */
.trio__list { display: flex; flex-direction: column; gap: var(--space-m); }
.trio__item { display: grid; grid-template-columns: 6.2rem 1fr; gap: var(--space-s); align-items: start; }
.trio__item .stamp { justify-content: center; margin-top: 0.2rem; }
.trio__item h3 { margin-bottom: 0.2rem; }
.dial-demo { --pad: var(--space-l); background: var(--card); }
.dial-demo__face { width: 120px; margin: 0 auto; }
.dial-demo__desc { min-height: 3.2em; font-size: var(--step--1); color: var(--ink-2); }
.odds { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; }
.odds__bar { display: flex; height: 26px; border: 2px solid var(--ink); border-radius: 6px; overflow: hidden; background: var(--paper-2); }
.odds__seg { height: 100%; transition: width var(--dur-3) var(--ease-out); }
.odds__seg + .odds__seg { border-left: 2px solid var(--ink); }
.odds__seg--love, .odds__key--love { background: var(--blue); }
.odds__seg--near, .odds__key--near { background: var(--pink); }
.odds__seg--new, .odds__key--new { background: var(--yellow); }
.odds__legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: var(--step--1); font-family: var(--font-ui); }
.odds__legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.odds__legend b { font-variant-numeric: tabular-nums; }
.odds__key { width: 14px; height: 14px; border: 2px solid var(--ink); border-radius: 3px; }

/* Due slip & checklist --------------------------------------------------- */
.due-slip {
  max-width: 420px;
  margin-inline: auto;
  background: var(--yellow-soft);
  color: var(--ink);
  border-radius: 4px 4px 0 0;
  padding: var(--space-m) var(--space-m) var(--space-l);
  font-family: var(--font-mono);
}
.due-slip__head { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; justify-content: space-between; padding-bottom: 0.6rem; border-bottom: 2px solid var(--ink); font-weight: 700; font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; }
.due-slip__rows > div { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 3.1rem; border-bottom: 1.5px dashed var(--rule-strong); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.06em; }
.due-slip__rows > div:nth-child(2n) .stamp { --stamp-rot: 3deg; }
.due-slip__rows .stamp { font-size: 0.72rem; padding: 0.15em 0.55em; }
.checklist { display: flex; flex-direction: column; gap: 0.9rem; }
.checklist li { display: grid; grid-template-columns: 1.9rem 1fr; gap: 0.6rem; align-items: start; }
.checklist .icon { width: 1.6rem; height: 1.6rem; padding: 0.22rem; border-radius: 50%; background: var(--green-soft); color: var(--green-ink); stroke-width: 3; }

/* Plan stamps ------------------------------------------------------------ */
.stamp-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-l); }
.plan-stamp { position: relative; display: block; width: min(100%, 270px); color: var(--ink); text-decoration: none; transition: transform var(--dur-3) var(--ease-spring); }
.plan-stamp .postage { height: 100%; }
.plan-stamp:hover { transform: translateY(-6px) rotate(-1deg); color: var(--ink); text-decoration: none; }
.plan-stamp .postage__inner { border-color: var(--ink); text-align: center; align-items: center; }
.plan-stamp__name { font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); line-height: 1; letter-spacing: -0.02em; font-stretch: 82%; }
.plan-stamp__price { font-family: var(--font-display); font-weight: 800; font-size: var(--step-5); line-height: 0.9; letter-spacing: -0.05em; color: var(--blue-ink); font-stretch: 78%; }
.plan-stamp__cur { font-size: 0.45em; vertical-align: 0.9em; margin-right: 0.04em; }
.plan-stamp--featured { width: min(100%, 300px); }
.plan-stamp--featured .postage__inner { background: var(--yellow-soft); }
.plan-stamp--featured .plan-stamp__price { color: var(--pink-ink); }
.plan-stamp__badge { position: absolute; z-index: 2; top: -10px; right: -12px; --stamp-rot: 9deg; background: var(--card); font-size: 0.72rem; }

/* Passport --------------------------------------------------------------- */
.passport-lookup { max-width: 460px; }
.passport-book {
  margin: 0;
  padding: var(--space-l);
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 10px 18px 18px 10px;
  box-shadow: 8px 8px 0 var(--blue), var(--shadow-paper);
  position: relative;
}
.passport-book::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 18px;
  border-left: 2px dashed var(--rule-strong);
}
.passport-book figcaption { margin-bottom: var(--space-m); padding-left: 1.4rem; }
.journey { display: flex; flex-direction: column; gap: var(--space-m); padding-left: 1.4rem; }
.journey__stop { display: grid; grid-template-columns: 8rem 1fr; gap: var(--space-s); align-items: center; }
.journey__stop .hand { font-size: 1.35rem; margin-top: 0.1rem; }
.postmark {
  display: grid;
  place-items: center;
  width: 6.2rem;
  aspect-ratio: 1;
  padding: 0.5rem;
  border: 3px double var(--ink-2);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.15;
  color: var(--ink-2);
  transform: rotate(-8deg);
  position: relative;
  background: var(--card);
}
.postmark::after {
  content: '';
  position: absolute;
  left: 94%; top: 32%;
  width: 1.5rem; height: 36%;
  background: repeating-linear-gradient(to bottom, currentColor 0 2px, transparent 2px 7px);
  opacity: 0.35;
  border-radius: 40%;
  z-index: -1;
}
.postmark--pink { color: var(--pink-ink); border-color: var(--pink-ink); transform: rotate(6deg); }
.postmark--blue { color: var(--blue-ink); border-color: var(--blue-ink); transform: rotate(-3deg); }
.postmark--empty { border-style: dashed; border-width: 2.5px; color: var(--ink-3); transform: none; }
.postmark--empty::after { display: none; }

/* Sources & impact ------------------------------------------------------- */
.impact { display: flex; flex-wrap: wrap; gap: var(--space-l) var(--space-2xl); padding: var(--space-l); border: 2px dashed var(--rule-strong); border-radius: var(--radius-l); }
.impact__note { flex-basis: 100%; }

/* Gift band -------------------------------------------------------------- */
.gift-band { background: var(--kraft); color: var(--kraft-ink); }
.gift-band .lede, .gift-band h2 { color: var(--kraft-ink); }
.gift-band .eyebrow { color: var(--kraft-ink); }
.gift-tag {
  position: relative;
  justify-self: center;
  display: grid;
  gap: 0.15rem;
  width: min(100%, 360px);
  padding: 2rem 2rem 2rem 4.2rem;
  background: #fbf8f0;
  color: #1b1a2e;
  border: 2.5px solid #1b1a2e;
  clip-path: polygon(2.6rem 0, 100% 0, 100% 100%, 2.6rem 100%, 0 50%);
  transform: rotate(-6deg);
  filter: drop-shadow(6px 8px 0 rgba(27, 26, 46, 0.3));
}
.gift-tag .label-mono { color: #636179; }
.gift-tag .hand { color: #2b4ea2; font-size: 1.9rem; margin-bottom: 0.6rem; }
.gift-tag__hole { position: absolute; left: 1.3rem; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 2.5px solid #1b1a2e; background: var(--kraft); }


/* Where strays come from: four stamps, the full story lives on /our-story. */
.source-stamps { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-m); align-items: center; }
.source-stamps .stamp { font-size: var(--step-0); padding: 0.35em 0.8em; }
.source-stamps li:nth-child(odd) .stamp { --stamp-rot: -3deg; }
.source-stamps li:nth-child(even) .stamp { --stamp-rot: 2deg; }

/* assets/css/pages/info.css */
/* ==========================================================================
   How it works, contact, error and offline pages
   ========================================================================== */
.hw-toc { margin-top: var(--space-m); }
.hw-toc .chip { min-height: 36px; text-decoration: none; }
.hw-toc .chip:hover { background: var(--yellow-soft); }

/* Numbered flow (a real sequence) */
.hw-flow { counter-reset: hw; display: flex; flex-direction: column; gap: var(--space-l); position: relative; }
.hw-flow::before { content: ''; position: absolute; left: 17px; top: 20px; bottom: 20px; border-left: 3px dashed var(--rule-strong); }
.hw-flow__stop { counter-increment: hw; position: relative; padding-left: 3.4rem; display: flex; flex-direction: column; gap: 0.3rem; }
.hw-flow__stop::before {
  content: counter(hw);
  position: absolute; left: 0; top: -2px;
  width: 37px; height: 37px; border-radius: 50%;
  display: grid; place-items: center;
  font: 700 1rem var(--font-mono);
  background: var(--card); border: 2.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--pink);
}
.hw-flow__stop:first-child::before { background: var(--pink); color: #1b1a2e; }
.hw-flow__stop:last-child::before { background: var(--green); color: #10131f; }
.hw-flow__when { color: var(--pink-ink); }
.hw-flow__stop p { font-size: var(--step--1); line-height: 1.6; max-width: 54ch; }

/* Example calendar */
.hw-cal { margin: 0; --pad: var(--space-m); display: flex; flex-direction: column; gap: var(--space-s); }
.hw-cal__scroll { overflow-x: auto; }
.hw-cal__table { width: 100%; min-width: 300px; table-layout: fixed; border-collapse: separate; border-spacing: 4px; }
.hw-cal__table th { font: 700 var(--step--2) var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 0.2rem; }
.hw-cal__table td { height: 3.4rem; vertical-align: top; padding: 0.3rem 0.35rem; border: 1.5px solid var(--rule); border-radius: 6px; background: var(--card); transition: opacity var(--dur-2); }
.hw-cal__table td:empty { border-color: transparent; background: transparent; }
.hw-cal__n { display: block; font: 700 var(--step--1) var(--font-mono); line-height: 1; }
.hw-cal__tag { display: block; margin-top: 0.25rem; font: 700 0.6rem/1.1 var(--font-ui); letter-spacing: 0.02em; text-transform: uppercase; }
.hw-cal__table .is-closed, .hw-key--closed { background: repeating-linear-gradient(45deg, var(--paper-2) 0 4px, var(--card) 4px 8px); color: var(--ink-3); }
.hw-cal__table .is-renew, .hw-key--renew { background: var(--pink); color: #1b1a2e; border-color: var(--ink); }
.hw-cal__table .is-ship, .hw-key--ship { background: var(--blue-soft); border-color: var(--blue); }
.hw-cal__table .is-arrive, .hw-key--arrive { background: var(--green-soft); border: 1.5px dashed var(--green-ink); }
.hw-cal__table .is-ship.is-arrive { background: linear-gradient(135deg, var(--blue-soft) 50%, var(--green-soft) 50%); border-style: solid; border-color: var(--blue); }
.hw-cal__table[data-focus='is-renew'] td:not(.is-renew):not(:empty),
.hw-cal__table[data-focus='is-ship'] td:not(.is-ship):not(:empty),
.hw-cal__table[data-focus='is-arrive'] td:not(.is-arrive):not(:empty),
.hw-cal__table[data-focus='is-closed'] td:not(.is-closed):not(:empty) { opacity: 0.3; }
.hw-cal__legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-size: var(--step--1); font-family: var(--font-ui); }
.hw-cal__legend li { display: inline-flex; align-items: center; gap: 0.45rem; cursor: default; }
.hw-key { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--rule-strong); flex: none; }
@media (max-width: 520px) {
  .hw-cal__tag { display: none; }
  .hw-cal__table td { height: 2.6rem; padding: 0.25rem; }
  .hw-cal__table { border-spacing: 3px; }
}

/* Parcel contents */
.hw-parcel { display: grid; gap: var(--space-m); grid-template-columns: 1fr; }
@media (min-width: 560px) { .hw-parcel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .hw-parcel { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hw-item { display: flex; flex-direction: column; gap: 0.5rem; }
.hw-item__art {
  height: 118px; margin-bottom: 0.3rem;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--paper-2); border-radius: var(--radius-s);
  overflow: hidden;
}
.hw-art--books .mystery { width: 52px; box-shadow: 3px 3px 0 var(--ink); cursor: default; }
.hw-art--books .mystery:nth-child(1) { transform: rotate(-8deg); }
.hw-art--books .mystery:nth-child(3) { transform: rotate(7deg); }
.hw-art--books .mystery:hover { transform: none; }
.hw-minitag {
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.5rem 0.8rem 0.5rem 1.6rem; max-width: 80%;
  background: #fbf8f0; color: #1b1a2e; border: 2px solid #1b1a2e;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
  transform: rotate(-5deg);
}
.hw-minitag .label-mono { color: #636179; }
.hw-minitag .hand { color: #2b4ea2; font-size: 1.35rem; }
.hw-mininote { max-width: 82%; padding: 0.6rem 0.8rem; background: var(--yellow); color: var(--on-yellow); transform: rotate(3deg); font-size: 1.3rem; line-height: 1; box-shadow: 0 8px 12px -10px rgba(0, 0, 0, 0.5); }
.hw-minimark {
  width: 38px; height: 96px;
  border: 2px solid var(--ink);
  background: radial-gradient(circle, var(--blue) 30%, transparent 32%) 0 0 / 12px 12px, var(--pink);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%);
  transform: rotate(-10deg);
}
.hw-ministicker {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  padding: 0.6rem 0.9rem;
  background: var(--card); border: 2px dashed var(--blue-ink); border-radius: 10px;
  transform: rotate(-3deg);
}
.hw-ministicker .mono { font-weight: 700; letter-spacing: 0.08em; color: var(--blue-ink); }

.hw-trio { display: grid; gap: var(--space-s); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hw-trio__card { --cc-head: calc(var(--cc-line) * 3); text-align: center; display: grid; grid-template-rows: var(--cc-head) auto; justify-items: center; align-items: center; align-content: start; min-height: 9.6rem; }
.hw-trio__card .hand { font-size: 1.4rem; margin: 0; line-height: var(--cc-line); }
@media (max-width: 520px) { .hw-trio { grid-template-columns: 1fr; } .hw-trio__card { min-height: 0; } }
.hw-guarantee { background: var(--card); }
.hw-guarantee .stamp { align-self: flex-start; }
.hw-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-m); --pad: clamp(1.5rem, 1rem + 2vw, 2.5rem); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }

/* Contact */
.ct-grid { display: grid; gap: var(--space-xl); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .ct-grid { grid-template-columns: 1.3fr 0.7fr; } }
.ct-grid > * { min-width: 0; }
.ct-form { --pad: clamp(1.25rem, 1rem + 1.5vw, 2rem); border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.ct-row { display: grid; gap: var(--space-m); grid-template-columns: 1fr; }
@media (min-width: 620px) { .ct-row { grid-template-columns: 1fr 1fr; } }
.ct-side .catalog-card p { font-size: var(--step--1); }
.ct-email { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-height: calc(var(--cc-line) * 2); }
.ct-email code { font: 700 var(--step--1) var(--font-mono); padding: 0.3em 0.6em; background: var(--paper-2); border-radius: 6px; user-select: all; overflow-wrap: anywhere; }
.ct-done { text-align: center; align-items: center; }
.ct-done .dewey { width: 110px; }

/* Error & offline pages */
.er-page { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.er-card { display: grid; gap: var(--space-xl); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 820px) { .er-card { grid-template-columns: 0.8fr 1.2fr; } }
.er-art { position: relative; max-width: 300px; justify-self: center; width: 100%; }
.er-art .dewey { width: 100%; }
.er-code { position: absolute; right: -6%; top: -4%; --stamp-rot: 12deg; font-size: var(--step-1); background: var(--card); }
.er-links { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.er-search { max-width: 460px; }

/* assets/css/pages/join.css */
/* ==========================================================================
   Join: three-step checkout with a sticky plan summary
   ========================================================================== */
.jn-head { padding-bottom: var(--space-m); }
.jn { display: grid; gap: var(--space-xl); grid-template-columns: minmax(0, 1fr); align-items: start; }
.jn__summary { order: -1; min-width: 0; }
.jn__steps { display: flex; flex-direction: column; gap: var(--space-m); min-width: 0; }
@media (min-width: 960px) {
  .jn { grid-template-columns: minmax(0, 1fr) 330px; }
  .jn__summary { order: 0; position: sticky; top: calc(var(--header-h) + 24px); }
}

.jn-step {
  background: var(--card);
  border: 2px solid var(--rule-strong);
  border-radius: var(--radius-m);
  padding: var(--space-m) clamp(1rem, 0.7rem + 1.5vw, 2rem);
  transition: border-color var(--dur-2), box-shadow var(--dur-2);
}
.jn-step.is-open { border-color: var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.jn-step.is-locked { background: transparent; border-style: dashed; }
.jn-step.is-locked .jn-step__title { color: var(--ink-3); }
.jn-step__head { display: flex; align-items: center; gap: 0.8rem; }
.jn-step__no {
  flex: none; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--card);
  font: 700 1rem var(--font-mono);
}
.jn-step.is-open .jn-step__no { background: var(--yellow); color: var(--on-yellow); }
.jn-step.is-done .jn-step__no { background: var(--ink); color: var(--paper); font-size: 0; }
.jn-step.is-done .jn-step__no::after { content: ''; width: 12px; height: 7px; border-left: 3px solid var(--paper); border-bottom: 3px solid var(--paper); transform: rotate(-45deg) translate(1px, -1px); }
.jn-step.is-locked .jn-step__no { border-style: dashed; color: var(--ink-3); border-color: var(--rule-strong); }
.jn-step__title { font-size: var(--step-2); }
.jn-step__title:focus { outline: none; }
.jn-step__summary { margin: 0.6rem 0 0 calc(36px + 0.8rem); color: var(--ink-2); }
.jn-step__summary p { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.jn-step__summary .icon { color: var(--green-ink); }
.jn-step__body { margin-top: var(--space-m); }
.jn-quiz { margin-bottom: var(--space-m); }
.jn-quiz .icon { color: currentColor; }
.jn-switch { margin-top: var(--space-s); }
.jn-row3 { display: grid; gap: var(--space-m); grid-template-columns: 1fr; }
@media (min-width: 620px) { .jn-row3 { grid-template-columns: 1.4fr 1fr 0.8fr; } }
.jn-saved .choice { max-width: 520px; }

.jn-plan { border: 2px dashed var(--rule-strong); border-radius: var(--radius-m); padding: var(--space-s) var(--space-m) var(--space-xs); margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.jn-plan legend { padding: 0 0.4rem; }
.jn-plan__grid { display: grid; gap: var(--space-s); grid-template-columns: 1fr; }
.jn-plan .seg label { padding-inline: 0.5em; min-height: 40px; }
.jn-ok { color: var(--green-ink); font-family: var(--font-ui); font-weight: 650; min-height: 1.2em; }

.jn-bill { display: flex; flex-direction: column; gap: 0.5rem; }
.jn-bill__lines { margin: 0; display: flex; flex-direction: column; }
.jn-bill__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px solid var(--rule); }
.jn-bill__row dt { min-width: 0; }
.jn-bill__row dd { margin: 0; }
.jn-bill__row--minus dd { color: var(--green-ink); }
.jn-bill__row--total { border-bottom: 0; border-top: 2px solid var(--ink); font-family: var(--font-ui); font-weight: 800; font-size: var(--step-1); }

.jn-sum { display: flex; flex-direction: column; gap: var(--space-s); }
.jn-sum__stamp .postage__inner { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; text-align: center; border-color: var(--ink); background: var(--yellow-soft); }
.jn-sum__name { font: 800 var(--step-1) var(--font-display); font-stretch: 85%; letter-spacing: -0.02em; }
.jn-sum__price { font: 800 var(--step-4) var(--font-display); line-height: 0.95; letter-spacing: -0.04em; color: var(--pink-ink); font-stretch: 80%; }
.jn-sum__per { font-size: 0.4em; color: var(--ink-2); letter-spacing: 0; margin-left: 0.15em; }
.jn-sum__list { display: flex; flex-direction: column; gap: 0.35rem; font-size: var(--step--1); }
.jn-sum__list li { padding-left: 1.3rem; position: relative; }
.jn-sum__list li::before { content: ''; position: absolute; left: 0.1rem; top: 0.45em; width: 9px; height: 5px; border-left: 2.5px solid var(--green-ink); border-bottom: 2.5px solid var(--green-ink); transform: rotate(-45deg); }
.jn-sum__ref { white-space: normal; }
@media (max-width: 959px) {
  .jn-sum { display: grid; grid-template-columns: 140px 1fr; gap: 0.6rem var(--space-m); align-items: center; }
  .jn-sum > h2 { grid-column: 1 / -1; }
  .jn-sum__stamp { grid-row: span 2; }
  .jn-sum__stamp .postage__inner { padding: 0.6rem; }
  .jn-sum__name { font-size: var(--step-0); }
  .jn-sum__price { font-size: var(--step-3); }
}
@media (max-width: 400px) { .jn-sum { grid-template-columns: 1fr; } .jn-sum__stamp { grid-row: auto; max-width: 200px; } }

/* assets/css/pages/legal.css */
/* ==========================================================================
   Legal pages (terms, privacy, subscription terms, shipping, accessibility,
   security) and Our Story. Selectors are prefixed .legal- / .story-.
   ========================================================================== */

/* Page head ------------------------------------------------------------- */
.legal-head { display: flex; flex-direction: column; gap: var(--space-s); max-width: 860px; }
.legal-head h1 { margin-top: var(--space-2xs); }
.legal-head .lede { margin-top: 0; }
.legal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-m); font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-2); }
.legal-updated { --stamp-rot: -2deg; }
.legal-template-notice { max-width: 760px; }
.legal-template-notice p { margin: 0; }

/* Two-column layout: sticky contents + clauses -------------------------- */
.legal-layout {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
  padding-bottom: var(--space-2xl);
}
.legal-layout > * { min-width: 0; }
@media (min-width: 1000px) {
  .legal-layout { grid-template-columns: 250px minmax(0, 1fr); align-items: start; }
}

.legal-toc {
  border: 2px solid var(--ink);
  border-radius: var(--radius-m);
  background: var(--card);
  padding: var(--space-s) var(--space-m);
}
@media (min-width: 1000px) {
  .legal-toc {
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 24px);
    max-height: calc(100vh - var(--header-h) - 48px);
    overflow-y: auto;
    box-shadow: var(--shadow-hard);
  }
}
.legal-toc__title { margin: 0 0 var(--space-2xs); }
.legal-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: flex; flex-direction: column; }
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: grid;
  grid-template-columns: 1.8em 1fr;
  align-items: baseline;
  min-height: 36px;
  padding-block: 0.3rem;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dashed var(--rule);
}
.legal-toc li:last-child a { border-bottom: 0; }
.legal-toc a::before { content: counter(toc) '.'; font-family: var(--font-mono); font-size: var(--step--2); color: var(--pink-ink); }
.legal-toc a:hover { color: var(--blue-ink); text-decoration: underline; text-decoration-color: var(--pink); }
.legal-toc--plain a::before { content: ''; }
.legal-toc--plain a { grid-template-columns: 0 1fr; }

/* Clauses ----------------------------------------------------------------- */
.legal-body { max-width: var(--measure); counter-reset: clause; }
.legal-body > section { scroll-margin-top: calc(var(--header-h) + 24px); }
.legal-body > section + section { margin-top: var(--space-xl); padding-top: var(--space-l); border-top: 1.5px dashed var(--rule-strong); }
.legal-body > section > h2 { font-size: var(--step-2); margin: 0 0 var(--space-s); display: flex; gap: 0.5em; align-items: baseline; }
.legal-numbered > section > h2::before {
  counter-increment: clause;
  content: counter(clause);
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 1.7em;
  height: 1.7em;
  padding: 0 0.3em;
  border: 2px solid var(--ink);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.55em;
  font-weight: 700;
  color: var(--ink);
  background: var(--yellow-soft);
  transform: translateY(-0.2em) rotate(-3deg);
}
.legal-body h3 { font-size: var(--step-1); margin-top: 1.5em; }
.legal-body > section > * + * { margin-top: 1em; }
.legal-body ul, .legal-body ol { padding-left: 1.3em; }
.legal-body li + li { margin-top: 0.4em; }
.legal-body li::marker { color: var(--pink-ink); }
.legal-body dl { margin: 0; }

/* Plain-English callout --------------------------------------------------- */
.legal-plain {
  position: relative;
  margin: var(--space-s) 0 var(--space-m);
  padding: var(--space-s) var(--space-m) var(--space-s) calc(var(--space-m) + 6px);
  background: var(--yellow-soft);
  color: var(--ink);
  border-radius: 4px 4px 22px 4px / 4px 4px 6px 4px;
  box-shadow: 0 10px 18px -14px rgba(0, 0, 0, 0.45);
  font-size: var(--step--1);
  line-height: 1.55;
}
.legal-plain::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--pink);
  border-radius: 4px 0 0 4px;
}
.legal-plain__label {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--font-hand);
  font-size: 1.45rem;
  line-height: 1;
  color: var(--blue-ink);
}
:root[data-readable='true'] .legal-plain__label { font-size: var(--step--1); font-weight: 700; }
.legal-plain p { margin: 0; }
.legal-plain p + p { margin-top: 0.5em; }

/* Overall summary card at the top of the body */
.legal-tldr { margin-bottom: var(--space-xl); }
.legal-tldr__title {
  height: var(--cc-head);
  display: flex;
  align-items: flex-end;
  padding-bottom: 0.35rem;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 750;
  font-size: var(--step-1);
  letter-spacing: -0.015em;
}
.legal-tldr ul { margin: 0; padding-left: 1.2em; font-size: var(--step--1); }
.legal-tldr li { line-height: var(--cc-line); }
.legal-tldr li + li { margin-top: 0; }

/* Tables ------------------------------------------------------------------ */
.legal-table { overflow-x: auto; border: 2px solid var(--ink); border-radius: var(--radius-m); background: var(--card); margin-top: var(--space-s); }
.legal-table table { width: 100%; min-width: 560px; font-size: var(--step--1); }
.legal-table caption { text-align: left; padding: 0.7em 0.9em; font-family: var(--font-ui); font-weight: 700; border-bottom: 1px solid var(--rule); }
.legal-table th, .legal-table td { text-align: left; padding: 0.65em 0.9em; border-bottom: 1px solid var(--rule); vertical-align: top; }
.legal-table thead th { background: var(--paper-2); font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.legal-table tbody tr:last-child td, .legal-table tbody tr:last-child th { border-bottom: 0; }
.legal-table tbody th { font-family: var(--font-ui); font-weight: 700; }

.legal-placeholder { background: var(--lilac-soft); color: var(--ink); padding: 0 0.25em; border-radius: 4px; font-family: var(--font-mono); font-size: 0.92em; }
.legal-contact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-s); }
.legal-contact code { font-family: var(--font-mono); background: var(--paper-2); padding: 0.15em 0.45em; border-radius: 4px; border: 1px solid var(--rule); user-select: all; }

/* ==========================================================================
   Our Story
   ========================================================================== */
.story-hero { display: grid; gap: var(--space-xl); grid-template-columns: 1fr; align-items: center; padding-block: clamp(2.5rem, 2rem + 3vw, 5rem) var(--space-xl); }
.story-hero > * { min-width: 0; }
@media (min-width: 900px) { .story-hero { grid-template-columns: 1.3fr 0.7fr; } }
.story-hero h1 { margin-top: var(--space-xs); }
.story-hero .lede { margin-top: var(--space-s); }
.story-hero__art { position: relative; justify-self: center; width: min(280px, 55%); }
.story-hero__art .dewey { filter: drop-shadow(5px 6px 0 color-mix(in srgb, var(--ink) 22%, transparent)); }
.story-hero__art .stamp { position: absolute; right: -10%; bottom: -8%; --stamp-rot: 8deg; background: var(--card); }

.story-section-head { display: flex; flex-direction: column; gap: var(--space-xs); max-width: 720px; margin-bottom: var(--space-l); }

.story-essay { display: grid; gap: var(--space-l); grid-template-columns: 1fr; }
@media (min-width: 900px) { .story-essay { grid-template-columns: 1fr 1fr; gap: var(--space-xl); } }
.story-essay p { color: var(--ink-2); }
.story-essay .story-pull {
  font-family: var(--font-display);
  font-weight: 750;
  font-stretch: 85%;
  font-size: var(--step-3);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

.story-sources { display: grid; gap: var(--space-m); grid-template-columns: 1fr; }
.section--sunken .story-source { --dogear-bg: var(--paper-2); --dogear-fold: color-mix(in srgb, var(--card) 88%, var(--ink)); }
@media (min-width: 600px) and (max-width: 999px) {
  .story-sources { grid-template-columns: repeat(2, 1fr); }
  .story-sources > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .story-sources { grid-template-columns: repeat(6, 1fr); }
  .story-sources > * { grid-column: span 2; }
  .story-sources > :nth-child(4), .story-sources > :nth-child(5) { grid-column: span 3; }
}
.story-source { display: flex; flex-direction: column; gap: 0.45rem; }
.story-source h3 { font-size: var(--step-1); }
.story-source p { font-size: var(--step--1); color: var(--ink-2); line-height: 1.55; }
.story-source__cost { margin-top: auto; padding-top: var(--space-2xs); font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }

.story-grades { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.story-grade { border: 2px solid var(--ink); border-radius: var(--radius-m); padding: var(--space-s) var(--space-m); background: var(--card); display: flex; flex-direction: column; gap: 0.35rem; }
.story-grade .stamp { align-self: flex-start; font-size: 0.72rem; }
.story-grade p { font-size: var(--step--1); color: var(--ink-2); margin: 0; }
.story-grade--no { border-style: dashed; background: transparent; }

.story-afterlife { display: flex; flex-direction: column; gap: var(--space-s); margin: 0; padding: 0; list-style: none; counter-reset: after; max-width: 760px; }
.story-afterlife li { counter-increment: after; display: grid; grid-template-columns: 3rem 1fr; gap: var(--space-s); align-items: start; padding: var(--space-s) 0; border-bottom: 1.5px dashed var(--rule-strong); }
.story-afterlife li:last-child { border-bottom: 0; }
.story-afterlife li::before {
  content: counter(after);
  display: grid;
  place-items: center;
  width: 2.6rem; height: 2.6rem;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  background: var(--pink-soft);
  color: var(--ink);
}
.story-afterlife h3 { font-size: var(--step-1); margin-bottom: 0.2rem; }
.story-afterlife p { color: var(--ink-2); font-size: var(--step--1); margin: 0; }

.story-method { display: grid; gap: var(--space-l); grid-template-columns: 1fr; }
@media (min-width: 900px) { .story-method { grid-template-columns: 1.15fr 0.85fr; align-items: start; } }
.story-method .prose { max-width: none; }
.story-method .prose > :first-child { margin-top: 0; }
.story-formula {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.7;
  padding: var(--space-m);
  border: 2px dashed var(--rule-strong);
  border-radius: var(--radius-m);
  background: var(--card);
  overflow-wrap: anywhere;
}
.story-formula strong { color: var(--pink-ink); }
.story-live { display: flex; flex-wrap: wrap; gap: var(--space-l); margin-top: var(--space-m); }

.story-dewey { display: grid; gap: var(--space-l); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 800px) { .story-dewey { grid-template-columns: 220px 1fr; } }
.story-dewey__art { width: min(200px, 60%); justify-self: center; }
.story-dewey p { max-width: 60ch; }

.story-founder { max-width: 680px; }
.story-founder .hand { display: block; margin-top: var(--space-s); font-size: 2rem; }
:root[data-readable='true'] .story-founder .hand { font-size: var(--step-0); }

.story-cta { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-m); }

@media (min-width: 560px) and (max-width: 999px) {
  .legal-toc ol { display: block; columns: 2; column-gap: var(--space-l); }
  .legal-toc li { break-inside: avoid; }
}
.legal-body code { font-family: var(--font-mono); font-size: 0.92em; background: var(--paper-2); padding: 0.1em 0.35em; border-radius: 4px; border: 1px solid var(--rule); }

/* assets/css/pages/passport.css */
/* ==========================================================================
   Book Passport
   ========================================================================== */
.pp-head .split { align-items: center; }
.pp-lookup { max-width: 470px; }
.pp-sticker {
  justify-self: center;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  width: min(100%, 340px);
  padding: var(--space-l) var(--space-m);
  background: var(--card);
  border: 3px dashed var(--blue-ink);
  border-radius: 18px;
  transform: rotate(-4deg);
  box-shadow: var(--shadow-paper);
  text-align: center;
  position: relative;
}
.pp-sticker__code { font: 700 clamp(1.4rem, 1rem + 1.6vw, 2rem) var(--font-mono); letter-spacing: 0.1em; color: var(--blue-ink); }
.pp-sticker__url { font-size: var(--step--2); color: var(--ink-3); }
.pp-sticker__paw { position: absolute; right: -14px; bottom: -14px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--pink); color: #1b1a2e; border: 2px solid var(--ink); transform: rotate(14deg); }
.pp-sticker__paw .icon { width: 26px; height: 26px; }

.pp-book {
  display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 10px 20px 20px 10px;
  box-shadow: 8px 8px 0 var(--blue), var(--shadow-paper);
  overflow: hidden;
}
@media (min-width: 900px) { .pp-book { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.pp-page { padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); display: flex; flex-direction: column; gap: var(--space-m); min-width: 0; }
.pp-page--left { background: var(--paper-2); border-bottom: 2px dashed var(--rule-strong); }
@media (min-width: 900px) { .pp-page--left { border-bottom: 0; border-right: 2px dashed var(--rule-strong); } }
.pp-cover { width: min(180px, 50%); }
.pp-title { font-size: var(--step-3); }
.pp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-s); margin: 0; padding: var(--space-s) 0; border-block: 1.5px dashed var(--rule-strong); }
.pp-stats dt { font: 700 var(--step--2) var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.pp-stats dd { margin: 0.2rem 0 0; font: 800 var(--step-2) var(--font-display); font-stretch: 85%; letter-spacing: -0.02em; }
.pp-stats div:last-child dd { font: 700 var(--step--1) var(--font-ui); margin-top: 0.5rem; }
.pp-hook { font-size: var(--step--1); color: var(--ink-2); }

.pp-journey { display: flex; flex-direction: column; gap: var(--space-m); position: relative; }
.pp-journey::before { content: ''; position: absolute; left: 44px; top: 30px; bottom: 30px; border-left: 3px dashed var(--rule-strong); }
.pp-stop { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: var(--space-s); align-items: center; position: relative; }
.pp-mark {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 90px; aspect-ratio: 1;
  padding: 0.4rem;
  border: 3px double var(--ink-2); border-radius: 50%;
  background: var(--card);
  color: var(--ink-2);
  font: 700 0.66rem/1.15 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; text-align: center;
  transform: rotate(-7deg);
  position: relative; z-index: 1;
}
.pp-mark small { font-size: 0.58rem; margin-top: 0.2rem; letter-spacing: 0.04em; opacity: 0.85; }
.pp-stop:nth-child(even) .pp-mark { transform: rotate(6deg); }
.pp-mark--pink { color: var(--pink-ink); border-color: var(--pink-ink); }
.pp-mark--blue { color: var(--blue-ink); border-color: var(--blue-ink); }
.pp-mark--green { color: var(--green-ink); border-color: var(--green-ink); }
.pp-mark--empty { border: 2.5px dashed var(--rule-strong); color: var(--ink-3); transform: none !important; }
.pp-mark.is-thunk { animation: thunk var(--dur-3) var(--ease-spring); }
.pp-stop__label { font: 750 var(--step-0) var(--font-ui); }
.pp-note { font-size: 1.45rem; margin-top: 0.15rem; overflow-wrap: anywhere; }
.pp-wags { display: inline-flex; gap: 2px; margin-top: 0.15rem; color: var(--rule-strong); }
.pp-wags .icon { width: 1.05rem; height: 1.05rem; }
.pp-wags .is-on { color: var(--pink-ink); }
.pp-wags .is-on .icon { fill: currentColor; }
.pp-stop--next .pp-stop__label { color: var(--ink-2); }

.pp-stamp-wrap { margin-top: var(--space-xl); max-width: 860px; }
.pp-cta { max-width: 640px; }
.pp-form { background: var(--card); }
.pp-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.pp-methods { display: grid; gap: var(--space-xs); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.pp-methods .choice__body { padding-right: 2.6rem; justify-content: center; min-height: 58px; }
.pp-row { display: grid; gap: var(--space-m); grid-template-columns: 1fr; }
@media (min-width: 680px) { .pp-row { grid-template-columns: 1fr 1fr 1fr; } }
.pp-empty .dewey { width: 110px; }
@media (max-width: 480px) {
  .pp-stop { grid-template-columns: 72px minmax(0, 1fr); }
  .pp-mark { width: 72px; font-size: 0.56rem; }
  .pp-journey::before { left: 35px; }
}

/* assets/css/pages/plans.css */
/* ==========================================================================
   Plans: interactive builder, postage-stamp price, comparison table
   ========================================================================== */
.pl-builder { display: grid; gap: var(--space-xl); grid-template-columns: 1fr; align-items: start; }
.pl-builder > * { min-width: 0; }
@media (min-width: 960px) {
  .pl-builder { grid-template-columns: 1.25fr 0.75fr; }
  .pl-summary { position: sticky; top: calc(var(--header-h) + 24px); }
}
.pl-group { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.pl-legend {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0; margin-bottom: 0.4rem;
  font-family: var(--font-display); font-weight: 750; font-size: var(--step-1);
  letter-spacing: -0.015em; font-stretch: 88%;
}
.pl-legend__no {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--yellow); color: var(--on-yellow);
  font: 700 0.9rem var(--font-mono);
}
.pl-books { display: grid; gap: var(--space-s); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .pl-books { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pl-book .choice__body { align-items: center; text-align: center; padding-top: var(--space-s); }
.pl-pile { display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-start; height: 62px; margin-bottom: 0.35rem; }
.pl-pile i { display: block; width: 52px; height: 12px; border: 2px solid var(--ink); border-radius: 2px 3px 3px 2px; background: var(--pink); margin-top: -2px; }
.pl-pile i:nth-child(2) { background: var(--blue); width: 46px; transform: rotate(-4deg) translateX(3px); }
.pl-pile i:nth-child(3) { background: var(--yellow); width: 50px; transform: rotate(3deg) translateX(-2px); }
.pl-pile i:nth-child(4) { background: var(--green); width: 44px; transform: rotate(-2deg); }
.pl-book .choice__input:checked + .choice__body .pl-pile i { animation: pl-hop var(--dur-3) var(--ease-spring); }
.pl-book .choice__input:checked + .choice__body .pl-pile i:nth-child(2) { animation-delay: 40ms; }
.pl-book .choice__input:checked + .choice__body .pl-pile i:nth-child(3) { animation-delay: 80ms; }
.pl-book .choice__input:checked + .choice__body .pl-pile i:nth-child(4) { animation-delay: 120ms; }
@keyframes pl-hop { 40% { translate: 0 -6px; } }
.pl-fresh { border: 2px solid var(--rule-strong); border-radius: var(--radius-m); padding: var(--space-s) var(--space-m); background: var(--card); }
.pl-fresh:has(input:disabled) { opacity: 0.75; }
.pl-fresh input:disabled { cursor: not-allowed; }

.pl-summary { display: flex; flex-direction: column; gap: var(--space-m); }
.pl-pilebox { display: flex; justify-content: center; align-items: flex-end; gap: 6px; min-height: 92px; }
.pl-mini { width: 54px; flex: none; box-shadow: 3px 4px 0 var(--ink) !important; cursor: default; }
.pl-mini.mystery:hover { transform: none; }
.pl-mini:nth-child(odd) { transform: rotate(-5deg); }
.pl-mini:nth-child(even) { transform: rotate(4deg) translateY(-4px); }
.pl-mini .mystery__twine::before, .pl-mini .mystery__twine::after { box-shadow: none; }
.pl-mini--fresh {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 3 / 4.1;
  border: 2.5px solid var(--ink); border-radius: 6px;
  background: linear-gradient(120deg, var(--card) 0 40%, var(--yellow-soft) 40% 52%, var(--card) 52%);
}
.pl-mini__label { font: 700 0.62rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 0.15em 0.35em; background: var(--pink); color: #1b1a2e; border-radius: 3px; transform: rotate(-8deg); }

.pl-stamp { width: 100%; }
.pl-stamp__inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.25rem; border-color: var(--ink); background: var(--yellow-soft); padding-block: var(--space-l); }
.pl-stamp__name { font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); line-height: 1; letter-spacing: -0.02em; font-stretch: 82%; }
.pl-stamp__price { font-family: var(--font-display); font-weight: 800; font-size: clamp(3.4rem, 2.6rem + 3vw, 5rem); line-height: 0.9; letter-spacing: -0.05em; color: var(--pink-ink); font-stretch: 78%; font-variant-numeric: tabular-nums; }
.pl-stamp__cur { font-size: 0.45em; vertical-align: 0.9em; margin-right: 0.04em; }
.pl-stamp__mark { position: absolute; top: 10px; right: 8px; --stamp-rot: 10deg; font-size: 0.66rem; background: var(--card); }
.pl-facts { padding: var(--space-s) 0; border-block: 1.5px dashed var(--rule-strong); }
.pl-includes { display: flex; flex-direction: column; gap: 0.45rem; font-size: var(--step--1); }
.pl-includes li { display: flex; gap: 0.5rem; align-items: flex-start; }
.pl-includes .icon { color: var(--green-ink); margin-top: 0.15em; stroke-width: 3; }

.pl-compare .table th[scope='row'] { font-family: var(--font-ui); font-size: var(--step--1); font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--ink); background: var(--card); position: static; white-space: normal; }
.pl-compare .table { min-width: 640px; }
.pl-compare .table thead th:nth-child(4) { background: var(--yellow-soft); color: var(--ink); }
.pl-compare .table td:nth-child(4) { background: color-mix(in srgb, var(--yellow-soft) 55%, transparent); }
.pl-compare .table td.num { text-align: left; }
.pl-compare .table th:first-child { width: 26%; }

/* Mobile sticky price bar */
.pl-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--card);
  border-top: 2px solid var(--ink);
  box-shadow: 0 -8px 20px -12px rgba(0, 0, 0, 0.35);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  animation: pl-bar-in var(--dur-3) var(--ease-out);
}
.pl-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); padding-block: 0.6rem; }
.pl-bar__price strong { font: 800 var(--step-2) var(--font-display); letter-spacing: -0.03em; color: var(--pink-ink); font-stretch: 82%; }
@keyframes pl-bar-in { from { transform: translateY(100%); } }
@media (min-width: 960px) { .pl-bar { display: none !important; } }

/* assets/css/pages/quiz.css */
/* ==========================================================================
   The Sniff Test (quiz)
   ========================================================================== */
.qz { padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(3rem, 2rem + 3vw, 5rem); }
.qz__wrap { display: grid; gap: var(--space-l); grid-template-columns: minmax(0, 1fr); grid-template-areas: 'guide' 'main'; }
.qz__main { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: var(--space-m); }
.qz__guide { grid-area: guide; min-width: 0; }
.qz__rail { display: none; }
@media (min-width: 1040px) {
  .qz__wrap { grid-template-columns: 210px minmax(0, 1fr) 220px; grid-template-areas: 'rail main guide'; gap: var(--space-xl); align-items: start; }
  .qz__rail { grid-area: rail; display: flex; gap: var(--space-s); position: sticky; top: calc(var(--header-h) + 24px); }
  .qz__guide { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* Spine with a ribbon bookmark that slides down as you go */
.qz-spine {
  position: relative; flex: none;
  width: 48px; height: 440px;
  background: var(--blue);
  border: 2.5px solid var(--ink);
  border-radius: 4px 6px 6px 4px;
  box-shadow: 4px 4px 0 var(--pink);
}
.qz-spine::before, .qz-spine::after { content: ''; position: absolute; left: 0; right: 0; height: 4px; background: var(--yellow); }
.qz-spine::before { top: 14px; }
.qz-spine::after { bottom: 14px; }
.qz-spine__title {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
  writing-mode: vertical-rl;
  font: 800 1.05rem var(--font-display); font-stretch: 80%;
  letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap;
  color: var(--on-blue);
}
.qz-ribbon {
  --pct: 6%;
  position: absolute; top: -12px; right: 6px;
  width: 15px; height: calc(var(--pct) * 0.92 + 12px);
  background: var(--pink);
  border: 2px solid var(--ink); border-top: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 9px), 0 100%);
  transition: height var(--dur-4) var(--ease-spring);
  z-index: 2;
}
.qz-steps { display: flex; flex-direction: column; gap: 0.15rem; padding-top: 0.4rem; }
.qz-steps__btn {
  display: flex; align-items: center; gap: 0.5rem;
  min-height: 40px; width: 100%;
  padding: 0.2rem 0.3rem; border: 0; background: none; border-radius: 8px;
  font: 600 var(--step--1) var(--font-ui); color: var(--ink-3); text-align: left;
}
button.qz-steps__btn { color: var(--ink-2); cursor: pointer; }
button.qz-steps__btn:hover { background: var(--paper-2); color: var(--ink); }
.qz-steps__n {
  flex: none; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--rule-strong);
  font: 700 0.72rem var(--font-mono);
}
.qz-steps__n .icon { width: 14px; height: 14px; stroke-width: 3; }
.qz-steps__item.is-done .qz-steps__n { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.qz-steps__item.is-here .qz-steps__btn { color: var(--ink); font-weight: 800; }
.qz-steps__item.is-here .qz-steps__n { background: var(--yellow); color: var(--on-yellow); border-color: var(--ink); }

/* Top counter and mobile progress bar */
.qz__top { display: flex; flex-direction: column; gap: 0.45rem; }
.qz-bar { height: 10px; border: 2px solid var(--ink); border-radius: 999px; background: var(--card); overflow: hidden; }
.qz-bar__fill { display: block; height: 100%; width: var(--pct, 4%); background: var(--pink); transition: width var(--dur-4) var(--ease-out); }
@media (min-width: 1040px) { .qz-bar { display: none; } }
.qz__resume { color: var(--ink-2); }

/* The card holding each step */
.qz__form {
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--radius-m);
  box-shadow: 6px 6px 0 var(--ink);
  padding: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem);
  display: flex; flex-direction: column; gap: var(--space-l);
}
.qz__step { display: flex; flex-direction: column; gap: var(--space-m); min-width: 0; }
.qz__nav { display: flex; justify-content: space-between; align-items: center; gap: var(--space-s); padding-top: var(--space-m); border-top: 2px dashed var(--rule-strong); }
.qz__nav [data-qz-next] { margin-left: auto; }
.qz-head { display: flex; flex-direction: column; gap: 0.4rem; }
.qz-head__title { font-size: var(--step-3); }
.qz-head__title:focus { outline: none; }
.qz-head__sub { color: var(--ink-2); max-width: 56ch; }
.qz-error:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.qz-field { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.qz-legend { padding: 0; font: 750 var(--step-0) var(--font-ui); color: var(--ink); }
.qz-cards { display: grid; gap: var(--space-s); }
.qz-cards--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.qz-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qz-moods { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
@media (max-width: 420px) { .qz-moods { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qz-cards .choice__body { padding-right: 2.2rem; } }
.qz-cards .choice__body { padding-right: 2.6rem; }
.qz-giftnote .icon { color: var(--blue-ink); }
.qz-hint { display: flex; gap: 0.4rem; align-items: center; color: var(--ink-2); flex-wrap: wrap; }
.qz-hint kbd, .qz-howto kbd { font: 700 0.75rem var(--font-mono); padding: 0.05em 0.4em; border: 1.5px solid var(--rule-strong); border-bottom-width: 3px; border-radius: 5px; background: var(--paper-2); }
@media (hover: none) { .qz-hint { display: none; } }
.qz-tally { font-family: var(--font-ui); font-weight: 650; color: var(--ink-2); }

/* Genre cards cycle through four states */
.qz-genres { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
@media (max-width: 560px) {
  .qz-genres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .qz-genre { min-height: 76px; padding: 0.7rem 0.7rem 0.6rem; justify-content: flex-end; }
  .qz-genre__blurb { display: none; }
  .qz-genre__label { padding-right: 0; font-size: var(--step--1); }
  .qz-genre__state { top: 6px; right: 6px; }
}
.qz-genre {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem;
  min-height: 98px; padding: 0.85rem 0.9rem;
  text-align: left; color: var(--ink);
  background: var(--card);
  border: 2px solid var(--rule-strong); border-radius: var(--radius-m);
  transition: border-color var(--dur-2), background var(--dur-2), transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2);
}
.qz-genre:hover { border-color: var(--ink); transform: translateY(-2px); }
.qz-genre__label { font: 750 var(--step-0) var(--font-ui); line-height: 1.2; padding-right: 4.2rem; }
.qz-genre__blurb { font-size: var(--step--1); color: var(--ink-2); line-height: 1.35; }
.qz-genre__state {
  position: absolute; top: 9px; right: 9px;
  display: inline-flex; align-items: center; gap: 0.2rem;
  font: 700 0.68rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
  --stamp-rot: -6deg;
  transform: rotate(var(--stamp-rot));
}
.qz-genre__state:not(:empty) { padding: 0.15em 0.45em; border: 2px solid currentColor; border-radius: 5px; background: var(--card); }
.qz-genre__state .icon { width: 0.9rem; height: 0.9rem; stroke-width: 3; }
.qz-genre__state.is-thunk { animation: thunk var(--dur-3) var(--ease-spring); }
.qz-genre.is-like { background: var(--blue-soft); border-color: var(--blue); }
.qz-genre.is-like .qz-genre__state { color: var(--blue-ink); }
.qz-genre.is-love { background: var(--pink-soft); border-color: var(--pink-ink); box-shadow: 3px 3px 0 var(--pink); }
.qz-genre.is-love .qz-genre__state { color: var(--pink-ink); }
.qz-genre.is-love .qz-genre__state .icon { fill: currentColor; }
.qz-genre.is-never { background: var(--paper-2); border-style: dashed; }
.qz-genre.is-never .qz-genre__label { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--red-ink); }
.qz-genre.is-never .qz-genre__blurb { opacity: 0.7; }
.qz-genre.is-never .qz-genre__state { color: var(--red-ink); }

/* Hard-no chips */
.qz-chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.qz-chip { position: relative; cursor: pointer; }
.qz-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.qz-chip > span {
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 44px; padding: 0.45em 0.95em;
  border: 2px solid var(--rule-strong); border-radius: 999px;
  font: 650 var(--step--1) var(--font-ui); background: var(--card);
  transition: background var(--dur-2), color var(--dur-2), border-color var(--dur-2);
}
.qz-chip:hover > span { border-color: var(--ink); }
.qz-chip input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.qz-chip input:checked + span::before { content: '\2715'; font-weight: 800; }
.qz-chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.qz-chip__hint { font-weight: 500; opacity: 0.8; }

/* Sliders */
.qz-out { font: 650 var(--step-0) var(--font-ui); color: var(--ink); min-height: 1.5em; }
.qz-wild { --pad: var(--space-l); display: flex; flex-direction: column; align-items: center; gap: var(--space-s); text-align: center; background: var(--card); }
.qz-wild .field { width: 100%; }
.qz-wild__face { width: 140px; }
.qz-wild .qz-out { max-width: 46ch; color: var(--ink-2); font-weight: 500; font-family: var(--font-body); min-height: 3.2em; }

/* Already read */
.qz-read { display: grid; gap: var(--space-l); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .qz-read { grid-template-columns: 1fr 1fr; } }
.qz-read__list { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.qz-readlist { max-height: 340px; overflow-y: auto; border: 2px dashed var(--rule-strong); border-radius: var(--radius-m); padding: 0.4rem; display: flex; flex-direction: column; }
.qz-readlist__item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.15rem 0.2rem 0.15rem 0.6rem; border-bottom: 1px solid var(--rule); font-size: var(--step--1); }
.qz-readlist__item:last-child { border-bottom: 0; }
.qz-readlist__t { min-width: 0; overflow-wrap: anywhere; }
.qz-readlist__empty { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; padding: var(--space-l) var(--space-s); color: var(--ink-2); font-size: var(--step--1); }
.qz-readlist__empty .dewey { width: 64px; }
.qz-readlist__more { padding: 0.5rem 0.6rem; }
.qz-howto summary { cursor: pointer; font-family: var(--font-ui); font-weight: 650; color: var(--blue-ink); }
.qz-howto p { margin-top: 0.4rem; color: var(--ink-2); }

/* Dewey the guide */
.qz-guide { display: flex; align-items: center; gap: var(--space-s); }
.qz-guide__dog { width: 64px; flex: none; }
.qz-guide__bubble {
  position: relative;
  padding: 0.6rem 0.9rem;
  background: var(--card); color: var(--blue-ink);
  border: 2px solid var(--ink); border-radius: 16px;
  font-size: 1.35rem; line-height: 1.05;
  box-shadow: 3px 3px 0 var(--ink);
}
.qz-guide__bubble::before {
  content: ''; position: absolute; left: -10px; top: 50%;
  width: 16px; height: 16px; margin-top: -8px;
  background: var(--card); border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
}
:root[data-readable='true'] .qz-guide__bubble { font-size: 0.95rem; line-height: 1.35; }
@media (min-width: 1040px) {
  .qz-guide { flex-direction: column; align-items: flex-start; }
  .qz-guide__dog { width: 150px; order: 2; margin-left: 1.5rem; }
  .qz-guide__bubble { order: 1; font-size: 1.5rem; }
  .qz-guide__bubble::before { left: 46px; top: auto; bottom: -10px; margin-top: 0; transform: rotate(-45deg); }
}

/* Result */
.qz-result { display: flex; flex-direction: column; gap: var(--space-l); }
.qz-card {
  --qz-accent: var(--blue);
  --qz-on: var(--on-blue);
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 8px 8px 0 var(--pink);
  overflow: hidden;
  max-width: 640px;
}
.qz-card--pink { --qz-accent: var(--pink); --qz-on: #1b1a2e; }
.qz-card--green { --qz-accent: var(--green); --qz-on: #10131f; }
.qz-card--yellow { --qz-accent: var(--yellow); --qz-on: #1b1a2e; }
.qz-card--ink { --qz-accent: var(--band); --qz-on: var(--on-band); }
.qz-card__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3rem 1rem; padding: 0.7rem 1.1rem; background: var(--qz-accent); color: var(--qz-on); font: 700 var(--step--2) var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.qz-card__body { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--space-m); padding: var(--space-m) 1.1rem; align-items: center; }
@media (max-width: 480px) { .qz-card__body { grid-template-columns: 1fr; } .qz-card__dog { width: 100px; } }
.qz-card__text { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.qz-card__name { font: 800 var(--step-3) var(--font-display); line-height: 0.98; letter-spacing: -0.03em; font-stretch: 82%; text-wrap: balance; }
.qz-card__line { font-size: 1.45rem; }
.qz-card__tags { margin-top: 0.3rem; }
.qz-card__foot .stamp { white-space: nowrap; }
.qz-card__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-s); padding: 0.6rem 1.1rem 0.9rem; border-top: 2px dashed var(--rule-strong); }
.qz-card__barcode { width: 120px; height: 28px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 13px); opacity: 0.8; }
.qz-like { display: flex; flex-direction: column; gap: 0.6rem; }
.qz-like__grid { display: grid; gap: var(--space-m); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .qz-like__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qz-like__item { margin: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.qz-like__item figcaption { line-height: 1.3; }
.qz-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-m); border: 2px solid var(--ink); --pad: var(--space-m); }
.qz-next .small { color: var(--ink-2); }
.qz-save { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-s); padding-top: var(--space-s); border-top: 1.5px dashed var(--rule-strong); }

/* assets/css/pages/tradein.css */
/* ==========================================================================
   Trade-in
   ========================================================================== */
.ti-rates { display: flex; flex-direction: column; gap: var(--space-s); align-items: flex-start; }
.ti-rates__list { display: flex; flex-wrap: wrap; gap: var(--space-s); }
.ti-rate { width: 132px; --r: 6px; color: var(--ink); }
.ti-rate:nth-child(1) { transform: rotate(-3deg); }
.ti-rate:nth-child(3) { transform: rotate(3deg); }
.ti-rate .postage__inner { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.8rem 0.4rem; border-color: var(--ink); text-align: center; }
.ti-rate:nth-child(1) .postage__inner { background: var(--green-soft); }
.ti-rate:nth-child(2) .postage__inner { background: var(--blue-soft); }
.ti-rate:nth-child(3) .postage__inner { background: var(--yellow-soft); }
.ti-rate__amt { font: 800 var(--step-3) var(--font-display); line-height: 1; letter-spacing: -0.03em; font-stretch: 80%; }
.ti-rate__label { font: 700 var(--step--2) var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }

.ti-tool {
  display: grid; gap: var(--space-xl); grid-template-columns: minmax(0, 1fr);
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--radius-m);
  box-shadow: 6px 6px 0 var(--ink);
  padding: clamp(1.25rem, 1rem + 1.6vw, 2.5rem);
}
@media (min-width: 900px) { .ti-tool { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.ti-tool > * { min-width: 0; }
.ti-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.ti-grades summary { cursor: pointer; font-family: var(--font-ui); font-weight: 650; color: var(--blue-ink); }
.ti-grades .kv { margin-top: 0.6rem; }
.ti-total { display: flex; gap: var(--space-xl); flex-wrap: wrap; padding: var(--space-s) var(--space-m); border-radius: var(--radius-m); background: var(--yellow-soft); border: 2px dashed var(--rule-strong); }
.ti-total .stat__value { color: var(--ink); }
.ti-list { display: flex; flex-direction: column; max-height: 360px; overflow-y: auto; border-block: 1.5px dashed var(--rule-strong); }
.ti-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.6rem; padding: 0.4rem 0; border-bottom: 1px solid var(--rule); }
.ti-item:last-child { border-bottom: 0; }
.ti-item__main { display: flex; flex-direction: column; min-width: 0; }
.ti-item__title { font: 700 var(--step--1) var(--font-ui); overflow-wrap: anywhere; }
.ti-item__amt { font: 700 var(--step--1) var(--font-mono); }
.ti-empty { padding: var(--space-m) 0; }
.ti-done { grid-column: 1 / -1; background: var(--card); max-width: 680px; }
.ti-done:focus { outline: none; }
.ti-done .stamp { align-self: flex-start; }
.ti-rules { --cc-head: 3.2rem; }
.ti-rules__head { height: var(--cc-head); display: flex; align-items: flex-end; padding-bottom: 0.4rem; }
.ti-rules__list { display: flex; flex-direction: column; font-size: var(--step--1); }
.ti-rules__list li { padding-left: 1.4rem; position: relative; line-height: var(--cc-line); }
.ti-rules__list li::before { content: '\2713'; position: absolute; left: 0; font-weight: 800; color: var(--green-ink); }
.ti-rules__list--no li::before { content: '\2715'; color: var(--red-ink); }
.ti-faq { max-width: 760px; }