/* ==========================================================================
   index.css — the homepage, redesigned (v1, 2026-10-05)
   --------------------------------------------------------------------------
   Loaded by index.html only. About and every other page never see it, so
   everything here may be page-wide. It comes after the shared files
   (styles.css, swiss.css, home.css, film.css, folder.css, anywhere.css,
   laptop-3d.css), which are NOT edited for Home: the demos keep their block
   grammar from home.css §5, the figures their own files. This file sets the
   page around them and restyles their frames where Home needs it.

   THE FIELD. The canvas is a grid and ideas are blocks. One light page,
   one field of square cells (since 7 October only in the close, drawn by
   index.js; the hero is the copy on paper), one orange. IBM Plex Sans at regular weight for statements,
   Plex Sans 500 uppercase for the thesis, Plex Mono for indices. The
   twelve-column grid is drawn as hairlines in the product chapters.

   Contents
     0 plumbing · 1 tokens · 2 type and grid · 3 hero · 4 band (media slot,
     logos) · 5 thesis · 6 chapters · 7 the demos' stage · 8 figures and
     Plani · 9 the orange plane · 10 close · 11 motion · 12 responsive
   ========================================================================== */

/* ---------- 0. Plumbing ------------------------------------------------------ */
/* styles.css gives html, body and .pf-root overflow-x: hidden, which turns
   them into scroll containers and leaves position: sticky inert. clip
   stops the same overflow without becoming a scroller. */
body, .pf-root { overflow-x: clip; }
/* html is the scroller; anchors move smoothly unless motion is reduced */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Home draws its own field: the fixed dot lattice of the other pages
   would run against the cells. */
.pf-bg { display: none; }

/* ---------- 1. Tokens ------------------------------------------------------- */
.ix {
  --ix-paper: #F4F3F0;
  --ix-ink: #141210;
  --ix-ink-2: rgb(20 18 16 / 0.68);
  --ix-ink-3: rgb(20 18 16 / 0.46);
  --ix-line: rgb(20 18 16 / 0.11);
  --ix-line-2: rgb(20 18 16 / 0.24);
  --ix-mass: #141210;             /* the band */
  --ix-on-mass: #F4F3F0;
  --ix-on-mass-2: rgb(244 243 240 / 0.62);
  --ix-on-mass-line: rgb(244 243 240 / 0.16);
  --ix-accent: var(--flow, hsl(18 100% 62%));
  --ix-plane-ink: #17140F;        /* ink on the orange plane, both themes */
  --ix-pad: clamp(20px, 4.45vw, 80px);
  --ix-gap: clamp(12px, 1.67vw, 24px);
  --ix-cols: 12;
  --ix-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ix-header: 104px;             /* room under the shared header */
  background: var(--ix-paper);
  color: var(--ix-ink);
}
/* Dark (System on a dark OS): the page is the app's graphite; the mass is
   a raised graphite above it, so the cells still read as blocks. */
:root[data-theme="dark"] .ix {
  --ix-paper: #101214;
  --ix-ink: #ECECEE;
  --ix-ink-2: rgb(236 236 238 / 0.7);
  --ix-ink-3: rgb(236 236 238 / 0.48);
  --ix-line: rgb(236 236 238 / 0.09);
  --ix-line-2: rgb(236 236 238 / 0.2);
  --ix-mass: #1D2024;
  --ix-on-mass: #ECECEE;
  --ix-on-mass-2: rgb(236 236 238 / 0.62);
  --ix-on-mass-line: rgb(236 236 238 / 0.14);
}
.ix .ix-shell { max-width: 1600px; margin-inline: auto; padding-inline: var(--ix-pad); }

/* ---------- 2. Type and grid --------------------------------------------- */
.ix .ix-label {
  margin: 0;
  max-width: none;
  font-family: var(--sw-mono);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ix-ink-2);
}
.ix-sq { display: inline-block; width: 8px; height: 8px; margin-right: 12px; background: var(--ix-accent); vertical-align: 0; }
.ix .ix-index {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  margin: 0;
  max-width: none;
  font-family: var(--sw-mono);
  font-size: clamp(22px, 2.1vw, 34px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  color: var(--ix-ink);
}
.ix .ix-of { color: var(--ix-ink-3); }
.ix .ix-h {
  font-size: clamp(42px, 6.1vw, 112px);
  line-height: 0.95;
  letter-spacing: -0.055em;
}
.ix .ix-lede { max-width: 32ch; font-size: 15px; line-height: 1.5; color: var(--ix-ink-2); }

/* The twelve columns, drawn: hairlines on the column edges of the shell,
   behind everything in a chapter (reference: a visible-grid layout). */
.ix-cols {
  position: absolute;
  inset: 0;
  z-index: 0;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: var(--ix-pad);
  pointer-events: none;
  background-image:
    linear-gradient(var(--ix-line), var(--ix-line)),
    linear-gradient(var(--ix-line), var(--ix-line)),
    linear-gradient(to right, var(--ix-line) 1px, transparent 1px);
  background-size: 1px 100%, 1px 100%, calc((100% + var(--ix-gap)) / var(--ix-cols)) 100%;
  background-position: left top, right top, calc(var(--ix-gap) / -2) 0;
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-origin: content-box;
  background-clip: content-box;
}

/* ---------- 3. Hero ---------------------------------------------------------- */
.ix-hero {
  position: relative;
  /* as tall as its content (2026-10-13: was at least the viewport, which
     left a field of empty paper above the band on tall screens) */
  min-height: 660px;
  display: flex;
  overflow: clip;
}
@media (min-width: 1100px) {
  /* the canvas's dot lattice on the hero's paper (or graphite) */
  .ix .ix-hero {
    background-color: var(--ix-paper);
    background-image: radial-gradient(circle at 1px 1px, rgb(var(--tint-rgb) / var(--pf-lattice-alpha, 0.08)) 1px, transparent 0);
    background-size: 20px 20px;
    background-position: calc(50% + 10px) 12px;
  }
}
.ix-hero-in {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: calc(var(--ix-header) + 16px);
  padding-bottom: 136px;
}
.ix .ix-meta {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  width: fit-content;
  min-width: min(100%, 520px);
  font-family: var(--sw-mono);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ix-ink);
}
.ix .ix-meta-r { color: var(--ix-ink-3); }
.ix .ix-title {
  width: fit-content;
  margin-top: clamp(28px, 5vh, 56px);
  font-size: clamp(52px, 8.1vw, 150px);
  line-height: 0.9;
  letter-spacing: -0.06em;
}
.ix .ix-title > span { display: block; white-space: nowrap; }
/* the highlight holds only "chat": a small gap sets the period apart, in the
   headline's own colour */
.ix .ix-hero .ix-title mark { margin-right: 0.035em; }
/* the paragraph, at the foot of the hero on the right */
.ix .ix-hero-note {
  position: absolute;
  right: var(--ix-pad);
  bottom: 56px;
  width: min(320px, 30vw);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ix-ink-2);
}

/* The composer: one solid sheet on the paper, the primary action. A firm
   hairline, a quiet lift, and an ink send key that turns orange once there
   is something to send. */
.ix .ix-composer { width: min(620px, 100%); margin-top: clamp(32px, 5.5vh, 56px); }
.ix .ix-hero .pf-prompt {
  max-width: none;
  background: #FBFAF8;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--ix-line-2);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgb(20 18 16 / 0.04), 0 28px 56px -32px rgb(20 18 16 / 0.42);
  transition: border-color 200ms var(--ix-ease), box-shadow 300ms var(--ix-ease);
}
.ix .ix-hero .pf-prompt:hover { border-color: rgb(20 18 16 / 0.34); }
.ix .ix-hero .pf-prompt:focus-within {
  background: #FDFCFB;
  border-color: var(--ix-ink);
  box-shadow: 0 1px 0 rgb(20 18 16 / 0.04), 0 32px 64px -32px rgb(20 18 16 / 0.5);
}
.ix .ix-hero .pf-prompt-seam { display: none; }
.ix .ix-hero .pf-prompt-input { padding: 18px 18px 4px; }
.ix .ix-hero .pf-prompt-field { font-size: 17px; line-height: 1.5; min-height: 56px; }
.ix .ix-hero .pf-prompt-field::placeholder { color: var(--ix-ink-3); }
.ix .ix-hero .pf-prompt-quick { padding: 10px 12px 12px; }
.ix .ix-hero .pf-prompt-send {
  width: 40px; height: 36px;
  border-radius: 9px;
  background: var(--ix-ink);
  color: var(--ix-paper);
  box-shadow: none;
}
/* Light: the send key is orange at rest too (2026-10-13); System keeps its
   white key (--ix-ink there) until there is something to send */
:root:not([data-theme="dark"]) .ix .ix-hero .pf-prompt-send { background: var(--ix-accent); color: #17140F; }
.ix .ix-hero .pf-prompt-send:hover svg { transform: translateY(-1.5px); }
.ix .ix-hero .pf-prompt[data-armed="true"] .pf-prompt-send {
  background: var(--ix-accent);
  color: #17140F;
  box-shadow: none;
}
.ix .ix-hero .pf-prompt[data-armed="true"] .pf-prompt-send:hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ix-accent) 22%, transparent); }
:root[data-theme="dark"] .ix .ix-hero .pf-prompt {
  background: #16181B;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 28px 56px -30px rgb(0 0 0 / 0.7);
}
:root[data-theme="dark"] .ix .ix-hero .pf-prompt:hover { border-color: rgb(236 236 238 / 0.32); }
:root[data-theme="dark"] .ix .ix-hero .pf-prompt:focus-within { background: #191B1F; border-color: rgb(236 236 238 / 0.62); }

/* Under the sheet: the three starters, flush with its left edge. */
.ix .ix-composer .pf-starters { margin-top: 16px; align-items: flex-start; }
.ix .ix-composer .pf-starters-row { align-items: flex-start; justify-content: flex-start; text-align: left; }
.ix .ix-hero .pf-starter { color: var(--ix-ink-2); }
.ix .ix-hero .pf-starter:hover { color: var(--ix-ink); }

.ix .ix-meta-r, .ix .ix-hero .pf-starter { transition: color 160ms var(--ix-ease); }

/* ---------- 3b. Hero motion: one question becomes a project ---------------
   The loop on the right of the hero (index.js §6, HeroMotion). One stage in
   its own units (692 × 570), scaled to the room beside the statement
   (--hm-s); the field's cells paint in front of it. Blocks follow the app's
   own anatomy (PF codebase: TextBlock, ImageBlock, LinkCardBlock,
   VideoBlock, MarkdownBlock, the TipTap bubble menu, the marquee) and its
   colours in each theme (the accent is the site's, so it sits with the
   System field). Only transform and opacity ever animate; their
   values come from one timeline in index.js. No box around the stage: the
   hero's own paper and lattice are its background. ------------------------ */
.ix-hm {
  --hm-s: 1;
  --hm-ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --hm-mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --hm-code: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  /* the app's tokens (src/styles/base.css), Light */
  --hm-fg: #292929;
  --hm-fg-2: rgb(41 41 41 / 0.85);
  --hm-text-bg: #EFEDE9;             /* card at 80% over the canvas */
  --hm-card: #EEECE7;
  --hm-border: #D9D6D0;
  --hm-text-edge: #DFDCD7;           /* the text block's own border, at half strength */
  --hm-muted: #E9E7E2;
  --hm-muted-fg: #525252;
  --hm-primary: #2E2E2E;
  --hm-edge: rgb(24 22 18 / 0.1);
  --hm-sel: color-mix(in srgb, var(--ix-accent) 24%, transparent);
  --hm-rule: rgb(20 18 16 / 0.2);
  --hm-lift: 0 1px 1px rgb(20 18 16 / 0.04), 0 14px 30px -18px rgb(20 18 16 / 0.32);
  --hm-bar-shadow: 0 10px 26px -12px rgb(20 18 16 / 0.38);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  display: none;
  width: calc(692px * var(--hm-s));
  height: calc(570px * var(--hm-s));
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  opacity: 0;
  transition: opacity 600ms var(--ix-ease);
}
:root[data-theme="dark"] .ix-hm {
  --hm-fg: #FAFAFA;
  --hm-fg-2: rgb(250 250 250 / 0.85);
  --hm-text-bg: #161719;
  --hm-card: #18191B;
  --hm-border: #2A2C30;
  --hm-text-edge: #222428;
  --hm-muted: #1F2023;
  --hm-muted-fg: #B4B6BB;
  --hm-primary: #FAFAFA;
  --hm-edge: rgb(255 255 255 / 0.08);
  --hm-sel: color-mix(in srgb, var(--ix-accent) 30%, transparent);
  --hm-rule: rgb(236 236 238 / 0.2);
  --hm-lift: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 16px 32px -18px rgb(0 0 0 / 0.75);
  --hm-bar-shadow: 0 10px 30px -12px rgb(0 0 0 / 0.6);
}
.ix-hm[data-mode="wide"], .ix-hm[data-mode="narrow"] { display: block; }
.ix-hm.is-ready { opacity: 1; }
html:not(.js) .ix-hm { display: none; }
.ix-hm *, .ix-hm *::before, .ix-hm *::after { box-sizing: border-box; }
.ix-hm .hm-world { position: absolute; left: 0; top: 0; width: 692px; height: 570px; transform: scale(var(--hm-s)); transform-origin: 0 0; }
.ix-hm .hm-cam { position: absolute; inset: 0; transform-origin: 0 0; }
.ix-hm .hm-ui { position: absolute; inset: 0; }
.ix-hm .hm-world svg { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* every placed thing is absolute; index.js writes left/top/width/height
   from the layout table, in stage units */
.ix-hm .hm-b, .ix-hm .hm-frag, .ix-hm .hm-rule, .ix-hm .hm-folder, .ix-hm .hm-mq { position: absolute; }
.ix-hm .hm-b { color: var(--hm-fg); }

/* rings: the app's selection — orange on text, image and video
   (.canvas-selection-border), primary on link and markdown */
.ix-hm .hm-ring {
  position: absolute;
  inset: -2px;
  border: 2px solid var(--ix-accent);
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--ix-paper), 0 0 12px color-mix(in srgb, var(--ix-accent) 15%, transparent);
  opacity: 0;
}
.ix-hm .hm-ring--ink { inset: -1px; border: 1px solid var(--hm-primary); border-radius: 13px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--hm-primary) 20%, transparent); }

/* -- text block (.pf-text): a flat panel, 8 px radius; it grows as it is
      written (a window over the body and a cap that rides its foot) */
.ix-hm .hm-plate { position: absolute; left: 0; top: 0; right: 0; height: 154px; }
.ix-hm .hm-plate-win { position: absolute; left: 0; top: 0; right: 0; height: 146px; overflow: hidden; border-radius: 8px 8px 0 0; }
.ix-hm .hm-plate-body { position: absolute; inset: 0; background: var(--hm-text-bg); border: 1px solid var(--hm-text-edge); border-bottom: 0; border-radius: 8px 8px 0 0; }
.ix-hm .hm-plate-cap { position: absolute; left: 0; right: 0; top: 145px; height: 9px; background: var(--hm-text-bg); border: 1px solid var(--hm-text-edge); border-top: 0; border-radius: 0 0 8px 8px; }
.ix-hm .hm-text .hm-ring { border-radius: 10px; }
.ix-hm .hm-tx { position: absolute; left: 16px; right: 16px; top: 13px; font-family: var(--hm-ui); -webkit-font-smoothing: antialiased; }
.ix-hm .hm-tx p, .ix-hm .hm-tx h3 { position: absolute; left: 0; top: 0; margin: 0; padding: 0; white-space: nowrap; max-width: none; }
.ix-hm .hm-ln { font-size: 12.5px; line-height: 19px; letter-spacing: 0; color: var(--hm-fg-2); }
.ix-hm .hm-para { font-size: 13px; line-height: 20px; transform-origin: 0 50%; }
.ix-hm .hm-ph { color: color-mix(in srgb, var(--hm-muted-fg) 70%, transparent); }
.ix-hm .hm-h1 { font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--hm-fg); transform-origin: 0 0; }
.ix-hm .hm-h1 span { display: block; width: fit-content; }
.ix-hm .hm-row1 { top: 52px !important; } .ix-hm .hm-row2 { top: 71px !important; } .ix-hm .hm-row3 { top: 90px !important; } .ix-hm .hm-row4 { top: 109px !important; }
.ix-hm .hm-tx strong { font-weight: 600; color: var(--hm-fg); }
/* the editor's inline code (.pf-doc .prose code) */
.ix-hm .hm-tx code {
  display: inline-block;
  margin: 0 1px;
  padding: 1px 4px 0;
  border-radius: 3px;
  background: color-mix(in srgb, var(--hm-fg) 6%, transparent);
  font-family: var(--hm-code);
  font-size: 10.5px;
  line-height: 15px;
  color: var(--hm-fg);
  transform-origin: 50% 60%;
}
/* typed lines: a window that opens glyph by glyph over text that stays put */
.ix-hm .hm-win { display: inline-block; overflow: hidden; vertical-align: top; }
.ix-hm .hm-tt { display: inline-block; }
/* the editor's selection and caret are the accent (text-block.css :480, :621) */
.ix-hm .hm-sel { position: absolute; left: -1px; top: 0; height: 20px; background: var(--hm-sel); border-radius: 2px; transform-origin: 0 50%; opacity: 0; }
.ix-hm .hm-sel--h1 { height: 22px; }
.ix-hm .hm-sel--h1b { top: 22px; }
.ix-hm .hm-caret { position: absolute; left: 16px; top: 13px; width: 1.5px; height: 16px; border-radius: 1px; background: var(--ix-accent); }
/* the bubble menu (.pf-doc__fbar), at the selection */
.ix-hm .hm-fbar {
  position: absolute;
  left: 0;
  top: -21px;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  padding: 3px;
  border: 1px solid var(--hm-edge);
  border-radius: 8px;
  background: color-mix(in srgb, var(--hm-card) 96%, transparent);
  box-shadow: var(--hm-bar-shadow);
  color: var(--hm-muted-fg);
  opacity: 0;
  transform-origin: 50% 100%;
}
.ix-hm .hm-fb { position: relative; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; }
.ix-hm .hm-fb svg { position: relative; width: 11px; height: 11px; stroke-width: 2.2; }
.ix-hm .hm-fb-on { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 5px; background: color-mix(in srgb, var(--hm-fg) 10%, transparent); color: var(--hm-fg); opacity: 0; }
.ix-hm .hm-fsep { width: 1px; height: 13px; margin: 0 2px; background: var(--hm-border); }

/* -- image block: the image in the app's 10 px frame */
.ix-hm .hm-img-frame { position: absolute; inset: 0; overflow: hidden; border: 1.5px solid color-mix(in srgb, var(--hm-border) 70%, transparent); border-radius: 10px; background: var(--hm-muted); box-shadow: var(--hm-lift); }
.ix-hm .hm-img-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ix-hm .hm-image .hm-ring { border-radius: 12px; }

/* -- link card (title and domain only, as the app draws it) */
.ix-hm .hm-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--hm-border);
  border-radius: 12px;
  background: var(--hm-card);
  box-shadow: var(--hm-lift);
}
.ix-hm .hm-fav { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 8px; background: color-mix(in srgb, var(--hm-muted) 85%, var(--hm-fg) 3%); color: color-mix(in srgb, var(--hm-muted-fg) 70%, transparent); }
.ix-hm .hm-fav svg { width: 15px; height: 15px; stroke-width: 1.75; }
.ix-hm .hm-lk-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ix-hm .hm-lk-tx b { font: 500 13px/1.35 var(--hm-mono); color: var(--hm-fg); letter-spacing: -0.01em; }
.ix-hm .hm-lk-tx small { font: 400 11px/1.3 var(--hm-mono); color: color-mix(in srgb, var(--hm-muted-fg) 70%, transparent); }
.ix-hm .hm-lk-open { width: 14px; height: 14px; margin-left: auto; color: color-mix(in srgb, var(--hm-muted-fg) 60%, transparent); stroke-width: 1.75; }

/* -- video block: 8 px rounded, a neutral play circle, the app's controls */
.ix-hm .hm-vid { position: absolute; inset: 0; overflow: hidden; border-radius: 8px; background: rgb(0 0 0 / 0.05); box-shadow: var(--hm-lift); }
.ix-hm .hm-vid img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 58% 42%; }
.ix-hm .hm-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgb(0 0 0 / 0.5); box-shadow: 0 8px 18px -6px rgb(0 0 0 / 0.35); color: #fff; }
.ix-hm .hm-play svg { width: 19px; height: 19px; margin-left: 3px; stroke-width: 2; }
.ix-hm .hm-vbar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 7px; height: 25px; padding: 0 9px; background: rgb(0 0 0 / 0.7); color: #fff; }
.ix-hm .hm-vbar svg { flex: none; width: 11px; height: 11px; stroke-width: 2; }
.ix-hm .hm-vbar svg:first-child { fill: #fff; stroke: none; }
.ix-hm .hm-vtime { position: relative; flex: none; font: 400 8.5px/1 var(--hm-code); font-variant-numeric: tabular-nums; color: rgb(255 255 255 / 0.7); }
.ix-hm .hm-vtime span { display: inline-block; }
.ix-hm .hm-vtime span + span { position: absolute; left: 0; top: 0; }
.ix-hm .hm-vtrack { position: relative; flex: 1; height: 3px; border-radius: 2px; background: rgb(255 255 255 / 0.2); overflow: hidden; }
.ix-hm .hm-vtrack i { position: absolute; inset: 0; background: hsl(36 90% 55%); transform-origin: 0 50%; }

/* -- markdown block: raw markdown in mono under a file-name header */
.ix-hm .hm-md { border: 1px solid color-mix(in srgb, var(--hm-border) 80%, transparent); border-radius: 12px; background: var(--hm-card); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.06), var(--hm-lift); }
.ix-hm .hm-md-hd { display: flex; align-items: center; gap: 7px; height: 29px; padding: 0 11px; border-radius: 11px 11px 0 0; border-bottom: 1px solid color-mix(in srgb, var(--hm-border) 70%, transparent); background: color-mix(in srgb, var(--hm-muted) 50%, var(--hm-card)); }
.ix-hm .hm-md-hd svg { width: 12px; height: 12px; color: color-mix(in srgb, var(--hm-muted-fg) 60%, transparent); stroke-width: 1.75; }
.ix-hm .hm-md-hd span { font: 500 10.5px/1 var(--hm-mono); color: color-mix(in srgb, var(--hm-fg) 80%, transparent); }
.ix-hm .hm-md-body { padding: 9px 12px; font: 400 9.75px/13.5px var(--hm-code); color: var(--hm-fg-2); -webkit-font-smoothing: antialiased; }
.ix-hm .hm-md-body > span { position: relative; display: block; white-space: pre; }
/* selected: border primary at 60% and a 2 px ring (MarkdownBlock.tsx) */
.ix-hm .hm-md .hm-ring--ink { border-color: color-mix(in srgb, var(--hm-primary) 60%, transparent); border-radius: 13px; }
.ix-hm .hm-cover { position: absolute; left: -2px; right: -4px; top: 0; bottom: 0; background: var(--hm-card); transform-origin: 100% 50%; }

/* -- the project folder (the original icon, never redrawn) */
.ix-hm .hm-folder img { display: block; width: 100%; height: 100%; }
:root[data-theme="dark"] .ix-hm .hm-folder img { filter: drop-shadow(0 0 0.6px rgb(255 255 255 / 0.42)); }

/* -- the marquee: fill, four dashed edges revealed by windows, four dots */
.ix-hm .hm-mq { opacity: 0; }
.ix-hm .hm-mq-fill { position: absolute; inset: 0; border-radius: 4px; background: color-mix(in srgb, var(--hm-primary) 8%, transparent); box-shadow: 0 4px 12px color-mix(in srgb, var(--hm-primary) 12%, transparent); transform-origin: 0 0; }
.ix-hm .hm-mq-e { position: absolute; overflow: hidden; }
.ix-hm .hm-mq-e i { display: block; width: 100%; height: 100%; }
.ix-hm .hm-mq-e--t { left: 0; top: -1px; width: 100%; height: 2px; }
.ix-hm .hm-mq-e--t i { background: repeating-linear-gradient(90deg, var(--hm-primary) 0 6px, transparent 6px 10px); }
.ix-hm .hm-mq-e--l { left: -1px; top: 0; width: 2px; height: 100%; }
.ix-hm .hm-mq-e--l i { background: repeating-linear-gradient(180deg, var(--hm-primary) 0 6px, transparent 6px 10px); }
.ix-hm .hm-mq-y { position: absolute; left: 0; top: 0; width: 100%; height: 0; }
.ix-hm .hm-mq-x { position: absolute; left: 0; top: 0; width: 0; height: 100%; }
.ix-hm .hm-mq-dot { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--hm-primary); }

/* -- construction lines, drawn as the material settles */
.ix-hm .hm-rule { background: var(--hm-rule); }
.ix-hm .hm-rule--v { width: 1px; transform-origin: 50% 0; }
.ix-hm .hm-rule--h { height: 1px; transform-origin: 0 50%; }

/* -- research fragments */
.ix-hm .hm-frag { display: block; object-fit: contain; }
/* the blueprint: a sheet tucked under the brief */
.ix-hm [data-hm="blueprint"] { object-fit: cover; border-radius: 2px; box-shadow: 0 1px 2px rgb(20 18 16 / 0.14); }
:root[data-theme="dark"] .ix-hm [data-hm="blueprint"] { filter: brightness(0.8) saturate(0.78); }
.ix-hm .hm-branch {
  position: absolute;
  inset: 0;
  background: var(--hm-fg);
  opacity: 0.5;
  -webkit-mask: url(assets/hero-motion/branch.webp) center / 100% 100% no-repeat;
          mask: url(assets/hero-motion/branch.webp) center / 100% 100% no-repeat;
}
:root[data-theme="dark"] .ix-hm .hm-branch { opacity: 0.38; }

/* -- the pixel cursor and its double-click spark, in screen pixels */
.ix-hm .hm-cursor { position: absolute; left: 0; top: 0; }
.ix-hm .hm-cur { position: absolute; left: 0; top: 0; overflow: visible; }
.ix-hm .hm-cur--beam { left: -7px; top: -18px; opacity: 0; }
.ix-hm .hm-spark { position: absolute; left: 0; top: 0; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; background: var(--ix-accent); opacity: 0; }

/* the still (reduced motion): the finished board, no pointer, the video at rest */
.ix-hm.is-still .hm-cursor, .ix-hm.is-still .hm-spark { display: none; }
.ix-hm.is-still [data-hm="video-play"] { opacity: 1 !important; }

/* -- its pause control, at the right end of the meta line */
.ix-hm-toggle {
  position: absolute;
  z-index: 2;
  top: calc(var(--ix-header) + 16px - 7px);
  right: max(var(--ix-pad), calc((100% - 1600px) / 2 + var(--ix-pad)));
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 30px;
  padding: 0 0 0 6px;
  border: 0;
  background: none;
  font-family: var(--sw-mono);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ix-ink-2);
  cursor: pointer;
  transition: color 160ms var(--ix-ease), opacity 240ms var(--ix-ease), visibility 0s;
}
.ix-hm-toggle[hidden] { display: none; }
.ix-hm-toggle:hover { color: var(--ix-ink); }
.ix-hm-toggle:focus-visible { outline: 2px solid var(--ix-accent); outline-offset: 3px; }
.ix-hm-toggle i { display: block; width: 8px; height: 9px; background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 5px, currentColor 5px 8px); }
.ix-hm-toggle[data-paused="true"] i { width: 8px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.ix-hm-toggle.is-covered:not(:focus-visible) { opacity: 0; visibility: hidden; transition: opacity 240ms var(--ix-ease), visibility 0s 240ms; }

/* ---------- 4. The band: the media slot ------------------------------------ */
.ix-band {
  position: relative;
  margin-top: -1px;              /* no hairline of paper between hero and band */
  padding: clamp(32px, 3.6vw, 56px) 0 clamp(56px, 7vw, 104px);   /* the video sits a little into the band */
  background: var(--ix-mass);
  color: var(--ix-on-mass);
  --sw-ink: var(--ix-on-mass);
  --sw-muted: var(--ix-on-mass-2);
  --sw-line: var(--ix-on-mass-line);
}
.ix-media {
  position: relative;
  width: min(100%, 1240px);
  margin-inline: auto;
  --ix-media-ar: 16 / 10;
  --ix-media-ar-phone: 4 / 5;
  /* the opening: an inset from each edge, set by index.js as the band
     arrives (one cell at the centre → the whole frame) */
  --o-t: 0px; --o-r: 0px; --o-b: 0px; --o-l: 0px;
}
.ix-media .pff { gap: 18px; }
.ix-media .pff-frame,
.ix-media > .ix-video {
  flex: none;
  width: 100%;
  min-height: 0;
  aspect-ratio: var(--ix-media-ar);
  clip-path: inset(var(--o-t) var(--o-r) var(--o-b) var(--o-l));
}
.ix-media > .ix-video { display: block; height: auto; object-fit: cover; background: #101214; }
/* the frame against the band: a hairline in both themes */
.ix-media .pff-frame::after { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
/* the app's selection corners, on the frame's own box */
.ix-corners {
  position: absolute;
  inset: 0 0 auto;
  z-index: 7;
  aspect-ratio: var(--ix-media-ar);
  pointer-events: none;
}
.ix-corners b {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 0 solid var(--ix-accent);
}
.ix-corners b:nth-child(1) { left: calc(var(--o-l) - 9px);  top: calc(var(--o-t) - 9px);    border-width: 2px 0 0 2px; }
.ix-corners b:nth-child(2) { right: calc(var(--o-r) - 9px); top: calc(var(--o-t) - 9px);    border-width: 2px 2px 0 0; }
.ix-corners b:nth-child(3) { right: calc(var(--o-r) - 9px); bottom: calc(var(--o-b) - 9px); border-width: 0 2px 2px 0; }
.ix-corners b:nth-child(4) { left: calc(var(--o-l) - 9px);  bottom: calc(var(--o-b) - 9px); border-width: 0 0 2px 2px; }
/* the film's chapters, set on the band */
.ix-media .pff-ch { color: var(--ix-on-mass-2); }
.ix-media .pff-foot { padding-inline: 0; }
/* a video's own pause control (index.js adds it to a <video> slot) */
.ix-media-toggle {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 8;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  background: rgb(16 18 20 / 0.72);
  color: #ECECEE;
  font-family: var(--sw-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Used by people at — the band continues under the slot */
.ix .logoloop-section {
  margin-top: -1px;
  padding: 0 0 clamp(40px, 5vw, 64px);
  background: var(--ix-mass);
  color: var(--ix-on-mass);
  --ink: var(--ix-on-mass);
  --sw-ink: var(--ix-on-mass);
  --sw-muted: var(--ix-on-mass-2);
  --sw-line: var(--ix-on-mass-line);
}
.ix .logoloop-section .sw-shell { max-width: 1600px; padding-inline: var(--ix-pad); }
.ix .logoloop-section .logoloop-note { color: var(--ix-on-mass-2); }
.ix .logoloop__item { opacity: 0.86; }
.ix .logoloop-section.ix-off .logoloop__track { animation-play-state: paused; }

/* System: the band is orange (the owner's call, 6 October); ink is set on
   it as on the desktop plane. */
:root[data-theme="dark"] .ix-band,
:root[data-theme="dark"] .ix .logoloop-section {
  background: var(--ix-accent);
  color: var(--ix-plane-ink);
  --ink: var(--ix-plane-ink);
  --sw-ink: var(--ix-plane-ink);
  --sw-muted: rgb(23 20 15 / 0.66);
  --sw-line: rgb(23 20 15 / 0.2);
}
:root[data-theme="dark"] .ix .ix-media .pff-ch,
:root[data-theme="dark"] .ix .logoloop-section .logoloop-note { color: rgb(23 20 15 / 0.66); }
:root[data-theme="dark"] .ix-corners b { border-color: var(--ix-plane-ink); }
:root[data-theme="dark"] .ix-media .pff-frame::after { box-shadow: inset 0 0 0 1px rgb(23 20 15 / 0.35); }

/* ---------- 5. Thesis: a chat is a line ----------------------------------- */
.ix-thesis { position: relative; }
.ix-thesis-stage { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; }
.ix-city { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 97%); }
html:not(.js) .ix-city { display: none; }
.ix-thesis-in { position: relative; z-index: 1; padding-top: clamp(72px, 12vh, 136px); }
.ix .ix-statement {
  margin-top: 20px;
  font-size: clamp(34px, 5.5vw, 100px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.ix .ix-st { display: block; width: fit-content; }
.ix .ix-st-b { margin-left: calc((100% + var(--ix-gap)) / 12 * 5); }
/* pinned: the stage holds while the section scrolls (index.js sets the
   section's height from the viewport) */
.ix-thesis.is-live { height: var(--ix-city-h, 260vh); }
.ix-thesis.is-live .ix-thesis-stage { position: sticky; top: 0; height: 100vh; height: 100svh; }
.ix-thesis.is-live .ix-st-b { clip-path: inset(0 100% 0 0); transition: clip-path 900ms var(--ix-ease); }
.ix-thesis.is-live.is-b .ix-st-b { clip-path: inset(0 0 0 0); }

/* ---------- 6. Chapters ------------------------------------------------------ */
.ix-ch {
  position: relative;
  padding-block: clamp(72px, 7vw, 120px);
  border-top: 1px solid var(--ix-line-2);
}
.ix-ch > .ix-shell { position: relative; z-index: 1; }
.ix-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--ix-gap);
  row-gap: 28px;
  align-items: end;
  margin-bottom: clamp(48px, 5vw, 80px);
}
.ix-head .ix-index { grid-column: 1 / 4; grid-row: 1; align-self: start; }
.ix-head .ix-label { grid-column: 4 / 10; grid-row: 1; align-self: start; padding-top: 0.3em; }
.ix-head .ix-h { grid-column: 4 / 13; grid-row: 2; }
.ix-head .ix-lede { grid-column: 1 / 4; grid-row: 2; padding-bottom: 0.4em; }

/* ---------- 7. The demos' stage (01, 02) ------------------------------------- */
.ix-stage { position: relative; }
/* the tabs lead the board: one row of three columns over the canvas */
.ix-stage .sw-steps {
  border-top: 1px solid var(--ix-line-2);
  margin-bottom: 20px;
  background: var(--ix-paper);
}
.ix-stage .sw-steps button {
  grid-template-columns: 44px minmax(0, 1fr) 24px;
  padding: 20px 20px 20px 0;
  border-bottom: 0;
}
.ix-stage .sw-steps button + button { padding-left: 20px; border-left: 1px solid var(--ix-line); }
.ix-stage .sw-steps button > span:nth-child(2) { font-size: clamp(22px, 2.3vw, 36px); letter-spacing: -0.045em; line-height: 1.05; }
.ix-stage .sw-steps button > .eyebrow { align-self: start; padding-top: 0.6em; font-size: 11px; }
.ix-stage .sw-steps small { font-size: 13px; }
.ix-stage .sw-steps button[aria-selected="false"] > span:nth-child(2) { color: var(--ix-ink-3); }
.ix-stage .sw-steps button { transition: background-color 160ms var(--ix-ease), color 160ms var(--ix-ease); }
@media (hover: hover) {
  .ix-stage .sw-steps button:hover { background: transparent; }
  .ix-stage .sw-steps button:hover > span:nth-child(2) { color: var(--ix-ink); }
}
/* time left on an automatic step (02): a hairline that fills under the tab */
.ix-stage .sw-steps button > i.ix-tick {
  position: absolute;
  left: 0; right: 20px; bottom: -1px;
  height: 1px;
  background: var(--ix-accent);
  transform: scaleX(var(--ix-tick, 0));
  transform-origin: 0 50%;
  pointer-events: none;
}
.ix-stage .sw-steps button + button > i.ix-tick { left: 20px; }
.ix-stage .demo { position: relative; }
/* pinned (01, wide screens): index.js puts a spacer after the stage, and
   the stage holds in the middle of the viewport while the page scrolls
   through it */
.ix-ch.is-pinned .ix-stage { position: sticky; top: var(--ix-pin-top, 80px); z-index: 2; }
.ix-pin-space { display: block; pointer-events: none; }

/* ---------- 8. Figures and Plani ------------------------------------------ */
.ix #folder .ff, .ix #anywhere .ca { position: relative; }
/* Plani (Plani Mini): pixel art, drawn at whole-pixel steps, never smoothed */
.ix .ix-plani { display: block; height: auto; pointer-events: none; user-select: none; image-rendering: pixelated; }
/* at chess on the board's top edge, right of the tabs' rule */
.ix .ix-plani--chess {
  position: absolute;
  right: 1%;
  bottom: calc(100% - 4px);
  z-index: 3;
  width: clamp(250px, 22vw, 360px);
}
/* teaching: under the folder he teaches from, feet on the sheet's floor
   (the wide sheet leaves that corner free); a block after it below */
.ix .ix-plani--teach { width: min(78vw, 340px); margin: 32px 0 0 auto; }
@media (min-width: 1120px) {
  .ix .ix-plani--teach { position: absolute; left: var(--ix-pad); bottom: 0; z-index: 2; margin: 0; width: clamp(280px, 21vw, 340px); }
}
/* in dark, Plani's black cap and hoodie keep an edge on the graphite page */
:root[data-theme="dark"] .ix .ix-plani,
:root[data-theme="dark"] .ix #anywhere .ca-icon { filter: drop-shadow(0 0 0.6px rgb(255 255 255 / 0.42)); }

/* ---------- 9. The orange plane: on your desktop --------------------------- */
.ix .ix-plane {
  overflow: clip;
  border-top: 0;
  background: var(--ix-accent);
  color: var(--ix-plane-ink);
  --ix-ink: var(--ix-plane-ink);
  --ix-ink-2: rgb(23 20 15 / 0.74);
  --ix-ink-3: rgb(23 20 15 / 0.5);
  --ix-line: rgb(23 20 15 / 0.2);
  --ix-line-2: rgb(23 20 15 / 0.32);
  --sw-ink: var(--ix-plane-ink);
  --sw-muted: rgb(23 20 15 / 0.72);
  --sw-line: rgb(23 20 15 / 0.3);
  --l3d-tag-bg: var(--ix-accent);
  --l3d-ring: var(--ix-plane-ink);
}
/* a halftone of the canvas lattice, denser toward the laptop */
.ix-halftone {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 50% 50%, rgb(23 20 15 / 0.2) 1.15px, transparent 1.6px);
  background-size: 8px 8px;
  -webkit-mask-image: linear-gradient(100deg, transparent 18%, rgb(0 0 0 / 0.35) 48%, #000 92%);
  mask-image: linear-gradient(100deg, transparent 18%, rgb(0 0 0 / 0.35) 48%, #000 92%);
}
.ix-plane .ix-shell { position: relative; }
.ix-plane .ix-head { margin-bottom: 0; }
.ix-desk {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--ix-gap);
  align-items: end;
}
.ix-desk-list { grid-column: 1 / 5; grid-row: 1; padding-bottom: 12px; }
.ix-laptop { grid-column: 5 / 13; grid-row: 1; width: 100%; max-width: 820px; justify-self: end; margin-top: -24px; }
.ix-plane .desktop-list { border-top-color: var(--sw-line); }
.ix-plane .desktop-status { border-color: rgb(23 20 15 / 0.42); color: var(--ix-plane-ink); }
.ix-plane .desktop-glyph { opacity: 0.8; }

/* ---------- 10. Close: make room for thought -------------------------------- */
.ix-close { position: relative; min-height: max(720px, 100vh); min-height: max(720px, 100svh); overflow: clip; display: flex; }
.ix-close-in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--ix-gap);
  align-content: center;
  width: 100%;
  padding-block: clamp(96px, 14vh, 168px);
}
.ix-close-in > .ix-label { grid-column: 1 / -1; width: fit-content; }
.ix .ix-title--close { grid-column: 1 / -1; margin-top: 24px; font-size: clamp(56px, 10.2vw, 188px); line-height: 0.88; }
.ix-close-foot {
  grid-column: 1 / 7;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 24px 40px;
  width: fit-content;
  margin-top: clamp(40px, 6vh, 72px);
}
.ix .ix-close-foot p { font-size: 16px; color: var(--ix-ink-2); }
.ix .ix-close-foot .button { min-width: 300px; }
.ix .ix-plani--sit { grid-column: 9 / 11; grid-row: 3; align-self: end; justify-self: start; width: clamp(128px, 11vw, 200px); }

/* The field (index.js §1): the page's square cells, which rise with the
   scroll as the section arrives and rest as its ground. Its colours are
   tokens: the cells, the lit windows, and the cell under the pointer (on
   paper, and on the cells). The cells are one quiet step off the page in
   each theme (warm stone on paper, raised graphite on graphite), so they
   form the room's ground without weighing on the statement; the orange
   stays for the windows, the pointer and the one action. */
.ix-field { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
html:not(.js) .ix-field { display: none; }
.ix-close {
  --ix-cell: #141210;
  --ix-cell-lit: #FF7A3D;
  --ix-cell-point: #FF7A3D;
  --ix-cell-point-on: #FF7A3D;
}
:root[data-theme="dark"] .ix-close {
  --ix-cell: #FF7A2F;
  --ix-cell-lit: #101214;
  --ix-cell-point: #FF7A2F;
  --ix-cell-point-on: #101214;
}
/* Plani sits down once the ground under him has formed (index.js sets
   --ix-sit from 0 to 1); without scripting he is simply there */
.ix-close.is-live .ix-plani--sit { opacity: var(--ix-sit, 0); }

/* ---------- 11. Motion ------------------------------------------------------ */
/* The hero enters once its faces are ready (html.fonts-ready, set in <head>):
   the statement line by line, the composer after it. */
@keyframes ix-rise { from { opacity: 0; transform: translateY(0.18em); } to { opacity: 1; transform: none; } }
@keyframes ix-lift { from { transform: translateY(14px); } to { transform: none; } }
html.js:not(.fonts-ready) .ix-title > span, html.js:not(.fonts-ready) .ix-meta { opacity: 0; }
html.js.fonts-ready .ix-title > span { animation: ix-rise 900ms var(--ix-ease) both; }
html.js.fonts-ready .ix-title > span:nth-child(2) { animation-delay: 70ms; }
html.js.fonts-ready .ix-title > span:nth-child(3) { animation-delay: 140ms; }
html.js.fonts-ready .ix-meta { animation: ix-rise 700ms var(--ix-ease) both; }
html.js.fonts-ready .ix-composer { animation: ix-lift 900ms 200ms var(--ix-ease) both; }
/* chapter heads: the index and the statement arrive as the chapter does */
html.ix-motion .ix-head:not(.is-in) > * { opacity: 0; transform: translateY(18px); }
html.ix-motion .ix-head > * { transition: opacity 800ms var(--ix-ease), transform 800ms var(--ix-ease); }
html.ix-motion .ix-head > .ix-h { transition-delay: 60ms; }
html.ix-motion .ix-head > .ix-lede, html.ix-motion .ix-head > .ix-plani { transition-delay: 160ms; }
/* the chapter rule draws across as the chapter arrives */
.ix-ch::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: var(--ix-ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
html.ix-motion .ix-ch.is-in::before { transform: scaleX(1); transition: transform 1100ms var(--ix-ease); }
html.ix-motion .ix-ch.is-in.is-ruled::before { opacity: 0; transition: opacity 600ms; }
.ix-plane::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  html.js .ix-title > span, html.js .ix-meta, html.js .ix-composer { opacity: 1 !important; animation: none !important; transform: none !important; }
  .ix-thesis.is-live .ix-st-b { transition: none; }
  .ix-ch::before { display: none; }
}

/* ---------- 12. Responsive -------------------------------------------------- */
@media (min-width: 1600px) {
  .ix { --ix-header: 120px; }
}
@media (max-width: 1099px) {
  .ix { --ix-cols: 8; }
  .ix-head { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .ix-head .ix-index { grid-column: 1 / 4; }
  .ix-head .ix-label { grid-column: 4 / 9; }
  .ix-head .ix-h { grid-column: 1 / 9; grid-row: 2; }
  .ix-head .ix-lede { grid-column: 1 / 6; grid-row: 3; }
  .ix .ix-hero-note { display: none; }
  .ix-hero-in { padding-bottom: 136px; }
  .ix-desk { grid-template-columns: 1fr; row-gap: 24px; }
  .ix-desk-list, .ix-laptop { grid-column: 1; }
  .ix-laptop { grid-row: 1; justify-self: center; max-width: 640px; margin-top: 8px; }
  .ix-desk-list { grid-row: 2; }
  .ix-close-in { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .ix-close-foot { grid-column: 1 / 9; }
  .ix .ix-plani--sit { grid-column: 6 / 9; grid-row: 4; justify-self: end; margin-top: 32px; }
}
@media (max-width: 700px) {
  .ix { --ix-cols: 4; --ix-header: 96px; --ix-gap: 12px; }
  .ix .ix-meta { display: block; min-width: 0; }
  .ix .ix-meta-r { display: none; }
  .ix .ix-title { font-size: clamp(40px, 12.4vw, 60px); line-height: 0.92; margin-top: 22px; }
  .ix .ix-title > span { white-space: normal; }
  .ix .ix-composer { margin-top: 28px; }
  .ix .ix-hero .pf-prompt-input { padding: 14px 14px 2px; }
  .ix .ix-hero .pf-prompt-field { font-size: 16px; }
  .ix .ix-hero .pf-prompt-quick { padding: 8px 10px 10px; }
  .ix-hero-in { padding-bottom: 96px; }
  .ix-band { padding-top: 24px; }
  .ix-media .pff-frame, .ix-media > .ix-video, .ix-corners { aspect-ratio: var(--ix-media-ar-phone); }
  .ix-corners b { width: 14px; height: 14px; }
  .ix .ix-statement { font-size: clamp(30px, 9.4vw, 46px); }
  .ix .ix-st-b { margin-left: 18%; }
  .ix-head { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 20px; }
  .ix-head .ix-index { grid-column: 1 / 3; }
  .ix-head .ix-label { grid-column: 3 / 5; justify-self: end; text-align: right; }
  .ix-head .ix-h { grid-column: 1 / 5; }
  .ix-head .ix-lede { grid-column: 1 / 5; }
  .ix .ix-h { font-size: clamp(38px, 11.4vw, 56px); }
  /* phones: the tabs lead the board and dock at the top while it scrolls */
  .ix-stage .sw-steps { position: sticky; top: 0; z-index: 6; margin-inline: calc(var(--ix-pad) * -1); padding-inline: var(--ix-pad); border-bottom: 1px solid var(--ix-line); margin-bottom: 14px; }
  .ix-stage .sw-steps button, .ix-stage .sw-steps button + button { padding: 14px 8px 12px; }
  .ix-stage .sw-steps button > span:nth-child(2) { font-size: 17px; }
  .ix-stage .sw-steps small { display: none; }
  .ix-stage .sw-steps button > .eyebrow { padding-top: 0; }
  /* phones: Plani sits in the flow, over the tabs, clear of the lede */
  .ix .ix-plani--chess { position: static; width: min(62vw, 240px); margin: 8px 0 -3px auto; }
  .ix-close-in { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block: 96px 80px; }
  .ix .ix-title--close { font-size: clamp(52px, 15vw, 80px); }
  .ix-close-foot { grid-column: 1 / 5; display: block; }
  .ix .ix-close-foot .button { margin-top: 28px; min-width: 0; width: 100%; }
  .ix .ix-plani--sit { grid-column: 3 / 5; grid-row: 4; width: min(36vw, 150px); margin-top: 24px; }
}
@media (max-width: 380px) {
  .ix .ix-title { font-size: 38px; }
}

/* ---------- Print: the page at rest, without pins ---------------------------- */
@media print {
  .ix-thesis.is-live { height: auto; }
  .ix-thesis.is-live .ix-thesis-stage, .ix-ch.is-pinned .ix-stage { position: static; }
  .ix-pin-space { display: none; }
  .ix-thesis.is-live .ix-st-b { clip-path: none; }
  html.ix-motion .ix-head > *, html.js .ix-title > span, html.js .ix-meta { opacity: 1 !important; transform: none !important; }
  .ix-ch::before { display: none; }
  .ix-stage .sw-steps { position: static; }
}

/* ---------- 13. The logo and the closing wordmark (2026-10-09) ------------ */
/* The header's approved P now lives in the shared header.css (.pf-logo, on
   every page since 2026-10-13). The Clepto wordmark it replaced spans the
   foot of the page, a faint echo that fades out downward. */

.ix-giant {
  container-type: inline-size;
  /* Clepto's ink runs 0.0526–5.4515 em across "PlansFlow" and its caps
     stand 0.6316 em: the row holds the caps, cut off near their feet */
  height: calc(100cqw / 5.399 * 0.64);    /* the whole word shows; only the fade softens its foot */
  margin-top: clamp(24px, 4vw, 56px);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.ix-giant span {
  display: block;
  font-family: "Clepto", var(--sw-mono);
  font-weight: 400;
  font-size: calc(100cqw / 5.399);       /* the ink set exactly to the row */
  line-height: 0.44;                     /* puts the caps' top at the row's top */
  padding-bottom: 0.3em;                 /* the gradient (clipped to the text) must reach below the line box */
  margin-left: -0.0526em;
  letter-spacing: 0;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(to bottom, rgb(20 18 16 / 0.095) 0, rgb(20 18 16 / 0.08) 0.24em, rgb(20 18 16 / 0.022) 0.64em);
  -webkit-background-clip: text;
  background-clip: text;
}
:root[data-theme="dark"] .ix-giant span {
  background-image: linear-gradient(to bottom, rgb(255 255 255 / 0.08) 0, rgb(255 255 255 / 0.066) 0.24em, rgb(255 255 255 / 0.018) 0.64em);
}