/* ==========================================================================
   FlavorDraft — flavordraft.app

   Tokens are taken from the FlavorDraft iOS design package ("Foundations")
   so the site and the app share one palette, one type ramp and one radius
   language. The package's material rule carries over unchanged:

     glass floats, paper holds content — content surfaces are never glass,
     paper never casts a shadow, and there is exactly one accent.

   On the web that means the sticky header is the only translucent surface
   on the site, and the only drop shadow belongs to the phone in the hero.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces */
  --paper: #faf3e8;
  --paper-raised: #fffbf3;
  --paper-sunken: #f1e6d4;

  /* Ink.
     The app carries four descending text tones on paper (secondaryText,
     tertiaryText, mutedText and below). On a phone, at Dynamic Type sizes and
     under a colour-managed display, they all read. On the web the two lightest
     land at 3.8:1 and 2.7:1 against this background — under AA for anything
     that isn't large text — so the ramp is collapsed to a single muted tone at
     the app's own `secondaryText`, which clears 4.6:1. Separation that the
     lighter tones used to carry is done with size, weight and tracking
     instead; see `.overline`.
     Anything below that value survives only as non-text: marks, rules,
     disclosure affordances. */
  --ink: #2c2622; /* 11.3:1 — headings */
  --ink-body: #3b322c; /* 11.3:1 — long-form prose */
  --ink-2: #7a6c60; /* 4.6:1  — every secondary and muted text tone */
  /* A sunken ground costs about half a point of contrast, which is enough to
     put --ink-2 under AA on it. Muted text sitting on paperSunken or on the
     segmented control's groove steps down to this instead. */
  --ink-2-on-sunken: #6b5d52; /* 5.1:1 on paperSunken */
  --mark-empty: #d8c8b2; /* non-text: an unchecked ingredient mark */
  --segment-track: #efe4d2; /* non-text: the segmented control's groove */

  /* Lines */
  --rule: #e9ddc9;
  --rule-strong: #decfb8;
  --hairline: #f0e5d4;
  --field: #e4d7c3;

  /* Accent — one, and used sparingly */
  --red: #b62b25;
  --red-deep: #7e1d1a;
  --red-tint: #f7e6e0;
  --on-red: #fff8ee;
  --parchment: #f6efe3;

  /* Reserved by the package for confirmation and for estimated values only */
  --green: #4e7a45;
  --amber: #b0761e;

  /* Type */
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino,
    Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Spacing — the package's 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 scale,
     extended upward for the room a page has that a phone screen does not. */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.25rem;
  --s6: 1.5rem;
  --s7: 2rem;
  --s8: 2.5rem;
  --s9: 3.5rem;
  --s10: 5rem;
  --s11: 7rem;

  /* Radii — sm 10 · md 14 · lg 20 · xl 28 · capsule */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Layout */
  --page-max: 74rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(4.5rem, 9vw, 8rem);
  --header-h: 4.25rem;

  /* The package's paper grain, at the same 3.5% it uses on device. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='g'%3E%3CfeTurbulence baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23g)' opacity='.035'/%3E%3C/svg%3E");

  color-scheme: light;
}

@media (max-width: 47.99em) {
  :root {
    --header-h: 3.75rem;
  }
}

/* --------------------------------------------------------------------------
   2 · Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--paper);
  background-image: var(--grain);
  color: var(--ink-body);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 600;
  text-wrap: balance;
}

p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

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

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--red);
  text-decoration-color: color-mix(in srgb, var(--red) 35%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
  transition: color 0.14s ease, text-decoration-color 0.14s ease;
}

a:hover {
  color: var(--red-deep);
  text-decoration-color: currentColor;
}

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

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

/* --------------------------------------------------------------------------
   3 · Type primitives
   -------------------------------------------------------------------------- */

.display {
  /* Sized so the longest line ("Skip the note-taking.", 9.58em wide in
     Newsreader 700 at this tracking) always clears the seven columns it sits
     in, from the 62em two-column breakpoint up. */
  font-size: clamp(2.75rem, 1.9rem + 2.2vw, 3.85rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.028em;
}

.h2 {
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.022em;
}

.h3 {
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.014em;
}

/* The package's `overline` token: 11.5 semibold, 1.3 tracking, uppercase. */
.overline {
  font-family: var(--sans);
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.125em;
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1.4;
}

.lead {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 34em;
}

.prose {
  color: var(--ink-2);
  max-width: 36em;
}

.prose + .prose {
  margin-top: var(--s4);
}

.accent {
  color: var(--red);
}

/* --------------------------------------------------------------------------
   4 · Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.section--tight {
  padding-block: clamp(3.25rem, 6vw, 5.5rem);
}

.section--ruled {
  border-top: 1px solid var(--rule);
}

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s8);
}

@media (min-width: 56em) {
  .grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--s8) var(--s7);
  }
}

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

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--red);
  color: var(--on-red);
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  text-decoration: none;
}

.skip-link:focus {
  transform: translate(-50%, 0);
  color: var(--on-red);
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   5 · Header
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .masthead {
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
  }
}

.masthead[data-stuck] {
  border-bottom-color: var(--rule);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.75rem, 3vw, 1.25rem);
  min-height: var(--header-h);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  padding-block: 0.5rem;
  text-decoration: none;
  color: inherit;
}

.wordmark__icon {
  width: clamp(1.5rem, 1.2rem + 1.4vw, 1.75rem);
  height: clamp(1.5rem, 1.2rem + 1.4vw, 1.75rem);
  border-radius: 24%;
  flex: none;
}

.wordmark__text {
  font-family: var(--serif);
  font-size: clamp(1.1875rem, 1rem + 0.9vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--red);
  line-height: 1;
}

.wordmark__stop {
  color: var(--red-deep);
}

.masthead__nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 1.75rem);
}

.masthead__link {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding-block: 0.75rem;
}

.masthead__link:hover,
.masthead__link[aria-current="page"] {
  color: var(--ink);
}

.masthead__link[aria-current="page"] {
  font-weight: 600;
}

.masthead__status {
  display: none;
  align-items: center;
  gap: 0.4375rem;
  padding-left: clamp(1rem, 3vw, 1.75rem);
  border-left: 1px solid var(--rule);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}

@media (min-width: 44em) {
  .masthead__status {
    display: inline-flex;
  }
}

.status-dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--red);
  flex: none;
}

/* --------------------------------------------------------------------------
   6 · Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-top: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(3.5rem, 7vw, 6.5rem);
}

.hero__grid {
  align-items: center;
  gap: clamp(3rem, 6vw, 4rem) var(--s7);
}

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

.hero__figure {
  grid-column: 1 / -1;
  /* Stacked, the composition keeps the same left edge as the headline above
     it rather than floating centred against left-aligned type. */
  justify-self: start;
}

@media (min-width: 62em) {
  .hero__copy {
    grid-column: 1 / span 7;
  }

  .hero__figure {
    grid-column: 8 / -1;
    justify-self: end;
  }
}

.hero__lead {
  margin-top: var(--s6);
}

.hero__meta {
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4375rem var(--s4);
}

.hero__meta-name {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.9375rem;
}

.hero__meta-note {
  font-size: 0.9375rem;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   7 · Hero composition — source above, saved recipe below

   The phone is a reconstruction, not a screenshot: every value below is the
   app's own point value from the design package, multiplied by --u so the
   whole thing scales from one number. 1 unit = 1pt at --device-w: 393px.
   -------------------------------------------------------------------------- */

.compose {
  /* Unitless on purpose: --u has to stay a plain ratio so that every
     `calc(<pt>px * var(--u))` below resolves to a length. Stepping the width
     rather than making it fluid keeps the phone at whole-pixel sizes, which
     is what keeps its hairline borders crisp. */
  --device-w: 264;
  --u: calc(var(--device-w) / 393);
  width: calc(var(--device-w) * 1px);
  max-width: 100%;
}

@media (min-width: 23em) {
  .compose {
    --device-w: 300;
  }
}

@media (min-width: 30em) {
  .compose {
    --device-w: 318;
  }
}

@media (min-width: 75em) {
  .compose {
    --device-w: 322;
  }
}

.compose__source {
  position: relative;
  z-index: 2;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 0.6875rem 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.compose__source-icon {
  flex: none;
  color: var(--red);
}

.compose__source-text {
  min-width: 0;
  flex: 1;
}

.compose__source-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.compose__source-url {
  display: block;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-body);
  margin-top: 0.125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The one line on the page that draws a relationship. No arrowheads. */
.compose__link {
  width: 1px;
  height: 1.75rem;
  margin-inline-start: 1.75rem;
  background: linear-gradient(
    to bottom,
    var(--rule-strong),
    color-mix(in srgb, var(--red) 55%, transparent)
  );
}

.device {
  position: relative;
  width: 100%;
  aspect-ratio: 393 / 852;
  border-radius: calc(46px * var(--u));
  overflow: hidden;
  background: var(--paper);
  background-image: var(--grain);
  color: var(--ink);
  font-family: var(--sans);
  border: 1px solid var(--rule-strong);
  /* The package lets only floating things cast a shadow. This floats. */
  box-shadow: 0 1.5rem 3.5rem -2rem rgba(44, 38, 34, 0.42);
}

.device__cover {
  position: absolute;
  inset: 0 0 auto;
  height: calc(348px * var(--u));
  background: url("../img/fallback-soup.svg") center / cover;
}

.device__scrim {
  position: absolute;
  inset: 0 0 auto;
  height: calc(150px * var(--u));
  background: linear-gradient(
    180deg,
    rgba(20, 15, 12, 0.42),
    rgba(20, 15, 12, 0)
  );
}

.device__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(16px * var(--u)) calc(20px * var(--u)) 0;
}

/* Floating glass control — the package's 38pt circle. */
.glass-dot {
  width: calc(38px * var(--u));
  height: calc(38px * var(--u));
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: rgba(255, 251, 243, 0.26);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 0 0.5px rgba(255, 255, 255, 0.2);
  color: var(--on-red);
}

.glass-dot svg {
  width: calc(18px * var(--u));
  height: calc(18px * var(--u));
}

.device__bar-group {
  display: flex;
  gap: calc(9px * var(--u));
}

.device__sheet {
  position: absolute;
  inset: calc(302px * var(--u)) 0 0;
  background: var(--paper);
  background-image: var(--grain);
  border-radius: calc(30px * var(--u)) calc(30px * var(--u)) 0 0;
  padding: calc(22px * var(--u)) calc(20px * var(--u)) 0;
  box-shadow: 0 -8px 24px -12px rgba(44, 38, 34, 0.3);
}

.device__title {
  font-family: var(--serif);
  font-size: calc(29px * var(--u));
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.014em;
  margin: 0;
}

.device__source {
  display: flex;
  align-items: center;
  gap: calc(6px * var(--u));
  margin-top: calc(9px * var(--u));
  font-size: calc(13px * var(--u));
  color: var(--ink-2);
}

.device__source svg {
  width: calc(14px * var(--u));
  height: calc(14px * var(--u));
  flex: none;
}

.device__meta {
  display: flex;
  align-items: center;
  gap: calc(18px * var(--u));
  margin-top: calc(14px * var(--u));
  font-size: calc(13.5px * var(--u));
  font-weight: 500;
  color: var(--ink-2);
}

.device__meta span {
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--u));
}

.device__meta svg {
  width: calc(15px * var(--u));
  height: calc(15px * var(--u));
  color: var(--red);
  flex: none;
}

.device__segments {
  display: flex;
  gap: calc(4px * var(--u));
  margin-top: calc(18px * var(--u));
  padding: calc(3px * var(--u));
  border-radius: calc(12px * var(--u));
  background: var(--segment-track);
}

.device__segment {
  flex: 1;
  height: calc(36px * var(--u));
  border-radius: calc(9px * var(--u));
  display: grid;
  place-items: center;
  font-size: calc(14.5px * var(--u));
  font-weight: 600;
  color: var(--ink-2-on-sunken);
}

.device__segment[data-on] {
  background: var(--paper-raised);
  color: var(--red);
  box-shadow: 0 1px 3px rgba(44, 38, 34, 0.14);
}

.device__list {
  display: flex;
  flex-direction: column;
  gap: calc(7px * var(--u));
  margin-top: calc(14px * var(--u));
}

.device__row {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: calc(13px * var(--u));
  padding: calc(12px * var(--u)) calc(14px * var(--u));
  display: flex;
  align-items: center;
  gap: calc(12px * var(--u));
  font-size: calc(15.5px * var(--u));
  line-height: 1.3;
}

.device__row b {
  font-weight: 600;
}

.device__row > span:last-child {
  flex: 1;
  min-width: 0;
}

.device__row svg {
  width: calc(20px * var(--u));
  height: calc(20px * var(--u));
  flex: none;
}

.device__row--done {
  color: var(--ink-2);
}

.device__mark-todo,
.device__mark-done {
  display: flex;
  flex: none;
}

.device__mark-todo {
  color: var(--mark-empty);
}

.device__mark-done {
  color: var(--green);
  --knockout: var(--paper-raised);
}

/* Content fades out rather than being cut off mid-row. */
.device__fade {
  position: absolute;
  inset: auto 0 0;
  height: calc(96px * var(--u));
  background: linear-gradient(
    180deg,
    rgba(250, 243, 232, 0),
    rgba(250, 243, 232, 0.96) 55%,
    var(--paper) 82%
  );
}

/* --------------------------------------------------------------------------
   8 · Sources — "From wherever you already cook."
   -------------------------------------------------------------------------- */

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

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

@media (min-width: 62em) {
  .sources__head {
    grid-column: 1 / span 5;
  }

  .sources__list {
    grid-column: 7 / -1;
  }
}

.ruled-list > li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1875rem;
  padding-block: var(--s4);
  border-top: 1px solid var(--rule);
}

@media (min-width: 34em) {
  .ruled-list > li {
    flex-direction: row;
    align-items: baseline;
    gap: var(--s4);
  }
}

.ruled-list > li:last-child {
  border-bottom: 1px solid var(--rule);
}

.ruled-list__term {
  font-weight: 600;
  color: var(--ink);
  flex: none;
  min-width: 0;
}

.ruled-list__note {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

@media (min-width: 34em) {
  .ruled-list__note {
    margin-left: auto;
    text-align: right;
  }
}

.sources__note {
  grid-column: 1 / -1;
  margin-top: var(--s2);
  font-size: 0.9375rem;
  color: var(--ink-2);
  max-width: 42em;
}

@media (min-width: 62em) {
  .sources__note {
    grid-column: 7 / -1;
  }
}

/* --------------------------------------------------------------------------
   9 · Capability spreads
   -------------------------------------------------------------------------- */

.spread {
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4rem) var(--s7);
}

.spread + .spread {
  margin-top: clamp(4rem, 8vw, 7rem);
}

.spread__copy,
.spread__figure {
  grid-column: 1 / -1;
}

@media (min-width: 62em) {
  .spread__copy {
    grid-column: 1 / span 5;
  }

  .spread__figure {
    grid-column: 7 / -1;
  }

  .spread--flip .spread__copy {
    grid-column: 8 / -1;
    grid-row: 1;
  }

  .spread--flip .spread__figure {
    grid-column: 1 / span 6;
    grid-row: 1;
  }
}

.spread__copy .prose {
  margin-top: var(--s5);
}

/* A lighter third beat: two columns of type carrying a small piece of real UI
   each, rather than a third full-width panel. */
.pair {
  margin-top: clamp(4rem, 8vw, 7rem);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid var(--rule);
  gap: clamp(2.5rem, 5vw, 3.5rem) var(--s7);
  align-items: start;
}

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

@media (min-width: 56em) {
  .pair__item {
    grid-column: span 6;
  }

  .pair__item + .pair__item {
    padding-left: clamp(2rem, 4vw, 3.5rem);
    border-left: 1px solid var(--rule);
  }
}

.pair__item .prose {
  margin-top: var(--s4);
}

.prose--offset {
  margin-top: var(--s6);
}

.recipe-row__art--soup {
  background-image: url("../img/fallback-soup.svg");
}

.recipe-row__art--bread {
  background-image: url("../img/fallback-bread.svg");
}

.recipe-row__art--pasta {
  background-image: url("../img/fallback-pasta.svg");
}

/* --------------------------------------------------------------------------
   10 · Product fragments used inside the spreads

   Same components as the phone, at reading size rather than device size.
   -------------------------------------------------------------------------- */

.panel {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s5);
}

.panel__head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}

.panel__head svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  color: var(--amber);
  --knockout: var(--paper-raised);
}

.panel__note {
  margin-top: var(--s4);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.review-list {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-top: var(--s4);
}

.review-list li {
  display: flex;
  align-items: center;
  gap: var(--s3);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 0.6875rem 0.8125rem;
}

.review-list li > span:first-child {
  min-width: 0;
}

.review-list__name {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}

.review-list__state {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-2);
  margin-top: 0.0625rem;
}

.review-list__action {
  margin-left: auto;
  flex: none;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--red);
  background: var(--red-tint);
  border-radius: var(--r-pill);
  padding: 0.3125rem 0.75rem;
}

/* Cookbook fragment */
.cookbook {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.cookbook__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.chip {
  font-size: 0.84375rem;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--paper-raised);
  border: 1px solid var(--field);
  border-radius: var(--r-pill);
  padding: 0.3125rem 0.75rem;
}

.chip[data-on] {
  background: var(--red);
  border-color: var(--red);
  color: var(--on-red);
  font-weight: 600;
}

.recipe-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 0.625rem;
}

.recipe-row__art {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--r-sm);
  flex: none;
  background-size: cover;
  background-position: center;
}

.recipe-row > span:last-child {
  flex: 1;
  min-width: 0;
}

.recipe-row__title {
  display: block;
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}

.recipe-row__meta {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-2);
  margin-top: 0.25rem;
}

/* Substitution fragment — the package's ProposedRecipeChangeCard, reduced to
   the one line that carries the idea. */
.swap {
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.swap__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.9375rem;
}

.swap__from {
  color: var(--ink-2);
  text-decoration: line-through;
  text-decoration-color: var(--ink-2);
}

.swap__arrow {
  display: flex;
  width: 0.875rem;
  height: 0.875rem;
  color: var(--green);
  flex: none;
}

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

/* Source-attribution fragment */
.attribution {
  margin-top: var(--s5);
  padding: var(--s4) var(--s5);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}

.attribution__title {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}

.attribution__from {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  margin-top: 0.625rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.84375rem;
  color: var(--ink-2);
}

.attribution__from svg {
  width: 0.875rem;
  height: 0.875rem;
  flex: none;
}

/* --------------------------------------------------------------------------
   11 · Note-taking band
   -------------------------------------------------------------------------- */

.band-sunken {
  background: var(--paper-sunken);
  border-block: 1px solid var(--rule-strong);
}

.band-sunken .prose,
.band-sunken .lead {
  color: var(--ink-2-on-sunken);
}

.notetaking {
  align-items: center;
  gap: var(--s8) var(--s7);
}

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

.notetaking__art {
  grid-column: 1 / -1;
  justify-self: start;
}

.notetaking__art img {
  width: clamp(10rem, 22vw, 17rem);
}

@media (min-width: 56em) {
  .notetaking__copy {
    grid-column: 1 / span 7;
  }

  .notetaking__art {
    grid-column: 9 / -1;
    justify-self: end;
  }
}

.notetaking__copy .h2 {
  max-width: 21ch;
}

/* --------------------------------------------------------------------------
   12 · Private band — the brand's own two-colour identity, full width
   -------------------------------------------------------------------------- */

.band-deep {
  background: var(--red-deep);
  color: color-mix(in srgb, var(--parchment) 82%, transparent);
}

.band-deep .h2 {
  color: var(--parchment);
}

.band-deep a {
  color: var(--parchment);
  text-decoration-color: color-mix(in srgb, var(--parchment) 45%, transparent);
}

.band-deep a:hover {
  color: #fff;
  text-decoration-color: currentColor;
}

.band-deep :focus-visible {
  outline-color: var(--parchment);
}

/* The mark takes a row of its own, so the headline and the body text align on
   the row below it without either being nudged into place. */
.private__mark,
.private__head,
.private__body {
  grid-column: 1 / -1;
}

.private__mark img {
  height: 3.5rem;
  width: auto;
  opacity: 0.95;
}

@media (min-width: 62em) {
  .private__head {
    grid-column: 1 / span 6;
  }

  .private__body {
    grid-column: 8 / -1;
  }
}

.private {
  align-items: start;
  gap: var(--s6) var(--s7);
}

.private__mark {
  margin-bottom: calc(var(--s2) * -1);
}

.private__body p {
  max-width: 34em;
  font-size: 1.0625rem;
  line-height: 1.6;
}

.private__body p + p {
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid color-mix(in srgb, var(--parchment) 20%, transparent);
}

/* --------------------------------------------------------------------------
   13 · Launch colophon
   -------------------------------------------------------------------------- */

.launch {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s5) var(--s6);
}

.launch__icon {
  width: 4rem;
  height: 4rem;
  border-radius: 24%;
  flex: none;
}

.launch__text {
  flex: 1 1 18rem;
}

.launch__name {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -0.016em;
  color: var(--ink);
  line-height: 1.2;
}

.launch__note {
  margin-top: 0.4375rem;
  color: var(--ink-2);
  max-width: 32em;
}

.launch__status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--s4);
  font-size: 0.9375rem;
  color: var(--ink-2);
}

/* Primary button — the package's 52pt / radius 14 oxblood control. Used once
   on the site, and only when there is somewhere real to send people. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding-inline: var(--s6);
  border-radius: var(--r-md);
  background: var(--red);
  color: var(--on-red);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(126, 29, 26, 0.35);
  transition: background-color 0.14s ease, transform 0.14s ease;
}

.button:hover {
  background: var(--red-deep);
  color: var(--on-red);
}

.button:active {
  transform: scale(0.985);
}

/* --------------------------------------------------------------------------
   14 · Footer
   -------------------------------------------------------------------------- */

.colophon {
  border-top: 1px solid var(--rule);
  padding-block: var(--s9) var(--s8);
}

.colophon__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s7);
}

.colophon__tagline {
  margin-top: var(--s3);
  font-size: 0.9375rem;
  color: var(--ink-2);
  max-width: 26em;
}

.colophon__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s6);
  align-items: flex-start;
}

.colophon__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 0.9375rem;
  color: var(--ink-2);
  text-decoration: none;
}

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

.colophon__legal {
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
  font-size: 0.84375rem;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   15 · Legal pages
   -------------------------------------------------------------------------- */

.legal-head {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.legal-head__title {
  margin-top: var(--s4);
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.024em;
  max-width: 16ch;
}

.legal-head__meta {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s6);
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.legal-head__meta dt {
  font-weight: 600;
  color: var(--ink-2);
  display: inline;
  white-space: nowrap;
}

.legal-head__meta dd {
  margin: 0;
  display: inline;
}

.legal-head__meta div {
  display: flex;
  gap: 0.4375rem;
}

.legal-head__summary {
  margin-top: var(--s6);
  max-width: 44em;
  color: var(--ink-2);
}

.legal-body {
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.legal-body__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s8) var(--s7);
}

@media (min-width: 64em) {
  .legal-body__grid {
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: var(--s10);
  }
}

/* Table of contents */
.toc {
  font-size: 0.9375rem;
}

@media (min-width: 64em) {
  .toc {
    position: sticky;
    top: calc(var(--header-h) + var(--s6));
    align-self: start;
    max-height: calc(100vh - var(--header-h) - var(--s8));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.toc__title {
  margin-bottom: var(--s4);
}

.toc__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule);
  counter-reset: legal-toc;
}

.toc__list a {
  counter-increment: legal-toc;
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  padding: 0.6875rem 0 0.6875rem 0.875rem;
  border-bottom: 1px solid var(--rule);
  border-left: 2px solid transparent;
  margin-left: -0.875rem;
  color: var(--ink-2);
  text-decoration: none;
  line-height: 1.35;
  font-size: 0.9062rem;
  transition: color 0.14s ease, border-color 0.14s ease;
}

.toc__list a::before {
  content: counter(legal-toc, decimal-leading-zero);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  padding-top: 0.1875rem;
}

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

.toc__list a:hover::before,
.toc__list a[data-current]::before {
  color: var(--red);
}

.toc__list a[data-current] {
  color: var(--red);
  font-weight: 600;
  border-left-color: var(--red);
}

/* Long-form legal typography */
.legal-prose {
  max-width: 38rem;
  color: var(--ink-body);
  counter-reset: legal-section;
}

.legal-prose h2 {
  counter-increment: legal-section;
}

.legal-prose > section + section {
  margin-top: clamp(2.75rem, 5vw, 4rem);
}

.legal-prose h2 {
  font-size: clamp(1.4375rem, 1.2rem + 0.9vw, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.014em;
  scroll-margin-top: calc(var(--header-h) + var(--s6));
}

/* Section numbers come from a counter, so adding, removing or reordering a
   section never leaves a stale number behind — in the prose or in the
   contents list beside it. */
.legal-prose h2::before {
  content: counter(legal-section, decimal-leading-zero);
  display: block;
  font-family: var(--sans);
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.113em;
  color: var(--red);
  margin-bottom: 0.625rem;
}

.legal-prose h3 {
  font-size: 1.125rem;
  font-weight: 600;
  font-family: var(--sans);
  letter-spacing: -0.008em;
  color: var(--ink);
  margin-top: var(--s7);
}

.legal-prose p {
  margin-top: var(--s4);
  line-height: 1.65;
}

.legal-prose h2 + p,
.legal-prose h3 + p {
  margin-top: var(--s4);
}

.legal-prose ul {
  margin-top: var(--s4);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.legal-prose li {
  position: relative;
  padding-left: 1.25rem;
  line-height: 1.6;
}

.legal-prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6875em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red);
}

.legal-prose strong {
  font-weight: 600;
  color: var(--ink);
}

/* One raised aside per page at most — used where a paragraph states the
   product's central promise rather than a mechanic. */
.legal-note {
  margin-top: var(--s6);
  padding: var(--s5);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--red);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

.legal-note p {
  margin-top: 0;
}

.legal-note p + p {
  margin-top: var(--s4);
}

.legal-contact {
  font-family: var(--mono);
  font-size: 0.9375rem;
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   16 · Motion
   -------------------------------------------------------------------------- */

@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;
  }
}