/* Nutrition with Grace · for Grace · the story.
   Her kitchen at 6 pm, as a cookbook: warm cream paper, ink, daylight from a window (top left), food in close-up.
   One accent, tomato. Literata for display and her caption cards, Inter for text, Archivo for labels and numerals.
   html.st-on   = the experience (story.js running).
   html.st-flat = ?rm=1, the flat mode: the readable document with end states and the one live phone.
   Without either, the page is a readable static document (no JS, or a script failed to load). */

@font-face {
  font-family: "Literata"; font-style: normal; font-weight: 400 700; font-display: swap; ascent-override: 96%; descent-override: 28%; line-gap-override: 0%;
  src: url("media/fonts/literata-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Literata"; font-style: normal; font-weight: 400 700; font-display: swap; ascent-override: 96%; descent-override: 28%; line-gap-override: 0%;
  src: url("media/fonts/literata-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Literata"; font-style: italic; font-weight: 400 700; font-display: swap; ascent-override: 96%; descent-override: 28%; line-gap-override: 0%;
  src: url("media/fonts/literata-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Literata"; font-style: italic; font-weight: 400 700; font-display: swap; ascent-override: 96%; descent-override: 28%; line-gap-override: 0%;
  src: url("media/fonts/literata-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("media/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("media/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("media/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("media/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* size-adjusted local fallbacks, visible during the swap only */
@font-face { font-family: "Literata Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 104%; ascent-override: 92%; descent-override: 24%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica"), local("Roboto"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 102%; }

:root {
  --cream: #F6F0E6;
  --paper: #FFFDF8;
  --oat: #EDE4D3;
  --crust: #DCCFB8;
  --ink: #1D1915;
  --muted: #6A6157;
  --faint: #A69B8C;
  --hair: rgba(29, 25, 21, .12);
  --tomato: #D4472A;
  --tomato-ink: #A9361F;
  --pea: #5B8A2E;
  --pea-ink: #3F6620;
  --butter: #E7A93A;
  --shadow: 0 18px 40px -18px rgba(70, 45, 25, .28);
  --cream-rgb: 246, 240, 230;

  --f-serif: "Literata", "Literata Fallback", Georgia, "Times New Roman", serif;
  --f-text: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-label: "Archivo", "Archivo Fallback", Arial, Helvetica, sans-serif;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-ios: cubic-bezier(.32, .72, 0, 1);
  --ease-drop: cubic-bezier(.2, 1.4, .4, 1);
  --gut: 16px;
  --S: 100vh;
  --LH: 100vh;
  color-scheme: light;
}
@supports (height: 100svh) { :root { --S: 100svh; --LH: 100lvh; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--cream); color: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font: 500 17px/1.4 var(--f-text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
p, h1, h2, h3, ol, ul, li, figure { margin: 0; padding: 0; }
h1, h2, h3 { font-weight: inherit; font-size: inherit; }
ol, ul { list-style: none; }
img, video, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
b { font-weight: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--tomato-ink); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.probe { position: fixed; top: 0; left: 0; width: 0; visibility: hidden; pointer-events: none; }
#vh-s { height: 100vh; height: 100svh; }
#vh-l { height: 100vh; height: 100lvh; }
.skip {
  position: fixed; left: 12px; top: 12px; z-index: 1000; padding: 10px 14px; border-radius: 12px; border: 0;
  background: var(--ink); color: var(--paper); font: 600 15px/1.2 var(--f-text); text-decoration: none; cursor: pointer;
  transform: translateY(calc(-100% - 90px));
}
.skip:focus-visible { transform: none; }
.skip--try { top: 60px; }
.skip--try[hidden] { display: none; }
.sr-story { display: none; }
html.st-on .sr-story { display: block; }
#end { height: 1px; }
.tom { color: var(--tomato); }
.nw { white-space: nowrap; }

/* the overline and the source lines: Archivo caps, +10% */
.ov { font: 600 11px/1.3 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.src { font: 500 11px/1.4 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* a word or a line rises out of its mask */
html.st-on .w { display: inline-block; vertical-align: top; overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; }
html.st-on .w > span { display: inline-block; }

/* ---------------------------------------------------------------------------------------------- light and grain */
/* no blend mode (a multiply layer over the whole page costs 15 to 23% of a frame): ink-coloured specks whose alpha
   comes from the noise; .02 matches the old multiply grain (local contrast measured at 390 and 1440). Static, never animated. */
.grain {
  position: fixed; inset: 0; z-index: 800; pointer-events: none; opacity: .02;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n' x='0' y='0'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='11' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 .114  0 0 0 0 .098  0 0 0 0 .082  0 0 0 1.2 -.35'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}
/* the window light (top left) drifts with the story (one scrubbed transform, story.js): the layer overhangs the stage
   by 5% / 3% so its edges never show; the gradient is the same light as on a stage-sized box
   (120% 90% at 8% -6% of the stage) */
.daylight, .daylight--eve { display: none; }
html.st-on .daylight {
  display: block; position: absolute; left: -5%; right: -5%; top: -3%; bottom: -3%; z-index: 0; pointer-events: none;
  background: radial-gradient(109.09% 84.91% at 11.82% -2.83%, rgba(255, 250, 240, .6) 0, rgba(255, 250, 240, .32) 34%, rgba(255, 250, 240, 0) 66%);
  opacity: .85; will-change: transform, opacity;
}
/* 6 pm arrives with the offer: a warm evening light from the top right (opacity scrubbed, chapters 7 to 9) */
html.st-on .daylight--eve {
  display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(70% 60% at 88% -8%, rgba(255, 214, 170, .30), rgba(255, 214, 170, 0) 70%);
  will-change: transform, opacity;
}

/* ============================================================================================== experience */
html.js:not(.st-on):not(.st-fail):not(.st-flat) #story,
html.js:not(.st-on):not(.st-fail):not(.st-flat) #dock { visibility: hidden; }

html.st-boot *, html.st-boot *::before, html.st-boot *::after { transition: none !important; }
html.st-on #run { position: relative; height: calc(var(--runL, 2700vh) + var(--LH)); }
html.st-on #end { position: absolute; left: 0; bottom: 0; width: 1px; }
html.st-on #stage {
  position: -webkit-sticky; position: sticky; top: 0;
  height: 100vh; height: var(--LH);
  overflow: hidden; overflow: clip;
  background: var(--cream);
}
/* a chapter is a scene of the stage: no stacking context of its own, its parts carry their z-index */
html.st-on .sc { position: absolute; left: 0; top: 0; width: 100%; height: var(--LH); visibility: hidden; pointer-events: none; }
html.st-on .sc > *, html.st-on .c1 > *, html.st-on .c5i > *, html.st-on .c6 > *, html.st-on .c7 > *, html.st-on .c8 > *, html.st-on .c9 > * { will-change: auto; }
html.st-on .s1hero, html.st-on .chips { display: none; }

/* ---------------------------------------------------------------------------------------------- the reel (her Ozempic bowl, 9:16) */
.reel, .scrim { display: none; }
html.st-on .reel {
  display: block; position: absolute; left: 0; top: 0; z-index: 2; width: var(--rw, 390px); height: var(--rh, 693px);
  transform-origin: 0 0; pointer-events: none; visibility: hidden;
}
html.st-on .reel.is-c1, html.st-on .reel.is-c4 { will-change: transform, opacity; }
html.st-on .reel__frame {
  position: absolute; inset: calc(var(--rf, 8px) * -1); border-radius: calc(var(--rr, 28px) + var(--rf, 8px));
  background: var(--paper); box-shadow: 0 30px 60px -28px rgba(70, 45, 25, .38), inset 0 0 0 1px rgba(29, 25, 21, .06); opacity: 0;
}
html.st-on .reel__m { position: absolute; inset: 0; overflow: hidden; background: var(--oat); }
.reel__img, .reel__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.reel__img { color: transparent; font-size: 0; }
.reel__v { z-index: 1; opacity: 0; transition: opacity .3s linear; }
.reel__v.on { opacity: 1; }
.reel__veil { position: absolute; inset: 0; z-index: 2; background: var(--cream); opacity: 0; pointer-events: none; }
/* desktop: the cream lift on the card's top, under the H1 that crosses it */
.reel__scrim {
  position: absolute; left: 0; right: 0; top: 0; height: 38%; z-index: 2; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--cream-rgb), .95) 0, rgba(var(--cream-rgb), .90) 45%, rgba(var(--cream-rgb), .62) 72%, rgba(var(--cream-rgb), 0) 100%);
}
/* T4: the phone's glass as the reel docks (its glare and its Dynamic Island, in canvas px, scaled into the reel by
   story.js), so the handover to the app's own header shows the same pixels */
.reel__gl { display: none; }
html.st-on .reel__gl {
  display: block; position: absolute; left: 0; top: 0; z-index: 3; opacity: 0; pointer-events: none; transform-origin: 0 0;
  background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .04) 20%, rgba(255, 255, 255, 0) 38%);
}
.reel__isl {
  position: absolute; top: 11px; left: 50%; width: 126px; height: 37px; margin-left: -63px; border-radius: 18.5px;
  background: #000; box-shadow: inset 0 0 0 .75px rgba(255, 255, 255, .05);
}
.reel__isl::after {
  content: ""; position: absolute; right: 13px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #3A4656 0, #121821 38%, #05070A 62%, #000 72%);
}
/* phones: the full-bleed reels get a top cream scrim (0 to 32% of S) so titles read */
html.st-on .scrim {
  display: block; position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--S) * .32); z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(var(--cream-rgb), .97) 0, rgba(var(--cream-rgb), .92) 42%, rgba(var(--cream-rgb), .7) 70%, rgba(var(--cream-rgb), 0) 100%);
}

/* ---------------------------------------------------------------------------------------------- 1 · Comment "Recipe" */
.c1__h { display: block; }
.c1__l1, .c1__l2 { display: block; }
.c1__nm {
  display: inline-block; font: 600 44px/1.02 var(--f-serif); font-variation-settings: "opsz" 72; letter-spacing: -.015em; color: var(--ink);
}
.c1__role { display: inline-block; font: 600 18px/1.3 var(--f-text); color: var(--ink); letter-spacing: -.005em; }
html.st-on .c1 { position: absolute; left: var(--gut); top: 14px; z-index: 20; width: calc(100% - 2 * var(--gut)); }
html.st-on .c1__ov { height: 15px; white-space: nowrap; color: var(--ink); opacity: .75; }
html.st-on .c1__ov2 .ch { visibility: hidden; }
html.st-on .c1__ov2 .ch.on { visibility: inherit; }
html.st-on .c1__h { margin-top: 9px; }
html.st-on .c1__l1 { overflow: hidden; padding-bottom: .06em; }
html.st-on .c1__l2 { overflow: hidden; margin-top: 7px; }
html.st-on .sc-1.is-on .c1__nm, html.st-on .sc-1.is-on .c1__role { will-change: transform; }
html.st-on.st-desk .c1 { left: 56px; top: 44px; width: auto; }
html.st-on.st-desk .c1__ov { font-size: 13px; height: 18px; }
html.st-on.st-desk .c1__h { margin-top: 18px; }
html.st-on.st-desk .c1__nm { font-size: 96px; line-height: 1; }
html.st-on.st-desk .c1__l2 { margin-top: 16px; }
html.st-on.st-desk .c1__role { font-size: 28px; }

/* the scroll cue: three rings, the protein arc closes with the first scroll */
.cue { display: none; }
html.st-on .cue {
  position: absolute; z-index: 21; display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 13px 0 6px; border-radius: 16px;
  background: rgba(255, 253, 248, .92); box-shadow: inset 0 0 0 1px var(--hair), 0 8px 18px -12px rgba(70, 45, 25, .4);
  color: var(--ink); font: 600 11px/1 var(--f-label); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; opacity: 0;
}
.cue__r { width: 22px; height: 22px; flex: none; overflow: visible; }
.cue__t { fill: none; stroke-width: 2.2; }
.cue__t--p { stroke: rgba(212, 71, 42, .16); }
.cue__t--f { stroke: rgba(91, 138, 46, .45); }
.cue__t--b { stroke: rgba(231, 169, 58, .7); }
.cue__a { fill: none; stroke: var(--tomato); stroke-width: 2.2; stroke-linecap: round; }
html.st-on:not(.rmos) .cue.bob .cue__r { animation: st-bob 1.6s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes st-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* the comment field (chapters 1 and 9): a paper pill */
.field {
  display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 8px 0 10px; border-radius: 26px;
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair), var(--shadow); color: var(--ink);
}
.field__av { width: 32px; height: 32px; border-radius: 50%; flex: none; object-fit: cover; }
.field__av--gen { display: flex; align-items: center; justify-content: center; background: var(--crust); }
.field__av--gen svg, .bub__av svg { width: 22px; height: 22px; fill: none; stroke: rgba(29, 25, 21, .4); stroke-width: 2.2; stroke-linecap: round; }
.field__tx { position: relative; flex: 1; min-width: 0; height: 24px; font: 500 17px/24px var(--f-text); white-space: nowrap; }
.field__ph { position: absolute; left: 0; top: 0; color: var(--muted); }
.field__ty { position: absolute; left: 0; top: 0; color: var(--ink); }
.field__ty .ch { visibility: hidden; }
.field__ty .ch.on { visibility: inherit; }
.field__caret { position: absolute; left: 0; top: 2px; width: 2px; height: 20px; border-radius: 1px; background: var(--tomato); display: none; }
html.st-on .field__caret { display: block; }
html.st-on:not(.rmos) .field__caret.blink { animation: st-blink 1s steps(1, end) infinite; }
@keyframes st-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.field__send {
  position: relative; flex: none; width: 36px; height: 36px; border: 0; padding: 0; border-radius: 50%;
  background: var(--oat); color: var(--faint); display: flex; align-items: center; justify-content: center;
  transition: background-color .16s linear, color .16s linear;
}
.field__send.on { background: var(--tomato); color: var(--paper); }
.field__arr { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
/* the static document: the field holds its word, the button is tomato */
html:not(.st-on) .field--1 .field__ph { display: none; }
/* chapter 9 ends with her comment posted: the field is back to its placeholder (one GO on screen, the bubble) */
html:not(.st-on) .field--9 .field__ty { display: none; }
html:not(.st-on) .field--9 .field__ph { position: static; }
html:not(.st-on) .field--1 .field__send, html:not(.st-on) .field--9 .field__btn { background: var(--tomato); color: var(--paper); }
html:not(.st-on) .field__tx { position: static; }
html:not(.st-on) .field__ty { position: static; }
html.st-on .field--1 { position: absolute; z-index: 24; left: var(--gut); right: var(--gut); top: 0; opacity: 0; }
html.st-on .sc-1.is-on .field--1 { will-change: transform, opacity; }
/* J12: the field thins into an ink line that slides up and becomes the underline of the H2’s first line */
.field__ln { display: none; }
html.st-on .field--1 .field__ln { display: block; position: absolute; inset: 0; border-radius: inherit; background: var(--ink); opacity: 0; pointer-events: none; }
html.st-on .sc-1.is-on .field--1 .field__send { will-change: transform; }

/* the comment bubbles (T1): a pool, transform and opacity only */
.casc { display: none; }
html.st-on .casc { display: block; position: absolute; inset: 0; z-index: 19; pointer-events: none; }
.bub {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 3px;
  border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair), 0 8px 18px -12px rgba(70, 45, 25, .32);
  font: 600 15px/1 var(--f-text); color: var(--ink); white-space: nowrap; opacity: 0; transform-origin: 16px 50%;
}
html.st-on.st-desk .bub { gap: 8px; height: 36px; padding: 0 14px 0 3px; border-radius: 18px; font-size: 16px; transform-origin: 18px 50%; }
html.st-on .sc-1.is-on .bub { will-change: transform, opacity; }
/* depth (ELEVATION 4.1): the far planes are smaller, their ink paler (.66, .40) and their paper a touch of cream, like
   paper further from the window. The paper stays opaque: where a nearer pill tucks over a farther one's avatar it is
   paper on paper, never one comment seen through another */
.bub--p1 { background: #FCF8F2; box-shadow: inset 0 0 0 1px var(--hair), 0 6px 14px -11px rgba(70, 45, 25, .26); }
.bub--p1 .bub__av, .bub--p1 .bub__t { opacity: .66; }
/* the back plane: a hairline only (no shadow to paint) */
.bub--far { background: #F9F5EC; box-shadow: inset 0 0 0 1px var(--hair); }
.bub--p2 .bub__av, .bub--p2 .bub__t { opacity: .40; }
.bub__av { width: 26px; height: 26px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; }
.bub__av svg { width: 18px; height: 18px; }
html.st-on.st-desk .bub__av { width: 30px; height: 30px; }
html.st-on.st-desk .bub__av svg { width: 20px; height: 20px; }
.bub--t0 .bub__av { background: var(--crust); }
.bub--t1 .bub__av { background: var(--oat); box-shadow: inset 0 0 0 1px rgba(29, 25, 21, .06); }
.bub--t2 .bub__av { background: rgba(231, 169, 58, .35); }
.bub--t3 .bub__av { background: rgba(91, 138, 46, .22); }
.bub--t4 .bub__av { background: rgba(212, 71, 42, .18); }

/* the counters card */
.cnt { background: var(--paper); border-radius: 20px; box-shadow: inset 0 0 0 1px var(--hair), var(--shadow); padding: 12px 14px; }
.cnt__r { display: flex; align-items: center; gap: 13px; }
.cnt__r + .cnt__r { margin-top: 10px; }
.cnt__th { width: 40px; height: 50px; border-radius: 9px; object-fit: cover; flex: none; background: var(--oat); box-shadow: inset 0 0 0 1px rgba(29, 25, 21, .06); }
.cnt__tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cnt__n { font: 800 28px/1 var(--f-label); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.012em; color: var(--ink); white-space: nowrap; }
.cnt__o { font: 500 15px/1.2 var(--f-text); color: var(--muted); }
html.st-on .cnt { position: absolute; z-index: 20; left: var(--gut); right: var(--gut); top: 0; opacity: 0; }
/* phones: a compact receipt, so the comment band between it and her card holds the stream */
html.st-on .cnt { padding: 11px 14px; }
html.st-on .cnt__r + .cnt__r { margin-top: 8px; }
html.st-on .sc-1.is-on .cnt, html.st-on .sc-1.is-on .cnt__r { will-change: transform, opacity; }
html.st-on .reel.is-c1 .reel__veil, html.st-on .scrim.is-on { will-change: opacity; }
html.st-on.st-desk .cnt { left: auto; right: auto; padding: 18px 20px; border-radius: 24px; }
html.st-on.st-desk .cnt__r + .cnt__r { margin-top: 14px; }
html.st-on.st-desk .cnt__th { border-radius: 10px; }
html.st-on.st-desk .cnt__n { font-size: 40px; }
html.st-on.st-desk .cnt__o { font-size: 17px; }

.c1__line { font: 600 26px/1.12 var(--f-serif); font-variation-settings: "opsz" 60; letter-spacing: -.012em; color: var(--ink); }
html.st-on .c1__line { position: absolute; z-index: 20; left: var(--gut); right: var(--gut); top: 0; }
html.st-on .c1__src { position: absolute; z-index: 20; left: var(--gut); right: var(--gut); top: 0; opacity: 0; }
html.st-on.st-desk .c1__line { font-size: 38px; right: auto; }
html.st-on.st-desk .c1__src { font-size: 12px; right: auto; }

/* ---------------------------------------------------------------------------------------------- 2 · What's in it */
.clip { position: relative; overflow: hidden; background: var(--oat); border-radius: 18px; box-shadow: 0 0 0 6px var(--paper), var(--shadow); aspect-ratio: 16 / 9; }
.clip__img, .clip__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.clip__v { opacity: 0; transition: opacity .3s linear; }
.clip__v.on { opacity: 1; }
/* the H2 (SPEC 8.2): an app is a recipe too; its first line is where the comment field of chapter 1 lands (J12) */
.c2__h { font: 600 30px/1.08 var(--f-serif); font-variation-settings: "opsz" 60; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.c2__h1, .c2__h2 { display: block; }
.ing { display: block; }
.ing__r { display: flex; align-items: center; gap: 12px; min-height: 38px; }
.ing__g { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ing__w {
  position: relative; flex: none; display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 1px;
  min-width: 104px; height: 36px; padding: 0 10px; border-radius: 10px; background: var(--oat);
  box-shadow: inset 0 1px 2px rgba(70, 45, 25, .12), inset 0 0 0 1px rgba(29, 25, 21, .05);
  line-height: 36px; white-space: nowrap; contain: layout paint;
}
.ing__n { font: 800 26px/36px var(--f-label); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; color: var(--ink); }
.ing__u { font: 700 14px/36px var(--f-label); color: var(--ink); letter-spacing: .01em; }
.ing__t { font: 500 16px/1.25 var(--f-text); color: var(--ink); min-width: 0; text-wrap: balance; }
/* the odometer readout (story.js odoBuild): one clipped cell per digit, its strip 0 to 9 then 0; the cells sit on the
   line box's top, so the digits keep the strut's baseline (the unit beside them aligns as before) */
/* a phrase that wraps as one piece (phones: "posts." / "A reel almost every day.") */
.ing__k { display: inline-block; }
.od {
  display: inline-block; vertical-align: top; height: 36px; overflow: hidden;
  /* a drum: the neighbouring digits fade at the window's edges while they roll past */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 76%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 76%, transparent 100%);
}
.od__s { display: block; white-space: pre; }
.plat { display: block; height: 2px; background: var(--ink); border-radius: 1px; }
/* the scale's two feet, hanging under the platform at 8% and 92% of its width */
.plat__f { position: absolute; top: 2px; left: 8%; width: 10px; height: 4px; margin-left: -5px; background: var(--ink); border-radius: 0 0 2px 2px; transform-origin: 50% 0; opacity: 0; }
html.st-on.st-desk .plat__f { width: 12px; height: 5px; margin-left: -6px; }
.plat__f + .plat__f { left: 92%; }
.c2__close { font: 600 26px/1.1 var(--f-serif); font-variation-settings: "opsz" 60; letter-spacing: -.012em; }
.c2__c1, .c2__c2 { display: block; }
html.st-on .c2__ov { position: absolute; z-index: 20; left: var(--gut); top: 14px; }
html.st-on .c2__clip { position: absolute; z-index: 14; left: var(--gut); right: var(--gut); top: 0; opacity: 0; }
html.st-on .sc-2.is-on .c2__clip, html.st-on .sc-2.is-on .ing__r, html.st-on .sc-2.is-on .plat { will-change: transform, opacity; }
/* the odometer strips and her breathing face move on their own layers (never a repaint of the row or the frame) */
html.st-on .sc-2.is-on .od__s, html.st-on .sc-2.is-on .clip__img, html.st-on .sc-2.is-on .clip__v { will-change: transform; }
html.st-on .c2__h { position: absolute; z-index: 20; left: var(--gut); right: var(--gut); top: 0; }
html.st-on .c2__h1 { opacity: 0; }
html.st-on .ing { position: absolute; z-index: 20; left: var(--gut); right: var(--gut); top: 0; }
html.st-on .ing__r { position: absolute; left: 0; right: 0; top: 0; opacity: 0; }
html.st-on .ing__u { opacity: 0; transform-origin: 0 72%; }
html.st-on .plat { position: absolute; z-index: 20; left: 0; top: 0; width: 100px; transform-origin: 0 50%; opacity: 0; }
html.st-on .c2__close { position: absolute; z-index: 20; left: var(--gut); right: var(--gut); top: 0; }
html.st-on .c2__src { position: absolute; z-index: 20; left: var(--gut); right: var(--gut); top: 0; opacity: 0; }
html.st-on.st-desk .c2__ov { left: 56px; top: 44px; font-size: 13px; }
html.st-on.st-desk .c2__h { font-size: 48px; right: auto; }
html.st-on.st-desk .ing__r { gap: 16px; min-height: 54px; }
html.st-on.st-desk .ing__g { width: 24px; height: 24px; }
html.st-on.st-desk .ing__w { min-width: 150px; height: 50px; line-height: 50px; padding: 0 14px; border-radius: 13px; }
html.st-on.st-desk .ing__n { font-size: 40px; line-height: 50px; }
html.st-on.st-desk .ing__u { font-size: 19px; line-height: 50px; }
html.st-on.st-desk .od { height: 50px; }
html.st-on.st-desk .ing__t { font-size: 21px; }
html.st-on.st-desk .c2__close { font-size: 40px; right: auto; }
html.st-on.st-desk .c2__src { font-size: 12px; right: auto; }

/* ---------------------------------------------------------------------------------------------- 3 · Your method */
.c3__h, .c4__h { font: 600 30px/1.08 var(--f-serif); font-variation-settings: "opsz" 60; letter-spacing: -.015em; }
.c3__h1, .c3__h2 { display: block; }
.tile { position: relative; }
.tile__f { position: relative; background: var(--paper); border-radius: 14px; padding: 6px; box-shadow: var(--shadow); }
.tile__m { position: relative; overflow: hidden; border-radius: 8px; aspect-ratio: 4 / 5; background: var(--oat); }
.tile__img, .tile__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.tile__v { opacity: 0; transition: opacity .3s linear; }
.tile__v.on { opacity: 1; }
/* our caption card, in her style: a paper box, square corners, centred lines */
.card {
  background: var(--paper); padding: .35em .6em .4em; text-align: center; box-shadow: 0 14px 26px -14px rgba(70, 45, 25, .42), 0 0 0 1px rgba(29, 25, 21, .05);
  font-size: 20px; color: var(--ink);
}
.card__t { font: 600 1em/1.2 var(--f-serif); font-variation-settings: "opsz" 24; letter-spacing: -.008em; font-variant-numeric: lining-nums; }
.card__s { margin-top: .36em; font: 500 15px/1.3 var(--f-text); color: var(--ink); font-variant-numeric: lining-nums; }
.c3__close { font: 600 24px/1.12 var(--f-serif); font-variation-settings: "opsz" 48; letter-spacing: -.01em; }
html.st-on .c3__ov { position: absolute; z-index: 20; left: var(--gut); top: 14px; }
html.st-on .c3__h { position: absolute; z-index: 20; left: var(--gut); right: var(--gut); top: 34px; }
html.st-on .tiles { position: absolute; inset: 0; z-index: 15; }
html.st-on .tile { position: absolute; left: 0; top: 0; width: 280px; visibility: hidden; }
html.st-on .tile .card { position: absolute; left: 50%; top: 0; z-index: 2; white-space: nowrap; opacity: 0; transform-origin: 50% 100%; }
html.st-on .sc-3.is-on .tile, html.st-on .sc-3.is-on .card, html.st-on .sc-3.is-on .card__cs { will-change: transform, opacity; }
html.st-on .sc-3.is-on .tile__sh { will-change: opacity; }
/* the card's contact shadow: a pre-blurred ellipse sprite on the tile, under the card (no filter) */
html.st-on .card__cs {
  position: absolute; left: 0; top: 0; z-index: 1; width: 100px; height: 20px; opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(70, 45, 25, .45), rgba(70, 45, 25, .2) 55%, rgba(70, 45, 25, 0));
}
/* the tile's travel shadow: deeper than its rest shadow, shown at the swipe's peak speed */
html.st-on .tile__sh { position: absolute; inset: 0; z-index: -1; border-radius: 14px; box-shadow: 0 26px 46px -18px rgba(70, 45, 25, .5); opacity: 0; pointer-events: none; }
/* desktop: a card lifts a little under the hand (the individual translate composes with the scrubbed transform) */
@media (hover: hover) and (pointer: fine) {
  html.st-on.st-desk .tile { pointer-events: auto; }
  html.st-on.st-desk .tile .card { transition: translate .22s var(--ease-out); }
  html.st-on.st-desk .tile:hover .card { translate: 0 -4px; }
}
html.st-on .c3__close { position: absolute; z-index: 20; left: var(--gut); right: var(--gut); top: 0; }
html.st-on .c3__src { position: absolute; z-index: 20; left: var(--gut); right: var(--gut); top: 0; opacity: 0; }
html.st-on.st-desk .c3__ov { left: 3%; top: 44px; font-size: 13px; }
html.st-on.st-desk .c3__h { left: 3%; right: 3%; top: 70px; font-size: 56px; }
html.st-on.st-desk .c3__h1, html.st-on.st-desk .c3__h2 { display: inline; }
html.st-on.st-desk .card { font-size: 24px; }
/* desktop: a card never grows wider than its tile (a long title takes two balanced lines); the tile whose card is
   falling or settling sits above its neighbours */
html.st-on.st-desk .tile .card { white-space: normal; width: max-content; max-width: calc(100% - 12px); text-wrap: balance; }
html.st-on .tile.is-drop { z-index: 3; }
html.st-on.st-desk .card__s { font-size: 16px; }
html.st-on.st-desk .c3__close { left: 3%; right: auto; font-size: 34px; }
html.st-on.st-desk .c3__src { left: 3%; right: auto; font-size: 12px; }

/* ---------------------------------------------------------------------------------------------- 4 · The kitchen */
.key, .c3__h, .c2__close, .c3__close, .c1__line, .c4__cap, .c6__after, .c7__line, .c9__h { text-wrap: balance; }
.key { font: 600 clamp(28px, 8.4vw, 34px)/1.06 var(--f-serif); font-variation-settings: "opsz" 72; letter-spacing: -.015em; }
.key__1, .key__2 { display: block; }
.c4__cap { font: 600 22px/1.15 var(--f-serif); font-variation-settings: "opsz" 48; letter-spacing: -.01em; }
html.st-on .c4__ov { position: absolute; z-index: 32; left: var(--gut); top: 14px; opacity: 0; }
html.st-on .key { position: absolute; z-index: 32; left: var(--gut); right: var(--gut); top: 36px; }
html.st-on .c4__cap { position: absolute; z-index: 32; left: var(--gut); right: var(--gut); top: 0; }
html.st-on.st-desk .c4__ov { font-size: 13px; }
html.st-on.st-desk .key { font-size: 64px; right: auto; }
html.st-on.st-desk .c4__cap { font-size: 36px; right: auto; }

/* the replica of her burned-in card (pure white, Literata 400, #111), then the app's title card */
.rep { display: none; }
html.st-on .rep { display: block; position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 35; pointer-events: none; visibility: hidden; }
.rep__box { position: absolute; left: 0; top: 0; width: 100px; height: 100px; background: #FFFFFF; transform-origin: 0 0; }
.rep__sh { position: absolute; left: 0; top: 0; width: 100px; height: 100px; transform-origin: 0 0; opacity: 0; border-radius: 6px; background: rgba(70, 45, 25, .34); filter: blur(10px); }
html.st-on .rep.is-on .rep__box { will-change: transform; }
html.st-on .rep.is-on .rep__sh, html.st-on .rep.is-on .rep__a, html.st-on .rep.is-on .rep__b, html.st-on .rep.is-on .rep__ls { will-change: transform, opacity; }
.rep__a, .rep__b {
  position: absolute; left: 0; top: 0; margin: 0; color: #111; text-align: center; white-space: nowrap; transform-origin: 0 0;
  font-family: var(--f-serif); font-weight: 400; font-variation-settings: "opsz" 14; font-variant-numeric: lining-nums; letter-spacing: 0;
}
.rep__l { display: block; }
.rep__pot { display: inline-block; width: 1.04em; height: 1.2em; margin-left: .2em; vertical-align: -.24em; }
/* the one line it becomes is the app's own title card: its ink, its shadow (set from the app's style at layout) */
.rep__b { opacity: 0; color: var(--ink); }
.rep__ls { position: absolute; left: 0; top: 0; width: 100px; height: 40px; opacity: 0; }

/* ---------------------------------------------------------------------------------------------- 5 · How we prep it */
.c5i__h, .c6__h, .c7__h { font: 600 30px/1.08 var(--f-serif); font-variation-settings: "opsz" 60; letter-spacing: -.015em; }
.c5i__s, .c6__s, .c7__s { font: 500 17px/1.32 var(--f-text); color: var(--muted); }
.step__t { font: 700 17px/1.25 var(--f-text); letter-spacing: -.008em; color: var(--ink); }
.step__s { margin-top: 3px; font: 500 15px/1.32 var(--f-text); color: var(--muted); }
.draft { font: 400 15px/1.35 var(--f-text); color: var(--muted); }
html.st-on .c5i { position: absolute; z-index: 25; left: var(--gut); top: 14px; width: calc(100% - 2 * var(--gut)); }
html.st-on .c5i__h { margin-top: 6px; transform-origin: 0 0; }
html.st-on .c5i__s { margin-top: 8px; }
html.st-on .steps { position: absolute; inset: 0; z-index: 25; }
html.st-on .step { position: absolute; left: var(--gut); top: 0; width: calc(100% - 2 * var(--gut)); visibility: hidden; }
html.st-on .step.on { visibility: inherit; }
html.st-on .draft { position: absolute; z-index: 25; left: var(--gut); top: 0; opacity: 0; }
html.st-on .draft.draft--v { white-space: nowrap; transform: rotate(-90deg); transform-origin: 0 0; }
html.st-on.st-desk .c5i { left: 56px; width: 460px; }
html.st-on.st-desk .c5i__ov, html.st-on.st-desk .c6__ov, html.st-on.st-desk .c7__ov { font-size: 13px; }
html.st-on.st-desk .c5i__h, html.st-on.st-desk .c6__h, html.st-on.st-desk .c7__h { font-size: 56px; }
html.st-on.st-desk .c5i__s, html.st-on.st-desk .c6__s, html.st-on.st-desk .c7__s { font-size: 21px; }
html.st-on.st-desk .c5i__h { margin-top: 12px; }
html.st-on.st-desk .c5i__s { margin-top: 10px; }
html.st-on.st-desk .step { width: 380px; text-align: right; }
html.st-on.st-desk .step__t { font-size: 30px; line-height: 1.12; letter-spacing: -.015em; }
html.st-on.st-desk .step__s { margin-top: 8px; font-size: 19px; }

/* the meal-prep containers (T5), the step indicator */
.tubs { display: none; }
html.st-on .tubs { display: flex; position: absolute; z-index: 25; left: 0; top: 0; gap: 6px; opacity: 0; }
.tub { width: 28px; height: 20px; flex: none; }
.tub svg { width: 100%; height: 100%; overflow: visible; }
.tub__b { fill: var(--oat); stroke: var(--crust); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tub__l { fill: var(--paper); stroke: rgba(29, 25, 21, .3); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.tub__tab { fill: var(--paper); stroke: rgba(29, 25, 21, .3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tub__n { font: 700 7.4px var(--f-label); text-anchor: middle; fill: var(--ink); font-variant-numeric: tabular-nums; }
.tub__lid { transform-box: view-box; transform-origin: 2.6px 11px; }
.tub__ck { fill: none; stroke: var(--tomato); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.tub.up .tub__n { fill: var(--tomato); }
html.st-on.st-desk .tubs { flex-direction: column; gap: 22px; }
html.st-on.st-desk .tub { width: 64px; height: 44px; }

/* ---------------------------------------------------------------------------------------------- 6 · Your turn */
.c6__hint { font: 500 15px/1.35 var(--f-text); color: var(--muted); }
.c6__a1, .c6__a2 { display: block; }
.c6__after { font: 600 22px/1.15 var(--f-serif); font-variation-settings: "opsz" 48; letter-spacing: -.01em; }
html.st-on .c6 { position: absolute; z-index: 25; left: var(--gut); top: 14px; width: calc(100% - 2 * var(--gut)); }
html.st-on .c6__ov { height: 15px; }
html.st-on .c6__h { margin-top: 7px; }
html.st-on .c6__s { margin-top: 7px; }
html.st-on .c6__hint { display: none; }
html.st-on .c6__after { position: absolute; z-index: 25; left: var(--gut); right: var(--gut); top: 0; }
html.st-on.st-desk .c6 { left: 56px; width: 380px; }
html.st-on.st-desk .c6__h { margin-top: 12px; }
html.st-on.st-desk .c6__s { margin-top: 10px; }
html.st-on.st-desk .c6__hint { display: block; margin-top: 26px; }
html.st-on.st-desk .c6__after { font-size: 30px; right: auto; }
.fx6 { display: none; }
html.st-on .fx6 { display: block; position: absolute; inset: 0; z-index: 12; pointer-events: none; visibility: hidden; }
.fx6 i { position: absolute; left: 0; top: 0; display: block; border-radius: 50%; opacity: 0; }
html.st-on .fx6.is-on .fx6__glow, html.st-on .fx6.is-on .fx6__pulse { will-change: transform, opacity; }
/* outside chapter 6, nothing of T6 exists (no layer, no leak) */
html.st-on .fx6:not(.is-on) { display: none; }
.fx6__glow { width: 760px; height: 760px; margin: -380px 0 0 -380px; background: radial-gradient(closest-side, rgba(231, 169, 58, .18), rgba(231, 169, 58, .1) 46%, rgba(231, 169, 58, 0)); }
.fx6__pulse { width: 600px; height: 600px; margin: -300px 0 0 -300px; background: radial-gradient(closest-side, rgba(212, 71, 42, 1), rgba(212, 71, 42, .4) 42%, rgba(212, 71, 42, 0)); }
/* the scroll reminder (SPEC 2 D point 3): a paper pill with our down chevron and two lines. story.js places it (bottom
   centre on phones, under the live phone; beside the phone's lower edge on desktop; never over the glass or the
   hardware) and shows it with .on */
.nudge { display: none; }
html.st-on .nudge {
  display: flex; position: absolute; z-index: 27; left: 0; top: 0; align-items: center; gap: 10px;
  padding: 7px 16px 7px 7px; border-radius: 24px; background: var(--paper); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hair), var(--shadow); white-space: nowrap; pointer-events: none;
  opacity: 0; visibility: hidden; translate: 0 10px;
  transition: opacity .32s linear, translate .42s var(--ease-out), visibility 0s linear .42s;
}
html.st-on .nudge.on { opacity: 1; visibility: inherit; translate: 0 0; transition: opacity .32s linear, translate .42s var(--ease-out), visibility 0s; }
.nudge__c { flex: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--oat); }
.nudge__chev { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nudge__t { display: flex; flex-direction: column; gap: 1px; }
.nudge__t b { font: 600 15px/1.2 var(--f-text); }
.nudge__t span { font: 400 13px/1.25 var(--f-text); color: var(--muted); }
/* the chevron bobs 6 px on a 1.4 s loop (still under reduced motion) */
html.st-on:not(.rmos) .nudge.on .nudge__chev { animation: st-nudge 1.4s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes st-nudge { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }

/* ---------------------------------------------------------------------------------------------- 4 · 5 · 6 · the phone (warm natural titanium) */
html.st-on .phone {
  position: absolute; left: 0; top: 0; z-index: 13;
  width: var(--cw, 393px); height: var(--chh, 852px);
  transform-origin: 0 0; pointer-events: none;
}
html.st-on .phone__screen { pointer-events: auto; }
html.st-on .phone.ph-off { opacity: 0; }
html.st-on .phone.is-anim { will-change: transform, opacity; }
.phone { --R: 55px; --bz: 11px; --band: 6px; }
.phone__frame {
  position: absolute; inset: calc((var(--bz) + var(--band)) * -1);
  border-radius: calc(var(--R) + var(--bz) + var(--band));
  border: var(--band) solid transparent;
  background:
    linear-gradient(#070706, #070706) padding-box,
    linear-gradient(162deg, #E6E0D5 0%, #D9D2C6 9%, #BDB4A6 24%, #A69D8F 38%, #C4BCAE 52%, #CEC6B8 60%, #AFA698 76%, #A69D8F 86%, #D3CBBE 100%) border-box;
  box-shadow: 0 0 0 .6px rgba(70, 45, 25, .22), inset 0 0 0 .6px rgba(255, 255, 255, .08);
  pointer-events: none;
}
/* the top edge catches the window light */
.phone__frame::after {
  content: ""; position: absolute; inset: calc(var(--band) * -1); border-radius: inherit; pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, .5);
  -webkit-mask-image: linear-gradient(90deg, transparent 8%, #000 30%, #000 70%, transparent 92%);
  mask-image: linear-gradient(90deg, transparent 8%, #000 30%, #000 70%, transparent 92%);
}
/* the soft kitchen shadow on the cream */
.phone::before {
  content: ""; position: absolute; inset: calc((var(--bz) + var(--band)) * -1); border-radius: calc(var(--R) + var(--bz) + var(--band));
  box-shadow: 0 40px 80px -30px rgba(70, 45, 25, .35), 0 12px 24px -16px rgba(70, 45, 25, .22); pointer-events: none;
}
.phone__frame::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  border-radius: calc(var(--R) + var(--bz));
  border: var(--bz) solid #050504;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 0 0 .75px rgba(255, 255, 255, .05);
}
.pa { position: absolute; z-index: 0; width: var(--band); height: 2.5px; background: rgba(112, 100, 86, .4); }
.pa--1 { left: calc(var(--band) * -1); top: 92px; }
.pa--2 { left: calc(var(--band) * -1); bottom: 92px; }
.pa--3 { right: calc(var(--band) * -1); top: 92px; }
.pa--4 { right: calc(var(--band) * -1); bottom: 92px; }
.pb {
  position: absolute; width: 5px; border-radius: 2px;
  background: linear-gradient(90deg, #8E8577 0%, #C9C1B3 40%, #DAD3C7 55%, #9C9385 100%);
  box-shadow: 0 0 0 .6px rgba(70, 45, 25, .35);
}
.pb--act { left: calc(0px - var(--bz) - var(--band) - 3.5px); top: 122px; height: 32px; }
.pb--vu { left: calc(0px - var(--bz) - var(--band) - 3.5px); top: 182px; height: 60px; }
.pb--vd { left: calc(0px - var(--bz) - var(--band) - 3.5px); top: 254px; height: 60px; }
.pb--pw { right: calc(0px - var(--bz) - var(--band) - 3.5px); top: 214px; height: 94px; background: linear-gradient(270deg, #8E8577 0%, #C9C1B3 40%, #DAD3C7 55%, #9C9385 100%); }
.phone__screen {
  position: absolute; inset: 0; border-radius: var(--R); overflow: hidden; overflow: clip; background: var(--cream);
  transform: translateZ(0);
}
#grace-app { position: absolute; left: 0; top: 0; width: 100%; height: 100%; contain: strict; }
.phone__glare {
  position: absolute; inset: 0; z-index: 40; pointer-events: none; border-radius: var(--R);
  background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .04) 20%, rgba(255, 255, 255, 0) 38%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
/* T4: the glass is black while the reel docks, then the recipe wipes in below the header */
.phone__black { display: none; }
html.st-on .phone__black { display: block; position: absolute; inset: 0; z-index: 30; background: #070706; opacity: 0; pointer-events: none; }
/* T6: a one-frame paper flash on the glass edge */
.phone__edge { display: none; }
html.st-on .phone__edge { display: block; position: absolute; inset: -2px; z-index: 42; border-radius: calc(var(--R) + 2px); box-shadow: 0 0 0 2.5px var(--paper), 0 0 18px 2px rgba(255, 253, 248, .8); opacity: 0; pointer-events: none; }
/* the Dynamic Island: 196 pt in the DOM, 126 pt through the clip */
.phone__island {
  position: absolute; top: 11px; left: 50%; z-index: 41; width: 196px; height: 37px; margin-left: -98px;
  pointer-events: none; clip-path: inset(0 35px round 18.5px); -webkit-clip-path: inset(0 35px round 18.5px);
  contain: strict;
}
.isl__body { position: absolute; inset: 0; border-radius: 18.5px; background: #000; box-shadow: inset 0 0 0 .75px rgba(255, 255, 255, .05); }
.isl__body::after {
  content: ""; position: absolute; right: 48px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #3A4656 0, #121821 38%, #05070A 62%, #000 72%);
}
.isl__rings { position: absolute; left: 9px; top: 6.5px; width: 24px; height: 24px; overflow: visible; opacity: 0; }
.isl__t { fill: none; stroke-width: 2.6; }
.isl__t.isl--p { stroke: rgba(212, 71, 42, .28); }
.isl__t.isl--f { stroke: rgba(91, 138, 46, .32); }
.isl__t.isl--b { stroke: rgba(231, 169, 58, .32); }
.isl__a { fill: none; stroke-width: 2.6; stroke-linecap: round; opacity: 0; }
.isl__a.isl--p { stroke: var(--tomato); }
.isl__a.isl--f { stroke: #7DB343; }
.isl__a.isl--b { stroke: var(--butter); }

/* the static Today screen: only when the app is missing, or without the experience */
.phone__fb { display: none; position: absolute; inset: 0; background: var(--cream); color: var(--ink); font-family: var(--f-text); }
html.st-noapp .phone__fb, html[data-noapp] .phone__fb, html:not(.st-on):not(.st-flat) .phone__fb { display: block; }
html.st-noapp #grace-app, html[data-noapp] #grace-app, html:not(.st-on):not(.st-flat) #grace-app { display: none; }
html.no-js img[data-src] { display: none; }
.fb__status { position: absolute; left: 0; right: 0; top: 0; height: 54px; color: var(--ink); }
.fb__time { position: absolute; left: 38px; top: 18px; font: 600 16px/20px var(--f-text); font-variant-numeric: tabular-nums; }
.fb__icons { position: absolute; right: 30px; top: 21px; display: flex; gap: 6px; align-items: center; }
.fb__k { position: absolute; left: 16px; top: 62px; font: 600 11px/1 var(--f-label); letter-spacing: .1em; color: var(--muted); }
.fb__h { position: absolute; left: 16px; top: 78px; font: 600 28px/1.1 var(--f-serif); font-variation-settings: "opsz" 48; letter-spacing: -.012em; }
.fb__card { position: absolute; left: 16px; right: 16px; top: 124px; height: 156px; border-radius: 20px; background: var(--paper); box-shadow: inset 0 0 0 1px rgba(29, 25, 21, .1), 0 10px 24px -16px rgba(70, 45, 25, .3); }
.fb__rings { position: absolute; left: 14px; top: 14px; width: 128px; height: 128px; transform: rotate(-90deg); }
.fbr__t, .fbr__a { fill: none; stroke-width: 10; }
.fbr__a { stroke-linecap: round; }
.fbr__t.fbr--p { stroke: rgba(212, 71, 42, .14); } .fbr__a.fbr--p { stroke: var(--tomato); }
.fbr__t.fbr--f { stroke: rgba(91, 138, 46, .14); } .fbr__a.fbr--f { stroke: var(--pea); }
.fbr__t.fbr--b { stroke: rgba(231, 169, 58, .14); } .fbr__a.fbr--b { stroke: var(--butter); }
.fb__left { position: absolute; left: 14px; top: 14px; width: 128px; height: 128px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fb__left b { font: 800 22px/1 var(--f-label); font-variant-numeric: tabular-nums; }
.fb__left span { margin-top: 3px; font: 500 11px/1 var(--f-text); color: var(--muted); }
.fb__leg { position: absolute; left: 158px; right: 14px; top: 26px; display: grid; gap: 14px; }
.fb__leg li { display: grid; grid-template-columns: 10px 1fr; column-gap: 8px; align-items: center; }
.fb__leg i { width: 10px; height: 10px; border-radius: 50%; grid-row: span 2; }
.fb__leg span { font: 500 13px/1.1 var(--f-text); color: var(--muted); }
.fb__leg b { grid-column: 2; font: 800 16px/1.15 var(--f-label); font-variant-numeric: tabular-nums; }
.fbl--p { background: var(--tomato); } .fbl--f { background: var(--pea); } .fbl--b { background: var(--butter); }
.fb__carbs { position: absolute; left: 16px; right: 16px; top: 294px; height: 86px; border-radius: 20px; background: var(--paper); box-shadow: inset 0 0 0 1px rgba(29, 25, 21, .1); padding: 14px 16px; }
.fb__ct { display: flex; justify-content: space-between; font: 600 15px/1.2 var(--f-text); }
.fb__fun { font: 500 13px/1.2 var(--f-text); color: var(--muted); }
.fb__bar { display: flex; gap: 3px; height: 10px; margin-top: 12px; border-radius: 5px; overflow: hidden; background: var(--oat); }
.fb__bar i { display: block; height: 100%; }
.fbb--fuel { width: 19%; background: #C9A26A; } .fbb--fiber { width: 6%; background: var(--pea); } .fbb--fun { width: 0; }
.fb__keys { display: flex; gap: 14px; margin-top: 8px; font: 500 11px/1 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fb__meals { position: absolute; left: 16px; right: 16px; top: 394px; border-radius: 20px; background: var(--paper); box-shadow: inset 0 0 0 1px rgba(29, 25, 21, .1); padding: 4px 14px; }
.fb__meals li { display: flex; align-items: center; gap: 12px; height: 60px; }
.fb__meals li + li { border-top: 1px solid rgba(29, 25, 21, .08); }
.fb__meals img, .fb__ph { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; flex: none; background: var(--oat); }
.fb__meals span:not(.fb__ph) { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.fb__meals i { font: 600 10px/1 var(--f-label); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fb__meals b { font: 600 16px/1.2 var(--f-text); }
.fb__add b { color: var(--muted); }
.fb__meals em { font: 500 13px/1 var(--f-text); font-style: normal; color: var(--muted); }
.fb__ok { width: 20px; height: 20px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fb__ok circle { fill: var(--ink); stroke: none; }
.fb__ok path { stroke: var(--paper); }
.fb__steps { position: absolute; left: 16px; right: 16px; top: 606px; display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px; font: 500 13px/1 var(--f-text); color: var(--muted); }
.fb__steps b { font: 800 15px/1 var(--f-label); color: var(--ink); font-variant-numeric: tabular-nums; }
.fb__tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 83px; padding-bottom: 26px; display: flex; justify-content: space-around; align-items: center; border-top: 1px solid rgba(29, 25, 21, .1); background: rgba(246, 240, 230, .92); font: 600 10.5px/1 var(--f-text); color: var(--muted); }
.fb__tabs span { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.fb__tabs svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fb__tabs .on { color: var(--ink); }
.phone.c780 .fb__card { top: 116px; height: 148px; }
.phone.c780 .fb__rings, .phone.c780 .fb__left { width: 120px; height: 120px; }
.phone.c780 .fb__carbs { top: 276px; }
.phone.c780 .fb__meals { top: 372px; }
.phone.c780 .fb__meals li { height: 54px; }
.phone.c780 .fb__steps { top: 554px; }

/* ---------------------------------------------------------------------------------------------- 7 · Why this works: the Offer Facts label */
.c7__line { font: 600 24px/1.12 var(--f-serif); font-variation-settings: "opsz" 48; letter-spacing: -.012em; }
.lab__p {
  position: relative; background: var(--paper); border: 1.5px solid var(--ink); padding: 6px; color: var(--ink);
  font-family: var(--f-label); box-shadow: 0 22px 40px -26px rgba(70, 45, 25, .4);
}
.lr { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0 3px; font: 800 15px/1.2 var(--f-label); }
.lr .rule { position: absolute; left: 0; right: 0; top: 0; display: block; background: var(--ink); transform-origin: 0 50%; }
.rule--thin { height: 1px; }
.rule--med { height: 5px; }
.rule--thick { height: 10px; }
.lr:has(> .rule--thin) { padding-top: 5px; }
.lr__v { text-align: right; flex: none; }
.lr__k { min-width: 0; }
.lr--title { padding: 0 0 2px; }
.lr--title .lr__x { font: 900 40px/1 var(--f-label); font-stretch: 100%; letter-spacing: -.02em; }
.lr--rule { padding: 0; height: 10px; }
.lr--rule .rule--med { top: 2.5px; }
.lr--rule:has(.rule--med) { height: 10px; }
.lr--rule:has(.rule--thick) { height: 13px; }
.lr--rule .rule--thick { top: 1px; }
.lr--amt { padding: 0 0 1px; }
.lr--amt .lr__x { font: 800 13px/1.2 var(--f-label); }
.lr--inv { align-items: center; padding: 0 0 2px; }
.lr--inv .lr__k { font: 900 26px/1.05 var(--f-label); letter-spacing: -.01em; }
.lr--inv .lr__v b { display: inline-block; font: 900 44px/1 var(--f-label); letter-spacing: -.02em; }
.lr--lv { flex-direction: column; align-items: stretch; gap: 2px; }
.lr__d { font: 500 15px/1.3 var(--f-text); color: var(--ink); text-wrap: balance; }
.lr--time .lr__k { text-wrap: balance; }
.lr--risk { padding-top: 13px; }
.lr--risk .lr__x { font: 500 13px/1.3 var(--f-text); }

.lab__slot, .lab__head, .lab__shade { display: none; }
html.st-on .c7 { position: absolute; z-index: 25; left: var(--gut); top: 14px; width: calc(100% - 2 * var(--gut)); }
html.st-on .c7__h { margin-top: 7px; }
html.st-on .c7__s { margin-top: 8px; }
html.st-on .lab { position: absolute; z-index: 24; left: 0; top: 0; width: 300px; transform-origin: 0 0; visibility: hidden; }
html.st-on .lab__win { position: relative; }
html.st-on .lab__p { transform-origin: 0 0; }
html.st-on .lab.is-on { will-change: transform, opacity; }
html.st-on .lab.is-on .lab__p { will-change: transform; }
html.st-on .lr > *:not(.rule) { opacity: 0; }
html.st-on .lab .rule { transform: scaleX(0); }
/* T7 · the thermal printer (ELEVATION S4.3): an ink lip whose top edge is the slot mouth; born at the phone's bottom
   edge at J67, it moves under the label and prints it */
html.st-on .lab__slot {
  display: block; position: absolute; left: -14px; right: -14px; top: 0; height: 14px; border-radius: 7px; transform-origin: 50% 0;
  background: linear-gradient(#0B0907 0 3px, var(--ink) 3px);
  box-shadow: inset 0 1px 0 rgba(255, 253, 248, .18), 0 10px 18px -10px rgba(70, 45, 25, .4);
  opacity: 0;
}
/* the print head: a carriage on the slot line */
html.st-on .lab__head { display: block; position: absolute; left: 0; top: 0; width: 14px; height: 3px; border-radius: 1px; background: var(--ink); opacity: 0; }
/* the paper's shade just above the mouth (it stays with the printer, not with the paper) */
html.st-on .lab__shade { display: block; position: absolute; left: 0; top: 0; height: 18px; background: linear-gradient(to top, rgba(70, 45, 25, .10), rgba(70, 45, 25, 0)); opacity: 0; pointer-events: none; }
html.st-on .lab.is-on .lab__slot, html.st-on .lab.is-on .lab__head { will-change: transform, opacity; }
html.st-on .c7__line { position: absolute; z-index: 25; left: var(--gut); right: var(--gut); top: 0; }
html.st-on.st-desk .c7 { left: 56px; width: 380px; }
html.st-on.st-desk .c7__h { margin-top: 12px; }
html.st-on.st-desk .c7__s { margin-top: 10px; }
html.st-on.st-desk .lr { font-size: 18px; padding: 5px 0 4px; }
html.st-on.st-desk .lr--risk { padding-top: 16px; }
html.st-on.st-desk .lr--title { padding: 0 0 2px; }
html.st-on.st-desk .lr--amt { padding: 0 0 1px; }
html.st-on.st-desk .lr--inv { padding: 0 0 2px; }
html.st-on.st-desk .lr--rule { padding: 0; }
html.st-on.st-desk .lr:has(> .rule--thin) { padding-top: 6px; }
html.st-on.st-desk .lr--title .lr__x { font-size: 56px; }
html.st-on.st-desk .lr--amt .lr__x { font-size: 14px; }
html.st-on.st-desk .lr--inv .lr__k { font-size: 32px; }
html.st-on.st-desk .lr--inv .lr__v b { font-size: 56px; }
html.st-on.st-desk .lr--lv { flex-direction: row; align-items: baseline; gap: 18px; }
html.st-on.st-desk .lr--lv .lr__k { flex: none; width: 120px; }
html.st-on.st-desk .lr--lv .lr__d { flex: 1; text-align: right; }
html.st-on.st-desk .c7__line { font-size: 36px; right: auto; }
/* desktop: the H2 on one line, and the line under the label on one line (its phrases never split anywhere) */
html.st-on.st-desk .c7__h, html.st-on.st-desk .c7__s, html.st-on.st-desk .c7__line { white-space: nowrap; }

/* ---------------------------------------------------------------------------------------------- 8 · The numbers (quiet) */
.eq { font: 500 20px/1.3 var(--f-text); color: var(--ink); }
.eq b { font: 700 1.05em/1 var(--f-label); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.005em; }
.eq__l { display: block; }
.c8__a, .c8__o { font: 400 15px/1.4 var(--f-text); color: var(--muted); }
html.st-on .c8 { position: absolute; z-index: 25; left: var(--gut); top: 0; width: calc(100% - 2 * var(--gut)); }
html.st-on .c8 > *, html.st-on .eq__l { opacity: 0; }
html.st-on .c8__ov { margin-bottom: 10px; }
html.st-on .c8__a { margin-top: 12px; }
html.st-on .c8__o { margin-top: 6px; }
html.st-on .c8__src { margin-top: 10px; }
html.st-on.st-desk .c8 { width: 600px; }
html.st-on.st-desk .eq { font-size: 26px; }
html.st-on.st-desk .eq__l { display: inline; }
html.st-on.st-desk .eq__l:nth-child(2)::after { content: ""; display: block; }
html.st-on.st-desk .c8__ov { font-size: 13px; }
html.st-on.st-desk .c8__src { font-size: 12px; }

/* ---------------------------------------------------------------------------------------------- 9 · Comment "GO" */
.dl__t { font: 600 26px/1.12 var(--f-serif); font-variation-settings: "opsz" 48; letter-spacing: -.012em; }
.dl__s { margin-top: 4px; font: 400 15px/1.35 var(--f-text); color: var(--muted); }
.deal { margin-top: 12px; }
.dl + .dl { margin-top: 18px; }
.c9__h { font: 600 clamp(28px, 8.4vw, 34px)/1.06 var(--f-serif); font-variation-settings: "opsz" 72; letter-spacing: -.015em; }
.c9__w1, .c9__w2 { display: inline-block; }
.c9bg { display: none; }
.gob {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px 0 3px; border-radius: 18px;
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair), 0 8px 18px -12px rgba(70, 45, 25, .32);
}
.gob__av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }
.gob__t { font: 600 16px/1 var(--f-text); color: var(--ink); }
.reply { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0 22px; }
.reply__faces { display: flex; flex: none; padding-top: 2px; }
.reply__faces img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px var(--paper); }
.reply__faces img + img { margin-left: -8px; }
.reply__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.reply__t b { font: 600 15px/1.25 var(--f-text); color: var(--ink); }
.reply__t span { font: 400 15px/1.3 var(--f-text); color: var(--muted); }
.c9__card { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.c9__card:focus { outline: none; }
.btn {
  display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; height: 56px; padding: 0 8px;
  border-radius: 16px; background: var(--ink); color: var(--paper); text-decoration: none; font: 600 14px/1.15 var(--f-text); letter-spacing: -.005em;
  transition: transform .14s var(--ease-out); touch-action: manipulation;
}
.btn:active { transform: scale(.97); }
.btn span { min-width: 0; }
@media (min-width: 380px) { .c9__card .btn span { white-space: nowrap; } }
html.st-desk .btn { font-size: 15px; }
.btn .ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn .ico__dot { stroke-width: 2.6; }
.btn--s { flex: 1; }
.field--9 .field__send { width: 44px; height: 44px; background: transparent; cursor: pointer; }
.field--9 .field__btn { width: 34px; height: 34px; border-radius: 50%; background: var(--oat); color: var(--faint); display: flex; align-items: center; justify-content: center; transition: background-color .16s linear, color .16s linear; }
.field--9 .field__send.on .field__btn { background: var(--tomato); color: var(--paper); }
/* the three rings close around the send button, concentric with it and entirely inside the 52 px field (the outer
   ring ends 1 px inside its edge, the inner one clears the 34 px button by .8 px); story.js fades them 400 ms after
   they close, leaving the clean button */
.sendr { position: absolute; left: -4px; top: -4px; width: 52px; height: 52px; max-width: none; max-height: none; flex: none; overflow: visible; pointer-events: none; display: none; }
.sendr__t, .sendr__a { fill: none; stroke-width: 1.8; }
.sendr__a { stroke-linecap: round; }
.sendr__t.sendr--p { stroke: rgba(212, 71, 42, .16); } .sendr__a.sendr--p { stroke: var(--tomato); }
.sendr__t.sendr--f { stroke: rgba(91, 138, 46, .16); } .sendr__a.sendr--f { stroke: var(--pea); }
.sendr__t.sendr--b { stroke: rgba(231, 169, 58, .2); } .sendr__a.sendr--b { stroke: var(--butter); }
.c9__foot { font: 400 15px/1.4 var(--f-text); color: var(--muted); }
html.st-on .c9 { position: absolute; z-index: 25; left: var(--gut); top: 0; width: calc(100% - 2 * var(--gut)); }
html.st-on .c9__ov, html.st-on .dl__t, html.st-on .dl__s { opacity: 0; }
html.st-on .c9__h { position: absolute; left: 0; right: 0; top: 0; }
html.st-on .c9r { position: absolute; z-index: 26; left: var(--gut); top: 0; width: calc(100% - 2 * var(--gut)); }
html.st-on .thread { position: absolute; left: 0; right: 0; top: 0; }
html.st-on .gob, html.st-on .reply { opacity: 0; }
html.st-on .gob { transform-origin: 0 50%; }
html.st-on .sc-9.is-on .gob, html.st-on .sc-9.is-on .reply, html.st-on .sc-9.is-on .btn { will-change: transform, opacity; }
html.st-on .c9__card { position: absolute; left: 0; right: 0; top: 0; margin: 0; pointer-events: auto; }
html.st-on .c9__card .btn { opacity: 0; pointer-events: none; }
html.st-on .c9__card .btn.live { pointer-events: auto; }
html.st-on .field--9 { position: absolute; left: 0; right: 0; top: 0; opacity: 0; pointer-events: none; }
html.st-on .sc-9.is-on .field--9 { will-change: transform, opacity; }
html.st-on .field--9.live { pointer-events: auto; }
html.st-on .field--9 .sendr { display: block; }
html.st-on .c9__foot { position: absolute; z-index: 25; left: var(--gut); right: var(--gut); top: 0; opacity: 0; }
html.st-on.st-desk .c9 { left: 56px; width: 560px; }
html.st-on.st-desk .c9__ov { font-size: 13px; }
html.st-on.st-desk .dl__t { font-size: 44px; }
html.st-on.st-desk .dl__s { font-size: 17px; margin-top: 8px; }
html.st-on.st-desk .dl + .dl { margin-top: 28px; }
html.st-on.st-desk .c9__h { font-size: 64px; }
html.st-on.st-desk .c9r { left: auto; width: 440px; }
html.st-on.st-desk .c9__foot { right: auto; }
html.st-on.st-desk .c9bg {
  display: block; position: absolute; z-index: 5; left: 0; top: 0; width: 600px; height: 600px; opacity: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: radial-gradient(closest-side, #000 52%, rgba(0, 0, 0, .55) 74%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 52%, rgba(0, 0, 0, .55) 74%, transparent 100%);
}
.c9bg__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }

/* ---------------------------------------------------------------------------------------------- the contact pill + sheet */
#dock {
  position: fixed; z-index: 900;
  right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transition: transform .28s var(--ease-ios), opacity .28s linear;
}
#dock.aside { transform: translate3d(0, calc(100% + 16px), 0); opacity: 0; pointer-events: none; }
.pill {
  display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 9px;
  border-radius: 24px; background: rgba(255, 253, 248, .96); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hair), var(--shadow);
  font: 600 15px/1 var(--f-text); text-decoration: none; white-space: nowrap;
  cursor: pointer; border: 0; touch-action: manipulation;
  transition: transform .14s var(--ease-out), opacity .2s linear;
}
.pill:active { transform: scale(.96); }
.pill__faces { display: flex; }
.pill__faces img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px var(--paper); }
.pill__faces img + img { margin-left: -8px; }
#dock.open .pill { opacity: 0; }
/* the autoplay control: bottom left, the contact pill keeps bottom right (as alan) */
#autoplay {
  position: fixed; z-index: 900; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transition: transform .28s var(--ease-ios), opacity .28s linear, visibility 0s;
}
html.js:not(.st-on) #autoplay, html.st-flat #autoplay, html.st-fail #autoplay { display: none; }
#autoplay.aside { transform: translate3d(0, calc(100% + 16px), 0); opacity: 0; pointer-events: none; visibility: hidden; transition: transform .28s var(--ease-ios), opacity .28s linear, visibility 0s linear .28s; }
.auto {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 9px; height: 48px; padding: 0 18px 0 11px;
  border-radius: 24px; background: rgba(255, 253, 248, .96); color: var(--ink); border: 0;
  box-shadow: inset 0 0 0 1px var(--hair), var(--shadow);
  font: 600 15px/1 var(--f-text); white-space: nowrap; cursor: pointer; touch-action: manipulation;
  transition: transform .14s var(--ease-out);
}
.auto:active { transform: scale(.96); }
.auto__i { width: 26px; height: 26px; border-radius: 50%; background: var(--tomato); color: var(--paper); display: grid; place-items: center; flex: none; }
.auto__i svg { width: 10px; height: 10px; fill: currentColor; display: block; }
.auto__i svg[fill="none"] { fill: none; width: 12px; height: 12px; }
.auto__bar { position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px; border-radius: 1px; background: var(--hair); overflow: hidden; }
.auto__bar i { display: block; width: 100%; height: 100%; background: var(--tomato); transform-origin: 0 50%; transform: scaleX(0); }
#autoplay:not(.is-on) .auto__bar { opacity: .55; }
#sheet-scrim { position: fixed; inset: 0; z-index: 950; background: rgba(29, 25, 21, .36); opacity: 0; transition: opacity .22s linear; }
#sheet-scrim.on { opacity: 1; }
#sheet {
  position: fixed; z-index: 960; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  max-width: 480px; margin: 0 auto; max-height: calc(100% - 24px); overflow: auto; overscroll-behavior: contain;
  padding: 22px 20px 20px; border-radius: 28px; background: var(--paper); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hair), 0 30px 80px -24px rgba(70, 45, 25, .55);
  transform: translate3d(0, 112%, 0); transition: transform .4s var(--ease-ios);
}
#sheet.on { transform: none; }
.sheet__grab { width: 38px; height: 5px; border-radius: 3px; background: rgba(29, 25, 21, .16); margin: -8px auto 14px; }
.sheet__x { position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); }
.sheet__h { font: 600 28px/1.1 var(--f-serif); font-variation-settings: "opsz" 48; letter-spacing: -.015em; padding-right: 40px; }
.sheet__s { margin-top: 6px; font: 400 15px/1.3 var(--f-text); color: var(--muted); }
.who { display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; row-gap: 12px; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); }
.who img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 2.5px var(--hair); }
.who__n { display: flex; flex-direction: column; gap: 3px; }
.who__n b { font: 600 17px/1.2 var(--f-text); }
.who__n span { font: 500 13px/1.2 var(--f-text); color: var(--muted); }
.who__b { grid-column: 1 / -1; display: flex; gap: 10px; }

/* ============================================================================================== static document
   (no JS, a script failed to load, or ?rm=1): the same words, the same order, readable, end states. */
html:not(.st-on) #stage { position: static; height: auto; overflow: visible; }
html:not(.st-on) .casc, html:not(.st-on) .cue, html:not(.st-on) .fx6, html:not(.st-on) .tubs, html:not(.st-on) .rep,
html:not(.st-on) .c9bg, html:not(.st-on) .phone__black, html:not(.st-on) .phone__edge, html:not(.st-on) .plat,
html:not(.st-on) .field__caret, html:not(.st-on) .clip__v, html:not(.st-on) .tile__v, html:not(.st-on) .isl__rings { display: none; }
html:not(.st-on) .sc { position: relative; padding: 72px var(--gut) 0; max-width: 760px; margin: 0 auto; }
html:not(.st-on) .sc-1 { padding-top: 0; }
html:not(.st-on) .s1hero { position: relative; margin: 0 calc(var(--gut) * -1); height: min(78vh, 720px); overflow: hidden; }
html:not(.st-on) .s1hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%; }
html:not(.st-on) .s1hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--cream-rgb), .94) 0, rgba(var(--cream-rgb), .7) 22%, rgba(var(--cream-rgb), 0) 44%, rgba(var(--cream-rgb), 0) 76%, var(--cream) 100%); }
html:not(.st-on) .c1 { position: relative; z-index: 2; margin-top: calc(min(78vh, 720px) * -1 + 20px); }
html:not(.st-on) .c1__ov { margin-bottom: 6px; }
html:not(.st-on) .c1__nm { font-size: clamp(44px, 11vw, 96px); }
html:not(.st-on) .c1__role { font-size: clamp(18px, 3.6vw, 28px); margin-top: 6px; }
/* the field sits 90 px higher than the hero's bottom so the contact pill rests on cream on the first screen */
html:not(.st-on) .field--1 { position: relative; z-index: 2; margin-top: calc(min(78vh, 720px) - 330px); margin-bottom: 80px; }
html:not(.st-on) .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
html:not(.st-on) .chips li { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 4px; border-radius: 18px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair); font: 600 16px/1 var(--f-text); }
html:not(.st-on) .chips li::before { content: ""; width: 28px; height: 28px; border-radius: 50%; background: var(--crust); }
html:not(.st-on) .cnt { margin-top: 24px; }
html:not(.st-on) .c1__line { margin-top: 26px; }
html:not(.st-on) .c1__src { margin-top: 10px; }
html:not(.st-on) .c2__ov, html:not(.st-on) .c3__ov, html:not(.st-on) .c4__ov { margin-bottom: 10px; }
html:not(.st-on) .c2__clip { margin: 8px 6px 24px; }
html:not(.st-on) .c2__h { margin-bottom: 12px; }
html:not(.st-on) .ing__r { padding: 4px 0; }
html:not(.st-on) .c2__close { margin-top: 26px; }
html:not(.st-on) .c2__src, html:not(.st-on) .c3__src { margin-top: 10px; }
html:not(.st-on) .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 16px; margin-top: 24px; }
html:not(.st-on) .tile .card { position: relative; margin: -16px auto 0; width: fit-content; max-width: 96%; font-size: 17px; transform: rotate(-1.5deg); }
html:not(.st-on) .tile:nth-child(even) .card { transform: rotate(1.5deg); }
html:not(.st-on) .card__s { font-size: 13px; }
html:not(.st-on) .c3__close { margin-top: 30px; }
html:not(.st-on) .key { margin: 0; }
html:not(.st-on) .c4__cap { margin-top: 18px; }
html:not(.st-on) .c5i { margin-bottom: 20px; }
html:not(.st-on) .c5i__h { margin-top: 6px; }
html:not(.st-on) .c5i__s { margin-top: 4px; }
html:not(.st-on) .steps { display: grid; gap: 16px; }
html:not(.st-on) .draft { margin-top: 18px; }
html:not(.st-on) .c6__h { margin-top: 6px; }
html:not(.st-on) .c6__s { margin-top: 4px; }
html:not(.st-on) .c6__hint { margin-top: 6px; display: none; }
/* the flat mode has the live phone: the hint shows beside it on desktop widths */
@media (min-width: 900px) { html.st-flat:not(.st-noapp) .c6__hint { display: block; } }
html:not(.st-on) .c6__after { margin-top: 22px; }
html:not(.st-on) .phone { position: relative; width: 393px; height: 852px; margin: 34px 0 calc(852px * -.28 + 10px) calc(50% - 196.5px); transform: scale(.72); transform-origin: 50% 0; }
html:not(.st-on) .phone__fb { border-radius: 55px; }
html:not(.st-on) .fx6 { display: none; }
html:not(.st-on) .c7__h { margin-top: 6px; }
html:not(.st-on) .c7__s { margin-top: 6px; }
html:not(.st-on) .lab { margin-top: 22px; max-width: 460px; }
html:not(.st-on) .c7__line { margin-top: 22px; }
html:not(.st-on) .c8__ov { margin-bottom: 8px; }
html:not(.st-on) .c8__a { margin-top: 10px; }
html:not(.st-on) .c8__o { margin-top: 6px; }
html:not(.st-on) .c8__src { margin-top: 10px; }
html:not(.st-on) .c9__ov { margin-bottom: 14px; }
html:not(.st-on) .c9__h { margin-top: 28px; }
html:not(.st-on) .c9r { margin-top: 24px; display: flex; flex-direction: column; }
/* the story’s end state: her GO posted, our reply, the card, then the field back to its placeholder (16 px apart) */
html:not(.st-on) .thread { order: 0; }
html:not(.st-on) .c9__card { order: 1; margin-top: 16px; }
html:not(.st-on) .field--9 { order: 2; margin-top: 16px; }
html:not(.st-on) .field--9 .field__send { cursor: default; }
html:not(.st-on) .c9__foot { margin-top: 28px; }
html:not(.st-on) .sc-9 { padding-bottom: 110px; }
@media (min-width: 760px) {
  html:not(.st-on) .sc-1 { max-width: 960px; display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); column-gap: 48px; align-items: start; padding-top: 40px; }
  html:not(.st-on) .s1hero { grid-column: 1; grid-row: 1 / span 6; margin: 0; height: auto; aspect-ratio: 9 / 16; border-radius: 28px; box-shadow: 0 0 0 8px var(--paper), var(--shadow); }
  html:not(.st-on) .s1hero::after { display: none; }
  html:not(.st-on) .sc-1 > *:not(.s1hero) { grid-column: 2; }
  html:not(.st-on) .c1 { margin-top: 0; }
  html:not(.st-on) .field--1 { margin-top: 28px; }
  html:not(.st-on) .tiles { grid-template-columns: repeat(4, 1fr); }
  html:not(.st-on) .c9__card { grid-template-columns: repeat(2, 1fr); }
}