/* Dr. Dana's Health Class — the story (developer B).
   Warm paper, daylight, soft pastel cards, one rose accent. Fraunces for titles and numbers, Instrument Sans for the
   rest, Caveat only for a few handwritten margin notes (Lessons 2 and 4).
   html.da-on   = the experience (story.js running).
   html.da-flat = ?rm=1, the flat reduced mode: the readable document (the phone stays usable).
   Without either, the page is a readable static document (no JS, or a script failed to load). */

@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 300 650; font-display: swap;
  src: url("media/fonts/fraunces-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: "Fraunces"; font-style: normal; font-weight: 300 650; font-display: swap;
  src: url("media/fonts/fraunces-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: "Fraunces"; font-style: italic; font-weight: 300 650; font-display: swap;
  src: url("media/fonts/fraunces-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: "Fraunces"; font-style: italic; font-weight: 300 650; font-display: swap;
  src: url("media/fonts/fraunces-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: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap;
  src: url("media/fonts/instrument-sans-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 Sans"; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap;
  src: url("media/fonts/instrument-sans-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: "Caveat"; font-style: normal; font-weight: 500 600; font-display: swap;
  src: url("media/fonts/caveat-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;
}

:root {
  /* the palette (names from the order form) */
  --paper: #FBF6EE;
  --paper-2: #F4ECDF;
  --card: #FFFDF9;
  --ink: #2A2421;
  --muted: #7A6E66;
  --line: rgba(42, 36, 33, .12);
  --butter: #F5E6A8;
  --blush: #F2C9C2;
  --lavender: #D9D1EF;
  --sky: #CFE0EE;
  --rose: #D9566F;
  --rose-ink: #B93D57;          /* the accent for small text and white-on-rose buttons (AA); --rose stays for numerals, strokes, ticks */
  --muted-2: #6B5F57;           /* muted text on the paper-2 wells (AA) */
  --margin: #EBA9A9;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --hand: "Caveat", "Bradley Hand", cursive;
  --shadow: 0 18px 40px -18px rgba(70, 40, 30, .25);
  --shadow-s: 0 10px 24px -14px rgba(70, 40, 30, .28);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-ios: cubic-bezier(.32, .72, 0, 1);
  --gut: 20px;
  --mx: 0px;
  --S: 100vh;
  --LH: 100vh;
  --t-xs: 12px;
  --t-s: 15px;
  --t-m: 17px;
  --d-s: clamp(23px, 6.4vw, 34px);
  --d-m: clamp(32px, 9vw, 58px);
  color-scheme: light;
}
@supports (height: 100svh) { :root { --S: 100svh; --LH: 100lvh; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--t-s)/1.45 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  font-optical-sizing: auto;
}
p, h1, h2, h3, ol, ul, li, figure, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
mark { background: none; color: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--rose); 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;
  background: var(--ink); color: var(--paper); font-weight: 600; text-decoration: none; transform: translateY(-160%);
}
.skip:focus-visible { transform: none; }
.skip--try { border: 0; font: 600 15px/1.2 var(--sans); cursor: pointer; }
.skip--try[hidden] { display: none; }
.sr-story { display: none; }
html.da-on .sr-story { display: block; }

/* ---------------------------------------------------------------------------------------------- paper */
.grain {
  position: fixed; inset: 0; z-index: 800; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n' x='0' y='0'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='11' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 .35  0 0 0 0 .25  0 0 0 0 .18  0 0 0 1.6 -.35'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}
/* the notebook margin: one thin rose line down the left (desktop and tablets) */
.margin { display: none; }
@media (min-width: 760px) {
  :root { --mx: 52px; }
  .margin { display: block; position: fixed; z-index: 0; top: 0; bottom: 0; left: var(--mx); width: 1px; background: var(--margin); opacity: .8; pointer-events: none; }
}

/* ---------------------------------------------------------------------------------------------- shared type */
.lab { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .7em; row-gap: 2px; position: relative; }
.lab__k { font: 600 11.5px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.lab__t { font: 400 italic 19px/1.2 var(--serif); color: var(--ink); letter-spacing: -.005em; }
/* on phones: a short margin rule beside each chapter label */
.lab::before { content: ""; position: absolute; left: -10px; top: 1px; width: 1px; height: 14px; background: var(--margin); }
@media (min-width: 760px) { .lab::before { display: none; } }
.ch__t { font: 400 var(--d-m)/1.04 var(--serif); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }

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

html.da-boot *, html.da-boot *::before, html.da-boot *::after { transition: none !important; }
html.da-on #run { position: relative; height: calc(var(--runL, 1300vh) + var(--LH)); }
html.da-on #stage {
  position: -webkit-sticky; position: sticky; top: 0;
  height: 100vh; height: var(--LH);
  overflow: hidden; overflow: clip;
}
html.da-on .sc { position: absolute; inset: 0; pointer-events: none; }
html.da-on .feed { display: none; }

/* ---------------------------------------------------------------------------------------------- 1 · first day of class */
html.da-on .sc-open { z-index: 6; }
.op__t {
  font: 380 var(--tF, clamp(44px, 12.8vw, 96px))/1.0 var(--serif);
  letter-spacing: -.022em; color: var(--ink);
}
.op__name { white-space: normal; }
.op__syl {
  display: block; margin-top: .5em; font: 400 var(--sylF, .36em)/1 var(--serif); letter-spacing: .005em;
  color: var(--muted); white-space: nowrap;
}
@media (min-width: 700px) { .op__t { max-width: 5.6em; } }
html.da-on .op__syl .ch--dot { position: relative; display: inline-block; width: .82em; color: transparent; }
html.da-on .op__syl .ch--dot::before { content: ""; position: absolute; left: .04em; top: .54em; width: .62em; height: 2px; border-radius: 1px; background: var(--rose); }
.op__row { display: flex; align-items: flex-start; gap: var(--rowG, 16px); margin-top: var(--opGap1, 22px); }
.op__q { flex: 1; min-width: 0; padding-top: 4px; }
.op__qt { font: 400 italic var(--qF, 21px)/1.24 var(--serif); color: var(--ink); text-indent: -.36em; text-wrap: pretty; }
.op__src { margin-top: 9px; font: 500 13px/1.3 var(--sans); color: var(--muted); letter-spacing: .01em; }
.op__slot { flex: none; width: var(--slotW, 148px); height: var(--slotH, 206px); }
.op__key { margin-top: var(--opGap2, 20px); font: 400 var(--keyF, 24px)/1.2 var(--serif); letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
.op__k1, .op__k2 { display: block; }
.op__k2 { margin-top: .14em; font-style: italic; color: var(--rose); }

html.da-on .op { position: absolute; left: var(--opL, var(--gut)); top: var(--opTop, 60px); width: var(--opW, calc(100% - 2 * var(--gut))); will-change: transform; }
html.da-on .op__q, html.da-on .op__k1, html.da-on .op__k2 { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .7s linear, transform .9s var(--ease); }
html.da-on .op__q.in, html.da-on .op__k1.in, html.da-on .op__k2.in { opacity: 1; transform: none; }
html.da-on.fast .op__q, html.da-on.fast .op__k1, html.da-on.fast .op__k2 { transition-duration: .25s; }
html.da-on .op__t .ch { visibility: hidden; }
html.da-on .op__t .ch.on { visibility: inherit; }
.op__caret { display: none; }
html.da-on .op__caret {
  display: block; position: absolute; left: 0; top: 0; width: 3px; height: 40px; z-index: 2;
  background: var(--rose); border-radius: 2px; opacity: 0;
}
html.da-on .op__caret.on { opacity: 1; }
html.da-on .op__caret.gone { opacity: 0; transition: opacity .4s linear; }
html.da-on:not(.rmos) .op__caret.blink { animation: da-blink 1.06s steps(1) infinite; }
@keyframes da-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* her portrait card, pinned to the syllabus */
.hero { position: relative; }
.hero__card {
  position: absolute; inset: 0; border-radius: 22px; background: var(--card);
  box-shadow: 0 1px 0 rgba(70, 40, 30, .06), 0 22px 44px -20px rgba(70, 40, 30, .34);
}
.hero__tape {
  position: absolute; left: 50%; top: -12px; width: 76px; height: 24px; margin-left: -38px;
  background: rgba(245, 230, 168, .86); transform: rotate(-4deg);
  box-shadow: 0 1px 2px rgba(70, 40, 30, .08);
  clip-path: polygon(3% 8%, 97% 0, 100% 50%, 96% 100%, 4% 94%, 0 46%);
}
.hero__media {
  position: absolute; left: var(--hp, 8px); top: var(--hp, 8px); width: calc(100% - 2 * var(--hp, 8px));
  aspect-ratio: 4 / 5; border-radius: 15px; overflow: hidden; background: var(--paper-2);
  transform-origin: 50% 50%;
}
.hero__in { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; }
.hero__v, .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero__img { color: transparent; font-size: 0; }   /* no alt text flash while it loads */
.hero__v { z-index: 1; }
.hero__cap {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--capH, 34px);
  display: flex; align-items: center; justify-content: center;
  font: 600 12px/1.2 var(--sans); letter-spacing: .02em; color: var(--ink); white-space: nowrap;
}
html.da-on .hero {
  position: absolute; left: 0; top: 0; width: var(--heroW, 148px); height: var(--heroH, 206px);
  opacity: 0; visibility: hidden;
}
html.da-on .hero__card { transform: rotate(var(--tilt, -2deg)); transform-origin: 50% 50%; }
html.da-on .hero.is-in { opacity: 1; visibility: visible; transition: opacity .8s linear; }
html.da-on .hero.is-in .hero__card { animation: da-pin .9s var(--ease) both; }
html.da-on.fast .hero.is-in { transition-duration: .25s; }
html.da-on.fast .hero.is-in .hero__card { animation-duration: .25s; }
@keyframes da-pin { from { transform: translate3d(0, 16px, 0) rotate(calc(var(--tilt, -2deg) + 3deg)); } to { transform: rotate(var(--tilt, -2deg)); } }
html.da-on .hero.is-free .hero__media { will-change: transform; }

.cue { display: none; }
html.da-on .cue {
  position: absolute; left: var(--opL, var(--gut)); top: var(--cueTop, calc(var(--S) - 110px));
  display: flex; align-items: center; gap: 12px;
  color: var(--muted); font: 600 var(--t-xs)/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  opacity: 0; transition: opacity .6s linear;
}
html.da-on .cue.on { opacity: 1; }
html.da-on .cue.gone { opacity: 0; transition-duration: .25s; }
.cue__track { position: relative; width: 1.5px; height: 42px; border-radius: 1px; background: rgba(217, 86, 111, .18); overflow: hidden; }
.cue__track i { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; border-radius: 1px; background: var(--rose); transform: translateY(-13px); }
html.da-on:not(.rmos) .cue.on:not(.gone) .cue__track i { animation: da-cue 1.8s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes da-cue {
  0% { transform: translateY(16px); opacity: 0; }
  25% { opacity: 1; }
  80% { transform: translateY(-42px); opacity: 1; }
  100% { transform: translateY(-42px); opacity: 0; }
}

/* ---------------------------------------------------------------------------------------------- 2 · the wall (her feed) */
html.da-on .wall {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1;
  visibility: hidden; opacity: 0;
}
.wall__cols { position: absolute; inset: 0; transition: filter .6s var(--ease); }
html.da-on .wall.is-soft .wall__cols { filter: blur(2.4px); }
.wc { position: absolute; left: 0; top: 0; will-change: transform; }
.tile {
  position: absolute; left: 0; top: 0; width: var(--tw, 118px); height: var(--th, 158px);
  border-radius: var(--tr, 14px); overflow: hidden; background: var(--paper-2);
  box-shadow: 0 1px 0 rgba(70, 40, 30, .05);
}
.tile.is-live { transform: translateZ(0); }
.tile img, .tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile video { z-index: 1; opacity: 0; transition: opacity .35s linear; }
.tile video.on { opacity: 1; }
html.da-on .wall.is-still .tile video { opacity: 0; transition-duration: .5s; }
.wall.is-off .tile.is-fl > * { visibility: hidden; }
.wall.is-off .tile.is-fl { background: transparent; box-shadow: none; }
.wall .tile.is-hero { background: transparent; box-shadow: none; }
.wall__dim { position: absolute; inset: 0; background: var(--paper); opacity: 0; pointer-events: none; }

/* the counters card */
html.da-on .sc-l1 { z-index: 8; }
.l1 {
  position: relative; z-index: 2;
  background: var(--card); border-radius: 26px; box-shadow: var(--shadow), 0 1px 0 rgba(70, 40, 30, .05);
  padding: 18px 20px 20px;
}
html.da-on .l1 { position: absolute; z-index: 3; left: var(--l1L, var(--gut)); top: var(--l1Top, 50%); width: var(--l1W, calc(100% - 2 * var(--gut))); opacity: 0; visibility: hidden; will-change: transform, opacity; box-shadow: none; transform-origin: 50% 0; }
.l1__sh { display: none; }
html.da-on .l1__sh {
  display: block; position: absolute; z-index: 2; left: var(--l1L, var(--gut)); top: var(--l1Top, 50%);
  width: var(--l1W, calc(100% - 2 * var(--gut))); height: var(--l1H, 300px); border-radius: 26px;
  box-shadow: var(--shadow), 0 1px 0 rgba(70, 40, 30, .05); transform-origin: 50% 0;
  opacity: 0; visibility: hidden; pointer-events: none; will-change: transform, opacity;
}
.l1__lab { margin-bottom: 14px; }
.l1__nums { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.cnt--b { flex: none; }
.cnt { min-width: 0; }
.cnt--a .cnt__n { min-width: max-content; }
.cnt--b { text-align: right; }
.cnt__n {
  font: 400 var(--cntF, 46px)/1 var(--serif); color: var(--ink); letter-spacing: -.02em;
  font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
}
html.da-on .cnt__n { height: 1.1em; line-height: 1.1em; }
.cnt--b .cnt__n { display: flex; justify-content: flex-end; }
.cnt__t { margin-top: 6px; font: 500 var(--cntT, 14.5px)/1.3 var(--sans); color: var(--ink); max-width: 11em; }
.cnt--b .cnt__t { margin-left: auto; color: var(--muted); }
html.da-on .cnt { opacity: 0; will-change: transform, opacity; }
.od { display: inline-flex; align-items: flex-start; }
.od-d { display: inline-block; height: 1.1em; overflow: hidden; text-align: center; }
.od-s { display: block; will-change: transform; }
.od-s > span { display: block; height: 1.5em; line-height: 1.1em; }
.od-c { display: inline-block; height: 1.1em; line-height: 1.1em; }
.od-sp { display: inline-block; width: .22em; }
.od-w { display: inline-block; line-height: 1.1em; }

.bar { margin-top: 16px; }
.bar__track { position: relative; height: 8px; margin-top: 34px; border-radius: 6px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
.bar__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 6px; background: var(--rose); transform-origin: 0 50%; transform: scaleX(.25); }
.bar__tick { position: absolute; left: 25%; top: -5px; bottom: -5px; width: 1.5px; margin-left: -.75px; border-radius: 1px; background: var(--rose); }
.bar__q { position: absolute; left: 25%; bottom: 13px; transform: translateX(-50%); font: 500 italic 16px/1 var(--serif); color: var(--rose-ink); white-space: nowrap; }
html.da-on .bar__fill { transform: scaleX(0); }
html.da-on .bar__q, html.da-on .bar__tick { opacity: 0; }
.bar__quote { margin-top: 14px; }
.bar__quote p { font: 400 italic var(--bqF, 17px)/1.3 var(--serif); color: var(--ink); text-wrap: pretty; text-indent: -.36em; }
.bar__quote footer { margin-top: 5px; font: 500 13px/1.3 var(--sans); color: var(--muted); }
html.da-on .bar__quote { opacity: 0; }

/* her followers' comments */
.com {
  position: relative; display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; row-gap: 3px;
  padding: 13px 16px 14px 13px; border-radius: 20px; background: var(--card);
  box-shadow: var(--shadow-s), 0 1px 0 rgba(70, 40, 30, .05);
}
.com__av {
  grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 50%; background: var(--c, var(--blush));
  display: flex; align-items: center; justify-content: center;
  font: 600 13px/1 var(--sans); color: var(--ink);
}
.com__h { display: flex; align-items: center; gap: 8px; min-width: 0; font: 400 13px/1.3 var(--sans); color: var(--muted); }
.com__h b { font-weight: 600; color: var(--ink); }
.com__likes { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.com__likes svg, .hw__likes svg { width: 12px; height: 11px; fill: currentColor; }
.com__t { font: 400 14.5px/1.42 var(--sans); color: var(--ink); text-wrap: pretty; }
html.da-on .coms { position: absolute; inset: 0; z-index: 1; }
html.da-on .com { position: absolute; left: 0; top: 0; width: var(--comW, 300px); visibility: hidden; will-change: transform, opacity; }

/* ---------------------------------------------------------------------------------------------- 3 · lesson 2: the "do" part */
html.da-on .sc-l2 { z-index: 9; }
html.da-on .l2 { position: absolute; left: var(--l2L, var(--gut)); top: var(--l2Top, 24px); width: var(--l2W, calc(100% - 2 * var(--gut))); visibility: hidden; will-change: transform; }
.l2__lab { margin-bottom: 14px; }
.hw__card { position: relative; }
.hw__top {
  position: relative; z-index: 2; padding: 15px 18px 16px; background: var(--card);
  border-radius: 24px; box-shadow: var(--shadow), 0 1px 0 rgba(70, 40, 30, .05);
  transition: border-radius .25s var(--ease);
}
.hw__card.is-open .hw__top { border-radius: 24px 24px 0 0; }
.hw__h { display: flex; align-items: center; gap: 10px; font: 400 14px/1.3 var(--sans); color: var(--muted); }
.hw__h b { color: var(--ink); font-weight: 600; }
.hw__av { width: 32px; height: 32px; }
.hw__likes { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--rose-ink); font: 600 15px/1 var(--sans); white-space: nowrap; }
.hw__likes svg { width: 14px; height: 13px; }
.hw__t { margin-top: 10px; font: 400 var(--hwF, 15px)/1.45 var(--sans); color: var(--ink); text-wrap: pretty; }
.hw__t mark {
  border-radius: 4px; padding: 0 2px; margin: 0 -2px;
  background-image: linear-gradient(rgba(245, 230, 168, .95), rgba(245, 230, 168, .95));
  background-repeat: no-repeat; background-position: 0 70%; background-size: 0% 62%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .45s var(--ease);
}
.hw__t mark.on { background-size: 100% 62%; }
.hw__list { position: relative; z-index: 1; perspective: 700px; }
.ck {
  position: relative; display: flex; align-items: center; gap: 12px;
  height: var(--ckH, 40px); padding: 0 18px; background: var(--card);
  border-top: 1px dashed rgba(42, 36, 33, .13);
  transform-origin: 50% 0;
}
.ck--last { border-radius: 0 0 24px 24px; height: calc(var(--ckH, 40px) + 8px); padding-bottom: 8px; box-shadow: 0 22px 30px -22px rgba(70, 40, 30, .35); }
.ck__box {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(42, 36, 33, .32); background: transparent;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .25s linear, box-shadow .25s linear;
}
.ck__box svg { width: 18px; height: 18px; fill: none; stroke: #FFFFFF; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .32s var(--ease) .06s; }
.ck.on .ck__box { background: var(--rose); box-shadow: inset 0 0 0 1.5px var(--rose); }
.ck.on .ck__box svg { stroke-dashoffset: 0; }
.ck__t { font: 500 var(--ckF, 15px)/1.2 var(--sans); color: var(--ink); white-space: nowrap; }
.ck__note {
  position: absolute; right: 16px; top: 50%; margin-top: -19px;
  display: flex; align-items: center; gap: 2px; color: var(--rose);
  font: 600 25px/1 var(--hand); transform: rotate(-7deg);
}
.ck__note svg { width: 22px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
html.da-on .ck { will-change: transform, opacity; }
html.da-on .ck__note { opacity: 0; transform: rotate(-7deg) scale(.86); transition: opacity .3s linear, transform .45s var(--ease); }
html.da-on .ck__note.on { opacity: 1; transform: rotate(-7deg); }
.l2__line { margin-top: 20px; font: 400 var(--l2F, 25px)/1.15 var(--serif); letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
.l2__line .snt { display: block; }
.l2__line .snt--2 { font-style: italic; }
/* a two-beat line breaks between its sentences, never mid-phrase */
.cap__t .snt { white-space: nowrap; }
.draft .snt { display: block; text-wrap: balance; }
.l2__small { margin-top: 9px; font: 500 14px/1.4 var(--sans); color: var(--ink); }
html.da-on .l2__line, html.da-on .l2__small, html.da-on .l2__lab { opacity: 0; }

/* ---------------------------------------------------------------------------------------------- 4 · 5 · the phone */
html.da-on .phone {
  position: absolute; left: 0; top: 0; z-index: 15;
  width: var(--cw, 393px); height: var(--ch, 852px);
  transform-origin: 0 0; visibility: hidden; pointer-events: none;
}
html.da-on.da-live .phone { pointer-events: auto; }
html.da-on .phone.is-anim { will-change: transform; }
/* the device, in canvas px (it is scaled as a whole): a 6px warm-titanium band, an 11px black bezel ring, the glass.
   Band and bezel are rings (the frame's middle is page paper), so the hardware can arrive around the screen
   without ever showing a dark slab. */
.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;
  /* warm silver: a champagne titanium band that catches daylight; the middle stays paper */
  background:
    linear-gradient(#FBF6EE, #FBF6EE) padding-box,
    linear-gradient(138deg, #FBF9F4 0%, #DCD3C5 7%, #A79B8A 19%, #9E9384 25%, #E6DFD3 39%, #F4EFE7 46%, #CCC2B3 58%, #9E9384 78%, #C9BFB0 89%, #F3EEE6 100%) border-box;
  box-shadow:
    0 0 0 .75px rgba(84, 66, 48, .5),
    inset 0 0 0 .75px rgba(255, 255, 255, .7),
    0 2px 3px rgba(70, 40, 30, .16),
    0 26px 44px -24px rgba(70, 40, 30, .5),
    0 64px 110px -44px rgba(70, 40, 30, .32);
  isolation: isolate; pointer-events: none;   /* its layers stay inside it, and it never takes a tap meant for the glass */
}
.phone__frame::before {   /* the black bezel: a ring around the glass, with the faint edge where glass meets metal */
  content: ""; position: absolute; inset: 0; z-index: 1;
  border-radius: calc(var(--R) + var(--bz));
  border: var(--bz) solid #0C0B0A;
  box-shadow: 0 0 0 1px rgba(36, 28, 20, .7), inset 0 0 0 .75px rgba(255, 255, 255, .12);
}
/* antenna lines across the band */
.pa { position: absolute; z-index: 0; width: var(--band); height: 2.5px; background: rgba(92, 78, 62, .42); }
.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; }
/* a highlight that crosses the bezel once, as the device locks */
.phone__shine { position: absolute; inset: 0; z-index: 2; border-radius: calc(var(--R) + var(--bz)); overflow: hidden; pointer-events: none; }
.phone__shine i {
  position: absolute; top: -10%; bottom: -10%; left: 0; width: 46%; opacity: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .34) 48%, rgba(255, 255, 255, .5) 52%, rgba(255, 255, 255, 0) 100%);
  transform: translate3d(-120%, 0, 0) skewX(-14deg);
}
/* side buttons, behind the band (they slide out of it as the device assembles) */
.pb {
  position: absolute; width: 5px; border-radius: 2px;
  background: linear-gradient(90deg, #8E8273 0%, #D8D0C3 40%, #F1ECE4 55%, #A39786 100%);
  box-shadow: 0 0 0 .6px rgba(70, 55, 40, .5), 0 1px 2px rgba(70, 40, 30, .2);
}
.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, #8E8273 0%, #D8D0C3 40%, #F1ECE4 55%, #A39786 100%); }
.phone__screen {
  position: absolute; inset: 0; border-radius: var(--R); overflow: hidden; background: #FFFBF6;
  transform: translateZ(0);
}
#da-app { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
/* the glass: a faint 115° reflection, the same in every mode */
.phone__glare {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: var(--R);
  background: linear-gradient(115deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 22%, rgba(255, 255, 255, 0) 40%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.phone__island {
  position: absolute; top: 11px; left: 50%; z-index: 5; width: 124px; height: 36px; margin-left: -62px;
  border-radius: 18px; background: #000; pointer-events: none;
  box-shadow: inset 0 0 0 .75px rgba(255, 255, 255, .05);
}
.phone__island::after {   /* the front camera */
  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%);
}
.phone__glow {
  position: absolute; inset: -130px -150px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(245, 230, 168, .5), rgba(242, 201, 194, .24) 58%, rgba(242, 201, 194, 0));
  opacity: 0;
}
/* chapter 4: the device is first drawn like a notebook sketch, then becomes real */
.phone__sketch { display: none; }
html.da-on .phone__sketch {
  display: block; position: absolute; z-index: 6; max-width: none; pointer-events: none; overflow: visible; visibility: hidden;
  fill: none; stroke: rgba(42, 36, 33, .5); stroke-linecap: round; stroke-linejoin: round;
}
html.da-on .phone__sketch path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
/* the course rows wait under a sheet of the screen's own ground; each slides away from its tile as it lands */
.phone__rows { display: none; }
html.da-on .phone__rows { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; visibility: hidden; }
.rv {
  position: absolute; left: -44px; width: calc(100% + 44px); top: 0; height: 80px;
  background: linear-gradient(90deg, rgba(255, 251, 246, 0) 0, #FFFBF6 44px);
  will-change: transform;
}
html.da-on .phone.is-anim .phone__frame, html.da-on .phone.is-anim .phone__screen,
html.da-on .phone.is-anim .phone__island, html.da-on .phone.is-anim .phone__glow { will-change: transform, opacity; }

/* the static screen, only when the app is missing (html.da-noapp) or without the experience */
.phone__fb { display: none; position: absolute; inset: 0; background: #FFFBF6; color: var(--ink); font-family: var(--sans); }
html.da-noapp .phone__fb, html[data-noapp] .phone__fb, html:not(.da-on):not(.da-flat) .phone__fb { display: block; }
html.da-noapp .cap--live, html[data-noapp] .cap--live, html:not(.da-on):not(.da-flat) .cap--live { display: none !important; }
html.da-noapp #da-app, html[data-noapp] #da-app, html:not(.da-on):not(.da-flat) #da-app { display: none; }
.fb__status { position: absolute; left: 0; right: 0; top: 0; height: 54px; }
.fb__time { position: absolute; left: 36px; top: 18px; font: 600 16px/20px var(--sans); }
.fb__icons { position: absolute; right: 30px; top: 21px; display: flex; gap: 6px; align-items: center; }
.fb__k { position: absolute; left: 22px; top: 70px; font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.fb__h { position: absolute; left: 22px; right: 22px; top: 88px; font: 420 26px/1.12 var(--serif); letter-spacing: -.012em; }
.fb__rows { position: absolute; left: 0; right: 0; top: 164px; }
.fb__rows li { position: relative; display: flex; align-items: center; gap: 14px; height: calc((var(--ch, 852px) - 260px) / 7); padding: 0 20px; }
.fb__rows li + li::before { content: ""; position: absolute; left: 96px; right: 20px; top: 0; height: 1px; background: var(--line); }
.fb__rows img { width: min(62px, calc((var(--ch, 852px) - 260px) / 7 - 14px)); height: min(62px, calc((var(--ch, 852px) - 260px) / 7 - 14px)); border-radius: 14px; object-fit: cover; flex: none; }
.fb__rows span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fb__rows small { font: 600 11px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fb__rows b { font: 600 15.5px/1.25 var(--sans); }
.fb__rows em { font: 400 13px/1.2 var(--sans); font-style: normal; color: var(--muted); }
.fb__rows .is-today small { color: var(--rose); }
.fb__tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 84px; padding-bottom: 26px; display: flex; justify-content: space-around; align-items: center; border-top: 1px solid var(--line); background: rgba(255, 251, 246, .96); font: 600 12px/1 var(--sans); color: var(--muted); }
.fb__tabs .on { color: var(--rose); }

/* the flying tiles (chapter 4) */
html.da-on .fly {
  position: absolute; inset: 0; z-index: 22; pointer-events: none;
  perspective: 1100px; perspective-origin: 50% 46%;
  visibility: hidden;
}
/* one plane per tile: the reel poster on its face, the lesson thumbnail on its back (pre-mirrored, so it reads
   right once the card has turned over); the faces swap while the card is edge-on */
.fl {
  position: absolute; left: 0; top: 0; width: var(--tw, 118px); height: var(--th, 158px);
  overflow: hidden; border-radius: var(--tr, 14px); background: var(--paper-2);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  box-shadow: 0 1px 2px rgba(70, 40, 30, .12), 0 22px 34px -18px rgba(70, 40, 30, .5);
}
.fl__f { position: absolute; inset: 0; }
.fl__b { transform: scaleX(-1); opacity: 0; }
.fl img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; }

/* captions (4 · 5) */
html.da-on .sc-wow, html.da-on .sc-app { z-index: 30; }
html.da-on .cap { position: absolute; left: var(--capL, var(--gut)); top: var(--capTop, 24px); width: var(--capW, calc(100% - 2 * var(--gut))); visibility: hidden; }
html.da-on .cap.on { visibility: visible; }
html.da-on .steps .cap { left: 0; top: 0; width: 100%; }
html.da-on .steps { position: absolute; left: var(--capL, var(--gut)); top: var(--capTop, 24px); width: var(--capW, calc(100% - 2 * var(--gut))); }
.cap__t { font: 400 var(--capF, var(--d-s))/1.14 var(--serif); letter-spacing: -.014em; color: var(--ink); text-wrap: balance; }
/* « Step 1 · » on the title's own line (as the copy reads), small caps in rose, on the title's baseline */
.cap__n { display: inline-block; margin-right: .45em; font: 600 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--rose-ink); white-space: nowrap; }
@media (min-width: 1000px) { .cap__n { font-size: 12.5px; } }
html.st-desk .cap__n { display: block; margin: 0 0 12px; }
html.st-desk .cap__dot { display: none; }
.cap__s { margin-top: 8px; font: 400 var(--capS, var(--t-s))/1.4 var(--sans); color: var(--muted); text-wrap: balance; }
.cap--wow .cap__s { font: 400 italic var(--capQ, 18px)/1.3 var(--serif); color: var(--ink); }
.cap__src { font: 500 13px/1.3 var(--sans); font-style: normal; color: var(--muted); margin-left: 4px; }
.cap--intro .lab__t { font-size: var(--capF, var(--d-s)); line-height: 1.14; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .14em 0 .12em; margin: -.14em 0 -.12em; }
.w > span { display: inline-block; }
html.da-on .cap .w > span { transform: translate3d(0, 112%, 0); }
html.da-on .cap .cap__s, html.da-on .cap .cap__n, html.da-on .cap--intro .lab__k { opacity: 0; }
html.da-on .cap--intro .lab::before { opacity: 0; }

/* the five-step index, beside the phone */
.idx { display: none; }
html.da-on .idx {
  display: flex; flex-direction: column; align-items: center;
  position: absolute; left: var(--idxL, 0); top: var(--idxT, 0); width: 30px; opacity: 0;
}
html.da-on .idx li { position: relative; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; }
html.da-on .idx li + li { margin-top: var(--idxG, 18px); }
html.da-on .idx li + li::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: var(--idxG, 18px); background: var(--line); }
html.da-on .idx li.done + li::before { background: rgba(217, 86, 111, .45); }
html.da-on .idx span {
  display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  font: 500 14px/1 var(--serif); color: var(--muted); font-variant-numeric: lining-nums;
  transition: color .25s linear, background-color .25s linear, box-shadow .25s linear, transform .3s var(--ease);
}
html.da-on .idx li.done span { color: var(--ink); }
/* « Lesson 3 », up the margin above the index */
.idx__k { display: none; }
html.da-on .idx__k { display: block; position: absolute; left: calc(var(--idxL, 0px) + 7px); top: var(--idxKT, 0px); width: 16px; opacity: 0; }
html.da-on .idx__k span {
  display: block; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
  font: 600 10.5px/16px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
html.da-on .idx li.cur span { color: #FFFFFF; background: var(--rose); box-shadow: 0 6px 14px -6px rgba(217, 86, 111, .7); transform: scale(1.08); }
.draft { font: 400 italic 12.5px/1.35 var(--serif); color: var(--muted); }
@media (max-width: 899px) { html.da-on .draft { font-size: 11px; line-height: 1.3; text-wrap: pretty; } }
html.da-on .draft { position: absolute; left: var(--drL, var(--gut)); top: var(--drT, 80%); width: var(--drW, 200px); opacity: 0; }

/* ============================================================================================== 6 · 7 · 8: pinned scenes */
.ch { position: relative; }
html.da-on .pin-run { height: calc(var(--len, 2) * var(--Spx, 100vh) + var(--LH)); }
html.da-on .pin { position: -webkit-sticky; position: sticky; top: 0; height: 100vh; height: var(--LH); overflow: hidden; overflow: clip; }
html.da-on .col { position: absolute; left: var(--colL, var(--gut)); width: var(--colW, calc(100% - 2 * var(--gut))); top: 0; height: var(--S); }

/* 6 · you told us */
.told__head .lab { margin-bottom: 10px; }
.told__list { display: flex; flex-direction: column; gap: var(--tnG, 12px); }
.tn { display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr); align-items: center; column-gap: 14px; }
.tn__note {
  position: relative; padding: 11px 14px 12px; border-radius: 18px; background: var(--card);
  box-shadow: var(--shadow-s), 0 1px 0 rgba(70, 40, 30, .05);
}
.tn:nth-child(3n+2) .tn__note { background: #FFFBF0; }
.tn:nth-child(3n) .tn__note { background: #FFF9F7; }
.tn__k { font: 600 10.5px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--rose-ink); }
.tn__q { margin-top: 5px; font: 400 italic var(--tnF, 16px)/1.3 var(--serif); color: var(--ink); text-wrap: pretty; }
.tn__f { position: relative; display: flex; align-items: flex-start; gap: 9px; font: 600 var(--tfF, 15px)/1.25 var(--sans); color: var(--ink); flex-wrap: wrap; }
.tn__ft { flex: 1; min-width: 0; padding-top: 2px; }
.tn__ck {
  flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(42, 36, 33, .28);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .25s linear, box-shadow .25s linear;
}
.tn__ck svg { width: 18px; height: 18px; fill: none; stroke: #FFFFFF; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .32s var(--ease) .05s; }
.tn.on .tn__ck { background: var(--rose); box-shadow: inset 0 0 0 1.5px var(--rose); }
.tn.on .tn__ck svg { stroke-dashoffset: 0; }
.tn__hand { flex-basis: 100%; padding-left: 31px; margin-top: 3px; font: 600 21px/1 var(--hand); color: var(--rose-ink); transform: rotate(-3deg); transform-origin: 0 50%; }
html.da-on .told__head { position: absolute; left: 0; right: 0; top: var(--thT, 40px); }
html.da-on .told__win {
  position: absolute; left: -12px; right: -12px; top: var(--twT, 160px); height: var(--twH, 400px); overflow: hidden;
  padding: 0 12px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 26px), transparent 100%);
}
html.da-on .told__list { padding: 22px 0 28px; will-change: transform; }
html.da-on .tn__note { opacity: 0; will-change: transform, opacity; }
html.da-on .tn__ft { opacity: .3; transition: opacity .3s linear; }
html.da-on .tn.on .tn__ft { opacity: 1; }
html.da-on .tn__ck { opacity: .5; transition: opacity .3s linear, background-color .25s linear, box-shadow .25s linear; }
html.da-on .tn.on .tn__ck { opacity: 1; }
html.da-on .tn__hand { opacity: 0; transition: opacity .35s linear .15s; }
html.da-on .tn.on .tn__hand { opacity: 1; }
html.da-on .told__head { opacity: 0; }

/* 7 · start small */
.beat--v1 > .lab { margin-bottom: 16px; }
.v1 { display: grid; gap: 16px; }
.v1__box {
  position: relative; padding: 18px 20px 18px; border-radius: 24px; background: var(--card);
  box-shadow: var(--shadow), 0 1px 0 rgba(70, 40, 30, .05);
  background-image: linear-gradient(90deg, transparent 27px, rgba(235, 169, 169, .55) 27px, rgba(235, 169, 169, .55) 28px, transparent 28px);
}
.v1__t { padding-left: 18px; font: 400 var(--v1F, 23px)/1.24 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.v1__tag {
  display: inline-block; padding: 5px 11px 5px; margin-right: 2px; border-radius: 999px; background: var(--butter);
  font: 600 12px/1.1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); vertical-align: .24em;
}
.v1__eq { color: var(--rose); }
.v1__nw { white-space: nowrap; }
.v1__s { padding-left: 18px; margin-top: 12px; font: 500 14.5px/1.45 var(--sans); color: var(--muted); }
.v1__s i { font-style: normal; color: var(--rose); padding: 0 2px; }
.v1__nk { font: 600 11.5px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.v1__nl { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.v1__nl li { position: relative; padding: 7px 13px 8px; border-radius: 999px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); font: 500 14px/1.2 var(--sans); color: var(--ink); }
.v1__nl li span { transition: color .3s linear; }
.v1__nl li i { position: absolute; left: 10px; right: 10px; top: 50%; height: 1.5px; margin-top: -.5px; border-radius: 1px; background: var(--ink); opacity: .6; transform-origin: 0 50%; transform: scaleX(1); }
.v1__nl li.struck span, html:not(.da-on) .v1__nl li span { color: var(--muted-2); }
html.da-on .v1__nl li i { transform: scaleX(0); }
.days__t { font: 380 var(--daysF, 40px)/1.08 var(--serif); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.why__k { font: 600 11.5px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.num__n { margin-top: 10px; font: 380 var(--numF, 88px)/1 var(--serif); letter-spacing: -.03em; color: var(--rose); font-variant-numeric: lining-nums tabular-nums; }
html.da-on .num__n { overflow: hidden; padding: .04em 0 .06em; margin-bottom: -.06em; }
.num__v { display: inline-block; }
.num__t { margin-top: 12px; font: 400 var(--t-m)/1.42 var(--sans); color: var(--ink); max-width: 26em; text-wrap: pretty; }
.num__s { margin-top: 8px; font: 500 12px/1.35 var(--sans); color: var(--muted); letter-spacing: .02em; }
html.da-on .beat { position: absolute; left: 0; right: 0; top: 0; opacity: 0; visibility: hidden; will-change: transform, opacity; }

/* 8 · why it works (quieter) */
.works__lab { margin-bottom: 20px; }
.works__grid { display: grid; gap: 28px; }
.kp__body { position: relative; padding-left: 30px; }
.kp__line { position: absolute; left: 6px; top: 9px; bottom: var(--klB, 24px); width: 1.5px; background: rgba(42, 36, 33, .12); overflow: hidden; }
.kp__line i { position: absolute; inset: 0; background: rgba(42, 36, 33, .5); transform-origin: 50% 0; }
html.da-on .kp__line i { transform: scaleY(0); }
.kp__stops li { position: relative; padding-bottom: var(--kpG, 22px); }
.kp__stops li:last-child { padding-bottom: 0; }
.kp__stops p { font: 400 var(--kpF, 19px)/1.3 var(--serif); color: var(--ink); text-wrap: pretty; }
.kp__stops b { font-weight: 500; color: var(--ink); }
.kp__stops .kp__src { margin-top: 6px; font: 500 11.5px/1.35 var(--sans); color: var(--muted); letter-spacing: .02em; }
.kp__dot { position: absolute; left: -30px; top: 5px; width: 13px; height: 13px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px rgba(42, 36, 33, .3); transition: background-color .3s linear, box-shadow .3s linear; }
html.da-on .kp__stops li { opacity: .22; transition: opacity .35s linear; }
html.da-on .kp__stops li.lit { opacity: 1; }
.kp__stops li.lit .kp__dot, html:not(.da-on) .kp__dot { background: var(--rose); box-shadow: inset 0 0 0 1.5px var(--rose); }
.eq { position: relative; padding: 18px 20px 18px; border-radius: 24px; background: rgba(244, 236, 223, .72); box-shadow: inset 0 0 0 1px var(--line); }
.eq.is-bare { background: transparent; box-shadow: none; padding: 0 2px; }
.eq__l { overflow: hidden; padding: .06em 0 .04em; }
.eq__in { display: flex; align-items: baseline; gap: .3em; flex-wrap: nowrap; }
html.da-on .eq__in { transform: translate3d(0, 115%, 0); }
.eq__n { font: 400 var(--eqF, 38px)/1.05 var(--serif); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.eq__o { display: inline-flex; justify-content: flex-start; align-items: center; width: 1.05em; flex: none; align-self: center; font: 400 calc(var(--eqF, 38px) * .58)/1 var(--sans); color: var(--muted); }
.eq__o svg { width: .66em; height: .46em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.eq__u { font: 500 14px/1.2 var(--sans); color: var(--muted-2); white-space: nowrap; }
.eq__rule { height: 1px; margin: 10px 0 8px; background: rgba(42, 36, 33, .3); transform-origin: 0 50%; }
html.da-on .eq__rule { transform: scaleX(0); }
.eq__l--res .eq__n { color: var(--rose); font-size: calc(var(--eqF, 38px) * 1.3); }
.eq__l--res .eq__o { color: var(--rose); font-size: calc(var(--eqF, 38px) * .76); width: calc(var(--eqF, 38px) * .609); }
.eq__l--res .eq__o svg { width: .8em; height: .56em; }
.eq__l--res .eq__u { color: var(--ink); }
.eq__year { margin-top: 10px; display: flex; align-items: baseline; gap: .35em; font: 400 italic 19px/1.3 var(--serif); color: var(--ink); }
.eq__ap { display: inline-flex; align-self: center; color: var(--muted); }
.eq__ap svg { width: 15px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.eq__sweat { margin-top: 14px; font: 400 14px/1.4 var(--sans); color: var(--ink); text-wrap: pretty; }
.eq__src { margin-top: 4px; font: 500 11.5px/1.35 var(--sans); color: var(--muted-2); letter-spacing: .02em; }
.eq__foot { margin-top: 8px; font: 400 12px/1.4 var(--sans); color: var(--muted-2); }
html.da-on .eq__year, html.da-on .eq__sweat, html.da-on .eq__src, html.da-on .eq__foot { opacity: 0; transform: translate3d(0, 10px, 0); }
html.da-on .works__lab, html.da-on .eq { opacity: 0; }
html.da-on .kp, html.da-on .eq { will-change: transform, opacity; }

/* ============================================================================================== 9 · office hours */
#ch9 { position: relative; z-index: 2; padding: 72px var(--gut) calc(96px + env(safe-area-inset-bottom, 0px)); }
.oh { max-width: 560px; margin: 0 auto; }
/* the last screen is office hours only (the pinned scene above never peeks in) */
html.da-on #ch9 { min-height: var(--S); display: flex; flex-direction: column; justify-content: center; }
html.da-on #ch9 .oh { width: 100%; }
.oh__t { margin-top: 14px; font: 400 clamp(32px, 9.2vw, 58px)/1.06 var(--serif); letter-spacing: -.02em; color: var(--ink); }
.oh__t > span { display: inline-block; }
.oh__card {
  margin-top: 26px; padding: 18px 18px 18px; border-radius: 28px; background: var(--card);
  box-shadow: var(--shadow), 0 1px 0 rgba(70, 40, 30, .05);
}
.oh__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 4px 16px; border-bottom: 1px dashed rgba(42, 36, 33, .16); }
.oh__meta { font: 500 15px/1.35 var(--sans); color: var(--muted); }
.oh__meta b { font: 400 italic 22px/1.2 var(--serif); color: var(--ink); display: block; margin-bottom: 2px; }
.oh__meta i { font-style: normal; color: var(--rose); }
.oh__faces { display: flex; flex: none; }
.oh__faces img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--card); }
.oh__faces img + img { margin-left: -14px; }
.oh__btns { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  min-height: 60px; padding: 7px 12px 7px 7px; border-radius: 999px;
  text-decoration: none; transition: transform .14s var(--ease);
  touch-action: manipulation;
}
.btn:active { transform: scale(.97); }
.btn img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; }
.btn span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.btn b { font: 700 clamp(15.5px, 4.3vw, 18px)/1.05 var(--sans); letter-spacing: -.005em; }
.btn small { font: 600 13.5px/1.1 var(--sans); }
.btn--ig { background: var(--rose-ink); color: #FFFFFF; box-shadow: 0 12px 24px -14px rgba(185, 61, 87, .8); }
.btn--ig img { box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }
.btn--wa { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(42, 36, 33, .3); }
.btn--s { min-height: 48px; padding: 0 18px; justify-content: center; font: 700 16px/1 var(--sans); flex: 1; }
.oh__foot { margin-top: 26px; font: 400 13px/1.5 var(--sans); color: var(--muted); max-width: 30em; }
html.da-on #ch9 [data-v] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .7s linear, transform .9s var(--ease); }
html.da-on #ch9 [data-v].in { opacity: 1; transform: none; }
html.da-on #ch9 .oh__card[data-v] { transition-delay: .08s; }
html.da-on #ch9 .oh__foot[data-v] { transition-delay: .18s; }

/* ---------------------------------------------------------------------------------------------- the contact pill + sheet */
#dock {
  position: fixed; z-index: 900;
  right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  transition: transform .34s var(--ease-ios), opacity .28s linear;
}
#dock.away, #dock.aside { transform: translate3d(0, calc(100% + 30px), 0); opacity: 0; pointer-events: none; }
.pill {
  display: flex; align-items: center; gap: 9px; height: 48px; padding: 4px 17px 4px 5px;
  border-radius: 999px; background: rgba(255, 253, 249, .97); color: var(--ink);
  box-shadow: 0 0 0 1px rgba(42, 36, 33, .08), 0 14px 30px -12px rgba(70, 40, 30, .38);
  font: 600 14.5px/1 var(--sans); text-decoration: none; letter-spacing: .005em; white-space: nowrap;
  cursor: pointer; border: 0; touch-action: manipulation;
  transition: transform .14s var(--ease), opacity .2s linear;
}
.pill:active { transform: scale(.96); }
.pill__faces { display: flex; }
.pill__faces img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #FFFDF9; }
.pill__faces img + img { margin-left: -12px; }
.pill__t::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--rose); margin-right: 7px; vertical-align: 1px; }
#dock.open .pill { opacity: 0; }
#sheet-scrim { position: fixed; inset: 0; z-index: 950; background: rgba(42, 36, 33, .32); 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: 500px; margin: 0 auto; max-height: calc(100% - 24px); overflow: auto; overscroll-behavior: contain;
  padding: 22px 20px 20px; border-radius: 28px; background: var(--card); color: var(--ink);
  box-shadow: 0 0 0 1px rgba(42, 36, 33, .06), 0 30px 80px -24px rgba(70, 40, 30, .5);
  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(42, 36, 33, .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 28px/1.1 var(--serif); letter-spacing: -.015em; padding-right: 36px; text-wrap: balance; }
.who { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; row-gap: 12px; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.who img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.who__n { display: flex; flex-direction: column; gap: 3px; }
.who__n b { font: 600 var(--t-m)/1.2 var(--sans); }
.who__n span { font: 400 13px/1.2 var(--sans); color: var(--muted); }
.who__b { grid-column: 1 / -1; display: flex; gap: 10px; }
.who__b .btn--ig { flex: 1.3; }

/* ---------------------------------------------------------------------------------------------- a phone held sideways */
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  html.da-on body::after {
    content: "Turn your phone upright"; position: fixed; z-index: 905; left: 50%; top: calc(10px + env(safe-area-inset-top, 0px));
    transform: translateX(-50%); padding: 8px 14px; border-radius: 999px;
    background: rgba(255, 253, 249, .97); box-shadow: 0 0 0 1px rgba(42, 36, 33, .08), 0 10px 24px -12px rgba(70, 40, 30, .35);
    font: 600 13px/1 var(--sans); color: var(--ink); white-space: nowrap; pointer-events: none;
  }
}

/* ---------------------------------------------------------------------------------------------- desktop */
@media (min-width: 1000px) {
  :root { --t-m: 18px; --t-s: 16px; }
  .lab__t { font-size: 22px; }
  .l1__lab .lab__t { font-size: 24px; }
  .com__t { font-size: 15.5px; }
  .oh__t { font-size: 60px; }
  .oh { max-width: 640px; }
  .v1 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; column-gap: 28px; }
  .works__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: start; }
  .tn { column-gap: 28px; }
  .v1__box { padding: 24px 28px 24px; background-image: linear-gradient(90deg, transparent 33px, rgba(235, 169, 169, .55) 33px, rgba(235, 169, 169, .55) 34px, transparent 34px); }
  .v1__s { font-size: 17px; }
  .v1__nl li { font-size: 16px; padding: 9px 16px 10px; }
  .v1__nk, .why__k { font-size: 12.5px; }
  .kp__stops .kp__src { font-size: 13px; }
  .eq { padding: 26px 30px 24px; }
  .eq__u { font-size: 16px; }
  .eq__year { font-size: 23px; }
  .eq__sweat { font-size: 16px; }
  .eq__foot { font-size: 13.5px; }
  .num__s { font-size: 13.5px; }
  html.da-on .beat { max-width: 880px; margin: 0 auto; }
  html.da-on .beat--why, html.da-on .beat--days { text-align: center; }
  html.da-on .beat--why .num__t { margin-inline: auto; max-width: 34em; }
}

/* ============================================================================================== static document
   (no JS, a script failed to load, or ?rm=1): the same words, the same order, readable. */
html:not(.da-on) #stage { position: static; height: auto; overflow: visible; }
html:not(.da-on) .wall, html:not(.da-on) .fly, html:not(.da-on) .op__caret, html:not(.da-on) .cue,
html:not(.da-on) .op__slot, html:not(.da-on) .phone__glow, html:not(.da-on) .idx { display: none; }
html:not(.da-on):not(.da-flat) .cap--live .cap__hint, html.da-noapp .cap--live .cap__hint { display: none; }
html:not(.da-on) .sc { position: relative; padding: 0 var(--gut); max-width: 720px; margin: 0 auto; }
html:not(.da-on) .sc-open { padding-top: 64px; padding-bottom: 24px; }
html:not(.da-on) .op__row { display: block; }
html:not(.da-on) .op__t { font-size: clamp(46px, 13vw, 96px); }
html:not(.da-on) .op__q { margin-top: 8px; }
html:not(.da-on) .hero { width: min(300px, 72%); height: auto; margin: 34px auto 8px; transform: rotate(-2deg); }
html:not(.da-on) .hero__card { position: absolute; inset: 0; }
html:not(.da-on) .hero__media { position: relative; left: auto; top: auto; width: auto; margin: 10px 10px 0; }
html:not(.da-on) .hero__cap { position: relative; height: 40px; }
html:not(.da-on) .hero__v { display: none; }
html:not(.da-on) .sc-l1 { padding-top: 56px; display: flex; flex-direction: column; }
html:not(.da-on) .l1 { order: 1; }
html:not(.da-on) .feed { order: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 22px 0; }
html:not(.da-on) .feed img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; }
html:not(.da-on) .coms { order: 3; display: grid; gap: 12px; }
html:not(.da-on) .cnt__n .sr-only { position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: nowrap; }
html:not(.da-on) .sc-l2 { padding-top: 56px; }
html:not(.da-on) .hw__top { border-radius: 24px 24px 0 0; }
html:not(.da-on) .ck .ck__box { background: var(--rose); box-shadow: inset 0 0 0 1.5px var(--rose); }
html:not(.da-on) .ck .ck__box svg { stroke-dashoffset: 0; }
html:not(.da-on) .hw__t mark { background-size: 100% 62%; }
html:not(.da-on) .phone { position: relative; width: 393px; height: 852px; margin: 56px 0 calc(852px * -.3 + 20px) calc(50% - 196.5px); transform: scale(.7); transform-origin: 50% 0; }
html:not(.da-on) .sc-wow { padding-top: 0; }
html:not(.da-on) .cap { margin-top: 26px; }
html:not(.da-on) .sc-app { padding-bottom: 24px; }
html:not(.da-on) .sc-app { display: flex; flex-direction: column; gap: 26px; }
html:not(.da-on) .steps { display: contents; }
html:not(.da-on) .draft { order: 1; }   /* the draft line right under step 5, before "Your turn" */
html:not(.da-on) .cap--live { order: 2; }
html:not(.da-on) .ch.pin-run { padding: 64px var(--gut) 24px; max-width: 760px; margin: 0 auto; }
html:not(.da-on) .told__list { margin-top: 22px; }
html:not(.da-on) .tn .tn__ck { background: var(--rose); box-shadow: inset 0 0 0 1.5px var(--rose); }
html:not(.da-on) .tn .tn__ck svg { stroke-dashoffset: 0; }
html:not(.da-on) .beat + .beat { margin-top: 44px; }
html:not(.da-on) .days__t { font-size: clamp(32px, 9vw, 54px); }
html:not(.da-on) .num__n { font-size: clamp(64px, 18vw, 110px); }
html:not(.da-on) .kp { margin-bottom: 8px; }
@media (min-width: 760px) {
  html:not(.da-on) .sc, html:not(.da-on) .ch.pin-run, html:not(.da-on) #ch9 { padding-left: calc(var(--mx) + 48px); }
}