/* The Unreasonable Kitchen — generated from design/tokens.json; edit the JSON, not this */

:root, [data-theme="light"] {
  --surface-100: #fff4de;
  --surface-200: #ffffff;
  --surface-300: #ffe6b8;
  --grid: #f6dfb2;
  --ink: #26170f;
  --ink-muted: #6b5542;
  --ink-fixed: #26170f;
  --line: #26170f;
  --amber: #f4a11d;
  --amber-text: #8a5300;
  --amber-tint: #ffe9bf;
  --yolk: #ffd43b;
  --tomato: #e63f24;
  --tomato-text: #b02a12;
  --tomato-tint: #ffd9d0;
  --mint: #37c391;
  --science-text: #0b6b4d;
  --science-tint: #cff3e4;
  --lab: #2f6fed;
  --lab-text: #1d4fbf;
  --lab-tint: #d6e4ff;
  --grape: #8b5cf6;
  --grape-text: #6236c9;
  --grape-tint: #e6dcff;
  --readout-bg: #26170f;
  --readout-digit: #ffc766;
  --readout-dim: #c2b3a6;
  --on-dark: #fff4de;
  --shadow-sticker: 2px 2px 0 #26170f;
  --shadow-card: 4px 4px 0 #26170f;
  --shadow-lift: 7px 7px 0 #26170f;
}

[data-theme="dark"] {
  --surface-100: #17131f;
  --surface-200: #221c2d;
  --surface-300: #2d2540;
  --grid: #221b30;
  --ink: #fff1dc;
  --ink-muted: #c2b3a6;
  --ink-fixed: #26170f;
  --line: #fff1dc;
  --amber: #f7b23b;
  --amber-text: #ffc766;
  --amber-tint: #4a3410;
  --yolk: #ffd43b;
  --tomato: #ff6a4d;
  --tomato-text: #ff8a73;
  --tomato-tint: #4a1f17;
  --mint: #3fd39e;
  --science-text: #7fe3bd;
  --science-tint: #163d30;
  --lab: #5b8dff;
  --lab-text: #9ab8ff;
  --lab-tint: #1f2e55;
  --grape: #a98bff;
  --grape-text: #c6b3ff;
  --grape-tint: #31254f;
  --readout-bg: #0b0810;
  --readout-digit: #ffc766;
  --readout-dim: #c2b3a6;
  --on-dark: #fff1dc;
  --shadow-sticker: 2px 2px 0 #fff1dc;
  --shadow-card: 4px 4px 0 #fff1dc;
  --shadow-lift: 7px 7px 0 #fff1dc;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --surface-100: #17131f;
    --surface-200: #221c2d;
    --surface-300: #2d2540;
    --grid: #221b30;
    --ink: #fff1dc;
    --ink-muted: #c2b3a6;
    --ink-fixed: #26170f;
    --line: #fff1dc;
    --amber: #f7b23b;
    --amber-text: #ffc766;
    --amber-tint: #4a3410;
    --yolk: #ffd43b;
    --tomato: #ff6a4d;
    --tomato-text: #ff8a73;
    --tomato-tint: #4a1f17;
    --mint: #3fd39e;
    --science-text: #7fe3bd;
    --science-tint: #163d30;
    --lab: #5b8dff;
    --lab-text: #9ab8ff;
    --lab-tint: #1f2e55;
    --grape: #a98bff;
    --grape-text: #c6b3ff;
    --grape-tint: #31254f;
    --readout-bg: #0b0810;
    --readout-digit: #ffc766;
    --readout-dim: #c2b3a6;
    --on-dark: #fff1dc;
    --shadow-sticker: 2px 2px 0 #fff1dc;
    --shadow-card: 4px 4px 0 #fff1dc;
    --shadow-lift: 7px 7px 0 #fff1dc;
  }
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --measure-recipe: 680px;
  --measure-page: 1080px;
  --line-width: 2px;
  --grid-pitch: 28px;
  --font-display: "Bricolage Grotesque", "Arial Black", Impact, sans-serif;
  --font-sans: "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Space Mono", "SF Mono", Consolas, monospace;
}

.display { font-family: var(--font-display); font-size: 56px; line-height: 58px; font-weight: 800; letter-spacing: -0.02em; }

.title { font-family: var(--font-display); font-size: 28px; line-height: 32px; font-weight: 800; letter-spacing: -0.01em; }

.title-sm { font-family: var(--font-display); font-size: 24px; line-height: 28px; font-weight: 800; letter-spacing: -0.01em; }

.label { font-family: var(--font-display); font-size: 13px; line-height: 16px; font-weight: 800; letter-spacing: 0.08em; }

.body { font-family: var(--font-sans); font-size: 17px; line-height: 27px; font-weight: 400; }

.body-strong { font-family: var(--font-sans); font-size: 17px; line-height: 27px; font-weight: 800; }

.body-sm { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 400; }

.sticker { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 800; letter-spacing: 0.08em; }

.readout { font-family: var(--font-mono); font-size: 15px; line-height: 20px; font-weight: 700; }

.recipe-plain { font-family: var(--font-mono); font-size: 14px; line-height: 22px; font-weight: 400; }

/* The Unreasonable Kitchen — component stylesheet, version 2: lab notebook meets diner.
   Loads after tokens.css. Every colour, length, radius and shadow is a token. */

html {
  font-family: var(--font-sans); color: var(--ink); -webkit-font-smoothing: antialiased;
  background-color: var(--surface-100);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--grid-pitch) var(--grid-pitch);
}
body { margin: 0; font-variant-numeric: tabular-nums; }
a { color: var(--lab-text); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--amber); text-underline-offset: 0.15em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--lab); outline-offset: 3px; border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---- Header ---- */
.tuk-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; max-width: var(--measure-page); margin: 0 auto; padding: var(--space-4); border-bottom: var(--line-width) solid var(--line); }
.tuk-header__name { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-size: 24px; line-height: 28px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.tuk-header__name svg { width: 28px; height: 28px; color: var(--amber); }
.tuk-header__name:hover { color: var(--amber-text); }
.tuk-header__nav { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.tuk-header__link { font-size: 15px; line-height: 20px; font-weight: 800; padding: var(--space-2) var(--space-3); border: var(--line-width) solid transparent; border-radius: var(--radius-pill); color: var(--ink); text-decoration: none; transition: transform .12s, box-shadow .12s; }
.tuk-header__link:hover { border-color: var(--line); background: var(--surface-200); box-shadow: var(--shadow-sticker); transform: translate(-1px, -1px); }
.tuk-header__link.is-active { background: var(--amber); color: var(--ink-fixed); border-color: var(--line); box-shadow: var(--shadow-sticker); }

/* ---- Recipe card ---- */
.tuk-grid { display: grid; gap: var(--space-8); grid-template-columns: 1fr; max-width: var(--measure-page); margin: 0 auto; padding: var(--space-4); }
@media (min-width: 600px) { .tuk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .tuk-grid { grid-template-columns: repeat(3, 1fr); padding: var(--space-8); } }
.tuk-card { position: relative; display: flex; flex-direction: column; background: var(--surface-200); border: var(--line-width) solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: visible; color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.tuk-card:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-lift); }
.tuk-card__media { aspect-ratio: 16 / 9; background: var(--surface-300); display: block; width: 100%; object-fit: cover; border-bottom: var(--line-width) solid var(--line); border-radius: calc(var(--radius-lg) - var(--line-width)) calc(var(--radius-lg) - var(--line-width)) 0 0; }
.tuk-card__media--empty { display: grid; place-items: center; color: var(--amber); background-image: radial-gradient(circle, var(--grid) 2px, transparent 2.5px); background-size: 16px 16px; }
.tuk-card__media--empty svg { width: 72px; height: 72px; stroke-width: 1.5; }
.tuk-card > .tuk-tag { position: absolute; top: calc(-1 * var(--space-3)); left: var(--space-4); transform: rotate(-3deg); }
.tuk-card:nth-child(even) > .tuk-tag { transform: rotate(2deg); }
.tuk-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
@media (min-width: 900px) { .tuk-card__body { padding: var(--space-6); } }
.tuk-card__name { font-family: var(--font-display); font-size: 24px; line-height: 28px; font-weight: 800; letter-spacing: -0.01em; margin: 0; color: var(--ink); }
.tuk-card:hover .tuk-card__name { color: var(--amber-text); }
.tuk-card__hook { font-size: 15px; line-height: 22px; margin: 0; color: var(--ink-muted); }
.tuk-card__meta { margin-top: var(--space-2); }

/* ---- Series sticker ---- */
.tuk-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px var(--space-3); border: var(--line-width) solid var(--line); border-radius: var(--radius-pill); background: var(--surface-200); color: var(--ink); box-shadow: var(--shadow-sticker); text-decoration: none; white-space: nowrap; transition: transform .12s, box-shadow .12s; }
.tuk-tag svg { width: 14px; height: 14px; flex: none; }
a.tuk-tag:hover, button.tuk-tag:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-card); }
.tuk-tag[aria-pressed="true"] { background: var(--amber); color: var(--ink-fixed); }
.tuk-tag--reaction { background: var(--science-tint); }
.tuk-tag--never-stop { background: var(--tomato-tint); }
.tuk-tag--the-gradient { background: var(--amber-tint); }
.tuk-tag--wrong-oven { background: var(--yolk); color: var(--ink-fixed); }
.tuk-tag--breaking-point { background: var(--grape-tint); }
.tuk-tag--impossible-kitchen { background: var(--lab-tint); }

/* ---- Meta line ---- */
.tuk-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 22px; font-weight: 700; color: var(--ink-muted); }
.tuk-meta__item { display: inline-flex; align-items: center; gap: var(--space-1); }
.tuk-meta__item + .tuk-meta__item::before { content: "•"; margin-right: var(--space-2); color: var(--amber); }

/* ---- Readout: the instrument panel ---- */
.tuk-readout { display: inline-flex; align-items: baseline; gap: var(--space-2); font-family: var(--font-mono); font-size: 15px; line-height: 20px; font-weight: 700; white-space: nowrap; padding: 1px var(--space-2); border-radius: var(--radius-sm); background: var(--readout-bg); border: var(--line-width) solid var(--line); vertical-align: baseline; }
.tuk-readout__us { color: var(--readout-digit); }
.tuk-readout__sep { color: var(--readout-dim); }
.tuk-readout__metric { color: var(--readout-dim); font-weight: 400; }
.tuk-readout--large { font-size: 48px; line-height: 52px; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.tuk-readout--large .tuk-readout__metric { font-size: 24px; }

/* ---- Recipe body ---- */
.tuk-recipe { max-width: var(--measure-recipe); margin: 0 auto; padding: var(--space-6) var(--space-4); }
@media (min-width: 900px) { .tuk-recipe { padding: var(--space-16) var(--space-8); } }
.tuk-recipe > * + * { margin-top: var(--space-8); }
.tuk-recipe > .tuk-tag + h1 { margin-top: var(--space-4); }
.tuk-recipe h1 { font-family: var(--font-display); font-size: 44px; line-height: 46px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 var(--space-4); }
@media (min-width: 900px) { .tuk-recipe h1 { font-size: 56px; line-height: 58px; } }
.tuk-hook { font-family: var(--font-display); font-size: 26px; line-height: 38px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 var(--space-4); color: var(--ink); }
.tuk-hook mark, .tuk-hl { background: var(--yolk); color: var(--ink-fixed); padding: 0 0.3em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tuk-heading { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-size: 24px; line-height: 28px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 var(--space-4); padding-bottom: var(--space-2); border-bottom: 3px dashed var(--amber); }

/* ---- Ingredients ---- */
.tuk-ingredients { background: var(--surface-200); border: var(--line-width) solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-4); }
@media (min-width: 900px) { .tuk-ingredients { padding: var(--space-6); } }
.tuk-ingredients__group + .tuk-ingredients__group { margin-top: var(--space-6); }
.tuk-ingredients__heading { font-family: var(--font-display); font-size: 13px; line-height: 16px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--space-2); }
.tuk-ingredients__list { list-style: none; margin: 0; padding: 0; }
.tuk-ingredient { display: grid; grid-template-columns: minmax(104px, auto) 1fr; gap: var(--space-3); padding: var(--space-2) 0; border-top: 2px dotted var(--surface-300); font-size: 17px; line-height: 27px; }
.tuk-ingredient:first-child { border-top: 0; }
.tuk-ingredient__qty { font-weight: 800; color: var(--amber-text); }
.tuk-ingredient__metric { color: var(--ink-muted); }

/* ---- Method ---- */
.tuk-method { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.tuk-step { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-4); padding: var(--space-4) 0; font-size: 17px; line-height: 27px; }
.tuk-step:first-child { padding-top: 0; }
.tuk-step__body { min-width: 0; }
.tuk-step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; margin-top: -4px; font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--ink-fixed); background: var(--amber); border: var(--line-width) solid var(--line); border-radius: var(--radius-pill); box-shadow: var(--shadow-sticker); }
.tuk-step__reason { color: var(--science-text); font-weight: 700; }
.tuk-step__reason::before { content: " ("; }
.tuk-step__reason::after { content: ")"; }

/* ---- Callouts: science and safety ---- */
.tuk-callout { display: grid; grid-template-columns: 44px 1fr; gap: var(--space-2) var(--space-3); align-items: start; padding: var(--space-4); border: var(--line-width) solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-card); font-size: 15px; line-height: 22px; }
.tuk-callout__icon { grid-row: 1 / span 3; display: grid; place-items: center; width: 44px; height: 44px; border: var(--line-width) solid var(--line); border-radius: var(--radius-pill); background: var(--surface-200); }
.tuk-callout__icon svg { width: 24px; height: 24px; }
.tuk-callout--science { background: var(--science-tint); }
.tuk-callout--science .tuk-callout__icon { background: var(--mint); color: var(--ink-fixed); }
.tuk-callout--safety { background: var(--tomato-tint); }
.tuk-callout--safety .tuk-callout__icon { background: var(--surface-200); color: var(--tomato-text); }
.tuk-callout__label { grid-column: 2; font-family: var(--font-display); font-size: 13px; line-height: 16px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin: 0; align-self: center; }
.tuk-callout--science .tuk-callout__label, .tuk-callout--science .tuk-callout__link { color: var(--science-text); }
.tuk-callout--safety .tuk-callout__label { color: var(--tomato-text); }
.tuk-callout__text { grid-column: 2; margin: 0; color: var(--ink); font-size: 16px; line-height: 25px; }
.tuk-callout__link { grid-column: 2; display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 800; text-decoration: underline; text-decoration-color: currentColor; width: fit-content; }
.tuk-callout__link svg { width: 16px; height: 16px; }

/* ---- Buttons ---- */
.tuk-btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 800; padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); border: var(--line-width) solid var(--line); background: var(--amber); color: var(--ink-fixed); box-shadow: var(--shadow-sticker); cursor: pointer; text-decoration: none; transition: transform .12s, box-shadow .12s; }
.tuk-btn:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-card); }
.tuk-btn:active { transform: translate(2px, 2px); box-shadow: none; }
.tuk-btn--ghost { background: var(--surface-200); color: var(--ink); }
.tuk-btn svg { width: 18px; height: 18px; }
.tuk-btn.is-done { background: var(--mint); color: var(--ink-fixed); }

/* ---- Copy block: a page torn from the lab notebook ---- */
.tuk-copy { border: var(--line-width) dashed var(--line); border-radius: var(--radius-md); background: var(--surface-200); overflow: hidden; }
.tuk-copy__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--surface-300); border-bottom: var(--line-width) dashed var(--line); }
.tuk-copy__label { font-family: var(--font-display); font-size: 13px; line-height: 16px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin: 0; }
.tuk-copy__pre { margin: 0; padding: var(--space-4) var(--space-4) var(--space-4) var(--space-8); font-family: var(--font-mono); font-size: 14px; line-height: 22px; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; background-image: repeating-linear-gradient(transparent 0 21px, var(--grid) 21px 22px), linear-gradient(90deg, transparent 0 22px, var(--tomato) 22px 24px, transparent 24px); background-origin: content-box, padding-box; background-attachment: local; }

/* ---- Video facade ---- */
.tuk-video { position: relative; aspect-ratio: 16 / 9; background: var(--surface-300); border: var(--line-width) solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.tuk-video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tuk-video__play { position: absolute; inset: 0; width: 100%; height: 100%; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; color: var(--ink-fixed); }
.tuk-video__play span { display: grid; place-items: center; width: 84px; height: 84px; border-radius: var(--radius-pill); background: var(--amber); border: var(--line-width) solid var(--line); box-shadow: var(--shadow-card); transition: transform .12s, background .12s; }
.tuk-video__play:hover span { background: var(--yolk); transform: translate(-2px, -2px); }
.tuk-video__play svg { width: 36px; height: 36px; margin-left: 4px; }
.tuk-video__play:focus-visible { outline-offset: -6px; }
.tuk-video__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tuk-video__caption { font-size: 15px; line-height: 22px; color: var(--ink-muted); margin: var(--space-3) 0 0; }


/* ---- Site shell (not a design-system component) ---- */
.tuk-page { max-width: var(--measure-page); margin: 0 auto; padding: var(--space-8) var(--space-4); }
@media (min-width: 900px) { .tuk-page { padding: var(--space-12) var(--space-8); } }
.tuk-hero { display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: center; margin-bottom: var(--space-12); }
@media (min-width: 800px) { .tuk-hero { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-12); } }
.tuk-hero h1 { font-family: var(--font-display); font-size: 48px; line-height: 50px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 var(--space-4); }
@media (min-width: 900px) { .tuk-hero h1 { font-size: 64px; line-height: 64px; } }
.tuk-hero p { font-size: 18px; line-height: 28px; font-weight: 700; color: var(--ink-muted); margin: 0; max-width: 54ch; }
.tuk-hero__art { justify-self: center; width: min(320px, 80vw); }
.tuk-flask { display: block; width: 100%; height: auto; overflow: visible; }
.fk-line { fill: none; stroke: var(--line); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fk-plate { fill: var(--surface-200); }
.fk-amber { fill: var(--amber); }
.fk-tomato { fill: var(--tomato); }
.fk-bubble { fill: var(--surface-100); stroke: var(--line); stroke-width: 2.5; }
.fk-mint { fill: var(--mint); stroke: var(--line); stroke-width: 2.5; }
.fk-readout { fill: var(--readout-bg); stroke: var(--line); stroke-width: 2.5; }
.fk-digit { fill: var(--readout-digit); font-family: var(--font-mono); font-weight: 700; font-size: 17px; }
.fk-float { animation: tuk-bob 1.8s ease-in-out infinite alternate; }
@keyframes tuk-bob { from { transform: translateY(0); } to { transform: translateY(-7px); } }
.tuk-hl { background: var(--yolk); color: var(--ink-fixed); padding: 0 0.2em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tuk-hl--mint { background: var(--mint); }
.tuk-chips { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-8); padding: 0; list-style: none; }
.tuk-grid { padding: var(--space-3) 0 0; }
.tuk-empty { font-size: 17px; line-height: 27px; font-weight: 700; color: var(--ink); background: var(--surface-200); border: var(--line-width) dashed var(--line); border-radius: var(--radius-lg); padding: var(--space-6); max-width: var(--measure-recipe); }
.tuk-section-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); max-width: var(--measure-recipe); }
.tuk-section-list li { display: grid; gap: var(--space-2); background: var(--surface-200); border: var(--line-width) solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-4) var(--space-6); }
.tuk-section-list h2 { font-family: var(--font-display); font-size: 24px; line-height: 28px; font-weight: 800; letter-spacing: -0.01em; margin: 0; }
.tuk-section-list h2 a { color: var(--ink); text-decoration: none; }
.tuk-section-list h2 a:hover { color: var(--amber-text); }
.tuk-section-list p { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.tuk-section-list .tuk-tag { justify-self: start; }
.tuk-footer { max-width: var(--measure-page); margin: var(--space-16) auto 0; padding: var(--space-8) var(--space-4); border-top: var(--line-width) solid var(--line); font-size: 15px; line-height: 22px; font-weight: 700; color: var(--ink-muted); }
.tuk-footer p { margin: 0 0 var(--space-2); }
.tuk-footer__signoff { font-family: var(--font-display); font-size: 28px; line-height: 32px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Recipe page ---- */
.tuk-recipe figure { margin: 0; }
.tuk-related { margin-top: var(--space-12); }
.tuk-related > h2 { font-family: var(--font-display); font-size: 24px; line-height: 28px; font-weight: 800; margin: 0 0 var(--space-4); }
.tuk-related .tuk-grid { grid-template-columns: 1fr; padding: var(--space-3) 0 0; }
@media (min-width: 600px) { .tuk-related .tuk-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- Science explainer ---- */
.tuk-prose { max-width: var(--measure-recipe); margin: 0 auto; padding: var(--space-6) var(--space-4); font-size: 17px; line-height: 27px; }
@media (min-width: 900px) { .tuk-prose { padding: var(--space-16) var(--space-8); } }
.tuk-prose > .tuk-tag { margin-bottom: var(--space-4); }
.tuk-prose h1 { font-family: var(--font-display); font-size: 44px; line-height: 46px; font-weight: 800; letter-spacing: -0.02em; margin: var(--space-3) 0 var(--space-4); }
@media (min-width: 900px) { .tuk-prose h1 { font-size: 56px; line-height: 58px; } }
.tuk-prose .tuk-lede { font-size: 20px; line-height: 30px; font-weight: 700; color: var(--ink-muted); margin: 0 0 var(--space-8); }
.tuk-prose h2 { font-family: var(--font-display); font-size: 24px; line-height: 28px; font-weight: 800; letter-spacing: -0.01em; margin: var(--space-8) 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 3px dashed var(--amber); }
.tuk-prose p, .tuk-prose li { margin: 0 0 var(--space-4); }
.tuk-prose pre { font-family: var(--font-mono); font-size: 14px; line-height: 22px; background: var(--readout-bg); color: var(--readout-digit); border: var(--line-width) solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-4); overflow-x: auto; }
.tuk-prose code { font-family: var(--font-mono); font-size: 0.92em; }
.tuk-prose .table-wrap { overflow-x: auto; margin: 0 0 var(--space-4); background: var(--surface-200); border: var(--line-width) solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.tuk-prose table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 22px; }
.tuk-prose th, .tuk-prose td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 2px dotted var(--surface-300); vertical-align: top; }
.tuk-prose tr:last-child td { border-bottom: 0; }
.tuk-prose th { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); background: var(--surface-300); }
.tuk-prose blockquote { margin: 0 0 var(--space-4); padding-left: var(--space-4); border-left: 3px solid var(--amber); color: var(--ink-muted); }