@charset "utf-8";

/* ==========================================================================
   youryum — design system
   Cobalt + brass on cool neutrals. Every warm tone on the page is a
   photograph; the interface never is. See DESIGN.md for the reasoning.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   Latin-subset variable woff2, self-hosted. Two files, 97 KB, no third party.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/assets/fonts/bricolage-grotesque-latin.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
  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: 'Wix Madefor Text';
  src: url('/assets/fonts/wix-madefor-text-latin.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  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;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces and ink — cool-tinted, never warm. */
  --bg: oklch(1 0 0);
  --surface: oklch(0.977 0.004 250);
  --surface-2: oklch(0.952 0.006 250);
  --ink: oklch(0.19 0.012 250);
  --ink-2: oklch(0.375 0.012 250);
  --muted: oklch(0.468 0.012 250);
  --rule: oklch(0.905 0.008 250);
  --rule-strong: oklch(0.82 0.01 250);

  /* Brand */
  --brand: oklch(0.44 0.125 235);
  --brand-ink: oklch(0.36 0.115 235);
  --brand-soft: oklch(0.962 0.021 235);
  --brand-line: oklch(0.86 0.045 235);
  --on-brand: oklch(1 0 0);

  /* Brass — a fill and rule colour. Text uses --accent-ink. */
  --accent: oklch(0.74 0.135 76);
  --accent-ink: oklch(0.45 0.1 70);
  --accent-soft: oklch(0.965 0.03 80);

  /* Semantic */
  --positive: oklch(0.44 0.11 155);
  --positive-soft: oklch(0.955 0.028 155);
  --caution: oklch(0.47 0.12 45);
  --caution-soft: oklch(0.962 0.03 60);

  /* Type */
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Wix Madefor Text', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --step--1: clamp(0.83rem, 0.81rem + 0.1vw, 0.88rem);
  --step-0: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  --step-1: clamp(1.2rem, 1.14rem + 0.3vw, 1.35rem);
  --step-2: clamp(1.45rem, 1.34rem + 0.55vw, 1.75rem);
  --step-3: clamp(1.75rem, 1.55rem + 1vw, 2.3rem);
  --step-4: clamp(2.1rem, 1.72rem + 1.9vw, 3rem);
  --step-5: clamp(2.5rem, 1.85rem + 3.2vw, 4rem);

  /* Space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  --s-8: clamp(3.5rem, 2.6rem + 3.6vw, 5.5rem);
  --s-9: clamp(4.5rem, 3rem + 6vw, 8rem);

  /* Shape */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --r-full: 999px;

  /* Measure */
  --measure: 68ch;
  --container: 1200px;
  --container-wide: 1400px;
  --header-h: 60px;

  /* Elevation — restrained; rules do most of the separating. */
  --shadow-sm: 0 1px 2px oklch(0.19 0.012 250 / 0.05);
  --shadow: 0 2px 4px oklch(0.19 0.012 250 / 0.04), 0 12px 28px -18px oklch(0.19 0.012 250 / 0.28);
  --shadow-lg: 0 4px 8px oklch(0.19 0.012 250 / 0.05), 0 24px 56px -28px oklch(0.19 0.012 250 / 0.35);

  /* Motion */
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --fast: 150ms;
  --mid: 240ms;
  --slow: 400ms;

  /* Semantic stacking order — never arbitrary numbers. */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: oklch(0.145 0 0);
    --surface: oklch(0.188 0.006 250);
    --surface-2: oklch(0.232 0.008 250);
    --ink: oklch(0.95 0.004 250);
    --ink-2: oklch(0.8 0.006 250);
    --muted: oklch(0.678 0.008 250);
    --rule: oklch(0.28 0.008 250);
    --rule-strong: oklch(0.36 0.01 250);

    --brand: oklch(0.74 0.115 235);
    --brand-ink: oklch(0.84 0.085 235);
    --brand-soft: oklch(0.255 0.042 235);
    --brand-line: oklch(0.36 0.06 235);
    --on-brand: oklch(0.16 0.02 235);

    --accent: oklch(0.8 0.14 78);
    --accent-ink: oklch(0.84 0.115 80);
    --accent-soft: oklch(0.26 0.04 75);

    --positive: oklch(0.78 0.13 155);
    --positive-soft: oklch(0.24 0.04 155);
    --caution: oklch(0.8 0.12 55);
    --caution-soft: oklch(0.26 0.04 55);

    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.5);
    --shadow: 0 2px 4px oklch(0 0 0 / 0.4), 0 12px 28px -18px oklch(0 0 0 / 0.8);
    --shadow-lg: 0 4px 8px oklch(0 0 0 / 0.4), 0 24px 56px -28px oklch(0 0 0 / 0.9);

    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --bg: oklch(0.145 0 0);
  --surface: oklch(0.188 0.006 250);
  --surface-2: oklch(0.232 0.008 250);
  --ink: oklch(0.95 0.004 250);
  --ink-2: oklch(0.8 0.006 250);
  --muted: oklch(0.678 0.008 250);
  --rule: oklch(0.28 0.008 250);
  --rule-strong: oklch(0.36 0.01 250);

  --brand: oklch(0.74 0.115 235);
  --brand-ink: oklch(0.84 0.085 235);
  --brand-soft: oklch(0.255 0.042 235);
  --brand-line: oklch(0.36 0.06 235);
  --on-brand: oklch(0.16 0.02 235);

  --accent: oklch(0.8 0.14 78);
  --accent-ink: oklch(0.84 0.115 80);
  --accent-soft: oklch(0.26 0.04 75);

  --positive: oklch(0.78 0.13 155);
  --positive-soft: oklch(0.24 0.04 155);
  --caution: oklch(0.8 0.12 55);
  --caution-soft: oklch(0.26 0.04 55);

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.5);
  --shadow: 0 2px 4px oklch(0 0 0 / 0.4), 0 12px 28px -18px oklch(0 0 0 / 0.8);
  --shadow-lg: 0 4px 8px oklch(0 0 0 / 0.4), 0 24px 56px -28px oklch(0 0 0 / 0.9);

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

/* `contents` keeps <picture> out of the box tree, so `object-fit` and
   `height: 100%` on the <img> resolve against the real container. */
picture {
  display: contents;
}

img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

a {
  color: var(--brand-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in oklch, currentColor 35%, transparent);
  transition: color var(--fast) var(--ease), text-decoration-color var(--fast) var(--ease);
}

a:hover {
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 3px;
}

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

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin-block: var(--s-6);
}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

h1 {
  font-size: var(--step-5);
}

h2 {
  font-size: var(--step-3);
  letter-spacing: -0.024em;
}

h3 {
  font-size: var(--step-2);
  line-height: 1.2;
  letter-spacing: -0.018em;
}

h4 {
  font-size: var(--step-1);
  line-height: 1.3;
  letter-spacing: -0.012em;
}

p {
  text-wrap: pretty;
}

strong,
b {
  font-weight: 700;
  color: var(--ink);
}

small {
  font-size: var(--step--1);
}

code,
kbd {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: var(--surface-2);
  padding: 0.1em 0.35em;
  border-radius: var(--r-sm);
}

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.u-muted {
  color: var(--muted);
}

.u-small {
  font-size: var(--step--1);
}

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

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -110%;
  z-index: var(--z-tooltip);
  background: var(--brand);
  color: var(--on-brand);
  padding: var(--s-3) var(--s-5);
  border-radius: 0 0 var(--r) var(--r);
  text-decoration: none;
  font-weight: 600;
  transition: translate var(--mid) var(--ease);
}

.skip-link:focus {
  translate: -50% 0;
}

/* --------------------------------------------------------------------------
   5. Layout primitives
   -------------------------------------------------------------------------- */

.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}

.container--wide {
  width: min(100% - 2.5rem, var(--container-wide));
}

.container--narrow {
  width: min(100% - 2.5rem, 760px);
}

@media (max-width: 560px) {
  .container,
  .container--wide,
  .container--narrow {
    width: calc(100% - 2rem);
  }
}

.stack > * + * {
  margin-block-start: var(--flow, var(--s-4));
}

.section {
  padding-block: var(--s-8);
}

.section--tight {
  padding-block: var(--s-7);
}

.section + .section {
  border-block-start: 1px solid var(--rule);
}

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-block-end: var(--s-6);
}

.section__head p {
  color: var(--muted);
  max-width: 52ch;
  margin-block-start: var(--s-2);
}

.section__more {
  display: inline-block;
  font-weight: 600;
  font-size: var(--step--1);
  white-space: nowrap;
  padding-block: 4px;
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in oklch, var(--bg) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-block-end: 1px solid transparent;
  transition: border-color var(--mid) var(--ease);
}

.masthead[data-scrolled='true'] {
  border-block-end-color: var(--rule);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  height: var(--header-h);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.04em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  flex: none;
}

.wordmark::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--accent);
  translate: 1px -1px;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin-inline-start: var(--s-2);
}

.nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 500;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}

.nav a:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.nav a[aria-current='page'] {
  color: var(--ink);
  font-weight: 700;
}

.masthead__spacer {
  flex: 1;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}

.icon-btn:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.icon-btn svg {
  width: 20px;
  height: 20px;
}

.nav-toggle {
  display: none;
}

@media (max-width: 860px) {
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-block-end: 1px solid var(--rule);
    padding: var(--s-3) 1.25rem var(--s-5);
    margin: 0;
    box-shadow: var(--shadow);
    translate: 0 -6px;
    opacity: 0;
    visibility: hidden;
    /* visibility is delayed by the fade on close and flipped instantly on
       open. Transitioning it directly leaves the panel focusable mid-fade. */
    transition: translate var(--mid) var(--ease), opacity var(--mid) var(--ease),
      visibility 0s linear var(--mid);
  }

  .nav[data-open='true'] {
    translate: 0 0;
    opacity: 1;
    visibility: visible;
    transition: translate var(--mid) var(--ease), opacity var(--mid) var(--ease),
      visibility 0s;
  }

  .nav a {
    padding: var(--s-3) var(--s-2);
    font-size: 1.05rem;
    border-block-end: 1px solid var(--rule);
    border-radius: 0;
  }

  .nav a:last-child {
    border-block-end: 0;
  }

  .nav-toggle {
    display: inline-grid;
  }
}

/* --------------------------------------------------------------------------
   7. Buttons, chips, badges
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r);
  font-weight: 650;
  font-size: 0.96rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease),
    color var(--fast) var(--ease), translate var(--fast) var(--ease);
}

.btn:active {
  translate: 0 1px;
}

.btn--primary {
  background: var(--brand);
  color: var(--on-brand);
}

.btn--primary:hover {
  background: var(--brand-ink);
}

.btn--ghost {
  border-color: var(--rule-strong);
  color: var(--ink);
}

.btn--ghost:hover {
  background: var(--surface-2);
  border-color: var(--ink-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.28em 0.7em;
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--step--1);
  font-weight: 550;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
    border-color var(--fast) var(--ease);
}

a.chip:hover {
  background: var(--brand-soft);
  color: var(--brand-ink);
  border-color: var(--brand-line);
}

.chip--brand {
  background: var(--brand-soft);
  color: var(--brand-ink);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.25em 0.6em;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-2);
}

.badge--diet {
  background: var(--positive-soft);
  color: var(--positive);
}

/* --------------------------------------------------------------------------
   8. Entry cards
   Used in lists and related rails — deliberately not the only layout on the
   site. The home page composes with photos and text, not a card wall.
   -------------------------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(266px, 1fr));
  gap: var(--s-6) var(--s-5);
}

/* A single author, set as a byline rather than a card. Stacks on a phone so
   the portrait never squeezes the prose into a column of two words. */
.byline-block {
  display: grid;
  gap: var(--s-5);
  max-width: 62ch;
  margin-block-start: var(--s-5);
}

@media (min-width: 620px) {
  .byline-block {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s-6);
    align-items: start;
    max-width: 68ch;
  }
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
}

.card__media {
  position: relative;
  display: block;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface-2);
  aspect-ratio: 4 / 3;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale var(--slow) var(--ease);
}

.card:hover .card__media img {
  scale: 1.03;
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.card__title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.018em;
  text-wrap: pretty;
}

.card__title a {
  color: var(--ink);
  text-decoration: none;
}

.card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r);
}

.card {
  position: relative;
}

.card:hover .card__title a {
  color: var(--brand-ink);
}

.card__excerpt {
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__meta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--step--1);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.card__meta > * + *::before {
  content: '·';
  margin-inline-end: var(--s-2);
  color: var(--rule-strong);
}

.card__kicker {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--accent-ink);
  text-decoration: none;
  position: relative;
  z-index: 1;
  /* align-self keeps the hit area to the label; the padding takes it to the
     24px minimum target height without changing how it looks. */
  align-self: flex-start;
  display: inline-block;
  padding-block: 5px;
}

/* Compact horizontal variant for sidebars and related rails. */
.card--row {
  flex-direction: row;
  gap: var(--s-4);
  align-items: flex-start;
}

.card--row .card__media {
  flex: none;
  width: 104px;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
}

/* --------------------------------------------------------------------------
   9. Home
   -------------------------------------------------------------------------- */

.hero {
  padding-block: var(--s-7) var(--s-8);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
}

.hero__title {
  font-size: var(--step-5);
  margin-block: var(--s-4) var(--s-4);
}

.hero__title a {
  color: inherit;
  text-decoration: none;
}

.hero__title a:hover {
  color: var(--brand-ink);
}

.hero__lede {
  font-size: var(--step-1);
  color: var(--ink-2);
  max-width: 42ch;
  line-height: 1.5;
}

.hero__media {
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
  aspect-ratio: 5 / 4;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-block-start: var(--s-5);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--rule);
  font-size: var(--step--1);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.hero__meta b {
  color: var(--ink);
  font-weight: 650;
}

/* The site's promise, stated once, in the reader's language. */
.pitch {
  background: var(--brand-soft);
  border-block: 1px solid var(--brand-line);
}

.pitch__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s-6);
  padding-block: var(--s-7);
}

.pitch__item h3 {
  font-size: 1.06rem;
  margin-block-end: var(--s-2);
  color: var(--ink);
}

.pitch__item p {
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

.pitch__item a {
  color: var(--brand-ink);
}

/* Editorial split: one lead story, a stack of runners-up. */
.feature-split {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}

@media (max-width: 860px) {
  .feature-split {
    grid-template-columns: 1fr;
  }
}

.feature-split__lead .card__media {
  aspect-ratio: 3 / 2;
  border-radius: var(--r-lg);
}

.feature-split__lead .card__title {
  font-size: var(--step-3);
  line-height: 1.12;
}

.feature-split__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.feature-split__list .card + .card {
  border-block-start: 1px solid var(--rule);
  padding-block-start: var(--s-5);
}

/* Ingredient rail — the structural differentiator, on the front page. */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 1fr);
  gap: var(--s-4);
  overflow-x: auto;
  padding-block-end: var(--s-3);
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.rail > * {
  scroll-snap-align: start;
}

@media (max-width: 700px) {
  .rail {
    grid-auto-columns: minmax(168px, 1fr);
    margin-inline: -1rem;
    padding-inline: 1rem;
  }
}

.ingredient-tile {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--bg);
  text-decoration: none;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.ingredient-tile:hover {
  border-color: var(--brand-line);
  background: var(--brand-soft);
}

.ingredient-tile__photo {
  width: 56px;
  height: 56px;
  border-radius: var(--r-full);
  object-fit: cover;
  background: var(--surface-2);
}

.ingredient-tile__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.ingredient-tile__stat {
  font-size: var(--step--1);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-block-start: auto;
}

.ingredient-tile__stat b {
  color: var(--accent-ink);
  font-weight: 700;
}

/* Category index — a text list with weights, not another card wall. */
.cat-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 var(--s-7);
}

.cat-list__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-block-end: 1px solid var(--rule);
  text-decoration: none;
}

.cat-list__item:hover .cat-list__label {
  color: var(--brand-ink);
}

.cat-list__label {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.cat-list__desc {
  display: block;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
  margin-block-start: 2px;
}

.cat-list__count {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: var(--step--1);
  flex: none;
}

/* --------------------------------------------------------------------------
   10. Article / recipe page frame
   -------------------------------------------------------------------------- */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  font-size: var(--step--1);
  color: var(--muted);
  padding: 0;
  margin-block-end: var(--s-4);
  list-style: none;
}

.breadcrumb li + li::before {
  content: '/';
  margin-inline-end: var(--s-2);
  color: var(--rule-strong);
}

.breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--brand-ink);
  text-decoration: underline;
}

.entry-head {
  padding-block: var(--s-6) var(--s-5);
}

.entry-head__title {
  margin-block-end: var(--s-4);
}

.entry-head__summary {
  font-size: var(--step-1);
  color: var(--ink-2);
  max-width: 58ch;
  line-height: 1.5;
}

.byline {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-block-start: var(--s-5);
  font-size: var(--step--1);
  color: var(--muted);
}

.byline img,
.avatar__img {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  object-fit: cover;
  background: var(--surface-2);
  flex: none;
}

/* The About page portrait: a photograph, not a badge, so it gets a square
   with the site's corner radius rather than a circle that crops the room out
   of the frame. */
.avatar__img--large {
  width: 200px;
  height: 200px;
  border-radius: var(--r-lg);
}

@media (min-width: 620px) {
  .avatar__img--large {
    width: 220px;
    height: 220px;
  }
}

/* Monogram stand-in for an author with no photograph. */
.avatar {
  flex: none;
  width: var(--avatar-size, 36px);
  height: var(--avatar-size, 36px);
  border-radius: var(--r-full);
  display: inline-grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(var(--avatar-size, 36px) * 0.36);
  letter-spacing: -0.02em;
  color: oklch(1 0 0);
  background: var(--avatar-accent, var(--brand));
  user-select: none;
}

.byline b {
  color: var(--ink);
  font-weight: 650;
}

.byline__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  font-variant-numeric: tabular-nums;
}

/* The hero photograph. Two rules matter here: the whole plate stays visible
   (a food photo cropped by the window height is the one thing a recipe hero
   must never do), and it never grows past a comfortable reading height.

   So instead of cropping, the column itself is sized: `--hero-ratio` is the
   photo's own width ÷ height, printed on the element by the template, and the
   column takes the narrower of the text width and "as wide as the height
   budget allows". The image then fills that column at its natural shape.
   Deriving the width from the ratio rather than leaving it to `width: auto`
   keeps the layout independent of which `srcset` candidate the browser
   happens to have loaded.

   The photo and the pin bar under it share that column, so the bar comes out
   exactly as wide as the picture it belongs to. */
.entry-hero,
.entry-media {
  --hero-height: min(68vh, 680px);
  width: min(100%, calc(var(--hero-height) * var(--hero-ratio, 1.5)));
  margin-inline: auto;
  margin-block-end: var(--s-6);
}

.entry-hero .entry-media {
  width: 100%;
  margin-block-end: 0;
}

.entry-media {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
}

.entry-media img {
  display: block;
  width: 100%;
  height: auto;
}

.entry-media figcaption {
  font-size: var(--step--1);
  color: var(--muted);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
}

/* The action bar. Filled pills, because a Pinterest visitor arrives ready to
   save and should not have to hunt for the control. */
.actionbar {
  display: flex;
  justify-content: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-block: var(--s-5) 0;
}

.action {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 42px;
  padding: 0 var(--s-4);
  border: 0;
  border-radius: var(--r-full);
  background: var(--brand);
  color: var(--on-brand);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--fast) var(--ease), translate var(--fast) var(--ease);
}

.action:hover {
  background: var(--brand-ink);
  color: var(--on-brand);
}

.action:active {
  translate: 0 1px;
}

.action svg {
  flex: none;
}

@media (max-width: 460px) {
  .action {
    flex: 1 1 auto;
    justify-content: center;
    padding: 0 var(--s-3);
    font-size: 0.85rem;
  }
}

/* Directly under the hero photograph, where the eye already is. */
.pinbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 54px;
  margin-block-start: var(--s-3);
  border-radius: var(--r);
  background: var(--brand);
  color: var(--on-brand);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-decoration: none;
  transition: background var(--fast) var(--ease);
}

.pinbar:hover {
  background: var(--brand-ink);
  color: var(--on-brand);
}

/* Only rendered for print; see the print block at the end of the file. */
.print-head {
  display: none;
}

/* --------------------------------------------------------------------------
   11. Spec strip — the recipe's numbers, first thing the cook sees
   -------------------------------------------------------------------------- */

.spec {
  border-block-start: 2px solid var(--accent);
  border-block-end: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  margin-block: var(--s-6);
}

.spec__cell {
  flex: 1 1 clamp(110px, 20%, 200px);
  padding: var(--s-4) var(--s-5) var(--s-4) 0;
  min-width: 0;
}

.spec__cell + .spec__cell {
  padding-inline-start: var(--s-5);
  border-inline-start: 1px solid var(--rule);
}

.spec__label {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-block-end: var(--s-1);
}

.spec__value {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1.15;
}

.spec__value small {
  font-size: 0.62em;
  font-weight: 500;
  color: var(--muted);
  margin-inline-start: 2px;
}

@media (max-width: 620px) {
  .spec__cell {
    flex: 1 1 45%;
    padding-inline-end: var(--s-4);
  }

  .spec__cell:nth-child(odd) {
    border-inline-start: 0;
    padding-inline-start: 0;
  }

  .spec__cell:nth-child(n + 3) {
    border-block-start: 1px solid var(--rule);
  }
}

/* --------------------------------------------------------------------------
   12. Recipe body — ingredients and method side by side
   -------------------------------------------------------------------------- */

.cook {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

@media (max-width: 940px) {
  .cook {
    grid-template-columns: 1fr;
  }
}

.ingredients {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: var(--s-5);
  background: var(--surface);
}

@media (min-width: 941px) {
  .ingredients {
    position: sticky;
    top: calc(var(--header-h) + var(--s-4));
    max-height: calc(100dvh - var(--header-h) - 2rem);
    overflow-y: auto;
  }
}

.ingredients h2 {
  font-size: var(--step-2);
  margin-block-end: var(--s-4);
}

.scaler {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  margin-block-end: var(--s-5);
}

.scaler__label {
  font-size: var(--step--1);
  color: var(--muted);
  flex: 1;
}

.scaler__label b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.scaler__btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.scaler__btn:hover:not(:disabled) {
  background: var(--brand-soft);
  border-color: var(--brand-line);
  color: var(--brand-ink);
}

.scaler__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ing-group + .ing-group {
  margin-block-start: var(--s-5);
}

.ing-group__name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-ink);
  margin-block-end: var(--s-3);
  padding-block-end: var(--s-2);
  border-block-end: 1px solid var(--rule);
}

.ing-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ing {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-2) var(--s-2) 0;
  border-radius: var(--r-sm);
  line-height: 1.45;
  transition: opacity var(--fast) var(--ease);
}

.ing input[type='checkbox'] {
  appearance: none;
  width: 17px;
  height: 17px;
  flex: none;
  border: 1.5px solid var(--rule-strong);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  translate: 0 3px;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

/* The visible box stays 17px; the hit area is 29 × 33. */
.ing input[type='checkbox']::before {
  content: '';
  position: absolute;
  inset: -8px -6px;
}

.ing input[type='checkbox']:checked {
  background: var(--brand);
  border-color: var(--brand);
}

.ing input[type='checkbox']:checked::after {
  content: '';
  position: absolute;
  inset: 3px 4px 4px 3px;
  border: solid var(--on-brand);
  border-width: 0 0 2px 2px;
  rotate: -45deg;
}

.ing:has(input:checked) .ing__text {
  opacity: 0.45;
  text-decoration: line-through;
  text-decoration-color: var(--muted);
}

.ing__text {
  cursor: pointer;
  transition: opacity var(--fast) var(--ease);
}

.ing__qty {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}

.ing__note {
  color: var(--muted);
  font-size: 0.92em;
}

.ing__text a {
  color: var(--brand-ink);
  text-decoration-color: var(--brand-line);
}

.method h2 {
  font-size: var(--step-2);
  margin-block-end: var(--s-5);
}

.steps {
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  padding: 0;
  list-style: none;
}

.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--s-4);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.step::before {
  content: counter(step);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--brand-ink);
  background: var(--brand-soft);
  border-radius: var(--r-full);
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  translate: 0 -2px;
}

.step__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-block-end: var(--s-2);
}

.step__text p + p {
  margin-block-start: var(--s-3);
}

.step__media {
  margin-block-start: var(--s-4);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface-2);
}

/* --------------------------------------------------------------------------
   13. Prose
   -------------------------------------------------------------------------- */

.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-block-start: var(--s-4);
}

.prose h2 {
  font-size: var(--step-2);
  margin-block-start: var(--s-7);
  padding-block-start: var(--s-2);
}

.prose h3 {
  font-size: var(--step-1);
  margin-block-start: var(--s-6);
}

.prose ul,
.prose ol {
  padding-inline-start: 1.35em;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.prose li::marker {
  color: var(--accent-ink);
}

.prose a {
  font-weight: 550;
}

.prose blockquote {
  border-block-start: 2px solid var(--accent);
  border-block-end: 1px solid var(--rule);
  padding-block: var(--s-4);
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.prose figure {
  margin-block: var(--s-6);
}

.prose figure img {
  border-radius: var(--r);
  width: 100%;
}

.prose figcaption {
  font-size: var(--step--1);
  color: var(--muted);
  margin-block-start: var(--s-3);
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--rule);
}

/* Callout — full border, never a coloured side stripe. */
.note {
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
}

.note__label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-ink);
  margin-block-end: var(--s-2);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.note--caution {
  background: var(--caution-soft);
  border-color: color-mix(in oklch, var(--caution) 30%, transparent);
}

.note--caution .note__label {
  color: var(--caution);
}

.note p {
  margin: 0;
}

.note p + p {
  margin-block-start: var(--s-3);
}

/* --------------------------------------------------------------------------
   14. Data blocks — the reason the site exists
   -------------------------------------------------------------------------- */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
}

.data-table caption {
  text-align: start;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  padding-block-end: var(--s-3);
}

.data-table th,
.data-table td {
  text-align: start;
  padding: var(--s-3) var(--s-4);
  border-block-end: 1px solid var(--rule);
}

.data-table thead th {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
  border-block-end: 1px solid var(--rule-strong);
  background: var(--surface);
}

.data-table td:not(:first-child),
.data-table th:not(:first-child) {
  text-align: end;
  white-space: nowrap;
}

.data-table tbody tr:last-child td {
  border-block-end: 0;
}

.data-wrap {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  overflow-x: auto;
  background: var(--bg);
}

.data-wrap .data-table caption {
  padding: var(--s-4) var(--s-4) var(--s-3);
}

.source {
  font-size: var(--step--1);
  color: var(--muted);
  margin-block-start: var(--s-3);
}

.source a {
  color: var(--muted);
}

/* Versus — two columns of the same measurement, winner named in words. */
.versus {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;
  margin-block: var(--s-6);
}

.versus__head {
  padding: var(--s-4) var(--s-5);
  border-block-end: 1px solid var(--rule);
  background: var(--surface);
}

.versus__title {
  font-size: var(--step-1);
  margin: 0;
}

.versus__head p {
  color: var(--muted);
  font-size: 0.92rem;
  margin-block-start: var(--s-2);
}

.versus__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.versus__side {
  padding: var(--s-5);
  text-align: center;
}

.versus__side + .versus__side {
  border-inline-start: 1px solid var(--rule);
}

.versus__side[data-winner='true'] {
  background: var(--accent-soft);
}

.versus__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-block-end: var(--s-3);
}

.versus__figure {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--ink);
}

.versus__unit {
  font-size: var(--step--1);
  color: var(--muted);
  margin-block-start: var(--s-2);
}

.versus__verdict {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-block-start: var(--s-3);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--accent-ink);
}

.versus__foot {
  padding: var(--s-4) var(--s-5);
  border-block-start: 1px solid var(--rule);
  background: var(--surface);
  font-size: 0.93rem;
  color: var(--ink-2);
}

@media (max-width: 520px) {
  .versus__body {
    grid-template-columns: 1fr;
  }

  .versus__side + .versus__side {
    border-inline-start: 0;
    border-block-start: 1px solid var(--rule);
  }
}

/* Ranking — a bar chart made of type, readable without colour. */
.ranking {
  margin-block: var(--s-6);
}

.ranking__title {
  font-size: var(--step-1);
}

.ranking__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-2) var(--s-4);
  align-items: baseline;
  padding-block: var(--s-3);
  border-block-end: 1px solid var(--rule);
}

.ranking__name {
  font-weight: 600;
  color: var(--ink);
}

.ranking__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}

.ranking__value small {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--muted);
  margin-inline-start: 3px;
}

.ranking__bar {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  overflow: hidden;
}

.ranking__bar span {
  display: block;
  height: 100%;
  border-radius: var(--r-full);
  background: var(--accent);
}

.ranking__row:first-child .ranking__bar span {
  background: var(--brand);
}

/* Pick / store / swap lists on ingredient hubs. */
.howto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-5);
}

.howto__panel {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: var(--s-5);
  background: var(--surface);
}

.howto__panel h3 {
  font-size: 1.05rem;
  margin-block-end: var(--s-3);
}

.howto__panel ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-size: 0.95rem;
  line-height: 1.55;
}

.howto__panel li {
  display: grid;
  grid-template-columns: 1.1em 1fr;
  gap: var(--s-2);
  color: var(--ink-2);
}

.howto__panel li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--accent);
  translate: 0 0.62em;
}

.swap-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.swap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-block-end: 1px solid var(--rule);
  align-items: baseline;
}

.swap:last-child {
  border-block-end: 0;
}

.swap__use {
  font-weight: 650;
  color: var(--ink);
}

.swap__note {
  color: var(--muted);
  font-size: 0.93rem;
}

@media (max-width: 560px) {
  .swap {
    grid-template-columns: 1fr;
    gap: var(--s-1);
  }
}

.season {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}

.season__month {
  flex: 1 1 auto;
  min-width: 2.4rem;
  text-align: center;
  padding: var(--s-2) 0;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--muted);
}

.season__month[data-in='true'] {
  background: var(--accent);
  color: oklch(0.24 0.06 70);
}

/* --------------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------------- */

.faq {
  border-block-start: 1px solid var(--rule-strong);
}

.faq__item {
  border-block-end: 1px solid var(--rule);
}

.faq__item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-4);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  list-style: none;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: '+';
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--muted);
  line-height: 1;
  flex: none;
  transition: rotate var(--mid) var(--ease);
}

.faq__item[open] summary::after {
  rotate: 45deg;
}

.faq__answer {
  padding-block-end: var(--s-4);
  color: var(--ink-2);
  max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   16. Pagination, search, footer
   -------------------------------------------------------------------------- */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  margin-block-start: var(--s-8);
  flex-wrap: wrap;
}

.pagination a,
.pagination span {
  min-width: 44px;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  padding-inline: var(--s-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--rule);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink-2);
}

.pagination a:hover {
  border-color: var(--brand-line);
  background: var(--brand-soft);
  color: var(--brand-ink);
}

.pagination [aria-current='page'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.pagination .is-gap {
  border: 0;
  min-width: auto;
  color: var(--muted);
}

.searchbox {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  max-width: 560px;
}

.searchbox input {
  /* Without min-width:0 a flex item refuses to shrink past its intrinsic
     width, which pushed the button off a 320px screen. */
  flex: 1 1 12rem;
  min-width: 0;
  min-height: 48px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--ink);
}

.searchbox input::placeholder {
  color: var(--muted);
}

.searchbox input:focus-visible {
  border-color: var(--brand);
  outline-offset: 0;
}

.searchbox .btn {
  flex: 0 1 auto;
}

.search-results {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  margin-block-start: var(--s-6);
}

.search-result {
  padding-block-end: var(--s-5);
  border-block-end: 1px solid var(--rule);
}

.search-result h3 {
  font-size: 1.1rem;
  margin-block-end: var(--s-2);
}

.search-result h3 a {
  color: var(--ink);
  text-decoration: none;
}

.search-result h3 a:hover {
  color: var(--brand-ink);
}

.search-result p {
  color: var(--muted);
  font-size: 0.95rem;
}

mark {
  background: var(--accent-soft);
  color: var(--accent-ink);
  padding: 0 2px;
  border-radius: 3px;
}

.empty {
  text-align: center;
  padding: var(--s-8) var(--s-4);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-lg);
  color: var(--muted);
}

.empty h2 {
  font-size: var(--step-2);
  color: var(--ink);
  margin-block-end: var(--s-3);
}

.empty p {
  max-width: 44ch;
  margin-inline: auto;
}

.colophon {
  border-block-start: 1px solid var(--rule);
  background: var(--surface);
  padding-block: var(--s-7) var(--s-6);
  margin-block-start: var(--s-9);
}

/* auto-fit alongside an explicit first column collapses that column to nothing
   on a narrow viewport: the link columns claim their 140px minimums and the
   about block is left with whatever is over, which was 14px on a phone. Build
   it up from the small screen instead, where nothing can be squeezed. */
.colophon__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-6) var(--s-5);
}

.colophon__about {
  grid-column: 1 / -1;
}

@media (min-width: 880px) {
  .colophon__grid {
    grid-template-columns: minmax(240px, 1.6fr) repeat(3, minmax(140px, 1fr));
  }

  .colophon__about {
    grid-column: auto;
  }
}

.colophon h2 {
  font-size: 0.8rem;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-block-end: var(--s-3);
}

.colophon ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-size: 0.94rem;
}

.colophon a {
  color: var(--ink-2);
  text-decoration: none;
}

.colophon a:hover {
  color: var(--brand-ink);
  text-decoration: underline;
}

.colophon__about p {
  color: var(--muted);
  font-size: 0.94rem;
  max-width: 42ch;
  margin-block-start: var(--s-3);
}

.colophon__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  justify-content: space-between;
  margin-block-start: var(--s-6);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--rule);
  font-size: var(--step--1);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   17. Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .card:hover .card__media img {
    scale: 1;
  }
}

/* --------------------------------------------------------------------------
   18. Print — a recipe printed from a kitchen laptop
   -------------------------------------------------------------------------- */

@media print {
  /* A recipe printed from a kitchen laptop: the food, the numbers, the
     method, and the URL to get back. Nothing else. */
  .masthead,
  .colophon,
  .scaler,
  .pagination,
  .related,
  .skip-link,
  .icon-btn,
  .actionbar,
  .pinbar,
  .breadcrumb,
  .faq,
  .chip-row,
  .rail,
  .byline img,
  .avatar,
  .entry-media figcaption,
  .source {
    display: none !important;
  }

  @page {
    margin: 16mm 14mm;
  }

  html {
    font-size: 11pt;
  }

  body {
    background: #fff;
    color: #000;
    line-height: 1.45;
  }

  .container,
  .container--wide,
  .container--narrow {
    width: 100%;
    max-width: none;
    padding: 0;
  }

  .print-head {
    display: block;
    border-bottom: 1.5pt solid #000;
    padding-bottom: 6pt;
    margin-bottom: 12pt;
    font-size: 9pt;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .print-head b {
    font-size: 11pt;
    letter-spacing: 0;
    text-transform: none;
  }

  h1 {
    font-size: 22pt;
    margin-bottom: 4pt;
  }

  .entry-head {
    padding-block: 0 8pt;
  }

  .entry-head__summary {
    font-size: 10.5pt;
    color: #333;
    max-width: none;
  }

  /* Let the figure float against the method text the way it did before the
     photo and the pin bar were paired up in a wrapper. */
  .entry-hero {
    display: contents;
  }

  .entry-media {
    max-width: 62mm;
    float: right;
    margin: 0 0 6pt 8pt;
    border-radius: 0;
  }

  .entry-media img {
    max-height: none;
  }

  .spec {
    border-top: 1.5pt solid #000;
    border-bottom: 0.5pt solid #666;
    break-inside: avoid;
  }

  .spec__cell {
    padding: 5pt 8pt 5pt 0;
  }

  .spec__cell + .spec__cell {
    border-left: 0.5pt solid #999;
  }

  .spec__value {
    font-size: 12pt;
  }

  .cook {
    display: block;
  }

  .ingredients {
    position: static;
    max-height: none;
    overflow: visible;
    background: #fff;
    border: 0.75pt solid #666;
    padding: 8pt 10pt;
    margin-bottom: 12pt;
    break-inside: avoid;
    columns: 2;
    column-gap: 10mm;
  }

  .ingredients h2 {
    column-span: all;
    font-size: 13pt;
    margin-bottom: 6pt;
  }

  .ing input[type='checkbox'] {
    appearance: none;
    border: 0.75pt solid #000;
    width: 9pt;
    height: 9pt;
    border-radius: 1pt;
  }

  .method h2 {
    font-size: 13pt;
  }

  .steps {
    gap: 9pt;
  }

  .step {
    break-inside: avoid;
    grid-template-columns: 16pt 1fr;
    gap: 7pt;
  }

  .step::before {
    background: transparent;
    color: #000;
    border: 0.75pt solid #000;
    width: 16pt;
    height: 16pt;
    font-size: 9pt;
  }

  .step__media {
    display: none;
  }

  .note {
    break-inside: avoid;
    border: 0.5pt solid #999;
    background: #fff;
  }

  .data-wrap {
    break-inside: avoid;
    border: 0.5pt solid #999;
  }

  .section {
    padding-block: 8pt;
    border: 0;
  }

  .prose {
    max-width: none;
  }

  a,
  .ing__text a,
  .prose a,
  .card__title a {
    color: #000;
    text-decoration: none;
  }

  /* Two columns of ingredients read badly if a group splits across them. */
  .ing-group {
    break-inside: avoid;
  }

  .ing-group__name {
    color: #000;
    border-bottom-color: #999;
  }

  .spec__label,
  .note__label {
    color: #333;
  }
}