/* ==========================================================================
   MealPartner — the website as a cookbook
   Cover (sage cloth; the first page moves up over it) → dedication → contents → chapters set
   like recipes, each facing a colour plate → recipe cards → notes → back cover.
   Palette: the app's "Warm Kitchen" tokens. Type: Vollkorn, as in the app.
   ========================================================================== */

:root {
  /* paper and ink */
  --paper: #F8F3EA;
  --page: #FFFDF9;
  --recess: #EFE6D8;
  --rule: #DED3C0;
  --rule-strong: #CFC2AB;
  --ink: #221E19;
  --ink-soft: #3D372F;
  --stone: #6F675B;

  /* brand */
  --cloth: #A9BAA3;
  --sage: #5E795D;
  --sage-deep: #4B634A;
  --terracotta: #C64C27;
  --fill-terracotta: #EF835D;

  /* plate washes (the app's decorative families) */
  --wash-terracotta: #F6C9B8;
  --wash-mustard: #F3D9A6;
  --wash-sage: #CBD6C5;
  --wash-blush: #F8D9D4;
  --wash-parchment: #E9DCC4;
  --wash-slate: #C6D3E0;

  /* type */
  --serif: "Vollkorn", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --caps: "Vollkorn SC", "Vollkorn", Georgia, serif;
  --hand: "Reenie Beanie", "Bradley Hand", "Segoe Print", cursive;
  --badge: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;

  /* layout */
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --bar-h: 3.5rem;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* textures */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .13 0 0 0 0 .12 0 0 0 0 .1 0 0 0 .32 -.14'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  --weave:
    repeating-linear-gradient(0deg, rgba(34, 30, 25, .045) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
summary { cursor: pointer; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  font-kerning: normal;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

:focus-visible {
  outline: 2.5px solid var(--sage);
  outline-offset: 3px;
  border-radius: 4px;
}
.cloth :focus-visible,
.cover :focus-visible,
.backcover :focus-visible { outline-color: var(--ink); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 100;
  padding: .55rem .9rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 8px;
  font-size: .95rem;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ---------- Shared type ---------- */
.label,
.chapter__label {
  font-family: var(--caps);
  font-weight: 600;
  font-size: .84rem;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: lowercase;
}
.label { color: var(--stone); }
.chapter__label { color: var(--terracotta); }

.chapter__title {
  margin-top: .45rem;
  font-weight: 800;
  font-size: clamp(2.35rem, 4.3vw, 3.9rem);
  line-height: 1.03;
  letter-spacing: -.018em;
  text-wrap: balance;
}

.headnote {
  margin-top: 1.2rem;
  font-style: italic;
  font-size: clamp(1.18rem, 1.45vw, 1.34rem);
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.ornament {
  width: 2.3rem;
  height: 2.15rem;
  fill: var(--sage);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .46rem 1.05rem .5rem;
  border-radius: 999px;
  font-weight: 650;
  font-size: .98rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s, transform .2s var(--ease);
}
.btn--sage { background: var(--sage); color: #fff; }
.btn--sage:hover { background: var(--sage-deep); transform: translateY(-1px); }

.store {
  display: inline-flex;
  align-items: center;
  gap: .68rem;
  padding: .58rem 1.35rem .62rem 1.05rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 14px;
  text-decoration: none;
  font-family: var(--badge);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22), 0 14px 26px -14px rgba(34, 30, 25, .7);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.store:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22), 0 20px 30px -14px rgba(34, 30, 25, .75);
}
.store__logo { width: 1.85rem; height: 1.85rem; fill: currentColor; flex: none; margin-top: -.15rem; }
.store__text { display: grid; text-align: left; line-height: 1; }
.store__text small { font-size: .69rem; letter-spacing: .01em; opacity: .85; }
.store__text strong { margin-top: .16rem; font-size: 1.34rem; font-weight: 600; letter-spacing: -.01em; }

/* ---------- Top bar ---------- */
.bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--bar-h);
  padding: .45rem var(--gutter);
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
  background: rgba(248, 243, 234, .88);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  backdrop-filter: saturate(1.3) blur(14px);
  border-bottom: 1px solid var(--rule);
  transition: transform .5s var(--ease), opacity .3s, visibility 0s;
}
.js:not(.is-open) .bar {
  transform: translateY(-105%);
  opacity: 0;
  visibility: hidden;
  transition: transform .35s var(--ease), opacity .25s, visibility 0s .35s;
}
.bar__brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 750;
  font-size: 1.22rem;
  letter-spacing: -.01em;
  text-decoration: none;
}
.bar__mark { width: 1.35rem; height: 1.62rem; fill: var(--ink); margin-top: -.2rem; }
.bar__nav { display: flex; align-items: center; gap: clamp(.9rem, 2.2vw, 1.9rem); }
.bar__link {
  font-family: var(--caps);
  font-weight: 600;
  font-size: .86rem;
  letter-spacing: .13em;
  text-transform: lowercase;
  text-decoration: none;
  color: var(--ink-soft);
  transition: color .2s;
}
.bar__link:hover { color: var(--sage); }
.bar__link--wide { display: none; }
@media (min-width: 820px) { .bar__link--wide { display: inline; } }
@media (max-width: 420px) { .bar__link { display: none; } }

/* ==========================================================================
   The cover
   ========================================================================== */
.cloth {
  background-color: var(--cloth);
  background-image: var(--weave), var(--grain);
}

.opening {
  position: relative;
  /* how much of the first page shows at the foot of the cover */
  --peek: clamp(4.25rem, 12vh, 7.5rem);
}

.cover {
  --hinge: clamp(1.1rem, 3vw, 2.6rem);
  /* The frame has the same margin left and right, so the frame and all the text sit in the
     centre of the window. The spine groove lies inside the left margin. */
  --frame-x: calc(var(--hinge) + clamp(.65rem, 1.5vw, 1.4rem));
  --frame-y: clamp(.7rem, 1.9vw, 1.6rem);
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding:
    calc(var(--frame-y) + clamp(.6rem, 2.4vh, 1.4rem))
    calc(var(--frame-x) + 1.1rem)
    calc(var(--peek) + clamp(1rem, 3vh, 2rem));
  background-color: var(--cloth);
  background-image:
    linear-gradient(90deg, rgba(34, 30, 25, .2), rgba(34, 30, 25, .05) var(--hinge), rgba(34, 30, 25, 0) calc(var(--hinge) + 1px)),
    var(--weave),
    var(--grain);
  color: var(--ink);
  text-align: center;
  overflow: hidden;
}
/* the groove where a hardcover folds */
.cover::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--hinge) - 5px);
  width: 10px;
  background: linear-gradient(90deg, rgba(34, 30, 25, 0), rgba(34, 30, 25, .26) 42%, rgba(255, 255, 255, .3) 58%, rgba(255, 255, 255, 0));
  pointer-events: none;
}
/* stamped double rule; its foot runs under the first page */
.cover__frame {
  position: absolute;
  inset: var(--frame-y) var(--frame-x);
  border: 1.5px solid rgba(34, 30, 25, .62);
  border-radius: 10px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .3);
  pointer-events: none;
}
.cover__frame::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(34, 30, 25, .38);
  border-radius: 6px;
}

.cover__inner {
  position: relative;
  display: grid;
  /* minmax(0, 1fr): the column must not grow with the large title, or all the text moves off centre */
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  width: 100%;
  max-width: 60rem;
}
.cover__eyebrow {
  font-family: var(--caps);
  font-weight: 600;
  font-size: clamp(.74rem, 1.1vw, .9rem);
  letter-spacing: .2em;
  text-transform: lowercase;
  color: rgba(34, 30, 25, .82);
}
/* Sizes follow the width and the height of the window, so the cover and the page at its
   foot fit in one screen on a short laptop as well as on a tall phone. */
.cover__mark {
  width: clamp(3.5rem, min(9.4vw, 13vh), 8rem);
  height: auto;
  aspect-ratio: 576 / 696;
  margin-top: clamp(.8rem, 3vh, 2.2rem);
  fill: var(--ink);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .32));
}
.cover__title {
  margin-top: clamp(.3rem, 1.2vh, .9rem);
  font-weight: 900;
  font-size: clamp(2.35rem, min(11.6vw, 16.5vh), 8.6rem);
  line-height: .96;
  letter-spacing: -.028em;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
}
.cover__subtitle {
  max-width: 42rem;
  margin-top: clamp(.5rem, 1.6vh, 1.1rem);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.25rem, min(2.7vw, 4.2vh), 2.15rem);
  line-height: 1.2;
  text-wrap: balance;
}
.cover__subtitle em { font-weight: 700; }
.cover__blurb {
  margin-top: clamp(.7rem, 2.2vh, 1.5rem);
  max-width: 35rem;
  font-size: clamp(1rem, 1.3vw, 1.16rem);
  line-height: 1.5;
  color: rgba(34, 30, 25, .9);
  text-wrap: balance;
}
.cover__cta {
  display: grid;
  justify-items: center;
  gap: .7rem;
  margin-top: clamp(1rem, 3vh, 2.1rem);
}
.cover__fine {
  font-family: var(--caps);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: lowercase;
  color: rgba(34, 30, 25, .78);
  text-wrap: balance;
}
.cover__fine span { white-space: nowrap; }
@media (max-width: 480px) {
  .cover__fine span { display: block; }
  .cover__fine .cover__dot { display: none; }
}
/* a short phone screen: the subtitle and the button say enough */
@media (max-width: 560px) and (max-height: 640px) {
  .cover__blurb { display: none; }
}
.cover__shade {
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
}

/* ---------- The first page, which lies on top of the cover ---------- */
.flyleaf {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  margin-top: calc(-1 * var(--peek));
  padding: calc(var(--peek) + 2rem) var(--gutter) 5rem;
  background: var(--page) var(--grain);
  border-top: 1px solid rgba(34, 30, 25, .16);
  box-shadow: 0 -1.6rem 3.2rem -1rem rgba(34, 30, 25, .42), 0 -.25rem .6rem rgba(34, 30, 25, .1);
  text-align: center;
}
/* The strip of the first page that shows at the foot of the cover. All of it is the link. */
.flyleaf__cue {
  position: absolute;
  inset: 0 0 auto 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .15rem;
  height: var(--peek);
  font-family: var(--caps);
  font-weight: 600;
  font-size: .84rem;
  letter-spacing: .18em;
  text-transform: lowercase;
  text-decoration: none;
  color: var(--ink);
  opacity: clamp(0, calc(1 - var(--p, 0) * 2.6), 1);
}
.flyleaf__cue svg { width: 1.2rem; height: 1.2rem; color: var(--terracotta); }
.flyleaf__cue:hover span { color: var(--sage-deep); }
.is-open .flyleaf__cue { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .flyleaf__cue svg { animation: nudge 2.6s ease-in-out infinite; }
}
@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
.flyleaf__inner { display: grid; justify-items: center; gap: 1.6rem; }
.dedication {
  max-width: 21ch;
  font-style: italic;
  font-size: clamp(1.55rem, 3.3vw, 2.6rem);
  line-height: 1.32;
  text-wrap: balance;
}
.dedication em { font-weight: 650; color: var(--sage); }

/* Without JavaScript the bar shows from the start, so the cover makes room for it. */
html:not(.js) .cover { padding-top: calc(var(--bar-h) + var(--frame-y) + 1.25rem); }
html:not(.js) .cover__frame { top: calc(var(--bar-h) + var(--frame-y)); }

/* The cover does not move. The first page moves up over it as the reader scrolls,
   and the cover falls into shadow (site.js sets --p from 0 to 1 over the first screen).
   --cover-top stays 0 unless the cover is taller than the window; then it lets the
   whole cover scroll into view before it holds still. */
@media (prefers-reduced-motion: no-preference) {
  .cover { position: sticky; top: var(--cover-top, 0px); }
  .cover__shade { opacity: calc(var(--p, 0) * .4); }
}

/* ==========================================================================
   The pages lie on top of the back cover: the last page moves away and the
   cloth is already there.
   ========================================================================== */
.book { position: relative; }
.book > main {
  position: relative;
  z-index: 1;
  background: var(--paper) var(--grain);
  box-shadow: 0 1.6rem 3.2rem -1rem rgba(34, 30, 25, .42), 0 .25rem .6rem rgba(34, 30, 25, .1);
}
@media (prefers-reduced-motion: no-preference) and (min-height: 620px) {
  html:not(.no-pin-back) .backcover { position: sticky; bottom: 0; z-index: 0; }
}

/* ==========================================================================
   Spreads: a text page facing a colour plate
   ========================================================================== */
.spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  scroll-margin-top: var(--bar-h);
}
.leaf {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: clamp(3.75rem, 9vw, 7rem) var(--gutter);
}
.leaf--text { background: var(--paper) var(--grain); }
.leaf--plate { background: var(--wash, var(--recess)) var(--grain); }
.leaf__block { width: 100%; max-width: 35rem; }

.wash-terracotta { --wash: var(--wash-terracotta); }
.wash-mustard { --wash: var(--wash-mustard); }
.wash-sage { --wash: var(--wash-sage); }
.wash-blush { --wash: var(--wash-blush); }
.wash-parchment { --wash: var(--wash-parchment); }
.wash-slate { --wash: var(--wash-slate); }

@media (min-width: 1000px) {
  .spread { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .leaf { min-height: min(94vh, 60rem); padding-bottom: clamp(5.5rem, 9vw, 7.5rem); }
  .leaf--verso { order: 1; }
  .leaf--recto { order: 2; }

  /* the fold */
  .leaf::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4.5rem;
    pointer-events: none;
  }
  .leaf--verso::before { right: 0; background: linear-gradient(270deg, rgba(34, 30, 25, .1), rgba(34, 30, 25, .03) 45%, rgba(34, 30, 25, 0)); }
  .leaf--recto::before { left: 0; background: linear-gradient(90deg, rgba(34, 30, 25, .08), rgba(34, 30, 25, .02) 45%, rgba(34, 30, 25, 0)); }

  /* running feet */
  .leaf::after {
    position: absolute;
    bottom: 2rem;
    font-family: var(--caps);
    font-size: .8rem;
    letter-spacing: .14em;
    text-transform: lowercase;
    color: rgba(34, 30, 25, .62);
    white-space: nowrap;
  }
  .leaf--verso::after { left: var(--gutter); content: attr(data-folio) "\2002·\2002" attr(data-foot); }
  .leaf--recto::after { right: var(--gutter); content: attr(data-foot) "\2002·\2002" attr(data-folio); }
}

/* ---------- Contents ---------- */
.toc__title {
  font-weight: 800;
  font-size: clamp(2.35rem, 4.3vw, 3.9rem);
  line-height: 1.03;
  letter-spacing: -.018em;
}
.toc__list { margin-top: 1.6rem; }
.toc__back { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--rule-strong); }
.toc__row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: baseline;
  padding: .52rem 0;
  text-decoration: none;
}
.toc__num {
  font-family: var(--caps);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: lowercase;
  color: var(--terracotta);
}
.toc__main { display: grid; min-width: 0; }
.toc__line { display: flex; align-items: baseline; gap: .55rem; min-width: 0; }
.toc__name { font-weight: 650; font-size: 1.32rem; line-height: 1.25; transition: color .2s; }
.toc__dots {
  flex: 1 1 1.5rem;
  min-width: 1.5rem;
  height: .4em;
  align-self: flex-end;
  margin-bottom: .42em;
  background: radial-gradient(circle, rgba(34, 30, 25, .5) 1px, transparent 1.3px) 0 100% / 7px 4px repeat-x;
}
.toc__page { font-size: 1.15rem; font-variant-numeric: oldstyle-nums tabular-nums; transition: color .2s; }
.toc__desc { font-style: italic; font-size: 1rem; line-height: 1.35; color: var(--stone); }
.toc__row:hover .toc__name,
.toc__row:hover .toc__page { color: var(--sage); }

.foreword { margin-top: 2.6rem; padding-top: 1.9rem; border-top: 1px solid var(--rule-strong); }
.foreword__text { margin-top: .7rem; text-wrap: pretty; }
.foreword__text::first-letter {
  float: left;
  margin: .34rem .5rem 0 0;
  font-weight: 800;
  font-size: 4.05rem;
  line-height: .74;
  color: var(--terracotta);
}
.foreword__sign { margin-top: 1.1rem; font-style: italic; color: var(--stone); text-align: right; }
.foreword__sign::before { content: "— "; }

/* ---------- Chapter text page ---------- */
.chapter__head::after { content: ""; display: table; clear: both; }
.chapter__art { float: right; width: 6.5rem; height: auto; margin: -1.1rem -.4rem .4rem 1rem; }
.chapter__art--pair { display: flex; align-items: flex-end; gap: .1rem; width: auto; margin-right: -.6rem; }
.chapter__art--pair img:first-child { width: 4.9rem; margin-bottom: .25rem; }
.chapter__art--pair img:last-child { width: 6rem; }
@media (max-width: 480px) {
  .chapter__art { width: 5.2rem; margin-top: -.6rem; }
  .chapter__art--pair { width: auto; margin-right: -.3rem; }
  .chapter__art--pair img:first-child { width: 3.7rem; }
  .chapter__art--pair img:last-child { width: 4.6rem; }
}

.yield {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 2.1rem;
  margin-top: 1.9rem;
  padding: .82rem 0 .9rem;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}
.yield div { display: flex; align-items: baseline; gap: .55rem; }
.yield dt {
  font-family: var(--caps);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .15em;
  text-transform: lowercase;
  color: var(--stone);
}
.yield dd { font-style: italic; font-size: 1.06rem; line-height: 1.3; }

.recipe { display: grid; gap: 2rem; margin-top: 2rem; }
@media (min-width: 560px) and (max-width: 999px), (min-width: 1240px) {
  .recipe { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.4rem; }
}

.bring { margin-top: .55rem; }
.bring li {
  padding: .5rem 0 .55rem;
  border-bottom: 1px dotted var(--rule-strong);
  font-size: 1.04rem;
  line-height: 1.38;
}

.method { margin-top: .55rem; counter-reset: step; }
.method li {
  counter-increment: step;
  position: relative;
  padding: .5rem 0 .55rem 2.1rem;
  font-size: 1.08rem;
  line-height: 1.5;
}
.method li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: .62rem;
  font-style: italic;
  font-weight: 600;
  font-size: 1.62rem;
  line-height: 1;
  color: var(--terracotta);
  font-variant-numeric: lining-nums;
}
.method b { font-weight: 700; }
.aside {
  margin-top: 1rem;
  padding-left: 2.1rem;
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.margin-note {
  display: flex;
  align-items: flex-start;
  gap: .25rem;
  margin: 1.05rem 0 0 .2rem;
  font-family: var(--hand);
  font-size: 1.72rem;
  line-height: 1;
  color: var(--terracotta);
  transform: rotate(-3deg);
  transform-origin: left center;
}
.margin-note svg { flex: none; width: 1.7rem; height: 1.95rem; margin: -1.05rem .15rem 0 0; }

/* ---------- Plates and phones ---------- */
.plate { display: grid; justify-items: center; gap: 1.9rem; width: 100%; }
.plate > .phone { width: min(72%, 19rem); }
@media (min-width: 1000px) {
  .leaf--plate { align-content: start; }
  .plate { position: sticky; top: calc(var(--bar-h) + 2.25rem); }
  .plate > .phone { width: min(72%, 19rem, calc((100vh - 15.5rem) * .452)); }
  .plate .duo { width: min(100%, 36rem, calc((100vh - 18rem) * .904 + 1.75rem)); }
}
.plate__caption {
  max-width: 24rem;
  font-style: italic;
  font-size: 1.04rem;
  line-height: 1.35;
  text-align: center;
  color: var(--ink);
}
.plate__no {
  display: block;
  margin-bottom: .25rem;
  font-family: var(--caps);
  font-style: normal;
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: lowercase;
  color: rgba(34, 30, 25, .74);
}

.phone { container-type: inline-size; width: 100%; }
/* Radii follow the real iPhone display: its corner is 15.6% of the screen width (measured from the
   simulator's display mask). A smaller radius shows the area behind a full-height sheet in the corners. */
.phone__body {
  padding: 10px;
  padding: 3.3cqw;
  border-radius: 54px;
  border-radius: 17.9cqw;
  background: var(--ink);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    0 2px 3px rgba(34, 30, 25, .3),
    0 34px 50px -26px rgba(34, 30, 25, .55),
    0 14px 22px -14px rgba(34, 30, 25, .3);
}
.phone__screen {
  position: relative;
  aspect-ratio: 1206 / 2622;
  overflow: hidden;
  border-radius: 44px;
  border-radius: 14.6cqw;
  background: var(--recess);
  isolation: isolate;
}
/* The Dynamic Island is part of the frame, so all screenshots get the same one. A capture with
   `simctl io screenshot --mask=black` has an island in the image and a raw capture does not; this
   shape covers both. Measured on the iPhone 17 Pro: 31.2% of the screen width, 4.2% of its height,
   1.6% from the top. It is a hair larger here so that it fully covers an island in the image. */
.phone__screen::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 1.52%;
  left: 50%;
  width: 31.8%;
  height: 4.36%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
}
.phone__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity .45s;
}
.phone__img.is-ready { opacity: 1; }

/* the slip that says which screenshot goes here */
.shot {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  gap: 2.8cqw;
  padding: 24px 20px;
  padding: 9cqw 8.4cqw;
  text-align: left;
}
.shot__plate {
  font-family: var(--caps);
  font-weight: 600;
  font-size: 11px;
  font-size: clamp(9px, 3.7cqw, 12.5px);
  letter-spacing: .16em;
  text-transform: lowercase;
  color: var(--terracotta);
}
.shot__title {
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  font-size: clamp(14px, 7.4cqw, 23px);
  line-height: 1.12;
}
.shot__what {
  padding-top: 8px;
  padding-top: 3.2cqw;
  border-top: 1px solid var(--rule-strong);
  font-size: 12.5px;
  font-size: clamp(10.5px, 4.45cqw, 14px);
  line-height: 1.42;
  color: var(--ink-soft);
}
.shot__file {
  align-self: flex-start;
  max-width: 100%;
  padding: .28em .55em;
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  background: var(--page);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-size: clamp(8.5px, 3.5cqw, 11px);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
/* a screenshot that loaded covers its slip at once, so the slip never shows through the fade */
.phone__screen:has(.phone__img.is-ready) .shot { visibility: hidden; }
/* clean mode (the public state): no slip while an image loads; a short slip only if the file is missing */
[data-shots="clean"] .shot { align-items: center; text-align: center; visibility: hidden; }
[data-shots="clean"] .phone__screen.is-missing .shot { visibility: visible; }
[data-shots="clean"] .shot__what,
[data-shots="clean"] .shot__file { display: none; }

/* two phones */
.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(.9rem, 2vw, 1.75rem);
  width: min(100%, 36rem);
}
.duo .phone--back { transform: rotate(-2.4deg); }
.duo .phone--front { margin-top: 13%; transform: rotate(2deg); }

@media (max-width: 719px) {
  /* on a phone the pair becomes a strip you swipe, like the App Store */
  .duo {
    display: flex;
    gap: 1rem;
    width: calc(100% + 2 * var(--gutter));
    margin-inline: calc(-1 * var(--gutter));
    padding: .5rem var(--gutter) 2.2rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .duo::-webkit-scrollbar { display: none; }
  .duo .phone { flex: 0 0 66%; scroll-snap-align: center; }
  .duo .phone--back,
  .duo .phone--front { margin-top: 0; transform: none; }
  .plate--duo { gap: .4rem; }
}

/* ==========================================================================
   Recipe cards (use cases)
   ========================================================================== */
.section-head { max-width: 42rem; margin-inline: auto; text-align: center; }

.cards {
  padding: clamp(4.5rem, 9vw, 8rem) var(--gutter) clamp(5rem, 10vw, 9rem);
  background-color: var(--recess);
  background-image:
    repeating-linear-gradient(0deg, rgba(34, 30, 25, .028) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 1px, transparent 1px 4px);
  scroll-margin-top: var(--bar-h);
}
.cards__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19.5rem), 1fr));
  gap: clamp(1.4rem, 2.6vw, 2.3rem);
  max-width: 74rem;
  margin: clamp(2.8rem, 5vw, 4.2rem) auto 0;
}
.card {
  --tilt: 0deg;
  display: flex;
  flex-direction: column;
  padding: 1.35rem 1.55rem 1.3rem;
  background: var(--page);
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(34, 30, 25, .14), 0 22px 30px -22px rgba(34, 30, 25, .42);
  transform: rotate(var(--tilt));
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.card:nth-child(6n + 1) { --tilt: -1.3deg; }
.card:nth-child(6n + 2) { --tilt: .8deg; }
.card:nth-child(6n + 3) { --tilt: -.5deg; }
.card:nth-child(6n + 4) { --tilt: 1.1deg; }
.card:nth-child(6n + 5) { --tilt: -.9deg; }
.card:nth-child(6n + 6) { --tilt: .6deg; }
@media (hover: hover) {
  .card:hover {
    transform: rotate(0deg) translateY(-5px);
    box-shadow: 0 1px 2px rgba(34, 30, 25, .14), 0 30px 36px -22px rgba(34, 30, 25, .46);
  }
}
.card__for {
  font-family: var(--caps);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .17em;
  text-transform: lowercase;
  color: var(--stone);
}
.card__title {
  margin-top: .1rem;
  padding-bottom: .68rem;
  border-bottom: 2px solid var(--fill-terracotta);
  font-weight: 750;
  font-size: 1.5rem;
  line-height: 1.14;
  letter-spacing: -.008em;
  text-wrap: balance;
}
.card__body {
  flex: 1;
  margin-top: .15rem;
  font-size: 1.05rem;
  line-height: 2rem;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(2rem - 1px), var(--rule) calc(2rem - 1px), var(--rule) 2rem);
  background-position: 0 -.42rem;
  min-height: 8rem;
  text-wrap: pretty;
}
.card__serves { margin-top: .95rem; font-style: italic; font-size: 1.02rem; line-height: 1.3; }
.card__serves span {
  margin-right: .4rem;
  font-family: var(--caps);
  font-style: normal;
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .15em;
  text-transform: lowercase;
  color: var(--terracotta);
}

/* ==========================================================================
   Kitchen notes (FAQ)
   ========================================================================== */
.notes {
  display: grid;
  gap: clamp(2.2rem, 5vw, 5rem);
  max-width: 78rem;
  margin-inline: auto;
  padding: clamp(4.5rem, 9vw, 8rem) var(--gutter);
  scroll-margin-top: var(--bar-h);
}
@media (min-width: 1000px) {
  .notes { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .notes__intro { position: sticky; top: calc(var(--bar-h) + 2.5rem); }
}
.note { border-top: 1px solid var(--rule-strong); }
.note:last-child { border-bottom: 1px solid var(--rule-strong); }
.note summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0 1.2rem;
  font-weight: 650;
  font-size: clamp(1.2rem, 1.7vw, 1.4rem);
  line-height: 1.25;
  list-style: none;
}
.note summary::-webkit-details-marker { display: none; }
.note summary::after {
  content: "+";
  flex: none;
  font-weight: 400;
  font-size: 1.7rem;
  line-height: .8;
  color: var(--terracotta);
  transition: transform .3s var(--ease);
}
.note[open] summary::after { transform: rotate(45deg); }
.note summary:hover { color: var(--sage-deep); }
.note p { max-width: 40rem; padding: 0 2.5rem 1.5rem 0; color: var(--ink-soft); text-wrap: pretty; }
.note a { color: var(--sage-deep); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* ==========================================================================
   End mark and back cover
   ========================================================================== */
.endmark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: 0 var(--gutter) clamp(4rem, 8vw, 6.5rem);
}
.endmark::before,
.endmark::after {
  content: "";
  width: clamp(2.5rem, 8vw, 5rem);
  height: 1px;
  background: var(--rule-strong);
}

.backcover {
  --hinge: clamp(1.1rem, 3vw, 2.6rem);
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: min(100vh, 52rem);
  min-height: min(100svh, 52rem);
  padding-right: var(--hinge);
  background-color: var(--cloth);
  background-image:
    linear-gradient(270deg, rgba(34, 30, 25, .2), rgba(34, 30, 25, .05) var(--hinge), rgba(34, 30, 25, 0) calc(var(--hinge) + 1px)),
    var(--weave),
    var(--grain);
  text-align: center;
  overflow: hidden;
}
.backcover::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(var(--hinge) - 5px);
  width: 10px;
  background: linear-gradient(270deg, rgba(34, 30, 25, 0), rgba(34, 30, 25, .26) 42%, rgba(255, 255, 255, .3) 58%, rgba(255, 255, 255, 0));
  pointer-events: none;
}
.backcover__inner {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 1rem;
  padding: clamp(4.5rem, 10vw, 8rem) var(--gutter) clamp(3rem, 6vw, 5rem);
}
.backcover__title {
  font-weight: 900;
  font-size: clamp(2.9rem, 8.4vw, 7rem);
  line-height: .98;
  letter-spacing: -.026em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
  text-wrap: balance;
}
.backcover__title em { font-weight: 500; }
.backcover__sub { margin-bottom: 1rem; font-style: italic; font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.2; }
.backcover__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 2rem;
  margin-inline: var(--gutter);
  padding: 1.3rem 0 max(1.5rem, env(safe-area-inset-bottom));
  border-top: 1.5px solid rgba(34, 30, 25, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}
.backcover__brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 750; font-size: 1.15rem; text-decoration: none; }
.backcover__brand svg { width: 1.2rem; height: 1.45rem; fill: var(--ink); margin-top: -.18rem; }
.backcover__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.6rem; }
.backcover__links a,
.backcover__copy {
  font-family: var(--caps);
  font-size: .84rem;
  letter-spacing: .12em;
  text-transform: lowercase;
  text-decoration: none;
  color: rgba(34, 30, 25, .86);
}
.backcover__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 719px) {
  .backcover__foot { flex-direction: column; justify-content: center; }
}