/* ============================================================================
   Kalakaari Monkey + Finmentals
   Two brands, one address. Each view themes the engine with its own six roles
   and two faces; nothing in scrollcraft.css is edited.
   ========================================================================== */

:root {
  /* Kalakaari: brand colours only */
  --km-sun:   #FFCA22;
  --km-clay:  #B46836;
  --km-paper: #F4F4F4;
  --km-amber: #FFB01A;
  --km-ink:   #3B3937;
  --km-ink-soft: color-mix(in oklab, var(--km-ink) 80%, var(--km-paper));
  --km-paper-soft: color-mix(in oklab, var(--km-paper) 74%, var(--km-ink));

  /* Finmentals: gold, navy, white. Gold text on white uses the deeper stop. */
  --fm-navy: #0A1628;
  --fm-gold: #C8A45C;
  --fm-gold-deep: #8A6D2F;
  --fm-white: #FFFFFF;
  --fm-navy-soft: color-mix(in oklab, var(--fm-navy) 70%, var(--fm-white));
  --fm-white-soft: color-mix(in oklab, var(--fm-white) 74%, var(--fm-navy));

  /* The clickable language: one spring for everything you can press */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --folio-h: 3.5rem;
}

html[data-view="kalakaari"] {
  --sc-canvas: var(--km-paper);
  --sc-surface: #FFFFFF;
  --sc-ink: var(--km-ink);
  --sc-ink-soft: var(--km-ink-soft);
  --sc-accent: var(--km-sun);
  --sc-accent-ink: var(--km-ink);
  --sc-font-display: "Roboto Slab", Georgia, serif;
  --sc-font-text: "Inter", system-ui, sans-serif;
  --sc-shadow-color: 24 8% 12%;
  --focus: var(--km-ink);
}
html[data-view="finmentals"] {
  --sc-canvas: var(--fm-white);
  --sc-surface: var(--fm-white);
  --sc-ink: var(--fm-navy);
  --sc-ink-soft: var(--fm-navy-soft);
  --sc-accent: var(--fm-gold);
  --sc-accent-ink: var(--fm-navy);
  --sc-font-display: "Cormorant Garamond", Georgia, serif;
  --sc-font-text: "Montserrat", system-ui, sans-serif;
  --sc-shadow-color: 218 60% 8%;
  --focus: var(--fm-navy);
}

/* Focus rings must clear 3:1 on every ground, so each ground names its own. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
/* Headings receive focus only so a screen reader starts in the right place
   after the portal switch; they are not controls, so they draw no ring. */
h1[tabindex="-1"]:focus { outline: none; }

/* Component display rules (.tap is inline-block) must never beat [hidden]. */
[hidden], .view[hidden] { display: none !important; }
html.menu-open { overflow: hidden; }

.skip {
  position: fixed; left: 1rem; top: 1rem; z-index: 400;
  padding: .6rem 1rem; border-radius: 999px;
  background: var(--sc-ink); color: var(--sc-canvas);
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

img { height: auto; }

/* ---------------------------------------------------------------- portal --
   The switch between brands is a door, not a page load: the next brand's
   ground opens from the point that was pressed, then the view swaps under it. */
.portal-veil {
  position: fixed; inset: 0; z-index: 300; pointer-events: none;
  background: var(--fm-navy);
  clip-path: circle(0px at var(--vx, 50%) var(--vy, 50%));
}
.portal-veil.is-on {
  clip-path: circle(150vmax at var(--vx, 50%) var(--vy, 50%));
  transition: clip-path 540ms cubic-bezier(0.77, 0, 0.175, 1);
}
.portal-veil.is-out { opacity: 0; transition: opacity 380ms var(--sc-ease-out); }

/* ============================================================ CLICKABLES ==
   The user's brief: when something can be clicked, it should light up and
   bounce. The rule that makes this honest: NOTHING that cannot be clicked
   reacts to the pointer. On touch there is no hover, so each clickable gives
   one nudge the first time it reaches the middle of the screen. */
.tap {
  display: inline-block;
  position: relative;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 240ms var(--spring),
    opacity 620ms var(--sc-ease-out),
    background-color 160ms var(--sc-ease-out),
    color 160ms var(--sc-ease-out),
    box-shadow 220ms var(--sc-ease-out),
    border-color 160ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .tap:hover { transform: translateY(-3px); }
}
.tap:focus-visible { transform: translateY(-3px); }
.tap:active { transform: translateY(1px) scale(0.97); transition-duration: 90ms; }

@keyframes nudge {
  0% { transform: translateY(0); }
  35% { transform: translateY(-5px); }
  70% { transform: translateY(1px); }
  100% { transform: translateY(0); }
}
@keyframes nudge-glow { 0%, 100% { opacity: 0; } 30% { opacity: 1; } }
.is-nudge { animation: nudge 620ms var(--spring) 1; }
.km-chip.is-nudge { animation: none; }
.km-chip.is-nudge .km-chip__in { animation: nudge 620ms var(--spring) 1; }

/* A highlighter that sweeps under a text link: transform only. */
.hl { position: relative; z-index: 0; }
.hl::before {
  content: ""; position: absolute; z-index: -1;
  left: -0.12em; right: -0.12em; bottom: 0.02em; height: 0.5em;
  background: var(--hl, var(--km-sun));
  border-radius: 0.12em;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 260ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .hl:hover::before { transform: scaleX(1); } }
.hl:focus-visible::before, .hl.is-nudge::before { transform: scaleX(1); }

/* ============================================================= KALAKAARI == */
.view--km { font-family: "Inter", system-ui, sans-serif; color: var(--km-ink); }
/* Wide enough that every section's left edge lines up with the hero's gutter
   on laptop and desktop screens. */
.km-wrap { width: 100%; max-width: 110rem; margin-inline: auto; padding-inline: var(--sc-gutter); }

.ground-paper { background: var(--km-paper); --sc-ink: var(--km-ink); color: var(--km-ink); --focus: var(--km-ink); }
.ground-sun   { background: var(--km-sun);   --sc-ink: var(--km-ink); color: var(--km-ink); --focus: var(--km-ink); }
.ground-clay  { background: var(--km-clay);  --sc-ink: #FFFFFF; color: #FFFFFF; --focus: #FFFFFF; }
.ground-ink   { background: var(--km-ink);   --sc-ink: var(--km-paper); color: var(--km-paper); --focus: var(--km-sun); }

/* ---------------------------------------------------------------- menu -- */
.km-menu-btn {
  position: fixed; z-index: 70;
  top: clamp(0.85rem, 2.2vh, 1.4rem); right: var(--sc-gutter);
  height: 2.75rem; padding: 0 1.25rem;
  border: 0; border-radius: 999px;
  background: var(--km-ink); color: var(--km-paper);
  font: 600 0.9rem/1 "Inter", sans-serif; letter-spacing: 0.02em;
  /* the ring keeps it visible when it floats over the charcoal grounds */
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--km-paper) 42%, transparent), 0 2px 4px hsl(24 8% 8% / 0.18), 0 8px 18px -6px hsl(24 8% 8% / 0.35);
  --focus: var(--km-sun);
}
@media (hover: hover) and (pointer: fine) {
  .km-menu-btn:hover { background: var(--km-sun); color: var(--km-ink); }
}
.km-menu-btn:focus-visible { background: var(--km-sun); color: var(--km-ink); outline-color: var(--km-ink); }

.km-menu {
  position: fixed; inset: 0; z-index: 90;
  background: var(--km-ink); color: var(--km-paper);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transition: opacity 220ms var(--sc-ease-out);
  --focus: var(--km-sun);
}
.km-menu.is-open { opacity: 1; }
.km-menu__inner {
  min-height: 100%; display: grid; align-content: center; gap: clamp(1.5rem, 4vh, 2.5rem);
  padding: clamp(5rem, 12vh, 7rem) var(--sc-gutter) clamp(2rem, 6vh, 4rem);
  max-width: 84rem; margin-inline: auto;
}
.km-menu__close {
  position: absolute; top: clamp(0.85rem, 2.2vh, 1.4rem); right: var(--sc-gutter);
  height: 2.75rem; padding: 0 1.25rem; border-radius: 999px; border: 0;
  background: var(--km-sun); color: var(--km-ink); font: 600 0.9rem/1 "Inter", sans-serif;
}
.km-menu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1em; font: 800 clamp(2rem, 1.2rem + 3.6vw, 4.6rem)/1.08 "Roboto Slab", serif; letter-spacing: -0.03em; }
.km-menu__list a { color: var(--km-paper); --hl: var(--km-clay); }
.km-menu__list a { padding: 0.04em 0.1em; margin-left: -0.1em; border-radius: 0.1em; }
@media (hover: hover) and (pointer: fine) { .km-menu__list a:hover { color: var(--km-ink); background: var(--km-sun); } }
.km-menu__list a:focus-visible { color: var(--km-ink); background: var(--km-sun); outline-color: var(--km-paper); }
.km-menu__portal {
  justify-self: start;
  padding: 0.9rem 1.4rem; border-radius: 999px;
  background: var(--fm-navy); color: var(--fm-white);
  font: 700 1.05rem/1 "Montserrat", sans-serif;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fm-gold) 60%, transparent);
}
@media (hover: hover) and (pointer: fine) { .km-menu__portal:hover { box-shadow: inset 0 0 0 2px var(--fm-gold), 0 10px 24px -8px hsl(0 0% 0% / 0.5); } }
.km-menu__mail { margin: 0; }
.km-menu__mail a { color: var(--km-paper-soft); font-size: 1rem; }

/* ---------------------------------------------------------------- hero --
   A stage. Terracotta backdrop, a yellow sun behind the monkey, "Creativity"
   behind him, the charcoal floor under his feet, "made accessible." in front.
   White on terracotta is 4.2:1, so on that ground only large type is set. */
.km-hero__stage {
  display: flex; flex-direction: column;
  background: var(--km-clay); color: #FFFFFF;
  --word-size: 15.2vw;
  --word-top: clamp(3.8rem, 9.5vh, 7.5rem);
  --front-size: 6.1vw;
  --band-h: clamp(3.6rem, 2.6rem + 2.8vw, 5.8rem);
  /* The planes separate over the first 75% of the hold (--hp). The band's
     roll (--bp) runs from late in the hold until the hero has half left the
     screen, so site.js sets it from scroll position, not from --sc-p. */
  --hp: clamp(0, calc(var(--sc-p, 0) / 0.75), 1);
  --bp: 0;
}
.km-hero__sky { position: relative; flex: 1 1 auto; min-height: 0; }
.plane { position: absolute; will-change: transform; }
.plane__in { display: block; will-change: transform; }

.plane--sun {
  width: min(82vh, 64vw); aspect-ratio: 1;
  left: calc(69% - min(41vh, 32vw)); top: 4%;
  transform: translate3d(0, calc(var(--hp) * 6vh), 0) scale(calc(1 + var(--hp) * 0.05));
}
.km-hero__sun {
  width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, var(--km-sun) 0%, var(--km-amber) 36%, color-mix(in oklab, var(--km-amber) 0%, transparent) 70%);
  transform: translate3d(calc(var(--mx, 0) * 10px), calc(var(--my, 0) * 10px), 0);
}

.km-wordmark {
  position: absolute; z-index: 5; margin: 0;
  top: clamp(1.05rem, 2.6vh, 1.6rem); left: var(--sc-gutter);
  font: 800 clamp(1.1rem, 0.95rem + 0.4vw, 1.35rem)/1 "Roboto Slab", serif; letter-spacing: -0.01em;
}

.km-hero__title { margin: 0; font-size: inherit; }
.plane--word {
  z-index: 2; left: calc(var(--sc-gutter) - 0.04 * var(--word-size)); top: var(--word-top);
  transform-origin: 0 0;
  transform: translate3d(0, calc(var(--hp) * -4vh), 0) scale(calc(1 - var(--hp) * 0.07));
}
.km-hero__word {
  font: 900 var(--word-size)/0.9 "Roboto Slab", serif; letter-spacing: -0.045em;
  white-space: nowrap; color: #FFFFFF;
  transform: translate3d(calc(var(--mx, 0) * -6px), calc(var(--my, 0) * -4px), 0);
}

/* Contact anchor: the monkey and the floor share one translation; the monkey
   scales from his feet, so he never floats off the stage. */
.plane--monkey {
  z-index: 4; bottom: 0; left: 60%;
  height: calc(100% - var(--word-top) - var(--word-size) * 0.5);
  min-height: 9rem;
  aspect-ratio: 551 / 863;
  transform-origin: 50% 100%;
  transform: translate3d(0, calc(var(--hp) * -1 * var(--band-h)), 0) scale(calc(1 + var(--hp) * 0.1));
}
.plane--monkey::after {
  content: ""; position: absolute; z-index: -1; left: 10%; right: 16%; bottom: -1.4%; height: 4.5%;
  border-radius: 50%; background: hsl(24 20% 8% / 0.34); filter: blur(6px);
}
.plane--monkey .plane__in { height: 100%; transform: translate3d(calc(var(--mx, 0) * 14px), 0, 0); }
/* The cutout carries 2.4% of transparent margin under the toes; drop it so
   the feet land on the stage lip instead of hovering above it. */
.km-hero__monkey { height: 100%; width: auto; max-width: none; translate: 0 2.4%; }

.plane--front {
  z-index: 6; left: var(--sc-gutter); bottom: 0.9vh;
  transform: translate3d(0, calc(var(--hp) * -16vh), 0);
}
.km-hero__front {
  font: 900 var(--front-size)/0.95 "Roboto Slab", serif; letter-spacing: -0.035em;
  white-space: nowrap; color: #FFFFFF;
  transform: translate3d(calc(var(--mx, 0) * 20px), calc(var(--my, 0) * 8px), 0);
}
.km-hero__front mark {
  position: relative; z-index: 0; background: none; color: var(--km-ink);
  padding: 0 0.06em 0 0.08em; margin-left: 0.04em;
}
.km-hero__front mark::before {
  content: ""; position: absolute; z-index: -1; inset: 0.14em -0.03em 0.04em -0.02em;
  background: var(--km-sun); border-radius: 0.1em;
  transform: rotate(-1.4deg) skewX(-6deg);
}

.km-hero__floor {
  position: relative; z-index: 3; flex: 0 0 auto;
  background: var(--km-ink); color: var(--km-paper);
  border-top: 5px solid var(--km-amber);
  /* lifts exactly one band-height, so the band ends flush with the screen edge */
  transform: translate3d(0, calc(var(--hp) * -1 * var(--band-h)), 0);
  --focus: var(--km-sun);
}
.km-hero__floor::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 30vh; background: var(--km-ink); }
.km-hero__floor-in {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(1rem, 3vw, 4rem); align-items: end;
  padding: clamp(1.1rem, 3.2vh, 2.2rem) var(--sc-gutter) clamp(1.2rem, 3.6vh, 2.4rem);
  max-width: 100rem;
}
.km-hero__pitch { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.km-hero__sub { margin: 0; max-width: 34ch; font-size: clamp(1.02rem, 0.9rem + 0.5vw, 1.32rem); line-height: 1.5; color: var(--km-paper); text-wrap: pretty; }
.km-hero__trust { margin: 0; max-width: 42ch; font-size: 0.74rem; line-height: 1.6; letter-spacing: 0.1em; text-transform: uppercase; color: var(--km-paper-soft); }

/* Buttons: pill, one radius scale for the whole Kalakaari view */
.km-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 3rem; padding: 0 1.4rem; border-radius: 999px;
  font: 700 0.98rem/1 "Inter", sans-serif; white-space: nowrap;
}
.km-btn--sun { background: var(--km-sun); color: var(--km-ink); box-shadow: 0 2px 4px hsl(24 8% 8% / 0.2), 0 10px 22px -8px hsl(40 90% 40% / 0.5); }
@media (hover: hover) and (pointer: fine) {
  .km-btn--sun:hover { background: var(--km-amber); box-shadow: 0 3px 6px hsl(24 8% 8% / 0.22), 0 16px 30px -8px hsl(40 95% 50% / 0.55); }
}
.km-btn--sun:focus-visible { background: var(--km-amber); }

/* ---------------------------------------------------------------- band --
   The brand's band waits just under the floor and rises with it. Scroll then
   rolls it exactly one set of words (--band-unit, measured): the last part of
   the hold, and on while the hero leaves, so the page never waits for it.
   When the roll ends it looks the way it started: a full cycle. */
.km-band {
  position: absolute; z-index: 1; left: 0; right: 0; top: 100%;
  height: var(--band-h); overflow: clip;
  display: flex; align-items: center;
  background: var(--km-sun); color: var(--km-ink);
  border-top: 1px solid color-mix(in oklab, var(--km-ink) 22%, transparent);
}
.km-band__track {
  display: flex; align-items: center; width: max-content; will-change: transform;
  font: 900 calc(var(--band-h) * 0.56)/1 "Roboto Slab", serif; letter-spacing: -0.02em; text-transform: uppercase;
  transform: translate3d(calc(var(--bp) * var(--band-unit, 0px) * -1), 0, 0);
}
.km-band__track span { padding-inline: 0.45em; white-space: nowrap; }
.km-band__track i { width: 0.34em; height: 0.34em; border-radius: 50%; background: var(--km-clay); flex: none; }

/* --------------------------------------------------------------- about -- */
.km-about { padding-block: clamp(5rem, 13vh, 10rem) clamp(4.5rem, 11vh, 8rem); }
.km-about__title {
  margin: 0; max-width: 17ch;
  font: 800 clamp(2.4rem, 1.2rem + 4.4vw, 5.8rem)/0.98 "Roboto Slab", serif; letter-spacing: -0.035em;
  text-wrap: balance;
}
.km-about__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 7rem); align-items: end; margin-top: clamp(2.5rem, 7vh, 5rem);
}
.km-about__body p { margin: 0; max-width: 44ch; font-size: clamp(1.1rem, 1rem + 0.45vw, 1.4rem); line-height: 1.6; }
.km-about__body p + p { margin-top: 1.1rem; }
/* Ink: each word starts as a ghost and fills in as the reading line passes it. */
.km-about__body.is-live .ink-w { opacity: 0.18; transition: opacity 260ms var(--sc-ease-out); }
.km-about__body.is-live .ink-w.is-on { opacity: 1; }
.km-manifesto { margin: 0; display: grid; justify-items: start; }
.km-manifesto__serious { font: 900 clamp(2rem, 1rem + 3.4vw, 4.4rem)/0.95 "Roboto Slab", serif; letter-spacing: -0.04em; text-wrap: balance; }
/* The pill is a toy: it falls in from above the screen, bounces, settles at
   a tilt, and hops again when pressed. The script owns its transform; hover
   uses the separate `scale` property so the two never fight. */
.km-manifesto__not {
  --pill-x: 1.2rem;
  position: relative; z-index: 30;
  margin-top: 0.5rem; padding: 0.2em 0.5em; border-radius: 999px;
  background: var(--km-sun); color: var(--km-ink);
  font: 700 clamp(1rem, 0.9rem + 0.5vw, 1.35rem)/1.2 "Roboto Slab", serif;
  transform: translateX(var(--pill-x)) rotate(-4deg);
  box-shadow: 0 3px 6px hsl(24 8% 8% / 0.18), 0 14px 26px -12px hsl(24 8% 8% / 0.45);
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: scale 200ms var(--spring);
}
@media (hover: hover) and (pointer: fine) { .km-manifesto__not:hover { scale: 1.06; } }
.km-manifesto__not.is-hanging { visibility: hidden; }
.km-manifesto__sign { margin-top: 1rem; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--km-ink-soft); }

/* --------------------------------------------------- services, the peak -- */
.km-sort__stage {
  display: flex; flex-direction: column;
  background: var(--km-ink); color: var(--km-paper);
  padding: clamp(4.4rem, 11vh, 6.6rem) var(--sc-gutter) clamp(1.2rem, 3.5vh, 2.4rem);
  --focus: var(--km-sun);
  --sorted: 0; --lane: 0;
}
.km-sort__head { position: relative; z-index: 3; max-width: 110rem; width: 100%; margin-inline: auto; }
.km-sort__title { margin: 0; font: 800 clamp(1.9rem, 1.1rem + 2.8vw, 3.8rem)/1 "Roboto Slab", serif; letter-spacing: -0.03em; }
.km-sort__state { display: grid; margin: 0.6rem 0 0; font: 700 clamp(1.05rem, 0.95rem + 0.5vw, 1.4rem)/1.2 "Roboto Slab", serif; color: var(--km-sun); }
.km-sort__state > span { grid-area: 1 / 1; }
.km-sort__wild { opacity: calc(1 - var(--sorted)); }
.km-sort__sharp { opacity: var(--sorted); }
.km-sort__hint { margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--km-paper-soft); opacity: calc(1 - var(--hint-off, 0)); }
.for-touch { display: none; }
@media (hover: none), (pointer: coarse) { .for-fine { display: none; } .for-touch { display: inline; } }

.km-sort__board {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 5vw, 6rem);
  width: 100%; max-width: 110rem; margin: clamp(1.4rem, 4.5vh, 3.2rem) auto 0;
  align-content: center;
}
.km-lane { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.km-lane__name, .km-lane__blurb, .km-lane__cta { opacity: var(--lane); transform: translate3d(0, calc((1 - var(--lane)) * 12px), 0); }
.km-lane__name {
  margin: 0; font: 800 clamp(1.3rem, 1rem + 1.1vw, 2.1rem)/1.1 "Roboto Slab", serif; letter-spacing: -0.02em;
  padding-bottom: 0.6rem; border-bottom: 1px solid color-mix(in oklab, var(--km-paper) 22%, transparent); align-self: stretch;
}
.km-lane--creative .km-lane__name { color: var(--km-sun); }
.km-lane__blurb { margin: 0.7rem 0 0; max-width: 46ch; font-size: clamp(0.88rem, 0.84rem + 0.2vw, 1rem); line-height: 1.55; color: var(--km-paper-soft); }
.km-lane__list { list-style: none; margin: clamp(0.9rem, 2.4vh, 1.4rem) 0 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(0.45rem, 1.2vh, 0.7rem); }
.km-lane__list li { display: block; }
.km-lane__cta {
  margin-top: clamp(0.9rem, 2.6vh, 1.6rem);
  font: 700 0.95rem/1 "Inter", sans-serif; color: var(--km-paper);
  padding: 0.75rem 1.15rem; border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--km-paper) 55%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .km-lane__cta:hover { background: var(--km-sun); color: var(--km-ink); box-shadow: inset 0 0 0 1.5px var(--km-sun), 0 12px 24px -10px hsl(45 100% 55% / 0.6); transform: translateY(-3px); }
}
.km-lane__cta:focus-visible { background: var(--km-sun); color: var(--km-ink); }
/* The lane links are dimmed while their content is still flying in; they
   stay reachable for keyboard users regardless of scroll position. */
.km-lane__cta { transform: translate3d(0, calc((1 - var(--lane)) * 12px), 0); }

.km-chip {
  position: relative; z-index: 2; display: inline-block;
  text-decoration: none; color: inherit;
  will-change: transform; touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  --e: 0; --sw: 0;
}
.km-chip.is-wild { cursor: grab; }
.km-chip.is-dragging { cursor: grabbing; z-index: 5; }
.km-chip.is-wild.is-mouse { touch-action: none; }
/* Each face carries its own shape, so a sorted pill hugs its own words. The
   two faces flip on X like a card turning over: the wild note turns edge-on,
   then the sharp answer turns face-up. */
.km-chip__in { position: relative; display: inline-grid; align-items: center; border-radius: 999px; }
.km-chip__in > span { grid-area: 1 / 1; justify-self: start; padding: 0.6rem 1.05rem; border-radius: 999px; backface-visibility: hidden; }
.km-chip__wild {
  font: 800 clamp(1.02rem, 0.92rem + 0.45vw, 1.28rem)/1.15 "Roboto Slab", serif; letter-spacing: -0.01em;
  color: var(--km-ink); white-space: nowrap;
  background: var(--fill, var(--km-sun));
  box-shadow: 0 2px 3px hsl(24 10% 6% / 0.3), 0 10px 20px -8px hsl(24 10% 6% / 0.55);
  transform: perspective(700px) rotateX(calc(min(var(--sw), 0.5) * 180deg));
  opacity: clamp(0, calc((0.5 - var(--sw)) * 40), 1);
}
.km-chip__sharp {
  font: 600 clamp(0.95rem, 0.9rem + 0.3vw, 1.15rem)/1.2 "Inter", sans-serif;
  color: var(--km-paper); white-space: nowrap;
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--km-paper) 34%, transparent);
  transform: perspective(700px) rotateX(calc((max(var(--sw), 0.5) - 1) * 180deg));
  opacity: clamp(0, calc((var(--sw) - 0.5) * 40), 1);
}
.km-chip__sharp::after { content: "→"; display: inline-block; margin-left: 0.45em; opacity: 0.55; transition: transform 240ms var(--spring), opacity 160ms; }
.km-chip.is-wild .km-chip__wild { transition: transform 240ms var(--spring); }
.km-chip.is-sharp .km-chip__sharp { cursor: pointer; transition: transform 240ms var(--spring), background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), box-shadow 220ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .km-chip.is-sharp:hover .km-chip__sharp { background: var(--km-sun); color: var(--km-ink); transform: perspective(700px) translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--km-sun), 0 12px 24px -10px hsl(45 100% 55% / 0.55); }
  .km-chip.is-sharp:hover .km-chip__sharp::after { transform: translateX(4px); opacity: 1; }
  .km-chip.is-wild:hover .km-chip__wild { transform: perspective(700px) rotate(3deg) scale(1.05); }
}
.km-chip:focus-visible { outline: none; }
.km-chip:focus-visible .km-chip__in { outline: 2px solid var(--km-sun); outline-offset: 3px; }
.km-chip.is-sharp:focus-visible .km-chip__sharp { background: var(--km-sun); color: var(--km-ink); }
.km-chip.is-sharp:active .km-chip__sharp { transform: perspective(700px) scale(0.96); transition-duration: 90ms; }
.km-sort__why { position: relative; z-index: 3; margin: 0.8rem auto 0; width: 100%; max-width: 110rem; font-size: 0.86rem; color: var(--km-paper-soft); opacity: var(--lane); }

/* ---------------------------------------------------------------- love -- */
/* Five equal cards in a deck: swipe or drag it, step with the arrows, or jump
   by name. The card in front is lit (charcoal); every other card lifts and
   lights on hover because pressing it brings it to the front. */
.km-love { padding-block: clamp(5rem, 12vh, 9rem); }
.km-love__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; }
.km-love__title { margin: 0; font: 900 clamp(2.3rem, 1.2rem + 4.2vw, 5.6rem)/0.95 "Roboto Slab", serif; letter-spacing: -0.04em; max-width: 14ch; text-wrap: balance; }
.km-love__sub { margin: 1rem 0 0; font-size: clamp(1rem, 0.96rem + 0.25vw, 1.15rem); line-height: 1.55; }
.km-love__arrows { display: flex; gap: 0.75rem; }
.km-love__arrow {
  width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 0;
  background: var(--km-ink); color: var(--km-paper); font: 700 1.3rem/1 "Inter", sans-serif;
  box-shadow: 0 2px 4px hsl(24 8% 8% / 0.2), 0 10px 20px -8px hsl(24 8% 8% / 0.45);
}
@media (hover: hover) and (pointer: fine) {
  .km-love__arrow:not(:disabled):hover { background: var(--km-paper); color: var(--km-ink); box-shadow: inset 0 0 0 2px var(--km-ink), 0 14px 24px -10px hsl(24 8% 8% / 0.5); }
}
.km-love__arrow:disabled { opacity: 0.32; cursor: default; transform: none !important; box-shadow: none; }

.km-love__rail {
  position: relative; list-style: none; margin: clamp(2rem, 5vh, 3.2rem) 0 0;
  display: flex; align-items: stretch; gap: clamp(1rem, 2vw, 1.75rem);
  padding: 1rem max(var(--sc-gutter), calc((100vw - 110rem) / 2 + var(--sc-gutter))) 2rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--sc-gutter), calc((100vw - 110rem) / 2 + var(--sc-gutter)));
  scrollbar-width: none; cursor: grab;
}
.km-love__rail::-webkit-scrollbar { display: none; }
.km-love__rail.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.km-card {
  flex: 0 0 clamp(17rem, 30vw, 27rem); scroll-snap-align: start;
  display: flex; border-radius: 20px;
  background: var(--km-paper); color: var(--km-ink);
  box-shadow: 0 2px 4px hsl(40 60% 20% / 0.12), 0 14px 28px -14px hsl(40 60% 20% / 0.35);
  cursor: pointer;
  transition: transform 260ms var(--spring), background-color 200ms var(--sc-ease-out), color 200ms var(--sc-ease-out), box-shadow 220ms var(--sc-ease-out);
}
.km-card figure { margin: 0; display: flex; flex-direction: column; padding: clamp(1.4rem, 2.2vw, 2rem); width: 100%; }
.km-card figure::before {
  content: "\201C"; display: block; height: 0.5em;
  font: 900 4.5rem/1 "Roboto Slab", serif; color: var(--km-clay);
  transition: transform 260ms var(--spring), color 200ms;
}
.km-card blockquote { margin: 0.4rem 0 0; }
.km-card p { margin: 0; font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.1rem); line-height: 1.62; }
.km-card figcaption { display: grid; gap: 0.2rem; margin-top: auto; padding-top: 1.4rem; }
.km-card figcaption strong { font: 800 1.1rem/1.2 "Roboto Slab", serif; }
.km-card figcaption span { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.km-card.is-active { background: var(--km-ink); color: var(--km-paper); cursor: default; transform: translateY(-6px); box-shadow: 0 4px 8px hsl(24 8% 8% / 0.25), 0 24px 44px -18px hsl(24 8% 8% / 0.6); }
.km-card.is-active figure::before { color: var(--km-sun); }
@media (hover: hover) and (pointer: fine) {
  .km-card:not(.is-active):hover { transform: translateY(-8px) rotate(-0.6deg); box-shadow: inset 0 0 0 2px var(--km-ink), 0 22px 40px -18px hsl(24 8% 8% / 0.5); }
  .km-card:not(.is-active):hover figure::before { transform: translateY(-4px) rotate(-8deg); color: var(--km-ink); }
}
.km-love__rail.is-dragging .km-card { transition: none; }

.km-love__names { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.km-love__name {
  padding: 0.55rem 1rem; border-radius: 999px; border: 0;
  background: transparent; color: var(--km-ink); font: 600 0.9rem/1 "Inter", sans-serif;
  box-shadow: inset 0 0 0 1.5px var(--km-ink);
}
@media (hover: hover) and (pointer: fine) { .km-love__name:hover { background: var(--km-paper); } }
.km-love__name[aria-current="true"] { background: var(--km-ink); color: var(--km-sun); }

/* ------------------------------------------------------------ ventures -- */
.km-ventures { padding-block: clamp(5rem, 12vh, 9rem); }
.km-ventures__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 2rem; align-items: end; }
.km-ventures__head h2 { margin: 0; font: 900 clamp(2.2rem, 1.2rem + 3.8vw, 5rem)/0.98 "Roboto Slab", serif; letter-spacing: -0.035em; }
.km-ventures__head p { margin: 0; max-width: 36ch; color: var(--km-ink-soft); font-size: 1.05rem; line-height: 1.6; }
.km-door { display: block; margin-top: clamp(2rem, 6vh, 3.5rem); border-radius: 26px; color: var(--fm-white); --focus: var(--km-ink); }
.km-door__face {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end;
  padding: clamp(2rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4.5rem);
  border-radius: 26px;
  background:
    radial-gradient(55% 85% at 96% 4%, color-mix(in oklab, var(--fm-gold) 16%, transparent), transparent 70%),
    var(--fm-navy);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fm-gold) 30%, transparent);
  transition: box-shadow 220ms var(--sc-ease-out);
}
.km-door__main { display: grid; justify-items: start; gap: 0.5rem; }
.km-door__inside { display: grid; gap: 1rem; padding-left: clamp(1rem, 2.5vw, 2rem); border-left: 1px solid color-mix(in oklab, var(--fm-gold) 40%, transparent); }
.km-door__inside-h { font: 700 0.72rem/1 "Montserrat", sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fm-gold); }
.km-door__item { display: grid; gap: 0.2rem; font: 400 0.92rem/1.5 "Montserrat", sans-serif; color: var(--fm-white-soft); }
.km-door__item b { font: 600 1.35rem/1.15 "Cormorant Garamond", serif; color: var(--fm-white); }
.km-door__face::after {
  content: ""; position: absolute; inset: -20% auto -20% -40%; width: 30%;
  background: linear-gradient(100deg, transparent, color-mix(in oklab, var(--fm-gold) 26%, transparent), transparent);
  transform: translateX(-120%) skewX(-14deg); pointer-events: none;
}
.km-door__kicker { font: 700 0.72rem/1 "Montserrat", sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fm-gold); }
.km-door__name { font: 700 clamp(3.4rem, 1.6rem + 8vw, 10rem)/0.9 "Cormorant Garamond", serif; letter-spacing: -0.02em; margin-top: 0.4rem; }
.km-door__tag { font: 600 0.8rem/1 "Montserrat", sans-serif; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fm-gold); }
.km-door__line { margin-top: 1rem; max-width: 44ch; font: 400 clamp(0.98rem, 0.92rem + 0.3vw, 1.15rem)/1.6 "Montserrat", sans-serif; color: var(--fm-white-soft); }
.km-door__go {
  margin-top: 1.4rem; display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.3rem; border-radius: 999px;
  background: var(--fm-gold); color: var(--fm-navy); font: 700 0.95rem/1 "Montserrat", sans-serif;
  transition: transform 240ms var(--spring);
}
@media (hover: hover) and (pointer: fine) {
  .km-door:hover { transform: translateY(-6px); }
  .km-door:hover .km-door__face { box-shadow: inset 0 0 0 2px var(--fm-gold), 0 28px 50px -24px hsl(218 60% 8% / 0.7); }
  .km-door:hover .km-door__face::after { transform: translateX(520%) skewX(-14deg); transition: transform 900ms var(--sc-ease-out); }
  .km-door:hover .km-door__go { transform: translateX(6px); }
}
.km-door:focus-visible { transform: translateY(-6px); }
.km-door:focus-visible .km-door__face { box-shadow: inset 0 0 0 2px var(--fm-gold); }
.km-ventures__next { margin: 1.2rem 0 0; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--km-ink-soft); }

/* ------------------------------------------------------------- founder --
   Everything on terracotta is set large (24px+, or 19px+ bold). */
.km-founder { position: relative; padding-block: clamp(5rem, 13vh, 10rem); overflow: clip; }
.km-founder__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }

/* stardust: two depths of pale specks drifting at different rates */
.km-stars { position: absolute; inset: -10% 0; pointer-events: none; }
.km-stars i { position: absolute; border-radius: 50%; background: var(--km-sun); }
.km-stars--far i { opacity: 0.35; }
.km-stars--near i { opacity: 0.75; box-shadow: 0 0 6px 1px color-mix(in oklab, var(--km-sun) 55%, transparent); }
.km-stars i.tw { animation: twinkle 3.2s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: 0.2; transform: scale(0.7); } 50% { opacity: 0.95; transform: scale(1.15); } }

/* Her portrait stays in view while the story beside it is read, and the
   facets of that story orbit it: in front of the photograph on the near side
   of the ellipse, behind it on the far side. */
.km-founder__media {
  position: sticky; top: clamp(5.5rem, 16vh, 9rem);
  display: grid; place-items: center; padding: clamp(2.5rem, 7vh, 4rem) 0;
}
.km-founder__photo { position: relative; z-index: 2; margin: 0; width: min(100%, 30rem); }
.km-founder__photo img {
  width: 100%; height: auto; aspect-ratio: 1024 / 953; object-fit: cover; border-radius: 20px;
  box-shadow: 0 4px 8px hsl(20 40% 12% / 0.25), 0 30px 60px -22px hsl(20 40% 12% / 0.6);
}
.km-orbit { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.km-orbit li {
  position: absolute; left: 0; top: 0;
  padding: 0.5rem 0.9rem; border-radius: 999px; white-space: nowrap;
  background: var(--km-sun); color: var(--km-ink);
  font: 700 clamp(0.8rem, 0.74rem + 0.25vw, 0.95rem)/1 "Inter", sans-serif;
  box-shadow: 0 2px 4px hsl(20 40% 12% / 0.25), 0 12px 24px -12px hsl(20 40% 12% / 0.55);
  will-change: transform, opacity;
}

.km-founder__text { position: relative; z-index: 2; }
.km-founder__role { margin: 0; font: 700 1.2rem/1.2 "Roboto Slab", serif; }
.km-founder__name {
  margin: 0.4rem 0 0;
  font: 900 clamp(3rem, 1.4rem + 5.2vw, 7rem)/0.9 "Roboto Slab", serif; letter-spacing: -0.045em;
}
.km-founder__line { margin: 1.4rem 0 0; font: 700 clamp(1.4rem, 1.1rem + 1vw, 2rem)/1.2 "Roboto Slab", serif; color: #FFFFFF; }
.km-founder__line::before { content: ""; display: block; width: 3.5rem; height: 5px; border-radius: 3px; background: var(--km-sun); margin-bottom: 1rem; }
.km-founder__bio { margin: 1rem 0 0; max-width: 32ch; font-size: 1.5rem; line-height: 1.5; }

/* The story lights up as it is read: each paragraph brightens as it reaches
   the reading line and stays lit; the ones still ahead wait, dimmed. */
.km-founder__story { margin-top: clamp(2.5rem, 7vh, 4rem); padding-top: clamp(1.5rem, 4vh, 2.5rem); border-top: 1.5px solid color-mix(in oklab, #FFFFFF 35%, transparent); }
.km-founder__story p { margin: 0; max-width: 32ch; font-size: 1.5rem; line-height: 1.5; }
.km-founder__story p + p { margin-top: 1.4rem; }
.km-founder__story strong { font-family: "Roboto Slab", serif; font-weight: 800; }
.km-founder__story.is-live p { opacity: 0.34; transform: translate3d(0, 10px, 0); transition: opacity 600ms var(--sc-ease-out), transform 600ms var(--sc-ease-out); }
.km-founder__story.is-live p.is-lit { opacity: 1; transform: none; }
.km-founder__cta { margin: clamp(2rem, 5vh, 3rem) 0 0; }

/* --------------------------------------------------------------- troop -- */
.km-troop__stage {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 5vw, 6rem);
  padding: clamp(4.4rem, 11vh, 6.6rem) var(--sc-gutter) clamp(1.5rem, 4vh, 3rem);
  background: var(--km-ink); color: var(--km-paper);
  --focus: var(--km-sun);
}
.km-troop__side { display: flex; flex-direction: column; min-height: 0; }
.km-troop__kicker { margin: 0; font: 700 0.74rem/1 "Inter", sans-serif; letter-spacing: 0.2em; text-transform: uppercase; color: var(--km-sun); }
.km-troop__title { margin: 0.7rem 0 0; font: 800 clamp(1.8rem, 1.1rem + 2.2vw, 3.3rem)/1 "Roboto Slab", serif; letter-spacing: -0.03em; max-width: 14ch; }
/* The whole photograph, at its own shape: no crop, so it reads as a real
   moment in a real room rather than a face squeezed into a box. It takes only
   the height left between the heading and the paragraph (never more than
   46vh), so on a short laptop screen it gets smaller instead of running into
   the text; the gaps above and below it stay fixed. */
.km-troop__photo {
  display: flex; flex: 1 1 0; min-height: 7rem; max-height: min(46vh, 30rem);
  margin: clamp(1.2rem, 3vh, 1.8rem) 0 0;
}
.km-troop__photo img {
  height: 100%; width: auto; max-width: 100%;
  aspect-ratio: 1129 / 1280; object-fit: cover; border-radius: 20px;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--km-paper) 14%, transparent), 0 24px 50px -24px hsl(0 0% 0% / 0.65);
}
.km-troop__bio { flex: none; margin: clamp(1.2rem, 3vh, 1.8rem) 0 0; max-width: 46ch; font-size: clamp(0.92rem, 0.88rem + 0.2vw, 1.02rem); line-height: 1.6; color: var(--km-paper-soft); }

.km-roll {
  position: relative; min-height: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 88%, transparent 100%);
  border-radius: 4px;
}
.km-roll:focus-visible { outline-offset: -2px; }
.km-roll__track {
  padding: 6vh 0 22vh; text-align: center;
  transform: translate3d(0, calc(clamp(0, (var(--sc-p, 0) - 0.04) / 0.9, 1) * var(--roll-dist, 0px) * -1), 0);
  will-change: transform;
}
.km-roll__open { margin: 0 0 2.4rem; font: 900 clamp(2.2rem, 1.4rem + 2.6vw, 3.8rem)/1 "Roboto Slab", serif; letter-spacing: -0.03em; }
.km-roll__head { margin: 2.6rem 0 0.9rem; font: 700 0.74rem/1.3 "Inter", sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: var(--km-sun); }
.km-credit { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.4rem; row-gap: 0.55rem; margin: 0; align-items: baseline; }
.km-credit dt { text-align: right; font: 600 0.78rem/1.35 "Inter", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--km-paper-soft); }
.km-credit dd { margin: 0; text-align: left; font: 700 clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem)/1.25 "Roboto Slab", serif; }
.km-roll__frame { margin: 1.4rem auto 0; max-width: 32rem; }
.km-roll__frame img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px color-mix(in oklab, var(--km-paper) 16%, transparent), 0 18px 40px -18px hsl(0 0% 0% / 0.6); }
.km-roll__end { margin: 3.4rem 0 0; font: 900 clamp(1.9rem, 1.1rem + 2.6vw, 3.4rem)/1.02 "Roboto Slab", serif; letter-spacing: -0.03em; color: var(--km-sun); }

/* --------------------------------------------------------------- close -- */
.km-close { position: relative; overflow: clip; min-height: 100svh; display: flex; flex-direction: column; }
.km-close__wrap {
  flex: 1 1 auto; position: relative;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 5rem); align-content: center; align-items: end;
  padding-block: clamp(5rem, 12vh, 8rem) clamp(4rem, 10vh, 7rem);
}
/* The title is set tight (0.86), so the descender of its "y" hangs well below
   its line box. The bottom margin clears it before the next line starts. */
.km-close__title { margin: 0 0 0.24em; font: 900 clamp(3.6rem, 1.6rem + 8.4vw, 10.5rem)/0.86 "Roboto Slab", serif; letter-spacing: -0.05em; }
.km-close__line { margin: 0; font: 800 clamp(1.4rem, 1rem + 1.6vw, 2.4rem)/1.1 "Roboto Slab", serif; letter-spacing: -0.02em; }
.km-close__note { margin: 1rem 0 0; font-size: 1.05rem; line-height: 1.6; max-width: 36ch; }
.km-close__links { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.1rem, 2.6vh, 1.6rem); position: relative; z-index: 2; }
.km-close__links li { display: grid; gap: 0.3rem; padding-top: 0.9rem; border-top: 1.5px solid var(--km-ink); }
.km-close__label { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; }
.km-close__links a {
  justify-self: start; color: var(--km-ink);
  font: 800 clamp(1.25rem, 0.95rem + 1.2vw, 2rem)/1.15 "Roboto Slab", serif; letter-spacing: -0.02em;
  padding: 0.12em 0.3em; margin-left: -0.3em; border-radius: 999px;
  overflow-wrap: anywhere;
}
@media (hover: hover) and (pointer: fine) {
  .km-close__links a:hover { background: var(--km-ink); color: var(--km-sun); box-shadow: 0 12px 24px -12px hsl(24 8% 10% / 0.6); }
}
.km-close__links a:focus-visible { background: var(--km-ink); color: var(--km-sun); outline-color: var(--km-ink); }
/* He stands on the footer rule, whole: the transparent margin under his toes
   is cancelled and the small tilt pivots at his feet, so nothing is clipped. */
.km-close__monkey {
  position: absolute; z-index: 1; pointer-events: none;
  right: calc(var(--sc-gutter) * 0.5); bottom: 1rem; height: min(34vh, 19rem); width: auto; max-width: none;
  translate: 0 2.4%;
  transform: rotate(-4deg); transform-origin: 50% 97%;
}
.km-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem;
  padding: 1.1rem var(--sc-gutter) 1.4rem; font-size: 0.78rem; font-weight: 500;
  border-top: 1.5px solid var(--km-ink); position: relative; z-index: 2; background: var(--km-sun);
}

/* ============================================================ FINMENTALS == */
.view--fm { font-family: "Montserrat", system-ui, sans-serif; color: var(--fm-navy); }
.fm-wrap { width: 100%; max-width: 78rem; margin-inline: auto; padding-inline: var(--sc-gutter); }
.fm-ch { position: relative; padding-block: clamp(5.5rem, 13vh, 9rem) clamp(4.5rem, 11vh, 7.5rem); }
.fm-ch--paper { background: var(--fm-white); color: var(--fm-navy); --soft: var(--fm-navy-soft); --gold-ink: var(--fm-gold-deep); --focus: var(--fm-navy); --rule: color-mix(in oklab, var(--fm-navy) 16%, transparent); }
.fm-ch--navy  { background: var(--fm-navy); color: var(--fm-white); --soft: var(--fm-white-soft); --gold-ink: var(--fm-gold); --focus: var(--fm-gold); --rule: color-mix(in oklab, var(--fm-white) 18%, transparent); }

/* ------------------------------------------------------------- folio --
   A running head, not a nav bar. Its ground follows the chapter under it. */
.fm-folio {
  position: fixed; inset: 0 0 auto 0; z-index: 70; height: var(--folio-h);
  display: flex; align-items: center; gap: 0.9rem;
  padding-inline: var(--sc-gutter);
  background: var(--fm-white); color: var(--fm-navy);
  border-bottom: 1px solid color-mix(in oklab, var(--fm-navy) 12%, transparent);
  transition: background-color 200ms var(--sc-ease-out), color 200ms var(--sc-ease-out), border-color 200ms;
  --focus: var(--fm-navy); --gold-ink: var(--fm-gold-deep);
}
.fm-folio[data-ground="navy"] { background: var(--fm-navy); color: var(--fm-white); border-bottom-color: color-mix(in oklab, var(--fm-white) 14%, transparent); --focus: var(--fm-gold); --gold-ink: var(--fm-gold); }
.fm-folio__mark { font: 700 1.5rem/1 "Cormorant Garamond", serif; color: inherit; text-decoration: none; letter-spacing: -0.01em; }
.fm-folio__chapter { font: 600 0.7rem/1 "Montserrat", sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-folio__sep { color: inherit; }
.fm-folio__nav { margin-left: auto; display: flex; align-items: center; gap: 1.2rem; }
.fm-folio__nav a { color: inherit; text-decoration: none; font: 600 0.8rem/1 "Montserrat", sans-serif; white-space: nowrap; }
.fm-folio__list { padding: 0.45rem 0.7rem; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--gold-ink); color: var(--gold-ink) !important; }
.fm-folio__list span { font-variant-numeric: tabular-nums; }
.fm-folio__back { padding: 0.45rem 0.2rem; }
.fm-folio__back::after { content: ""; position: absolute; left: 0.2rem; right: 0.2rem; bottom: 0.1rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform 220ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .fm-folio__back:hover::after { transform: scaleX(1); } }
.fm-folio__book { padding: 0.62rem 0.95rem; border-radius: 4px; background: var(--fm-gold); color: var(--fm-navy) !important; }
@media (hover: hover) and (pointer: fine) {
  .fm-folio__book:hover { box-shadow: 0 8px 18px -8px hsl(40 50% 40% / 0.7), inset 0 1px 0 hsl(0 0% 100% / 0.4); background: color-mix(in oklab, var(--fm-gold) 86%, white); }
}

/* ---------------------------------------------------------- type floor -- */
.fm-h2 { margin: 0; font: 600 clamp(2.2rem, 1.3rem + 3.2vw, 4.4rem)/1.02 "Cormorant Garamond", serif; letter-spacing: -0.015em; text-wrap: balance; max-width: 20ch; }
.fm-h2 em, .fm-title__h em { font-style: italic; color: var(--gold-ink); }
.fm-h3 { margin: 0; font: 600 clamp(1.6rem, 1.2rem + 1.3vw, 2.4rem)/1.08 "Cormorant Garamond", serif; text-wrap: balance; }
.fm-lede { margin: 0; max-width: 60ch; font-size: clamp(0.98rem, 0.94rem + 0.25vw, 1.12rem); line-height: 1.72; color: var(--soft); text-wrap: pretty; }
.fm-ch--navy .fm-lede { letter-spacing: 0.005em; line-height: 1.76; }
.fm-small { font-size: 0.8rem; color: var(--soft); }

.fm-inter { display: flex; align-items: center; gap: 1rem; margin-bottom: clamp(1.4rem, 3.6vh, 2.2rem); }
.fm-inter__rule { display: block; width: min(12rem, 26vw); height: 3px; background: var(--fm-gold); }
.fm-inter__n { font: 700 0.72rem/1 "Montserrat", sans-serif; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-ink); }

.fm-btn {
  display: inline-flex; align-items: center; min-height: 3.1rem; padding: 0 1.4rem; border-radius: 4px;
  background: var(--fm-navy); color: var(--fm-white);
  font: 700 0.92rem/1 "Montserrat", sans-serif; letter-spacing: 0.01em; white-space: nowrap;
  box-shadow: inset 0 -2px 0 var(--fm-gold);
}
.fm-ch--navy .fm-btn { background: var(--fm-gold); color: var(--fm-navy); box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.35); }
@media (hover: hover) and (pointer: fine) {
  .fm-btn:hover { box-shadow: inset 0 -3px 0 var(--fm-gold), 0 14px 26px -12px hsl(218 60% 8% / 0.55); }
  .fm-ch--navy .fm-btn:hover { background: color-mix(in oklab, var(--fm-gold) 84%, white); box-shadow: 0 14px 30px -12px hsl(40 60% 50% / 0.55); }
}
.fm-textlink { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold-ink); text-decoration-thickness: 1.5px; text-underline-offset: 0.3em; }
@media (hover: hover) and (pointer: fine) { .fm-textlink:hover { color: var(--gold-ink); text-decoration-thickness: 2.5px; } }

/* ----------------------------------------------------------- title page -- */
.fm-title { min-height: 100svh; display: flex; align-items: center; padding-top: calc(var(--folio-h) + clamp(2.5rem, 8vh, 5rem)); }
.fm-title .fm-wrap { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.8fr); column-gap: clamp(2rem, 6vw, 6rem); row-gap: clamp(2rem, 5vh, 3rem); align-items: end; }
.fm-masthead { grid-column: 1 / -1; margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.4rem; padding-bottom: 1rem; border-bottom: 1px solid var(--fm-navy); }
.fm-masthead span { font: 600 0.72rem/1 "Montserrat", sans-serif; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fm-gold-deep); }
.fm-masthead .fm-masthead__name { font: 700 clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem)/1 "Cormorant Garamond", serif; letter-spacing: -0.01em; text-transform: none; color: var(--fm-navy); }
.fm-title__h { margin: 0; font: 600 clamp(2.8rem, 1.5rem + 4.6vw, 6.2rem)/0.98 "Cormorant Garamond", serif; letter-spacing: -0.02em; max-width: 14ch; text-wrap: balance; }
.fm-title__body > * + * { margin-top: 1.4rem; }
.fm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
.fm-note { margin: 0; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--fm-gold-deep); }
.fm-contents { align-self: end; display: grid; border-top: 1px solid var(--fm-navy); }
.fm-contents__h { margin: 0; padding: 0.9rem 0 0.4rem; font: 700 0.72rem/1 "Montserrat", sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fm-gold-deep); }
.fm-contents a {
  display: grid; grid-template-columns: 2.4rem 1fr; align-items: baseline;
  padding: 0.85rem 0.3rem; color: var(--fm-navy); text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--fm-navy) 14%, transparent);
  font: 600 1.25rem/1.25 "Cormorant Garamond", serif;
}
.fm-contents a span { font: 700 0.78rem/1 "Montserrat", sans-serif; color: var(--fm-gold-deep); letter-spacing: 0.08em; }
@media (hover: hover) and (pointer: fine) {
  .fm-contents a:hover { transform: translateX(6px); background: color-mix(in oklab, var(--fm-gold) 12%, transparent); }
}
.fm-contents a:focus-visible { transform: translateX(6px); }

/* ------------------------------------------------------- warning signs -- */
.fm-signs__head > * + * { margin-top: 1.2rem; }
.fm-instruct { margin: 0; display: inline-flex; gap: 0.6rem; align-items: center; font: 600 0.88rem/1.4 "Montserrat", sans-serif; color: var(--fm-gold); }
.fm-instruct::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--fm-gold); flex: none; }
.fm-signs {
  list-style: none; margin: clamp(2rem, 5vh, 3rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 3.5rem);
}
.fm-sign {
  width: 100%; text-align: left; border: 0; margin: 0; font: inherit; color: inherit;
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; column-gap: 0.4rem; row-gap: 0.35rem;
  padding: 1.15rem 0.9rem 1.2rem 0.6rem; border-radius: 4px;
  background: transparent;
  box-shadow: inset 0 1px 0 var(--rule);
}
.fm-sign__n { grid-row: 1 / span 2; font: 600 1.1rem/1.2 "Cormorant Garamond", serif; font-style: italic; color: var(--fm-gold); }
.fm-sign__t { font: 700 1.02rem/1.3 "Montserrat", sans-serif; }
.fm-sign__d { grid-column: 2; font-size: 0.9rem; line-height: 1.6; color: var(--soft); }
.fm-sign__m {
  grid-column: 3; grid-row: 1 / span 2; align-self: center;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--fm-gold) 70%, transparent);
  display: grid; place-items: center; color: var(--fm-navy); font-weight: 800; font-size: 0.9rem;
  transition: background-color 160ms var(--sc-ease-out), transform 260ms var(--spring);
}
.fm-sign__m::after { content: "+"; color: var(--fm-gold); font-size: 1.1rem; }
@media (hover: hover) and (pointer: fine) {
  .fm-sign:hover { background: color-mix(in oklab, var(--fm-white) 6%, transparent); box-shadow: inset 0 1px 0 var(--fm-gold), 0 16px 30px -18px hsl(0 0% 0% / 0.6); }
  .fm-sign:hover .fm-sign__m { transform: scale(1.12); }
}
.fm-sign:focus-visible { background: color-mix(in oklab, var(--fm-white) 6%, transparent); }
.fm-sign[aria-pressed="true"] { background: color-mix(in oklab, var(--fm-gold) 14%, transparent); box-shadow: inset 0 1px 0 var(--fm-gold); }
.fm-sign[aria-pressed="true"] .fm-sign__m { background: var(--fm-gold); transform: rotate(-8deg); }
.fm-sign[aria-pressed="true"] .fm-sign__m::after { content: "✓"; color: var(--fm-navy); }
.fm-signs__tally { margin: 1.6rem 0 0; font: 600 0.86rem/1.4 "Montserrat", sans-serif; color: var(--fm-gold); }

/* ---------------------------------------------------------- free ways -- */
.fm-free__head > * + * { margin-top: 1.1rem; }
.fm-spread {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 6rem); align-items: center;
  margin-top: clamp(3rem, 8vh, 5rem); padding-top: clamp(2rem, 5vh, 3rem);
  border-top: 1px solid var(--rule);
}
.fm-spread--flip .fm-spread__media { order: 2; }
.fm-spread__media { margin: 0; }
/* A photograph in its own column, drifting slowly inside its frame; on the
   guide spread the real cover lies across the frame's corner like a card
   set down on the desk. */
.fm-photo { position: relative; }
.fm-photo__frame {
  position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 4px;
  box-shadow: 0 4px 10px hsl(218 60% 8% / 0.14), 0 34px 64px -30px hsl(218 60% 8% / 0.55);
}
.fm-photo__img { position: absolute; left: 0; top: -7%; width: 100%; height: 114%; max-width: none; object-fit: cover; }
.fm-photo__cover {
  position: absolute; z-index: 2; left: clamp(-2.2rem, -3vw, -0.6rem); bottom: 3.6rem;
  width: min(64%, 21rem); height: auto; border-radius: 3px;
  transform: rotate(-3deg);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--fm-gold) 45%, transparent), 0 6px 12px hsl(218 60% 8% / 0.3), 0 26px 44px -18px hsl(218 60% 8% / 0.6);
}
.fm-spread__media figcaption { margin-top: 0.8rem; font: italic 500 1.05rem/1.4 "Cormorant Garamond", serif; color: var(--soft); }
.fm-spread__text > * + * { margin-top: 1rem; }
.fm-spread__text > p { margin: 0; max-width: 52ch; line-height: 1.7; color: var(--soft); }
.fm-spread__text > p:has(.fm-btn) { margin-top: 1.6rem; }
.fm-ticks { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.fm-ticks li { display: grid; grid-template-columns: 1.4rem 1fr; font-size: 0.95rem; line-height: 1.5; }
.fm-ticks li::before { content: ""; width: 0.75rem; height: 0.4rem; margin-top: 0.42em; border-left: 2px solid var(--gold-ink); border-bottom: 2px solid var(--gold-ink); transform: rotate(-45deg); }

/* ------------------------------------------------ the framework, the peak -- */
.fm-frame__stage { background: var(--fm-navy); color: var(--fm-white); display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--folio-h) + clamp(0.5rem, 3vh, 2rem)); padding-bottom: clamp(1rem, 3vh, 2rem); --soft: var(--fm-white-soft); --gold-ink: var(--fm-gold); --focus: var(--fm-gold); --rule: color-mix(in oklab, var(--fm-white) 18%, transparent); }
.fm-frame__wrap { display: flex; flex-direction: column; }
.fm-frame__head > .fm-inter { margin-bottom: 1rem; }
.fm-frame__head .fm-lede { margin-top: 0.9rem; }
.fm-inter__rule--static { width: min(12rem, 26vw); }
/* The twelve weeks draw across the whole held span, so every notch of scroll
   moves the line and the week readout at its tip. */
.fm-frame { --draw: clamp(0, calc((var(--sc-p, 0) - 0.03) / 0.9), 1); }
.fm-weeks { position: relative; margin-top: clamp(2.2rem, 5vh, 3.2rem); padding-top: 0.9rem; }
.fm-weeks::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: color-mix(in oklab, var(--fm-white) 14%, transparent); }
.fm-weeks__line { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--fm-gold); transform-origin: 0 50%; transform: scaleX(var(--draw)); }
.fm-weeks__tip {
  position: absolute; top: 0; left: 0; right: 0; height: 0; pointer-events: none;
  transform: translate3d(calc(var(--draw) * var(--weeks-w, 0px)), 0, 0);
}
.fm-weeks__tip::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--fm-gold); box-shadow: 0 0 0 4px color-mix(in oklab, var(--fm-gold) 25%, transparent); }
.fm-weeks__tip span {
  /* centred on the tip, easing to right-aligned as it reaches week 12 */
  position: absolute; bottom: 0.7rem; left: 0; translate: calc(-50% - var(--draw) * 50%) 0; white-space: nowrap;
  font: 700 0.68rem/1 "Montserrat", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fm-gold);
  font-variant-numeric: tabular-nums;
}
.fm-weeks__ticks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, 1fr); }
.fm-weeks__ticks li { font: 600 0.7rem/1 "Montserrat", sans-serif; color: var(--fm-white-soft); font-variant-numeric: tabular-nums; position: relative; padding-left: 0.2rem; }
.fm-weeks__ticks li::before { content: ""; position: absolute; left: 0; top: -1.05rem; width: 1px; height: 0.5rem; background: color-mix(in oklab, var(--fm-white) 40%, transparent); }
.fm-phases {
  list-style: none; margin: clamp(1.2rem, 3vh, 2rem) 0 0; padding: 0;
  display: grid; grid-template-columns: 2fr 4fr 6fr; gap: 0 clamp(0.8rem, 2vw, 2rem);
}
.fm-phase {
  --on: clamp(0, calc((var(--draw) - var(--at)) * 9), 1);
  opacity: calc(0.16 + 0.84 * var(--on));
  transform: translate3d(0, calc((1 - var(--on)) * 14px), 0);
  padding-top: 0.9rem; border-top: 1px solid var(--rule);
  min-width: 0;
}
.fm-phase[data-phase="discover"] { --at: 0; }
.fm-phase[data-phase="build"] { --at: 0.167; }
.fm-phase[data-phase="scale"] { --at: 0.5; }
/* a phase's own marked gaps stamp in only once the line has reached it */
.fm-phase li.is-yours::after { opacity: var(--on); }
.fm-phase__when { margin: 0; font: 700 0.68rem/1.3 "Montserrat", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fm-gold); }
.fm-phase__name { margin: 0.4rem 0 0; font: 600 clamp(1.8rem, 1.3rem + 1.6vw, 3rem)/1 "Cormorant Garamond", serif; }
.fm-phase ul { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.fm-phase li { font-size: 0.9rem; line-height: 1.4; color: var(--fm-white-soft); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; }
.fm-phase li.is-yours { color: var(--fm-white); font-weight: 600; }
.fm-phase li.is-yours::after {
  content: attr(data-your); font: 700 0.64rem/1 "Montserrat", sans-serif; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.3rem 0.45rem; border-radius: 3px; background: var(--fm-gold); color: var(--fm-navy);
  animation: stamp 420ms var(--spring) 1;
}
@keyframes stamp { from { transform: scale(0.6) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }
.fm-frame__foot { margin: clamp(1.2rem, 3vh, 2rem) 0 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; align-items: baseline; font-size: 0.88rem; color: var(--fm-white-soft); }
.fm-frame__foot a:not(.fm-textlink) { color: var(--fm-gold); }

/* ------------------------------------------------------------ services -- */
.fm-ledger { list-style: none; margin: clamp(2rem, 5vh, 3rem) 0 0; padding: 0; border-bottom: 1px solid var(--rule); }
.fm-row {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) auto; gap: 1rem clamp(1rem, 3vw, 3rem); align-items: baseline;
  padding: clamp(1.1rem, 2.6vh, 1.6rem) 0.6rem; color: var(--fm-navy); text-decoration: none;
  border-top: 1px solid var(--rule); width: 100%;
}
.fm-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--fm-gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform 320ms var(--sc-ease-out); }
.fm-row__name { font: 600 clamp(1.4rem, 1.1rem + 1vw, 2rem)/1.1 "Cormorant Garamond", serif; transition: transform 240ms var(--spring); }
.fm-row__desc { font-size: 0.95rem; line-height: 1.6; color: var(--soft); }
.fm-row__go { font: 700 0.82rem/1 "Montserrat", sans-serif; color: var(--fm-gold-deep); white-space: nowrap; opacity: 0.35; transition: opacity 160ms, transform 240ms var(--spring); }
@media (hover: hover) and (pointer: fine) {
  .fm-row:hover { background: color-mix(in oklab, var(--fm-gold) 9%, transparent); transform: none; }
  .fm-row:hover::after { transform: scaleX(1); }
  .fm-row:hover .fm-row__name { transform: translateX(8px); }
  .fm-row:hover .fm-row__go { opacity: 1; transform: translateX(4px); }
}
.fm-row:focus-visible { transform: none; }
.fm-row:focus-visible::after { transform: scaleX(1); }
.fm-row:focus-visible .fm-row__go { opacity: 1; }

/* ------------------------------------------------------------ architect -- */
.fm-about { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.fm-about__photo { margin: 0; }
.fm-about__img { border-radius: 4px; overflow: hidden; box-shadow: 0 30px 60px -30px hsl(0 0% 0% / 0.7); }
.fm-about__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 28%; }
.fm-about__photo figcaption { margin-top: 0.8rem; font: italic 500 1.05rem/1.4 "Cormorant Garamond", serif; color: var(--soft); }
.fm-about__text > * + * { margin-top: 1.2rem; }
.fm-about__text > p { margin: 0; max-width: 58ch; line-height: 1.75; color: var(--soft); }
.fm-about__text > .fm-lede { color: var(--fm-white); }
.fm-credits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-top: 2rem !important; }
.fm-credits figure { margin: 0; }
.fm-credits img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px color-mix(in oklab, var(--fm-gold) 40%, transparent); }
.fm-credits figcaption { margin-top: 0.55rem; font: 600 0.7rem/1.45 "Montserrat", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fm-gold); }

/* ------------------------------------------------------------ colophon -- */
.fm-colophon { min-height: 100svh; display: flex; align-items: center; }
.fm-colophon .fm-wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.fm-colophon__body > * + * { margin-top: 1.4rem; }
.fm-colophon__ask { margin: 0; max-width: 34ch; font: 500 clamp(1.45rem, 1.1rem + 1.2vw, 2.15rem)/1.38 "Cormorant Garamond", serif; text-wrap: pretty; }
.fm-colophon__link {
  display: inline; font-weight: 700; color: var(--fm-navy);
  text-decoration: underline; text-decoration-color: var(--fm-gold); text-decoration-thickness: 3px; text-underline-offset: 0.18em;
  background: linear-gradient(color-mix(in oklab, var(--fm-gold) 30%, transparent), color-mix(in oklab, var(--fm-gold) 30%, transparent)) no-repeat 0 88% / 0% 42%;
}
@media (hover: hover) and (pointer: fine) { .fm-colophon__link:hover { background-size: 100% 42%; transition: background-size 280ms var(--sc-ease-out); } }
.fm-colophon__link:focus-visible { background-size: 100% 42%; }
.fm-colophon__list { padding: 1.2rem 1.3rem; border-radius: 4px; background: color-mix(in oklab, var(--fm-gold) 12%, var(--fm-white)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fm-gold) 50%, transparent); max-width: 40rem; }
.fm-colophon__list p { margin: 0 0 0.9rem; line-height: 1.6; }
.fm-colophon__list strong { color: var(--fm-navy); }
.fm-copy { border: 0; min-height: 2.6rem; padding: 0 1rem; border-radius: 4px; background: var(--fm-navy); color: var(--fm-white); font: 700 0.85rem/1 "Montserrat", sans-serif; }
@media (hover: hover) and (pointer: fine) { .fm-copy:hover { box-shadow: inset 0 -3px 0 var(--fm-gold), 0 10px 20px -10px hsl(218 60% 8% / 0.5); } }
.fm-copy__status { margin-left: 0.8rem; font-size: 0.85rem; color: var(--fm-gold-deep); font-weight: 600; }
.fm-spec { margin: 0; display: grid; border-top: 1px solid var(--fm-navy); }
.fm-spec > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); }
.fm-spec dt { font: 700 0.7rem/1.5 "Montserrat", sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fm-gold-deep); }
.fm-spec dd { margin: 0; font-size: 0.92rem; line-height: 1.5; }
.fm-spec a { color: var(--fm-navy); font-weight: 600; text-decoration: underline; text-decoration-color: var(--fm-gold); text-underline-offset: 0.25em; }
.fm-foot { grid-column: 1 / -1; margin-top: clamp(2rem, 6vh, 4rem); padding-top: 1rem; border-top: 1px solid var(--rule); font-size: 0.74rem; letter-spacing: 0.08em; color: var(--soft); }

/* ============================================================== MOBILE == */
@media (max-width: 860px) {
  /* hero: the type steps down a rung; the composition matches desktop, with
     "made accessible." standing on the floor line in the terracotta */
  .km-hero__stage { --word-size: 16.8vw; --word-top: 4.6rem; --front-size: 9.6vw; }
  .plane--sun { width: 92vw; left: 4vw; top: 12%; }
  /* On a phone the word is too narrow to lose letters to him, and there is no
     room above it to move. So the word holds still, and he starts one band's
     height lower: when the floor lifts to show the band, he rises exactly to
     just under the word, never into it. */
  .plane--monkey { left: auto; right: 3vw;
    height: calc(100% - var(--word-top) - var(--word-size) * 1.02 - var(--band-h) - 0.5rem);
    transform: translate3d(0, calc(var(--hp) * -1 * var(--band-h)), 0); }
  .plane--word { transform: scale(calc(1 - var(--hp) * 0.03)); }
  /* Stands on the floor lip, like desktop, and rises with the floor (plus a
     little more, for depth) so it never leaves a gap in the floor behind it. */
  .plane--front { bottom: 0.45rem; transform: translate3d(0, calc(var(--hp) * (-1 * var(--band-h) - 1.5vh)), 0); }
  .km-hero__front { white-space: normal; display: block; max-width: 12ch; }
  .km-hero__floor-in { grid-template-columns: 1fr; gap: 0.9rem; }
  .km-hero__pitch { gap: 0.9rem; }
  .km-hero__sub { font-size: 1rem; }
  .km-hero__trust { font-size: 0.68rem; }

  .km-about__grid { grid-template-columns: 1fr; }
  .km-manifesto__not { --pill-x: 0.4rem; }

  .km-sort__stage { padding-top: 4.3rem; }
  .km-sort__board { grid-template-columns: 1fr; gap: clamp(1rem, 2.6vh, 1.6rem); margin-top: 1rem; }
  .km-lane__blurb { display: none; }
  .km-lane__list { flex-direction: row; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.7rem; }
  .km-lane__cta { margin-top: 0.8rem; padding: 0.6rem 1rem; font-size: 0.88rem; }
  .km-chip__in > span { padding: 0.5rem 0.8rem; }
  .km-chip__sharp { font-size: 0.86rem; }
  .km-chip__sharp::after { display: none; }
  .km-chip__wild { font-size: 0.92rem; }
  .km-sort__why { display: none; }

  /* one card at a time on a phone, with the next one peeking in */
  .km-card { flex-basis: 82vw; }
  .km-love__arrow { width: 3rem; height: 3rem; }

  .km-ventures__head { grid-template-columns: 1fr; }
  .km-door__face { grid-template-columns: 1fr; }
  .km-door__inside { padding-left: 0; padding-top: 1.2rem; border-left: 0; border-top: 1px solid color-mix(in oklab, var(--fm-gold) 40%, transparent); }

  .km-founder__grid { grid-template-columns: 1fr; gap: 1rem; }
  /* on a phone the portrait scrolls with the page; the orbit still turns */
  .km-founder__media { position: relative; top: auto; padding: 2.8rem 0; }
  .km-founder__photo { width: min(78vw, 22rem); }
  .km-orbit li { font-size: 0.74rem; padding: 0.42rem 0.7rem; }

  .km-troop__stage { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 1rem; padding-top: 4.3rem; }
  .km-troop__side { display: grid; grid-template-columns: 4.5rem 1fr; column-gap: 1rem; align-items: center; }
  .km-troop__kicker, .km-troop__bio { grid-column: 1 / -1; }
  .km-troop__photo { grid-column: 1; grid-row: 2; margin: 0.6rem 0 0; min-height: 0; max-height: none; }
  .km-troop__photo img { width: 4.5rem; height: 4.5rem; max-height: none; border-radius: 50%; }
  .km-troop__title { grid-column: 2; grid-row: 2; font-size: clamp(1.4rem, 1rem + 2.6vw, 2rem); margin-top: 0.6rem; }
  .km-troop__bio { font-size: 0.86rem; margin-top: 0.8rem; }
  .km-credit dt { font-size: 0.68rem; }

  .km-close__wrap { grid-template-columns: 1fr; align-content: start; }
  .km-close__monkey { height: min(30vh, 14rem); right: 0.4rem; }
  .km-close__links { padding-right: 0; }

  .fm-folio { gap: 0.6rem; }
  .fm-folio__chapter .fm-folio__sep, .fm-folio__back { display: none; }
  .fm-folio__chapter { max-width: 30vw; }
  .fm-folio__nav { gap: 0.6rem; }
  .fm-folio__book { padding: 0.55rem 0.7rem; font-size: 0.74rem !important; }
  .fm-folio__list { padding: 0.4rem 0.5rem; font-size: 0.72rem !important; }

  .fm-title .fm-wrap { grid-template-columns: 1fr; }
  .fm-signs { grid-template-columns: 1fr; }
  .fm-spread { grid-template-columns: 1fr; }
  .fm-spread--flip .fm-spread__media { order: 0; }
  .fm-photo__frame { aspect-ratio: 4 / 4.2; }
  .fm-photo__cover { left: -0.4rem; bottom: 2.8rem; width: 62%; }
  .fm-about { grid-template-columns: 1fr; }
  .fm-about__photo { max-width: 22rem; }
  .fm-row { grid-template-columns: 1fr auto; }
  .fm-row__desc { grid-column: 1 / -1; grid-row: 2; }
  .fm-row__go { grid-column: 2; grid-row: 1; font-size: 0; opacity: 1; }
  .fm-row__go span { font-size: 1.1rem; }
  .fm-colophon .fm-wrap { grid-template-columns: 1fr; }

  .fm-frame__head .fm-lede { font-size: 0.9rem; line-height: 1.55; }
  .fm-frame__head .fm-inter { display: none; }
  .fm-weeks__ticks li:nth-child(odd) { visibility: hidden; }
  .fm-phases { grid-template-columns: 1fr; gap: 0.4rem; }
  .fm-phase { padding-top: 0.6rem; display: grid; grid-template-columns: 6.2rem 1fr; column-gap: 0.8rem; }
  .fm-phase__when { grid-column: 1 / -1; }
  .fm-phase__name { grid-column: 1; margin-top: 0.2rem; font-size: 1.7rem; }
  /* on a phone the items run as one comma-separated line */
  .fm-phase ul { grid-column: 2; margin-top: 0.3rem; display: block; line-height: 1.5; }
  .fm-phase li { display: inline; font-size: 0.8rem; }
  .fm-phase li:not(:last-child):not(.is-yours)::after { content: ", "; }
  .fm-phase li.is-yours::after { display: inline-block; margin: 0 0.4rem 0.2rem 0.3rem; vertical-align: middle; }
  .fm-frame__foot { font-size: 0.8rem; }
}

/* Short screens: give the peak and the roll room to breathe */
@media (max-height: 720px) and (max-width: 860px) {
  .km-sort__hint { display: none; }
  .km-lane__cta { display: none; }
  .km-troop__bio { display: none; }
  .fm-frame__head .fm-lede { display: none; }
}
@media (max-height: 760px) and (min-width: 861px) {
  .km-lane__blurb { display: none; }
  .km-sort__why { display: none; }
}

/* ======================================================= REDUCED MOTION ==
   Fewer and gentler, not zero. Every composition is still complete. */
@media (prefers-reduced-motion: reduce) {
  .plane, .plane__in, .km-hero__floor, .km-hero__sun, .km-hero__word, .km-hero__front { transform: none !important; }
  .km-roll { overflow-y: auto; -webkit-mask-image: none; mask-image: none; }
  .km-roll__track { transform: none !important; padding-bottom: 2rem; }
  .km-band__track { transform: none !important; }
  /* no lift under reduced motion, so the band sits in the floor instead */
  .km-band { position: relative; top: auto; }
  .tap, .km-chip__in, .fm-row__name, .fm-row__go { transition-property: background-color, color, box-shadow, opacity; }
  .tap:hover, .tap:focus-visible, .km-door:hover { transform: none !important; }
  .is-nudge, .km-chip.is-nudge .km-chip__in { animation: none; }
  .portal-veil.is-on { transition: none; }
  .fm-phase { transform: none; }
  .km-door__face::after { display: none; }
  .km-stars i.tw { animation: none; }
  .km-about__body.is-live .ink-w { opacity: 1; }
  .km-founder__story.is-live p { opacity: 1; transform: none; }
  .km-manifesto__not.is-hanging { visibility: visible; }
}