/* Mama Bloom — SHARED LAYER (every page). "A night into morning, on one thread".
   Tokens, type, header, footer, the close, the gold thread, ink-settle, grain, reduced motion.
   Home adds css/home.css; every inner page adds css/pages.css. Concept prototype, 28 Sep 2026. */

/* ------------------------------------------------------------------ fonts */
@font-face { font-family: "Grandeur"; src: url("../assets/fonts/grandeur.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../assets/fonts/fraunces-i-0.woff2") format("woff2"); font-weight: 300 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../assets/fonts/fraunces-n-1.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../assets/fonts/hanken-n-4.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ------------------------------------------------------------------ tokens (MamaColors / MamaSemanticTokens) */
:root {
  --noir: #1a1221;          /* mamaBackground dark — plum-noir */
  --noir-2: #24131d;
  --plum: #2e1a26;          /* mamaSurface dark — warm plum */
  --sand: #f9f2ef;          /* mamaBackground light — sand cream */
  --petal: #fff0f3;         /* mamaSurface light */
  --card: #fff8f9;          /* mamaCard light */
  --rose: #9b4e6a;          /* mamaBrand */
  --rose-night: #b86185;    /* mamaBrand dark */
  --cta: #bf4661;           /* live CTA */
  --cta-deep: #a93a55;
  --gold: #c9a96e;          /* mamaGold — decorative only */
  --gold-night: #d9b86b;    /* mamaGold dark */
  --gold-text: #7d6229;     /* mamaGoldText — gold as TYPE on light */
  --ink: #1e0d17;           /* mamaTextPrimary */
  --ink-2: #64414f;         /* mamaTextSecondary */
  --on-dark: #f5e8ef;       /* mamaOnDarkText */
  --on-dark-2: #c4a8b5;
  --divider: #edd5dc;

  --display: "Grandeur", "Fraunces", Georgia, serif;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(20px, 5vw, 96px);
  --wrap: 1160px;
  --nav-h: 68px;
  --vh: 1vh;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  /* The device composites' aspect ratio, in ONE place. The stand-ins are 700 x 1431. */
  --device-ratio: 700 / 1431;
  interpolate-size: allow-keywords;
}
@supports (height: 1svh) { :root { --vh: 1svh; } }

/* Themes. Every chapter is dark or light; text colours come from here only. */
[data-theme="dark"] {
  --fg: var(--on-dark); --fg-2: var(--on-dark-2); --eyebrow: var(--gold-night); --accent: var(--rose-night);
  --numeral: var(--gold-night); --line: rgba(245, 232, 239, .16); --line-strong: rgba(245, 232, 239, .34);
  --focus: var(--gold-night); --grain: url("../assets/img/grain-gold.webp");
}
[data-theme="light"] {
  --fg: var(--ink); --fg-2: var(--ink-2); --eyebrow: var(--rose); --accent: var(--rose);
  --numeral: var(--gold-text); --line: rgba(30, 13, 23, .13); --line-strong: rgba(30, 13, 23, .3);
  --focus: var(--rose); --grain: url("../assets/img/grain-ink.webp");
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--noir); scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; }
html.motion:not(.hash-landing) { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--noir); color: var(--on-dark);
  font: 400 1rem/1.6 var(--sans); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, ol, ul { margin: 0; }
::selection { background: var(--cta); color: #fff; }
:focus-visible { outline: 2px solid var(--focus, var(--gold-night)); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.anchor { position: absolute; top: 0; }
.skip {
  position: fixed; top: 12px; left: 12px; z-index: 300; padding: 12px 18px; border-radius: 999px;
  background: var(--sand); color: var(--ink); font-weight: 600; text-decoration: none;
  transform: translateY(-200%); transition: transform .2s var(--ease-out);
}
.skip:focus { transform: none; }

.wrap { position: relative; z-index: 2; width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* German: Grandeur draws ä ö ü WITHOUT their dots (font defect, standing caveat) and has no
   en/em dash or middle dot. As on the live site, German display type falls back to Fraunces. */
html[lang|="de"] { --display: "Fraunces", Georgia, serif; }

/* The wordmark is Grandeur in every language ("Mama Bloom" has no umlauts). */
.nav__brand, .footer__brandline, .footer__word { font-family: "Grandeur", "Fraunces", Georgia, serif !important; }

/* ------------------------------------------------------------------ type */
.eyebrow {
  display: flex; align-items: center; gap: 14px; margin: 0 0 clamp(14px, 1.6vw, 20px);
  color: var(--eyebrow); font: 600 .72rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase;
}
.folio { display: inline-flex; align-items: center; gap: 12px; font: 400 .95rem/1 var(--serif); letter-spacing: .02em; color: var(--numeral); }
.folio::after { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .55; }
.display {
  font: 400 clamp(2.3rem, 1.15rem + 4.1vw, 5rem)/.98 var(--display);
  letter-spacing: -.03em; text-wrap: balance; color: var(--fg);
}
.title {
  font: 400 clamp(2rem, 1.15rem + 3.1vw, 4.2rem)/1 var(--display);
  letter-spacing: -.028em; text-wrap: balance; color: var(--fg);
}
/* The italic rose accent: used exactly twice — the hero and the final call to action. */
.display em, .title em { font-family: var(--serif); font-style: italic; font-weight: 380; letter-spacing: -.02em; color: var(--accent); }
.lede { max-width: 46ch; color: var(--fg-2); font-size: clamp(1.02rem, .95rem + .32vw, 1.2rem); line-height: 1.62; text-wrap: pretty; }
.n { font: 400 .9rem/1 var(--serif); color: var(--numeral); font-variant-numeric: lining-nums; }

/* ------------------------------------------------------------------ micro-interactions (.pressEffect, hovers) */
.press { transition: transform .15s var(--ease-out), opacity .15s var(--ease-out), background-color .3s, box-shadow .4s, border-color .3s, color .3s; }
.press:active { transform: scale(.98); opacity: .92; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 52px; padding: 0 26px;
  border-radius: 999px; border: 0; font: 600 .98rem/1 var(--sans); letter-spacing: .01em; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn--primary { background: var(--cta); color: #fff; box-shadow: 0 12px 30px -14px rgba(191, 70, 97, .75), inset 0 1px 0 rgba(255, 255, 255, .18); }
.btn--primary:hover { background: var(--cta-deep); box-shadow: 0 16px 40px -14px rgba(191, 70, 97, .9), 0 0 0 6px rgba(201, 169, 110, .14), inset 0 1px 0 rgba(255, 255, 255, .2); }
.btn__arrow { display: inline-block; transition: transform .35s var(--ease); }
.btn:hover .btn__arrow { transform: translate(2px, -2px); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: .86rem; }
.btn--lg { min-height: 60px; padding: 0 34px; font-size: 1.04rem; }
@media (pointer: coarse) { .btn--sm { min-height: 44px; } }
.link-quiet {
  color: var(--fg); font-weight: 500; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px;
  text-decoration-color: var(--line-strong); transition: text-decoration-color .3s, color .3s;
}
.link-quiet:hover { text-decoration-color: var(--gold); }
.round {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-strong); background: transparent; color: var(--fg); font-size: 1.05rem;
}
.round:hover { border-color: var(--gold); }
.round:disabled { opacity: .35; cursor: default; }

/* ------------------------------------------------------------------ nav */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h); color: var(--fg); transition: transform .5s var(--ease), color .4s; }
.nav::before {
  content: ""; position: absolute; inset: 0; background: var(--nav-bg, var(--noir)); opacity: 0;
  border-bottom: 1px solid var(--line); transition: opacity .4s, background-color .4s;
}
.nav.is-scrolled::before { opacity: 1; }
/* Light chapters: a calm frosted cream with a hairline, so a heading passing beneath
   softens into paper instead of ghosting through the links (founder feedback, 28 Sep). */
.nav[data-theme="light"]::before {
  background: var(--nav-bg, #f9f2ef);
  border-bottom-color: rgba(30, 13, 23, .1);
}
.nav[data-theme="light"].is-scrolled::before { opacity: 1; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nav[data-theme="light"]::before { -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nav[data-theme="light"]::before { background: var(--nav-bg, #f9f2ef); }
}
.nav.is-hidden { transform: translateY(-100%); }
.nav__inner { position: relative; height: 100%; width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.nav__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; font: 400 1.42rem/1 var(--display); letter-spacing: -.01em; white-space: nowrap; }
.nav__brand img { width: 36px; height: auto; }
.nav__links { display: none; }
.nav__tools { display: flex; align-items: center; gap: 14px; }
.lang { display: none; gap: 2px; font: 600 .74rem/1 var(--sans); letter-spacing: .12em; }
.lang a { display: inline-grid; place-items: center; min-width: 32px; min-height: 32px; border-radius: 999px; text-decoration: none; color: var(--fg-2); }
.lang a[aria-current="page"], .lang button[aria-pressed="true"] { color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-strong); }
.lang button { display: inline-grid; place-items: center; min-width: 32px; min-height: 32px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--fg-2); font: inherit; letter-spacing: inherit; cursor: pointer; }
/* One URL, two languages (legal pages, press kit, contact, 404): the header switch shows one set. */
html.lang-de [data-lang="en"], html:not(.lang-de) [data-lang="de"] { display: none !important; }
.nav__menu { display: inline-grid; place-content: center; gap: 6px; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; cursor: pointer; }
.nav__menu span { display: block; width: 16px; height: 1.5px; background: currentColor; transition: transform .35s var(--ease); }
.nav__menu[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav__menu[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

@media (max-width: 1023.98px) {
  .nav__links {
    position: fixed; inset: 0; z-index: -1; display: flex; flex-direction: column; justify-content: center; gap: 4px;
    padding: calc(var(--nav-h) + 24px) var(--gutter) 40px; background: var(--noir); color: var(--on-dark);
    opacity: 0; visibility: hidden; transition: opacity .35s var(--ease-out), visibility 0s linear .35s;
  }
  .nav__links.is-open { opacity: 1; visibility: visible; transition: opacity .35s var(--ease-out); }
  .nav__links > a { font: 400 clamp(2rem, 8vw, 2.8rem)/1.25 var(--display); text-decoration: none; padding: 6px 0; }
  .lang--menu { display: flex; margin-top: 28px; --fg: var(--on-dark); --fg-2: var(--on-dark-2); --line-strong: rgba(245, 232, 239, .34); }
  body.menu-open { overflow: hidden; }
  .nav.menu-is-open { color: var(--on-dark); }
  .nav.menu-is-open::before { opacity: 0; }
}
@media (min-width: 1024px) {
  .nav__links { display: flex; align-items: center; gap: clamp(18px, 2vw, 30px); font: 500 .88rem/1 var(--sans); }
  .nav__links a { position: relative; padding: 10px 0; color: var(--fg); text-decoration: none; opacity: .86; transition: opacity .3s; }
  .nav__links a:hover, .nav__links a[aria-current="location"] { opacity: 1; }
  .nav__links a::after {
    content: ""; position: absolute; left: 50%; bottom: 0; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
    background: var(--gold); transform: scale(0); transition: transform .4s var(--ease);
  }
  .nav__links a[aria-current="location"]::after { transform: scale(1); }
  .nav__menu, .lang--menu { display: none; }
  .nav__tools .lang { display: flex; }
  .nav__links a { padding: 15px 0; }
  .nav__links a::after { bottom: 5px; }
}
@media (min-width: 1024px) and (max-width: 1059.98px) { .nav__links { gap: 16px; } }
.nav__brand { min-height: 44px; }
.nav .btn--sm { min-height: 44px; }
.lang a { position: relative; min-height: 44px; }
.lang a[aria-current="page"] { box-shadow: none; }
.lang a[aria-current="page"]::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px;
  border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); pointer-events: none;
}

/* ------------------------------------------------------------------ chapters: one continuous evening */
main { position: relative; display: block; }
.ch {
  position: relative; overflow-x: clip;
  padding: var(--pad-top, clamp(72px, 12vw, 190px)) 0 var(--pad-bottom, clamp(40px, 7vw, 110px));
  color: var(--fg);
  /* The colour moves with the story: each chapter opens by blending out of the one before. */
  background: linear-gradient(to bottom, var(--from, var(--bg)) 0, var(--bg) var(--blend, 120px), var(--bg) 100%);
}
.ch::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--grain) repeat 0 0 / 256px 256px; }
.dust { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }

.ch--close { --bg: var(--noir); --from: var(--close-from, #22131d); --blend: 200px; --pad-top: clamp(112px, 15vw, 230px); --pad-bottom: clamp(72px, 11vw, 170px); }

/* ------------------------------------------------------------------ device (Apple bezel composites drop in here) */
.device { position: relative; }
.device img { width: 100%; height: auto; }
.device::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -3%; height: 7%; z-index: -1;
  background: radial-gradient(closest-side, rgba(10, 4, 10, .5), transparent); pointer-events: none;
}

/* ------------------------------------------------------------------ 07 · the calm close */
.close { text-align: center; }
.close__inner { display: flex; flex-direction: column; align-items: center; }
.close__mark { width: clamp(76px, 7vw, 96px); height: auto; margin-bottom: clamp(20px, 2.5vw, 30px); }
.close .eyebrow { justify-content: center; }
.close__title { max-width: 14ch; font-size: clamp(2.4rem, 1.2rem + 4.8vw, 6rem); line-height: .98; }
.close__body { max-width: 40ch; margin: clamp(16px, 2vw, 22px) auto clamp(26px, 3vw, 34px); color: var(--fg-2); font-size: clamp(1.02rem, .95rem + .32vw, 1.2rem); }
.close--nobody .close__title { margin-bottom: clamp(28px, 3.4vw, 44px); }
.close--mark { --pad-top: clamp(80px, 10vw, 150px); --pad-bottom: clamp(56px, 7vw, 110px); }
.close--mark .bloom { margin-bottom: 0; }

/* ------------------------------------------------------------------ footer */
.footer { position: relative; overflow: hidden; padding-top: clamp(48px, 7vw, 96px); color: var(--on-dark); background: linear-gradient(var(--noir), #130c17); }
.footer::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--grain) repeat 0 0 / 256px 256px; }
.footer__grid { display: grid; gap: 36px; }
.footer__brandline { display: inline-flex; align-items: center; gap: 12px; color: var(--fg); text-decoration: none; font: 400 1.8rem/1 var(--display); }
.footer__brandline img { width: 40px; }
.footer__brand p { margin-top: 14px; max-width: 36ch; color: var(--fg-2); font-size: .95rem; }
.footer__brand .footer__company { margin-top: 6px; font-size: .85rem; }
.footer__social { display: flex; gap: 22px; margin-top: 20px; }
.footer__social a, .footer__nav a { color: var(--fg-2); text-decoration: none; transition: color .3s; }
.footer__social a { display: inline-flex; gap: 6px; align-items: center; min-height: 40px; }
.footer__social a:hover, .footer__nav a:hover { color: var(--fg); }
.footer__nav { display: flex; flex-direction: column; }
.footer__nav strong { margin-bottom: 10px; color: var(--eyebrow); font: 600 .7rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.footer__nav a { display: flex; align-items: center; min-height: 36px; font: 400 1rem/1.25 var(--serif); }
@media (min-width: 768px) { .footer__nav a { min-height: 40px; } }
.footer__ai { margin-top: clamp(32px, 5vw, 64px); padding-top: 26px; border-top: 1px solid var(--line); max-width: 84ch; color: var(--fg-2); font-size: .85rem; line-height: 1.6; }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding: 18px 0 8px; color: var(--fg-2); font-size: .78rem; }
.footer__word {
  /* The whole word shows: no negative bottom margin, a full line box, and room below
     (founder, 28 Sep: the bled-off wordmark read as cut off). */
  position: relative; margin: clamp(10px, 2vw, 30px) 0 0; padding-bottom: clamp(18px, 3.5vw, 48px);
  text-align: center; white-space: nowrap;
  font: 400 min(18.5vw, 17rem)/1.05 var(--display); letter-spacing: -.045em;
  background: linear-gradient(180deg, #c9a96e 0%, #9a6b7f 70%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; }
.footer__brand { grid-column: 1 / -1; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); } .footer__brand { grid-column: auto; } }

/* ------------------------------------------------------------------ the close: the thread ties the bloom (every page) */
.bloom { position: relative; width: clamp(150px, 15vw, 224px); aspect-ratio: 862 / 759; margin-bottom: clamp(26px, 3vw, 40px); }
.bloom__fill, .bloom__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.bloom__fill { opacity: 0; }
.bloom__lines { overflow: visible; }
.bloom__lines .bl { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.bloom__lines .bl--outline { stroke: var(--gold-night); stroke-width: 1.4; }
.bloom__lines .bl--vein { stroke: #eab8c9; stroke-width: 1; }
.no-js .bloom__fill, .reduce .bloom__fill { opacity: 1; }
.no-js .bloom__lines, .reduce .bloom__lines { display: none; }

/* ------------------------------------------------------------------ the CTA: a gold thread ties the action */
@property --trace { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.btn--primary { position: relative; isolation: isolate; }
.btn--primary::after {
  content: ""; position: absolute; inset: -5px; z-index: -1; border-radius: 999px; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from 90deg, #d9b86b 0 var(--trace), transparent var(--trace) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: --trace .75s var(--ease);
}
.btn--primary:hover::after { --trace: 100%; }
.reduce .btn--primary::after { transition: none; }

/* ------------------------------------------------------------------ between pages: one continuous journey
   Cross-document View Transitions (no JS router; unsupported browsers simply navigate). The header stays
   put, the title band blends from the old page's hour to the new one, the H1 moves into place, the gold
   thread and the mark carry across, the rest cross-fades softly. Reduced motion: none, instant. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.nav { view-transition-name: mb-nav; }
.band, .hero { view-transition-name: mb-band; }
.band__title, .hero .display { view-transition-name: mb-title; }
#thread { view-transition-name: mb-thread; }
.bloom, .close__mark { view-transition-name: mb-mark; }
::view-transition-group(mb-nav) { animation-duration: 0s; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: cubic-bezier(0, 0, .2, 1); }
::view-transition-group(mb-band), ::view-transition-group(mb-thread), ::view-transition-group(mb-mark) { animation-duration: .6s; }
::view-transition-group(mb-title) { animation-duration: .55s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(mb-title), ::view-transition-new(mb-title) { height: 100%; }
/* Fade through, never a double exposure: the old heading, band and page are gone before the new ones arrive, so two
   headlines are never legible on top of each other mid-blend (5 Oct 2026). */
@keyframes mb-vt-out { to { opacity: 0; } }
@keyframes mb-vt-in { from { opacity: 0; } }
::view-transition-old(root), ::view-transition-old(mb-band), ::view-transition-old(mb-title) {
  animation: mb-vt-out calc(var(--vt, 1) * .18s) cubic-bezier(0, 0, .2, 1) both; mix-blend-mode: normal;
}
::view-transition-new(root), ::view-transition-new(mb-band), ::view-transition-new(mb-title) {
  animation: mb-vt-in calc(var(--vt, 1) * .3s) cubic-bezier(0, 0, .2, 1) calc(var(--vt, 1) * .18s) both; mix-blend-mode: normal;
}
/* A slow-motion hook for filming the transition (?vtslow=1): never used by visitors. */
html.vt-slow { --vt: 8; }
html.vt-slow::view-transition-group(*) { animation-duration: 3.2s !important; }

/* ------------------------------------------------------------------ the gold thread
   Lanes: every [data-run] says where the thread may run beside it (--lane: left | right |
   mid | end) and how much it may wander (--amp, 1 = home, 0 = a straight reading line).
   Pages set these per breakpoint; mb-core.js builds the path from them. */
[data-run] { --lane: left; --amp: 1; }
[data-bead] { --bead: 1; }
.thread { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.thread__path { fill: none; stroke: url(#thread-ink); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.thread__tip circle, .thread__knot { fill: var(--gold-night); }
.thread__tip .thread__halo { fill: rgba(217, 184, 107, .2); }
.thread__tip { opacity: 0; transition: opacity .6s; }
.thread.is-drawing .thread__tip { opacity: 1; }
.thread__beads circle { fill: var(--sand); stroke: #b08d4a; stroke-width: 1.2; transform-box: fill-box; transform-origin: center; transition: transform .6s var(--ease), fill .6s; }
.thread__beads circle.is-passed { fill: var(--gold); }
.thread__beads circle.is-active { fill: var(--gold); transform: scale(1.7); }
.no-js .thread { display: none; }

/* ------------------------------------------------------------------ ink-settle (the app's own motion) */
.motion [data-ink] .w { display: inline-block; opacity: 0; filter: blur(1.5px); transition: opacity .9s var(--ease-out), filter .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 34ms + var(--d, 0ms)); }
.motion [data-ink].is-settled .w { opacity: 1; filter: blur(0); }
.motion [data-settle] { opacity: 0; filter: blur(1.5px); transition: opacity .9s var(--ease-out) var(--d, 140ms), filter .9s var(--ease-out) var(--d, 140ms); }
.motion [data-settle].is-settled { opacity: 1; filter: blur(0); }
.motion .promises li:not(.is-settled)::before { transform: scaleX(0); }
.shot [data-ink] .w, .shot [data-settle] { transition-duration: 0s !important; transition-delay: 0s !important; }

/* ------------------------------------------------------------------ reduced motion: the same page, fully still */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.reduce *, .reduce *::before, .reduce *::after { animation: none !important; transition: none !important; }
.reduce .thread__tip { display: none; }

/* ------------------------------------------------------------------ forced colours */
@media (forced-colors: active) {
  .thread, .dust, .cursor, .dawn, .ch::before { display: none; }
  .btn { border: 1px solid ButtonText; }
}