/* HUD, a dermatologist's clinic and skincare line: blush and clinical white, one face that stays while the reading runs round her.
   Its mark is the name drawn the way a heads-up display writes, in the four corners that frame her face in the reading.
   One look by design (the page changes its own light chapter by chapter), so no light/dark theme switch. */
/* Geist and Geist Mono (Vercel, SIL OFL 1.1, fonts/LICENSE-geist.txt), latin, variable: from Fontsource */
@font-face { font-family: "Geist"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("fonts/geist.woff2") format("woff2-variations"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("fonts/geist-mono.woff2") format("woff2-variations"); }
:root {
  --blush: #f3dfdb;
  --white: #faf8f6;
  --ink: #2a1f24;
  --ink-2: #5a4650;        /* 6.6:1 on blush */
  --rose: #9a3f55;         /* 5.9:1 on blush, 6.9:1 on white */
  --line: rgba(42, 31, 36, .16);
  --uv: #171226;
  --uv-ink: #ece8ff;
  --uv-ink-2: #b9b1dc;     /* 8.9:1 on uv */
  --bg: var(--blush);      /* the current chapter's ground; the script moves it with the light */
  --fg: var(--ink); --fg-2: var(--ink-2); --acc: var(--rose); --hair: var(--line);
  --serif: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;   /* the display face: Geist, light and tight */
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --gut: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
@media (min-width: 900px) { :root { --gut: max(4.5vw, env(safe-area-inset-left, 0px)); --gut-r: max(4.5vw, env(safe-area-inset-right, 0px)); } }
body.uv { --fg: var(--uv-ink); --fg-2: var(--uv-ink-2); --acc: #d9b8ff; --hair: rgba(236, 232, 255, .2); }
* { box-sizing: border-box; }
html { background: var(--blush); }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; transition: color .45s; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.serif { font-family: var(--serif); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 4px; }

/* the stage: fixed for the whole page; she never leaves it. As tall as the large screen, so a phone's bar coming and
   going (or an app's browser resizing the page as its bar slides) never gives her canvas a new size */
.stage { position: fixed; left: 0; top: 0; width: 100%; height: calc(100 * var(--lvh, 1lvh)); z-index: 0; overflow: hidden; }
#gl, #prods, .poster { position: absolute; inset: 0; width: 100%; height: 100%; }
#prods { pointer-events: none; }
.poster { display: none; }
.layer { position: absolute; inset: 0; pointer-events: none; contain: layout; }

/* the hero's three frames, then the booth's alignment corners */
.box { position: absolute; left: 0; top: 0; border: 1px solid rgba(255, 255, 255, .96); box-shadow: 0 0 0 .5px rgba(42, 31, 36, .14); opacity: 0; will-change: transform; transition: opacity .5s; }
.box::before { content: ""; position: absolute; left: 5px; top: 5px; width: 5px; height: 5px; background: #fff; }
.box b { position: absolute; left: 7px; bottom: 6px; font: 400 11px/1.25 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: #fff; text-shadow: 0 0 6px rgba(42, 31, 36, .55); white-space: nowrap; }
.box.on { opacity: 1; }
.corner { position: absolute; left: 0; top: 0; width: 26px; height: 26px; border: 0 solid var(--fg); opacity: 0; transition: opacity .4s; will-change: transform; }
.corner.tl { border-width: 1.5px 0 0 1.5px; } .corner.tr { border-width: 1.5px 1.5px 0 0; }
.corner.bl { border-width: 0 0 1.5px 1.5px; } .corner.br { border-width: 0 1.5px 1.5px 0; }
.corner.on { opacity: .9; }

/* readings: a ring on her skin, a hairline, the figure rolling in */
.rd { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .35s; will-change: transform; }
.rd.on { opacity: 1; }
.rd i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 .5px rgba(42, 31, 36, .3), inset 0 0 0 1.5px rgba(42, 31, 36, .12); }
.rd i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 3px; height: 3px; border-radius: 50%; background: #fff; }
.rd .tag { position: absolute; top: 0; transform: translateY(calc(var(--dy, 0px) - 50%)); display: grid; gap: 4px; white-space: nowrap; padding: 7px 10px 8px; border-radius: 7px;
  background: rgba(250, 248, 246, .86); background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 0 0 .5px var(--hair), 0 8px 22px -12px rgba(42, 31, 36, .35); }
.rd b { position: absolute; left: 0; top: -.5px; height: 1px; width: 30px; background: #fff; box-shadow: 0 0 0 .5px rgba(42, 31, 36, .28); transform-origin: 0 50%; }
.rd.r .tag { left: 40px; } .rd.l .tag { right: 40px; text-align: right; }
.rd .k { font: 400 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.rd .v { font: 500 20px/1 var(--mono); letter-spacing: -.01em; color: var(--fg); display: inline-flex; align-items: baseline; gap: 6px; }
.rd.l .v { justify-content: flex-end; }
.rd .u { font: 400 11px/1 var(--mono); color: var(--fg-2); letter-spacing: .02em; }
.rd.probe i { border-color: var(--acc); animation: ping 1.4s ease-out 1; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .9); } 100% { box-shadow: 0 0 0 26px rgba(255, 255, 255, 0); } }

/* rolling figures: each digit a strip of 0-9 twice over, slid into place */
.roll { display: inline-flex; align-items: flex-start; height: 1em; line-height: 1em; overflow: hidden; font-variant-numeric: tabular-nums; }
.roll .dg { display: inline-block; height: 1em; line-height: 1em; overflow: hidden; vertical-align: top; }
.roll .st { display: block; transition: transform .95s cubic-bezier(.16, .84, .24, 1); }
.roll .st span { display: block; height: 1em; line-height: 1em; }
.roll .ch { height: 1em; line-height: 1em; }
.roll .ch { display: inline-block; }
.roll .lead { opacity: .28; }
.roll .ch.lead { opacity: .28; }

/* nav */
.nav { position: fixed; z-index: 30; top: 0; left: 0; right: 0; padding-top: calc(env(safe-area-inset-top, 0px) + 20px); padding-left: var(--gut); padding-right: var(--gut-r);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; pointer-events: none; }
.nav > * { pointer-events: auto; }
.nav::before { content: ""; position: absolute; z-index: -1; inset: 0 0 -70px 0; background: linear-gradient(to bottom, var(--bg) 0%, var(--bg) 40%, transparent 100%); opacity: .92; pointer-events: none; transition: background .45s; }
.word { display: inline-flex; color: var(--fg); transition: color .45s; }
.word .mk { display: block; overflow: visible; }
/* the mark: the name in one line, a pearl of the serum settled in the U (in the page's accent, the light's colour),
   inside the four corners the reading puts round her face. Pointed at, or as a new light fires, the corners lock on */
.mk-p { fill: var(--acc); transition: fill .45s; }
.mk-c path { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.word:hover .mk-c path:nth-child(1), .word:focus-visible .mk-c path:nth-child(1) { transform: translate(2px, 2px); }
.word:hover .mk-c path:nth-child(2), .word:focus-visible .mk-c path:nth-child(2) { transform: translate(-2px, 2px); }
.word:hover .mk-c path:nth-child(3), .word:focus-visible .mk-c path:nth-child(3) { transform: translate(2px, -2px); }
.word:hover .mk-c path:nth-child(4), .word:focus-visible .mk-c path:nth-child(4) { transform: translate(-2px, -2px); }
.word:hover .mk-p { animation: settle .75s cubic-bezier(.3, 0, .3, 1); }
.word.lock .mk-c path { animation: lock .9s cubic-bezier(.2, .8, .2, 1); }
.word.lock .mk-c path:nth-child(1) { --x: 2px; --y: 2px; } .word.lock .mk-c path:nth-child(2) { --x: -2px; --y: 2px; }
.word.lock .mk-c path:nth-child(3) { --x: 2px; --y: -2px; } .word.lock .mk-c path:nth-child(4) { --x: -2px; --y: -2px; }
@keyframes lock { 0%, 100% { transform: none; } 35%, 60% { transform: translate(var(--x), var(--y)); } }
@keyframes settle { 0% { transform: none; } 30% { transform: translateY(-6px); } 62% { transform: none; } 78% { transform: translateY(-1.6px); } 90% { transform: none; } }
html.booting .word { visibility: hidden; }
/* the sections, on the screen's middle (and so on her) whatever the mark and the pills beside them measure */
.links { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 20px); height: 42px; transform: translateX(-50%); display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); font-size: 15px; font-weight: 450; }
.links a { transition: color .2s; }
.links a:hover { color: var(--acc); }
.pill { height: 42px; padding: 0 22px; border-radius: 3px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--fg); font-size: 15px; font-weight: 450; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s; }
.pill.dark { background: var(--fg); color: var(--bg); }
.pill.dark:hover { background: var(--acc); border-color: var(--acc); }
.pill .arr { display: inline-block; transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.pill:hover .arr { transform: translateX(3px); }

/* the booth's light selector, low on the right edge: the middle of each side is the chapter's line */
.lights { position: fixed; z-index: 25; right: var(--gut-r); bottom: calc(env(safe-area-inset-bottom, 0px) + 58px); display: grid; gap: 4px; }
.lights button { display: grid; grid-template-columns: auto 10px; gap: 12px; align-items: center; justify-items: end; min-height: 32px; font: 400 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); transition: color .3s; }
.lights button::after { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; transition: background-color .3s, transform .3s; }
.lights button:hover, .lights button.on { color: var(--fg); }
.lights button.on::after { background: var(--acc); border-color: var(--acc); transform: scale(1.3); }
.lights { opacity: 0; transition: opacity .4s; }
.lights.on { opacity: 1; }

.hud { position: fixed; z-index: 25; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); font: 400 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); transition: color .45s; }
.hud.l { left: var(--gut); } .hud.r { right: var(--gut-r); }
/* the hint carries the ring a reading leaves on her skin, pinging now and then while it asks for a touch */
.hud.l { display: flex; align-items: center; gap: 12px; }
.ping { position: relative; width: 10px; height: 10px; flex: none; border-radius: 50%; border: 1.5px solid var(--acc); transition: border-color .45s; }
.ping::after { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; border: 1px solid var(--acc); opacity: 0; }
.hud.ask .ping::after { animation: ask 3.2s cubic-bezier(.2, .7, .3, 1) 1.2s infinite; }
@keyframes ask { 0% { transform: scale(1); opacity: .9; } 45%, 100% { transform: scale(3.2); opacity: 0; } }

/* chapters scroll over her; each holds its words still while its light is on */
main { position: relative; z-index: 10; }
.ch { position: relative; height: calc(165 * var(--svh, 1svh)); }
.ch.hero { height: calc(150 * var(--svh, 1svh)); }
.ch.tall { height: calc(210 * var(--svh, 1svh)); }
.panel { position: sticky; top: 0; height: calc(100 * var(--svh, 1svh)); overflow: clip; padding-left: var(--gut); padding-right: var(--gut-r); padding-block: 0 calc(13 * var(--svh, 1svh)); display: flex; align-items: flex-end; pointer-events: none; --top: calc(env(safe-area-inset-top, 0px) + 92px); --foot: 76px; }
.panel > * { pointer-events: auto; }
.copy { width: var(--col); opacity: 0; will-change: opacity; position: relative; }
.hero .copy { opacity: 1; }
.panel { --col: min(310px, 22vw); --fade: 96px; }
.hero .panel { --col: min(340px, 24vw); }
.panel:has(.routine), .panel:has(.note) { --col: min(400px, 28vw); }
/* the paper behind the copy: its own column and a little past it, low where the copy sits, never over her face */
.panel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, var(--bg) 0%, var(--bg) calc(var(--gut) + var(--col)), transparent calc(var(--gut) + var(--col) + var(--fade))); opacity: calc(var(--scrim, 0) * .9); pointer-events: none; }
.panel::before { -webkit-mask-image: linear-gradient(to bottom, transparent 26%, #000 52%, #000 94%, transparent); mask-image: linear-gradient(to bottom, transparent 26%, #000 52%, #000 94%, transparent); }
.panel.right { justify-content: flex-end; }
.panel.right::before { background: linear-gradient(to left, var(--bg) 0%, var(--bg) calc(var(--gut-r) + var(--col)), transparent calc(var(--gut-r) + var(--col) + var(--fade))); }
.kicker { font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--acc); margin: 0 0 20px; transition: color .45s; }
.sub { margin: 0; max-width: 30ch; font-size: 17px; line-height: 1.5; font-weight: 350; color: var(--fg-2); transition: color .45s; }
.cta { margin-top: 30px; height: 52px; padding: 0 26px; font-size: 16px; }
h3 { margin: 0; }

/* the loader: the booth calibrates its four lights on blush while her film, the words and the products come in; the
   rule reads how far (the script sets --p), each light's dot fills as the tick passes it, the pearl settles in the U,
   then a scan passes down the screen and shows her while the mark goes up to its place in the nav */
.boot { display: none; }
html.js .boot { display: block; position: fixed; inset: 0; z-index: 60; pointer-events: none; color: var(--ink); --p: 0;
  --mw: clamp(150px, 14vw, 206px); --ease: cubic-bezier(.65, 0, .35, 1); animation: boot-gone .5s ease 11s forwards; }
html.js .boot.run { animation: none; }
@keyframes boot-gone { to { opacity: 0; visibility: hidden; } }
.boot-g { position: absolute; inset: 0; background: var(--blush); pointer-events: auto; clip-path: inset(0 0 0 0); }
.boot.out .boot-g { clip-path: inset(100% 0 0 0); transition: clip-path .95s var(--ease); pointer-events: none; }
.boot-mk { position: absolute; left: calc(50% - var(--mw) / 2); top: calc(50% - var(--mw) * .2568 - 34px); width: var(--mw); height: calc(var(--mw) * .5135); overflow: visible; transform-origin: 0 0; }
.boot.out .boot-mk { transition: transform .95s var(--ease); }
.boot-mk .mk-l path { stroke-dasharray: 1 3; stroke-dashoffset: 1.02; animation: draw .42s cubic-bezier(.55, 0, .25, 1) forwards; }
.boot-mk .mk-l path:nth-child(1) { animation-delay: .15s; } .boot-mk .mk-l path:nth-child(2) { animation-delay: .3s; }
.boot-mk .mk-l path:nth-child(3) { animation-delay: .45s; animation-duration: .3s; }
.boot-mk .mk-l path:nth-child(4) { animation-delay: .62s; animation-duration: .55s; } .boot-mk .mk-l path:nth-child(5) { animation-delay: .86s; animation-duration: .62s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.boot-mk .mk-c path { animation: close .7s cubic-bezier(.2, .8, .2, 1) 1.05s both; }
.boot-mk .mk-c path:nth-child(1) { --x: -9px; --y: -9px; } .boot-mk .mk-c path:nth-child(2) { --x: 9px; --y: -9px; }
.boot-mk .mk-c path:nth-child(3) { --x: -9px; --y: 9px; } .boot-mk .mk-c path:nth-child(4) { --x: 9px; --y: 9px; }
@keyframes close { from { transform: translate(var(--x), var(--y)); opacity: 0; } to { transform: none; opacity: 1; } }
.boot-mk .mk-p { fill: var(--rose); opacity: 0; }
.boot.set .boot-mk .mk-p { animation: drop .72s cubic-bezier(.4, 0, .25, 1) forwards; }
@keyframes drop { 0% { transform: translateY(-30px); opacity: 0; } 30% { opacity: 1; } 56% { transform: none; opacity: 1; } 72% { transform: translateY(-2.6px); opacity: 1; }
  86% { transform: none; opacity: 1; } 94% { transform: translateY(-.6px); opacity: 1; } 100% { transform: none; opacity: 1; } }
.boot-cal { --rw: 360px; position: absolute; left: calc(50% - var(--rw) / 2); width: var(--rw); top: calc(50% + var(--mw) * .2568 - 6px); opacity: 0; animation: cal-in .5s ease .7s forwards; transition: opacity .25s; }
@keyframes cal-in { to { opacity: 1; } }
.boot.out .boot-cal { opacity: 0 !important; animation: none; }
.boot-rule { position: absolute; left: 0; top: 0; width: 100%; height: 13px; opacity: .26;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 25%) 0 100% / calc(100% + 1px) 13px no-repeat,
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 2.5%) 0 100% / 100% 5px no-repeat; }
.boot-read { opacity: .8; clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); }
.boot-tick { position: absolute; left: 0; top: -6px; width: 1px; height: 19px; background: var(--rose); transform: translateX(calc(var(--p) * var(--rw))); }
.boot-tick::after { content: ""; position: absolute; left: -3px; bottom: -4px; width: 7px; height: 7px; background: var(--rose); }
.boot-cal ol { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 0; top: 30px; display: grid; grid-template-columns: repeat(4, 1fr); }
.boot-cal li { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-right: -3.5px; font: 400 10px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); transition: color .3s; }
.boot-cal li::after { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; transition: background-color .3s, border-color .3s, transform .3s; }
.boot-cal li.on { color: var(--ink); }
.boot-cal li.on::after { background: var(--rose); border-color: var(--rose); transform: scale(1.25); }
.boot-sw { position: absolute; inset: 0; opacity: 0; }
.boot-sw i { position: absolute; left: 0; right: 0; top: -1px; height: 1.5px; background: #fffaf3; box-shadow: 0 0 10px 1px rgba(255, 248, 238, .95), 0 0 36px 6px rgba(255, 240, 228, .5); }
.boot.out .boot-sw { opacity: 1; transform: translateY(100%); transition: transform .95s var(--ease), opacity .12s; }
html.seen .boot-mk .mk-l path, html.seen .boot-mk .mk-c path, html.seen .boot-cal { animation: none; stroke-dashoffset: 0; opacity: 1; }
html.seen .boot-mk .mk-p { animation: none; opacity: 1; }

/* the monument: each chapter's word, one line across the head of the screen, set by the script to fill it (fitMons).
   With WebGL it is drawn into the film behind her, under the chapter's light, and traced through her where she stands
   in front of it; the words here only hold its place for reading, selecting and finding; without, they are the
   words. Its rule and the reading tick run under it. */
.mon { margin: 0; font-family: var(--serif); font-weight: 300; letter-spacing: -.06em; line-height: .8; white-space: nowrap; font-size: clamp(56px, 11vw, 190px); color: var(--fg); transition: color .45s; }
.mon span { display: inline; }
html.js:not(.no-gl-type) .mon { color: transparent; transition: none; }
.rule { position: absolute; left: 0; top: 0; height: 13px; width: 100px; pointer-events: none; transform-origin: 0 0; opacity: 0; color: var(--fg); transition: color .45s;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 64px) 0 100% / 100% 13px no-repeat,
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 8px) 0 100% / 100% 5px no-repeat; }
.tick { position: absolute; left: 0; top: 0; width: 1px; pointer-events: none; opacity: 0; background: var(--acc); }
.tick::after { content: ""; position: absolute; left: -3px; bottom: -4px; width: 7px; height: 7px; background: var(--acc); }
/* a light's headline reading: right of her face, at its word's size (the script sets both on her eye line) */
.fig { display: none; margin: 0; }
.fig .k { font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--acc); transition: color .45s; }
.fig .num { font-family: var(--serif); font-weight: 300; letter-spacing: -.045em; line-height: 1; white-space: nowrap; color: var(--fg); transition: color .45s; }
@media (min-width: 900px) {
  /* each chapter's line on her eye line, either side of her face (fitMons sets its size and height); she keeps the middle */
  html.js .copy { position: static; }
  html.js .mon { position: absolute; left: 0; right: 0; top: 0; height: 0; }
  html.js .mon .ml, html.js .mon .mr { position: absolute; top: 0; }
  html.js .mon .ml { left: var(--gut); } html.js .mon .mr { right: var(--gut-r); }
  html.js .mon-top .kicker, html.js .fig .k { position: absolute; top: calc(var(--eye) - .36 * var(--fs) - 40px); margin: 0; }
  html.js .mon-top .kicker { left: var(--gut); }
  /* the formula, the routine and the clinic: their lists start under the line, on its side, clear of her hair (the
     camera stands back a little for them); the clinic's booking stands under the line's other half */
  html.js .mon-top:not(.flank) { align-items: flex-start; padding-top: calc(var(--eye) + .5 * var(--fs) + 46px); --col: min(320px, 23vw); }
  html.js .mon-top:not(.flank)::before { display: none; }
  html.js .mon-top:not(.flank) .prods { margin-top: 0; }
  html.js .mon-top:not(.flank) .prod { grid-template-columns: 30px 1fr; gap: 4px 12px; padding-block: 11px; }
  html.js .mon-top:not(.flank) .prod h3 { font-size: 22px; }
  html.js .mon-top:not(.flank) .prod .spec { grid-column: 2; text-align: left; white-space: normal; }
  html.js #clinic .cta { position: absolute; right: var(--gut-r); top: calc(var(--eye) + .5 * var(--fs) + 46px); margin: 0; }
  html.js .fig { display: block; }
  html.js .fig .k { right: var(--gut-r); }
  html.js .fig .num { position: absolute; right: var(--gut-r); }
  /* the line beneath, set as a film's subtitle: under her, in the middle, on the page's own ground */
  html.js .flank .sub { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 19px); transform: translateX(-50%); width: max-content; max-width: min(34ch, 46vw);
    text-align: center; text-wrap: balance; font-size: 17px; font-weight: 400; color: var(--fg); text-shadow: 0 0 2px var(--bg), 0 0 10px var(--bg), 0 0 22px var(--bg); }
  html.js .flank::before { display: none; }
}

/* the formula's legend: the three pearls she has been floating in all along */
.legend { margin: 0 0 22px; display: grid; gap: 14px; }
.lg { display: grid; grid-template-columns: 22px 1fr auto; gap: 14px; align-items: center; font-size: 16px; }
.pearl { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset -3px -4px 6px rgba(120, 70, 80, .22), 0 1px 2px rgba(42, 31, 36, .15); }
.pearl.c { background: radial-gradient(circle at 34% 30%, #fff 0 14%, #fbf4ef 30%, #e9ddd8 100%); }
.pearl.h { background: radial-gradient(circle at 34% 30%, #fff 0 12%, #f3c4cc 34%, #d996a4 100%); }
.pearl.f { background: radial-gradient(circle at 34% 30%, #fff 0 12%, #f1dcb6 34%, #d6b682 100%); }
.lg .n { font: 500 22px/1 var(--mono); }
.ratio { margin-top: 26px; font: 500 clamp(40px, 4vw, 64px)/1 var(--mono); letter-spacing: -.02em; display: flex; gap: .3em; align-items: baseline; }
.ratio .colon { color: var(--fg-2); font-weight: 400; }

/* the routine: three labels, set like a pharmacy's */
.prods { margin-top: 26px; display: grid; gap: 0; }
.prod { display: grid; grid-template-columns: 34px 1fr auto; gap: 16px; align-items: baseline; padding-block: 16px; border-top: 1px solid var(--hair); }
.prod:last-child { border-bottom: 1px solid var(--hair); }
.prod .n { font: 400 11px/1 var(--mono); letter-spacing: .06em; color: var(--fg-2); }
.prod h3 { margin: 0; font-family: var(--serif); font-size: 26px; font-weight: 400; letter-spacing: -.035em; line-height: 1.05; }
.prod p { margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: var(--fg-2); max-width: 34ch; }
.prod .spec { font: 400 10.5px/1.55 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--fg-2); text-align: right; white-space: nowrap; }
.row-still { position: absolute; left: 0; top: 0; width: auto; max-width: none; pointer-events: none; opacity: var(--scrim, 0); }
.note p { margin: 0; font-size: 18px; line-height: 1.55; }
.note .case { display: inline-block; margin-top: 20px; font: 400 12px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid currentColor; }
.note .case:hover { color: var(--acc); }

/* short wide windows (a laptop with its browser bars): the lists close up so they stay under the header */
@media (min-width: 900px) and (max-height: 860px) {
  .panel { padding-bottom: calc(10 * var(--svh, 1svh)); }
  .prods { margin-top: 18px; }
  .prod { padding-block: 12px; }
  .prod h3 { font-size: 23px; }
  .cta { margin-top: 22px; }
}
@media (min-width: 900px) and (max-height: 700px) { .prod p { display: none; } }

/* phones and narrow windows: she holds the top of the screen, the words come in under her */
@media (max-width: 899px) {
  .links, .pills .pill:not(.dark), .hud.r { display: none; }
  .word .mk { width: 74px; height: 38px; }
  .pill { height: 40px; padding: 0 18px; font-size: 14px; }
  .panel { padding-block: 0 calc(env(safe-area-inset-bottom, 0px) + 56px); }
  .panel::before, .panel.right::before { inset: auto 0 0 0; height: calc(52 * var(--svh, 1svh)); background: linear-gradient(to top, var(--bg) 0%, var(--bg) 46%, transparent 100%); opacity: var(--scrim, 0); }
  .panel.right { justify-content: flex-start; }
  .panel::before, .panel.right::before { -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent); mask-image: linear-gradient(to bottom, #000 90%, transparent); }
  .copy, .hero .copy, .routine, .note { width: auto; position: relative; display: flex; flex-direction: column; align-items: flex-start; }
  html.js:not(.no-gl-type) .panel::before { display: none; }   /* drawn under the word, in the film */
  .mon { font-size: clamp(40px, 16vw, 92px); margin: 2px 0 30px; }   /* the rule runs in its margin */
  .mon span { display: block; }
  .mon[data-one] span { display: inline; }
  .kicker { margin-bottom: 12px; }
  .sub { margin-top: 2px; font-size: 15.5px; }
  .cta { margin-top: 18px; height: 46px; }
  .legend { margin: 0 0 12px; gap: 10px; }
  .ratio { margin-top: 14px; font-size: 34px; }
  .prods { margin-top: 14px; }
  .prod { padding-block: 11px; grid-template-columns: 26px 1fr auto; gap: 10px; }
  .prod h3 { font-size: 21px; }
  .prod p { display: none; }
  .note p { font-size: 16px; }
  .lights { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); right: auto; left: var(--gut); transform: none; display: flex; gap: 14px; }
  .lights button { grid-template-columns: 8px auto; min-height: 28px; gap: 7px; font-size: 9.5px; }
  .lights button::after { order: -1; }
  .hud.l { display: none; }
  .rd .v { font-size: 16px; } .rd .k { font-size: 9px; } .rd .u { font-size: 9.5px; }
  .rd.r .tag { left: 26px; } .rd.r .tag::before { left: -20px; width: 14px; }
  .rd.l .tag { right: 26px; } .rd.l .tag::before { right: -20px; width: 14px; }
  .box b { font-size: 9.5px; left: 5px; bottom: 4px; }
}
@media (max-width: 899px) and (max-height: 700px) { .sub { display: none; } }
@media (max-width: 899px) { html.js .boot { --mw: 150px; } .boot-cal { --rw: 284px; } .boot-cal li { font-size: 9px; gap: 6px; letter-spacing: .05em; } }
/* inside the portfolio's case page: the case scrolls the page, its own nav gives way to the portfolio's */
html.embed, html.embed body { overflow: hidden; }
html.embed .links, html.embed .pills, html.embed .hud.r, html.embed .note .case { display: none; }
html.embed .nav { padding-top: 84px; }
html.embed .panel { --top: 156px; --foot: 104px; }
html.embed .nav::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  .roll .st { transition: none; }
  .rd.probe i { animation: none; }
  .hud.ask .ping::after, .word:hover .mk-p, .word.lock .mk-c path { animation: none; }
  /* the loader stands still, drawn and set, and fades */
  .boot-mk .mk-l path, .boot-mk .mk-c path, .boot-cal { animation: none; stroke-dashoffset: 0; opacity: 1; }
  .boot-mk .mk-p, .boot.set .boot-mk .mk-p { animation: none; opacity: 1; }
  .boot-tick, .boot-cal li, .boot-cal li::after { transition: none; }
  html.js .boot.out { opacity: 0; transition: opacity .4s; }
  .boot.out .boot-g { clip-path: none; transition: none; }
  .boot.out .boot-sw { display: none; }
}