/* simmered.app: a risograph print, the app icon's own medium taken to the
   whole page. Flat inks on paper, roughened plates, a keyline a few px out
   of register, grain only over drawings, never under text.
   The five feature sheets are laid on a pile: from 720px wide and 700px tall
   each sheet sticks under the bar a little lower than the one before and
   slides up over it as you scroll, each turned a fraction of a degree so the
   pile's edges show. On a phone, or with Reduce Motion, the sheets simply
   follow one another, still turned. The floating bar carries the
   availability status beside the brand from 900px, and the hero carries it
   below that.
   Text sits on flat, normal-blend plates whose hex pairings were computed:
   cream/herb 5.6, ink/saffron 8.2, cream/paprika-ink 5.1, cream/ink 14.4,
   ink/cream 14.4, herb-ink/paper 8.6, ink-soft/paper 5.8; the bar's status
   is herb-ink on the 88% cream glass, 6.49 over the ink sheet. */

@font-face {
  font-family: "Fraunces";
  src: url(Fraunces-SemiBold.ttf) format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #F6F3EC;
  --cream: #F3EEE3;
  --ink: #17201D;
  --ink-soft: #56615C;
  --herb: #0F6B57;
  --herb-ink: #0B4F41;
  --paprika: #C4552B;
  --paprika-ink: #A8461F;
  --saffron: #F2A65A;
  --display: "Fraunces", Georgia, serif;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --body: clamp(17px, 1.3vw, 20px);
  --gutter: 16px;
  --measure: 1120px;
}

* { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font: var(--body)/1.55 var(--text);
  overflow-x: clip;
}
img, svg { display: block; }
h1, h2 { font-family: var(--display); font-weight: 600; margin: 0; text-wrap: balance; }
p, ul { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 4px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: absolute; left: var(--gutter); top: -200px; z-index: 10;
  background: var(--ink); color: var(--cream); padding: 10px 14px; border-radius: 6px;
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

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

/* Floating glass header: the one glass on the page, the navigation layer as
   Apple's HIG has it. Cream at 88% keeps herb-ink text at 6.5:1 or better
   over the darkest band it can cross (the ink sheet, 6.49; the herb flood,
   6.93). Solid wherever blur is unavailable or transparency is reduced. */
.float { position: fixed; top: 12px; left: 0; right: 0; z-index: 5; padding-inline: var(--gutter); pointer-events: none; }
.glass {
  pointer-events: auto;
  width: min(var(--measure), 100%); margin-inline: auto; min-height: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(243, 238, 227, 0.88);
  border: 1px solid rgba(23, 32, 29, 0.10);
  box-shadow: 0 1px 2px rgba(23, 32, 29, 0.06), 0 10px 30px rgba(23, 32, 29, 0.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--cream); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass { background: var(--cream); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--herb-ink); text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -0.3px; white-space: nowrap; padding: 2px 8px 2px 2px; flex: none; }
.brand-mark { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.jump { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.jump a { color: var(--herb-ink); text-decoration: none; font-weight: 600; font-size: 17px; padding: 10px 14px; border-radius: 999px; white-space: nowrap; }
.jump a:hover { background: rgba(15, 107, 87, 0.12); }
/* The status in the bar: the availability sentence, normal weight, after a
   hairline, with its saffron dot, so it reads as a status beside the links
   and never as a third link. It fits on one line beside the brand from
   900px; below that the bar is brand, Subscription and Support, and the
   hero shows the sentence (one copy shown at any width, never both). */
.sep { width: 1px; height: 24px; background: rgba(11, 79, 65, 0.28); margin-inline: 6px 14px; flex: none; }
.status { display: inline-flex; align-items: center; gap: 10px; color: var(--herb-ink); font-size: 16px; line-height: 1.3; white-space: nowrap; }
@media (max-width: 899px) {
  .status, .sep { display: none; }
}
@media (min-width: 900px) {
  .hero .availability { display: none; }
}
@media (max-width: 479px) {
  .brand { font-size: 19px; gap: 8px; padding-right: 4px; }
  .brand-mark { width: 34px; height: 34px; border-radius: 9px; }
  .jump a { font-size: 15px; padding: 10px 8px; }
}

/* The flood: a full-bleed ink, as the icon's herb ground. */
.flood { background: var(--herb); color: var(--cream); }
.deep { background: var(--herb-ink); }
.paper { background: var(--paper); color: var(--ink); }

/* Hero: the headline is the poster. Three lines of fluid Fraunces, cream on
   herb (5.6:1); "Cook it." is ink on a saffron plate (8.2:1), the way the
   mark's top line is the one saffron thing. */
.hero { padding: 120px 0 0; overflow: clip; }

.hero h1 {
  font-size: clamp(60px, 12.5vw, 160px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--cream);
  display: flex; flex-direction: column; align-items: flex-start;
  max-width: 100%;
}
.hero h1 span { display: block; }
.chip {
  position: relative; isolation: isolate;
  color: var(--ink);
  padding: 0.02em 0.14em 0.06em 0.10em;
  margin-top: 0.06em;
}
.chip::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--saffron); border-radius: 0.1em;
  filter: url(#rough);
}
.hero-row { display: grid; gap: 44px; margin-top: 40px; align-items: end; }
.lede { font-size: clamp(20px, 2vw, 25px); line-height: 1.4; max-width: 24em; text-wrap: pretty; }
.availability {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 22px;
  font-size: 17px; line-height: 1.3;
  padding: 8px 12px;
  border: 1px solid rgba(243, 238, 227, 0.55);
  border-radius: 6px;
  color: var(--cream);
}
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--saffron); flex: none; }

/* A print: stacked plates, one ink each, absolutely over each other.
   Their resting translate is the slight misregistration of a riso pass;
   the cream enamel sits true and the colours drift a px or two. Grain lives
   on the print alone (::before), so no body text ever has grain under it. */
.print { position: relative; isolation: isolate; }
.print .pl { position: absolute; inset: 0; width: 100%; height: 100%; }
.print::before {
  content: ""; position: absolute; inset: -6%; z-index: 1;
  background: url(grain.svg) center / 220px 220px repeat;
  mix-blend-mode: multiply; opacity: 0.5;
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent);
  mask-image: radial-gradient(closest-side, #000 40%, transparent);
  pointer-events: none;
}
.pl-p { translate: 2px 1px; }
.pl-s { translate: -2px 2px; }
.pl-k { translate: 1px -1px; }
.pl-h { translate: 0 0; }

.hero-pot { aspect-ratio: 704 / 560; width: min(100%, 520px); margin: 0 auto -5%; justify-self: end; }
/* the halftone zone of the flood, off to the right of the pot */
.hero-pot::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -14%; top: 8%; width: 46%; height: 92%;
  background: url(halftone.svg) center / 300px 300px repeat;
  opacity: 0.22;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 70%);
  mask-image: linear-gradient(to right, transparent, #000 70%);
}

/* Intro on paper. */
.intro { padding: clamp(96px, 12vw, 160px) 0 clamp(56px, 7vw, 96px); }
.intro .wrap { display: grid; gap: 28px; }
.intro-lead { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.5; max-width: 32em; }
.intro-pull { font-family: var(--display); font-weight: 600; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.06; letter-spacing: -0.025em; color: var(--herb-ink); max-width: 17em; text-wrap: balance; }

/* The zine: five sheets, each one ink. The sheet's plate is ::before
   (colour, roughened edge); its second pass is ::after, a keyline in the
   next ink printed a few px off register, multiplied like real overprint.
   Both sit under the text at z-index -1, so the words stay flat and crisp. */
.zine { width: min(var(--measure), 100% - 2 * var(--gutter)); margin-inline: auto; display: grid; gap: clamp(28px, 4vw, 56px); padding-bottom: clamp(72px, 9vw, 128px); }
.sheet {
  position: relative; isolation: isolate;
  display: grid; gap: 28px;
  padding: clamp(28px, 4vw, 56px) clamp(22px, 3.5vw, 56px) clamp(28px, 4vw, 48px);
  view-timeline-name: --sheet;
}
.sheet::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: 28px;
  background: var(--plate);
  filter: url(#rough);
}
.sheet::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: 28px;
  border: 3px solid var(--key);
  translate: 7px 6px;
  mix-blend-mode: multiply; opacity: 0.85;
  filter: url(#rough);
  pointer-events: none;
}
.sheet.saffron { --plate: var(--saffron); --key: var(--paprika); color: var(--ink); }
.sheet.herb { --plate: var(--herb); --key: var(--saffron); color: var(--cream); }
.sheet.paprika { --plate: var(--paprika-ink); --key: var(--saffron); color: var(--cream); }
.sheet.cream { --plate: var(--cream); --key: var(--herb); color: var(--ink); }
.sheet.ink { --plate: var(--ink); --key: var(--herb); color: var(--cream); }
.sheet.herb::after, .sheet.paprika::after, .sheet.ink::after { mix-blend-mode: normal; opacity: 0.9; }

/* The pile. Each print is laid a fraction of a degree off the last, the
   top one nearest true, at every width and with motion on or off: a
   rotated sheet's corners reach at most h/2 * sin(0.8deg), about 5px at
   375px, inside the 16px gutter, so nothing overflows. */
.sheet:nth-child(1) { rotate: -0.8deg; }
.sheet:nth-child(2) { rotate: 0.6deg; }
.sheet:nth-child(3) { rotate: -0.5deg; }
.sheet:nth-child(4) { rotate: 0.45deg; }
.sheet:nth-child(5) { rotate: -0.3deg; }
/* From 720px wide (two columns, so a sheet is shorter than the screen) and
   700px tall (the top sheet, 148px down, still ends above the fold) the
   sheets stick under the bar, each 14px lower than the one before, and the
   next slides up over it: the pile's top edges and turned corners show
   above the sheet being read. Sticky is scroll-coupled motion, so it is
   gated on Reduce Motion like the plate animations; without it the sheets
   follow one another, turned, and the page reads the same. The zine's
   extra bottom padding lets the finished pile rest before it lifts. */
@media (min-width: 720px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  .sheet { position: sticky; top: calc(92px + (var(--n) - 1) * 14px); }
  /* every row takes the tallest sheet's height, so no covered sheet's
     text shows under a shorter one on top (at 720px they ranged 286px to
     421px, and the short sheet 03 would have left 80px of 01 showing) */
  .zine { grid-auto-rows: 1fr; }
  .sheet:nth-child(1) { --n: 1; }
  .sheet:nth-child(2) { --n: 2; }
  .sheet:nth-child(3) { --n: 3; }
  .sheet:nth-child(4) { --n: 4; }
  .sheet:nth-child(5) { --n: 5; }
  .sheet::before { filter: url(#rough) drop-shadow(0 -6px 14px rgba(23, 32, 29, 0.18)); }
  /* the turns open the gap at a corner to about 22px, so a number sits
     lower than that and a covered sheet's number never peeks out */
  .sheet .num { top: 32px; }
  .zine { padding-bottom: clamp(160px, 22vh, 240px); }
}

.num { position: absolute; top: 14px; right: 20px; font-family: var(--display); font-weight: 600; font-size: clamp(28px, 3vw, 40px); line-height: 1; }
.sheet h2 { font-size: clamp(38px, 5vw, 72px); line-height: 0.98; letter-spacing: -0.025em; margin-bottom: 20px; padding-right: 60px; }
.copy { display: grid; gap: 14px; align-content: center; max-width: 34em; }
.copy p { text-wrap: pretty; }
.small { font-size: 17px; line-height: 1.5; }
.note { border-left: 4px solid var(--saffron); padding-left: 14px; font-weight: 600; }
.list { list-style: none; padding: 0; display: grid; gap: 10px; }
.list li { position: relative; padding-left: 34px; font-size: clamp(18px, 1.5vw, 21px); }
.list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em; width: 20px; height: 8px;
  background: var(--saffron); border-radius: 4px; translate: 0 -1px; rotate: -6deg;
}
.sheet .print { aspect-ratio: 4 / 3; width: min(100%, 460px); margin-inline: auto; }
.sheet .pot-print { aspect-ratio: 824 / 700; }

/* Subscription on paper, two columns from 820px. */
.subscription { padding: 0 0 clamp(72px, 9vw, 128px); }
.sub { display: grid; gap: 20px; }
.sub h2 { font-size: clamp(38px, 5vw, 72px); line-height: 1; letter-spacing: -0.025em; color: var(--herb-ink); }
.sub-copy { display: grid; gap: 14px; max-width: 40em; }
.muted { color: var(--ink-soft); }

/* Footer: the deep herb plate. */
.foot { padding: 56px 0 48px; }
.links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-weight: 600; }
.links a, .mail a, .fine a { color: var(--cream); }
.mail { margin-top: 22px; }
.fine { margin-top: 10px; font-size: 17px; }

/* Wider than a phone. */
@media (min-width: 720px) {
  .hero { padding-top: 140px; }
  .hero-row { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; }
  .hero-pot { margin: 0 0 -6% auto; }
  /* The copy column ends well above the paper, so the availability note
     sits on the herb, never on the seam where the flood meets the page. */
  .hero-copy { padding-bottom: clamp(56px, 7vw, 104px); }
  .sheet { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 4vw, 64px); }
  .sheet.flip .print { order: -1; }
  .sheet .print { margin-inline: 0; justify-self: center; }
  .sub { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 48px; align-items: start; }
  .num { top: 20px; right: 28px; }
}
@media (min-width: 1100px) {
  .hero-row { gap: 64px; }
}

/* Anchors land below the floating header. */
#save, #plan, #cook, #subscription, #support { scroll-margin-top: 96px; }

/* Scroll-driven motion, CSS only, gated twice: the browser must have view()
   timelines and the visitor must not have asked for reduced motion. Outside
   these blocks no rule sets a "from" state, so every plate rests at its
   printed position and the finished page shows. Plates come into register
   as their sheet scrolls in: the coloured plates of each drawing slide from
   a wide offset to their resting misregistration, and the sheet's keyline
   drifts into place; text never moves. The hero pot's plates register over
   the first 220px of scroll. The animation shorthand resets the timeline and
   range, so those two always follow it. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes reg-p { from { translate: -16px 12px; } to { translate: 2px 1px; } }
    @keyframes reg-s { from { translate: 14px -12px; } to { translate: -2px 2px; } }
    @keyframes reg-k { from { translate: 0 16px; } to { translate: 1px -1px; } }
    @keyframes reg-h { from { translate: 10px 10px; } to { translate: 0 0; } }
    @keyframes key { from { translate: -12px 18px; opacity: 0.4; } to { translate: 7px 6px; opacity: 0.85; } }
    @keyframes key-solid { from { translate: -12px 18px; opacity: 0.4; } to { translate: 7px 6px; opacity: 0.9; } }
    @keyframes hero-p { from { translate: 12px -8px; } to { translate: 2px 1px; } }
    @keyframes hero-s { from { translate: -14px 10px; } to { translate: -2px 2px; } }
    @keyframes lift {
      from { box-shadow: 0 1px 2px rgba(23, 32, 29, 0.05), 0 0 0 rgba(23, 32, 29, 0); }
      to { box-shadow: 0 1px 2px rgba(23, 32, 29, 0.06), 0 10px 30px rgba(23, 32, 29, 0.12); }
    }

    .glass { box-shadow: none; animation: lift linear both; animation-timeline: scroll(root); animation-range: 0 160px; }

    .hero-pot .pl-p { animation: hero-p linear both; animation-timeline: scroll(root); animation-range: 0 220px; }
    .hero-pot .pl-s { animation: hero-s linear both; animation-timeline: scroll(root); animation-range: 0 220px; }

    .sheet::after { animation: key linear both; animation-timeline: --sheet; animation-range: entry 0% entry 80%; }
    .sheet.herb::after, .sheet.paprika::after, .sheet.ink::after { animation-name: key-solid; }

    .sheet .pl-p { animation: reg-p linear both; animation-timeline: --sheet; animation-range: entry 10% entry 75%; }
    .sheet .pl-s { animation: reg-s linear both; animation-timeline: --sheet; animation-range: entry 20% entry 85%; }
    .sheet .pl-k { animation: reg-k linear both; animation-timeline: --sheet; animation-range: entry 5% entry 70%; }
    .sheet .pl-h { animation: reg-h linear both; animation-timeline: --sheet; animation-range: entry 0% entry 60%; }
  }
}

/* 404: the herb flood alone, filling the screen. */
.not-found { min-height: 100vh; min-height: 100svh; padding-bottom: 96px; }
.not-found h1 { font-size: clamp(52px, 9vw, 120px); margin-bottom: 32px; }