/* ==========================================================================
   FlavorDraft — the homepage (loaded after site.css, on / only)

   The page is the cookbook's paper. FlavorDraft's real screens are shown inside
   the App Store campaign's own hardware, the iPhone Duo and the dark iPhone it
   models, and the only pieces of paper are recipe content and the site's own
   artefacts: the recipe sheet, the index cards, the ways-in card, the collection
   stacks, the Draft with AI slips. Loose paper lies a little askew; devices stand
   as they rest. The red pen marks the page in two places: the hero's announcement
   and the arrow from a saved video to its recipe. Motion is sparing and each move
   is one of the app's: words arrive on the page, paper settles onto it, the pen
   draws, the film plays, a page turns; and only when the reader allows motion
   (see home.js).

   Sections alternate rather than repeat: the hero sets words left and screens
   right, the film is centred, the Draft slips lead their words, the shelf sits
   beside its own, and the close is plain type, centred. Words set in a
   right-hand half start on one line (see --stack-gap).
   ========================================================================== */

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

.page--home {
  --home-y: clamp(5rem, 10vw, 8.5rem);

  /* The campaign's motion (creative/shared/js/kit.js): a pen stroke is quick
     to start and careful to finish; paper settles without bouncing. */
  --ease-pen: cubic-bezier(0.3, 0.05, 0.25, 1);
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);

  /* Anything laid on the page lies close to it: a fine cut edge and a short
     contact shadow, never more lift than the film's own cards. */
  --lie-shadow: 0 0 0 0.5px rgba(140, 115, 79, 0.2), 0 1px 2px rgba(var(--shadow-rgb), 0.1),
    0 10px 20px -14px rgba(var(--shadow-rgb), 0.24);

  /* The one loose sheet on top in its section lifts a little more. */
  --lift-shadow: 0 0 0 0.5px rgba(140, 115, 79, 0.22), 0 1.5px 4px rgba(var(--shadow-rgb), 0.11),
    0 18px 30px -20px rgba(var(--shadow-rgb), 0.32);

  /* Half the gap between a section's two halves. */
  --half-gap: clamp(1.25rem, 3vw, 2.5rem);

  /* The gap between collection dividers on the shelf. Words set in a right-hand
     half start where its fourth divider does: half the page plus half of this. */
  --stack-gap: clamp(0.75rem, 2vw, 1.25rem);
}

/* --------------------------------------------------------------------------
   2 · Shared pieces
   -------------------------------------------------------------------------- */

/* The one label on the page, over the film. Capitals are set by CSS, so it
   never holds an Apple product name. */
.kicker {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  line-height: 1.4;
}

.kicker + .section-title {
  margin-top: var(--s3);
}

/* Section headlines: the campaign's lines in the brand red, a clear step below
   the hero's announcement. */
.section-title {
  font-size: clamp(2rem, 1.45rem + 1.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.024em;
  color: var(--brand-red);
}

.lede {
  margin-top: var(--s5);
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1.02rem + 0.4vw, 1.3125rem);
  line-height: 1.55;
  color: var(--ink-body);
  max-width: 31em;
}

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

.aside {
  margin-top: var(--s4);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-quiet);
  max-width: 34em;
}

/* Every caption starts at the left edge of the picture it describes. */
.caption {
  margin-top: var(--s3);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-quiet);
  text-wrap: balance;
}

/* A recipe sheet: the capture is the paper; the page gives it a cut edge. Paper
   lies at the angle its --r says (and --ty lower), so settling can start from a
   little off it. */
.paper-sheet {
  border-radius: 3px;
  overflow: hidden;
  background: var(--paper-raised);
  box-shadow: var(--lie-shadow);
  transform: translateY(var(--ty, 0px)) rotate(var(--r, 0deg));
}

/* Paper settles onto the page as it comes into view (home.js adds is-set, with
   the script running; without it, or under reduced motion, the paper is simply
   there). A little low and a little off its angle, then down and true. */
.js .settle:not(.is-set) {
  opacity: 0;
  transform: translateY(calc(var(--ty, 0px) + 0.75rem)) rotate(calc(var(--r, 0deg) - 1.1deg));
}

.settle {
  transition: opacity 0.7s var(--ease-settle), transform 0.9s var(--ease-settle);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.paper-sheet img {
  width: 100%;
  height: auto;
}

/* A control set as words in the pen's red, because they are the reader's
   action, and no box, so they never pass for part of the app. Its 44 px hit area
   is a pseudo-element reaching past its line, so the line is no taller and the
   focus ring hugs the words. (Kept for the page's text controls; the film and
   the page turn are their own controls.) */
.text-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--red);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--red) 35%, transparent);
  text-decoration-thickness: from-font;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.text-button::after {
  content: "";
  position: absolute;
  inset: calc((1.45em - 2.75rem) / 2) 0;
}

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

.text-button[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   3 · The pen

   A mark is a filled stroke (src/_data/pen.js) seen through a mask; the mask
   strokes the mark's centre line, and drawing that stroke on along its length
   reveals the ink the way the pen laid it. Multiplied, the ink lands on the
   app's red wherever it falls. Decorative: the words never depend on it.
   -------------------------------------------------------------------------- */

.ink {
  position: absolute;
  max-width: none;
  overflow: visible;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.ink__stroke {
  fill: var(--pen);
}

/* The reveal is one dash the length of the line, drawn on by its offset. The
   gap after it is a little longer than the line and the start offset a little
   past it, so the dash's round caps keep clear of both ends of the stroke until
   the pen moves: no fleck of ink shows before it is drawn. */
.ink__reveal {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1.1;
  stroke-dashoffset: 0;
}

@keyframes ink-draw {
  from {
    stroke-dashoffset: 1.03;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* --------------------------------------------------------------------------
   4 · Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3.5rem, 8vw, 5rem);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 3.5rem);
}

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

.hero__news {
  display: block;
  font-size: clamp(2.625rem, 1.5rem + 3.6vw, 4.625rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.033em;
}

.hero__made {
  display: block;
  margin-top: 0.42em;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.875rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.012em;
}

/* The words arrive from the left, slowly, in three steps: "FlavorDraft 2.0",
   then "is here.", then the Charter line; then the pen. Nothing else on the
   page arrives this way. */
.hero__arrive {
  display: inline-block;
  animation: arrive 1.1s var(--ease-settle) both;
}

.hero__arrive--1 {
  animation-delay: 0.1s;
}

.hero__arrive--2 {
  animation-delay: 0.5s;
}

.hero__arrive--3 {
  display: block;
  animation-duration: 1.3s;
  animation-delay: 0.9s;
  --arrive-x: -0.75rem;
}

@keyframes arrive {
  from {
    opacity: 0;
    transform: translateX(var(--arrive-x, -1.25rem));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* The words the pen marks. Each stays in one piece, so its mark fits it. */
.inked {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

/* The ring is sized from the type, not the word, so it sits the same round
   "2.0" in any of the stack's faces, with room round the numerals: its oval
   clears their corners, and the words after it stand clear of its right side.
   On a phone it is a little smaller, so it stays inside the gutter. */
.inked--ring {
  margin-inline: 0.22em 0.52em;
}

.inked--ring .ink {
  left: 52%;
  top: 42%;
  width: 2.98em;
  height: 1.46em;
  transform: translate(-50%, -50%);
}

@media (max-width: 39.99em) {
  .inked--ring .ink {
    width: 2.76em;
    height: 1.4em;
  }
}

.inked--under .ink {
  left: -0.03em;
  top: 94%;
  width: calc(100% + 0.08em);
  height: 0.3em;
}

/* Then the pen: the ring, slower than before (it is a longer line, drawn by a
   hand), and the underline. */
.ink--ring .ink__reveal {
  animation: ink-draw 0.9s var(--ease-pen) 1.45s both;
}

.ink--underline .ink__reveal {
  animation: ink-draw 0.62s var(--ease-pen) 2.3s both;
}

.hero__lead {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
  line-height: 1.55;
  color: var(--ink-body);
  max-width: 27em;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s7);
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

.hero__more {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, var(--ink) 25%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.hero__more:hover {
  color: var(--red);
  text-decoration-color: currentColor;
}

/* The device family as one shot: the iPhone Duo lying open and level is the
   anchor, right of centre; the iPhone stands in front at the lower left, over
   the Duo's corner; the Duo stood like a tent stands in front along the Duo's
   foot, centre right; the Duo closed lies at the lower right, resting on the
   other corner. Every render is the campaign's model from its level camera (the
   tent from a little lower, where a tent reads true), and each is placed by
   width alone (its height follows), so nothing is ever stretched. The open Duo
   is the render and width the owner approved (the campaign's frame 01 camera,
   75% of the scene); the iPhone stands uniformly smaller than it did, so it no
   longer towers over the Duo. The scene is sized by its width, so the family
   keeps its scale at any size. Each render carries its own shadow from the one
   light. */
.hero__stage {
  position: relative;
}

/* Padding, not a margin on the Duo, keeps the room below it inside the scene,
   where the phones in front stand past the Duo's foot. */
.hero__scene {
  position: relative;
  padding: 2% 0 19%;
}

.hero__device img {
  width: 100%;
  height: auto;
}

.hero__device--duo {
  position: relative;
  z-index: 2;
  width: 75%;
  margin-left: 25%;
}

.hero__device--tent {
  position: absolute;
  z-index: 3;
  left: 43%;
  bottom: 0;
  width: 32%;
}

.hero__device--iphone {
  position: absolute;
  z-index: 4;
  left: 0;
  bottom: 0;
  width: 29%;
}

.hero__device--folded {
  position: absolute;
  z-index: 3;
  right: -2%;
  bottom: 0;
  width: 24%;
}

/* Phones: the words first, then only the open Duo and the iPhone, large. */
@media (max-width: 39.99em) {
  .hero__grid {
    gap: 2rem;
  }

  .hero__device--tent,
  .hero__device--folded {
    display: none;
  }

  .hero__device--duo {
    width: 78%;
    margin-left: 22%;
  }

  .hero__scene {
    padding: 0 0 12%;
  }

  .hero__device--iphone {
    width: 31%;
  }
}

/* A tablet or phone on its side, where the scene is narrow: three phones; the
   tent would be too small to read. */
@media (min-width: 40em) and (max-width: 61.99em) and (orientation: landscape) {
  .hero__device--tent {
    display: none;
  }
}

/* Wide screens, and any screen from 40em up held landscape (the iPhone Duo
   open wide, a phone on its side): words left, devices right, and the hero is
   the whole first screen, its content a little above the middle, where the eye
   puts the centre. The words' column never narrows past "2.0 is here.", which
   stays on one line. A tall portrait tablet keeps the stack. */
@media (min-width: 40em) and (orientation: landscape), (min-width: 75em) {
  .hero {
    display: grid;
    align-content: center;
    min-height: calc(100vh - var(--header-h));
    min-height: min(calc(100svh - var(--header-h)), 60rem);
    padding-block: clamp(1.5rem, 3vh, 2.5rem) clamp(2rem, 5vh, 3.5rem);
  }

  .hero__grid {
    grid-template-columns: minmax(min-content, 5fr) minmax(0, 7fr);
    align-items: center;
    column-gap: clamp(2rem, 4vw, 4.5rem);
  }
}

@media (min-width: 40em) and (max-width: 61.99em) and (orientation: landscape) {
  .hero__grid {
    grid-template-columns: minmax(min-content, 1fr) minmax(0, 1.15fr);
  }
}

/* A small phone on its side: the devices sit beside the title, not centred on
   the taller column of words, so both are in the first screen. */
@media (min-width: 40em) and (max-width: 47.99em) and (orientation: landscape) {
  .hero__grid {
    align-items: start;
  }

  .hero__stage {
    margin-top: 0.5rem;
  }
}

@media (min-width: 80em) {
  .hero__grid {
    grid-template-columns: minmax(min-content, 4.4fr) minmax(0, 7.6fr);
  }
}

/* On a tall screen the hero leaves the film's heading at the foot of the first
   screen, so the page plainly goes on. */
@media (min-width: 40em) and (orientation: landscape) and (min-height: 60em), (min-width: 75em) and (min-height: 60em) {
  .hero {
    min-height: calc(100vh - var(--header-h) - 15rem);
    min-height: min(calc(100svh - var(--header-h) - 15rem), 60rem);
  }
}

/* A tall portrait window on a wide screen (a rotated monitor, half of a large
   one) keeps the two columns but not the full-height hero, whose content would
   float in bands of blank paper. */
@media (min-width: 75em) and (orientation: portrait) {
  .hero {
    display: block;
    min-height: 0;
    padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3.5rem, 8vw, 5rem);
  }
}

/* --------------------------------------------------------------------------
   5 · The iPhone Duo film — the page's one centred moment
   -------------------------------------------------------------------------- */

.film {
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
}

/* After a hero that fills the first screen, the film follows closely: the
   hero's own space is the pause. */
@media (min-width: 40em) and (orientation: landscape), (min-width: 75em) {
  .film {
    padding-top: clamp(2.5rem, 4vw, 3.5rem);
  }
}

@media (min-width: 40em) and (orientation: landscape) and (min-height: 60em), (min-width: 75em) and (min-height: 60em) {
  .film {
    padding-top: 2.5rem;
  }
}

@media (min-width: 75em) and (orientation: portrait) {
  .film {
    padding-top: clamp(3.5rem, 7vw, 5.5rem);
  }
}

.film__figure {
  margin-top: clamp(2rem, 4vw, 3.25rem);
}

.film__frame {
  position: relative;
  aspect-ratio: 16 / 9;
}

.film__frame picture,
.film__still,
.film__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The film's paper is the page's, a level apart; its edges are faded into the
   page so the frame never shows as a box. */
.film__still,
.film__video {
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent),
    linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent),
    linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  mask-composite: intersect;
}

/* The film covers its still only once it is actually playing (home.js). Its
   first frame is the still, so the change cannot be seen. */
.film__video {
  opacity: 0;
}

.film__figure[data-state="playing"] .film__video {
  opacity: 1;
}

/* Under the film: its chapters as they play, one to a line, the current one
   inked. It runs the width of the unfolded screen and starts right under it
   (the still carries its own margin of paper inside the frame, which the
   negative share of the width takes back). */
.film__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1.5rem;
  margin-top: clamp(0.875rem, 1.8vw, 1.25rem);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-quiet);
}

/* As wide for "Pause the film" as for "Play the film", so nothing beside it
   moves when the film starts or stops. */
/* The film is its own control: the button covers the frame, drawn only as a
   focus ring for a keyboard, so the picture stays clean. */
.film__toggle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.film__toggle:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -2px;
  border-radius: var(--r-sm);
}

.film__toggle[hidden] {
  display: none;
}

.film__chapters {
  flex: 1 1 20rem;
}

.film__chapters li {
  display: block;
}

.film__chapters b {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.film__chapters [data-current] b {
  color: var(--red);
}

@media (min-width: 40em) {
  .film__head {
    text-align: center;
  }

  .film__head .lede {
    margin-inline: auto;
  }

  .film__caption {
    position: relative;
    width: 70.4%;
    margin: calc(var(--s3) - 3.6%) auto 0;
  }
}

/* A portrait tablet, or iPhone Duo held open upright: the frame keeps the film's
   middle 4:3 too, so the unfolded screen fills the width instead of 70% of it. */
@media (min-width: 40em) and (max-width: 61.99em) and (orientation: portrait) {
  .film__frame {
    aspect-ratio: 4 / 3;
  }

  .film__caption {
    width: 93.9%;
    margin-top: calc(var(--s3) - 4.9%);
  }
}

/* Narrow screens: the film runs edge to edge and keeps its middle 4:3, where
   every screen in it sits whole (the still and the film switch to that crop). */
@media (max-width: 39.99em) {
  .film__frame {
    aspect-ratio: 4 / 3;
    margin-inline: calc(-1 * var(--gutter));
  }

  .film__caption {
    position: relative;
    margin-top: calc(var(--s3) - 4.95% - 0.099 * var(--gutter));
  }
}

/* --------------------------------------------------------------------------
   6 · Cook the videos you save
   -------------------------------------------------------------------------- */

.videos {
  padding-top: var(--home-y);
}

.videos__head {
  max-width: 40rem;
}

.videos__spread {
  display: grid;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* The card is cut from the campaign's page, which is this page's paper too;
   its edges are faded so the cut never shows. */
.videos__from img {
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent),
    linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent),
    linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent);
  mask-composite: intersect;
}

/* The caption meets the card's visible edge, inside its faded margin. */
.videos__from .caption {
  margin-top: 0;
  padding-left: 4%;
}

/* The recipe is the loose sheet on top: a little askew, a little lifted. */
.videos__to .paper-sheet {
  --r: 1deg;
  box-shadow: var(--lift-shadow);
}

/* Phones: a diagonal down the page, the card at the left, the recipe at the
   right, the pen's arrow between them turned to point down to it. */
.videos__from {
  width: 68%;
}

.videos__arrow {
  --arrow-length: 4.5rem;
  position: relative;
  height: calc(var(--arrow-length) * 0.75);
}

.videos__arrow .ink {
  left: 62%;
  top: 50%;
  width: var(--arrow-length);
  height: calc(var(--arrow-length) * 84 / 240);
  transform: translate(-50%, -50%) rotate(62deg);
}

.videos__to {
  width: 88%;
  justify-self: end;
}

/* From small tablets (and iPhone Duo open upright): the two side by side, the
   arrow across the gap. Each figure takes two rows of the spread, so the
   pictures share a bottom edge and the captions a top line however they wrap. */
@media (min-width: 40em) {
  .videos__spread {
    grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 5fr);
    grid-template-rows: auto auto;
  }

  .videos__from,
  .videos__to {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
  }

  .videos__from {
    grid-column: 1;
  }

  .videos__to {
    grid-column: 3;
  }

  .videos__from > picture,
  .videos__to > .paper-sheet {
    align-self: end;
  }

  .videos__to > .paper-sheet {
    margin-bottom: var(--s3);
  }

  .videos__to .caption {
    margin-top: 0;
  }

  .videos__arrow {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .videos__from,
  .videos__to {
    width: 100%;
  }

  .videos__arrow {
    height: auto;
    aspect-ratio: 240 / 84;
  }

  .videos__arrow .ink {
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-54%, -90%);
  }

  .videos__to .paper-sheet {
    --r: 1.5deg;
  }
}

/* The arrow: shaft, then head, when it comes into view (home.js). Until then
   it waits undrawn; without the script it is simply there. */
.ink--on-view.is-waiting .ink__reveal {
  stroke-dashoffset: 1.03;
}

.ink--on-view.is-drawing mask:nth-of-type(1) .ink__reveal {
  animation: ink-draw 0.55s var(--ease-pen) both;
}

.ink--on-view.is-drawing mask:nth-of-type(2) .ink__reveal {
  animation: ink-draw 0.3s var(--ease-pen) 0.5s both;
}

/* --------------------------------------------------------------------------
   7 · Every recipe. One cookbook. — the import chapter continued
   -------------------------------------------------------------------------- */

.cookbook {
  padding-top: clamp(3.5rem, 7vw, 6rem);
}

.cookbook__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 3.5rem);
}

/* One composition: the ways-in card lies at the upper left, a little forward,
   and three recipe cards are dealt into the rest. */
.cookbook__pile {
  position: relative;
  width: min(100%, 32rem);
}

.cookbook__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 1.75rem) clamp(0.75rem, 2.5vw, 1.5rem);
}

.cookbook__cards li {
  transform: translateY(var(--ty, 0px)) rotate(var(--r, 0deg));
}

.cookbook__cards li:nth-child(1) {
  --r: 1.2deg;
  --ty: 0.375rem;
  grid-column: 2;
}

.cookbook__cards li:nth-child(2) {
  --r: -1.5deg;
}

.cookbook__cards li:nth-child(3) {
  --r: 0.7deg;
  --ty: 0.625rem;
}

.index-card {
  width: 100%;
  height: auto;
}

/* The ways in, on an index card of the site's own paper: the app's six labels
   with the campaign's line icons, a title in the cookbook's voice ruled off in
   the pen's red, hairlines between the rows. It lies a little askew, like the
   recipe cards, and lifted, being the piece on top. */
.ways {
  --r: -1.6deg;
  position: absolute;
  z-index: 1;
  top: -4%;
  left: -3%;
  width: 48%;
  padding: clamp(0.75rem, 2vw, 1.125rem) clamp(0.875rem, 2.4vw, 1.25rem) clamp(0.5rem, 1.6vw, 0.875rem);
  border-radius: 3px;
  background-color: var(--paper-raised);
  background-image: var(--grain);
  background-size: var(--grain-size);
  background-blend-mode: multiply;
  box-shadow: var(--lift-shadow);
  color: var(--ink-body);
  transform: rotate(var(--r));
}

.ways__title {
  padding-bottom: 0.375rem;
  border-bottom: 1.5px solid color-mix(in srgb, var(--pen) 72%, transparent);
  font-family: var(--serif);
  font-size: clamp(0.9375rem, 0.82rem + 0.5vw, 1.1875rem);
  line-height: 1.2;
  color: var(--ink);
}

.ways__list li {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding-block: 0.42em;
  border-top: 1px solid var(--rule);
  font-size: clamp(0.6875rem, 0.57rem + 0.5vw, 0.9375rem);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}

.ways__list li:first-child {
  border-top: 0;
  padding-top: 0.6em;
}

.ways .icon {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  color: var(--ink);
}

@media (min-width: 48em) {
  .cookbook__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
  }

  .cookbook__pile {
    justify-self: end;
  }
}

/* --------------------------------------------------------------------------
   8 · Make recipes fit you — the slips first, then the words
   -------------------------------------------------------------------------- */

/* The page's longer pause: from getting recipes in to making them yours. */
.draft {
  padding-top: clamp(7rem, 14vw, 12.5rem);
}

.draft__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 3.5rem);
}

/* Three slips of the conversation's paper, laid down one under another as App
   Store screenshot 03 lays them: stepping left, right, left, each a little askew.
   They never overlap, so no slip covers another's words. */
.draft__slips {
  width: min(100%, 30rem);
}

.draft__notes {
  display: grid;
  gap: 0.5rem;
}

.draft__notes li {
  width: 96%;
}

.draft__notes li:nth-child(1) {
  --r: -1.1deg;
}

.draft__notes li:nth-child(2) {
  --r: 0.9deg;
  justify-self: end;
}

.draft__notes li:nth-child(3) {
  --r: -0.5deg;
  margin-left: 5%;
}

.draft__slips .caption {
  margin-top: var(--s4);
}

@media (min-width: 48em) {
  .draft__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    column-gap: calc(2 * var(--half-gap));
  }

  .draft__slips {
    grid-row: 1;
    grid-column: 1;
  }

  .draft__notes li {
    width: 92%;
  }
}

/* On a tablet the slips take a little more of the row, so their words stay
   legible; from 62em the halves are equal again and share the page's line. */
@media (min-width: 48em) and (max-width: 61.99em) {
  .draft__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

@media (min-width: 62em) {
  .draft__notes li {
    width: 88%;
  }

  .draft__copy {
    margin-left: calc(var(--stack-gap) / 2 - var(--half-gap));
  }
}

/* --------------------------------------------------------------------------
   9 · Cook one step at a time
   -------------------------------------------------------------------------- */

.cook {
  padding-top: var(--home-y);
}

.cook__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 3.5rem);
}

/* Cook View's own voice: the step on its page is set in Charter. A step below
   the closing line, which signs the page off. */
.cook__title {
  font-family: var(--serif);
  font-size: clamp(1.875rem, 1.25rem + 2vw, 2.875rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.014em;
  color: var(--ink);
}

/* The iPhone Duo folded like a laptop, large, and the iPhone standing beside
   it, a little in front of the Duo's standing half; both on one counter. Each
   figure takes two rows, so the captions share a line. */
.cook__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.33fr);
  grid-template-rows: auto auto;
  align-items: end;
}

.cook__duo,
.cook__iphone {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
}

.cook__duo {
  position: relative;
  z-index: 1;
}

.cook__iphone {
  position: relative;
  z-index: 2;
  margin-left: -10%;
}

.cook__device,
.cook__iphone picture {
  align-self: end;
}

.cook__stage img {
  width: 100%;
  height: auto;
}

.cook__duo .caption {
  padding-right: 12%;
}

/* The page turn, on the device: the clip's two halves are drawn onto the two
   halves of the display, each at the plane the render recorded (home.js sets
   the transforms). They show only while the turn plays and holds, and dissolve
   back to the still, which is the clip's own first frame. */
.cook__device {
  position: relative;
  overflow: hidden;
}

.cook__page {
  position: absolute;
  top: 0;
  left: 0;
  width: 660px;
  height: 469px;
  transform-origin: 0 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease;
}

[data-turn][data-state="turning"] .cook__page,
[data-turn][data-state="landed"] .cook__page {
  opacity: 1;
  transition: none;
}

/* The display's corners are round (62 pt); the halves are clipped to match in
   their own space, so the rounding is carried into the projection. */
.cook__page--top {
  clip-path: inset(0 round 61px 61px 0 0);
}

.cook__page--bottom {
  clip-path: inset(0 round 0 0 61px 61px);
}

.cook__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* The device is its own control, as the film is. */
.cook__toggle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.cook__toggle:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -2px;
  border-radius: var(--r-md);
}

.cook__toggle[hidden] {
  display: none;
}

@media (min-width: 62em) {
  .cook__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
  }

  .cook__stage {
    justify-self: end;
    width: min(100%, 46rem);
  }
}

/* --------------------------------------------------------------------------
   10 · A place for every recipe — the words, then the shelf beside them
   -------------------------------------------------------------------------- */

.shelf {
  padding-top: var(--home-y);
}

.shelf__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 3.5rem);
}

.shelf__head {
  max-width: 40rem;
}

/* The dividers as a cookbook spread: two rows of three on seven columns, the
   second row stepped half a divider across, each standing a little off its
   neighbours. Their captures carry a margin of the app's paper, so they never
   overlap. Phones keep two columns. */
.shelf__stacks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem) var(--stack-gap);
  align-items: start;
}

.shelf__stacks li {
  transform: translateY(var(--ty, 0px)) rotate(var(--r, 0deg));
}

.shelf__stacks li:nth-child(1) {
  --r: -1.2deg;
}

.shelf__stacks li:nth-child(2) {
  --r: 0.8deg;
  --ty: 1rem;
}

.shelf__stacks li:nth-child(3) {
  --r: -0.4deg;
  --ty: 0.25rem;
}

.shelf__stacks li:nth-child(4) {
  --r: 0.6deg;
  --ty: 0.5rem;
}

.shelf__stacks li:nth-child(5) {
  --r: -0.9deg;
}

.shelf__stacks li:nth-child(6) {
  --r: 1.1deg;
  --ty: 0.75rem;
}

.shelf__stacks img {
  width: 100%;
  height: auto;
}

@media (min-width: 40em) {
  .shelf__stacks {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    row-gap: clamp(1.25rem, 2.5vw, 2rem);
  }

  .shelf__stacks li:nth-child(1) {
    grid-column: 1 / 3;
  }

  .shelf__stacks li:nth-child(2) {
    grid-column: 3 / 5;
  }

  .shelf__stacks li:nth-child(3) {
    grid-column: 5 / 7;
  }

  .shelf__stacks li:nth-child(4) {
    grid-column: 2 / 4;
  }

  .shelf__stacks li:nth-child(5) {
    grid-column: 4 / 6;
  }

  .shelf__stacks li:nth-child(6) {
    grid-column: 6 / 8;
  }
}

@media (min-width: 62em) {
  .shelf__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    column-gap: clamp(2.5rem, 5vw, 5rem);
  }
}

/* --------------------------------------------------------------------------
   11 · Closing — the last page: one line in the cookbook's voice, centred, the
   badge under it, and the footer close behind
   -------------------------------------------------------------------------- */

.closing {
  padding-block: clamp(4rem, 9vw, 7rem) clamp(2.5rem, 5vw, 4rem);
}

.closing__inner {
  display: grid;
  justify-items: center;
  gap: clamp(1.5rem, 3vw, 2rem);
  text-align: center;
}

.closing__title {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 1.55rem + 2.2vw, 3.375rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--ink);
  max-width: 14em;
}

/* --------------------------------------------------------------------------
   12 · Very narrow screens: a phone at 150% page zoom is about 260 px wide, so
   the headline's and the close's kept-together words may break there.
   -------------------------------------------------------------------------- */

@media (max-width: 22.49em) {
  .hero__news .nowrap,
  .closing__title .nowrap {
    white-space: normal;
  }
}

/* --------------------------------------------------------------------------
   13 · Reduced motion: every mark is simply on the page; nothing plays.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ink__reveal,
  .ink--on-view.is-waiting .ink__reveal {
    animation: none !important;
    stroke-dashoffset: 0;
  }

  .hero__arrive {
    animation: none;
  }

  .js .settle:not(.is-set) {
    opacity: 1;
    transform: translateY(var(--ty, 0px)) rotate(var(--r, 0deg));
  }
}