/* Founder page only (/kristina/). Loaded after site.css; every selector is .kr-*, so nothing leaks
   into other pages. Base rules = the whole story as a calm editorial read (reduced motion, no JS).
   .motion-ok / .is-pinned rules only add what assets/js/kristina.js stages: the depth intro, the
   sideways 3D chapter and the sideways path on large screens. Colours, faces and sizes are the
   site's own tokens. */

.kr { overflow-x: clip; }

/* ---------- Shared pieces ---------- */
.kr-kicker { display: flex; align-items: baseline; gap: 14px; margin: 0; font: 600 var(--t-xs)/1.2 var(--f-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.kr-num { font: 300 1.6rem/1 var(--f-display); letter-spacing: 0; color: var(--accent); font-variant-numeric: tabular-nums; }
.kr-cross { color: var(--accent); font: 200 1.6rem/1 var(--f-display); letter-spacing: 0; }
.kr-copy { display: grid; gap: clamp(20px, 2.4vw, 34px); align-content: start; }
.kr-lead { margin: 0; font: 300 clamp(1.7rem, 1.05rem + 2.3vw, 3.3rem)/1.18 var(--f-display); letter-spacing: -0.018em; text-wrap: balance; }
.kr-body { margin: 0; max-width: 44ch; font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); line-height: 1.7; color: var(--ink-2); text-wrap: pretty; }
.kr em { font-style: italic; }
.kr-media { margin: 0; overflow: hidden; background: var(--paper-2); }
.kr-media picture { display: block; height: 100%; }
.kr-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kr-ch { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2vw; row-gap: clamp(28px, 4vw, 56px); align-items: center; padding: clamp(84px, 14vw, 220px) var(--gutter-r) 0 var(--gutter); }

/* ---------- 1. Who Kristina is: name and photo, then her first words ---------- */
.kr-intro { padding: calc(var(--nav-h) + clamp(40px, 8vh, 96px)) var(--gutter-r) clamp(48px, 8vw, 96px) var(--gutter); }
.kr-intro__stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2vw; row-gap: 24px; align-items: end; }
.kr-label { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; gap: 12px; margin: 0; font: 600 var(--t-xs)/1 var(--f-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.kr-name { grid-column: 1 / -1; grid-row: 2; margin: 0; font: 300 clamp(4.5rem, 2rem + 13vw, 15rem)/0.86 var(--f-display); letter-spacing: -0.04em; padding-bottom: 0.06em; }
.kr-photo { grid-column: 5 / -1; grid-row: 3; margin: 0; }
.kr-photo__frame { aspect-ratio: 3 / 4; overflow: hidden; background: var(--paper-2); }
.kr-photo__frame picture, .kr-crop picture { display: block; height: 100%; }
.kr-photo__frame img, .kr-crop img { width: 100%; height: 100%; object-fit: cover; }
.kr-photo__frame img { object-position: 58% 42%; }

/* The sideways chapter exists only in motion: the static read meets these details in the story below. */
.kr-side { display: none; }
.kr-crop { margin: 0; overflow: hidden; background: var(--paper-2); }
.kr-crop--a, .kr-crop--c, .kr-crop--d { aspect-ratio: 4 / 5; }
.kr-crop--b { aspect-ratio: 3 / 2; }

.kr-who { align-items: start; }
.kr-who__lead { grid-column: 2 / span 10; margin: 0; max-width: 21ch; font: 300 italic clamp(2.1rem, 1.2rem + 3.6vw, 5.2rem)/1.12 var(--f-display); letter-spacing: -0.025em; text-wrap: balance; }
.kr-who__sub { grid-column: 6 / span 6; margin: 0; max-width: 40ch; font: 300 clamp(1.2rem, 1rem + 0.7vw, 1.6rem)/1.5 var(--f-display); text-wrap: pretty; }

/* ---------- 2. Before COPALI: the red sketch from her desk ---------- */
.kr-before__media { grid-column: 2 / span 4; justify-self: end; width: 100%; max-width: 333px; aspect-ratio: 333 / 412; }
.kr-before__copy { grid-column: 7 / span 5; }
/* Chromium balances six lines at most; from tablets to ~1300 px this lead runs longer, and plain
   wrapping left "mene." alone on its last line. */
.kr-before .kr-lead { text-wrap: pretty; }

/* ---------- 3. Motherhood: the one colour block of the page ---------- */
.kr-mother { padding: clamp(84px, 14vw, 220px) 0 0; }
.kr-mother__panel {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2vw; row-gap: clamp(28px, 3.5vw, 52px);
  padding: clamp(96px, 12vw, 190px) var(--gutter-r) clamp(96px, 12vw, 190px) var(--gutter);
  background: var(--accent); color: var(--accent-ink);
}
.kr-mother__panel > .kr-kicker { grid-column: 2 / span 10; }
.kr-kicker--light { color: rgb(255 182 201 / 0.92); }
.kr-kicker--light .kr-num { color: var(--pink); }
.kr-mother__lead { grid-column: 2 / span 10; margin: 0; max-width: 21ch; font: 300 clamp(2.1rem, 1.2rem + 3.6vw, 5.2rem)/1.12 var(--f-display); letter-spacing: -0.025em; text-wrap: balance; }
.kr-mother__body { grid-column: 6 / span 6; margin: 0; max-width: 40ch; font: 300 clamp(1.2rem, 1rem + 0.7vw, 1.6rem)/1.5 var(--f-display); text-wrap: pretty; }

/* ---------- 4. From tracksuits to COPALI: a path (vertical timeline by default) ---------- */
.kr-path { padding: clamp(84px, 14vw, 220px) var(--gutter-r) 0 var(--gutter); }
.kr-path__head { display: grid; gap: 24px; margin-bottom: clamp(40px, 5vw, 72px); }
.kr-path__line { height: 1px; background: var(--line); overflow: hidden; }
.kr-path__line i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; }
.kr-path__track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3vw; align-items: start; }
.kr-step { display: grid; gap: 16px; align-content: start; }
.kr-step__n { margin: 0; font: 300 clamp(2.4rem, 1.5rem + 2.4vw, 4rem)/1 var(--f-display); color: var(--accent); font-variant-numeric: tabular-nums; }
.kr-step__title { margin: 0; font: 300 var(--t-xl)/1.1 var(--f-display); letter-spacing: -0.015em; }
.kr-step__media { width: 100%; max-width: 340px; aspect-ratio: 4 / 5; }
.kr-step__media--wide { max-width: 454px; aspect-ratio: 454 / 302; }
.kr-step__text { margin: 0; max-width: 34ch; font-size: var(--t-md); line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
.kr-step__cats { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.kr-step__cats a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; font: 300 clamp(1.5rem, 1.1rem + 1.2vw, 2.3rem)/1.15 var(--f-display); letter-spacing: -0.01em; }
.kr-step__cats a span { font: 400 1rem/1 var(--f-ui); color: var(--ink-2); transition: transform 0.4s var(--ease-out), color 0.3s; }
.kr-step__cats a:hover span, .kr-step__cats a:focus-visible span { transform: translate(3px, -3px); color: var(--ink); }
/* Four steps side by side (reduced motion, or a window too short to pin): one set of rows for all
   four, so numbers, titles, photos and words keep shared lines however a title wraps. */
@media (min-width: 1025px) {
  .kr-path__track { grid-template-rows: repeat(4, auto); row-gap: 16px; }
  .kr-step { grid-row: span 4; grid-template-rows: subgrid; }
}

/* ---------- 5. What COPALI means: beautiful, comfortable, your own ---------- */
.kr-means { align-items: start; padding-top: clamp(84px, 9vw, 140px); }
.kr-means__copy { grid-column: 1 / span 6; grid-row: 1; }
.kr-means__a { grid-column: 8 / span 4; grid-row: 1 / span 2; aspect-ratio: 3 / 4; }
.kr-means__b { grid-column: 4 / span 3; grid-row: 2; aspect-ratio: 3 / 4; margin-top: clamp(24px, 4vw, 64px); }
.kr-quote { grid-column: 2 / span 10; grid-row: 3; margin: clamp(24px, 4vw, 72px) 0 0; font: 300 italic clamp(1.9rem, 1.1rem + 3vw, 4.4rem)/1.16 var(--f-display); letter-spacing: -0.02em; text-wrap: balance; }

/* ---------- 6. Thank you: the women who are part of the story ---------- */
.kr-thanks__media { grid-column: 1 / span 5; aspect-ratio: 4 / 5; }
.kr-thanks__copy { grid-column: 7 / span 5; }

/* ---------- 7. Today: her laugh at the desk ---------- */
.kr-now__copy { grid-column: 2 / span 6; }
.kr-now__media { grid-column: 9 / span 3; width: 100%; max-width: 420px; aspect-ratio: 645 / 806; }

/* ---------- 8. A personal ending ---------- */
.kr-end { display: grid; justify-items: center; gap: clamp(22px, 3vw, 40px); text-align: center; padding: clamp(130px, 16vw, 260px) var(--gutter-r) clamp(110px, 14vw, 220px) var(--gutter); }
.kr-end__body { margin: 0; max-width: 46ch; font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); line-height: 1.7; color: var(--ink-2); text-wrap: pretty; }
.kr-end__sign { margin: 0; max-width: 24ch; font: 300 clamp(1.7rem, 1.05rem + 2.3vw, 3.3rem)/1.18 var(--f-display); letter-spacing: -0.018em; text-wrap: balance; }
/* font-variant-emoji: the closing ✨ draws as a glyph in the line's colour where the system has one. */
/* justify-self: stretch: shrunk to its widest line, the split welcome put the line masks' edges on the sparkle. */
.kr-end__welcome { justify-self: stretch; margin: clamp(12px, 2vw, 32px) 0 0; font: 300 clamp(2.6rem, 1.2rem + 6vw, 8.5rem)/1.12 var(--f-display); letter-spacing: -0.02em; text-wrap: balance; font-variant-emoji: text; }
.kr-end__welcome span { display: block; }
/* A class, not span + span: SplitText moves each sentence into its own line mask. */
.kr-end__home { font-style: italic; color: var(--accent); }
.kr-end__cta { display: grid; justify-items: center; gap: 14px; margin: clamp(16px, 2.5vw, 40px) 0 0; }
.kr-end__via { font: 600 var(--t-xs)/1 var(--f-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.kr-contact__link {
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; min-height: 60px; padding: 0 32px;
  background: var(--accent); color: var(--accent-ink); text-decoration: none; font: 600 var(--t-sm)/1 var(--f-ui); letter-spacing: 0.12em;
}
.kr-contact__link::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pink); clip-path: inset(100% 0 0 0); transition: clip-path 0.5s var(--ease-out); }
@media (hover: hover) {
  .kr-contact__link:hover { color: var(--ink); }
  .kr-contact__link:hover::before { clip-path: inset(0 0 0 0); }
}
.kr-contact__link:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* ---------- Tablets and phones ---------- */
@media (max-width: 1024px) {
  /* The path reads top to bottom: a rail with one dot per step. */
  .kr-path__line { display: none; }
  .kr-path__track { grid-template-columns: 1fr; gap: clamp(48px, 8vw, 72px); position: relative; padding-left: 30px; }
  .kr-path__track::before, .kr-path__track::after { content: ""; position: absolute; left: 4px; top: 10px; bottom: 0; width: 1px; background: var(--line); }
  /* The filled part of the rail; kristina.js scrubs --kr-rail from 0 to 1 as you read. */
  .kr-path__track::after { background: var(--accent); transform: scaleY(var(--kr-rail, 0)); transform-origin: 50% 0; }
  .kr-step { position: relative; grid-template-columns: minmax(0, 1fr); }
  .kr-step::before { content: ""; position: absolute; left: -30px; top: 0.95rem; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
  .kr-step__media { max-width: min(100%, 420px); }
  /* A crop of her own photo is never drawn larger than its file (383 px wide). */
  .kr-step__media--sleeve { max-width: min(100%, 383px); }
}
@media (max-width: 767px) {
  .kr-ch, .kr-mother__panel { grid-template-columns: minmax(0, 1fr); }
  .kr-ch > *, .kr-mother__panel > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .kr-photo { grid-column: 1 / -1; }
  .kr-who__lead { max-width: none; }
  .kr-before__media { justify-self: start; max-width: 300px; }
  .kr-mother__lead { max-width: none; }
  .kr-means__b { justify-self: end; width: 62%; margin-top: -18%; }
  .kr-now__media { max-width: 320px; }
  .kr-thanks__media { aspect-ratio: 4 / 5; }
}

/* ---------- Staged by kristina.js (motion allowed) ---------- */
/* The depth intro: the photo fills the stage and scales; the name flies toward the camera. */
.motion-ok .kr-intro { padding: 0; }
.motion-ok .kr-intro__stage {
  position: relative; display: block; height: 100svh; overflow: hidden;
  background: var(--paper); isolation: isolate; perspective: 900px; perspective-origin: 50% 46%;
}
.motion-ok .kr-photo { position: absolute; inset: 0; z-index: 1; }
.motion-ok .kr-photo__frame { position: absolute; inset: 0; aspect-ratio: auto; transform-origin: 50% 55%; }
.motion-ok .kr-name {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 0;
  font-size: clamp(5rem, 27vw, 32rem); line-height: 1; white-space: nowrap;
  color: var(--paper); mix-blend-mode: difference; pointer-events: none;
}
.motion-ok .kr-label { position: absolute; z-index: 4; left: var(--gutter); top: calc(var(--nav-h) + 28px); }

/* The sideways chapter: details on separate depth layers over the outlined name. */
.motion-ok .kr-side { display: block; }
.motion-ok .kr-side__stage { position: relative; height: 100svh; overflow: hidden; perspective: 1100px; }
.motion-ok .kr-side__ghost {
  position: absolute; left: 0; top: 50%; margin: -0.55em 0 0; z-index: 0;
  font: 300 clamp(6rem, 30vw, 34rem)/1.1 var(--f-display); letter-spacing: -0.04em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px var(--line-strong); pointer-events: none;
}
.motion-ok .kr-side__ghost span { color: var(--accent); -webkit-text-stroke: 0; font-weight: 200; font-size: 0.5em; padding: 0 0.3em; vertical-align: 0.4em; }
.motion-ok .kr-side__track {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 7vw; height: 100%;
  padding: 0 14vw 0 42vw; transform-style: preserve-3d;
}
.motion-ok .kr-crop { flex: none; }
.motion-ok .kr-crop--a { width: min(32vw, 54vh); }
.motion-ok .kr-crop--b { width: min(34vw, 56vh); align-self: flex-end; margin-bottom: 12vh; }
.motion-ok .kr-crop--c { width: min(22vw, 38vh); align-self: flex-start; margin-top: 16vh; }
.motion-ok .kr-crop--d { width: min(26vw, 44vh); }

@media (max-width: 767px) {
  .motion-ok .kr-name { font-size: 31vw; }
  .motion-ok .kr-side__track { gap: 10vw; padding: 0 12vw 0 24vw; }
  .motion-ok .kr-crop--a { width: 68vw; }
  .motion-ok .kr-crop--b { width: 76vw; margin-bottom: 18svh; }
  .motion-ok .kr-crop--c { width: 52vw; margin-top: 20svh; }
  .motion-ok .kr-crop--d { width: 60vw; }
  .motion-ok .kr-side__ghost { font-size: 52vw; }
}

/* The intro stays hidden until kristina.js has built its entrance (html.is-split), so photo, name and
   label never paint, vanish and replay. Reduced motion and the head fallback drop .motion-ok. */
.js.motion-ok:not(.is-split) [data-kr-frame] { clip-path: inset(100% 0 0 0); }
.js.motion-ok:not(.is-split) [data-kr-name], .js.motion-ok:not(.is-split) [data-kr-label] { visibility: hidden; }

/* Large screens: the path pins and runs sideways; each step lays out as photo + words. */
.kr-path.is-pinned { padding: 0; }
/* minmax(0, 1fr): the column stays the stage's width; the max-content track overflows it, clipped. */
.kr-path.is-pinned .kr-path__stage { height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; padding: calc(var(--nav-h) + 5vh) 0 6vh; overflow: clip; }
.kr-path.is-pinned .kr-path__head { padding: 0 var(--gutter-r) 0 var(--gutter); margin-bottom: 0; }
.kr-path.is-pinned .kr-path__track { display: flex; align-items: flex-start; align-self: center; gap: 6vw; width: max-content; padding: 0 14vw 0 var(--gutter); }
/* Title level with the photo's top edge, words level with its bottom edge. */
.kr-path.is-pinned .kr-step {
  width: min(44vw, 660px); grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "n n" "media title" "media ." "media text"; column-gap: 28px; row-gap: 14px; align-items: start;
}
.kr-path.is-pinned .kr-step__n { grid-area: n; }
.kr-path.is-pinned .kr-step__title { grid-area: title; }
.kr-path.is-pinned .kr-step__media { grid-area: media; max-height: 52vh; }
.kr-path.is-pinned .kr-step__text { grid-area: text; }
.kr-path.is-pinned .kr-step--now { width: min(34vw, 480px); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "n" "title" "cats"; }
.kr-path.is-pinned .kr-step__cats { grid-area: cats; }