/* Food Emperor — design system
   Photography-forward: images run edge to edge, type stays out of their way. */

:root {
  /* Brand */
  --accent:        #ff9300;
  --accent-ink:    #b35f00;   /* accent darkened enough to sit on light backgrounds */
  --accent-glow:   rgba(255, 147, 0, .16);

  /* Light theme */
  --bg:            #fffcf7;
  --bg-sunk:       #f6f0e6;
  --bg-raise:      #ffffff;
  --ink:           #1b1613;
  --ink-soft:      #554c44;
  --ink-faint:     #8a7d72;
  --rule:          #e8ded0;
  --shadow:        0 1px 2px rgba(27,22,19,.05), 0 8px 24px -12px rgba(27,22,19,.18);
  --shadow-lift:   0 2px 6px rgba(27,22,19,.07), 0 24px 48px -20px rgba(27,22,19,.28);

  /* Type. No webfonts: the system stacks render instantly, cost nothing and
     avoid a flash of unstyled text. The chains are ordered so Windows, Android
     and Linux land on something with real character rather than a default
     serif — Iowan on Apple, Constantia on Windows, Noto/Tinos elsewhere. */
  --display: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Display",
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --body: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
          Charter, Constantia, "Noto Serif", "Liberation Serif", Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;

  /* Rhythm */
  --page: 1240px;
  /* In rem, not ch: `ch` resolves against the local font size, which made the
     title column and the body column land on different widths. */
  --measure: 41rem;
  --gap: clamp(1rem, 2.5vw, 2rem);
  --radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #131010;
    --bg-sunk:     #0c0a09;
    --bg-raise:    #1e1917;
    --ink:         #f7f1e8;
    --ink-soft:    #c3b6a8;
    --ink-faint:   #8d8073;
    --rule:        #322a25;
    --accent-ink:  #ffa629;
    --shadow:      0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
    --shadow-lift: 0 2px 6px rgba(0,0,0,.55), 0 24px 48px -20px rgba(0,0,0,.8);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Tells the browser to style form controls and scrollbars for the theme. */
  color-scheme: light dark;
}

/* The header is sticky, so an anchored heading would otherwise land underneath it. */
:target, h2[id], h3[id], h4[id] { scroll-margin-top: 6rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1.02rem, .32vw + .96rem, 1.15rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

::selection { background: var(--accent-glow); }

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

.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: #1b1613;
  padding: .7rem 1.1rem; z-index: 100; font-family: var(--display); font-weight: 700;
}
.skip:focus { left: 1rem; top: 1rem; }

.wrap { width: min(100% - 2.5rem, var(--page)); margin-inline: auto; }
.prose-wrap { width: min(100% - 2.5rem, var(--measure)); margin-inline: auto; }

/* ---------------------------------------------------------------- header -- */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.site-head__in {
  display: flex; align-items: center; gap: var(--gap);
  min-height: 76px; padding-block: .4rem;
}
.brand { display: inline-flex; align-items: center; flex: none; }
/* Two stacked words — it needs height to stay legible. The height also rides
   on an inline `--logo-h` fallback in the markup, so a stale or missing
   stylesheet can never let the logo render at its natural 1043px. */
:root { --logo-h: clamp(34px, 5.2vw, 52px); }
.brand img { height: var(--logo-h); width: auto; }
.brand:hover img { transform: rotate(-1.5deg) scale(1.03); }
.brand img { transition: transform .3s cubic-bezier(.2,.7,.3,1); }

.nav {
  margin-left: auto; display: flex; align-items: center;
  gap: clamp(.6rem, 1.6vw, 1.6rem); min-width: 0;
}
.nav a {
  font-family: var(--display); font-size: .85rem; font-weight: 600;
  letter-spacing: .02em; text-decoration: none; color: var(--ink-soft);
  padding: .4rem 0; border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav a:hover, .nav a[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }

/* Search collapses to an icon link on narrow screens — the full input plus the
   nav links is wider than a phone, which put the whole page into overflow. */
.nav__search { display: none; font-size: 1.05rem; border: 0; line-height: 1; }
.searchbox { display: flex; align-items: center; }

@media (max-width: 680px) {
  .searchbox { display: none; }
  .nav__search { display: inline-flex; }
  .site-head__in { min-height: 58px; }
  .brand { font-size: 1rem; }
  .nav { gap: .85rem; }
  .nav a { font-size: .8rem; }
}
@media (max-width: 480px) {
  .site-head__in { gap: .6rem; }
  .brand { font-size: .85rem; letter-spacing: -.02em; }
  .brand__dot { width: .4rem; height: .4rem; }
  .nav { gap: .6rem; }
  .nav a { font-size: .72rem; }
}
/* Last-resort guard: the nav scrolls rather than widening the page, so a long
   nav label can never push the article text out of the viewport. */
.nav { overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
html { overflow-x: clip; }
.searchbox input {
  font: inherit; font-family: var(--display); font-size: .85rem;
  padding: .45rem .8rem; width: clamp(7rem, 16vw, 12rem);
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--bg-raise); color: var(--ink);
}
.searchbox input::placeholder { color: var(--ink-faint); }
.searchbox input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }

/* ------------------------------------------------------------------ hero -- */
.hero { position: relative; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.hero__media {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--bg-sunk);
}
@media (min-width: 900px) { .hero__media { aspect-ratio: 21 / 9; } }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.45) 38%, rgba(0,0,0,0) 72%);
}
.hero__body {
  position: absolute; inset-inline: 0; bottom: 0;
  padding-block: clamp(1.5rem, 4vw, 3rem);
  color: #fff;
}
.hero__body .eyebrow { color: var(--accent); }
.hero h1 {
  font-family: var(--display); font-weight: 800;
  letter-spacing: -.035em; line-height: 1.02;
  font-size: clamp(2rem, 5.6vw, 4.4rem);
  margin: .3rem 0 .6rem; max-width: 18ch;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0,0,0,.5);
}
.hero p { max-width: 54ch; margin: 0 0 1rem; color: rgba(255,255,255,.9); font-size: 1.03rem; }
.hero a.hero__link { position: absolute; inset: 0; z-index: 2; }
.hero:hover img { transform: scale(1.02); }
.hero img { transition: transform .8s cubic-bezier(.2,.7,.3,1); }

.eyebrow {
  font-family: var(--display); font-weight: 700;
  font-size: .74rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent-ink);
}

/* ------------------------------------------------------------------ grid -- */
.section-head {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin: 0 0 clamp(1.2rem, 3vw, 2rem);
}
.section-head h2 {
  font-family: var(--display); font-weight: 800; letter-spacing: -.045em;
  font-size: clamp(1.6rem, 4.2vw, 3rem); margin: 0; line-height: 1;
  text-transform: uppercase;
}
/* A hand-drawn-ish highlight behind the heading, echoing the logo's crown. */
.section-head h2 span {
  background: linear-gradient(to top, var(--accent) 0 .34em, transparent .34em);
  padding: 0 .12em .04em;
  border-radius: 3px;
}
.section-head .more {
  margin-left: auto; font-family: var(--display); font-size: .84rem; font-weight: 700;
  text-decoration: none; color: var(--ink);
  border: 2px solid var(--ink); border-radius: 999px; padding: .42rem 1rem;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.section-head .more:hover {
  background: var(--accent); border-color: var(--accent); color: #241300;
  transform: rotate(-1.5deg);
}

/* Mosaic: a repeating 6-column rhythm of big and small tiles, so a long list
   of recipes reads like spreads rather than rows. */
.mosaic {
  display: grid; gap: clamp(.7rem, 1.6vw, 1.15rem);
  grid-template-columns: repeat(6, 1fr);
  grid-auto-flow: dense;
}
.mosaic .card { grid-column: span 2; }
/* Every eighth pair goes wide, breaking the grid up. */
.mosaic .card:nth-child(8n + 1),
.mosaic .card:nth-child(8n + 2) { grid-column: span 3; }
/* Short runs: equal tiles, three across. The crop and type overrides live
   further down, after the rules they have to beat. */
.mosaic--even { grid-template-columns: repeat(3, 1fr); }
.mosaic--even .card,
.mosaic--even .card:nth-child(8n + 1),
.mosaic--even .card:nth-child(8n + 2) { grid-column: span 1; }

@media (max-width: 900px) {
  .mosaic { grid-template-columns: repeat(4, 1fr); }
  .mosaic .card { grid-column: span 2; }
  .mosaic .card:nth-child(8n + 1),
  .mosaic .card:nth-child(8n + 2) { grid-column: span 4; }
  .mosaic--even { grid-template-columns: repeat(2, 1fr); }
  .mosaic--even .card, .mosaic--even .card:nth-child(8n + 1),
  .mosaic--even .card:nth-child(8n + 2) { grid-column: span 1; }
}
@media (max-width: 560px) {
  .mosaic { grid-template-columns: 1fr; }
  .mosaic .card, .mosaic .card:nth-child(8n + 1), .mosaic .card:nth-child(8n + 2) { grid-column: span 1; }
}

.card { position: relative; }
.card__media {
  position: relative; overflow: hidden; border-radius: var(--radius);
  aspect-ratio: 4 / 3; background: var(--bg-sunk);
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
  box-shadow: var(--shadow);
}
.mosaic .card:nth-child(8n + 1) .card__media,
.mosaic .card:nth-child(8n + 2) .card__media { aspect-ratio: 16 / 10; }

/* Even grids (short runs like "Eat this next") keep one crop for every tile.
   This has to come after the rule above, which would otherwise give the first
   two items a wider crop and leave the third looking oversized. */
.mosaic--even .card__media,
.mosaic--even .card:nth-child(8n + 1) .card__media,
.mosaic--even .card:nth-child(8n + 2) .card__media { aspect-ratio: 4 / 3; }
.mosaic--even .card__title,
.mosaic--even .card:nth-child(8n + 1) .card__title,
.mosaic--even .card:nth-child(8n + 2) .card__title { font-size: clamp(1.02rem, 1.5vw, 1.35rem); }

@media (max-width: 560px) { .card__media { aspect-ratio: 4 / 3 !important; } }

.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
/* Stand-in for a recipe with no photograph. */
.noshot {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,147,0,.07) 14px 28px),
    linear-gradient(160deg, #2a211a 0%, #17120e 100%);
}
.noshot span {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .14em; font-size: .68rem;
  color: var(--accent); opacity: .55;
  transform: translateY(-1.2em);
}
.hero__media .noshot span, .recipe-hero__media .noshot span { font-size: 1rem; transform: none; }
/* The veil only exists so the title stays readable on a busy photograph. */
.card__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,7,4,.88) 0%, rgba(10,7,4,.45) 34%, rgba(10,7,4,.05) 66%);
  transition: opacity .35s ease;
}
.card__title {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  margin: 0; padding: clamp(.8rem, 2vw, 1.3rem);
  font-family: var(--display); font-weight: 800;
  letter-spacing: -.032em; line-height: 1.06;
  font-size: clamp(1.02rem, 1.5vw, 1.35rem);
  color: #fff; text-wrap: balance;
  text-shadow: 0 1px 14px rgba(0,0,0,.5);
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.mosaic .card:nth-child(8n + 1) .card__title,
.mosaic .card:nth-child(8n + 2) .card__title { font-size: clamp(1.2rem, 2.3vw, 2rem); }

.card:hover .card__media { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.card:hover .card__media img { transform: scale(1.06); }
.card:hover .card__title { transform: translateY(-3px); }
.card:hover .card__veil { opacity: .88; }

.card__play {
  position: absolute; right: .8rem; top: .8rem; z-index: 1;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--accent); color: #241300;
  display: grid; place-items: center; font-size: .78rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  transition: transform .3s ease;
}
.card:hover .card__play { transform: scale(1.12) rotate(8deg); }
.card a.card__link { position: absolute; inset: 0; z-index: 2; border-radius: var(--radius); }

/* ------------------------------------------------------------ recipe page -- */
.recipe-hero { margin-bottom: clamp(1.6rem, 4vw, 3rem); }
/*
 * The height is stated outright rather than as `aspect-ratio` + `max-height`.
 *
 * Those two together are a trap: with an automatic width, the browser is
 * entitled to satisfy the ratio by resolving the *width* from the clamped
 * height. On a 1920x900 window that made the hero 2 x 76vh = 1368px inside a
 * 1920px page, and every wide, short window showed a strip of background down
 * the right-hand side of the photograph. `min()` on the height cannot do that:
 * the width is 100% and stays 100%.
 *
 * 66.67vw is 3:2, 50vw is 2:1 — the same proportions as before.
 */
.recipe-hero__media {
  width: 100%;
  height: min(66.6667vw, 76vh);
  overflow: hidden; background: var(--bg-sunk);
}
@media (min-width: 900px) { .recipe-hero__media { height: min(50vw, 76vh); } }
.recipe-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.recipe-title {
  font-family: var(--display); font-weight: 800; letter-spacing: -.038em;
  line-height: 1.02; font-size: clamp(2.1rem, 5.4vw, 4rem);
  margin: clamp(1.5rem, 4vw, 2.6rem) 0 .8rem; text-wrap: balance;
}
/* A short accent rule instead of a dateline — the same job, less filing-cabinet. */
.rule {
  width: 3.6rem; height: 5px; border-radius: 99px;
  background: var(--accent); margin: 1.3rem 0 1.8rem;
}
.recipe-lede {
  font-size: 1.2rem; line-height: 1.6; color: var(--ink-soft);
  margin: 0 0 2rem; font-style: italic;
}

.tag-pill {
  display: inline-block; text-decoration: none;
  font-family: var(--display); font-size: .78rem; font-weight: 700;
  letter-spacing: -.01em;
  padding: .38rem .85rem; border-radius: 999px;
  background: var(--bg-raise); color: var(--ink); border: 2px solid var(--rule);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.tag-pill:hover {
  background: var(--accent); border-color: var(--accent); color: #241300;
  transform: rotate(-2deg) scale(1.04);
}
/* Alternating tilt gives the cloud a scattered, stuck-on feel. */
.tag-cloud .tag-pill:nth-child(3n)   { transform: rotate(.9deg); }
.tag-cloud .tag-pill:nth-child(3n+1) { transform: rotate(-1deg); }
.tag-cloud .tag-pill:nth-child(3n):hover,
.tag-cloud .tag-pill:hover { transform: rotate(-2deg) scale(1.04); }
.tag-pill--lg { font-size: .92rem; padding: .5rem 1.1rem; }
.tag-pill .n { opacity: .5; margin-left: .35rem; font-size: .85em; }

/* --------------------------------------------------------------- socials -- */
/* Written as `<div class="socials">` in page content, so the icons have to be
   attached from here: the editor's sanitiser keeps a class on a <div> but not
   on an <a>, and matching the href is what is left. It also means a link
   pasted into any page picks up its own icon for free.

   The glyphs are masks rather than images, so they take the link's colour and
   invert with the theme without a second copy of each file. */
.socials {
  display: flex; flex-wrap: wrap; gap: .6rem;
  /* The auto inline margins have to be restated — see the note on .prose > *. */
  margin: 0 auto 1.35rem;
}
.socials a {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--display); font-size: .92rem; font-weight: 700;
  letter-spacing: -.01em; text-decoration: none;
  padding: .6rem 1.05rem; border-radius: 999px;
  background: var(--bg-raise); color: var(--ink);
  border: 2px solid var(--rule);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.socials a::before {
  content: ""; flex: none; width: 1.15em; height: 1.15em;
  background: currentColor;
  mask-repeat: no-repeat; mask-position: center; mask-size: contain;
  -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;
}
.socials a:hover, .socials a:focus-visible {
  background: var(--accent); border-color: var(--accent); color: #241300;
  transform: translateY(-2px);
}
.socials a[href*="youtube.com"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}
.socials a[href*="instagram.com"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 1 0 0-12.324zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405a1.441 1.441 0 0 1-2.88 0 1.44 1.44 0 0 1 2.88 0z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 1 0 0-12.324zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405a1.441 1.441 0 0 1-2.88 0 1.44 1.44 0 0 1 2.88 0z'/%3E%3C/svg%3E");
}
.socials a[href*="tiktok.com"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E");
}
.socials a[href*="x.com/"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- article -- */
.prose { font-size: 1.09rem; }
/* Every direct child is centred on the measure. Note the `auto` inline margins
   must be repeated in the rules below — a later `margin:` shorthand would
   otherwise reset them and flush the text to the left edge. */
.prose > * { margin-inline: auto; width: min(100% - 2.5rem, var(--measure)); }
/* `pretty` asks the browser to avoid leaving a single word on the last line. */
.prose p { margin: 0 auto 1.35rem; text-wrap: pretty; }
.prose h2, .prose h3, .prose h4 {
  font-family: var(--display); font-weight: 800; letter-spacing: -.025em;
  line-height: 1.15; margin: 2.6rem auto .9rem; text-wrap: balance;
}
.prose h2 { font-size: clamp(1.45rem, 2.8vw, 1.95rem); }
.prose h3 { font-size: clamp(1.22rem, 2.2vw, 1.5rem); }
.prose h4 { font-size: 1.1rem; }
.prose h3 + ul, .prose h3 + ol { margin-top: -.2rem; }
.prose ul, .prose ol { margin: 0 auto 1.35rem; padding-left: 1.3rem; }
.prose li { margin-bottom: .5rem; }
.prose li::marker { color: var(--accent); font-weight: 700; }
.prose a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.prose a:hover { background: var(--accent-glow); }
.prose blockquote {
  margin: 2rem auto; padding-left: 1.2rem;
  border-left: 3px solid var(--accent);
  font-style: italic; color: var(--ink-soft);
}
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.6rem auto; }
.prose code { font-family: var(--mono); font-size: .88em; background: var(--bg-sunk); padding: .12em .38em; border-radius: 4px; }

/* Figures break out of the text column — the photography is the point. */
.prose figure, .prose .figure {
  width: min(100% - 2.5rem, 980px); margin: 2.4rem auto;
}
.prose figure img, .prose .figure img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; }
.prose figcaption {
  font-family: var(--display); font-size: .82rem; color: var(--ink-faint);
  text-align: center; margin-top: .7rem; line-height: 1.5;
}
.prose .figure--caption { text-align: center; }

/* Lazily-embedded YouTube: a poster frame until clicked. */
.video {
  position: relative; width: min(100% - 2.5rem, 980px); margin: 2.4rem auto;
  aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden;
  background: #000 center/cover no-repeat; cursor: pointer; box-shadow: var(--shadow);
}
.video iframe { width: 100%; height: 100%; border: 0; display: block; }
.video__btn {
  position: absolute; inset: 0; display: grid; place-items: center;
  border: 0; background: transparent; cursor: pointer; width: 100%; height: 100%;
}
.video__btn::after {
  content: ""; width: 4.6rem; height: 3.2rem; border-radius: 12px;
  background: var(--accent); box-shadow: 0 8px 30px rgba(0,0,0,.5);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: transform .25s ease;
}
.video__btn::before {
  content: ""; position: absolute; z-index: 2;
  border-style: solid; border-width: .62rem 0 .62rem 1.05rem;
  border-color: transparent transparent transparent #241300;
  transform: translateX(.1rem);
}
.video__btn:hover::after { transform: scale(1.08); }

/* The recipe film, with a selector when it was shot in several languages. */
.vbox { width: min(100% - 2.5rem, 980px); margin: 2.4rem auto; }
.vbox .video { width: 100%; margin: 0; }
.vbox__tabs { display: flex; gap: .4rem; margin-bottom: .6rem; flex-wrap: wrap; }
.vbox__tab {
  font-family: var(--display); font-size: .78rem; font-weight: 700;
  letter-spacing: -.01em; cursor: pointer;
  padding: .38rem .85rem; border-radius: 999px;
  border: 2px solid var(--rule); background: var(--bg-raise); color: var(--ink-soft);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.vbox__tab:hover { border-color: var(--accent); color: var(--ink); }
.vbox__tab.on {
  background: var(--accent); border-color: var(--accent); color: #241300;
  transform: rotate(-1.5deg);
}
.vbox__cap {
  margin-top: .7rem; text-align: center;
  display: flex; flex-direction: column; gap: .15rem;
}
.vbox__title { font-family: var(--display); font-weight: 700; font-size: .95rem; color: var(--ink); }
.vbox__orig { font-size: .82rem; color: var(--ink-faint); font-style: italic; }

/* Structured recipe block (used by JSON-imported recipes). */
.recipe-card {
  width: min(100% - 2.5rem, var(--measure)); margin: 2.6rem auto;
  background: var(--bg-raise); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: clamp(1.2rem, 3vw, 2rem);
  box-shadow: var(--shadow);
}
.recipe-card h2 { margin-top: 0; }
.recipe-facts {
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  padding-bottom: 1.2rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--rule);
}
.recipe-facts div { font-family: var(--display); }
.recipe-facts dt { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.recipe-facts dd { margin: .15rem 0 0; font-size: 1.05rem; font-weight: 700; }
.ingredients { list-style: none; padding: 0; }
.ingredients li { padding: .4rem 0 .4rem 1.6rem; border-bottom: 1px dashed var(--rule); position: relative; }
.ingredients li::before {
  content: ""; position: absolute; left: .35rem; top: 1.05em;
  width: .4rem; height: .4rem; border-radius: 50%; background: var(--accent);
}
.ingredients .group { font-family: var(--display); font-weight: 700; margin: 1.1rem 0 .3rem; padding-left: 0; border: 0; }
.ingredients .group::before { display: none; }
.steps { counter-reset: step; list-style: none; padding: 0; }
.steps li { position: relative; padding-left: 3rem; margin-bottom: 1.3rem; }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: -.1rem;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--accent); color: #241300;
  font-family: var(--display); font-weight: 800; font-size: .95rem;
  display: grid; place-items: center;
}

/* ---------------------------------------------------------------- footer -- */
.related { background: var(--bg-sunk); padding: clamp(2.5rem, 6vw, 4.5rem) 0; margin-top: clamp(3rem, 7vw, 5.5rem); }
.site-foot {
  background: var(--bg-sunk); border-top: 1px solid var(--rule);
  padding: clamp(2.5rem, 5vw, 3.5rem) 0; color: var(--ink-soft);
  font-family: var(--display); font-size: .88rem;
}
.site-foot__in { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: center; }
.site-foot a { color: var(--ink-soft); }
.site-foot a:hover { color: var(--accent-ink); }
.site-foot .spacer { margin-left: auto; }

/* ----------------------------------------------------------------- misc -- */
.page-head { padding: clamp(2.2rem, 5vw, 3.6rem) 0 clamp(1.4rem, 3vw, 2.2rem); }
.page-head h1 {
  font-family: var(--display); font-weight: 800; letter-spacing: -.05em;
  font-size: clamp(2.4rem, 7vw, 5rem); margin: .1rem 0 .5rem; line-height: .95;
  text-transform: uppercase; text-wrap: balance;
}
.page-head p { color: var(--ink-soft); margin: 0; max-width: 60ch; font-size: 1.05rem; }

.tag-cloud { display: flex; flex-wrap: wrap; gap: .55rem; }

.pagination {
  display: flex; gap: .5rem; justify-content: center; align-items: center;
  flex-wrap: wrap; margin: clamp(2.5rem, 5vw, 4rem) 0;
  font-family: var(--display);
}
.pagination__step, .pagination__n, .pagination__gap {
  font-size: .85rem; font-weight: 700; text-decoration: none;
  border-radius: 999px; color: var(--ink-soft);
}
.pagination__step { padding: .6rem 1.15rem; border: 2px solid var(--rule); }
a.pagination__step:hover { border-color: var(--accent); color: var(--ink); background: var(--accent); color: #241300; }
span.pagination__step { opacity: .35; }

.pagination__pages { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; }
.pagination__n {
  min-width: 2.35rem; height: 2.35rem; padding: 0 .5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid transparent;
}
a.pagination__n:hover { border-color: var(--accent); color: var(--ink); }
.pagination__n.on { background: var(--accent); color: #241300; transform: rotate(-2deg); }
.pagination__gap { opacity: .4; padding: 0 .15rem; }
@media (max-width: 560px) {
  .pagination__step { padding: .55rem .8rem; font-size: .78rem; }
  .pagination__n { min-width: 2rem; height: 2rem; font-size: .8rem; }
}

.empty { text-align: center; padding: clamp(3rem, 8vw, 6rem) 0; color: var(--ink-faint); }
.empty h1 { font-family: var(--display); font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--ink); }

/* ------------------------------------------------------------- touch --- */
/* On a touch screen the tappable things need to be comfortably big; several
   were under the ~44px that fingers actually need. */
@media (hover: none) and (pointer: coarse) {
  .nav a { padding-block: .7rem; }
  .nav__search { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .brand { padding-block: .4rem; }
  .tag-pill { padding: .55rem 1rem; }
  .tag-pill--lg { padding: .65rem 1.15rem; }
  .vbox__tab { padding: .7rem 1.1rem; }
  .pagination__n { min-width: 44px; height: 44px; }
  .pagination__step { padding: .75rem 1.2rem; }
  /* Footer links sit inside flex items, so they need their own height. */
  .site-foot a { display: inline-flex; align-items: center; min-height: 44px; }
  /* Hover transforms just stick on touch; drop them. */
  .card:hover .card__media,
  .card:hover .card__media img,
  .card:hover .card__title,
  .brand:hover img,
  .tag-pill:hover { transform: none; }
}

/* Very small screens: give the hero and headings a little more room. */
@media (max-width: 400px) {
  .hero h1 { font-size: clamp(1.75rem, 8.5vw, 2.2rem); }
  .hero p { font-size: .95rem; }
  .recipe-title { font-size: clamp(1.85rem, 8.5vw, 2.4rem); }
  .card__title { font-size: .98rem; padding: .7rem; }
  .vbox__tabs { gap: .3rem; }
}

main { display: block; }
.stack-lg > * + * { margin-top: clamp(3rem, 7vw, 5rem); }

/* =========================================================== PRINT ====== */
/* A printed recipe should be a usable kitchen sheet: the words and the
   pictures that show technique, on white, with nothing that only works on a
   screen. Navigation, search, the video player, tag pills and the related
   strip are all dropped. */
@media print {
  :root {
    --bg: #fff; --bg-sunk: #fff; --bg-raise: #fff;
    --ink: #000; --ink-soft: #222; --ink-faint: #555;
    --rule: #bbb; --accent: #000; --accent-ink: #000;
    --shadow: none; --shadow-lift: none;
  }

  @page { margin: 18mm 16mm; }

  html, body { background: #fff !important; color: #000 !important; font-size: 11pt; }

  /* Screen-only furniture. */
  .site-head, .site-foot, .skip, .searchbox, .nav, .nav__search,
  .related, .tag-cloud, .pagination, .section-head .more,
  .vbox__tabs, .video, .video__btn, .card__play, .noshot { display: none !important; }

  /* The hero photo is decorative on paper and eats a whole page. */
  .recipe-hero, .hero { display: none !important; }

  main > :last-child:not(.related) { padding-bottom: 0; }
  .wrap, .prose-wrap, .prose > * { width: 100% !important; max-width: 100% !important; margin: 0 !important; }

  .recipe-title {
    font-size: 24pt; line-height: 1.1; margin: 0 0 .2rem;
    letter-spacing: -.02em;
  }
  .eyebrow { font-size: 8pt; letter-spacing: .12em; color: #555; }
  .rule { display: none; }

  /* Where it came from, so a printed page can be found again. */
  .recipe-title::after {
    content: "foodemperor.com";
    display: block;
    font-family: var(--display);
    font-size: 8.5pt; font-weight: 600; letter-spacing: .06em;
    color: #666; margin-top: .35rem;
  }

  .prose { font-size: 11pt; line-height: 1.5; }
  .prose p { margin: 0 0 .55rem; orphans: 3; widows: 3; }
  .prose h2, .prose h3, .prose h4 {
    font-size: 13pt; margin: .9rem 0 .3rem;
    break-after: avoid; page-break-after: avoid;
  }
  .prose ul, .prose ol { margin: 0 0 .6rem; padding-left: 1.1rem; }
  .prose li { margin-bottom: .15rem; break-inside: avoid; }
  .prose li::marker { color: #000; }

  /* Keep photographs, but small enough that they illustrate rather than dominate. */
  .prose figure, .prose .figure { width: 100% !important; margin: .6rem 0; break-inside: avoid; }
  .prose figure img, .prose .figure img, .prose img {
    max-height: 62mm; width: auto; max-width: 100%;
    box-shadow: none !important; border-radius: 0;
  }
  figcaption { font-size: 8.5pt; color: #555; }

  /* The structured ingredients/method card is the point of printing. */
  .recipe-card {
    width: 100% !important; border: 1px solid #bbb; padding: 8pt;
    break-inside: avoid; page-break-inside: avoid; margin: .8rem 0;
  }
  .recipe-facts { gap: .8rem; padding-bottom: .4rem; margin-bottom: .5rem; }
  .ingredients li { padding: .15rem 0 .15rem 1.1rem; border-bottom: 1px dotted #ccc; }
  .ingredients li::before { background: #000; width: .25rem; height: .25rem; top: .85em; }
  .steps li { padding-left: 2rem; margin-bottom: .45rem; break-inside: avoid; }
  .steps li::before { background: #fff; color: #000; border: 1px solid #000; width: 1.5rem; height: 1.5rem; font-size: 9pt; }

  /* Spell out link targets — a printed underline is no use on its own. */
  .prose a { color: #000; text-decoration: underline; }
  .prose a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt; color: #555; word-break: break-all;
  }
  .prose a[href^="/"]::after {
    content: " (foodemperor.com" attr(href) ")";
    font-size: 8pt; color: #555;
  }

  /* Pills are screen furniture; on paper the addresses (added below) are the
     content, so flatten them into a plain list. */
  .socials { display: block; margin: 0 0 .6rem; }
  .socials a {
    display: block; border: 0; padding: 0; margin-bottom: .15rem;
    font-size: 10pt; border-radius: 0;
  }
  .socials a::before { display: none; }

  /* A recipe with a film: say so, and give the address. */
  .vbox::after {
    content: "Video: youtube.com/watch?v=" attr(data-first-video);
    display: block; font-family: var(--display); font-size: 9pt; color: #333;
  }
  .vbox { margin: .5rem 0; break-inside: avoid; }
  /* The caption is a flex column on screen, so it needs the cross-axis reset
     as well as text-align to sit flush left on paper. */
  .vbox__cap { text-align: left; margin: 0; align-items: flex-start; }
  .vbox__title { font-size: 10pt; font-weight: 700; }
  .vbox__orig { display: none; }
}

/* Breathing room before the footer. Without it the last row — usually the tag
   cloud — sits directly on the footer's top border. Applied once, to whatever
   main's final block is; the related strip already carries its own padding. */
main > :last-child:not(.related) { padding-bottom: clamp(3rem, 7vw, 5.5rem); }