/* NAMCHE landing - page styles. Also the shared chrome of every brand page
   (layouts/Brand.astro loads this file).
   Every value comes from the tokens: the vendored design system (ds/tokens/) and the site's own tokens
   (tokens/site/, loaded as css/tokens.css), which also name the places where the reduced manual and the
   brief decide differently from the DS, and hold the layout grid.
   Sections, in cascade order: shared voices, CTA, Nav, scenes 01–12, footer, cursor, relations map,
   small screens (max-width: 899px), reduced motion, production bar.
   The last two override the sections above them. A change to a section is unfinished until that class
   is checked in both. Search the class. Map: docs/architecture.md. */

*,*::before,*::after{box-sizing:border-box}
/* A link's line is full strength and --stroke-text thick (Michael, 2026-10-01); the DS draws it at 40 % in the font's own thickness */
a{text-decoration-thickness:var(--stroke-text);text-decoration-color:currentColor}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ground-dark);
  color:var(--gaia-selene);
  font:var(--role-text-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Running text hyphenates with the page language (html lang). Display type, labels, the nav,
   the wordmark and coordinates are not in this list, so they stay unbroken. */
.hero__note,
.reveal__intro,
.bigtype__sub,
.about__sub,
.service__text,
.step__text,
.insight__text,
.closing__text,
.m-text{
  -webkit-hyphens:auto;
  hyphens:auto;
}
img,video,svg{display:block;max-width:100%}
i{font-style:normal} /* every <i> here is a drawn shape (grid lines, stars, legend symbols), never italic text: no Italic file is fetched */
:focus-visible{outline:var(--space-2) solid var(--focus-ring);outline-offset:var(--space-4)}

/* stylelint-disable-next-line namche/token-only -- offscreen: the skip link waits off the screen until it has focus */
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:var(--edge);top:var(--space-16);z-index:30;padding:var(--space-8) var(--space-16);background:var(--gaia-selene);color:var(--ink-on-gaia-selene)}

/* Grounds. Light is the DS default (Selene); dark re-points the DS semantics via .dark and
   sits on the brief's #111111 instead of the DS night Erebos. */
.scene{
  position:relative;
  padding:var(--grid-x) var(--edge);
  background:var(--surface-page);
  color:var(--text-primary);
  overflow-x:clip; /* fly-ins travel sideways; clip keeps sticky pins working */
}
.scene.dark,.footer.dark,.nav.dark{--surface-page:var(--ground-dark)}
/* The DS .dark class re-points the accent to Lapislazuli 300. The ring is resolved once at :root, so it
   is read again here and follows that accent (Michael, 2026-10-02). */
.dark{--focus-ring:var(--accent-system)}

/* ── Shared voices ─────────────────────────────────────────────── */
.label{
  display:flex;align-items:center;gap:var(--space-32);
  margin:0 0 var(--space-32);
  font:var(--role-label-meta);
  text-transform:var(--role-label-case);
}
.label__bullet{flex:none;width:var(--bullet-square-sm);height:var(--bullet-square-sm);background:currentColor}
.label__code{margin-left:auto}
.label--split{justify-content:space-between}
.label__start{display:flex;align-items:center;gap:var(--space-32);margin:0}
.label__end{display:inline-flex;align-items:center;min-height:calc(var(--space-8) * 6);color:inherit;text-decoration:none}
.label__end:hover{color:var(--text-link-hover)}

.h2{
  margin:0;
  font-family:var(--font-display);font-weight:var(--weight-display);
  --fs:clamp(var(--type-display),4vw,var(--type-stat));font-size:var(--fs);
  line-height:var(--leading-hero);line-height:round(nearest,calc(var(--fs) * var(--leading-hero)),var(--baseline));letter-spacing:var(--tracking-display);
  text-wrap:balance;
}

.coords{
  display:flex;align-items:center;gap:var(--space-16);
  margin:var(--space-32) 0 0;
  font:var(--role-label-meta);
  text-transform:var(--role-label-case);
}
.coords__dot{flex:none;width:var(--bullet-dot);height:var(--bullet-dot);border-radius:var(--radius-pill);background:currentColor}
.coords--bar{width:fit-content;padding:var(--space-8) var(--space-16);background:var(--gaia-selene);color:var(--ink-on-gaia-selene)}
.coords--responsive{max-width:100%;min-width:0}
.coords--responsive .coords__text{min-width:0;overflow:hidden}
.coords__static{display:inline-block;white-space:nowrap}
.coords__loop{display:none}
.coords--responsive.is-compact .coords__static{position:absolute;visibility:hidden;pointer-events:none}
.coords--responsive.is-compact .coords__loop{display:grid;overflow:hidden}
.coords__line{grid-area:1 / 1;white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
  .coords--responsive.is-compact .coords__line{animation:coords-loop calc(var(--dur-slow) * 8) var(--ease-standard) infinite}
  .coords--responsive.is-compact .coords__line+.coords__line{animation-delay:calc(var(--dur-slow) * -4)}
}
@media (prefers-reduced-motion:reduce){
  .coords--responsive.is-compact .coords__loop{display:flex;flex-direction:column}
  .coords--responsive.is-compact .coords__line{grid-area:auto}
}
@keyframes coords-loop{
  0%,42%{opacity:1;transform:none}
  50%,92%{opacity:0;transform:translateY(calc(var(--space-8) * -1))}
  100%{opacity:1;transform:none}
}

.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter)}
.pair__shot{position:relative;min-width:0}
.m-cap{font-family:var(--font-mono);font-weight:var(--weight-mono);font-size:var(--type-mono-caption);line-height:var(--leading-prose);line-height:round(nearest,calc(var(--type-mono-caption) * var(--leading-prose)),var(--baseline));text-transform:uppercase;margin:0}
.synth{display:inline-flex;align-items:center;gap:var(--space-8);margin:var(--space-8) 0 0;color:inherit;font-family:var(--font-mono);font-weight:var(--weight-mono);font-size:var(--type-mono-caption);line-height:var(--leading-prose);line-height:round(nearest,calc(var(--type-mono-caption) * var(--leading-prose)),var(--baseline));text-transform:uppercase;text-decoration:none}
.synth--overlay{position:absolute;z-index:2;left:var(--space-16);bottom:var(--space-16);margin:0;padding:var(--space-4) var(--space-8);background:var(--contrast-text-dark);color:var(--gaia-selene)}
.synth:hover span,.synth:focus-visible span{text-decoration:underline;text-decoration-thickness:var(--stroke-text);text-underline-offset:var(--underline-offset)}
.m-cap .synth{margin:0}
.ai-symbol{fill:currentColor;flex:none;width:0.9em;height:0.9em}
.ai-symbol--large{width:var(--space-32);height:var(--space-32)}
.imprint__ai{display:flex;align-items:flex-start;gap:var(--space-16);margin-top:var(--space-16)}
.pair__img{display:block;width:100%;height:round(nearest,calc(var(--half) * 5 / 4),var(--baseline));object-fit:cover;background:var(--pair-fill,var(--gaia-erebos))}
/* fallback until the focal crop runs (site.js, data-focus on the img) */
.pair__img--eye{object-position:58% 42%}
.pair__img--ear{object-position:50% 30%}
.pair__img--fingertip{object-position:50% 0%}
.pair__img--phone{object-position:50% 18%}

/* ── CTA: the DS notched pill (--shape-pill-notch), stretched without distorting its ends ── */
.cta{
  --cta-fill:var(--text-primary);
  --cta-ink:var(--surface-page);
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;
  height:var(--target);padding:0 var(--space-16) 0 var(--cta-label);
  color:var(--cta-ink);text-decoration:none;
  font:var(--role-label-nav);
  text-transform:var(--role-label-case);white-space:nowrap;
}
.cta__shape{position:absolute;inset:0;z-index:-1}
.cta__shape::before,.cta__shape::after{
  content:"";position:absolute;top:0;bottom:0;background:var(--cta-fill);
  transition:background-color var(--dur-base) var(--ease-standard);
}
.cta__shape::before{
  /* stylelint-disable-next-line namche/token-only -- geometry: the pill overlaps its notch mask */
  left:0;width:calc(var(--cta-label) - 3px);
  -webkit-mask:var(--shape-pill-notch) left center/auto 100% no-repeat;
  mask:var(--shape-pill-notch) left center/auto 100% no-repeat;
}
.cta__shape::after{
  /* stylelint-disable-next-line namche/token-only -- geometry: the notch overlaps the pill */
  left:calc(var(--cta-label) - 4px);right:0;
  -webkit-mask:linear-gradient(var(--namche-black) 0 0) left/calc(100% - var(--space-32)) 100% no-repeat,var(--shape-pill-notch) right center/auto 100% no-repeat;
  mask:linear-gradient(var(--namche-black) 0 0) left/calc(100% - var(--space-32)) 100% no-repeat,var(--shape-pill-notch) right center/auto 100% no-repeat;
}
.cta__arrow{position:absolute;left:0;top:0;bottom:0;width:var(--cta-arrow);display:grid;place-items:center;font-family:var(--font-sans);font-size:var(--type-body);transition:translate var(--dur-base) var(--ease-standard)}
/* on hover the arrow slides one small step in its own direction (Michael, 2026-10-01): → to the right, ↓ down */
.cta:hover .cta__arrow,.cta:focus-visible .cta__arrow,.cta.is-hover .cta__arrow{translate:var(--space-4) 0}
.cta:hover .cta__arrow--down,.cta:focus-visible .cta__arrow--down,.cta.is-hover .cta__arrow--down{translate:0 var(--space-4)}
@media (prefers-reduced-motion:reduce){.cta__arrow{transition:none}}
.cta:hover,.cta:focus-visible{--cta-fill:var(--hook);--cta-ink:var(--hook-ink)}
/* the DS turns every link's text to --text-link-hover on hover (base.css, a:hover), which beats .cta above: on a Selene fill that made the
   label the colour of its own button. A CTA keeps its own ink in every state. */
.cta:hover,.cta:focus-visible,.cta:active{color:var(--cta-ink)}
.cta--hook{--cta-fill:var(--hook);--cta-ink:var(--hook-ink)}
.cta--hook:hover,.cta--hook:focus-visible{--cta-fill:var(--gaia-selene);--cta-ink:var(--ink-on-gaia-selene)}
/* sizes: large is the notched pill above (--target); medium is the same pill at --cta-height-sm; small is a plain pill, no notch, no arrow */
.cta--medium{--cta-arrow:var(--cta-arrow-sm);--cta-label:var(--cta-label-sm);height:var(--cta-height-sm);padding-right:var(--space-16);font-size:var(--type-mono-meta);line-height:calc(var(--space-8) * 3)}
.cta--medium .cta__arrow{font-size:var(--type-ui-sm)}
.cta--medium .cta__shape::after{
  -webkit-mask:linear-gradient(var(--namche-black) 0 0) left/calc(100% - var(--cta-notch-sm)) 100% no-repeat,var(--shape-pill-notch) right center/auto 100% no-repeat;
  mask:linear-gradient(var(--namche-black) 0 0) left/calc(100% - var(--cta-notch-sm)) 100% no-repeat,var(--shape-pill-notch) right center/auto 100% no-repeat;
}
.cta--small{height:var(--space-32);padding:0 var(--space-16);border-radius:var(--radius-pill);background:var(--cta-fill);font-size:var(--type-mono-caption);line-height:var(--space-16);transition:background-color var(--dur-base) var(--ease-standard)}

/* ── Nav ───────────────────────────────────────────────────────── */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:10;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:var(--space-32);
  padding:var(--space-32) var(--edge) 0;
  color:var(--text-primary);
  pointer-events:none;
  transition:color var(--dur-base) var(--ease-standard);
}
.nav>*{pointer-events:auto}
/* Smart bar: while you scroll down, links, MENU and CTA slide out of the way and only the mark stays,
   smaller, top left; the first scroll up brings the bar back (site.js sets is-hidden). It stays whole
   while the menu is open or a nav control has keyboard focus, and once docked (12) to the end. */
.nav>:not(.nav__logo){transition:translate var(--dur-base) var(--ease-standard)}
.nav__logo{transform-origin:left center;transition:scale var(--dur-base) var(--ease-standard)}
.nav.is-hidden:not(:has(.nav__more.is-open,:focus-visible)){pointer-events:none}
.nav.is-hidden:not(:has(.nav__more.is-open,:focus-visible))>:not(.nav__logo){translate:0 calc(-100% - var(--prod-h) - var(--space-32));pointer-events:none}
.nav.is-hidden:not(:has(.nav__more.is-open,:focus-visible)) .nav__logo{scale:.5} /* 32px, the mark of the manual pages */
.nav__logo{justify-self:start;display:block;width:var(--mark-size);height:var(--mark-size)}
.nav__mark{display:block;width:100%;height:100%;background:var(--mark-color);-webkit-mask:var(--shape-logo) center/contain no-repeat;mask:var(--shape-logo) center/contain no-repeat;transition:background-color var(--dur-base) var(--ease-standard)}
.nav__svg{display:none;width:100%;height:100%;overflow:visible}
.nav__path{fill:var(--mark-color);transition:fill var(--dur-base) var(--ease-standard)}
.nav__logo.is-live .nav__mark{display:none}
.nav__logo.is-live .nav__svg{display:block}
.nav__links{display:flex;gap:var(--grid-x)}
.nav__link{
  display:inline-flex;align-items:center;gap:var(--space-32);min-height:var(--target);
  color:inherit;text-decoration:none;
  font:var(--role-label-nav);text-transform:var(--role-label-case);
}
.nav__link:hover{color:var(--text-link-hover)}
.nav__link[aria-current]{text-decoration:underline;text-decoration-thickness:var(--stroke-text);text-underline-offset:var(--underline-offset-nav)}
.nav__link .bullet{flex:none;width:var(--bullet-square);height:var(--bullet-square);background:currentColor}
/* INSIGHTS, then MENU with the same square as INSIGHTS: it opens a menu of every section
   (index.html, .nav__menu). The square goes Hestia on hover. The panel is the nav's ground turned
   over (like the CTA): light on dark, dark on light. Closed, it is visibility:hidden, so its
   links leave the tab order. */
.nav__group{display:flex;align-items:center;gap:var(--space-64)}
.nav__more{position:relative;display:flex;align-items:center}
.nav__toggle{
  --mark:currentColor;
  appearance:none;border:0;background:none;padding:0;margin:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:var(--space-32);min-height:var(--target);color:inherit;
  font:var(--role-label-nav);text-transform:var(--role-label-case);
}
.nav__toggle:hover,.nav__toggle:focus-visible{--mark:var(--hook)}
.nav__toggle .bullet{flex:none;width:var(--bullet-square);height:var(--bullet-square);background:var(--mark);transition:background-color var(--dur-base) var(--ease-standard)}
.nav__menu{
  position:absolute;top:calc(100% + var(--space-8));left:0;z-index:1;
  min-width:calc(var(--space-64) * 4);margin:0;padding:var(--space-8) 0;list-style:none;
  background:var(--text-primary);color:var(--surface-page);
  visibility:hidden;opacity:0;translate:0 calc(var(--space-8) * -1);
  transition:opacity var(--dur-base) var(--ease-standard),translate var(--dur-base) var(--ease-standard),visibility 0s linear var(--dur-base);
}
.nav__more.is-open .nav__menu{visibility:visible;opacity:1;translate:none;transition-delay:0s}
.nav__item{
  display:flex;align-items:center;min-height:var(--target);padding:0 var(--space-16);
  color:inherit;text-decoration:none;
  font:var(--role-label-nav);text-transform:var(--role-label-case);
}
.nav__item:hover,.nav__item:focus-visible{background:var(--hook);color:var(--hook-ink);outline:0;text-decoration:none}
.nav__item[aria-current]{text-decoration:underline;text-decoration-thickness:var(--stroke-text);text-underline-offset:var(--underline-offset-nav)}
.nav__end{justify-self:end;display:grid;justify-items:end}
.nav__end .cta{transition:visibility 0s linear var(--dur-base)}
.nav.is-closing .cta{visibility:hidden}
/* 12: past the closing CTA the nav CTA (TALK) comes back as "Book a call" and stays to the end of the page (site.js sets is-docked).
   It is Hestia, like that CTA (.cta--hook), Selene on hover. On the desktop bar (900px up), once the bar is over the footer
   (is-footer) its fill turns GAIA Selene with the page dark as ink (Michael, 2026-09-29); on hover GAIA Erebos with Selene ink, as the
   footer's up button, because Hestia would vanish on the Hestia footer. */
.nav .cta__l2{display:none}
.nav.is-docked .cta__l1{display:none}
.nav.is-docked .cta__l2{display:inline}
.nav.is-docked .cta{--cta-fill:var(--hook);--cta-ink:var(--hook-ink)}
.nav.is-docked .cta:hover,.nav.is-docked .cta:focus-visible{--cta-fill:var(--gaia-selene);--cta-ink:var(--ink-on-gaia-selene)}
@media (min-width:900px){
  .nav.is-docked.is-footer .cta{--cta-fill:var(--gaia-selene);--cta-ink:var(--ink-on-gaia-selene)}
  .nav.is-docked.is-footer .cta:hover,.nav.is-docked.is-footer .cta:focus-visible{--cta-fill:var(--gaia-erebos);--cta-ink:var(--ink-on-gaia-erebos)}
}
.nav__lang-off{color:var(--text-muted)}

/* ── 01 Hero ───────────────────────────────────────────────────── */
.hero{
  min-height:var(--vh);display:grid;grid-template-rows:1fr auto;
  padding:calc(var(--grid-x) + var(--space-32)) var(--edge) var(--space-32);
}
.hero__main{align-self:center}
.hero__title{
  margin:0;
  font-family:var(--font-display);font-weight:var(--weight-display);
  --fs:clamp(var(--type-stat),7.6vw,var(--type-hero));font-size:var(--fs);
  line-height:var(--leading-hero);line-height:round(nearest,calc(var(--fs) * var(--leading-hero)),var(--baseline));letter-spacing:var(--tracking-display);
}
.hero__name,.hero__descriptor{display:block}
.hero__descriptor{animation-delay:var(--dur-base)}
/* The small text and the tagline rise like the title, a little later; the arrow grows in the
   same stretch (GROW_AT and GROW_MS in js/site.js), so the whole intro is one brief motion.
   The rise runs only when motion is allowed. Until then, and when it is reduced, the title
   stays in its resting state, which is readable. */
@media (prefers-reduced-motion:no-preference){
  .hero__name,.hero__descriptor,.hero__note,.hero__tag{animation:namche-rise var(--dur-slow) var(--ease-standard) both}
}
.hero__note{animation-delay:calc(var(--dur-base) * 2)}
.hero__tag{animation-delay:calc(var(--dur-base) * 2.5)}
@keyframes namche-rise{from{clip-path:inset(0 0 100% 0);transform:translateY(var(--space-16))}to{clip-path:inset(-20% -2% -20% -2%);transform:none}}

/* Small text below the title, pushed to the right, with the Namche square bullet (the manual's label marker) instead of a bracket. */
.hero__note{
  display:flex;gap:var(--space-16);align-items:flex-start;
  max-width:var(--span-4);margin:var(--space-64) 0 0 var(--start-8);
  font-size:var(--type-body);line-height:var(--leading-prose);line-height:round(nearest,calc(var(--type-body) * var(--leading-prose)),var(--baseline));color:var(--text-primary);
}
.hero__note .label__bullet{margin-top:0.62em}

/* Footer row: hairline, tagline with a small metaball cluster on the left, scroll cue on
   the right. The manual's Satzleiste voice: Shadow Mono, uppercase. */
/* The footer stays a slim row: the hairline with the tagline under it. The scroll cue is
   out of its flow and sits right above the hairline on the right (Michael: arrow above the
   footer, footer not so tall), see .scrollcue. */
.hero__foot{
  position:relative;grid-row:2;display:flex;justify-content:space-between;align-items:center;gap:var(--space-32);
  padding-top:calc(var(--space-16) - var(--hairline));border-top:var(--hairline) solid var(--gaia-selene);
}
.hero__tag,.scrollcue{
  font:var(--role-label-meta);text-transform:var(--role-label-case);
}
.hero__tag{display:flex;align-items:center;gap:var(--space-16);margin:0;color:var(--text-primary)}
.hero__tag-mark{flex:none;width:var(--bullet-dot);height:var(--bullet-dot);border-radius:var(--radius-pill);background:currentColor}
.hero__example{
  flex:none;padding:var(--space-4) var(--space-8);border:var(--stroke) solid currentColor;border-radius:var(--radius-pill);
  background:none;color:inherit;cursor:pointer;font:var(--role-label-caption);text-transform:none;
  transition:background-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard);
}
.hero__example:hover,.hero__example:focus-visible{background:var(--gaia-selene);color:var(--ink-on-gaia-selene);border-color:var(--gaia-selene);outline:0}

/* Scroll cue: the arrow-down as a real metaball, drawn frame by frame with the DS engine and
   baked (js/cue-frames.js, scripts/bake-cue.mjs): it grows once on load, together with the type,
   and the scroll morphs it (necks thin and break, like a drip) during the short pin of the
   hero. GAIA Selene like the hairline (Michael). The static mask below is only the fallback if
   the frames fail to load. */
.scrollcue{
  position:absolute;right:0;bottom:100%;margin-bottom:var(--space-16);
  display:flex;align-items:center;color:var(--gaia-selene);text-decoration:none;
}
.scrollcue__svg,.scrollcue__shape{
  display:block;flex:none;width:calc(var(--space-32) * 3);height:calc(var(--space-32) * 3 * 536 / 520);
}
.scrollcue__svg{overflow:visible}
.scrollcue__path{fill:currentColor}
.scrollcue__shape{
  display:none;background:currentColor;
  -webkit-mask:var(--shape-arrow-down) center/contain no-repeat;mask:var(--shape-arrow-down) center/contain no-repeat;
}
.scrollcue.is-static .scrollcue__svg{display:none}
.scrollcue.is-static .scrollcue__shape{display:block}

/* ── 01 + 02 stack: the hero stays pinned; the reveal scrolls over it ── */
.stack{position:relative}
.stack>.hero{position:sticky;top:0;z-index:0}
.stack>.reveal{z-index:1}

/* ── 02 Coral reveal: video and statement are two screens in the flow. The coordinates
   stick at the foot across both. JS reads where each block sits (no pin, no --push). ── */
.reveal{padding:0}
.reveal__stage{display:grid;grid-template-columns:minmax(0,1fr);position:relative;overflow:clip}
.reveal__media{grid-area:1/1}
.reveal__panel{grid-area:2/1}
/* No plain colour ever shows behind the video: the first frame is the media's own background
   (the video starts on the same frame), Atlas only if that image fails. */
.reveal__media{
  position:relative;height:var(--vh);margin:0;overflow:hidden;
  background:var(--okeanos-atlas) url("../assets/video/coral-reveal-first.webp") center/cover no-repeat;
}
.reveal__video,.reveal__still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reveal__still{display:none}

/* Statement section, after the DS ManifestoPanel: one centred paragraph on the quiet
   field (in Namche Shadow Sans, Michael 2026-09-29). It follows the video in the flow;
   the text reveals line by line as it scrolls up. */
.reveal__panel{
  position:relative;min-height:var(--vh);
  display:flex;align-items:center;justify-content:center;
  padding:var(--grid-x) var(--edge) calc(var(--grid-x) + var(--space-32));
  background:var(--surface-card-quiet);color:var(--ink-on-gaia-selene);
}
.reveal__intro{
  position:relative;margin:0;width:100%;max-width:var(--span-8);
  font-family:var(--font-display);font-weight:var(--weight-display);
  --fs:clamp(var(--type-ui-lg),2.4vw,var(--type-display));font-size:var(--fs);
  line-height:var(--leading-prose);line-height:round(nearest,calc(var(--fs) * var(--leading-prose)),var(--baseline));letter-spacing:var(--tracking-display);
  text-align:center;
}
@media (prefers-reduced-motion:no-preference){.js .reveal__intro:not(.is-split){visibility:hidden}}
.reveal__intro .line{display:block;overflow:hidden}
.reveal__intro .line__inner{display:block;transform:translate3d(0,calc((1 - var(--lt,1)) * 105%),0)}

/* Coordinates stick at the foot across the video and the statement: they travel right
   to left to the middle, then their Selene bar widens to full width. */
.reveal__coords{
  position:sticky;bottom:var(--space-32);z-index:1;margin:0 0 var(--space-32);
  grid-area:1/1/3;align-self:end;display:flex;justify-content:center;
  transform:translate3d(var(--coords-x,0px),0,0);will-change:transform;
}
.reveal__coords-bar{position:absolute;top:0;bottom:0;left:50%;width:var(--bar-w,100%);transform:translateX(-50%);background:var(--surface-card-quiet)}
.reveal__coords-text{
  position:relative;display:flex;align-items:center;gap:var(--space-16);
  margin:0;padding:var(--space-8) var(--space-16);
  color:var(--ink-on-gaia-selene);white-space:nowrap;
  font:var(--role-label-meta);text-transform:var(--role-label-case);
}

/* ── 03 Big type ───────────────────────────────────────────────── */
[data-progress="pin"]{padding:0}
.pin{
  position:sticky;top:0;height:var(--vh);overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--grid-x) + var(--space-32)) var(--edge) var(--space-64);
}
.bigtype{height:auto;overflow:hidden;--surface-page:var(--helios-helios);--text-primary:var(--ink-on-helios-helios);--text-muted:var(--ink-on-helios-helios)} /* yellow ground; 03 and 04 share it, in the flow. Ink is the computed pair, positiv on this field */
/* data-progress="pin" only drops the scene padding. The inner box is not sticky: the page scrolls past. */
.bigtype .pin{position:static;height:auto;overflow:visible;justify-content:flex-start;padding-top:calc(var(--grid-x) * 2 + var(--space-64) + var(--space-32))} /* the ring is centred on the thesis block; the shared pin inset let the top star meet the edge */
/* Twelve stars of the European flag behind the word: the ring turns, each star turns on its own axis. */
.bigtype__a{position:relative}
.bigtype__stars{
  --ring:min(78vmin,var(--ring-max));--star:calc(var(--ring) * 0.11);
  position:absolute;left:50%;top:50%;z-index:0;width:var(--ring);height:var(--ring);margin:calc(var(--ring) / -2) 0 0 calc(var(--ring) / -2);
  pointer-events:none;animation:stars-ring 90s linear infinite;
}
.bigtype__stars i{
  position:absolute;left:50%;top:50%;width:var(--star);height:var(--star);margin:calc(var(--star) / -2);
  transform:rotate(calc(var(--i) * 30deg)) translateY(calc(var(--ring) / -2));
}
.bigtype__stars i::after{
  content:"";position:absolute;inset:0;background:var(--gaia-selene);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50,0 L59.3,28.8 Q61.2,34.5 67.2,34.5 L97.6,34.5 L73.1,52.4 Q68.2,55.9 70.0,61.6 L79.4,90.5 L54.9,72.6 Q50,69.1 45.1,72.6 L20.6,90.5 L30.0,61.6 Q31.8,55.9 26.9,52.4 L2.4,34.5 L32.8,34.5 Q38.8,34.5 40.7,28.8 Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50,0 L59.3,28.8 Q61.2,34.5 67.2,34.5 L97.6,34.5 L73.1,52.4 Q68.2,55.9 70.0,61.6 L79.4,90.5 L54.9,72.6 Q50,69.1 45.1,72.6 L20.6,90.5 L30.0,61.6 Q31.8,55.9 26.9,52.4 L2.4,34.5 L32.8,34.5 Q38.8,34.5 40.7,28.8 Z'/%3E%3C/svg%3E") center/contain no-repeat; /* sharp tips, softly rounded inner corners */
  animation:stars-self 24s linear infinite;
}
@keyframes stars-ring{to{transform:rotate(360deg)}}
@keyframes stars-self{to{transform:rotate(360deg)}}
.bigtype__stage{display:flex;flex-direction:column;gap:var(--space-64)}
.bigtype__label,.bigtype__word,.bigtype__sub,.bigtype__b{position:relative;z-index:1}
.bigtype__word{position:relative;
  margin:0;
  font-family:var(--font-display);font-weight:var(--weight-display);
  font-size:min(var(--type-specimen),13vw); /* fitted to the full width in js */
  line-height:var(--leading-tight);letter-spacing:var(--tracking-display);
  text-transform:uppercase;white-space:nowrap;color:var(--text-primary);
}
/* Typewriter: the letters keep their room, they only switch on with the scroll. */
.bigtype__ch{visibility:hidden}
.bigtype__ch.is-on{visibility:visible}
.bigtype__caret{position:absolute;left:0;bottom:0.12em;width:var(--stroke-bold);height:0.78em;margin-left:0.04em;background:currentColor;pointer-events:none;animation:caret-blink 1s steps(1) infinite}
@keyframes caret-blink{50%{opacity:0}} /* js moves it to the end of the typed letters */
.bigtype__sub{margin:var(--space-32) 0 0;max-width:var(--span-5);font-size:var(--type-lede);line-height:var(--leading-prose);line-height:round(nearest,calc(var(--type-lede) * var(--leading-prose)),var(--baseline));color:var(--text-muted)}

/* ── 04 Positioning reveal ─────────────────────────────────────── */
.position__lines{display:grid;gap:var(--space-32);max-width:var(--span-12)}
.position__line{
  --line-size:clamp(var(--type-display),4.6vw,var(--type-stat));
  display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:var(--space-32);margin:0;
  font-size:var(--line-size);
}
/* The big dot: a filled circle about the height of the letters. */
.position__bullet{
  flex:none;width:0.72em;height:0.72em;border-radius:var(--radius-pill);background:currentColor;
  transform:scale(0);transition:transform var(--dur-slow) var(--ease-standard);
}
.position__text{
  font-family:var(--font-display);font-weight:var(--weight-display);
  font-size:inherit;
  line-height:var(--leading-hero);line-height:round(nearest,calc(var(--line-size) * var(--leading-hero)),var(--baseline));letter-spacing:var(--tracking-display);text-wrap:pretty;
  clip-path:inset(-20% -2% 100% -2%);
  transition:clip-path var(--dur-slow) var(--ease-standard) var(--dur-base);
}
.position__line.is-on .position__bullet{transform:none}
.position__line.is-on .position__text{clip-path:inset(-20% -2% -20% -2%)}

/* ── 05 Marquee ────────────────────────────────────────────────── */
.marquee{padding-inline:0;overflow:hidden}
.marquee__viewport{display:flex;width:max-content;animation:namche-marquee calc(var(--dur-drift) * 3) linear infinite}
.marquee.is-paused .marquee__viewport{animation-play-state:paused}
.marquee__row{
  display:flex;align-items:center;gap:var(--space-16);
  margin:0;padding:0 var(--space-64) 0 0;list-style:none;white-space:nowrap;
  font-family:var(--font-display);font-weight:var(--weight-display);
  --fs:clamp(var(--type-display),6vw,var(--type-display-xl));font-size:var(--fs);
  line-height:var(--leading-hero);line-height:round(nearest,calc(var(--fs) * var(--leading-hero)),var(--baseline));letter-spacing:var(--tracking-display);
}
.marquee__sep{flex:none;color:var(--text-muted)}
.marquee__sep::before{content:"–"}
@keyframes namche-marquee{to{transform:translateX(-50%)}}
.marquee__mono{
  display:flex;flex-direction:column;justify-content:flex-start;gap:0;list-style:none;
  margin:var(--space-64) var(--edge) 0;padding:calc(var(--space-32) - var(--hairline)) 0 0;
  border-top:var(--hairline) solid var(--gaia-selene); /* hairlines are full Selene, not muted (Michael) */
  font-family:var(--font-mono);font-weight:var(--weight-mono);
  font-size:var(--type-mono-meta);line-height:var(--leading-prose);line-height:round(nearest,calc(var(--type-mono-meta) * var(--leading-prose)),var(--baseline));
  text-transform:uppercase;color:var(--text-primary);
}
/* Each row opens the relations map (js/mindmap.js). Big dot bullets: a filled circle, a
   little taller than the letters; the dot goes Hestia (nothing scales on hover), and an arrow follows the label. */
.mono__btn{
  display:flex;align-items:center;gap:var(--space-16);width:100%;min-height:calc(var(--space-8) * 6);padding:0;
  border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left;cursor:pointer;
}
.mono__dot,.sysmap__dot{
  flex:none;width:1.25em;height:1.25em;border-radius:var(--radius-pill);background:currentColor;
  transition:background-color var(--dur-base) var(--ease-standard);
}
.mono__btn:hover .mono__dot,.mono__btn:focus-visible .mono__dot{background:var(--hook)}
.mono__go{display:inline-block;animation:mono-nudge 1.6s ease-in-out infinite;transition:color var(--dur-base) var(--ease-standard)}
.marquee__mono li:nth-child(2) .mono__go{animation-delay:.12s}
.marquee__mono li:nth-child(3) .mono__go{animation-delay:.24s}
.marquee__mono li:nth-child(4) .mono__go{animation-delay:.36s}
.marquee.is-paused .mono__go{animation-play-state:paused} /* like the marquee: only while it is on screen */
.mono__btn:hover .mono__go,.mono__btn:focus-visible .mono__go{color:var(--hook)}
@keyframes mono-nudge{0%,100%{transform:none}50%{transform:translateX(calc(var(--space-4) * 1.5))}}

/* ── 06 Work / cases ───────────────────────────────────────────── */
.features{display:grid;gap:var(--space-16);margin:var(--space-32) 0 0}
.feature{overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--gutter);background:var(--gaia-erebos);color:var(--ink-on-gaia-erebos);text-decoration:none}
.feature .pair__img{grid-column:2;grid-row:1;height:round(down,min(80svh,40vw),var(--baseline));overflow:hidden}
.feature .synth{grid-column:2;grid-row:1;align-self:end;justify-self:start;z-index:1;margin:var(--space-16);position:relative;left:auto;bottom:auto}
.feature__text{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:var(--space-16);padding:var(--space-32)}
.feature__meta{font:var(--role-label-meta);text-transform:var(--role-label-case);color:var(--hook)}
.feature__title{max-width:var(--measure-headline);transform:translateY(calc(var(--p,0) * var(--travel,0px)));font-family:var(--font-display);font-weight:var(--weight-display);--fs:clamp(var(--type-display),4vw,var(--type-stat));font-size:var(--fs);line-height:var(--leading-hero);line-height:round(nearest,calc(var(--fs) * var(--leading-hero)),var(--baseline));letter-spacing:var(--tracking-display)}
.features__action{margin-top:var(--space-32)}
button.cta{border:0;background:none;cursor:pointer}
.feature__more[hidden]{display:none}
.feature__more{list-style:none;margin:var(--space-32) 0 0;padding:0;display:grid}
.feature__more a{display:flex;flex-direction:column;gap:var(--space-4);padding:calc(var(--space-8) - var(--hairline)) 0 var(--space-16);border-top:var(--hairline) solid var(--text-primary);color:inherit;text-decoration:none}
.feature__more-meta{font-family:var(--font-mono);font-weight:var(--weight-mono);font-size:var(--type-mono-meta);text-transform:uppercase;color:var(--text-primary)}
.feature__more-title{font:var(--role-headline-title);letter-spacing:var(--tracking-display)}
.feature__more a:hover .feature__more-title{color:var(--text-link-hover)}

/* ── 07 About / story ──────────────────────────────────────────── */
.about__sub{margin:var(--space-32) 0 0;max-width:var(--span-5);font:var(--role-text-body);color:var(--text-primary);text-wrap:pretty}
.pair--about{--pair-fill:var(--gaia-rhea);margin-top:var(--space-64)}
.pair--about .pair__img{clip-path:inset(0 0 100% 0);transition:clip-path var(--dur-slow) var(--ease-standard)}
.pair--about.is-in .pair__img{clip-path:inset(0)}
.pair--about.is-in .pair__img--ear{transition-delay:var(--dur-fast)}

/* ── 08 Services ───────────────────────────────────────────────── */
.services{--surface-page:var(--helios-aion);--text-primary:var(--ink-on-helios-aion);--text-muted:var(--ink-on-helios-aion)} /* Aion ground (Michael, 2026-09-29). Ink is the computed pair, positiv on this field */
/* At least one viewport, like Where we help on namche.ai/work. Height stays auto, so an open
   service grows the field; the next ground never cuts it. 100dvh, not --vh: --vh rounds down and
   would leave a strip of the section below. The inset is that section's too: --grid-x above and
   below, and --space-64 under the title, at every window height. */
.services .pin{position:static;height:auto;min-height:100dvh;overflow:visible;justify-content:flex-start;padding:var(--grid-x) var(--edge)}
.services__stage{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:var(--space-64);align-items:center;margin-top:var(--space-64)}
.services__stage{gap:var(--space-64) var(--gutter)}
@media (min-width:900px){
  .services__stage{grid-template-columns:repeat(var(--cols),minmax(0,1fr))}
  .services__stage>.seed{grid-column:1 / 4}
  .services__stage>.services__list{grid-column:5 / 13}
}
.seed{width:round(down,min(100%,calc(var(--grid-module) * 2.25),37.8svh),var(--baseline));justify-self:start;color:var(--text-primary)}
.seed__svg{width:100%;height:auto;aspect-ratio:1;overflow:visible;isolation:isolate}
.seed__path{fill:currentColor}
.services__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:var(--space-16)}
/* one service open at a time (site.js): a click opens it, the text folds out below the title and the dot unfolds from a circle into a D */
.service{display:grid;grid-template-rows:auto 0fr;transition:grid-template-rows var(--dur-slow) var(--ease-standard)}
.service.is-open{grid-template-rows:auto 1fr}
.service__title{
  display:flex;align-items:center;gap:var(--gap-row);margin:0;
  font:var(--role-headline-title);
  line-height:var(--leading-hero);
  line-height:round(nearest,calc(var(--type-display) * var(--leading-hero)),var(--baseline));letter-spacing:var(--tracking-display);
}
.service__btn{flex:1;display:flex;align-items:center;gap:var(--gap-row);margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;line-height:inherit;text-align:left;cursor:pointer}
.service__node{flex:none;width:var(--node-dot);height:var(--node-dot);border-radius:var(--radius-pill);background:currentColor;transition:border-radius var(--dur-slow) var(--ease-standard)}
.service.is-open .service__node{border-radius:0 var(--radius-pill) var(--radius-pill) 0}
/* the chevron at the end of the row, drawn like the plus: two arms at --plus-stroke in the ink of the ground, the span of an arm --space-16; down when closed, up when open */
.service__chevron{flex:none;margin-left:auto;width:calc(var(--space-16) / 1.4142);height:calc(var(--space-16) / 1.4142);border-right:var(--plus-stroke) solid currentColor;border-bottom:var(--plus-stroke) solid currentColor;transform:translateY(-25%) rotate(45deg);transition:transform var(--dur-slow) var(--ease-standard)}
.service.is-open .service__chevron{transform:translateY(25%) rotate(-135deg)}
.service__text{margin:0;min-height:0;overflow:hidden;padding-left:calc(var(--node-dot) + var(--gap-row));color:var(--text-primary);text-wrap:pretty}
.service.is-open .service__text{padding-top:var(--space-32);padding-bottom:var(--space-32)}
/* the text slides up line by line with the scroll, like the 02 intro (site.js splits it into .line / .line__inner and sets --lt per line); no fade */
.service__text .line{display:block;overflow:hidden}
.service__text .line__inner{display:block;transform:translate3d(0,calc((1 - var(--lt,1)) * 105%),0)}
@media (prefers-reduced-motion:no-preference){.js .service__text:not(.is-split){visibility:hidden}}

/* ── 09 Case studies ───────────────────────────────────────────── */
.doors{list-style:none;margin:var(--space-64) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.door{
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-64);
  min-height:calc(var(--grid-module) * 2);padding:var(--space-32);
  background:var(--gaia-erebos);color:var(--ink-on-gaia-erebos);text-decoration:none;
  transition:transform var(--dur-base) var(--ease-standard);
}
.door:hover{transform:translateY(calc(var(--space-4) * -1))}
.door--image{position:relative;isolation:isolate;overflow:hidden}
.door__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:60% 62%}
.door--image::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,color-mix(in srgb,var(--ground-dark) 45%,transparent),color-mix(in srgb,var(--ground-dark) 0%,transparent) 35%,color-mix(in srgb,var(--ground-dark) 60%,transparent))} /* a dark scrim so the Selene type reads on the grass */
.door__meta{font:var(--role-label-meta);text-transform:var(--role-label-case);color:var(--night-ink-muted)}
.door__end{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-8)}
.door__title{font:var(--role-headline-title);letter-spacing:var(--tracking-display)}
.door .synth{position:static;color:inherit}

/* ── 10 Process: GAIA ramp, dark to light ──────────────────────── */
.steps{list-style:none;margin:var(--space-64) 0 0;padding:0;display:grid;
  /* one stack on the right half; each card links to the next with a vertical line */
  --link:var(--space-64);--spread:calc(var(--space-64) * 3);
  grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--link) var(--gutter)}
.step{grid-column:2}
.step{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-64);
  min-height:calc(var(--grid-module) * 1.5);padding:var(--space-32);
}
.step--erebos{background:var(--gaia-erebos);color:var(--ink-on-gaia-erebos)}
.step--nyx{background:var(--gaia-nyx);color:var(--ink-on-gaia-nyx)}
.step--rhea{background:var(--gaia-rhea);color:var(--ink-on-gaia-rhea)}
.step--selene{background:var(--gaia-selene);color:var(--ink-on-gaia-selene)}
.step__mark{position:absolute;top:var(--space-32);right:var(--space-32);width:calc(var(--space-32) * 3);height:calc(var(--space-32) * 3);pointer-events:none}
.step__aside{position:absolute;top:0;right:calc(100% + var(--gutter));width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-16)}
/* every drawn plus (step, fold, DS card): ring and arms at --plus-stroke, the stem of the Geist Mono Medium beside them (weight 500, ~15px) */
.step__more{position:relative;flex:none;width:var(--space-32);height:var(--space-32);padding:0;border:var(--plus-stroke) solid currentColor;border-radius:50%;background:none;color:var(--text-primary);cursor:pointer;transition:color var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)}
.step__more span::before,.step__more span::after{content:"";position:absolute;top:50%;left:50%;width:var(--space-16);height:var(--plus-stroke);background:currentColor;transform:translate(-50%,-50%)}
.step__more span::after{transform:translate(-50%,-50%) rotate(90deg)}
.step__more:hover,.step__more:focus-visible{color:var(--hook)}
.step__more[aria-expanded="true"]{transform:rotate(45deg)}
.step__map{display:grid;grid-template-rows:0fr;width:100%;transition:grid-template-rows var(--dur-slow) var(--ease-standard);color:var(--text-primary)}
.step__map>div{min-height:0;overflow:hidden}
.step__map svg{display:block;width:100%;max-width:var(--measure-map);height:auto}
.step__more[aria-expanded="true"]+.step__map{grid-template-rows:1fr}
.step__map path{fill:none;stroke:currentColor;stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--dur-slow) var(--ease-standard)}
.step__more[aria-expanded="true"]+.step__map path{stroke-dashoffset:0}
.step__map text{font-family:var(--font-mono);font-weight:var(--weight-mono);font-size:var(--type-tag);fill:currentColor;text-transform:uppercase}
.step__map .pill{fill:var(--hook)}
.step__map .pill-t{fill:var(--hook-ink)}
.step__map circle{fill:currentColor}
.step__text{
  margin:0;
  font-size:var(--type-body);line-height:var(--leading-prose);line-height:round(nearest,calc(var(--type-body) * var(--leading-prose)),var(--baseline));color:var(--text-primary);text-wrap:pretty;
}
.step__text .w{opacity:0;transition:opacity var(--dur-fast) var(--ease-standard)}
.step__text .w.is-on{opacity:1}
.step__num{font:var(--role-label-meta)}
.step__label{order:1;margin-top:auto}
.step__num{order:2} /* title at the foot of the card, the number directly under it */
.step{justify-content:flex-start;gap:var(--space-8)}
.step__label{font:var(--role-headline-title);letter-spacing:var(--tracking-display);text-transform:uppercase}
/* the links between the cards, at every width: a line with round ends that stretches as the cards pull up (site.js sets --p and --pn) */
.step__neck{position:absolute;z-index:1;top:calc(100% - var(--space-8));left:50%;width:var(--space-16);height:calc(var(--link) + var(--space-16) + ((1 - var(--pn, 1)) - (1 - var(--p, 1))) * var(--spread));transform:translateX(-50%);color:var(--gaia-selene);transition:color var(--dur-base) var(--ease-standard)}
.step__neck::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:var(--space-4);transform:translateX(-50%);background:currentColor}
/* metaball ends: the round dot flows into the line through a concave fillet, not a hard join */
.step__neck::after{content:"";position:absolute;inset:0;background:currentColor;
  /* stylelint-disable namche/token-only -- geometry: the neck mask, a 16 x 24 drawing */
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 24'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3Cpath d='M8 8L3.7 14.7A5 5 0 0 1 6 19L10 19A5 5 0 0 1 12.3 14.7Z'/%3E%3C/svg%3E") center top/var(--space-16) 24px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 24'%3E%3Cg transform='translate%280 24%29 scale%281 -1%29'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3Cpath d='M8 8L3.7 14.7A5 5 0 0 1 6 19L10 19A5 5 0 0 1 12.3 14.7Z'/%3E%3C/g%3E%3C/svg%3E") center bottom/var(--space-16) 24px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 24'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3Cpath d='M8 8L3.7 14.7A5 5 0 0 1 6 19L10 19A5 5 0 0 1 12.3 14.7Z'/%3E%3C/svg%3E") center top/var(--space-16) 24px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 24'%3E%3Cg transform='translate%280 24%29 scale%281 -1%29'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3Cpath d='M8 8L3.7 14.7A5 5 0 0 1 6 19L10 19A5 5 0 0 1 12.3 14.7Z'/%3E%3C/g%3E%3C/svg%3E") center bottom/var(--space-16) 24px no-repeat}
  /* stylelint-enable namche/token-only */
/* active = the link leaving the card whose text is typing; the last card has none, so it lights the link into it */
.step.is-active .step__neck,.step:has(+ .step.is-active:last-child) .step__neck{color:var(--hook)}
/* scroll-linked (--p 0..1 per card, --pn of the next card, set by site.js, both directions): every card starts one spread lower and pulls up as it scrolls into view */
.step{transform:translateY(calc((1 - var(--p, 1)) * var(--spread)))}
/* earlier cards sit above later ones so a link's lower dot is never covered by the next card */
.step:nth-child(1){z-index:4}
.step:nth-child(2){z-index:3}
.step:nth-child(3){z-index:2}
.step:nth-child(4){z-index:1}

/* ── 11 Insights rail ──────────────────────────────────────────── */
.insights .pin{position:static;height:auto;overflow:visible;justify-content:flex-start}
/* The cards run across the page as the section passes, the same travel as the notes rail on
   namche.ai/insights (site.js sets --rail-x). A sideways wheel or a finger moves them too.
   is-live clips the rail and slides the track; without it (reduced motion, or a card focused)
   the rail is an ordinary sideways scroll. min-width:0 keeps the row inside the page.
   The rail runs out to the screen edge, and the padding above and below keeps the lift of a hovered card in the box. */
.rail{
  flex:1;display:flex;align-items:center;min-width:0;max-width:100%;
  margin:calc(var(--space-32) - var(--space-8)) calc(var(--edge) * -1) calc(var(--space-8) * -1);
  padding:var(--space-8) var(--edge);scroll-padding-inline:var(--edge);
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;
}
.rail.is-live{touch-action:pan-y;overflow-x:clip}
.rail::-webkit-scrollbar{display:none}
.rail__track{display:flex;flex:none;gap:var(--gutter);width:max-content;list-style:none;margin:0;padding:0;transform:translate3d(var(--rail-x,0px),0,0)}
.rail.is-live .rail__track{will-change:transform}
.rail__track>li{flex:0 0 min(80vw,var(--span-6))}
/* Cards on OKEANOS fields, Amphitrite → Atlas → Demeter in rotation (Michael, 2026-09-29).
   All type is #111111 at full strength, hover and press included (the DS link states
   would pull night's muted grey onto the field): a tint on any field is weaker.
   data-ground="light" turns the cursor navy; Hestia would vanish on the teal. */
.insight{
  --text-link-hover:var(--ink-on-okeanos-amphitrite);
  display:flex;flex-direction:column;gap:var(--space-16);height:100%;
  min-height:calc(var(--grid-module) * 2.5);padding:var(--space-32);
  background:var(--okeanos-amphitrite);color:var(--ink-on-okeanos-amphitrite);text-decoration:none;
  transition:transform var(--dur-base) var(--ease-standard);
}
.rail__track>li:nth-child(3n+2) .insight{background:var(--okeanos-atlas)}
.rail__track>li:nth-child(3n) .insight{background:var(--okeanos-demeter)}
.insight:hover{transform:translateY(calc(var(--space-4) * -1))}
.insight__num{font:var(--role-label-meta)}
.insight__title{margin:0;font:var(--role-headline-title);line-height:var(--leading-hero);line-height:round(nearest,calc(var(--type-display) * var(--leading-hero)),var(--baseline));letter-spacing:var(--tracking-display);text-wrap:pretty}
.insight__text{margin:0;text-wrap:pretty}
.rail__dots{display:flex;gap:var(--space-8);margin-top:var(--space-32)}
.rail__dots span{width:var(--bullet-dot);height:var(--bullet-dot);border-radius:var(--radius-pill);background:var(--night-line);transition:background-color var(--dur-base) var(--ease-standard)}
.rail__dots span.is-active{background:var(--gaia-selene)}

/* ── 12 Closing ────────────────────────────────────────────────── */
.closing{display:grid;justify-items:start;gap:var(--space-32);padding-top:calc(var(--grid-x) * 1.5)}
.closing__title{
  margin:0;max-width:var(--span-8);
  font-family:var(--font-display);font-weight:var(--weight-display);
  --fs:clamp(var(--type-display),5.6vw,var(--type-display-xl));font-size:var(--fs);
  line-height:var(--leading-hero);line-height:round(nearest,calc(var(--fs) * var(--leading-hero)),var(--baseline));letter-spacing:var(--tracking-display);text-wrap:balance;
}
.closing__text{margin:0;max-width:var(--span-6);font-size:var(--type-lede);line-height:var(--leading-prose);line-height:round(nearest,calc(var(--type-lede) * var(--leading-prose)),var(--baseline));color:var(--text-muted);text-wrap:pretty}

/* ── 12b Image ─────────────────────────────────────────────────── */
.scene.handshot{position:relative;padding:0;background:var(--surface-page)}
.finale{position:relative}
.finale>.handshot{position:sticky;top:0;z-index:0}
.finale>.footer{position:relative;z-index:1}
.handshot__video,.handshot__still{display:block;width:100%;height:80svh;object-fit:cover;object-position:45% 50%}   /* 45% (was 60%): frame sits further right, the fingertip meeting point near the middle */
.handshot__still{display:none}

/* ── Footer: Hestia field, Selene wordmark, coordinates bar, hairline legal row ── */
.footer{
  display:flex;flex-direction:column;gap:var(--space-32);
  min-height:var(--vh);
  padding:var(--space-32) var(--edge) 0;
  overflow-x:clip; /* the compact coordinate line is taken out of flow and would widen the page */
  background:var(--hook);color:var(--hook-ink);
  font-family:var(--font-mono);font-weight:var(--weight-mono);
  font-size:var(--type-mono-caption);text-transform:uppercase;
}
.footer a{display:inline-flex;align-items:center;min-height:calc(var(--space-8) * 6);color:inherit;text-decoration:none}
.footer a:hover{text-decoration:underline;text-decoration-thickness:var(--stroke-text)}
.footer .footer__home{
  min-height:0;margin-top:round(down,12svh,var(--baseline));align-self:flex-start;white-space:nowrap;color:var(--gaia-selene);
  font-family:var(--font-display);font-weight:var(--weight-display);
  font-size:calc((100vw - var(--edge) * 2) / 5.1);   /* refined by site.js to fill the row */
  line-height:var(--leading-tight);letter-spacing:var(--tracking-display);text-transform:none;
  clip-path:inset(0 -100vw); /* clips above and below only: the word slides up out of its own line, sideways it stays free */
}
.footer .footer__home:hover{text-decoration:none}
/* NAMCHE slides up into its line when it comes into the viewport (site.js sets is-in at a third in view, and takes it off
   again once it has left, so it plays on every return). No fade: reveals here clip and slide. */
@media (prefers-reduced-motion:no-preference){
  .js .footer__home[data-slide] .footer__word{transform:translateY(105%);transition:transform var(--dur-slow) var(--ease-standard)}
  .js .footer__home[data-slide].is-in .footer__word{transform:none}
}
@property --proof-hold{syntax:"<time>";inherits:true;initial-value:0s}
/* Proof (components/Proof): under the wordmark, above the coordinates. One proof, on the left
   half; below 900px that half is the full row. Drag, a sideways swipe or the arrow keys move it.
   In view it advances on its own: the active dot fills over --proof-hold, then the row steps.
   A hover, a drag, leaving the view or reduced motion holds it. */
.proofs{margin:0;min-width:0;max-width:100%;color:var(--gaia-selene);--proof-hold:calc(var(--dur-slow) * 8);--proof-p:0}
.proofs__track{
  display:flex;gap:var(--gutter);width:calc((100% - var(--gutter)) / 2);list-style:none;margin:0;padding:0;min-width:0;touch-action:pan-y;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
}
.proofs__track.is-drag{scroll-snap-type:none;user-select:none}
.proofs__track::-webkit-scrollbar{display:none}
.proofs__track>li{flex:0 0 100%;scroll-snap-align:start;min-width:0}
.proof{display:flex;flex-direction:column;gap:var(--space-8);padding-top:var(--space-8);border-top:var(--hairline) solid currentColor}
.proof__title{font:var(--role-text-lede);text-transform:none}
.proof__context{font:var(--role-label-caption);text-transform:var(--role-label-case)}
.proofs__dots{display:flex;gap:var(--space-8);margin-top:var(--space-16)}
.proofs__dots>button{position:relative;width:var(--bullet-dot);height:var(--bullet-dot);padding:0;border:0;background:transparent;color:inherit;transition:width var(--dur-base) var(--ease-standard)}
.proofs__dots>button::after{content:"";position:absolute;inset:calc(var(--space-8) * -1)}
.proofs__dots>button.is-active{width:var(--space-32)}
.proofs__face{position:absolute;inset:0;overflow:hidden;border-radius:var(--radius-pill);box-shadow:inset 0 0 0 var(--stroke) currentColor}
.proofs__dots>button.is-active .proofs__face::before{content:"";position:absolute;top:0;bottom:0;left:0;width:var(--bullet-dot);background:var(--gaia-selene)}
.proofs__meter{position:absolute;inset:0;background:var(--gaia-selene);transform:scaleX(var(--proof-p));transform-origin:left center}
.proofs__dots>button:not(.is-active) .proofs__meter{transform:scaleX(0)}
@media (prefers-reduced-motion:reduce){
  .proofs__dots>button{transition:none}
  .proofs__dots>button.is-active{width:var(--bullet-dot)}
  .proofs__dots>button.is-active .proofs__meter{transform:none}
}
@media (max-width:899px){.proofs__track{width:100%}}
.footer__bar{margin-top:auto;display:flex;align-items:center;gap:var(--space-8)}
.footer__coords{flex:1;width:auto;margin:0;background:var(--gaia-selene);color:var(--ink-on-gaia-selene)}
.footer .footer__up{flex:none;width:calc(var(--space-8) * 6);height:calc(var(--space-8) * 6);justify-content:center;border-radius:var(--radius-pill);background:var(--gaia-selene);color:var(--ink-on-gaia-selene);font-family:var(--font-sans);font-size:var(--type-body);text-transform:none}
.footer .footer__up:hover{text-decoration:none;background:var(--gaia-erebos);color:var(--ink-on-gaia-erebos)}
.footer__legal{color:var(--gaia-selene);display:flex;justify-content:space-between;align-items:center;gap:var(--space-32);box-shadow:inset 0 var(--hairline) 0 var(--gaia-selene)} /* inset shadow, not a border: the hairline takes no room on the baseline */
.footer__links{display:flex;gap:var(--space-32)}
.footer__lang{margin:0}
.footer .nav__lang-off{color:inherit}

/* ── Cursor: the metaball plus (--shape-cursor, unanimated), Hestia on dark, navy on light; turned
   45° over links and buttons; case morph ─
   The plus sits exactly on the pointer, the case label trails it. The system cursor is off
   wherever the plus runs (fine pointer, no reduced motion: .has-cursor). */
.has-cursor,.has-cursor *{cursor:none!important} /* beats the pointer / grab cursors set per component */
.has-cursor .prodbar,.has-cursor .prodbar *{cursor:default!important} /* the production bar is tooling: system cursor, no plus */
.has-cursor .prodbar a,.has-cursor .prodbar button{cursor:pointer!important}
.cursor.is-off{display:none!important}
.cursor{position:fixed;left:0;top:0;z-index:20;pointer-events:none;display:none;color:var(--hook)}
.has-cursor .cursor{display:block}
.cursor.is-light{color:var(--cursor-on-light)}
.cursor.is-footer{color:var(--gaia-selene)} /* the footer is a Hestia field: Selene, like its wordmark */
.cursor.is-link{color:var(--cur-ink,var(--hook))}
.cursor__plus{
  position:absolute;left:0;top:0;width:var(--space-32);height:var(--space-32);
  /* stylelint-disable-next-line namche/token-only -- offscreen: the cursor starts off the screen until the pointer moves */
  transform:translate3d(calc(var(--cx,-99px) - 50%),calc(var(--cy,-99px) - 50%),0);
}
/* the mark turns on its own layer: a rotate on the element itself would turn its translation too */
.cursor__plus::before{
  content:"";position:absolute;inset:0;background:currentColor;
  -webkit-mask:var(--shape-cursor) center/contain no-repeat;mask:var(--shape-cursor) center/contain no-repeat;
  transition:rotate var(--dur-base) var(--ease-standard);
}
.cursor.is-link .cursor__plus::before{rotate:45deg}
.cursor__label{
  position:absolute;left:0;top:0;display:none;
  /* stylelint-disable-next-line namche/token-only -- offscreen: the label starts off the screen until the pointer moves */
  transform:translate3d(calc(var(--rx,-99px) - 50%),calc(var(--ry,-99px) - 50%),0);
  font:var(--role-label-caption);
  line-height:1;text-transform:var(--role-label-case);white-space:nowrap;color:var(--hook-ink);
  clip-path:inset(0 -100vw); /* clips above and below only: the pill slides up out of its own line, like the footer wordmark */

}
.cursor.is-case{color:var(--hook)}
.cursor.is-case .cursor__plus{display:none}
.cursor.is-case .cursor__label{display:block}
.cursor__pill{display:block;padding:var(--space-16) var(--space-32);border-radius:var(--radius-pill);background:var(--hook)}
/* slide-up as the footer wordmark: 600ms, ease 0.2 / 0 / 0 / 1; no scale, no fade */
.cursor.is-case .cursor__pill{animation:cursor-pill var(--dur-slow) var(--ease-standard) both}
@keyframes cursor-pill{from{transform:translateY(105%)}}

/* ── System map: the relations between the terms (js/mindmap.js) ──────
   Opens from a dot of the practice list in 05 as a circle that grows out of the dot. Left: the legend,
   four folds with tables (practice areas, the selected term, its relations, the key), one size of type.
   Right: the drawing. Rows are the practice areas, columns the four steps of the process. Strokes are
   hairline multiples (1x for relations, 2x for rows and the selection); --k keeps them that thin at any
   zoom. Dark ground, Selene lines, Hestia only for the selection. */
html.is-sysmap{overflow:hidden}
.sysmap{
  --surface-page:var(--ground-dark);
  --sm-w:var(--hairline);
  position:fixed;inset:0;z-index:15;
  display:grid;grid-template-rows:auto minmax(0,1fr);
  background:var(--surface-page);color:var(--text-primary);
  clip-path:circle(0 at var(--ox,50%) var(--oy,50%));
  transition:clip-path calc(var(--dur-slow) * 1.2) var(--ease-standard);
  outline:0;overscroll-behavior:contain;touch-action:none;
}
html.prod .sysmap{top:var(--prod-h)}
.sysmap[hidden]{display:none}
.sysmap.is-open{clip-path:circle(var(--or,150vmax) at var(--ox,50%) var(--oy,50%))}
@media (max-resolution:1.49dppx){.sysmap{--sm-w:var(--stroke)}} /* half a pixel does not exist on a 1x screen */

.sysmap__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-32);padding:var(--space-32) var(--edge) var(--space-16)}
.sysmap__bar .label{margin:0}
/* a plain CLOSE button (Michael, 2026-09-29), in the mono caps of the other controls, no glyph */
.sysmap__close{
  flex:none;display:inline-flex;align-items:center;justify-content:center;height:calc(var(--space-8) * 6);padding:0 var(--space-32);
  border:0;border-radius:var(--radius-pill);background:var(--gaia-selene);color:var(--ink-on-gaia-selene);
  font:var(--role-label-nav);
  line-height:1;text-transform:var(--role-label-case);white-space:nowrap;cursor:pointer;
  transition:background-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard);
}
.sysmap__close:hover,.sysmap__close:focus-visible{background:var(--hook);color:var(--hook-ink)}

.sysmap__body{
  display:grid;min-height:0;padding:0 var(--edge) var(--space-16);column-gap:var(--gutter);
  grid-template-columns:var(--span-3) minmax(0,1fr);grid-template-rows:minmax(0,1fr);grid-template-areas:"side stage";
}
.sysmap__stage{grid-area:stage;position:relative;min-height:0}
/* stylelint-disable-next-line namche/token-only -- a11y: the live region is read out, not shown */
.sysmap__live{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* the legend: one size of type throughout, mono caps for the terms, Shadow Sans for the one running text */
.sysmap__side{
  grid-area:side;display:flex;flex-direction:column;min-height:0;
  font:var(--role-label-caption);
  line-height:var(--space-16);text-transform:var(--role-label-case);
}
.sysmap__scroll{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:var(--gaia-selene) transparent}
.sysmap__side button{padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left;cursor:pointer}

.fold{border-top:var(--hairline) solid var(--gaia-selene)}
.fold__head{margin:0;font:inherit}
.fold__toggle{display:flex;align-items:center;gap:var(--space-8);width:100%;min-height:calc(var(--space-8) * 4)}
.fold__title{margin-right:auto}
.fold__plus{
  position:relative;flex:none;width:var(--space-16);height:var(--space-16);border:var(--plus-stroke) solid currentColor;border-radius:var(--radius-pill);
  transition:transform var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard);
}
.fold__plus::before,.fold__plus::after{content:"";position:absolute;top:50%;left:50%;width:var(--space-8);height:var(--plus-stroke);background:currentColor;transform:translate(-50%,-50%)}
.fold__plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.fold.is-open .fold__plus{transform:rotate(45deg)}
.fold__toggle:hover .fold__plus,.fold__toggle:focus-visible .fold__plus{color:var(--hook)}
.fold__body{
  display:grid;grid-template-rows:0fr;visibility:hidden;
  transition:grid-template-rows var(--dur-slow) var(--ease-standard),visibility 0s linear var(--dur-slow);
}
.fold.is-open .fold__body{grid-template-rows:1fr;visibility:visible;transition-delay:0s}
.fold__inner{min-height:0;overflow:hidden}

/* tables: rows on hairlines, columns on a fixed grid */
.tbl{width:100%;margin:0;padding:0;list-style:none;border-collapse:collapse;table-layout:fixed;text-align:left}
.tbl th,.tbl td,.tbl>li{padding:var(--space-4) var(--space-8) var(--space-4) 0;border-top:var(--hairline) solid var(--gaia-selene);vertical-align:top;font-weight:inherit;text-align:left;overflow-wrap:break-word}
.tbl thead th,.tbl tbody tr:first-child>*,.tbl>li:first-child{border-top-color:transparent} /* the fold's own rule sits there */
.tbl thead th{padding-top:0}
.tbl__link{text-decoration:underline;text-decoration-thickness:var(--stroke-text);text-underline-offset:var(--underline-offset);transition:color var(--dur-base) var(--ease-standard)}
.tbl__link:hover,.tbl__link:focus-visible,.tbl__link.is-self{color:var(--hook)}
.tbl__verb{text-transform:lowercase}
.tbl__prose{font-family:var(--font-sans);font-weight:var(--weight-text);text-transform:none}
.tbl__sym{display:table-cell;vertical-align:middle}

/* the four practice areas: the same dot list as in 05, the selected one Hestia, a count of relations */
.tbl--areas>li{display:flex;align-items:center;gap:var(--space-8);padding-block:0;cursor:pointer}
.tbl__area{display:flex;align-items:center;gap:var(--space-8);flex:1;min-height:calc(var(--space-8) * 4)}
.tbl__num{flex:none;min-width:2ch;text-align:right}
.tbl--areas>li:hover .sysmap__dot,.tbl__area:focus-visible .sysmap__dot{background:var(--hook)}
.tbl--areas>li.is-active .sysmap__dot{background:var(--hook)}
/* stylelint-disable-next-line namche/token-only -- geometry: the ring stands off the dot */
.tbl--areas>li.is-within .sysmap__dot{outline:var(--stroke) solid var(--hook);outline-offset:3px} /* the selected term belongs to this row */

.sysmap__svg{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;overflow:hidden;
  touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;
}
.sysmap__svg.is-panning{cursor:grabbing}
.sysmap__zoom{position:absolute;right:0;bottom:0;display:flex;gap:var(--space-8)}
.sysmap__zoom button{
  min-width:calc(var(--space-8) * 5);height:calc(var(--space-8) * 5);padding:0 var(--space-16);
  border:var(--hairline) solid var(--gaia-selene);border-radius:var(--radius-pill);background:var(--surface-page);color:inherit;cursor:pointer;
  font:var(--role-label-caption);
  line-height:1;text-transform:var(--role-label-case);
  transition:background-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard);
}
.sysmap__zoom button:hover,.sysmap__zoom button:focus-visible{background:var(--hook);border-color:var(--hook);color:var(--hook-ink)}

/* the key's symbols, drawn the way the map draws them */
.sym{display:inline-block;flex:none;position:relative;vertical-align:middle}
/* stylelint-disable namche/token-only -- geometry: the legend glyphs of the relations map, drawn to size */
.sym--head,.sym--sel{width:14px;height:14px;border-radius:var(--radius-pill);background:currentColor}
.sym--end{width:18px;height:18px;border-radius:var(--radius-pill);background:currentColor}
.sym--sel{background:var(--hook)}
.sym--ring{width:10px;height:10px;border-radius:var(--radius-pill);border:var(--stroke) solid currentColor}
.sym--ctx{width:9px;height:9px;background:currentColor}
.sym--flow,.sym--dep,.sym--inf{width:24px;height:0;border-top:var(--stroke) solid currentColor}
.sym--inf{border-top:var(--stroke-bold) dotted currentColor}
.sym--dep::after,.sym--inf::after{content:"";position:absolute;right:-1px;top:-4px;border:4px solid transparent;border-left:7px solid currentColor;border-right:0}
.sym--inf::after{top:-5px}
/* stylelint-enable namche/token-only */
/* the drawing */
.sysmap__svg text{
  font-family:var(--font-mono);font-weight:var(--weight-mono);font-size:var(--map-text);text-transform:uppercase;
  fill:var(--gaia-selene);paint-order:stroke;stroke:var(--surface-page);stroke-width:var(--map-halo);stroke-linejoin:round;pointer-events:none;
}
.sm-guide,.sm-spine,.sm-edge__line{fill:none;stroke-linecap:round;stroke-linejoin:round}
/* stylelint-disable-next-line namche/token-only -- geometry: the spacing of the guide dots */
.sm-guide{stroke:var(--gaia-selene);stroke-width:calc(var(--sm-w) * 2 * var(--k,1));stroke-dasharray:0 calc(var(--k,1) * 6px);opacity:.45}

.sm-spine{
  stroke:var(--gaia-selene);stroke-width:calc(var(--sm-w) * 2 * var(--k,1));stroke-dasharray:1;stroke-dashoffset:0;
  transition:stroke-dashoffset 900ms var(--ease-standard) var(--d,0ms),stroke var(--dur-base) var(--ease-standard);
}
.sm-spine.is-on{stroke:var(--hook)}

.sm-edge{color:var(--gaia-selene);opacity:.8;transition:opacity 400ms var(--ease-standard) var(--d,0ms),color var(--dur-base) var(--ease-standard)}
.sm-edge__line{stroke:currentColor;stroke-width:calc(var(--sm-w) * var(--k,1))}
.sm-edge--dep .sm-edge__line{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 700ms var(--ease-standard) var(--d,0ms),stroke-width var(--dur-base) var(--ease-standard)}
/* stylelint-disable-next-line namche/token-only -- geometry: the spacing of the dots */
.sm-edge--inf .sm-edge__line{stroke-width:calc(var(--k,1) * var(--map-edge));stroke-dasharray:0 calc(var(--k,1) * 4px)} /* dots: zero-length dashes with round caps, 1.5px on any screen */
.sm-edge__head{fill:currentColor;stroke:none;transition:opacity 300ms var(--ease-standard) calc(var(--d,0ms) + 500ms)}
.sm-edge.is-on{color:var(--hook);opacity:1}
.sm-edge.is-on .sm-edge__line{stroke-width:calc(var(--sm-w) * 2 * var(--k,1))}
.sm-edge--inf.is-on .sm-edge__line{stroke-width:calc(var(--k,1) * var(--map-edge-on))}
.sm-edge.is-hov{opacity:1}
.sysmap__svg .sm-verb{font-size:var(--map-text-sm);text-transform:none;opacity:0;transition:opacity var(--dur-base) var(--ease-standard)}
.sysmap__svg:not(.is-lane) .sm-edge.is-on .sm-verb,.sysmap__svg .sm-edge.is-hov .sm-verb{opacity:1}
.sm-edge.is-on .sm-verb{fill:var(--hook)}

.sm-node{cursor:pointer}
.sm-hit{fill:transparent;stroke:none}
.sm-shape{
  fill:var(--surface-page);stroke:var(--gaia-selene);stroke-width:calc(var(--sm-w) * 2 * var(--k,1));
  transform-box:fill-box;transform-origin:center;
  transition:transform 420ms var(--ease-standard) var(--d,0ms),fill var(--dur-base) var(--ease-standard),stroke var(--dur-base) var(--ease-standard);
}
.sm-node--head .sm-shape,.sm-node--end .sm-shape,.sm-node--ctx .sm-shape{fill:var(--gaia-selene)}
.sm-node--ctx .sm-shape{stroke:none}
.sm-node.is-near .sm-shape{fill:var(--gaia-selene)}
.sm-node.is-on .sm-shape,.sm-node.is-hov .sm-shape{stroke:var(--hook)}
.sm-node--head.is-on .sm-shape,.sm-node--ctx.is-on .sm-shape,.sm-node.is-focus .sm-shape{fill:var(--hook)}
.sysmap__svg .sm-node.is-focus .sm-label{fill:var(--hook)}
.sm-label{transition:opacity 300ms var(--ease-standard) calc(var(--d,0ms) + 240ms)}

/* the map draws itself once it is open: rows first, then relations, terms as the rows reach them */
.sysmap:not(.is-drawn) .sm-spine,.sysmap:not(.is-drawn) .sm-edge--dep .sm-edge__line{stroke-dashoffset:1}
.sysmap:not(.is-drawn) .sm-edge--inf,.sysmap:not(.is-drawn) .sm-edge__head,.sysmap:not(.is-drawn) .sm-label{opacity:0}
.sysmap:not(.is-drawn) .sm-shape{transform:scale(0)}
.sysmap.is-settled :is(.sm-spine,.sm-edge,.sm-node){--d:0ms!important} /* later changes answer at once */
@media (prefers-reduced-motion:reduce){.sysmap,.sysmap *{transition:none!important}}

/* below 1100px the map is stacked over the legend (a two-column map would leave the drawing too small); the practice areas become a strip to swipe */
@media (max-width:1099px){
  .sysmap__bar{padding-top:var(--space-16)}
  .sysmap__body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"stage" "side";row-gap:var(--space-8)}
  .sysmap__side{max-height:42svh;padding-bottom:max(0px,env(safe-area-inset-bottom))}
  .tbl--areas{display:flex;gap:var(--space-32);overflow-x:auto;touch-action:pan-x;scrollbar-width:none}
  .tbl--areas::-webkit-scrollbar{display:none}
  .tbl--areas>li{flex:none;border-top:0;padding-right:0}
  .tbl--areas .tbl__num{display:none}
  .tbl__area{white-space:nowrap}
}

/* ── Small screens: no pins, stacked grids ─────────────────────── */
@media (max-width:899px){
  .nav{grid-template-columns:1fr auto auto;gap:var(--space-4);padding-top:var(--space-16);padding-bottom:var(--space-16);background:var(--surface-page);pointer-events:auto;transition:color var(--dur-base) var(--ease-standard),background-color var(--dur-base) var(--ease-standard)}
  .nav.is-hidden:not(:has(.nav__more.is-open,:focus-visible)){background:transparent}
  /* INSIGHTS steps aside; the square stays with MENU beside it, behind TALK, on the page edge
     (Michael, 2026-09-29: the CTA comes first; one type step down and closer than on the desktop bar, so
     that it fits next to the CTA from 340px; below that only the square shows, see the end of this file)
     and its menu spans the page width under the bar */
  .nav__links>.nav__link,.nav__group>.nav__link{display:none}
  .nav__links{order:1} /* after the CTA */
  .nav__more{position:static}
  .nav__toggle{gap:var(--space-8);font-size:var(--type-mono-meta)}
  .nav__links{margin-left:var(--space-16)} /* air between TALK and the square, at every width (Michael, 2026-10-01): the 32px CTA and mark leave the room */
  /* docked, "Book a call" stays on one line, one type step down (the meta size, scaling further down on
     screens under 365px), so that logo, CTA and MENU, word included, fit */
  /* stylelint-disable-next-line namche/token-only -- derived: 262px is where the docked CTA reaches its smallest type, a constant of this formula */
  .nav.is-docked .cta{font-size:clamp(calc(var(--type-mono-caption) * .92),calc((100vw - 262px) * .152),var(--type-mono-meta))}
  .nav__menu{top:100%;left:var(--edge);right:var(--edge);min-width:0;max-height:calc(100dvh - var(--space-64) - var(--space-32));overflow-y:auto}
  .nav__logo{width:var(--space-32);height:var(--space-32)} /* on the row, the size the hidden mark shrinks to elsewhere */
  .nav.is-hidden:not(:has(.nav__more.is-open,:focus-visible)) .nav__logo{scale:1} /* already 32px: it stays */
  .scene{padding-block:var(--space-64)}
  .scene.reveal{padding:0}
  .nav.is-over-media{background:transparent}
  [data-progress="pin"]{height:auto}
  .pin{position:static;height:auto;overflow:visible;padding:var(--space-64) var(--edge)}
  .bigtype .pin{padding-top:var(--space-64)} /* the deeper desktop inset stays off the phone; the pin's own padding holds */

  .services .pin{padding-block:var(--space-64)}
  .services__stage{grid-template-columns:1fr}
  /* full width of the page (Michael, 2026-09-29); a phone turned sideways keeps it under the screen height.
     The width is not rounded down to the baseline (that would leave a gap at the right), the box height is rounded up. */
  .seed{width:min(100%,80svh);height:round(up,min(calc(100vw - var(--edge) * 2),80svh),var(--baseline))}
  .services__list{grid-template-columns:1fr}
  .doors{grid-template-columns:1fr}
  .feature{grid-template-columns:1fr}
  .feature .pair__img{grid-column:1;height:round(down,min(70svh,110vw),var(--baseline))}
  .feature .synth{grid-column:1}
  .feature__text{grid-column:1;grid-row:2}
  .feature__title{transform:none}
  .steps{--link:var(--space-32);grid-template-columns:minmax(0,1fr);gap:var(--link)} /* the links between the cards stay on small screens (Michael, 2026-09-29), over a shorter gap */
  .steps{--spread:calc(var(--space-64) * 1.5)} /* the cards close up on small screens too, over a shorter travel */
  .step{grid-column:1}
  .step__mark{top:auto;bottom:var(--space-32)} /* the animation sits in the bottom-right corner on small screens */
  .step__aside{position:static;width:auto;color:inherit;margin-bottom:var(--space-32)}
  .step__more,.step__map,.step__text{color:inherit} /* the text sits inside the card on small screens: it takes the card's ink, dark on the two light cards */
  .reveal__coords-text{white-space:normal;max-width:calc(100% - var(--edge) * 2);text-align:center}
  /* the four practice lines under the marquee: a list with big dot bullets, full-strength text */
  .hero__note{max-width:none;margin:var(--space-32) 0 0}
  .hero__foot{grid-row:auto;margin-top:var(--space-32)}
  .hero__main{padding-bottom:calc(var(--space-32) * 3 * 536 / 520 + var(--space-16))} /* room for the arrow above the hairline */
}

/* ── Reduced motion: every scene in its final state ────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-progress="pin"]{height:auto}
  .pin{position:static;height:auto;overflow:visible}
  .hero__name,.hero__descriptor,.hero__note,.hero__tag{animation:none}
  .hero__example{transition:none}
  .marquee__viewport{animation:none;flex-wrap:wrap}
  .bigtype__stars,.bigtype__stars i::after{animation:none}
  .mono__go{animation:none}
  .marquee__row[aria-hidden="true"]{display:none}
  .marquee__row{flex-wrap:wrap;white-space:normal;padding:0 var(--edge)}
  .position__bullet{transform:none;transition:none}
  .position__text{clip-path:none;transition:none}
  .pair--about .pair__img{clip-path:none;transition:none}
  .step{transform:none;transition:none}
  .door,.insight{transition:none}
  .nav__menu{translate:none;transition:none}
  .nav>:not(.nav__logo),.nav__logo{transition:none}
  .nav__toggle .bullet{transition:none}
  .feature__title{transform:none}
  .service{transition:none}
  .service__node{transition:none}
  .service__chevron{transition:none}
  .cursor__pill{animation:none}
  .reveal__stage{display:block;overflow:visible}
  .reveal__coords{position:absolute;left:0;right:0;bottom:var(--space-32);margin:0;transform:none}
  .reveal__video{display:none}
  .reveal__still{display:block}
  .handshot__video{display:none}
  .handshot__still{display:block}
  .reveal__coords-bar{width:100%}
  .bigtype__ch{visibility:visible}
  .bigtype__caret{display:none}

}

/* ── Production bar: grid and x-ray, off by default ────────────────
   Show with ?prod or the P key. C columns, B baseline, X x-ray. Not part of the page. */
.prodbar{display:none}
html.prod .prodbar{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--prod-h);
  display:flex;align-items:center;gap:var(--space-16);padding:0 var(--edge);
  background:var(--ground-dark);color:var(--gaia-selene);
  font:var(--role-label-caption);
  line-height:1;text-transform:var(--role-label-case);
  border-bottom:var(--stroke) solid var(--night-line);
}
html.prod .nav{top:var(--prod-h)}
/* The bar pushes the nav down by its height; the hero's top padding clears the nav, so it moves down with it. */
html.prod .hero{padding-top:calc(var(--grid-x) + var(--space-32) + var(--prod-h))}
.prodbar__title{display:flex;align-items:center;gap:var(--space-8)}
.prodbar__title::before{content:"";width:var(--space-8);height:var(--space-8);background:var(--hook)}
.prodbar__btn{padding:var(--space-4) var(--space-8);border:var(--stroke) solid var(--night-line);border-radius:var(--radius-pill);background:none;color:inherit;font:inherit;text-transform:inherit;cursor:pointer}
.prodbar__btn[aria-pressed="true"],.prodbar__btn[aria-expanded="true"]{background:var(--gaia-selene);color:var(--ink-on-gaia-selene);border-color:var(--gaia-selene)}
.prodbar__menu{position:relative}
.prodbar__btn.has-on{border-color:var(--gaia-selene)}
.prodbar__panel{display:none;position:absolute;top:calc(100% + var(--space-8));right:0;min-width:var(--panel-min);flex-direction:column;padding:var(--space-4);background:var(--ground-dark);border:var(--stroke) solid var(--night-line)}
.prodbar__menu.is-open .prodbar__panel{display:flex}
.prodbar__opt{display:flex;justify-content:space-between;gap:var(--space-16);padding:var(--space-8);border:0;background:none;color:inherit;font:inherit;text-transform:inherit;text-align:left;cursor:pointer}
.prodbar__opt kbd{font:inherit}
.prodbar__opt[aria-pressed="true"]{background:var(--gaia-selene);color:var(--ink-on-gaia-selene)}
/* The page links: Landing, and Brand (a menu of the other pages, js/prodnav.js). The same on every page and in the same place, right
   after the title; the tools (Mode, Layout, Lenis) stay at the right. The trigger is filled while you are on a page of the menu. */
.prodbar__nav{display:flex;align-items:center;gap:var(--space-8);margin-right:auto}
.prodbar__menu>.prodbar__btn{white-space:nowrap}
.prodbar__btn.is-current{background:var(--gaia-selene);color:var(--ink-on-gaia-selene);border-color:var(--gaia-selene)}
@media (min-width:900px){
  /* Landing and Brand sit in the middle of the bar, on the centre line of the page (Michael, 2026-09-30); the tools after them go right.
     Below 900px the room is short, and they follow the title as before. */
  .prodbar__nav{position:absolute;inset:0 auto 0 50%;transform:translateX(-50%);margin-right:0}
  .prodbar__nav + *{margin-left:auto}
}
.prodbar__panel--brand{right:auto;left:0;min-width:var(--panel-min-md)}
.prodbar__panel--brand .prodbar__opt{text-decoration:none}
.prodbar__set{display:flex;flex-direction:column;margin-top:var(--space-4);border-top:var(--stroke) solid var(--night-line)} /* a group of the Brand menu: Manual, Deepdive */
.prodbar__grp{display:flex;align-items:center;gap:var(--space-8);padding:var(--space-8) var(--space-8) var(--space-4)}
.prodbar__grp::before{content:"";flex:none;width:var(--space-4);height:var(--space-4);background:currentColor}
.prodbar__set .prodbar__opt{padding-left:calc(var(--space-8) + var(--space-4) + var(--space-8))} /* items sit under the label text */
.prodbar__panel--brand .prodbar__opt:hover,.prodbar__panel--brand .prodbar__opt:focus-visible,.prodbar__panel--brand .prodbar__opt[aria-current]{background:var(--gaia-selene);color:var(--ink-on-gaia-selene);outline:0}
a.prodbar__btn{text-decoration:none}
a.prodbar__btn:hover,a.prodbar__btn:focus-visible,a.prodbar__btn[aria-current="page"]{background:var(--gaia-selene);color:var(--ink-on-gaia-selene);border-color:var(--gaia-selene)}
.prodbar__read{margin-top:var(--space-4);padding:var(--space-8);border-top:var(--stroke) solid var(--night-line);white-space:nowrap} /* viewport, columns, gutter: last row of the Layout panel */
/* Under 340px the word MENU no longer fits next to TALK: the square stays, MENU stays as its name for screen readers */
@media (max-width:339px){
  .nav__toggle{min-width:var(--target);justify-content:flex-end} /* the square sits on the page edge, the tap area is a full control (--target) */
  /* stylelint-disable-next-line namche/token-only -- a11y: the label is read out, not shown, on very small screens */
  .nav__toggle-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media (max-width:599px){
  html.prod .prodbar{gap:var(--space-4);overflow-x:auto;scrollbar-width:none} /* the tools need more than 375px: the bar scrolls */
  html.prod .prodbar:has(.prodbar__menu.is-open){overflow:visible} /* iOS WebKit clips a fixed panel inside a scrolling box: while a menu is open the bar does not scroll */
  html.prod .prodbar::-webkit-scrollbar{display:none}
  .prodbar>*,.prodbar__nav{flex:none}
  .prodbar__nav{gap:var(--space-4)}
  .prodbar__title{font-size:0} /* the Hestia square stays; four buttons need the room */
  .prodbar__panel{position:fixed;top:calc(var(--prod-h) + var(--space-8));left:var(--edge);right:var(--edge);min-width:0} /* the phone: the panels take the page width, not the trigger's */
}

.gridlines{position:absolute;top:0;left:0;width:100%;height:0;z-index:90;pointer-events:none;display:none}
.gridlines__cols,.gridlines__base{position:absolute;display:none}
.gridlines__cols{
  position:fixed;top:0;bottom:0;left:var(--edge);right:var(--edge);
  background:repeating-linear-gradient(to right,color-mix(in srgb,var(--hook) 9%,transparent) 0 var(--col),transparent var(--col) calc(var(--col) + var(--gutter)));
}
.gridlines__base{
  top:0;left:0;right:0;height:var(--doc-h,100vh);
  background:repeating-linear-gradient(to bottom,color-mix(in srgb,var(--hook) 22%,transparent) 0 var(--stroke),transparent var(--stroke) var(--baseline));
}
html.show-cols .gridlines,html.show-base .gridlines{display:block}
html.show-cols .gridlines__cols,html.show-base .gridlines__base{display:block}
html.show-xray main *,html.show-xray .nav,html.show-xray .footer{outline:var(--stroke) solid color-mix(in srgb,var(--hook) 55%,transparent);outline-offset:calc(var(--stroke) * -1)}
html.show-xray main .scene{outline-width:var(--stroke-bold);outline-color:var(--hook)}