/* Hallmark · pre-emit critique: P5 H5 E5 S5 R4 V5
 * Hallmark · genre: playful · macrostructure: Catalogue · theme: Hum
 * tone: warm & playful · anchor hue: pear 95° (multi-accent: 95 / 235 / 18)
 * nav: N13 inline ⌘K search pill · footer: Ft8 marquee scroll
 * heads: S2 hanging · features: F6 product-card grid + F3 tabular spec sheet · CTA: C3 typographic link
 * enrichment: E5 custom illustration · Tier B hand-built SVG (48 shape glyphs + hero mark)
 * F6 knobs: ratio=1/1 square, density=4-up, micro-action=none, container=borderless tinted block
 * F3 knobs: columns=4, rules=every row, numbers=tabular
 * N13 knobs: placement=right-of-brand, groups=grouped, hints=shown
 * Ft8 knobs: speed=48s, direction=left, glyph=middot
 * card physics: borderless tinted blocks · divider language: dashed rules
 * off-grid moment: hero mark bleeds the right gutter + oversized index counter
 * designed exception: the sauce matchmaker — filtering the index is the page's toy
 * eyebrows: 0 · italic headers: 0 · invented metrics: 0
 *
 * slop test 58/58 ✓ — contrast: pass (40–41) · nav/footer/hero: pass (42–45)
 * honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49)
 * icons: pass (30) · mobile: pass (34, 49, 50–57) @ 320 / 375 / 414 / 768 / 1280 / 1920
 * Noted, theme-sanctioned: gate 13 (card hover = lift + tint + shadow) and gate 38
 * (mono as the uppercase-label register) follow Hum's documented signature moves.
 *
 * 2026-07-25 · recipe layer added (component-scope, inherits this system)
 * new section: Recipes · composition: big + small · container: inline <details>
 * glyphs borrowed from the shape sprite · no new tokens · no new motion primitive
 * slop test: universal subset re-run, pass
 */

@import url("tokens.css");

/* ══ Reset ═════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-block-start: 6rem;
}

body {
  overflow-x: clip;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  font-feature-settings: "ss01" on, "cv11" on;
  -webkit-font-smoothing: antialiased;
  padding-inline: max(0px, env(safe-area-inset-left));
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
  text-wrap: balance;
}

p { margin: 0; }
img, svg { max-width: 100%; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

a {
  color: var(--color-accent-2-deep);
  text-decoration-color: color-mix(in oklch, var(--color-accent-2-deep) 40%, transparent);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1.5px;
  transition: color var(--dur-micro) var(--ease-out),
              text-decoration-color var(--dur-micro) var(--ease-out);
}
a:hover { color: var(--color-ink); text-decoration-color: var(--color-accent-2); }

:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-input);
}

::selection { background: var(--color-accent); color: var(--color-ink); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip {
  position: absolute; inset-block-start: -100%; inset-inline-start: var(--space-md);
  z-index: var(--z-toast);
  background: var(--color-ink); color: var(--color-paper);
  padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input);
  font-weight: 600; text-decoration: none;
}
.skip:focus-visible { inset-block-start: var(--space-md); }

/* ══ Shell — one width model, band or no band ══════════════ */

.section {
  max-width: var(--shell);
  margin-inline: auto;
  padding: var(--section-gap) var(--page-gutter);
}
.section--band { max-width: none; padding-inline: 0; }
.section--band > * {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}
.section--pear    { background: var(--color-accent-tint); }
.section--cyan    { background: var(--color-accent-2-tint); }
.section--paper-2 { background: var(--color-paper-2); }

.section--tight { padding-block: calc(var(--section-gap) * 0.62); }
.section--tall  { padding-block: calc(var(--section-gap) * 1.25); }

.head-hang { max-width: 44ch; margin-block-end: var(--space-xl); }
.head-hang h2 { font-size: var(--text-display-s); }
.head-hang p {
  margin-block-start: var(--space-md);
  color: var(--color-ink-2);
  font-size: var(--text-md);
  max-width: 58ch;
}

.mono {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 500;
}

.tnum { font-variant-numeric: tabular-nums; }

/* Emphasis highlighter — clipped to the text, tracks every wrapped line */
em, .hl {
  font-style: normal;
  font-weight: 600;
  color: inherit;
  background-image: linear-gradient(var(--hl, var(--hl-pear)) 0 0);
  background-repeat: no-repeat;
  background-size: 100% 0.32em;
  background-position: 0 82%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: 0.02em;
}
.hl--cyan  { --hl: var(--hl-cyan); }
.hl--coral { --hl: var(--hl-coral); }

.rule-dash {
  border: 0;
  border-block-start: var(--rule-hair) dashed var(--color-rule-2);
  margin: 0;
}

/* ══ Buttons — the press is the feedback ═══════════════════ */

.btn {
  --btn-face: var(--color-accent);
  --btn-ink: var(--color-accent-ink);
  --btn-edge: var(--color-accent-deep);
  --btn-cast: var(--color-cast);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 44px;
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 600;
  line-height: 1; white-space: nowrap;
  border: 0; border-radius: var(--radius-pill);
  color: var(--btn-ink); background: var(--btn-face);
  cursor: pointer; position: relative; isolation: isolate;
  box-shadow: 0 4px 0 0 var(--btn-edge), 0 6px 12px -3px var(--btn-cast);
  transform: translateY(0);
  transition: transform 140ms var(--ease-press),
              box-shadow 140ms var(--ease-press),
              background-color 160ms var(--ease-out);
}
.btn:hover, .btn.is-hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 0 var(--btn-edge), 0 12px 22px -4px var(--btn-cast);
}
.btn:active, .btn.is-active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 0 var(--btn-edge), 0 2px 6px -2px var(--btn-cast);
  transition-duration: 70ms;
}
.btn:focus-visible {
  outline: 3px solid color-mix(in oklch, var(--btn-edge) 70%, var(--color-focus));
  outline-offset: 3px;
}
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
  transform: none; box-shadow: 0 4px 0 0 var(--btn-edge);
}
.btn--coral { --btn-face: var(--color-accent-3); --btn-edge: var(--color-accent-3-deep); --btn-ink: var(--color-ink); --btn-cast: var(--cast-coral); }
.btn--soft {
  background: var(--color-paper-card); color: var(--color-ink);
  box-shadow: 0 2px 0 0 var(--color-rule-2), 0 8px 18px -12px var(--color-shadow);
}
.btn--soft:hover { box-shadow: 0 4px 0 0 var(--color-rule-2), 0 14px 26px -14px var(--color-shadow); }
.btn--soft:active { box-shadow: 0 1px 0 0 var(--color-rule-2); }
.btn__arrow { transition: transform var(--dur-micro) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn__label { opacity: 0.45; }
.btn.is-loading::after {
  content: ""; position: absolute; inset-inline-end: 0.9rem;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid color-mix(in oklch, var(--btn-ink) 30%, transparent);
  border-block-start-color: var(--btn-ink);
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* C3 typographic link */
.link-t {
  display: inline-flex; align-items: baseline; gap: 0.4em;
  white-space: nowrap; font-weight: 600;
  color: var(--color-ink); text-decoration: none;
  border-block-end: 2px solid var(--color-accent);
  padding-block-end: 2px;
  transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.link-t:hover { border-block-end-color: var(--color-accent-3); color: var(--color-ink); }
.link-t span { transition: transform var(--dur-micro) var(--ease-out); }
.link-t:hover span { transform: translateX(3px); }

/* ══ N13 · Nav — inline ⌘K search pill ═════════════════════ */

.nav {
  position: sticky; inset-block-start: 0; z-index: var(--z-sticky);
  background: color-mix(in oklch, var(--color-paper) 86%, transparent);
  backdrop-filter: blur(10px);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}
.nav__inner {
  max-width: var(--shell); margin-inline: auto;
  padding: var(--space-sm) var(--page-gutter);
  display: flex; align-items: center; gap: var(--space-md);
}
.nav__brand {
  display: inline-flex; align-items: baseline; gap: 0.45rem;
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-md);
  letter-spacing: -0.03em; color: var(--color-ink); text-decoration: none;
  white-space: nowrap;
}
.nav__brand b { color: var(--color-accent-3-deep); font-weight: 800; }
.nav__brand small {
  font-family: var(--font-label); font-size: var(--text-xs);
  font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-muted);
}
.nav__rail { display: none; align-items: center; gap: var(--space-lg); margin-inline-start: auto; }
.nav__link {
  white-space: nowrap; font-weight: 600; font-size: var(--text-sm);
  color: var(--color-ink-2); text-decoration: none;
  border-block-end: 2px solid transparent; padding-block-end: 2px;
  transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.nav__link:hover { color: var(--color-ink); border-block-end-color: var(--color-accent); }

.searchpill {
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 44px; padding: 0 var(--space-xs) 0 var(--space-sm);
  margin-inline-start: auto; line-height: 1;
  background: var(--color-paper-card);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-pill);
  color: var(--color-muted); font-family: var(--font-body); font-size: var(--text-sm);
  cursor: pointer; white-space: nowrap;
  transition: border-color var(--dur-short) var(--ease-out),
              box-shadow var(--dur-short) var(--ease-out),
              transform var(--dur-short) var(--ease-out);
}
.searchpill:hover, .searchpill.is-hover {
  border-color: var(--color-accent-deep);
  box-shadow: 0 6px 16px -10px var(--color-shadow);
  transform: translateY(-1px);
}
.searchpill:active { transform: translateY(1px); }
.searchpill__kbd { display: none; gap: 2px; }
kbd {
  font-family: var(--font-label); font-size: 10px; line-height: 1;
  padding: 4px 5px; border-radius: 6px;
  background: var(--color-paper-3); color: var(--color-ink-2);
  border: var(--rule-hair) solid var(--color-rule-2);
}

/* ⌘K spotlight */
.cmdk {
  position: fixed; inset: 0; z-index: var(--z-modal);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-short) var(--ease-out), visibility var(--dur-short);
}
.cmdk.is-open { opacity: 1; visibility: visible; }
.cmdk__backdrop { position: absolute; inset: 0; background: var(--color-scrim); backdrop-filter: blur(2px); }
.cmdk__panel {
  position: absolute; inset-block-start: 12vh; inset-inline-start: 50%;
  width: min(560px, calc(100vw - 2rem));
  transform: translateX(-50%) translateY(-8px) scale(0.98);
  background: var(--color-paper-card);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-chunk);
  box-shadow: 0 32px 70px -30px var(--color-shadow);
  overflow: hidden;
  transition: transform var(--dur-short) var(--ease-out);
}
.cmdk.is-open .cmdk__panel { transform: translateX(-50%) translateY(0) scale(1); }
.cmdk__field {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-md);
  border-block-end: var(--rule-hair) dashed var(--color-rule-2);
  outline: 2px solid transparent; outline-offset: -2px;
}
.cmdk__field:focus-within { outline-color: var(--color-focus); }
.cmdk__field input {
  flex: 1; min-width: 0; border: 0; background: none;
  font-family: var(--font-body); font-size: var(--text-md); color: var(--color-ink);
}
.cmdk__field input:focus { outline: none; }
.cmdk__field input::placeholder { color: var(--color-muted); }
.cmdk__results { max-height: min(46vh, 380px); overflow-y: auto; padding: var(--space-xs); }
.cmdk__group {
  font-family: var(--font-label); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-muted);
  padding: var(--space-sm) var(--space-sm) var(--space-2xs);
}
.cmdk__item {
  display: flex; align-items: center; gap: var(--space-sm); width: 100%;
  padding: var(--space-xs) var(--space-sm); border: 0; border-radius: var(--radius-input);
  background: none; text-align: start; cursor: pointer;
  font-family: var(--font-body); font-size: var(--text-base); color: var(--color-ink);
}
.cmdk__item .glyph { width: 26px; height: 26px; flex: none; color: var(--ink-cyan); }
.cmdk__item em { background: none; color: var(--ink-coral-txt); font-weight: 700; }
.cmdk__item small { margin-inline-start: auto; color: var(--color-muted); font-size: var(--text-xs); white-space: nowrap; }
.cmdk__item.is-active, .cmdk__item:hover { background: var(--color-accent-tint); }
.cmdk__empty { padding: var(--space-lg) var(--space-sm); color: var(--color-muted); }
.cmdk__foot {
  display: flex; gap: var(--space-md); flex-wrap: wrap;
  padding: var(--space-sm) var(--space-md);
  border-block-start: var(--rule-hair) dashed var(--color-rule-2);
  background: var(--color-paper-2);
  font-size: var(--text-xs); color: var(--color-muted);
}

/* ══ Glyphs — hand-built SVG shape marks ═══════════════════ */

.glyph { display: block; width: 100%; height: 100%; color: inherit; }
.glyph--stroke { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.glyph--soft   { fill: color-mix(in oklch, currentColor 16%, transparent); stroke: currentColor; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }

/* ══ Hero — off-centre, art bleeds the right gutter ════════ */

.hero {
  max-width: var(--shell); margin-inline: auto;
  /* Bottom padding ≥ 1.3× top so the hero sits into the page, not above it. */
  padding: clamp(1.75rem, 4vw, 3.25rem) var(--page-gutter) clamp(2.75rem, 7vw, 5.5rem);
  display: grid; gap: var(--space-xl);
  align-items: center;
}
.hero__text { max-width: 46ch; }
.hero h1 {
  font-size: var(--text-display);
  letter-spacing: -0.035em;
  max-width: 11em;
}
.hero__lede {
  margin-block-start: var(--space-lg);
  font-size: var(--text-md);
  color: var(--color-ink-2);
  max-width: 46ch;
}
.hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg);
  margin-block-start: var(--space-lg);
}
.hero__meta span { font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-block-start: var(--space-xl); align-items: center; }

.hero__art { position: relative; justify-self: center; width: min(100%, 22rem); aspect-ratio: 1; }
.hero__art svg { width: 100%; height: 100%; overflow: visible; }
.spin-slow { transform-origin: 50% 50%; animation: hero-spin 44s linear infinite; }
.hero__art:hover .spin-slow, .hero__art:focus-within .spin-slow { animation-duration: 9s; }
@keyframes hero-spin { to { transform: rotate(360deg); } }
.pulse-mark { transform-origin: 50% 50%; animation: pulse-mark 4s var(--ease-in-out) infinite; }
@keyframes pulse-mark { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }

/* ══ The rule — coral, the page's one high-energy moment ═══ */

.rule-block { display: grid; gap: var(--space-xl); align-items: start; }
.rule-block__claim h2 { font-size: var(--text-display-s); }
.rule-block__claim p { margin-block-start: var(--space-md); color: var(--color-ink-2); max-width: 48ch; }
.rule-list { display: grid; gap: 0; }
.rule-list li {
  display: grid; gap: var(--space-2xs) var(--space-lg);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--space-md);
  border-block-start: var(--rule-hair) dashed var(--color-rule-2);
}
.rule-list li:last-child { border-block-end: var(--rule-hair) dashed var(--color-rule-2); }
.rule-list dt, .rule-list b { font-weight: 700; font-family: var(--font-display); letter-spacing: -0.015em; }
.rule-list p { color: var(--color-ink-2); font-size: var(--text-sm); }
.rule-list__arrow { color: var(--ink-coral-txt); font-weight: 700; }

/* ══ The index — F6 product-card grid, borderless tinted ═══ */

.index__top {
  display: grid; gap: var(--space-lg);
  align-items: end; margin-block-end: var(--space-xl);
}
.counter {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-counter); line-height: 0.9; letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}
.counter + p { color: var(--color-muted); font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; margin-block-start: var(--space-xs); }

.filters { display: grid; gap: var(--space-md); }
.filters__row { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.filters__label {
  font-family: var(--font-label); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-muted);
  width: 100%;
}

.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 44px; padding: 0 var(--space-md);
  line-height: 1; white-space: nowrap;
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  color: var(--color-ink-2);
  background: var(--color-paper-card);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-press),
              background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}
.chip:hover, .chip.is-hover { border-color: var(--color-accent-deep); color: var(--color-ink); }
.chip:active { transform: translateY(1px); }
.chip[aria-pressed="true"] {
  background: var(--chip-on, var(--color-accent));
  border-color: var(--chip-on-edge, var(--color-accent-deep));
  color: var(--color-ink);
}
.chip[data-sauce="oil"]    { --chip-on: var(--color-mint);      --chip-on-edge: var(--color-mint-deep); }
.chip[data-sauce="tomato"] { --chip-on: var(--color-accent-3);  --chip-on-edge: var(--color-accent-3-deep); }
.chip[data-sauce="chunky"] { --chip-on: var(--color-accent);    --chip-on-edge: var(--color-accent-deep); }
.chip[data-sauce="creamy"] { --chip-on: var(--color-lavender);  --chip-on-edge: var(--color-lavender-deep); }
.chip[data-sauce="broth"]  { --chip-on: var(--color-accent-2);  --chip-on-edge: var(--color-accent-2-deep); }
.chip[data-sauce="baked"]  { --chip-on: var(--color-amber);     --chip-on-edge: var(--color-amber-deep); }
/* Disabled is signalled on three channels, never opacity alone. */
.chip[disabled], .chip[aria-disabled="true"],
.searchpill[disabled], .shape[disabled] {
  opacity: 0.55; cursor: not-allowed; pointer-events: none;
  filter: grayscale(0.4); transform: none;
}

.search-inline {
  display: flex; align-items: center; gap: var(--space-xs);
  min-height: 44px; padding: 0 var(--space-md);
  background: var(--color-paper-card);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-pill);
  flex: 1 1 15rem; min-width: 0;
  outline: 2px solid transparent; outline-offset: 2px;
}
/* Focus indication is instant — never transitioned (gate 15). */
.search-inline:focus-within { border-color: var(--color-accent-2-deep); outline-color: var(--color-focus); }
.search-inline input { flex: 1; min-width: 0; border: 0; background: none; font-family: var(--font-body); font-size: var(--text-base); color: var(--color-ink); }
.search-inline input:focus { outline: none; }
.search-inline:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
.search-inline input:disabled { cursor: not-allowed; }
.search-inline .glyph { width: 18px; height: 18px; flex: none; color: var(--color-muted); }

.grid-shapes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
  gap: var(--space-md);
}
.shape {
  --tint: var(--color-accent-tint);
  --ink-accent: var(--color-accent-deep);
  display: grid; gap: var(--space-sm);
  padding: var(--space-md);
  min-width: 0;
  background: var(--tint);
  border: 0; border-radius: var(--radius-card);
  text-align: start;
  cursor: pointer; font: inherit; color: inherit;
  transition: transform var(--dur-short) var(--ease-spring),
              box-shadow var(--dur-short) var(--ease-out),
              background-color var(--dur-short) var(--ease-out);
}
.shape[data-family="lunghe"]  { --tint: var(--color-accent-tint);    --ink-accent: var(--ink-pear);  --ink-label: var(--ink-pear-txt); }
.shape[data-family="corte"]   { --tint: var(--color-accent-2-tint);  --ink-accent: var(--ink-cyan);  --ink-label: var(--ink-cyan-txt); }
.shape[data-family="ripiena"] { --tint: var(--color-accent-3-tint);  --ink-accent: var(--ink-coral); --ink-label: var(--ink-coral-txt); }
.shape[data-family="minute"]  { --tint: var(--color-mint-tint);      --ink-accent: var(--ink-mint);  --ink-label: var(--ink-mint-txt); }
.shape[data-family="fogli"]   { --tint: var(--color-lavender-tint);  --ink-accent: var(--ink-lav);   --ink-label: var(--ink-lav-txt); }

@media (hover: hover) and (pointer: fine) {
  .shape:hover {
    transform: translateY(-4px);
    background: color-mix(in oklch, var(--tint) 55%, var(--ink-accent) 12%);
    box-shadow: 0 3px 6px -4px var(--color-shadow-soft), 0 18px 34px -22px var(--color-shadow);
  }
}
.shape:active { transform: translateY(0); }
.shape.is-picked {
  box-shadow: 0 0 0 3px var(--ink-accent), 0 18px 34px -22px var(--color-shadow);
}
.shape__mark { width: 56px; height: 56px; color: var(--ink-accent); }
.shape__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); letter-spacing: -0.02em; }
.shape__gloss { font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.45; }
.shape__foot {
  display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm);
  font-family: var(--font-label); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-muted);
  margin-block-start: auto; padding-block-start: var(--space-2xs);
}
.shape__foot b { font-weight: 500; color: var(--ink-label, var(--color-ink-2)); }

/* Each card carries its note as real markup so the prose exists without
   JavaScript and for crawlers. With scripting on, the modal sheet is the
   better surface for it — so the disclosure is hidden and the whole card
   becomes the affordance instead. Without scripting it is the only way in,
   and it works natively. */
.shape__more {
  margin-block-start: var(--space-sm);
  border-block-start: var(--rule-hair) dashed var(--color-rule-2);
  padding-block-start: var(--space-sm);
}
.shape__more > summary {
  cursor: pointer;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-label, var(--color-ink-2));
  min-height: 44px;
  display: flex;
  align-items: center;
}
.shape__more > summary:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-input);
}
.shape__note {
  margin-block-start: var(--space-xs);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-ink-2);
}
.shape__gauge {
  margin-block-start: var(--space-2xs);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.has-js .shape__more { display: none; }

.index__empty {
  padding: var(--space-2xl) 0; text-align: center;
  display: none;
}
.index__empty p { color: var(--color-ink-2); }
.index__empty h3 { font-size: var(--text-lg); margin-block-end: var(--space-xs); }
.index__empty.is-shown { display: block; }

.index__live { margin-block-start: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }

/* Detail sheet */
.sheet {
  position: fixed; inset: 0; z-index: var(--z-modal);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-short) var(--ease-out), visibility var(--dur-short);
}
.sheet.is-open { opacity: 1; visibility: visible; }
.sheet__backdrop { position: absolute; inset: 0; background: var(--color-scrim); }
.sheet__panel {
  position: absolute; inset-block-end: 0; inset-inline: 0;
  max-height: 88dvh; overflow-y: auto;
  background: var(--color-paper-card);
  border-start-start-radius: var(--radius-chunk);
  border-start-end-radius: var(--radius-chunk);
  padding: var(--space-xl) var(--page-gutter) max(var(--space-xl), env(safe-area-inset-bottom));
  transform: translateY(14px);
  transition: transform var(--dur-long) var(--ease-out);
  box-shadow: 0 -20px 60px -30px var(--color-shadow);
}
.sheet.is-open .sheet__panel { transform: translateY(0); }
.sheet__head { display: flex; gap: var(--space-md); align-items: flex-start; }
.sheet__mark { width: 68px; height: 68px; flex: none; color: var(--ink-coral); }
.sheet__title { font-size: var(--text-2xl); }
.sheet__it { color: var(--color-muted); font-size: var(--text-sm); font-family: var(--font-label); letter-spacing: 0.06em; text-transform: uppercase; }
.sheet__close {
  margin-inline-start: auto; min-height: 44px; min-width: 44px;
  border-radius: var(--radius-pill); border: var(--rule-hair) solid var(--color-rule-2);
  background: var(--color-paper-2); cursor: pointer; font: inherit; color: var(--color-ink-2);
  padding-inline: var(--space-sm);
}
.sheet__close:hover { background: var(--color-paper-3); color: var(--color-ink); }
.sheet__body { margin-block-start: var(--space-lg); display: grid; gap: var(--space-md); max-width: 62ch; }
.sheet__facts { display: grid; gap: 0; margin-block-start: var(--space-md); }
.sheet__facts div {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-md);
  padding-block: var(--space-sm);
  border-block-start: var(--rule-hair) dashed var(--color-rule-2);
}
.sheet__facts dt { font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.sheet__facts dd { margin: 0; }

/* ══ Technique — numbered narrative spine ══════════════════ */

.steps { display: grid; gap: 0; counter-reset: step; }
.step {
  display: grid; gap: var(--space-xs) var(--space-lg);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--space-lg);
  border-block-start: var(--rule-hair) dashed var(--color-rule-2);
}
.step:last-child { border-block-end: var(--rule-hair) dashed var(--color-rule-2); }
.step__n {
  display: block;
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-2xl); line-height: 1; letter-spacing: -0.04em;
  color: var(--ink-cyan); font-variant-numeric: tabular-nums;
  margin-block-end: var(--space-xs);
}
.step h3 { font-size: var(--text-lg); margin-block-end: var(--space-xs); }
.step p { color: var(--color-ink-2); max-width: 62ch; }
.step p + p { margin-block-start: var(--space-sm); }

/* ══ Recipes — big + small, two card physics ═══════════════ */

/* Featured: filled, chunky, the button system's hard edge. Same <details> contract as
   the twelve rows below (recipeModel picks it up) — these rules restyle that shared
   markup to keep the tile look now that .recipe-feature is also a .recipe. */
.recipe-feature {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-radius: var(--radius-chunk);
  border-block-start: 0;
  padding: var(--space-xl);
  margin-block-end: var(--space-xl);
  box-shadow: 0 6px 0 0 var(--color-accent-deep), 0 18px 34px -22px var(--color-shadow);
}
/* The global link colour (--color-accent-2-deep) measures 2.82:1 on this pear fill —
   below 4.5:1. --color-accent-ink is the ink already calibrated for this background. */
.recipe-feature a {
  color: var(--color-accent-ink);
  text-decoration-color: color-mix(in oklch, var(--color-accent-ink) 55%, transparent);
}
.recipe-feature a:hover { color: var(--color-ink); }
.recipe__wants { font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.recipe__why { color: var(--color-ink-2); font-size: var(--text-sm); max-width: 62ch; margin-block-start: var(--space-md); }

.recipe__ratios { display: grid; gap: 0; align-content: start; }
/* Each row is its own grid, so an `auto` value column sizes to THAT row's
   max-content. One long value (besciamella: "1 L, from 100 g butter…") took
   the whole row, crushed the term column to a few px, and the term's text
   overflowed and painted over the value. The term column now takes its
   content but never less than 6rem; the value takes what is left and wraps. */
.recipe__ratios div {
  display: grid;
  grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-xs);
  border-block-start: var(--rule-hair) dashed currentColor;
}
.recipe__ratios dt { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.recipe__ratios dd {
  margin: 0; text-align: end; min-width: 0;
  overflow-wrap: anywhere; text-wrap: pretty;
}
.recipe__method { display: grid; gap: var(--space-sm); counter-reset: rstep; max-width: 62ch; }
.recipe__method li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: var(--space-sm); }
.recipe__method li::before {
  counter-increment: rstep; content: counter(rstep);
  font-family: var(--font-label); font-size: var(--text-xs);
  font-variant-numeric: tabular-nums; padding-block-start: 0.2em;
}

/* Rows: hairline-flat, no fill, dashed seams — a list, not a grid. */
.recipe-list { display: grid; gap: 0; }
.recipe { border-block-start: var(--rule-hair) dashed var(--color-rule-2); }
.recipe-list .recipe:last-child { border-block-end: var(--rule-hair) dashed var(--color-rule-2); }
.recipe__sum {
  display: grid; align-items: center; gap: var(--space-2xs) var(--space-md);
  grid-template-columns: 40px minmax(0, 1fr) 24px;
  min-height: 44px; padding-block: var(--space-md);
  cursor: pointer; list-style: none;
}
.recipe__sum::-webkit-details-marker { display: none; }
.recipe__sum .recipe__mark { width: 40px; height: 40px; grid-row: span 3; color: var(--ink-cyan); }
.recipe__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); letter-spacing: -0.02em; }
.recipe__sum .recipe__wants { color: var(--color-muted); }
.recipe__sum .recipe__fail {
  font-weight: 400; font-size: var(--text-sm); color: var(--color-ink-2);
  border: 0; padding: 0; margin: 0;
}
/* Expand affordance — its own grid column, decorative (pseudo-element, not in the a11y tree). */
.recipe__sum::after {
  content: "";
  grid-column: 3;
  grid-row: 1 / span 3;
  justify-self: center;
  align-self: center;
  width: 9px;
  height: 9px;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  color: var(--color-muted);
  transform: rotate(-45deg);
  transition: transform var(--dur-micro) var(--ease-out);
}
.recipe__sum:hover .recipe__name { color: var(--ink-cyan-txt); }
.recipe__sum:hover::after { color: var(--color-ink-2); }
.recipe__sum:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-input); }
.recipe__sum:active .recipe__name { transform: translateY(1px); }
/* Open state must read as more than a colour swap (gate: use of colour) — chevron rotates
   and the name goes to full weight, on top of the colour change shared with :hover. */
.recipe[open] .recipe__name { color: var(--ink-cyan-txt); font-weight: 800; }
.recipe[open] .recipe__sum::after { transform: rotate(45deg); color: var(--color-ink); }
.recipe[aria-disabled="true"] .recipe__sum { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

/* Feature tile restyle — same .recipe__sum/.recipe__body contract, bigger and on a fill. */
.recipe-feature .recipe__sum { grid-template-columns: 48px minmax(0, 1fr) 24px; }
.recipe-feature .recipe__mark { width: 48px; height: 48px; color: var(--color-accent-ink); }
.recipe-feature .recipe__name { font-size: var(--text-2xl); }
.recipe-feature .recipe__sum .recipe__wants { color: var(--color-accent-ink); }
.recipe-feature .recipe__sum .recipe__fail {
  font-weight: 600; font-size: var(--text-base); color: var(--color-accent-ink);
  margin-block-start: var(--space-2xs);
}
/* The featured tile is permanently open — it is a tile, not a disclosure.
   No chevron (it would promise a toggle), no pointer affordance. The JS
   guard below it in app.js is what actually prevents the toggle; this is
   the visual half of the same decision. */
.recipe-feature > .recipe__sum::after { content: none; }
.recipe-feature > .recipe__sum { cursor: default; }
.recipe-feature > .recipe__sum:hover .recipe__name { font-weight: 700; }
.recipe-feature .recipe__sum:hover .recipe__name,
.recipe-feature[open] .recipe__name { color: var(--color-ink); }
.recipe-feature .recipe__body { padding-inline-start: calc(48px + var(--space-md)); }

/* Disclosure body. Opens instantly — no animation, by ruling. */
.recipe__body {
  display: grid;
  gap: var(--space-lg);
  padding-block-end: var(--space-lg);
  padding-inline-start: calc(40px + var(--space-md));
}
.recipe__body > * { min-width: 0; }

@media (min-width: 60rem) {
  .recipe__body { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .recipe__why { grid-column: 1 / -1; }
}

@media (max-width: 39.99rem) {
  .recipe-feature { padding: var(--space-lg); }
  .recipe-feature .recipe__name { font-size: var(--text-xl); }
  .recipe-feature .recipe__sum { grid-template-columns: 36px minmax(0, 1fr) 20px; }
  .recipe-feature .recipe__mark { width: 36px; height: 36px; }
  .recipe-feature .recipe__body { padding-inline-start: 0; }
  .recipe__body { padding-inline-start: 0; }
  .recipe__sum { grid-template-columns: 32px minmax(0, 1fr) 20px; }
  .recipe__sum .recipe__mark { width: 32px; height: 32px; }
}

/* ══ F3 · Pairing matrix ═══════════════════════════════════ */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.spec {
  width: 100%; min-width: 40rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  text-align: start;
}
.spec caption {
  text-align: start; color: var(--color-muted); font-size: var(--text-sm);
  padding-block-end: var(--space-md);
}
.spec th, .spec td {
  text-align: start; padding: var(--space-md) var(--space-md) var(--space-md) 0;
  border-block-end: var(--rule-hair) dashed var(--color-rule-2);
  vertical-align: top;
}
.spec thead th {
  font-family: var(--font-label); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-muted); font-weight: 500;
  border-block-end: var(--rule-thick) solid var(--color-ink);
  padding-block: var(--space-sm);
}
.spec tbody th { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; width: 12rem; }
.spec tbody tr:hover { background: var(--color-accent-tint); }
.spec td:last-child { color: var(--color-ink-2); font-size: var(--text-sm); }
.spec .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-inline-end: 0.45rem; vertical-align: 0.02em; }

/* ══ Two-column compare (fresh vs dried) ═══════════════════ */

.compare { display: grid; gap: var(--space-lg); }
.compare__col { padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-card); }
.compare__col:first-child { background: var(--color-accent-tint); }
.compare__col h3 { font-size: var(--text-xl); }
.compare__col > p { margin-block-start: var(--space-sm); color: var(--color-ink-2); }
.compare dl { margin-block-start: var(--space-md); }
.compare dl div { display: grid; gap: var(--space-3xs); padding-block: var(--space-sm); border-block-start: var(--rule-hair) dashed var(--color-rule-2); }
.compare dt { font-family: var(--font-label); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }
.compare dd { margin: 0; font-size: var(--text-sm); }

/* ══ Regions — dense linked index ══════════════════════════ */

.regions { display: grid; gap: 0; }
.region {
  display: grid; gap: var(--space-2xs) var(--space-lg);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--space-md);
  border-block-start: var(--rule-hair) dashed var(--color-rule-2);
}
.regions .region:last-child { border-block-end: var(--rule-hair) dashed var(--color-rule-2); }
.region__name { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; }
.region__list { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.region__list button {
  font: inherit; font-size: var(--text-sm); font-weight: 500;
  background: none; border: 0; padding: var(--space-3xs) 0; cursor: pointer;
  color: var(--color-ink-2);
  border-block-end: 2px solid var(--color-accent-2-tint);
  transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.region__list button:hover { color: var(--color-ink); border-block-end-color: var(--color-accent-2); }
.region__note { color: var(--color-muted); font-size: var(--text-sm); }

/* ══ Glossary ══════════════════════════════════════════════ */

.gloss { display: grid; gap: 0; }
.gloss div { padding-block: var(--space-md); border-block-start: var(--rule-hair) dashed var(--color-rule-2); }
.gloss dt { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; }
.gloss dd { margin: 0; margin-block-start: var(--space-2xs); color: var(--color-ink-2); font-size: var(--text-sm); max-width: 68ch; }

/* ══ Closing note ══════════════════════════════════════════ */

.close-note { display: grid; gap: var(--space-lg); }
.close-note h2 { font-size: var(--text-display-s); max-width: 20ch; }
.close-note p { color: var(--color-ink-2); max-width: 56ch; }

/* ══ Ft8 · Footer marquee ══════════════════════════════════ */

.foot { border-block-start: var(--rule-thick) solid var(--color-ink); }
.foot-marquee { overflow: hidden; background: var(--color-accent); }
.foot-marquee__track {
  display: flex; gap: 0; white-space: nowrap;
  padding-block: var(--space-md);
  animation: foot-marquee 48s linear infinite;
  width: max-content;
}
.foot-marquee__track span {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: 0.06em; font-size: clamp(0.95rem, 2vw, 1.35rem);
  color: var(--color-accent-ink);
}
/* WCAG 2.2.2 — moving content must be pausable. */
.foot-marquee:hover .foot-marquee__track,
.foot-marquee:focus-within .foot-marquee__track { animation-play-state: paused; }
@keyframes foot-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.foot__meta {
  max-width: var(--shell); margin-inline: auto;
  padding: var(--space-lg) var(--page-gutter) max(var(--space-xl), env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); align-items: baseline;
}
.foot__meta p { color: var(--color-muted); font-size: var(--text-sm); }
.foot__link { white-space: nowrap; font-size: var(--text-sm); font-weight: 600; }

/* ══ Star-burst · one micro-celebration ════════════════════ */

.star-burst {
  position: fixed; z-index: var(--z-toast);
  width: 24px; height: 24px; margin: -12px 0 0 -12px;
  background:
    linear-gradient(90deg, transparent 47%, var(--color-accent-3) 47% 53%, transparent 53%),
    linear-gradient(0deg,  transparent 47%, var(--color-accent-3) 47% 53%, transparent 53%);
  animation: star-burst 420ms var(--ease-out) forwards;
  pointer-events: none;
}
@keyframes star-burst {
  0%   { transform: scale(0) rotate(0deg);    opacity: 1; }
  60%  { transform: scale(1.2) rotate(35deg); opacity: 0.9; }
  100% { transform: scale(1.4) rotate(45deg); opacity: 0; }
}

/* ══ Reveal — one orchestrated entrance ════════════════════ */

.reveal { opacity: 0; transform: translateY(12px); }
.reveal.is-in {
  animation: reveal 600ms var(--ease-snap) forwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}
@keyframes reveal { to { opacity: 1; transform: none; } }

/* ══ Breakpoints ═══════════════════════════════════════════ */

/* N13 collapses to a search icon on phones — the pill keeps its 44 px target. */
@media (max-width: 39.99rem) {
  .searchpill__text { display: none; }
  .searchpill { padding-inline: 0.85rem; }
  .nav__brand small { display: none; }
  /* 59 one-up cards is a long scroll on a phone — tighten the rhythm. */
  .shape { gap: var(--space-xs); padding: var(--space-md) var(--space-md) var(--space-sm); }
  .shape__mark { width: 42px; height: 42px; }
  .grid-shapes { gap: var(--space-sm); }
  /* Keep long shape names whole in the sheet head. */
  .sheet__head { flex-wrap: wrap; }
  .sheet__mark { width: 46px; height: 46px; }
  .sheet__title { font-size: var(--text-xl); }
  .sheet__facts div { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); }
}

@media (min-width: 40rem) {
  .searchpill__kbd { display: inline-flex; }
  /* .step stays single-column: a number sitting beside a heading is gate-54 slop. */
  .rule-list li, .region { grid-template-columns: 7.5rem minmax(0, 1fr); }
  .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .index__top { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-xl); }
}

@media (min-width: 60rem) {
  .nav__rail { display: flex; margin-inline: auto; }
  .searchpill { margin-inline-start: 0; }
  .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-2xl); }
  .hero__art { justify-self: end; width: min(132%, 34rem); margin-inline-end: clamp(-6rem, -4.5vw, 0rem); }
  .rule-block { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-3xl); }
  .close-note { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }

  /* The bottom sheet becomes a centred dialog once there's room for one. */
  .sheet__panel {
    inset-block: 50% auto;
    inset-inline: 50% auto;
    width: min(44rem, calc(100vw - 4rem));
    max-height: 82dvh;
    padding: var(--space-xl);
    border-radius: var(--radius-chunk);
    transform: translate(-50%, -46%) scale(0.985);
    box-shadow: 0 40px 90px -40px var(--color-shadow);
  }
  .sheet.is-open .sheet__panel { transform: translate(-50%, -50%) scale(1); }
}

@media (pointer: coarse) {
  .btn, .chip, .searchpill { min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .spin-slow, .pulse-mark, .foot-marquee__track { animation: none !important; }
  .recipe__sum::after { transition: none !important; }
  .star-burst { display: none; }
  .reveal { opacity: 1; transform: none; }
  .reveal.is-in { animation: none; }
  .shape:hover { transform: none; }
}

@media print {
  .nav, .cmdk, .sheet, .foot-marquee, .filters { display: none; }
  .shape { break-inside: avoid; }
  .recipe { break-inside: avoid; }
}