/* Fairhand: the site's stylesheet, for the homepage and the three document
   pages (support, privacy, terms).

   Self-contained: it loads none of the previous homepage's stylesheets, which
   are still served for /previous and must keep working there.

   The grammar is borrowed from editorial print: one serif in two voices (a
   light roman and its italic), every piece of metadata in a typewriter mono,
   captions set like figure numbers in a cookbook, hairline rules instead of
   boxes, and a single accent colour used sparingly. Fairhand's cobalt is that
   accent, because it is already the colour of every plate in the art. */

@font-face {
  font-family: "Fairhand Display";
  src: url("fonts/fairhand-display-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fairhand Display";
  src: url("fonts/fairhand-display-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Fairhand Display";
  src: url("/fonts/fairhand-display-semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --bone:   #F0ECE6;   /* ground */
  --linen:  #E4DACC;   /* the alternate band */
  --char:   #343636;   /* text  10.33:1 on bone, 8.80:1 on linen; the footer ground */
  --smoke:  #5A5E5E;   /* quiet text  5.58:1 on bone, 4.75:1 on linen */
  --cobalt: #1F4596;   /* the one accent  7.59:1 on bone; bone on it 7.59:1 */
  --ash:    #B8B5B1;   /* quiet text on the footer  5.95:1 on char */
  --umber:  #6B5D4F;   /* the note's half  bone on it 5.40:1, linen 4.60:1 */
  --rule:   rgba(52, 54, 54, 0.18);   /* hairlines, decorative only */

  --serif: "Fairhand Display", "Iowan Old Style", Palatino, Georgia, serif;
  /* Plain system Courier, as print-minded sites do: nothing to download, and
     the slightly uneven strokes are the point. */
  --mono: Courier, "Courier New", ui-monospace, monospace;

  --gutter: clamp(1.5rem, 4vw, 3rem);
  --page: 82rem;
  --section: clamp(5rem, 11vw, 10rem);
  --cols: repeat(12, minmax(0, 1fr));
  --col-gap: clamp(1rem, 2.5vw, 2.25rem);
}

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

html {
  background: var(--bone);
  color: var(--char);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font: 400 1.125rem/1.55 var(--serif);
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
figure, h1, h2, p, ol, dl, dd { margin: 0; }
ol { padding: 0; list-style: none; }
a { color: inherit; }
section[id] { scroll-margin-top: 2rem; }

.frame {
  width: min(100% - 2 * var(--gutter), var(--page));
  margin-inline: auto;
}

/* ---------- the two voices ---------- */

.label, .mast-tag, .mast-nav, figcaption, .no, .m, .day, .min,
.sheet-corners, .tariff dt, .save, .tariff dd span, .doc .updated,
.colophon-tag, .colophon-nav, .colophon-legal {
  font-family: var(--mono);
  font-weight: 400;
  font-style: normal;
  font-variant-numeric: normal;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.label { font-size: 0.75rem; line-height: 1.4; }
figcaption { font-size: 0.6875rem; line-height: 1.45; color: var(--smoke); }

.display {
  font-weight: 400;
  font-size: clamp(2.1rem, 1.3rem + 2.7vw, 3.75rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* ---------- the seal, the buttons, the skip link ---------- */

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

.skip {
  position: absolute;
  z-index: 30;
  left: var(--gutter);
  top: -4rem;
  padding: 0.6rem 0.9rem;
  background: var(--char);
  color: var(--bone);
  font: 0.75rem/1.2 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.skip:focus { top: 0.75rem; }

.stamp {
  position: fixed;
  z-index: 20;
  top: calc(1.4rem + env(safe-area-inset-top));
  right: max(var(--gutter), env(safe-area-inset-right));
  width: 6.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* A square of the homepage's painted wash, so the seal reads as paint. */
  background: var(--cobalt) url("art/seal-wash.webp") center / cover no-repeat;
  color: var(--bone);
  font: italic 400 1.05rem/1.05 var(--serif);
  text-align: center;
  text-decoration: none;
  transform: rotate(-9deg);
  box-shadow: 0 12px 28px -16px rgba(20, 30, 60, 0.6);
  transition: transform 0.35s cubic-bezier(0.2, 0.75, 0.25, 1);
}
.stamp:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 4px; }

/* The button the page asks with, the seal's shape stretched to a pill. */
.cta-row { margin-top: 2rem; }
.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.7rem 0.95rem 1.45rem;
  border-radius: 999px;
  background: var(--cobalt) url("art/seal-wash.webp") center / cover no-repeat;
  color: var(--bone);
  font: italic 400 1.15rem/1 var(--serif);
  text-decoration: none;
  box-shadow: 0 12px 26px -16px rgba(20, 30, 60, 0.6);
  transition: transform 0.3s cubic-bezier(0.2, 0.75, 0.25, 1);
}
.cta-apple { width: 1rem; height: 1.2rem; fill: currentColor; }
.cta:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 4px; }
@media (hover: hover) {
  .stamp:hover { transform: rotate(-4deg) scale(1.05); }
  .cta:hover { transform: translateY(-2px); }
}

/* ---------- masthead ---------- */

.mast {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  column-gap: 1.5rem;
  padding-block: 1.6rem clamp(2.25rem, 4vw, 3.25rem);
}
.mast-tag { font-size: 0.6875rem; line-height: 1.55; }
.mast-nav {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  font-size: 0.6875rem;
  line-height: 1.55;
}
.mast-nav a { text-decoration: none; }
.mast-mark {
  grid-column: 1 / -1;
  justify-self: center;
  width: clamp(15rem, 38vw, 31rem);
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
}
/* The headline sits in the spread's right column, over the sentence, so the
   whole cover (picture, headline, households) fits a laptop's first screen.
   Centred under the wordmark it pushed the plates, which make the point,
   below the fold. */
.cover-line {
  font-weight: 400;
  font-size: clamp(2.05rem, 1rem + 1.8vw, 2.9rem);
  line-height: 1.06;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
/* The headline names the household on show. "A week of dinners" never moves;
   the rest turns. Every variant sits in the same grid cell, so the headline
   is always as tall as its longest variant and nothing below it jumps. */
.cl-fixed { display: block; }
.cl-turn { display: grid; }
.cl-v { grid-area: 1 / 1; }
.cl-who { font-style: italic; color: var(--cobalt); }
.js .cl-v {
  opacity: 0;
  transform: translateY(0.2em);
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.2, 0.75, 0.25, 1);
}
.js .cl-v.is-on { opacity: 1; transform: none; }

@media (hover: hover) {
  .mast-nav a:hover, .colophon-nav a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.35em;
  }
  .mast-nav a:hover { color: var(--cobalt); }
}

/* ---------- the households ---------- */

.homes {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  grid-template-areas: "stage head" "stage text";
  align-content: center;
  column-gap: clamp(2rem, 4.5vw, 5rem);
  /* The picture runs off the left edge of the page, the way a spread bleeds a
     photograph; the words keep the page's right margin. */
  padding-right: max(var(--gutter), (100% - var(--page)) / 2);
  margin-bottom: var(--section);
}
.homes .cover-line { grid-area: head; align-self: end; margin-bottom: clamp(1.25rem, 2vw, 1.75rem); }
.homes-stage { grid-area: stage; align-self: center; position: relative; aspect-ratio: 16 / 9; }
.homes-text { grid-area: text; align-self: start; }
.home {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.home.is-on { opacity: 1; }
.home img { width: 100%; height: 100%; object-fit: cover; }

.homes-line { font-size: clamp(1.2rem, 0.8rem + 0.75vw, 1.5rem); line-height: 1.32; }
.homes-lead {
  display: block;
  margin-bottom: 0.85rem;
  font-style: italic;
  font-size: 0.68em;
  color: var(--smoke);
}
.homes-row { display: block; }
/* The underline under the household on show is also the clock: it draws
   across while the picture holds, and it is simply drawn while paused. It is a
   background rather than a border so that a name broken over two lines is
   underlined along both, one line after the other. */
.homes-pick[role="button"] {
  padding-bottom: 0.05em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  cursor: pointer;
}
.homes-pick[aria-pressed="true"] { color: var(--cobalt); background-size: 100% 2px; }
.homes.is-running .homes-pick[aria-pressed="true"] {
  animation: dwell var(--dwell, 6.5s) linear both;
}
.homes.is-held .homes-pick[aria-pressed="true"] { animation-play-state: paused; }
@keyframes dwell {
  from { background-size: 0 2px; }
  to   { background-size: 100% 2px; }
}
.homes-tail { max-width: 22rem; margin-top: 1rem; font-style: italic; font-size: 1.05rem; }
.homes-ctl {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  margin-top: 1.25rem;
  color: var(--smoke);
}
.homes-ctl[hidden] { display: none; }
.homes-count, .homes-play {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.homes-play {
  appearance: none;
  margin: 0;
  padding: 0 0 0.15rem;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  color: var(--char);
  cursor: pointer;
}
.homes-pick:focus-visible, .homes-play:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 4px;
}
@media (hover: hover) {
  .homes-pick[role="button"]:hover, .homes-play:hover { color: var(--cobalt); }
}
/* On a phone the seal is pressed once into the corner of the picture rather
   than following the reader, because a fixed disc on a one-column page sits on
   top of whatever sentence is passing under it. */
.stamp-pressed { display: none; }

.rule { height: 0; border: 0; border-top: 1px solid var(--rule); margin-block: 0; }

/* ---------- the week ---------- */

.week {
  display: grid;
  grid-template-columns: var(--cols);
  column-gap: var(--col-gap);
  row-gap: clamp(2.5rem, 5vw, 3.5rem);
  align-items: start;
  margin-block: var(--section);
}
.week-head { grid-column: 1 / span 6; grid-row: 1; }
.week-head .label, .split-text .label, .list-text .label,
.price-text .label, .letter-body .label { margin-bottom: 1.5rem; }
.lede { margin-top: 1.5rem; max-width: 27rem; font-size: 1.2rem; }

.menu { grid-column: 7 / span 6; grid-row: 1; border-bottom: 1px solid var(--rule); }
.menu li {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: baseline;
  padding-block: 0.95rem 0.85rem;
  border-top: 1px solid var(--rule);
}
.day, .min { font-size: 0.6875rem; }
.min { color: var(--smoke); white-space: nowrap; }
.dish { font-size: clamp(1.1rem, 0.95rem + 0.45vw, 1.35rem); line-height: 1.25; transition: color 0.25s ease; }

/* The dinner under the pointer, carried beside it. It exists only while a
   night is pointed at, trails the pointer a little and leans into the way it is
   moving, the way a plate carried across a room does. The script places it;
   this only says what it is. On a screen with no pointer, no room, or reduced
   motion, each row carries a small plate of its own instead. */
.float-plate {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 15;
  width: clamp(12rem, 18vw, 16rem);
  aspect-ratio: 1;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.float-plate img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.float-plate img.is-on { opacity: 1; }
.menu-thumb { display: none; }
@media (hover: hover) and (min-width: 48rem) {
  .menu li.is-on .dish { color: var(--cobalt); }
}
.list-fig figcaption, .price-fig figcaption { margin-top: 1rem; text-align: center; }

/* ---------- everyone ---------- */

/* The note's spread, mirrored: the drawing of the dinner page on iPhone Duo
   bled to the left edge, and the words beside it on the drawing's own paper,
   so the two halves are one sheet. The paper is warmer than the page, so the
   section reads as a band rather than as two almost-matching grounds. The
   band's colour follows the drawing's right edge from top to bottom (its paper
   darkens a little toward the hands), and the drawing's right and top edges
   fade into it, so no line shows where the drawing stops. The drawing sits on
   the band's bottom edge, so the cuffs always run off it; where the words need
   more height than the drawing, the extra is plain paper above it. */
.fit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: linear-gradient(#F7EDCC, #F4E8C6);
}
.fit-duo { align-self: end; }
.fit-duo img {
  width: 100%;
  height: auto;
  -webkit-mask-image:
    linear-gradient(to right, #000 calc(100% - 1.25rem), transparent),
    linear-gradient(transparent, #000 2rem);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, #000 calc(100% - 1.25rem), transparent),
    linear-gradient(transparent, #000 2rem);
  mask-composite: intersect;
}
.fit-copy {
  align-self: center;
  padding-block: clamp(3rem, 6vw, 5rem);
  padding-inline: clamp(2rem, 6vw, 6rem) max(var(--gutter), calc((100vw - var(--page)) / 2 + 3rem));
}
.fit-body { max-width: 29rem; }
.fit-body .label { margin-bottom: 1.5rem; }
.fit-body p:not(.label) { margin-top: 1.5rem; max-width: 27rem; }
.fit-body .fit-devices { font-size: 1rem; color: var(--smoke); }
/* A quoted line breaks between its words, never at its hyphen. */
.nobr { white-space: nowrap; }

/* ---------- the two promises ---------- */

.split {
  display: grid;
  grid-template-columns: var(--cols);
  column-gap: var(--col-gap);
  align-items: center;
  margin-block: var(--section);
}
.split-text { grid-column: 1 / span 5; }
.split-text p:not(.label) { margin-top: 1.5rem; max-width: 27rem; }
.split-fig { grid-column: 7 / span 6; }
.flip .split-fig { grid-column: 1 / span 6; grid-row: 1; }
.flip .split-text { grid-column: 8 / span 5; grid-row: 1; }
/* The two promise paintings carry their own paper, a shade warmer than the
   page, so they are hung as prints rather than left to almost-match. */
.print img, .print canvas {
  box-shadow: 0 0 0 1px rgba(52, 54, 54, 0.06), 0 28px 44px -34px rgba(52, 54, 54, 0.65);
}
/* The served dish. Its frames are 560px, so it is never drawn larger, and the
   canvas the script lays over the picture takes the picture's exact box, so
   the caption below does not move when one replaces the other. Its paper is
   the homepage's, a shade lighter than this band, so it hangs as a print like
   the painting it replaced. */
.scrub-dish img, .scrub-dish canvas {
  display: block;
  width: 100%;
  max-width: 35rem;
  height: auto;
  transform: rotate(-1.5deg);   /* a card set down on the table, not squared to the page */
}
.scrub-dish.is-scrub img { display: none; }
.print figcaption { margin-top: 1rem; }

.band { background: var(--linen); display: flow-root; }

/* A drawing that plays once. Its ground is the page's bone and its edges fade
   into it, so it sits on the page with no frame, as the app draws it. */
.clip img { width: 100%; height: auto; }
.split-fig.clip { width: min(100%, 26rem); justify-self: center; }

/* ---------- plate I ---------- */

.plate { margin-block: var(--section); }
.sheet {
  position: relative;
  border: 1px solid var(--rule);
  padding: clamp(3rem, 6vw, 5.5rem) clamp(1.25rem, 4vw, 4.5rem) clamp(2.75rem, 5vw, 4.5rem);
}
.sheet-corners {
  position: absolute;
  inset: 1rem 1.15rem auto;
  display: flex;
  justify-content: space-between;
  font-size: 0.6875rem;
  color: var(--smoke);
}
.plate-head { max-width: 40rem; margin-inline: auto; text-align: center; }
.sub { margin-top: 1rem; font-style: italic; font-size: 1.25rem; }
.specimens {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(2.25rem, 4vw, 3.5rem) clamp(1rem, 2.5vw, 2.5rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}
.specimens li { display: grid; justify-items: center; align-content: start; gap: 0.3rem; text-align: center; }
.specimens img { width: min(100%, 15rem); margin-bottom: 0.35rem; }
.no, .m { font-size: 0.625rem; color: var(--smoke); }
.t { max-width: 15rem; font-style: italic; font-size: 1.05rem; line-height: 1.3; text-wrap: balance; }
.plate-foot { max-width: 36rem; margin: clamp(3rem, 6vw, 4.5rem) auto 0; text-align: center; }

/* ---------- the list ---------- */

.list {
  display: grid;
  grid-template-columns: var(--cols);
  column-gap: var(--col-gap);
  align-items: center;
  margin-block: var(--section);
}
.list-fig { grid-column: 2 / span 4; }
.list-text { grid-column: 7 / span 5; }
.list-text > p:not(.label) { margin-top: 1.5rem; max-width: 27rem; font-size: 1.2rem; }
.aside {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
  max-width: 27rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 1rem;
}

/* ---------- the price ---------- */

.price {
  display: grid;
  grid-template-columns: var(--cols);
  column-gap: var(--col-gap);
  align-items: center;
  margin-block: var(--section);
}
.price-text { grid-column: 1 / span 6; }
.price-fig { grid-column: 8 / span 4; }
.tariff { max-width: 32rem; margin-top: 2.5rem; border-bottom: 1px solid var(--rule); }
.tariff > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding-block: 1.15rem 1rem;
  border-top: 1px solid var(--rule);
}
.tariff dt { font-size: 0.75rem; }
.save {
  margin-left: 0.6rem;
  padding: 0.2rem 0.45rem 0.15rem;
  background: var(--cobalt);
  color: var(--bone);
  font-size: 0.625rem;
  white-space: nowrap;
}
.tariff dd { text-align: right; font-size: 1.05rem; }
.tariff strong {
  margin-right: 0.3rem;
  font-weight: 400;
  font-size: 1.9rem;
  font-variant-numeric: lining-nums;
}
.tariff dd span { display: block; margin-top: 0.2rem; font-size: 0.6875rem; color: var(--smoke); }
.note { max-width: 30rem; margin-top: 1.5rem; font-size: 1rem; }

/* ---------- a note ---------- */

/* A full-screen spread, after the reference's wellness page: the words on one
   half, a picture bled to the edge on the other. Its taupe is the reference's,
   deepened until the page's own paper reads on it (the reference sets linen on
   #A69481 at 2:1). The picture is the app lying on the kitchen cloth. */
.maker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: min(100svh, 60rem);
  margin-top: var(--section);
}
.maker-copy {
  display: grid;
  align-content: center;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  padding-inline: max(var(--gutter), calc((100vw - var(--page)) / 2 + 3rem)) clamp(2rem, 6vw, 6rem);
  background: var(--umber);
  color: var(--bone);
}
.maker-copy .letter-body { max-width: 31rem; }
.maker-copy .label { color: var(--linen); }
.maker-copy .display { font-style: italic; font-size: clamp(2.4rem, 1.4rem + 2.4vw, 3.5rem); }
.maker-copy p:not(.label) { margin-top: 1.1rem; }
.maker-copy .who { margin-top: 1.75rem; font-size: 1.3rem; }
.maker-copy .free { font-size: 1.45rem; font-style: italic; }
.maker-picture {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #F0DFCD;
}
.maker-phone { width: clamp(13rem, 19vw, 17rem); }
/* A spread's picture lies on a ground, here the cloth: a lazy picture
   under the phone rather than a CSS background, which a browser fetches with
   the page however far down it sits. Its average colour stands in until it
   arrives. The phone is positioned so it paints above it. */
.ground {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.maker-picture, .maker-phone { position: relative; }
/* The app, once: a phone drawn in CSS around the site's own screenshots,
   turning slowly through four screens. */
.phone {
  width: min(100%, 15rem);
  margin-inline: auto;
  padding: 0.5rem;
  border-radius: 2.5rem;
  background: #1c1b18;
  box-shadow:
    inset 0 0 0 2px #3b3934,
    0 1px 0 rgba(52, 54, 54, 0.15),
    0 34px 54px -34px rgba(52, 54, 54, 0.75);
}
.phone-screen {
  position: relative;
  aspect-ratio: 480 / 1043;
  overflow: hidden;
  border-radius: 2.05rem;
  background: #f3efe3;
}
.phone-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.phone-screen img.is-on { opacity: 1; }
/* On the cloth it lies at a slight angle, with a deeper shadow. */
.maker-picture .phone {
  width: 100%;
  transform: rotate(-4deg);
  box-shadow:
    inset 0 0 0 2px #3b3934,
    0 2px 0 rgba(52, 54, 54, 0.12),
    0 40px 60px -30px rgba(52, 40, 30, 0.6);
}

/* ---------- closing ---------- */

.closing {
  display: grid;
  justify-items: center;
  text-align: center;
  margin-block: var(--section) clamp(4.5rem, 9vw, 8rem);
}
.closing-fig { width: clamp(10rem, 20vw, 15rem); }
.closing-line { margin-top: 2.5rem; }
/* One sentence to a line; a balanced wrap broke it at "done. The". */
.closing-line span { display: block; }
.closing .cta-row { margin-top: 2.5rem; }

/* ---------- the document pages ---------- */

/* Support, privacy and terms. Their words are not this stylesheet's business:
   it only sets them. A smaller wordmark, a narrow reading column, the headline
   voice for headings and the mono voice for the date. */
.doc-page .mast { padding-bottom: 0; }
.mast-home { grid-column: 1 / -1; justify-self: center; }
.doc-page .mast-mark { width: clamp(11rem, 22vw, 15rem); margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.mast-nav a[aria-current="page"] { color: var(--cobalt); text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 1px; }

.doc {
  width: min(100% - 2 * var(--gutter), 42rem);
  margin: clamp(3rem, 7vw, 5rem) auto var(--section);
}
.doc h1 {
  font-weight: 400;
  font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.doc .updated { margin-top: 1.1rem; font-size: 0.75rem; line-height: 1.4; color: var(--smoke); }
.doc .callout {
  margin-top: 2.25rem;
  padding: 1.35rem 1.6rem;
  background: var(--linen);
  border-left: 3px solid var(--cobalt);
}
.doc .callout p { margin-top: 0; }
.doc .callout p + p { margin-top: 0.8rem; }
.doc h2 {
  margin-top: 3.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.2rem + 1.1vw, 2.1rem);
  line-height: 1.15;
  text-wrap: balance;
}
.doc h3 { margin: 2.25rem 0 0; font-weight: 400; font-style: italic; font-size: 1.35rem; line-height: 1.3; }
.doc p { margin-top: 1rem; font-size: 1.1rem; line-height: 1.6; }
.doc h2 + p, .doc h3 + p, .doc h2 + ul, .doc h3 + ul { margin-top: 0.75rem; }
.doc ul { margin: 1rem 0 0; padding-left: 1.25rem; }
.doc li { margin-top: 0.6rem; font-size: 1.1rem; line-height: 1.55; }
.doc li::marker { color: var(--cobalt); }
.doc a { color: var(--cobalt); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.doc strong { font-weight: 600; }

/* ---------- colophon ---------- */

.colophon {
  background: var(--char);
  color: var(--bone);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) calc(clamp(2rem, 4vw, 3rem) + env(safe-area-inset-bottom));
}
.colophon-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem 3rem;
}
/* The painted wordmark, recoloured by masking: the brush texture is the
   image's alpha, so it survives in any colour. */
.colophon-mark {
  display: block;
  width: clamp(9rem, 18vw, 13rem);
  aspect-ratio: 1200 / 250;
  background: var(--bone);
  -webkit-mask: url("art/wordmark.webp") center / contain no-repeat;
  mask: url("art/wordmark.webp") center / contain no-repeat;
}
.colophon-tag { font-size: 0.6875rem; line-height: 1.55; color: var(--ash); }
.colophon-nav { display: flex; gap: 1.75rem; font-size: 0.6875rem; }
.colophon-nav a { color: var(--bone); text-underline-offset: 0.3em; }
.colophon-legal {
  grid-column: 1 / -1;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(240, 236, 230, 0.16);
  font-size: 0.625rem;
  color: var(--ash);
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity 1.1s ease, transform 1.25s cubic-bezier(0.2, 0.75, 0.25, 1);
  }
  .js [data-reveal].in { opacity: 1; transform: none; }

  /* A block of words arrives a line at a time: each child waits its turn
     (--k, set by the script) and rises a little further than a figure does. */
  .js [data-cascade] > * {
    opacity: 0;
    transform: translateY(1.6rem);
    transition: opacity 1s ease, transform 1.2s cubic-bezier(0.2, 0.75, 0.25, 1);
    transition-delay: calc(var(--k, 0) * 120ms);
  }
  .js [data-cascade].in > * { opacity: 1; transform: none; }

  /* The cover arrives on load: the picture, then the headline, then the
     households one by one. */
  .js .mast-mark { animation: rise 1s cubic-bezier(0.2, 0.75, 0.25, 1) 0.05s both; }
  .js .homes-stage { animation: settle 1.4s ease 0.15s both; }
  .js .homes .cover-line { animation: rise 1.1s cubic-bezier(0.2, 0.75, 0.25, 1) 0.35s both; }
  .js .homes-lead, .js .homes-row, .js .homes-tail, .js .homes-ctl {
    animation: rise 1s cubic-bezier(0.2, 0.75, 0.25, 1) both;
  }
  .js .homes-lead { animation-delay: 0.55s; }
  .js .homes-row:nth-child(2) { animation-delay: 0.65s; }
  .js .homes-row:nth-child(3) { animation-delay: 0.75s; }
  .js .homes-row:nth-child(4) { animation-delay: 0.85s; }
  .js .homes-row:nth-child(5) { animation-delay: 0.95s; }
  .js .homes-tail { animation-delay: 1.1s; }
  .js .homes-ctl { animation-delay: 1.25s; }
}
@media (prefers-reduced-motion: reduce) {
  .home, .cl-v, .js .cl-v, .phone-screen img { transition: none; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(1.2rem); }
  to   { opacity: 1; transform: none; }
}
@keyframes settle {
  from { opacity: 0; transform: scale(1.025); }
  to   { opacity: 1; transform: none; }
}

/* ---------- phone ---------- */

@media (max-width: 47.99rem) {
  .stamp { display: none; }
  .stamp-pressed {
    display: grid;
    position: absolute;
    z-index: 3;
    top: auto;
    right: 1.1rem;
    bottom: -2.4rem;
    width: 5rem;
    font-size: 0.88rem;
  }

  .homes { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; row-gap: 0; padding-right: 0; }
  .homes .cover-line, .homes-stage, .homes-text { grid-area: auto; }
  .homes .cover-line {
    width: min(100% - 2 * var(--gutter), var(--page));
    margin: 1.75rem auto 2.25rem;
    text-align: center;
  }
  .homes-text { width: min(100% - 2 * var(--gutter), var(--page)); margin: 3.25rem auto 0; }
  .homes-line { font-size: 1.35rem; }

  .mast { grid-template-columns: 1fr; justify-items: center; text-align: center; padding-block: 1.25rem 0; }
  .mast-nav { order: 1; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1.1rem; }
  .mast-mark { order: 2; width: min(78%, 20rem); margin-top: 2.25rem; }
  .mast-home { order: 2; }   /* the document pages wrap the wordmark in a link home */
  .mast-tag { order: 3; margin-top: 1.25rem; }
  .mast-spacer { display: none; }

  .week, .split, .list, .price { grid-template-columns: minmax(0, 1fr); row-gap: 2.5rem; }
  .week-head, .menu, .split-text, .split-fig,
  .flip .split-text, .flip .split-fig, .list-fig, .list-text, .price-text, .price-fig {
    grid-column: 1;
    grid-row: auto;
  }
  .split-fig, .flip .split-fig { order: -1; }

  /* Stacked, the words sit under the drawing's bottom edge, on its colour
     there; nothing fades. */
  .fit { grid-template-columns: minmax(0, 1fr); background: #F4E8C6; }
  .fit-duo img { -webkit-mask-image: none; mask-image: none; }
  .fit-copy { padding: 2.5rem var(--gutter) 3rem; }
  /* Narrow the drawings, not their figures, so a caption keeps the column. */
  .list-fig img { width: min(70vw, 18rem); margin-inline: auto; }
  .price-fig img { width: min(55vw, 14rem); margin-inline: auto; }

  .sheet { padding-top: 3.25rem; }
  .specimens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t { font-size: 0.98rem; }

  .maker { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .maker-picture { order: -1; aspect-ratio: 4 / 5; }
  .maker-copy { padding: 3.5rem var(--gutter); }
  /* Narrow enough that the phone, standing in a 4:5 picture, keeps a margin
     above and below it rather than touching both edges. */
  .maker-phone { width: min(46vw, 14rem); }

  .colophon-grid { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 1.5rem; }
}

/* ---------- no pointer, no room, or no motion: a plate in each row ---------- */

@media (hover: none), (max-width: 47.99rem), (prefers-reduced-motion: reduce) {
  .menu li {
    grid-template-columns: 4rem minmax(0, 1fr) auto;
    grid-template-areas: "thumb day min" "thumb dish dish";
    column-gap: 1rem;
    row-gap: 0.2rem;
    align-items: end;
    padding-block: 0.85rem;
  }
  .menu-thumb { display: block; grid-area: thumb; align-self: center; width: 4rem; }
  .menu .day { grid-area: day; }
  .menu .dish { grid-area: dish; align-self: start; }
  .menu .min { grid-area: min; }
}