/* STEP-170: the home in chapters (draft 8, after shopify.com/editions). Two layouts in one sheet:
   - the base, a page that scrolls (phones ≤ 860 px, reduced motion, no script): the opening, then each chapter stacked — its photo
     with the giant word on it, then its curtain (the mist panel with the story);
   - html.scenes (home-chapters.js, a laptop without reduced motion): one fixed stage, one scene per scroll step. The opening fades
     away and its title and index dock left; each chapter's photo is drawn in neuron lines, then fills in from the subject outward while
     its giant word rises; the next step lifts the curtain. Light curtains turn the bar and the dock ink (html.onlight).
   No lines and no boxes: the numbers are big, thin and pale. */
:root { --ease: cubic-bezier(.7, 0, .2, 1); --mist: #E3E7EC; }

/* the title's accent and the type of the giant words: Mona Sans, wide bold with a thin narrow italic */
.hm-pitch h1 i, .dock-t i, .ch h2 i, .said i, .ask i, footer.site .fline i { font-style: italic; font-weight: 220; font-stretch: 80%; letter-spacing: -.01em; }

/* ---------------------------------------------------------- the opening: the chapter index, no frame, no lines */
.idx { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.idx a { display: grid; grid-template-columns: 58px 1fr; align-items: baseline; color: inherit; text-decoration: none; }
.idx span { font: 200 26px/1 var(--title); font-stretch: 125%; letter-spacing: -.02em; opacity: .3; }
.idx b { font: 720 21px/1.2 var(--title); font-stretch: 108%; letter-spacing: -.01em; }
@media (hover: hover) { .idx a:hover b { opacity: 1; } .idx a:hover span { opacity: .6; } }
.open-idx { margin: 24px 0 0; text-align: left; }
.hm-pitch .hm-acts { margin-top: 26px; }
.hm-down span { letter-spacing: .2em; }

/* ---------------------------------------------------------- the chapters, stacked (the base) */
.dock, .cwatch { display: none; }
.ch { position: relative; isolation: isolate; overflow-x: clip; color: var(--on-night); } /* the route and its signs never widen the page */
.ch .lay { position: relative; height: 72svh; min-height: 420px; overflow: hidden; }
.ch .lay img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--cx) var(--cy); }
.ch .lay .sk { display: none; }
.ch .shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 16, 24, .5), transparent 40%), linear-gradient(transparent 50%, rgba(10, 16, 24, .6)); }
.word { position: absolute; left: 16px; right: 16px; top: calc(72svh - .9em); margin: 0; z-index: 1; font: 840 clamp(48px, var(--wsize, 16vw), 300px)/.96 var(--title); font-stretch: 118%; letter-spacing: -.045em; color: rgba(244, 241, 234, .16); white-space: nowrap; overflow: hidden; /* STEP-203 §2: pale on a phone too, as on the stage */ pointer-events: none; }
.curtain { position: relative; color: var(--ink); }
.curtain .edge { position: absolute; left: 0; right: 0; top: -39px; width: 100%; height: 40px; display: block; }
.curtain .bg { position: absolute; inset: 0; background: var(--mist); }
.curtain .bg::after { content: ""; position: absolute; inset: 0; background: url("assets/landing/neuron-field.webp") center top / cover no-repeat; opacity: .35; -webkit-mask-image: linear-gradient(#000, transparent 60%); mask-image: linear-gradient(#000, transparent 60%); }
.curtain .num { position: absolute; right: 3vw; top: 4vh; margin: 0; font: 200 clamp(140px, 28vw, 460px)/.8 var(--title); font-stretch: 125%; letter-spacing: -.06em; color: var(--ink); opacity: .06; pointer-events: none; }
.ch .in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 64px 16px 72px; max-width: 1280px; margin: 0 auto; }
.ch .k { margin: 0; font: 500 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--cobalt); }
.ch h2 { margin: 10px 0 0; font: 780 clamp(32px, 3.8vw, 58px)/1.02 var(--title); font-stretch: 108%; letter-spacing: -.02em; text-wrap: balance; }
.ch .txt > p:not(.k):not(.raise) { margin: 16px 0 0; max-width: 30em; color: var(--soft); font-size: 18px; }
.foot-note { font-size: 13px !important; color: var(--muted) !important; }

/* 01 AVA's words as subtitles, and her voice */
.subs { display: grid; gap: 6px; align-content: center; }
.subs .who { margin: 14px 0 0; font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.said { margin: 0; }
.said.me { font: 500 20px/1.35 var(--sans); color: var(--soft); }
.said.ava { margin-bottom: 6px; max-width: 18em; font: 720 clamp(24px, 2.3vw, 36px)/1.15 var(--title); font-stretch: 106%; letter-spacing: -.015em; color: var(--cobalt); }
.play { all: unset; cursor: pointer; justify-self: start; margin-top: 22px; display: inline-flex; align-items: center; gap: 14px; }
.play[hidden] { display: none; } /* STEP-173 §5: a Hear AVA button whose audio file is not there yet */
.play:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 6px; border-radius: 999px; }
.play .pi { width: 52px; height: 52px; border-radius: 50%; background: var(--cobalt); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(26, 95, 214, .35); }
.play .pi svg { width: 20px; height: 20px; }
.play .wv { display: flex; gap: 4px; align-items: center; height: 28px; }
.play .wv i { width: 4px; height: 6px; border-radius: 2px; background: var(--cobalt); opacity: .55; }
.play.on .wv i { animation: ch-wv .9s ease-in-out infinite; opacity: 1; }
.play.on .wv i:nth-child(odd) { animation-delay: .15s; } .play.on .wv i:nth-child(3n) { animation-delay: .3s; }
@keyframes ch-wv { 50% { height: 26px; } }
.play .lb { font: 500 13px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }

/* 02 the memoir's photos loose on the page, drifting with the pointer (--qx, --qy) */
/* STEP-189 §1 (Ivana, 26 Oct 13:21: the quote ran over the workshop card's caption): the cards are sized by the box's width and, at
   most, by its height (--w: a share of the width, capped at 1.3 × that share of the height), so on a wide screen they no longer grow
   past the box; the quote sits under the box, 40 px clear of every card */
.loose { position: relative; height: min(56vh, 500px); min-height: 330px; container-type: size; margin-bottom: calc(40px + 2.5 * clamp(20px, 2.1vw, 32px)); }
.lp { position: absolute; left: var(--x); top: var(--y); width: min(calc(var(--w) * 100%), calc(var(--w) * 130cqh)); margin: 0; background: #F7F4EE; padding: 9px 9px 12px; border-radius: 4px; box-shadow: 0 24px 50px rgba(var(--ink-rgb), .22);
  transform: translate(calc(var(--qx, 0px) * var(--d) / 20), calc(var(--qy, 0px) * var(--d) / 20)) rotate(var(--r)); }
.lp img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; }
.lp figcaption { margin-top: 8px; font: 500 13px var(--sans); color: #4A5260; }
.ask { position: absolute; left: 0; right: 0; top: calc(100% + 40px); margin: 0; font: 720 clamp(20px, 2.1vw, 32px)/1.2 var(--title); font-stretch: 106%; letter-spacing: -.015em; color: var(--cobalt); }

/* 03 the son's phone, real size, the family app and the call chain arriving as notifications */
/* STEP-181 §11: 03's phone is the photorealistic mock-up (phone-mock.css); its lock screen sized in screen widths (--u) */
.pmock.phone3 { justify-self: center; width: min(290px, 70vw, calc(70vh * 578 / 1195)); }
.pmock-screen.ph-scr { padding: calc(16 * var(--u)) calc(5 * var(--u)) calc(5 * var(--u)); gap: calc(3.4 * var(--u)); background: linear-gradient(#22344A, #142233); color: var(--on-night); }
.ph-time { margin: 0 0 calc(2.6 * var(--u)) !important; text-align: center; font: 300 calc(19 * var(--u))/1 var(--title); font-stretch: 112%; }
.ph-card { padding: calc(4.6 * var(--u)); border-radius: calc(6 * var(--u)); background: rgba(232, 236, 241, .1); }
.ph-app { font: 500 calc(3.8 * var(--u)) var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cobalt-night); }
.ph-msg { margin-top: calc(2 * var(--u)) !important; font: 500 calc(5.4 * var(--u))/1.35 var(--sans); }
.note-n { padding: calc(3.4 * var(--u)) calc(4 * var(--u)); border-radius: calc(4.6 * var(--u)); background: rgba(241, 243, 246, .92); color: var(--ink); display: grid; gap: 2px; box-shadow: 0 8px 20px rgba(0, 0, 0, .2); }
.note-n b { font: 600 calc(4.4 * var(--u)) var(--sans); }
.note-n span { font: 500 calc(4.1 * var(--u)) var(--mono); color: var(--soft); }
.note-n.warm span { color: #B26A00; } .note-n.ok span { color: #1E7A4C; }

/* 04 the route home across the whole curtain, a dot walking it, street-sign labels at the turns */
.route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.route .road { fill: none; stroke: rgba(26, 95, 214, .12); stroke-width: 18; stroke-linecap: round; }
.route .walk { fill: none; stroke: var(--cobalt); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* STEP-177 §5: the route and its signs in their own band (never on the text): between the title and Marie's words on a phone (about
   220 px), the right side on the stage. Each sign stands on its point of the route: a slate pill with ring-blue words and a ring-blue
   dot where it touches the route; home in cobalt, its right edge on the route so it never leaves the screen. No green */
.band { position: relative; height: 220px; }
.sign { position: absolute; left: var(--sx); top: var(--sy); translate: -50% calc(-100% - 14px); padding: 6px 11px; border-radius: 999px; background: var(--night); color: #88BDE8; font: 600 12px/1.2 var(--sans); letter-spacing: .02em; white-space: nowrap; box-shadow: 0 6px 14px rgba(0, 0, 0, .15); }
.sign::after { content: ""; position: absolute; left: 50%; top: calc(100% + 14px); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #88BDE8; box-shadow: 0 0 0 3px rgba(136, 189, 232, .3); }
.sign.home { translate: calc(-100% + 12px) calc(-100% - 14px); background: var(--cobalt); color: #fff; }
.sign.home::after { left: calc(100% - 12px); background: var(--cobalt); box-shadow: 0 0 0 3px rgba(26, 95, 214, .3); }
/* STEP-178 §8: on a phone the road runs edge to edge across its band (steeper, being narrower); only Home shows at first, the two
   other signs appear one at a time as Marie's dot passes them (home-chapters.js: .passed) */
.pilled .band { margin: 0 -16px; }
.pilled .sign { left: var(--px); top: var(--py); } /* the phone's band: its own points (STEP-178 §8) */
.pilled .sign:not(.home) { opacity: 0; transition: opacity .5s; }
.pilled .sign.passed { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pilled .sign:not(.home) { opacity: 1; transition: none; } } /* no walk: every sign at once */
.pilled #c4 .dot { display: block; position: absolute; left: 0; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--cobalt); box-shadow: 0 0 0 5px rgba(26, 95, 214, .2); opacity: 0; }
.ch .dot { display: none; }
.facts { font: 500 13px/1.5 var(--mono) !important; color: var(--cobalt) !important; }

/* 05 the watch looks after itself: three lines beside the watch's own screen */
.selfcare { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; max-width: 30em; }
.selfcare li { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: baseline; transition: opacity .4s; }
.selfcare.cycling li { opacity: .45; } .selfcare.cycling li.now { opacity: 1; } /* only while the watch shows them in turn */
.selfcare b { font: 700 24px var(--title); color: var(--cobalt); }
.selfcare span { color: var(--soft); }

/* 06 The watch: the ten features */
.ch-end .k { color: var(--cobalt-night); }
.ch-end .txt > p:not(.k):not(.raise) { color: var(--on-night-body); }
/* STEP-181 §18: chapter 06 (the stacked page): the watch (a still, its screen painted on), then the ten features as a list, the spec line
   and the note */
/* STEP-178 §9: Wellness, a photo chapter (the lake), its curtain the night's. STEP-181 §21: the photo stays still (its watch's own calm
   face); the curtain holds the title, two lines and the family app on the phone (phone-mock.css) */
.ch-well .curtain { color: var(--on-night); }
.ch-well .curtain .bg { background: #0F1A26; }
.ch-well .curtain .bg::after { opacity: .5; mix-blend-mode: screen; }
.ch-well .curtain .num { color: var(--on-night); }
.photo-note { position: absolute; z-index: 2; top: calc(max(72svh, 420px) + 6px); right: 16px; margin: 0; font: 500 12px/1.4 var(--mono); letter-spacing: .06em; color: var(--on-night-soft); } /* stacked: just under the photo, on the curtain */
.well-k { margin: 0; font: 500 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cobalt-night); }
.well .well-t { text-wrap: balance; margin: 8px 0 0; font: 700 clamp(30px, 3.4vw, 54px)/1.04 var(--title); font-stretch: 112%; letter-spacing: -.015em; color: var(--on-night); }
.well .well-t i { font-weight: 220; font-stretch: 80%; letter-spacing: -.01em; }
.well-p { margin: 12px 0 0; max-width: 34em; font-size: 17px; line-height: 1.5; color: var(--on-night-body); }
.well-foot { margin: 18px 0 0; font-size: 13px; line-height: 1.45; color: var(--on-night-soft); }
.well-l { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 32px; max-width: 34em; color: var(--on-night-body); font-size: 16px; line-height: 1.45; }
.well-l li { display: flex; align-items: center; gap: 10px; } /* STEP-183 §7, STEP-184 §2: the seven readings, icon and label, in two columns */
@media (max-width: 480px) { .well-l { grid-template-columns: 1fr 1fr; column-gap: 16px; font-size: 15px; } .well-l li { align-items: flex-start; } }
.well-l b { color: var(--on-night); font-weight: 600; }
.ch-well .pmock { width: min(200px, 52vw); justify-self: center; margin-top: 8px; }

/* 07 the hand photo carries the last invitation */
.ch-end .lay { height: 100svh; max-height: 980px; }
.ch-end .ph.full { object-position: 62% 50%; }
.ch-end .shade { background: linear-gradient(90deg, rgba(10, 16, 24, .85), rgba(10, 16, 24, .35) 45%, transparent 65%), linear-gradient(rgba(11, 20, 30, 0) 70%, #0B141E); }
.ch-end .word { display: none; }
.ch-end .in { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; }
.ch-end h2 { font-size: clamp(44px, 6.4vw, 104px); line-height: .98; max-width: 9ch; color: #fff; }
.ch-end .raise { margin: 18px 0 0; color: var(--on-night-soft); font-size: 15px; }
.ch-end .hm-acts { margin-top: 28px; }

/* the chapter pill on a phone (and with reduced motion): the current chapter, a tap opens the index */
.pill { position: fixed; top: calc(var(--hm-bar, 64px) + 10px); left: 50%; transform: translateX(-50%); z-index: 19; display: none; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid rgba(136, 189, 232, .3); border-radius: 999px; background: rgba(15, 26, 38, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--on-night); font: 600 14px var(--sans); cursor: pointer; }
.pill .pill-n { font: 300 16px var(--title); font-stretch: 125%; color: var(--cobalt-night); }
.pill i { font-style: normal; font-size: 11px; opacity: .7; }
.pill-list { position: fixed; top: calc(var(--hm-bar, 64px) + 52px); left: 50%; transform: translateX(-50%); z-index: 19; width: min(320px, calc(100vw - 32px)); padding: 14px 18px; border-radius: 18px; background: rgba(15, 26, 38, .95); color: var(--on-night); box-shadow: 0 20px 50px rgba(0, 0, 0, .4); }
.pill-list[hidden] { display: none; }
.pill-list .idx { gap: 6px; }
html.pilled .pill { display: inline-flex; }
html.pilled .pill { transition: opacity .3s; } html.pilled.at-top .pill:not([aria-expanded="true"]) { opacity: 0; pointer-events: none; } /* STEP-183 §8: not over the opening */

@media (min-width: 861px) {
  .ch .in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; padding: 96px 6vw 96px; }
}

/* ========================================================== html.scenes: one fixed stage, one scene per scroll step */
html.scenes, html.scenes body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.scenes .hm-bar { position: fixed; left: 0; right: 0; top: 0; background: transparent; border-bottom-color: transparent; transition: color .6s; }
.scenes .hm-logo img, .scenes .sides a, .scenes .hm-tab, .scenes .hm-ask { transition: filter .6s, color .6s, border-color .6s; }
/* STEP-187 §1: on the opening only the Talk to AVA under the title; the bar's fades in (0.3 s) once that one has gone (home-chapters.js) */
#bar-talk { transition: opacity .3s, visibility .3s, filter .6s, color .6s, border-color .6s; }
html.scenes.s0 #bar-talk, html:not(.scenes):not(.hero-past) #bar-talk { opacity: 0; visibility: hidden; pointer-events: none; }
.scenes.onlight .hm-logo img { filter: invert(1) brightness(.25); }
.scenes.onlight .hm-tab, .scenes.onlight .sides a:not([aria-current]) { color: var(--ink); }
.scenes.onlight .hm-ask, .scenes.onlight .sides a[aria-current] { color: var(--cobalt); border-color: rgba(26, 95, 214, .45); }

/* the opening, and its way out */
.scenes .hm { position: fixed; inset: 0; z-index: 2; min-height: 0; padding-top: 88px; transition: opacity 1s var(--ease), transform 1.2s var(--ease), visibility 1.2s; }
/* STEP-174 §3: the opening fills the screen: the title block the left half, vertically centred; the watch about 70 % of the screen
   height, centred in the right half; the firing neurons (#brain) from edge to edge, around and behind it (home-site.js centres them
   on the watch); SOUND ON bottom-right, clear of the index (SKIP above it while the intro plays) */
.scenes .hm { display: flex; padding-bottom: 40px; }
.scenes .hm-stage { max-width: none; margin: 0; padding: 0 3vw 0 max(48px, 6vw); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2vw; align-self: stretch; }
.scenes .hm-orbit { position: static; height: 100%; }
.scenes .hm-orbit > .hm-watch { width: min(70vh, 70svh, 46vw); max-height: none; }
/* STEP-176 §4: the opening higher: the title block and the watch centred at 45 % of the screen height (the box 0 to 90 %), the watch's
   top at least 24 px under the 64 px bar (so at most 90 % of the height less 2 × 88 px) */
.scenes .hm { padding-top: 72px; padding-bottom: calc(10vh + 72px); padding-bottom: calc(10svh + 72px); } /* the box 72 px to 90 % − 72 px: its centre at 45 %, clear of the bar */
@media (max-height: 860px) { /* a short laptop: the title block a little smaller, so it fits between the bar and the 45 % centre */
  .scenes .hm-pitch h1 { font-size: clamp(34px, 6.4vh, 60px); margin: 8px 0 8px; }
  .scenes .hm-pitch > p { font-size: 16px; }
  .scenes .open-idx { margin-top: 12px; } .scenes .open-idx b { font-size: 18px; } .scenes .open-idx span { font-size: 22px; }
  .scenes .hm-pitch .hm-acts { margin-top: 14px; } .scenes .hm-pitch > p.raise { margin-top: 10px; }
}
.scenes .hm-orbit { position: relative; --ww: min(70vh, 70svh, calc(90vh - 180px), 46vw); }
.scenes .hm-orbit > .hm-watch { width: var(--ww); }
/* STEP-176 §5: the talk's row just under the watch, which stays where it is */
.scenes .hm-under { position: absolute; left: 0; right: 0; top: calc(50% + var(--ww) * .44); margin: 0 auto; }
.scenes #brain { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; height: 100dvh; }
.scenes .hm-snd { left: auto; right: 24px; }
.scenes .hm-skip { bottom: 70px; }
.scenes .hm-down { position: absolute; left: 50%; bottom: 22px; margin: 0; translate: -50% 0; }
.scenes:not(.s0) .hm { opacity: 0; transform: scale(1.06); visibility: hidden; pointer-events: none; }
.scenes.hm-off .hm { display: none; } /* gone once faded: its watch and its neurons stop drawing */

/* the dock: the title top-left, the index bottom-left, from the first step on */
.scenes .dock { position: fixed; top: 76px; bottom: 40px; left: max(24px, env(safe-area-inset-left, 0px)); z-index: 15; width: 240px; display: flex; flex-direction: column; justify-content: space-between; color: var(--fg, #fff); opacity: 0; transform: translateX(-14px); visibility: hidden; transition: opacity .8s var(--ease) .3s, transform .8s var(--ease) .3s, visibility .8s .3s, color .6s; }
.scenes:not(.s0) .dock { opacity: 1; transform: none; visibility: visible; }
.scenes.onlight { --fg: var(--ink); }
.dock-t { margin: 0; font: 780 22px/1.05 var(--title); font-stretch: 112%; letter-spacing: -.02em; text-wrap: balance; transition: opacity .4s; }
.dock-t.swap { opacity: 0; transition-duration: .25s; } /* STEP-177 §1: the line changes with the screen */
.scenes.foot .dock-t { opacity: 0; }
/* STEP-173 §3: the dock stays readable on bright photos: a soft dark fade behind it, only on the photo scenes */
.scenes .dock::before { content: ""; position: absolute; z-index: -1; left: calc(-1 * max(24px, env(safe-area-inset-left, 0px))); top: -76px; bottom: -40px; width: calc(100% + 140px); background: linear-gradient(90deg, rgba(8, 13, 20, .55), rgba(8, 13, 20, .3) 60%, transparent); opacity: 0; transition: opacity .8s; pointer-events: none; }
.scenes.photo .dock::before { opacity: 1; }
.scenes .hm-bar::after { content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; background: linear-gradient(rgba(8, 13, 20, .5), transparent); opacity: 0; transition: opacity .8s; pointer-events: none; }
.scenes.photo .hm-ask:not(:hover) { color: #fff; border-color: rgba(255, 255, 255, .6); background: rgba(8, 13, 20, .4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* STEP-178 §9: readable on the lake's bright sky too */
.scenes.photo .hm-bar::after { opacity: 1; } /* and the bar above it, on the same photos */ /* STEP-172 §3: the footer's large tagline is on screen: the dock's fades, so it shows once */
.dock-idx b { font-size: 18px; opacity: .45; transition: opacity .4s; }
.dock-idx span { font-size: 22px; opacity: .28; transition: color .6s, opacity .4s; }
.dock-idx a.now b, .dock-idx a.now span { opacity: 1; }
.dock-idx a.now span { color: var(--cobalt-night); }
.scenes.onlight .dock-idx a.now span { color: var(--cobalt); }

/* a chapter: its photo drawn, then filling in; the giant word; then the curtain */
.scenes .ch { position: fixed; inset: 0; z-index: 3; visibility: hidden; opacity: 0; transition: opacity .9s var(--ease), visibility .9s; }
.scenes .ch.on { visibility: visible; opacity: 1; }
.scenes .ch .lay { position: absolute; inset: -4%; height: auto; min-height: 0; overflow: visible; transform: translate(var(--qx, 0px), var(--qy, 0px)) scale(var(--sc, 1.08)); transition: transform 1.6s var(--ease); }
.scenes .ch.on .lay { --sc: 1; }
.scenes .ch .lay .sk { display: block; }
.scenes .ch .lay .ph:not(.full) { -webkit-mask-image: radial-gradient(circle at var(--cx, 70%) var(--cy, 45%), #000 var(--r, 0%), transparent calc(var(--r, 0%) + 18%)); mask-image: radial-gradient(circle at var(--cx, 70%) var(--cy, 45%), #000 var(--r, 0%), transparent calc(var(--r, 0%) + 18%)); }
/* STEP-173 §3: every chapter word translucent, as "Investors" was; it starts 40 px right of the dock and never runs under it
   (home-chapters.js scales it down to fit the width that is left) */
.scenes .word { color: rgba(244, 241, 234, .16); text-shadow: none; position: absolute; top: auto; left: calc(max(24px, env(safe-area-inset-left, 0px)) + 240px + 40px); right: 4vw; bottom: max(5vh, calc(96px - 5vh)); /* STEP-183 §1: always clear of the curtain's peeking edge (79 px tall, 5 % pushed down) */ transform: translateY(60%); opacity: 0; transition: transform 1.4s var(--ease) .5s, opacity 1s .5s; }
.scenes .ch.on .word { transform: none; opacity: 1; }
.scenes .ch.read .word { transform: translateY(-40%); opacity: 0; transition-delay: 0s; }
.scenes .curtain { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; transform: translateY(105%); transition: transform 1.25s var(--ease); }
.scenes .ch.read .curtain { transform: none; }
.scenes .curtain .edge { top: -79px; height: 80px; }
.scenes .curtain .num { top: 6vh; }
.scenes .curtain .in { height: 100%; max-width: none; padding: 90px 6vw 60px calc(240px + 6vw); }

/* what arrives on the curtain, one after the other (the base shows the final state) */
.scenes .curtain .txt, .scenes .subs > *, .scenes .lp, .scenes .ask, .scenes .note-n, .scenes .sign, .scenes .ph-card { opacity: 0; transform: translateY(14px); transition: opacity .7s, transform .9s var(--ease); }
.scenes .lp { transform: translate(calc(var(--qx, 0px) * var(--d) / 20), calc(var(--qy, 0px) * var(--d) / 20 + 40px)) rotate(var(--r)); transition: opacity .8s, transform 1.1s var(--ease); }
.scenes .ch.read .curtain .txt { opacity: 1; transform: none; transition-delay: .7s; }
.scenes .ch.read .subs > * { opacity: 1; transform: none; transition-delay: calc(1.1s + var(--i, 0) * .75s); }
.scenes .ch.read .subs .play { transition-delay: 3.4s; }
.scenes .ch.read .lp { opacity: 1; transform: translate(calc(var(--qx, 0px) * var(--d) / 20), calc(var(--qy, 0px) * var(--d) / 20)) rotate(var(--r)); transition-delay: calc(.9s + var(--i) * .3s); }
.scenes .ch.read .ask { opacity: 1; transform: none; transition-delay: 2.4s; }
.scenes .ch.read .ph-card { opacity: 1; transform: none; transition-delay: 1s; }
.scenes .ch.read .note-n { opacity: 1; transform: none; transition-delay: calc(1.8s + var(--i) * .8s); }
.scenes .ch.read .sign { opacity: 1; transform: none; transition-delay: 1.6s; }
.scenes .route .walk { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 3.2s ease .9s; }
.scenes .ch.read .route .walk { stroke-dashoffset: 0; }
.scenes .ch .dot { display: block; position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--cobalt); box-shadow: 0 0 0 6px rgba(26, 95, 214, .2); opacity: 0; }
.scenes #c4 .subs { align-self: end; padding-bottom: 6vh; }
.scenes #c4 .band { position: absolute; inset: 0; height: auto; } /* STEP-181 §1: the route across the whole curtain again, as in STEP-170 */
.scenes #c4 .in { align-items: start; }
.scenes #c4 .txt { padding-top: 4vh; }

/* 05: the one watch (the photo), on the curtain's right (STEP-203 §1: 06 is a photo chapter now) */
/* STEP-188 §2 (Ivana, 25 Oct 17:10: a glitch going into 05): the box never changes size, so the watch's canvas is never resized while a
   scene moves (its width used to animate, resizing the canvas on every frame): always 05's size; 05 shows it with a fade and a small
   scale */
.scenes .cwatch { display: block; position: fixed; z-index: 6; right: 6vw; top: 50%; width: min(65vh, 65svh, 40vw); aspect-ratio: 1; transform: translateY(-50%) scale(.92); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .8s var(--ease), transform 1.1s var(--ease), right 1.1s var(--ease), top 1.1s var(--ease), visibility .8s; }
.scenes.w5 .cwatch { opacity: 1; visibility: visible; transform: translateY(-50%); transition-delay: .6s; } /* STEP-174 §4: about 65 % of the screen height */
/* STEP-172 §0: the opening's own watch box, moved here (home-chapters.js): it fills the place, shown whatever the opening's state */
.cwatch > .hm-watch { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; margin: 0; opacity: 1; transition: none; }
.cwatch .halo { position: absolute; left: 50%; top: 51%; width: 80%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(136, 189, 232, .22), rgba(136, 189, 232, .06) 60%, transparent); }
.scenes .wspot { min-height: 40vh; }

/* STEP-178 §9: 07 Wellness on the stage: the lake, its watch's screen fading in once the photo has filled in around it, the note at the
   bottom right; then the curtain with the readings, vertically centred, five in a row */
.scenes .photo-note { position: absolute; left: 0; right: 0; bottom: 0; top: auto; z-index: 2; padding: 12px 4vw 14px; background: #0F1A26; text-align: right; color: var(--on-night-soft); opacity: 0; transition: opacity .8s; } /* STEP-181 §5: under the photo (the photo ends at this strip), never on it */
.scenes .ch-well .word { right: 44vw; bottom: calc(5vh + 44px); } /* STEP-181 §5, §19: over the lake, clear of the watch and the strip */
.scenes .ch.on:not(.read) .photo-note { opacity: 1; transition-delay: 1.6s; }
.scenes .ch-well .curtain .in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5vw; }
.scenes .ch-well .pmock { width: min(calc(76vh * 578 / 1195), 22vw); margin: 0; opacity: 0; transform: translateY(24px); transition: opacity .8s, transform 1s var(--ease); }
.scenes .ch-well.read .pmock { opacity: 1; transform: none; transition-delay: 1s; }
.scenes .ch-well .well { margin: 0; max-width: 1180px; opacity: 0; transform: translateY(14px); transition: opacity .7s, transform .9s var(--ease); }
.scenes .ch-well.read .well { opacity: 1; transform: none; transition-delay: .7s; }

/* 07 the hand photo, then the footer rises */
.scenes .ch-end .lay { height: auto; max-height: none; }
.scenes .ch-end .word { display: block; top: auto; bottom: 32px; left: calc(max(24px, env(safe-area-inset-left, 0px)) + 240px + 64px); transform: translateY(24px); }
.scenes .ch-end.on .word { transform: none; } /* STEP-183 §1: whole, under the raising line with 32 px clear above and below, sized to the room (home-chapters.js); no room, no word */
.scenes .ch-end .word.none { display: none; }
/* STEP-172 §2: the hand and the watch in the right 45 % of the screen (the photo set from 24 % across, its left edge under a dark
   fade), the text in the column between the dock and the watch: from the dock's right edge plus 64 px, vertically centred */
/* STEP-188 §1 (Ivana, 25 Oct 16:59): the wrist photo full-bleed, edge to edge, like the other chapters: behind the dock and the text
   only a soft dark fade (no solid panel, no edge), the wrist and the watch on the right */
.scenes .ch-end .lay .ph.full { left: 0; width: 100%; object-position: 0% 50%; transform: scale(1.45); transform-origin: 0% 52%; } /* the photo is 16:9 with its watch 45 % across: drawn 1.45 × from its left edge, the watch lands about 65 % across, clear of the text */
.scenes .ch-end .lay { background: #0B141E; }
.scenes .ch-end .shade { background: linear-gradient(90deg, rgba(11, 20, 30, .78) 0, rgba(11, 20, 30, .62) 22%, rgba(11, 20, 30, .32) 44%, rgba(11, 20, 30, 0) 64%), linear-gradient(rgba(11, 20, 30, 0) 72%, rgba(11, 20, 30, .55)); }
.scenes .ch-end .in { max-width: none; margin: 0; padding: 90px 4vw 60px calc(max(24px, env(safe-area-inset-left, 0px)) + 240px + 64px); justify-content: center; align-items: flex-start; }
.scenes .ch-end .txt { margin: 0; max-width: min(480px, 40vw - 140px); }
.scenes .ch-end h2 { font-size: clamp(44px, 5.6vw, 92px); }
.scenes .ch-end .txt { opacity: 0; transform: translateY(14px); transition: opacity .8s .6s, transform 1s var(--ease) .6s; }
.scenes .ch-end.on .txt { opacity: 1; transform: none; }
.scenes .scene-foot { position: fixed; inset: 0; z-index: 4; overflow-y: auto; overscroll-behavior: contain; transform: translateY(100%); visibility: hidden; transition: transform 1.2s var(--ease), visibility 1.2s; }
.scenes .scene-foot.on { transform: none; visibility: visible; }
.scenes .scene-foot .site-in { padding-left: calc(240px + 6vw); padding-right: 6vw; max-width: none; }
/* STEP-174 §7, STEP-181 §6: the footer in the chapters' type, on one screen at 1920 × 1080 and 1440 × 900: the tagline about 20 % smaller
   than STEP-174's, half the space under it; the sources one running line of small links; the promises one short line each */
footer.site .fline { max-width: 22ch; font: 780 clamp(28px, 3.5vw, 51px)/1.02 var(--title); font-stretch: 112%; letter-spacing: -.02em; }
.scenes .scene-foot .site-in { padding-top: 84px; padding-bottom: 20px; }
footer.site .fhead { padding-bottom: 13px; }
footer.site .fcols { padding-top: 24px; gap: 44px; }
footer.site .fcols > div > p:not(.srcs):not(.fsm) { margin: 0 0 10px; font-size: 15px; line-height: 1.5; }
footer.site .srcs { display: block; margin: 0 0 8px; font: 500 12.5px/1.75 var(--sans); color: var(--on-night-soft); }
footer.site .srcs a { display: inline; padding: 0; border: 0; border-radius: 0; font: inherit; color: var(--on-night-body); text-decoration: underline; text-decoration-color: rgba(136, 189, 232, .35); text-underline-offset: 3px; white-space: nowrap; }
footer.site .srcs span { margin: 0 4px; color: rgba(136, 189, 232, .5); }
footer.site .fsm { font-size: 12px; margin: 0; }
footer.site .plain.dotted { display: grid; gap: 5px; }
footer.site .plain.dotted li { font-size: 14px; line-height: 1.4; }
footer.site .plain.dotted li::before { margin-top: 7px; }
footer.site .fnav { display: grid; gap: 6px; }
footer.site .fbase { margin-top: 28px; padding-top: 16px; }
.finv { font: 500 13px/1.4 var(--sans); letter-spacing: 0; color: #9AA7B6; flex: 1 1 320px; }
@media (max-height: 760px) { .scenes .scene-foot .site-in { padding-top: 76px; } footer.site .fcols { padding-top: 22px; } }

/* the hint, under the opening */
.scenes:not(.s0) .hm-down { opacity: 0; pointer-events: none; }

/* the bar keeps its own colour above the dim of the Talk card */
.scenes.talk-open .dock { pointer-events: none; }

/* STEP-172 §2: on a phone the text goes under the photo, not over it */
@media (max-width: 860px) {
  .ch-end .in { position: static; padding: 28px 20px 56px; background: #0B141E; }
  .ch-end .lay { height: 62svh; }
  .ch-end .shade { background: linear-gradient(rgba(11, 20, 30, 0) 75%, #0B141E); }
}

/* STEP-177 §3: on a phone, SOUND ON within reach on the first screen: fixed at the bottom while the opening is in view */
.pilled.open-seen .hm-snd { position: fixed; left: auto; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 12; } /* STEP-183 §8: bottom-right, clear of the index */

/* STEP-183 §9 (Ivana, 22:33): on a phone, a stack: each chapter's photo stays pinned under the bar, full screen height, while its light
   panel (with its wave edge) slides up over it until it covers it; then the next chapter's photo is pinned in turn. The giant word stays
   on the photo and the panel covers it, never cutting through it. The photo anchored to its top, so her eyes are never under the bar.
   Sticky positioning only: nothing is laid out again while scrolling. With reduced motion, plain scrolling (the base above) */
@media (prefers-reduced-motion: no-preference) {
  html.pilled .ch:has(> .curtain) { --hb: var(--hm-bar, 64px); display: grid; grid-template-columns: minmax(0, 1fr); }
  html.pilled .ch:has(> .curtain) > .lay { grid-area: 1 / 1; position: sticky; top: var(--hb); height: calc(100svh - var(--hb)); min-height: 0; }
  html.pilled .ch:has(> .curtain) > .lay img { object-position: var(--cx) 0%; }
  html.pilled .ch:has(> .curtain) > .word { grid-area: 1 / 1; position: sticky; top: var(--hb); left: auto; right: auto; height: calc(100svh - var(--hb)); display: flex; align-items: flex-end; padding: 0 16px 64px; box-sizing: border-box; }
  html.pilled .ch:has(> .curtain) > .photo-note { grid-area: 1 / 1; align-self: end; position: sticky; bottom: 0; z-index: 1; }
  html.pilled .ch:has(> .curtain) > .curtain { grid-area: 2 / 1; z-index: 2; }
}

/* STEP-201: 08 · Technology as 05: the balcony scene, then the grey curtain. Left: the title, the line, how a conversation works (four
   short steps), the live/seed line and the link; right: the six parts as a 2 × 3 grid of small white cards and why on our servers.
   On a phone the grid is one column under the text */
.ch-tech .txt > p.tl:not(.k) { margin: 22px 0 0; max-width: none; font: 500 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--cobalt); }
.ch-tech .talk4 { margin: 10px 0 0; padding: 0 0 0 1.3em; display: grid; gap: 6px; max-width: 34em; color: var(--soft); font-size: 16px; line-height: 1.45; }
.ch-tech .talk4 li::marker { font: 600 14px var(--mono); color: var(--cobalt); }
.ch-tech .talk4 b { color: var(--ink); }
.ch-tech .txt > p.foot-note:not(.k) { margin: 18px 0 0; max-width: 40em; line-height: 1.55; }
.ch-tech .tech-go { color: var(--cobalt); font-weight: 600; white-space: nowrap; }
.ch-tech .tech6 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ch-tech .tech6 li { display: grid; gap: 3px; align-content: start; padding: 14px 16px 16px; background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(var(--ink-rgb), .07); }
.ch-tech .tech6 b { font: 700 18px/1.15 var(--title); font-stretch: 106%; color: var(--ink); }
.ch-tech .tech6 .tk { font: 500 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cobalt); }
.ch-tech .tech6 span:last-child { margin-top: 3px; color: var(--soft); font-size: 14.5px; line-height: 1.4; }
.ch-tech .why { margin: 14px 0 0; color: var(--soft); font-size: 14px; line-height: 1.5; }
@media (min-width: 600px) { .ch-tech .tech6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.scenes .ch-tech .parts { opacity: 0; transform: translateY(14px); transition: opacity .7s, transform .9s var(--ease); }
.scenes .ch-tech.read .parts { opacity: 1; transform: none; transition-delay: 1.1s; }
.scenes .ch-tech h2 { font-size: clamp(28px, min(3.4vw, 6vh), 58px); }
@media (max-height: 760px) {
  .scenes .ch-tech .curtain .in { padding-top: 78px; padding-bottom: 28px; }
  .scenes .ch-tech .txt > p:not(.k):not(.tl):not(.foot-note) { margin-top: 8px; font-size: 15px; line-height: 1.45; }
  .scenes .ch-tech .txt > p.tl:not(.k) { margin-top: 12px; }
  .scenes .ch-tech .talk4 { margin-top: 6px; font-size: 13.5px; line-height: 1.4; gap: 2px; }
  .scenes .ch-tech .txt > p.foot-note:not(.k) { margin-top: 10px; line-height: 1.45; }
  .scenes .ch-tech .tech6 li { padding: 10px 12px 12px; }
  .scenes .ch-tech .tech6 b { font-size: 16px; }
  .scenes .ch-tech .tech6 span:last-child { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .scenes .ch-tech .parts { transition: none; } }

/* STEP-203 §1: 06 · The watch as 05: the terrace scene, then the grey curtain: the title, the spec line and the note on the left; the ten
   features as a list like 05's (the name in cobalt, one line beside it), two columns on a laptop, one on a phone */
.ch-w6 .txt > p.spec:not(.k) { margin: 18px 0 0; font: 500 13px/1.6 var(--mono); letter-spacing: .04em; color: var(--soft); max-width: 36em; }
.ch-w6 .spec b { font-weight: 600; color: var(--ink); }
.ch-w6 .txt > p.foot-note:not(.k) { margin: 14px 0 0; max-width: 36em; line-height: 1.55; }
.ch-w6 .feats10 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 32px; }
.ch-w6 .feats10 li { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid rgba(var(--ink-rgb), .12); }
.ch-w6 .feats10 b { font: 700 19px/1.2 var(--title); font-stretch: 106%; color: var(--cobalt); }
.ch-w6 .feats10 span { color: var(--soft); font-size: 15px; line-height: 1.4; }
.ch-w6 .feats10 .tag { margin-left: 6px; font: 500 10px var(--mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 600px) { .ch-w6 .feats10 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(5, auto); } }
.scenes .ch-w6 .feats10 { opacity: 0; transform: translateY(14px); transition: opacity .7s, transform .9s var(--ease); }
.scenes .ch-w6.read .feats10 { opacity: 1; transform: none; transition-delay: 1.1s; }
@media (max-height: 760px) {
  .scenes .ch-w6 .curtain .in { padding-top: 80px; padding-bottom: 30px; }
  .scenes .ch-w6 .feats10 { row-gap: 8px; }
  .scenes .ch-w6 .feats10 li { padding-top: 7px; }
  .scenes .ch-w6 .feats10 b { font-size: 16px; }
  .scenes .ch-w6 .feats10 span { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .scenes .ch-w6 .feats10 { transition: none; } }
/* STEP-203 §2: on a phone 07's word lies over the lake's light rocks; there alone a little stronger (never solid) */
.ch-well .word { color: rgba(244, 241, 234, .3); }
.scenes .ch-w6 h2 { font-size: clamp(28px, min(3.4vw, 6vh), 58px); }