/* REBOOT · for Fiona · the story.
   Her home gym at 7 am: warm ivory paper, aubergine ink, morning daylight from the top right, one plum accent.
   Instrument Serif for display, her verbatim lines and our replica of her on-screen serif; Manrope for text and UI.
   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: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; ascent-override: 85%; descent-override: 17%; line-gap-override: 0%;
  src: url("media/fonts/instrument-serif-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: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; ascent-override: 85%; descent-override: 17%; line-gap-override: 0%;
  src: url("media/fonts/instrument-serif-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; ascent-override: 85%; descent-override: 17%; line-gap-override: 0%;
  src: url("media/fonts/instrument-serif-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: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; ascent-override: 85%; descent-override: 17%; line-gap-override: 0%;
  src: url("media/fonts/instrument-serif-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("media/fonts/manrope-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: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("media/fonts/manrope-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* size-adjusted local fallbacks, visible during the swap only */
@font-face { font-family: "Instrument Serif Fallback"; src: local("Times New Roman"), local("Georgia"); size-adjust: 86%; ascent-override: 99%; descent-override: 20%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial"), local("Helvetica"), local("Roboto"); size-adjust: 104%; ascent-override: 102%; descent-override: 29%; }

:root {
  --ivory: #F5F0E8;
  --paper: #FFFDF9;
  --linen: #ECE4D8;
  --stone: #DCD2C4;
  --ink: #22161F;
  --muted: #6E6168;
  --faint: #A79BA1;
  --hair: rgba(34, 22, 31, .12);
  --plum: #7B2D63;
  --plum-deep: #5E2049;
  --plum-wash: #EFE3EB;
  --sage: #7F948B;
  --shadow: 0 18px 40px -18px rgba(50, 25, 40, .28);
  --ivory-rgb: 245, 240, 232;

  --f-serif: "Instrument Serif", "Instrument Serif Fallback", Georgia, "Times New Roman", serif;
  --f-sans: "Manrope", "Manrope Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, 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(--ivory); color: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0; background: var(--ivory); color: var(--ink);
  font: 500 17px/1.4 var(--f-sans);
  -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 { 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(--plum); 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: 700 15px/1.2 var(--f-sans); 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; }
.plum { color: var(--plum); }
.nw { white-space: nowrap; }

/* the overline and the source lines: Manrope 700 caps, +12% */
.ov { font: 700 11px/1.3 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.src { font: 700 11px/1.4 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
html.st-desk .ov, html.st-desk .src { font-size: 12px; }

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

/* the plate glyph, front view (cue, week strip, island) */
.pl__d { fill: var(--linen); }
.pl__r { fill: none; stroke: var(--stone); stroke-width: 1.2; }
.pl__h { fill: var(--ivory); stroke: var(--stone); stroke-width: 1.2; }

/* ---------------------------------------------------------------------------------------------- light and grain */
.grain {
  position: fixed; inset: 0; z-index: 800; pointer-events: none; opacity: .035;
  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='7' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 .133  0 0 0 0 .086  0 0 0 0 .122  0 0 0 1.3 -.36'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}
.light { display: none; }
html.st-on .light {
  display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(90% 70% at 92% -6%, rgba(255, 250, 242, .6) 0, rgba(255, 250, 242, .3) 38%, rgba(255, 250, 242, 0) 72%);
}

/* ============================================================================================== 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, 3900vh) + 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(--ivory);
}
/* a chapter is a scene of the stage: 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 .s1hero, html.st-on .kw { display: none; }
/* every positioned part of a chapter: story.js sets left, top and width at layout */
html.st-on .c1, html.st-on .bio, html.st-on .cue, html.st-on .inbox, html.st-on .cnt, html.st-on .c1__line,
html.st-on .c2__clip, html.st-on .c2, html.st-on .c3, html.st-on .db, html.st-on .tile, html.st-on .c3__end,
html.st-on .c4__ov, html.st-on .key, html.st-on .c4__cap, html.st-on .c5i, html.st-on .step, html.st-on .draft,
html.st-on .c6, html.st-on .c6__after, html.st-on .c7, html.st-on .thr, html.st-on .c7__end, html.st-on .c8,
html.st-on .c9, html.st-on .c9r, html.st-on .c9__foot { position: absolute; left: 0; top: 0; }

/* ---------------------------------------------------------------------------------------------- the reel (her 8-week plan, 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; will-change: transform, opacity, clip-path;
}
html.st-on .reel__frame {
  position: absolute; inset: -8px; border-radius: 36px;
  background: var(--paper); box-shadow: 0 30px 60px -28px rgba(50, 25, 40, .38), inset 0 0 0 1px var(--hair); opacity: 0;
}
html.st-on .reel__m { position: absolute; inset: 0; overflow: hidden; background: var(--linen); }
html.st-on.st-desk .reel__m { border-radius: 28px; }
.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; }
/* the ivory veil on the top 55% of S only (phones): the rows and the counters read; it never reaches her text */
.reel__veil { display: none; }
html.st-on .reel__veil {
  display: block; position: absolute; left: 0; right: 0; top: 0; height: var(--veilH, 55%); z-index: 2; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--ivory-rgb), .78) 0, rgba(var(--ivory-rgb), .70) 72%, rgba(var(--ivory-rgb), 0) 100%);
}
/* phones: the full-bleed hero gets a top ivory scrim (0 to 30% of S) so the title reads */
html.st-on .scrim {
  display: block; position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--S) * .30); z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(var(--ivory-rgb), .97) 0, rgba(var(--ivory-rgb), .9) 45%, rgba(var(--ivory-rgb), .6) 72%, rgba(var(--ivory-rgb), 0) 100%);
}
/* phones: an ivory base under her text (it starts below her last line), where the line of chapter 1 and the cue sit */
html.st-on .scrim--b { top: 80%; height: 20%; background: linear-gradient(180deg, rgba(var(--ivory-rgb), 0) 0, rgba(var(--ivory-rgb), .94) 16px, var(--ivory) 44px); }
html.st-on.st-desk .scrim--b { display: none; }

/* ---------------------------------------------------------------------------------------------- 1 · DM "REBOOT" */
.c1__pre { font: 500 15px/1.35 var(--f-sans); color: var(--muted); }
.c1__ov { margin-top: 10px; }
.c1__ov2 .ch { opacity: 0; }
.c1__ov2 .ch.on { opacity: 1; }
html:not(.st-on) .c1__ov2 .ch { opacity: 1; }
.c1__h { display: block; margin-top: 6px; }
.c1__nm, .c1__role { display: block; }
.c1__nm { font: 400 56px/.96 var(--f-serif); letter-spacing: -.01em; color: var(--ink); transform-origin: 0 0; }
.c1__role { margin-top: 4px; font: 600 18px/1.25 var(--f-sans); color: var(--ink); }
html.st-desk .c1__nm { font-size: 96px; }
html.st-desk .c1__role { font-size: 28px; margin-top: 10px; }
html.st-desk .c1__pre { font-size: 15px; }
html.st-on .c1 { z-index: 6; width: calc(100% - 2 * var(--gut)); }
html.st-on .c1__mask { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; transform-origin: 0 0; }

/* her bio card */
.bio { position: relative; padding: 12px 14px 12px; border-radius: 18px; }
.bio__bg { position: absolute; inset: 0; border-radius: 18px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair), var(--shadow); }
.bio__top { position: relative; display: flex; align-items: center; gap: 9px; height: 32px; }
.bio__av { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; transform-origin: 0 50%; }
.bio__hd { font: 700 14px/1 var(--f-sans); color: var(--ink); }
.bio__l { position: relative; margin-top: 6px; font: 500 17px/1.3 var(--f-sans); color: var(--ink); white-space: nowrap; }
.bio__l .ch { opacity: 0; }
.bio__l .ch.on { opacity: 1; }
html:not(.st-on) .bio__l .ch { opacity: 1; }
html.st-on .bio { z-index: 7; max-width: 340px; }
html.st-on .bio__top, html.st-on .bio__l, html.st-on .bio__av { will-change: transform; }
html.st-desk .bio { max-width: 420px; padding: 14px 18px 16px; }
html.st-desk .bio__top { height: 40px; gap: 11px; }
html.st-desk .bio__av { width: 40px; height: 40px; }
html.st-desk .bio__hd { font-size: 16px; }
html.st-desk .bio__l { font-size: 20px; margin-top: 8px; }

/* the scroll cue: the plate fills clockwise with the first screen of scroll */
.cue { display: none; }
html.st-on .cue { display: flex; align-items: center; gap: 9px; z-index: 8; opacity: 0; }
.cue__p { width: 22px; height: 22px; flex: none; overflow: visible; }
.cue__a { fill: none; stroke: var(--plum); stroke-width: 10; opacity: 0; }
.cue__w { font: 700 11px/1.3 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
html.st-on:not(.rmos) .cue.bob .cue__p { animation: st-bob 1.6s ease-in-out infinite; }
@keyframes st-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* the bubbles (chapters 1, 4, 7, 9): incoming (written to her) and outgoing (written by her) */
.bi, .bo { display: inline-flex; align-items: center; min-height: 42px; padding: 11px 16px; border-radius: 22px; font: 600 16px/1.25 var(--f-sans); }
.bi { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair), var(--shadow); border-bottom-left-radius: 6px; }
.bo { background: var(--plum); color: var(--paper); border-bottom-right-radius: 6px; }
html.st-desk .bi, html.st-desk .bo { font-size: 17px; }

/* the inbox (T1): a pool of rows, transform and opacity only */
.inbox { display: none; }
html.st-on .inbox { display: block; z-index: 5; height: 0; }
.row { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 10px; width: 100%; opacity: 0; will-change: transform, opacity; }
.row__av { flex: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.row__av svg { width: 22px; height: 22px; fill: none; stroke: rgba(34, 22, 31, .4); stroke-width: 1.8; stroke-linecap: round; }
.row__av--0 { background: var(--stone); } .row__av--1 { background: var(--linen); } .row__av--2 { background: rgba(123, 45, 99, .18); }
.row__av--3 { background: rgba(127, 148, 139, .30); } .row__av--4 { background: rgba(34, 22, 31, .12); }
.row .bi { flex: none; }
.row__now { font: 500 12px/1 var(--f-sans); color: var(--muted); }
.row__dot { margin-left: auto; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--plum); }

/* the lifted REBOOT: a plum copy of the word lifts out of her bio line, becomes her bubble, then the first inbox row */
.lift { display: none; }
html.st-on .lift { display: block; position: absolute; left: 0; top: 0; z-index: 9; pointer-events: none; opacity: 0; will-change: transform, opacity; transform-origin: 0 0; }
.lift__bg { position: absolute; inset: 0; background: var(--plum); opacity: 0; }
.lift__t1, .lift__t2 { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; white-space: nowrap; font: 500 17px/1.3 var(--f-sans); }
.lift__t1 { color: var(--plum); }
.lift__t2 { color: var(--paper); font-weight: 600; font-size: 16px; opacity: 0; }
html.st-desk .lift__t2 { font-size: 17px; }
.lift__in { position: absolute; inset: 0; display: flex; justify-content: center; opacity: 0; }

/* the counters card */
.cnt { border-radius: 18px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair), var(--shadow); padding: 4px 14px 12px; }
.cnt__r { display: flex; align-items: center; gap: 12px; height: 56px; }
.cnt__r + .cnt__r { border-top: 1px solid var(--hair); }
.cnt__th { flex: none; width: 40px; height: 50px; border-radius: 8px; object-fit: cover; background: var(--linen); }
.cnt__tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cnt__n { font: 800 28px/1.15 var(--f-sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--ink); }
.cnt__o { font: 500 15px/1.2 var(--f-sans); color: var(--ink); }
.cnt__src { margin-top: 10px; }
html.st-on .cnt { z-index: 6; opacity: 0; transform-origin: 50% 0; will-change: transform, opacity; }
html.st-on:not(.st-desk) .cnt { padding: 2px 12px 10px; }
html.st-on:not(.st-desk) .cnt__r { height: 46px; }
html.st-on:not(.st-desk) .cnt__th { width: 32px; height: 40px; border-radius: 7px; }
html.st-on:not(.st-desk) .cnt__n { font-size: 20px; }
html.st-on:not(.st-desk) .cnt__tx { gap: 2px; }
/* short phones: 30 px rows, no thumbnails, the number and its object on one line */
html.st-on.st-short .cnt__r { height: 32px; }
html.st-on.st-short .cnt__th { display: none; }
html.st-on.st-short .cnt__tx { flex-direction: row; align-items: baseline; gap: 6px; }
html.st-on.st-short .cnt__n { font-size: 17px; }
html.st-on.st-short .cnt__o { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.st-on.st-desk .cnt { padding: 6px 18px 14px; }
html.st-on.st-desk .cnt__n { font-size: 20px; }
html.st-on.st-desk .cnt__v { font-size: 40px; }
html.st-on.st-desk .cnt__tx { gap: 4px; }
html.st-on.st-desk .cnt__r { height: 80px; }
html.st-on.st-desk .cnt__src { position: absolute; left: 0; right: 0; top: calc(100% + var(--srcdy, 120px)); margin: 0; }

.c1__line { font: 400 28px/1.08 var(--f-serif); letter-spacing: -.005em; color: var(--ink); }
.c1__l1, .c1__l2 { display: block; }
html.st-on .c1__line { z-index: 6; }
html.st-on:not(.st-desk) .c1__line { text-shadow: 0 0 18px rgba(var(--ivory-rgb), .85); }
html.st-desk .c1__line { font-size: 40px; }

/* the line of light (J12 · J23): the bio card thins into it, it underlines the chapter 2 H2, it becomes the handle */
.ln { display: none; }
html.st-on .ln { display: block; position: absolute; left: 0; top: 0; z-index: 9; width: 100px; height: 3px; border-radius: 2px; background: var(--ink); opacity: 0; transform-origin: 0 50%; pointer-events: none; will-change: transform, opacity; }

/* ---------------------------------------------------------------------------------------------- 2 · What it's made of */
.clip { position: relative; overflow: hidden; border-radius: 18px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair), var(--shadow); }
.clip__img, .clip__v { position: absolute; left: 5px; top: 5px; width: calc(100% - 10px); height: calc(100% - 10px); object-fit: cover; border-radius: 13px; max-width: none; background: var(--linen); }
.clip__v { opacity: 0; transition: opacity .3s linear; }
.clip__v.on { opacity: 1; }
html.st-on .c2__clip { z-index: 4; opacity: 0; will-change: transform, opacity; }
html.st-on .c2__clip:not(.in) .clip__img, html.st-on .c2__clip:not(.in) .clip__v { visibility: hidden; }
.c2__h { font: 400 36px/1.04 var(--f-serif); color: var(--ink); }
.c2__h1, .c2__h2 { display: block; }
.c2__h2 { margin-top: 10px; }
.c2__ov { margin-bottom: 8px; }
html.st-desk .c2__h { font-size: 56px; }
html.st-desk .c2__h2 { margin-top: 14px; }
.ing { margin-top: 18px; }
.ing__r { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; }
.ing__r + .ing__r { margin-top: 10px; }
.ck { width: 22px; height: 22px; grid-row: 1; align-self: center; overflow: visible; }
.ck circle { fill: var(--linen); }
.ck path { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ing__w { grid-column: 2; font: 400 26px/1.08 var(--f-serif); color: var(--ink); white-space: nowrap; }
.ing__v { grid-column: 3; font: 800 22px/1 var(--f-sans); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; text-align: right; }
.ing__s { grid-column: 2 / 4; margin-top: 2px; font: 500 15px/1.3 var(--f-sans); color: var(--muted); }
html.st-desk .ing__w { font-size: 34px; }
html.st-desk .ing__v { font-size: 32px; }
html.st-desk .ing__r { grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 16px; }
html.st-desk .ing__r + .ing__r { margin-top: 16px; }
html.st-desk .ck { width: 28px; height: 28px; }
.c2__close { margin-top: 26px; font: 400 30px/1.06 var(--f-serif); color: var(--ink); }
.c2__c1, .c2__c2 { display: block; }
.c2__src { margin-top: 12px; }
html.st-desk .c2__close { font-size: 44px; margin-top: 34px; }
html.st-on .c2 { z-index: 5; }
html.st-on .c2__ov, html.st-on .c2__close, html.st-on .c2__src { opacity: 0; }
html.st-on .ing__r { opacity: 0; will-change: transform, opacity; }
html.st-on .ing__w, html.st-on .ing__s { will-change: transform, opacity; }
html.st-on .c2__close { position: absolute; left: 0; right: 0; top: 0; margin: 0; }
html.st-on .c2__src { position: absolute; left: 0; right: 0; top: 0; margin: 0; }

/* ---------------------------------------------------------------------------------------------- 3 · Your rules */
.c3__h { font: 400 36px/1.04 var(--f-serif); margin-top: 8px; }
.c3__h1, .c3__h2 { display: block; }
html.st-desk .c3__h { font-size: 64px; }
html.st-desk .c3__h1, html.st-desk .c3__h2 { display: inline; }
html.st-on .c3 { z-index: 5; width: calc(100% - 2 * var(--gut)); }
html.st-on .c3__ov { opacity: 0; }
html.st-desk .c3 { text-align: center; }

/* the dumbbell: an ink handle, two collars, up to five plates a side (edge on) */
.db { display: none; }
html.st-on .db { display: block; z-index: 6; height: 40px; opacity: 0; }
.db__svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.db__bar { fill: var(--ink); }
.db__kn path { stroke: var(--paper); stroke-width: 1.5; stroke-linecap: round; opacity: .55; }
.db__col { fill: var(--ink); }
.db__pl { position: absolute; top: 0; height: 100%; width: 0; }
.db__p { position: absolute; top: 0; height: 100%; width: 8px; border-radius: 2.5px; }
.db__p--g { background: var(--linen); box-shadow: inset 0 0 0 1px var(--stone); }
.db__p--l { background: var(--plum); box-shadow: inset 0 0 0 1px rgba(255, 253, 249, .35); opacity: 0; will-change: transform, opacity; }
.db__p--l::after { content: ""; position: absolute; left: 3px; right: 3px; top: 12%; bottom: 12%; border-radius: 1px; background: rgba(255, 253, 249, .18); }

.tiles { display: block; }
.tile__f { position: relative; border-radius: 14px; background: var(--paper); padding: 6px; box-shadow: inset 0 0 0 1px var(--hair), var(--shadow); }
.tile__m { position: relative; overflow: hidden; border-radius: 9px; aspect-ratio: 4 / 5; background: var(--linen); }
.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 card, in her style: white serif on a translucent ink plate, centred lines */
.card {
  padding: .4em .7em; border-radius: 10px; background: rgba(34, 22, 31, .62); color: #fff; text-align: center;
  font: 400 22px/1.1 var(--f-serif); text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
.card__t { font: inherit; }
.card__s { margin-top: 7px; font: 500 15px/1.3 var(--f-sans); text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
.card--20 { font-size: 20px; }
html.st-desk .card { font-size: 20px; }
html.st-on .tile { z-index: 10; opacity: 0; will-change: transform, opacity; }
html.st-on .tile .card { position: absolute; left: 50%; top: 0; width: max-content; will-change: transform, opacity; opacity: 0; }
html.st-on .tile .card__sh { position: absolute; left: 10%; right: 10%; bottom: -8px; height: 16px; border-radius: 50%; background: radial-gradient(closest-side, rgba(34, 22, 31, .35), rgba(34, 22, 31, 0)); opacity: 0; pointer-events: none; }
.c3__q { font: italic 400 24px/1.16 var(--f-serif); color: var(--ink); }
.c3__lab { margin-top: 12px; }
.c3__src { margin-top: 6px; }
html.st-desk .c3__q { font-size: 36px; }
html.st-on .c3__end { z-index: 5; text-align: center; }
html.st-on .c3__q, html.st-on .c3__lab, html.st-on .c3__src { opacity: 0; }

/* ---------------------------------------------------------------------------------------------- 4 · The reply */
.key { font: 400 clamp(36px, 10.4vw, 44px)/1.02 var(--f-serif); letter-spacing: -.005em; }
.key__1, .key__2 { display: block; }
html.st-desk .key { font-size: 80px; }
.c4__cap { font: 400 26px/1.1 var(--f-serif); }
html.st-desk .c4__cap { font-size: 40px; }
html.st-on .c4__ov { z-index: 8; opacity: 0; }
html.st-on .key { z-index: 8; }
html.st-on .c4__cap { z-index: 16; opacity: 0; }
html.st-on:not(.st-desk) .c4__ov, html.st-on:not(.st-desk) .key, html.st-on:not(.st-desk) .c4__cap { text-align: center; }

/* T4 · the bubble that becomes the icon (its design box: 100 x 60, scaled by story.js) */
.fly, .fly__glow, .tdot { display: none; }
html.st-on .fly { display: block; position: absolute; left: 0; top: 0; z-index: 17; width: 100px; height: 60px; pointer-events: none; opacity: 0; transform-origin: 50% 50%; will-change: transform, opacity; }
.fly__b { position: absolute; inset: 0; background: var(--plum); clip-path: inset(9px 0 9px 0 round 21px 21px 6px 21px); -webkit-clip-path: inset(9px 0 9px 0 round 21px 21px 6px 21px); }
.fly__g { position: absolute; inset: 0; background: linear-gradient(180deg, var(--plum) 0%, var(--plum-deep) 100%); opacity: 0; }
.fly__pl { position: absolute; left: 20px; top: 0; width: 60px; height: 60px; overflow: visible; }
.fly__pl circle { fill: none; stroke: var(--paper); stroke-width: 4.2; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; }
.fly__pl .fly__rim { stroke-width: 1.4; opacity: .7; }
.fly__w { position: absolute; left: 0; top: 0; width: 100px; height: 60px; display: flex; align-items: center; justify-content: center; font: 800 16px/1 var(--f-sans); letter-spacing: .04em; color: var(--paper); transform-origin: 50% 50%; }
.fly__lab { position: absolute; left: 0; top: 65px; width: 100px; text-align: center; font: 500 12px/1.2 var(--f-sans); color: var(--ink); opacity: 0; }
html.st-on .fly__glow {
  display: block; position: absolute; left: 0; top: 0; z-index: 7; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(123, 45, 99, .14), rgba(123, 45, 99, .06) 52%, rgba(123, 45, 99, 0)); will-change: transform, opacity;
}
/* a touch dot (chapters 4 and 5) */
html.st-on .tdot {
  display: block; position: absolute; left: 0; top: 0; z-index: 19; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: rgba(34, 22, 31, .22); box-shadow: 0 0 0 1.5px rgba(255, 253, 249, .75), 0 6px 14px -6px rgba(34, 22, 31, .5); will-change: transform, opacity;
}

/* ---------------------------------------------------------------------------------------------- 5 · REBOOT, screen by screen */
.c5i__h { font: 400 36px/1.04 var(--f-serif); margin-top: 8px; }
.c5i__s { margin-top: 6px; font: 500 17px/1.35 var(--f-sans); color: var(--muted); }
html.st-desk .c5i__h { font-size: 56px; }
html.st-desk .c5i__s { font-size: 20px; }
.step__t { font: 800 15px/1.25 var(--f-sans); color: var(--ink); }
.step__s { margin-top: 2px; font: 500 15px/1.3 var(--f-sans); color: var(--muted); }
html.st-desk .step__t { font-size: 20px; }
html.st-desk .step__s { font-size: 17px; margin-top: 4px; }
.draft { font: 500 15px/1.3 var(--f-sans); color: var(--muted); }
html.st-on .c5i { z-index: 8; width: calc(100% - 2 * var(--gut)); }
html.st-on .c5i > * { opacity: 0; }
html.st-on .c5i__h { transform-origin: 0 0; }
html.st-on .step { z-index: 8; visibility: hidden; }
html.st-on .step.on { visibility: inherit; }
html.st-on .draft { z-index: 8; opacity: 0; white-space: nowrap; }
html.st-on .draft.draft--v { transform-origin: 0 0; }

/* T5 · the week strip */
.wk { display: none; }
html.st-on .wk { display: flex; position: absolute; left: 0; top: 0; z-index: 9; gap: 6px; opacity: 0; pointer-events: none; }
html.st-on.st-desk .wk { flex-direction: column; gap: 10px; }
.wk__c { position: relative; width: 30px; height: 38px; border-radius: 10px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair); font: 700 11px/1 var(--f-sans); }
html.st-desk .wk__c { width: 44px; height: 52px; border-radius: 12px; font-size: 13px; }
.wk__l, .wk__on, .wk__dn { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: inherit; }
.wk__l { color: var(--faint); }
.wk__on { background: var(--plum); color: var(--paper); opacity: 0; }
.wk__on svg { width: 11px; height: 11px; fill: none; stroke: var(--paper); stroke-width: 2.2; }
.wk__dn { color: var(--ink); opacity: 0; }
.wk__dn svg { width: 12px; height: 12px; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.wk__dn path { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.st-desk .wk__on svg, html.st-desk .wk__dn svg { width: 14px; height: 14px; }
.wk__c--7 { box-shadow: inset 0 0 0 1.5px var(--plum); }

/* ---------------------------------------------------------------------------------------------- 6 · Your turn */
.c6__h { font: 400 36px/1.04 var(--f-serif); margin-top: 8px; }
.c6__s { margin-top: 6px; font: 500 17px/1.35 var(--f-sans); }
.c6__hint { margin-top: 18px; font: 500 15px/1.35 var(--f-sans); color: var(--muted); }
html.st-desk .c6__h { font-size: 64px; }
html.st-desk .c6__s { font-size: 20px; margin-top: 10px; }
.c6__after { font: 400 24px/1.12 var(--f-serif); }
.c6__a1, .c6__a2 { display: block; }
html.st-desk .c6__after { font-size: 34px; }
html.st-on .c6 { z-index: 25; width: calc(100% - 2 * var(--gut)); }
html.st-on .c6 > * { opacity: 0; }
html.st-on:not(.st-desk) .c6__hint { display: none; }
html.st-on .c6__after { z-index: 25; }
.fx6 { display: none; }
html.st-on .fx6 { display: block; position: absolute; inset: 0; z-index: 12; pointer-events: none; visibility: hidden; }
.fx6__glow, .fx6__ring { position: absolute; left: 0; top: 0; display: block; opacity: 0; will-change: transform, opacity; }
.fx6__glow { width: 760px; height: 760px; margin: -380px 0 0 -380px; border-radius: 50%; background: radial-gradient(closest-side, rgba(123, 45, 99, .10), rgba(123, 45, 99, .05) 50%, rgba(123, 45, 99, 0)); }
.fx6__ring { width: 300px; height: 300px; margin: -150px 0 0 -150px; overflow: visible; max-width: none; }
.fx6__ring circle { fill: none; stroke: var(--plum); stroke-width: 6; }
html.st-on .fx6:not(.is-on) { display: none; }
/* the scroll reminder (SPEC 2 D point 3) */
.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: 26px; 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: 36px; height: 36px; border-radius: 50%; background: var(--linen); }
.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: 700 15px/1.2 var(--f-sans); }
.nudge__t span { font: 500 15px/1.25 var(--f-sans); color: var(--muted); }
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 stone 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(#060506, #060506) padding-box,
    linear-gradient(160deg, #E2D9D1 0%, #D6CCC4 10%, #BDB2A9 26%, #A39890 40%, #C3B8AF 54%, #CCC2B9 62%, #ADA299 78%, #A39890 88%, #CCC2B9 100%) border-box;
  box-shadow: 0 0 0 .6px rgba(50, 25, 40, .22), inset 0 0 0 .6px rgba(255, 255, 255, .08);
  pointer-events: none;
}
/* the top edge catches the morning 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 morning shadow on the ivory */
.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(50, 25, 40, .35), 0 12px 24px -16px rgba(50, 25, 40, .2); 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 #050405;
  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(110, 97, 90, .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, #8F847C 0%, #C8BEB5 40%, #D9D0C8 55%, #9B9088 100%);
  box-shadow: 0 0 0 .6px rgba(50, 25, 40, .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, #8F847C 0%, #C8BEB5 40%, #D9D0C8 55%, #9B9088 100%); }
.phone__screen {
  position: absolute; inset: 0; border-radius: var(--R); overflow: hidden; overflow: clip; background: var(--ivory);
  transform: translateZ(0);
}
#reboot-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(242deg, 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 hardware fades in, then the home screen fades up */
.phone__black { display: none; }
html.st-on .phone__black { display: block; position: absolute; inset: 0; z-index: 30; background: #060506; 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, 249, .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%, #3A3846 0, #141218 38%, #060507 62%, #000 72%);
}
.isl__pl { position: absolute; left: 9px; top: 6.5px; width: 24px; height: 24px; overflow: visible; opacity: 0; }
.isl__t { fill: rgba(255, 253, 249, .14); }
.isl__a { fill: none; stroke: var(--plum); stroke-width: 9.4; opacity: 0; }
.isl__r { fill: none; stroke: rgba(255, 253, 249, .75); stroke-width: 1.3; }
.isl__h { fill: #000; stroke: rgba(255, 253, 249, .75); stroke-width: 1.2; }

/* the static Today screen (Day 1): only when the app is missing, or without the experience */
.phone__fb { display: none; position: absolute; inset: 0; background: var(--ivory); color: var(--ink); font-family: var(--f-sans); }
html.st-noapp .phone__fb, html[data-noapp] .phone__fb, html:not(.st-on):not(.st-flat) .phone__fb { display: block; }
html.st-noapp #reboot-app, html[data-noapp] #reboot-app, html:not(.st-on):not(.st-flat) #reboot-app { display: none; }
html.no-js img[data-src] { display: none; }
.fb__status { position: absolute; left: 0; right: 0; top: 0; height: 54px; }
.fb__time { position: absolute; left: 38px; top: 18px; font: 700 16px/20px var(--f-sans); 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: 64px; font: 700 11px/1 var(--f-sans); letter-spacing: .12em; color: var(--muted); }
.fb__h { position: absolute; left: 16px; top: 82px; font: 400 32px/1.05 var(--f-serif); }
.fb__m { position: absolute; left: 16px; top: 122px; font: 500 15px/1.2 var(--f-sans); color: var(--muted); }
.fb__ex { position: absolute; left: 16px; right: 16px; top: 156px; border-radius: 20px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair); padding: 2px 14px; }
.fb__ex li { display: flex; align-items: center; gap: 12px; height: 72px; }
.fb__ex li + li { border-top: 1px solid var(--hair); }
.fb__ex img, .fb__pic { flex: none; width: 64px; height: 48px; border-radius: 10px; object-fit: cover; background: var(--linen); }
.fb__pic { display: flex; align-items: center; justify-content: center; }
.fb__pic svg { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.fb__tx { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.fb__tx b { font: 400 20px/1.1 var(--f-serif); }
.fb__tx i { font: 500 13px/1.2 var(--f-sans); font-style: normal; color: var(--muted); }
.fb__ok { flex: none; width: 22px; height: 22px; 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__todo { flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--stone); }
.fb__hills { position: absolute; left: 16px; right: 16px; top: 534px; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-radius: 20px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair); font: 700 16px/1 var(--f-sans); }
.fb__hills b { font: 800 15px/1 var(--f-sans); color: var(--muted); }
.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 var(--hair); background: rgba(245, 240, 232, .92); font: 600 10.5px/1 var(--f-sans); 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__ex li { height: 64px; }
.phone.c780 .fb__hills { top: 494px; }

/* ---------------------------------------------------------------------------------------------- 7 · What you get */
.c7__h { font: 400 36px/1.04 var(--f-serif); margin-top: 8px; }
.c7__s { margin-top: 6px; font: 500 17px/1.35 var(--f-sans); color: var(--muted); }
html.st-desk .c7__h { font-size: 64px; white-space: nowrap; }
html.st-desk .c7__s { font-size: 20px; margin-top: 10px; }
.thr__hd { display: flex; align-items: center; gap: 10px; }
.faces { display: flex; flex: none; }
.faces img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px var(--paper); }
.faces img + img { margin-left: -8px; }
.thr__n { display: flex; flex-direction: column; gap: 2px; }
.thr__n b { font: 700 15px/1.2 var(--f-sans); }
.thr__n span { font: 500 13px/1.2 var(--f-sans); color: var(--muted); }
.obs { margin-top: 14px; }
.ob { position: relative; display: block; width: fit-content; max-width: 84%; padding: 11px 16px; border-radius: 22px; border-bottom-left-radius: 6px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair), var(--shadow); font: 600 16px/1.3 var(--f-sans); }
.ob + .ob { margin-top: 8px; }
html.st-desk .ob { font-size: 17px; }
html.st-compact .ob { padding: 9px 14px; font-size: 15px; }
html.st-compact .ob + .ob { margin-top: 6px; }
.dots { display: none; }
.stamp { display: inline-block; font-weight: 800; }
html.st-on .c7 { z-index: 8; width: calc(100% - 2 * var(--gut)); }
html.st-on .c7 > * { opacity: 0; }
html.st-on .c7__h, html.st-on .c7__s { transform-origin: 0 0; }
html.st-on .thr { z-index: 7; transform-origin: 50% 0; will-change: transform, opacity; }
html.st-on .thr__hd { opacity: 0; }
html.st-on .ob { opacity: 0; will-change: clip-path, opacity; }
html.st-on .ob__t { display: block; will-change: clip-path, opacity; }
html.st-on .dots { display: flex; position: absolute; left: 16px; top: 0; height: 42px; align-items: center; gap: 5px; opacity: 0; }
html.st-compact.st-on .dots { left: 14px; height: 38px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
html.st-on:not(.rmos) .dots.bob i { animation: st-dot .9s ease-in-out infinite; }
html.st-on:not(.rmos) .dots.bob i:nth-child(2) { animation-delay: .15s; }
html.st-on:not(.rmos) .dots.bob i:nth-child(3) { animation-delay: .3s; }
@keyframes st-dot { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-3px); } }
html.st-on .stamp { transform-origin: 50% 60%; }
html.st-on .fade7 { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--S) * .26); z-index: 9; pointer-events: none; opacity: 0; background: linear-gradient(180deg, var(--ivory) 0, rgba(var(--ivory-rgb), .92) 40%, rgba(var(--ivory-rgb), 0) 100%); }
.fade7 { display: none; }
html.st-on .fade7 { display: block; }
.c7__close { font: 400 28px/1.08 var(--f-serif); }
.c7__c1, .c7__c2 { display: block; }
.c7__c2 { margin-top: 6px; }
.c7__src { margin-top: 12px; }
html.st-desk .c7__close { font-size: 44px; }
html.st-on .c7__end { z-index: 10; }
html.st-on .c7__src { opacity: 0; }

/* ---------------------------------------------------------------------------------------------- 8 · The numbers (quiet) */
.eq { margin-top: 10px; font: 500 22px/1.36 var(--f-sans); color: var(--ink); }
.eq b { font-weight: 700; }
.eq__l { display: block; }
html.st-desk .eq { font-size: 28px; }
html.st-desk .eq__l { display: inline; }
html.st-desk .eq__l:nth-child(2)::after { content: "\A"; white-space: pre; }
.c8__a, .c8__o { margin-top: 10px; font: 500 15px/1.35 var(--f-sans); color: var(--muted); }
.c8__o { margin-top: 4px; }
.c8__src { margin-top: 10px; }
html.st-on .c8 { z-index: 10; }
html.st-on .c8 > *, html.st-on .eq__l { opacity: 0; }
html.st-on .eq > .eq__l { will-change: transform, opacity; }

/* ---------------------------------------------------------------------------------------------- 9 · DM "GO" */
.deal { margin-top: 12px; }
.dl + .dl { margin-top: 16px; }
.dl__t { font: 400 30px/1.08 var(--f-serif); }
.dl__s { margin-top: 3px; font: 500 15px/1.35 var(--f-sans); color: var(--muted); }
html.st-desk .dl__t { font-size: 48px; }
html.st-desk .dl__s { font-size: 17px; margin-top: 6px; }
html.st-desk .dl + .dl { margin-top: 26px; }
.c9__h { margin-top: 22px; font: 400 clamp(36px, 10.4vw, 44px)/1.02 var(--f-serif); letter-spacing: -.005em; }
.c9__w1, .c9__w2 { display: block; }
html.st-desk .c9__h { font-size: 80px; margin-top: 34px; }
.gob { display: flex; flex-direction: column; align-items: flex-end; }
.gob__b { display: inline-flex; align-items: center; min-height: 42px; padding: 11px 18px; border-radius: 22px; border-bottom-right-radius: 6px; background: var(--plum); color: var(--paper); font: 600 16px/1.25 var(--f-sans); }
.gob__seen { margin-top: 4px; font: 500 12px/1.2 var(--f-sans); color: var(--muted); }
.reply { margin-top: 12px; }
.rb { position: relative; display: block; width: fit-content; margin-top: 8px; padding: 11px 16px; border-radius: 22px; border-bottom-left-radius: 6px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair), var(--shadow); font: 600 16px/1.3 var(--f-sans); }
html.st-desk .gob__b, html.st-desk .rb { font-size: 17px; }
.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: 700 14px/1.15 var(--f-sans);
  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; }
/* the DM field: a paper pill, her avatar, the text with its plum caret, the send button */
.field { position: relative; 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); margin-top: 16px; }
.field__av { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--linen); }
.field__tx { position: relative; flex: 1; min-width: 0; height: 24px; font: 500 17px/24px var(--f-sans); }
.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 { opacity: 0; }
.field__ty .ch.on { opacity: 1; }
.field__caret { position: absolute; left: 0; top: 2px; width: 2px; height: 20px; border-radius: 1px; background: var(--plum); display: none; }
html:not(.st-on) .field__ty { display: none; }
.field__send { position: relative; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.field__btn { position: absolute; inset: 0; border-radius: 50%; background: var(--linen); color: var(--faint); display: flex; align-items: center; justify-content: center; transition: background-color .16s linear, color .16s linear; }
.field__arr { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.field__send.on .field__btn { background: var(--plum); color: var(--paper); }
/* the plate ring that closes around the send button: concentric with it, entirely inside the 52 px field */
.sendr { position: absolute; left: -6px; top: -6px; width: 48px; height: 48px; max-width: none; max-height: none; overflow: visible; pointer-events: none; display: none; }
.sendr__a { fill: none; stroke: var(--plum); stroke-width: 2.4; stroke-linecap: round; opacity: 0; }
.c9__foot { font: 500 15px/1.4 var(--f-sans); color: var(--muted); }
html.st-on .c9 { z-index: 25; 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 .dl__t, html.st-on .dl__s, html.st-on .c9__h { transform-origin: 0 0; will-change: transform, opacity; }
html.st-on .dl, html.st-on .c9__h { position: absolute; left: 0; right: 0; top: 0; margin: 0; }
html.st-on .deal { margin: 0; }
html.st-on .c9r { z-index: 26; width: calc(100% - 2 * var(--gut)); }
html.st-on .thread { position: absolute; left: 0; right: 0; top: 0; }
html.st-on .gob__b, html.st-on .gob__seen, html.st-on .reply .thr__hd, html.st-on .rb, html.st-on .rb__t { opacity: 0; }
html.st-on .gob__b { transform-origin: 100% 100%; will-change: transform, opacity; }
html.st-on .rb__t { display: block; }
html.st-on .rb .dots { left: 16px; }
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; will-change: transform, opacity; }
html.st-on .c9__card .btn.live { pointer-events: auto; }
html.st-on .field { position: absolute; left: 0; right: 0; top: 0; margin: 0; opacity: 0; pointer-events: none; will-change: transform, opacity; }
html.st-on .field.live { pointer-events: auto; }
html.st-on .field .sendr { display: block; }
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; } }
html.st-on .c9__foot { z-index: 25; opacity: 0; }
html.st-desk .c9 { width: auto; }
.c9bg { display: none; }
html.st-on.st-desk .c9bg {
  display: block; position: absolute; z-index: 5; left: 0; top: 0; width: 600px; height: 340px; opacity: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: radial-gradient(closest-side, #000 50%, rgba(0, 0, 0, .5) 74%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 50%, rgba(0, 0, 0, .5) 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, 249, .96); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hair), var(--shadow);
  font: 700 15px/1 var(--f-sans); 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, 249, .96); color: var(--ink); border: 0;
  box-shadow: inset 0 0 0 1px var(--hair), var(--shadow);
  font: 700 15px/1 var(--f-sans); 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(--plum); 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(--plum); transform-origin: 0 50%; transform: scaleX(0); }
#autoplay:not(.is-on) .auto__bar { opacity: .55; }
.auto-off { opacity: 0 !important; visibility: hidden !important; }
#sheet-scrim { position: fixed; inset: 0; z-index: 950; background: rgba(34, 22, 31, .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(50, 25, 40, .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(34, 22, 31, .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: 400 32px/1.05 var(--f-serif); padding-right: 40px; }
.sheet__s { margin-top: 6px; font: 500 15px/1.3 var(--f-sans); 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: 700 17px/1.2 var(--f-sans); }
.who__n span { font: 500 13px/1.2 var(--f-sans); 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) .cue, html:not(.st-on) .fx6, html:not(.st-on) .wk, html:not(.st-on) .fly, html:not(.st-on) .fly__glow,
html:not(.st-on) .tdot, html:not(.st-on) .lift, html:not(.st-on) .ln, html:not(.st-on) .inbox, html:not(.st-on) .db,
html:not(.st-on) .c9bg, html:not(.st-on) .phone__black, html:not(.st-on) .phone__edge, html:not(.st-on) .fade7,
html:not(.st-on) .field__caret, html:not(.st-on) .clip__v, html:not(.st-on) .tile__v, html:not(.st-on) .isl__pl,
html:not(.st-on) .nudge, html:not(.st-on) .dots, html:not(.st-on) .sendr { display: none; }
html:not(.st-on) .sc { position: relative; padding: 72px var(--gut) 0; max-width: 760px; margin: 0 auto; }
/* phones: her whole 9:16 frame (her text at 56 to 79% of it, never covered); our title and her bio card sit in its top
   third, on the ivory scrim; everything else follows the frame */
html:not(.st-on) .sc-1 { padding-top: 0; position: relative; }
html:not(.st-on) .s1hero { position: relative; margin: 0 calc(var(--gut) * -1); aspect-ratio: 9 / 16; overflow: hidden; }
html:not(.st-on) .s1hero img { width: 100%; height: 100%; object-fit: cover; }
html:not(.st-on) .s1hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--ivory-rgb), .96) 0, rgba(var(--ivory-rgb), .8) 26%, rgba(var(--ivory-rgb), 0) 44%, rgba(var(--ivory-rgb), 0) 88%, var(--ivory) 100%); }
html:not(.st-on) .c1 { position: absolute; z-index: 2; left: var(--gut); right: var(--gut); top: 12px; }
html:not(.st-on) .c1__nm { font-size: 56px; }
html:not(.st-on) .bio { position: absolute; z-index: 2; left: var(--gut); top: 180px; max-width: 340px; }
html:not(.st-on) .kw { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
html:not(.st-on) .kw li { display: flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 20px 20px 20px 6px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair); font: 600 16px/1 var(--f-sans); }
html:not(.st-on) .cnt { margin-top: 24px; max-width: 420px; }
html:not(.st-on) .c1__line { margin-top: 26px; }
html:not(.st-on) .c2__clip { margin: 0 0 24px; aspect-ratio: 16 / 9; max-width: 640px; }
html:not(.st-on) .c2__clip .clip__img { position: absolute; }
html:not(.st-on) .c3 { margin-bottom: 8px; }
html:not(.st-on) .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 16px; margin-top: 24px; }
html:not(.st-on) .tile .card { position: relative; z-index: 1; margin: 10px auto 0; width: fit-content; max-width: 100%; font-size: 18px; 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: 15px; }
html:not(.st-on) .c3__end { margin-top: 34px; }
html:not(.st-on) .c4__ov { margin-bottom: 10px; }
html:not(.st-on) .c4__cap { margin-top: 18px; }
html:not(.st-on) .c5i { margin-bottom: 20px; }
html:not(.st-on) .steps { display: grid; gap: 16px; }
html:not(.st-on) .draft { margin-top: 18px; }
html:not(.st-on) .c6__hint { display: none; }
@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) .thr { margin-top: 22px; max-width: 520px; }
html:not(.st-on) .c7__end { margin-top: 26px; }
html:not(.st-on) .c8__ov { margin-bottom: 8px; }
html:not(.st-on) .c9__ov { margin-bottom: 14px; }
html:not(.st-on) .c9r { margin-top: 24px; display: flex; flex-direction: column; max-width: 460px; }
html:not(.st-on) .gob__b { align-self: flex-end; }
html:not(.st-on) .rb { margin-top: 8px; }
html:not(.st-on) .c9__card { order: 1; margin-top: 16px; }
html:not(.st-on) .field { order: 2; margin-top: 16px; }
html:not(.st-on) .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, 380px) 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, html:not(.st-on) .bio { position: relative; left: auto; right: auto; top: auto; }
  html:not(.st-on) .c1__nm { font-size: clamp(56px, 8vw, 96px); }
  html:not(.st-on) .bio { margin-top: 18px; }
  html:not(.st-on) .kw { margin-top: 24px; }
  html:not(.st-on) .tiles { grid-template-columns: repeat(3, 1fr); }
}