@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:500 900;font-display:swap;src:url(../fonts/inter-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:500 900;font-display:swap;src:url(../fonts/inter-cyrillic-wght-normal.woff2) format("woff2-variations");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

/* Layout: a square-cell grid is the coordinate system. Every block is placed in cell units
   (--x, --y, --w, --h); the cell size is derived from the hero's own size via container units. */
:root {
  --ink: #070504;          /* warm near-black ground */
  --line: rgba(255, 172, 92, .12);
  --amber: #f6a24a;
  --amber-hot: #ffd8a0;
  --cream: #f4ead8;        /* display type, CTA */
  --log: #f3ab5f;          /* terminal text */
  --muted: #e2c9a3;        /* secondary mono text */
  --display: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: dark;
  background: var(--ink);
}
html, body { background: var(--ink); color: var(--cream); }
body { margin: 0; font-family: var(--display); -webkit-font-smoothing: antialiased; }
/* the page is the width container, so every section derives the same cell from it (scrollbar excluded) */
.page { container: page / inline-size; }

/* ---------- hero + coordinate system ---------- */
.hero {
  position: relative;
  /* exactly 11.7 rows of the page cell (1.3 rows on top for the header): full screen on wide
     displays, no empty band on taller ones */
  height: calc(min(100cqw / 19.1, 100svh / 11.7) * 11.7);
  overflow: hidden;
  background: var(--ink);
  container: hero / size;
  isolation: isolate;
}
.stage {
  position: absolute; inset: 0;
  /* desktop composition: 19.1 x 11.7 cells; the header gets the top 1.3 rows */
  --cols: 19.1; --rows: 11.7; --px: .6; --py: 1.3;
  --cell: min(100cqw / var(--cols), 100cqh / var(--rows));
  --ox: calc((100cqw - var(--cols) * var(--cell)) / 2 + var(--px) * var(--cell));
  --oy: calc((100cqh - var(--rows) * var(--cell)) * .3 + var(--py) * var(--cell));
  --fx: 9; --fy: 4;        /* the flare sits on a grid node */
}
.box {
  position: absolute;
  left: calc(var(--ox) + var(--x, 0) * var(--cell));
  top: calc(var(--oy) + var(--y, 0) * var(--cell));
  width: calc(var(--w, 1) * var(--cell));
  height: calc(var(--h, 1) * var(--cell));
}
.bleed-r { width: auto; right: 0; }
.probe { visibility: hidden; pointer-events: none; }

/* ---------- grid canvas ---------- */
canvas.grid { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; animation: fade 1.4s ease both; }

/* ---------- photo tiles ---------- */
.tile { margin: 0; overflow: hidden; z-index: 3; background: #0c0805; animation: flick-in .8s linear both; animation-delay: calc(var(--i, 0) * 110ms + 200ms); }
.tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* texture is not baked into the photos: one seamless grain + dust tile, same size on every photo */
.tile::before, .tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.tile::before {
  background: url("../tex/grain.webp") calc(var(--i, 0) * 97px) calc(var(--i, 0) * 53px) / 256px 256px;
  mix-blend-mode: overlay; opacity: var(--grain, .6);
}
.tile::after {
  background: url("../tex/dust.webp") calc(var(--i, 0) * -181px) calc(var(--i, 0) * 67px) / 512px 512px;
  box-shadow: inset 0 0 0 1px var(--line), inset 0 0 calc(var(--cell) * .45) rgba(0, 0, 0, .38);
}
.t-man {
  --x: 2.5; --w: 6.5; top: 0; height: calc(var(--oy) + 4.3 * var(--cell));
  z-index: 1; background: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 38%, transparent 94%), linear-gradient(to right, transparent, #000 34%, #000 93%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 38%, transparent 94%), linear-gradient(to right, transparent, #000 34%, #000 93%, transparent);
  mask-composite: intersect;
}
.t-man::after { box-shadow: none; }
.t-man img { object-position: 62% 30%; }
.t-rack   { --x: 15; --y: 0; --h: 5; --i: 1; }
.t-blinds { --x: 10; --y: 5; --w: 4; --h: 5; --i: 3; }
.t-clouds { --x: 15; --y: 6; --h: 4; --i: 4; }
.t-enter  { --x: 1;  --y: 6; --w: 4; --h: 3; --i: 2; }
.t-clouds img { object-position: 62% 48%; }
.t-enter img { object-position: 58% 50%; }

/* ---------- terminal panels (merged cells: the grid doesn't cross them) ---------- */
.log {
  z-index: 4; background: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: calc(var(--cell) * .38) calc(var(--cell) * .14) 0;
  box-sizing: border-box;
  animation: flick-in .7s linear both; animation-delay: calc(var(--i, 0) * 120ms + 500ms);
}
.log pre {
  margin: 0;
  font: 400 max(9px, calc(var(--cell) * .152))/1.45 var(--mono);
  color: var(--log);
  text-shadow: 0 0 calc(var(--cell) * .08) rgba(255, 150, 60, .45);
  white-space: pre;
}
.log .ln { display: block; }
.log .ts { margin-right: .9em; }
.log .cur { display: block; animation: blink 1.05s steps(1, end) infinite; }
.t-logA { --x: 10; --y: 0; --w: 3; --h: 2; --i: 1; }
.t-logB { --x: 13; --y: 3; --w: 2; --h: 2; --i: 3; padding-left: calc(var(--cell) * .24); padding-top: calc(var(--cell) * .5); }
.t-logC { --x: 5;  --y: 7; --w: 3; --h: 2; --i: 2; padding-left: calc(var(--cell) * .2); padding-top: calc(var(--cell) * .42); }

/* ---------- glowing cells ---------- */
.squares { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.sq { opacity: 0; will-change: opacity; }
.sq::before {
  content: ""; position: absolute; inset: 5.5%;
  background:
    url("../tex/grain.webp"),
    radial-gradient(140% 140% at 40% 35%, #f2b862 0%, #e39b45 55%, #c97d30 100%);
  background-size: 256px 256px, 100% 100%;
  background-position: calc(var(--x) * 61px) calc(var(--y) * 37px), 0 0;
  background-blend-mode: soft-light, normal;
  box-shadow:
    0 0 calc(var(--cell) * .12) rgba(255, 170, 80, .55),
    0 0 calc(var(--cell) * .5) rgba(255, 130, 40, .2),
    inset 0 0 calc(var(--cell) * .1) rgba(255, 244, 220, .45);
}

/* ---------- flare ---------- */
.flare {
  position: absolute; z-index: 6; width: 0; height: 0; pointer-events: none;
  left: calc(var(--ox) + var(--fx) * var(--cell));
  top: calc(var(--oy) + var(--fy) * var(--cell));
  mix-blend-mode: screen;
  animation: ignite 1.4s cubic-bezier(.2, .8, .2, 1) .15s both;
}
.flare-zone { --x: calc(var(--fx) - 1); --y: calc(var(--fy) - 1); --w: 2; --h: 2; pointer-events: none; }
.flare i { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); border-radius: 50%; }
.flare .bloom { width: calc(var(--cell) * 8); height: calc(var(--cell) * 6); background: radial-gradient(closest-side, rgba(255, 180, 90, .7), rgba(255, 132, 40, .24) 46%, transparent); animation: breathe 5.3s ease-in-out infinite alternate; }
.flare .wide { width: calc(var(--cell) * 17); height: calc(var(--cell) * .6); background: radial-gradient(closest-side, rgba(255, 196, 120, .34), rgba(255, 150, 60, .08) 60%, transparent); animation: shimmer 4.1s ease-in-out infinite alternate; }
.flare .h { width: calc(var(--cell) * 12); height: calc(var(--cell) * .1); background: radial-gradient(closest-side, #fffaf0, rgba(255, 218, 160, .75) 26%, rgba(255, 160, 70, .22) 62%, transparent); animation: shimmer 3.3s ease-in-out infinite alternate-reverse; }
.flare .v { width: calc(var(--cell) * .06); height: calc(var(--cell) * 4.4); background: radial-gradient(closest-side, rgba(255, 242, 214, .9), rgba(255, 170, 80, .22) 55%, transparent); }
.flare .d1, .flare .d2 { width: calc(var(--cell) * 2.8); height: calc(var(--cell) * .035); background: radial-gradient(closest-side, rgba(255, 236, 200, .85), transparent); }
.flare .d1 { transform: translate(-50%, -50%) rotate(34deg); }
.flare .d2 { transform: translate(-50%, -50%) rotate(-34deg); }
.flare .core { width: calc(var(--cell) * 1.7); height: calc(var(--cell) * 1.7); background: radial-gradient(closest-side, #fff 0, #fffaf0 15%, rgba(255, 228, 175, .92) 27%, rgba(255, 178, 92, .42) 54%, transparent); animation: pulse 2.7s ease-in-out infinite alternate; }

/* ---------- type ---------- */
.nav {
  position: absolute; z-index: 9; top: 0;
  left: calc(var(--ox) - .16 * var(--cell));
  width: calc(18.4 * var(--cell));
  height: var(--oy);
  display: flex; align-items: center; justify-content: space-between;
}
.brand { font: 600 max(17px, calc(var(--cell) * .33)) var(--display); letter-spacing: -.03em; color: var(--cream); text-decoration: none; }
.nav ul { display: flex; gap: max(14px, calc(var(--cell) * .5)); margin: 0; padding: 0; list-style: none; }
.nav a { color: var(--cream); text-decoration: none; }
.nav li a { font: 500 max(12px, calc(var(--cell) * .175)) var(--display); letter-spacing: -.005em; opacity: .92; }
.nav li a:hover { opacity: 1; text-shadow: 0 0 12px rgba(255, 180, 100, .8); }
a:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 4px; }

.intro { --x: .12; --y: 2.0; width: calc(var(--cell) * 9); height: auto; z-index: 7; }
.intro h1, .intro .sub { width: fit-content; }
.intro h1 {
  margin: 0;
  font: 650 calc(var(--cell) * 1.57)/.84 var(--display);
  letter-spacing: -.022em;
  color: var(--cream);
  margin-left: -.04em;
  animation: rise 1s cubic-bezier(.2, .7, .2, 1) .3s both;
}
.sub {
  margin: calc(var(--cell) * .3) 0 0;
  font: 400 max(13px, calc(var(--cell) * .235))/1.2 var(--mono);
  letter-spacing: .015em;
  color: var(--muted);
  animation: rise 1s cubic-bezier(.2, .7, .2, 1) .45s both;
}
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: calc(var(--cell) * .3);
  height: max(36px, calc(var(--cell) * .6));
  padding: 0 max(18px, calc(var(--cell) * .38));
  border-radius: 999px;
  background: var(--cream); color: #170e07;
  font: 500 max(13px, calc(var(--cell) * .2)) var(--display);
  text-decoration: none;
  transition: box-shadow .25s ease, transform .25s ease;
  animation: rise 1s cubic-bezier(.2, .7, .2, 1) .55s both;
}
.cta:hover { box-shadow: 0 0 0 1px rgba(255, 220, 170, .6), 0 0 28px rgba(255, 160, 70, .55); transform: translateY(-1px); }
.tags {
  --x: -.08; --y: 9.5; width: auto; height: auto; z-index: 7; margin: 0;
  font: 500 max(10px, calc(var(--cell) * .16))/1 var(--mono);
  letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  color: var(--muted);
  animation: fade 1.2s ease .9s both;
}

/* ---------- film grain + vignette ---------- */
.grain, .dust, .vignette { position: absolute; pointer-events: none; z-index: 10; }
/* two grain layers drift slowly and cross-fade into each other: the texture breathes instead of jumping.
   One pair is fixed over the whole viewport (not one per section), so scrolling never re-creates them. */
.grain {
  position: fixed; inset: -60px; z-index: 20;
  background: url("../tex/grain.webp") 0 0 / 256px 256px;
  opacity: .28; mix-blend-mode: overlay; will-change: transform, opacity;
  animation: grain-drift 36s ease-in-out infinite alternate, grain-swap 12s ease-in-out infinite alternate-reverse;
}
.grain.b {
  background-position: 131px 77px; opacity: 0;
  animation: grain-drift 36s ease-in-out -18s infinite alternate-reverse, grain-swap 12s ease-in-out infinite alternate;
}
.dust { inset: 0; background: url("../tex/dust.webp") 140px 90px / 512px 512px; opacity: .5; }
/* side vignette only: identical at the top and bottom of every section, so seams don't show */
.vignette { inset: 0; background: linear-gradient(to right, rgba(0, 0, 0, .42), transparent 15%, transparent 85%, rgba(0, 0, 0, .42)); }
/* keep the seam between sections free of vignette so the grid reads as one surface */
.hero .vignette { background: linear-gradient(rgba(0, 0, 0, .35), transparent 18%), linear-gradient(to right, rgba(0, 0, 0, .42), transparent 15%, transparent 85%, rgba(0, 0, 0, .42)); }
.footer .vignette { background: linear-gradient(to top, rgba(0, 0, 0, .45), transparent 22%), linear-gradient(to right, rgba(0, 0, 0, .42), transparent 15%, transparent 85%, rgba(0, 0, 0, .42)); }

/* ---------- motion ---------- */
@keyframes fade { from { opacity: 0; } }
@keyframes flick-in { 0% { opacity: 0; } 16% { opacity: .85; } 24% { opacity: .08; } 38% { opacity: 1; } 50% { opacity: .4; } 62%, 100% { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(.14em); } }
@keyframes ignite { 0% { opacity: 0; transform: scale(.15); } 35% { opacity: 1; transform: scale(1.4); } 100% { opacity: 1; transform: scale(1); } }
@keyframes pulse { from { transform: translate(-50%, -50%) scale(.93); opacity: .9; } to { transform: translate(-50%, -50%) scale(1.07); opacity: 1; } }
@keyframes shimmer { from { transform: translate(-50%, -50%) scaleX(.86); opacity: .75; } to { transform: translate(-50%, -50%) scaleX(1.08); opacity: 1; } }
@keyframes breathe { from { opacity: .8; } to { opacity: 1; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes grain-drift { 0% { transform: translate(0, 0); } 25% { transform: translate(-23px, 14px); } 50% { transform: translate(17px, -29px); } 75% { transform: translate(-9px, 31px); } 100% { transform: translate(28px, 7px); } }
@keyframes grain-swap { from { opacity: 0; } to { opacity: .28; } }
/* off-screen sections (.is-off, set by JS) hold their looping animations still */
.is-off .flare i, .is-off .cur, .is-off .caret-mark, .is-off .codesheet { animation-play-state: paused; }

/* ---------- portrait / phone: 6.5-cell composition, the hero grows taller than the screen ---------- */
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .hero { height: calc(min(100cqw / 6.5, 96px) * 17); }
  .stage {
    --cols: 6.5; --px: .25;
    --cell: min(100cqw / 6.5, 96px);
    --ox: calc((100cqw - 6.5 * var(--cell)) / 2 + .25 * var(--cell));
    --oy: calc(.9 * var(--cell));
    --fx: 5; --fy: 2;
  }
  .nav { left: calc(var(--ox) - .1 * var(--cell)); width: calc(6.2 * var(--cell)); }
  .brand { font-size: max(17px, calc(var(--cell) * .3)); }
  .nav ul { gap: max(12px, calc(var(--cell) * .26)); }
  .t-man { --x: .4; width: auto; right: 0; height: calc(var(--oy) + 3.3 * var(--cell)); }
  .intro { --x: .08; --y: 2.05; width: calc(var(--cell) * 6.2); }
  .intro h1 { font-size: calc(var(--cell) * 1.13); }
  .sub { margin-top: calc(var(--cell) * .38); font-size: max(13px, calc(var(--cell) * .24)); }
  .t-logA   { --x: 0; --y: 6;  --w: 3; --h: 2; }
  .t-rack   { --x: 3; --y: 6;  --h: 4; }
  .t-logB   { --x: 0; --y: 8;  --w: 2; --h: 2; }
  .t-enter  { --x: 0; --y: 10; --w: 3; --h: 2; }
  .t-clouds { --x: 3; --y: 10; --h: 3; }
  .t-blinds { --x: 0; --y: 12; --w: 3; --h: 3; }
  .t-logC   { --x: 3; --y: 13; --w: 3; --h: 2; }
  .tags { --x: .02; --y: 15.45; }
  .log { padding: calc(var(--cell) * .34) calc(var(--cell) * .12) 0; }
  .log pre { font-size: max(9px, calc(var(--cell) * .148)); }
  .log .ts { margin-right: .6em; }
  .t-logB { padding-left: calc(var(--cell) * .2); padding-top: calc(var(--cell) * .42); }
}

/* ---------- 02 / Work: project clusters of light (rendered on canvas) ---------- */
.work {
  position: relative; height: calc(min(100cqw / 19.1, 100svh / 11.7) * 11); overflow: hidden;
  background: var(--ink); container: work / size; isolation: isolate;
}
/* one grid for the whole page: same cell as the hero; the hero is 11.7 rows with its origin at 1.3,
   so here the rows continue at .6 (1.3 - 11.7 = -10.4 -> .6) */
.work .stage { --rows: 11; --py: .6; }
.work canvas.light { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.work .lone { visibility: hidden; pointer-events: none; }
.work .node { z-index: 2; cursor: pointer; }
.wbar {
  position: absolute; z-index: 5; top: 0; height: var(--oy);
  left: calc(var(--ox) - .16 * var(--cell)); width: calc(18.4 * var(--cell));
  display: flex; align-items: center; justify-content: flex-end;
}
.crumb { font: 500 max(11px, calc(var(--cell) * .2)) var(--display); color: var(--cream); opacity: .88; letter-spacing: .01em; }
.crumb i { font-style: normal; opacity: .5; margin: 0 .4em; }
.label {
  z-index: 4; width: auto; height: auto; white-space: nowrap;
  font: 600 max(13px, calc(var(--cell) * .25)) var(--display); letter-spacing: -.01em;
  color: #f6eee4; text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}
.label:hover, .label:focus-visible, .label.is-hot { color: #fff; }
.feature { z-index: 4; width: calc(var(--cell) * 4.3); height: auto; cursor: pointer; }
.feature h3 { margin: 0; font: 650 max(20px, calc(var(--cell) * .43))/1.1 var(--display); letter-spacing: -.02em; color: #fbf4ea; text-shadow: 0 1px 18px rgba(0, 0, 0, .55); }
.feature h3 a { color: inherit; }
.feature p { margin: calc(var(--cell) * .1) 0 0; font: 400 max(13px, calc(var(--cell) * .255))/1.42 var(--display); color: #d2c1aa; }
.feature .case {
  display: inline-flex; gap: .45em; margin-top: calc(var(--cell) * .3); padding-bottom: 2px;
  font: 500 max(13px, calc(var(--cell) * .25)) var(--display); color: #f6eee4;
  text-decoration: none; border-bottom: 1px solid rgba(246, 238, 228, .7);
}
.feature .case:hover, .feature.is-hot .case { color: #fff; border-bottom-color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* anything that leads somewhere underlines on hover (and when its cluster is hovered) */
.nav li a, .label, .feature h3 a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .24em;
  text-decoration-color: transparent; transition: text-decoration-color .2s ease, color .2s ease;
}
.nav li a:hover, .nav li a:focus-visible,
.label:hover, .label:focus-visible, .label.is-hot,
.feature h3 a:hover, .feature h3 a:focus-visible, .feature.is-hot h3 a { text-decoration-color: currentColor; }

.n-agent { --x: 5.5;  --y: 1.2; --w: 6.5; --h: 4; }
.n-lms   { --x: .5;   --y: .7;  --w: 2.5; --h: 2.5; }
.n-onb   { --x: 14.6; --y: .7;  --w: 3;   --h: 2.5; }
.n-k8s   { --x: .5;   --y: 6.2; --w: 3;   --h: 2; }
.n-mcp   { --x: 14.2; --y: 6;   --w: 3;   --h: 2.5; }
.f-agent { --x: 6.6;  --y: 5.55; }
.l-lms   { --x: .7;   --y: 2.9; }
.l-onb   { --x: 14.9; --y: 3.2; }
.l-k8s   { --x: .7;   --y: 8.35; }
.l-mcp   { --x: 14.2; --y: 8.55; }
.q1 { --x: 4;  --y: 0; }  .q2 { --x: 13; --y: 3; }  .q3 { --x: 0;  --y: 4; }  .q4 { --x: 17; --y: 5; }
.q5 { --x: 4;  --y: 8; }  .q6 { --x: 11; --y: 8; }  .q7 { --x: 2;  --y: 9; }  .q8 { --x: 17; --y: 9; }

@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .work { height: calc(min(100cqw / 6.5, 96px) * 17); }
  .work .stage { --oy: calc(.9 * var(--cell)); }
  .wbar { left: calc(var(--ox) - .1 * var(--cell)); width: calc(6.2 * var(--cell)); }
  .n-agent { --x: -.25; --y: .6; }
  .f-agent { --x: .1;   --y: 4.8; width: calc(var(--cell) * 6); }
  .n-lms   { --x: .25;  --y: 7.5; }
  .n-onb   { --x: 3.4;  --y: 7.5; }
  .n-k8s   { --x: .25;  --y: 11.5; }
  .n-mcp   { --x: 3.4;  --y: 11.3; }
  .l-lms   { --x: .3;   --y: 10.15; }
  .l-onb   { --x: 3.45; --y: 10.15; }
  .l-k8s   { --x: .3;   --y: 14.05; }
  .l-mcp   { --x: 3.45; --y: 14.05; }
  .q1 { --x: 5; --y: 6; }  .q4 { --x: 2; --y: 15; }  .q5 { --x: 5; --y: 15; }
  .q2, .q3, .q6, .q7, .q8 { display: none; }
}

/* ---------- 03 / Belief: a quote set in live SVG text, worn by an SVG filter ---------- */
.belief {
  position: relative; height: calc(min(100cqw / 19.1, 100svh / 11.7) * 11); overflow: hidden;
  background: var(--ink); container: belief / size; isolation: isolate;
}
.belief .stage { --rows: 11; --py: .6; --fx: 15.2; --fy: 6.2; }   /* 11-row sections keep the .6 phase */
.belief canvas.back { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.belief .flare { z-index: 6; }
.belief .flare .bloom { width: calc(var(--cell) * 9); height: calc(var(--cell) * 6.5); background: radial-gradient(closest-side, rgba(255, 176, 86, .78), rgba(255, 128, 36, .3) 45%, transparent); }
.belief .flare .core { width: calc(var(--cell) * 2.2); height: calc(var(--cell) * 2.2); }
.belief .flare .wide { width: calc(var(--cell) * 13); }
.quote { z-index: 3; overflow: visible; }
/* the worn print baked into a canvas (see bootWorn); the SVG stays on top with invisible, selectable text */
.quote-bmp { z-index: 3; pointer-events: none; }
.quote-bmp.m { display: none; }
.quote.baked g { filter: none; }
.quote.baked text { fill: transparent; }
.quote text {
  font-family: var(--display); font-weight: 900; letter-spacing: -.035em;
  fill: #fffaf0; -webkit-user-select: text; user-select: text;
}
.quote.m { display: none; }
.vlabel {
  position: absolute; z-index: 4; top: calc(var(--oy) + .25 * var(--cell));
  left: calc(var(--ox) - .3 * var(--cell)); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--cell) * .3);
  font: 400 max(10px, calc(var(--cell) * .16))/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--log); white-space: nowrap;
}
.vlabel span { writing-mode: vertical-rl; transform: rotate(180deg); }
.vlabel::after { content: ""; width: 1px; height: calc(var(--cell) * 2.4); background: linear-gradient(var(--log), rgba(243, 171, 95, .25)); }
.attr {
  z-index: 4; width: auto; height: auto; margin: 0;
  padding: calc(var(--cell) * .12) calc(var(--cell) * .22);
  background: rgba(7, 5, 4, .86);
  font: 400 max(12px, calc(var(--cell) * .235))/1.2 var(--mono); color: var(--log); letter-spacing: .01em;
  text-shadow: 0 0 calc(var(--cell) * .08) rgba(255, 150, 60, .4);
}
.term { z-index: 4; }
.term pre { margin: 0; }
.b-attr { --x: 1;  --y: 7.62; }
.b-term { --x: 15; --y: 8;   --w: 3.4; --h: 1; }
.b-zone { --x: calc(var(--fx) - 1); --y: calc(var(--fy) - 1); --w: 2; --h: 2; pointer-events: none; }
.b-q { --x: -1; --y: 0; --w: 20; --h: 9; }
.b-qm { --x: -1; --y: 0; --w: 8; --h: 6; }

@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .belief { height: calc(min(100cqw / 6.5, 96px) * 9); }
  .belief .stage { --oy: calc(.9 * var(--cell)); --fx: 4.6; --fy: 4.35; }
  .quote.d, .quote-bmp.d { display: none; }
  .quote.m, .quote-bmp.m { display: block; }
  .vlabel { top: 0; height: var(--oy); left: auto; right: calc(100% - var(--ox) - 6.1 * var(--cell)); transform: none; flex-direction: row; }
  .vlabel span { writing-mode: horizontal-tb; transform: none; }
  .vlabel::after { display: none; }
  .b-attr { --x: .05; --y: 5.35; }
  .b-term { --x: 2; --y: 6.6; --w: 4.2; --h: 1; }
}

/* ---------- 04 / About: portrait under the grid, live text, links ---------- */
.about {
  position: relative; height: calc(min(100cqw / 19.1, 100svh / 11.7) * 11); overflow: hidden;
  background: var(--ink); container: about / size; isolation: isolate;
  --a-label: #c3a390; --a-name: #feebda; --a-sub: #cea68c; --a-text: #d1ac93; --a-stat: #d9b49a;
  --a-rule: rgba(225, 194, 174, .8); --a-border: rgba(236, 207, 185, .72);
}
.about .stage { --rows: 11; --py: .6; }
.portrait { position: absolute; inset: 0; z-index: 1; margin: 0; }
.portrait img {
  width: 100%; height: 100%; object-fit: cover; object-position: 100% 0%; display: block;
  -webkit-mask-image: linear-gradient(to right, transparent 34%, #000 62%), linear-gradient(to bottom, #000 50%, rgba(0, 0, 0, .35) 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 34%, #000 62%), linear-gradient(to bottom, #000 50%, rgba(0, 0, 0, .35) 86%, transparent 100%);
  mask-composite: intersect;
}
.about canvas.light { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; mix-blend-mode: screen; }
.codesheet {
  z-index: 2; mix-blend-mode: screen; opacity: .9; pointer-events: none;
  animation: sheet-float 11s ease-in-out infinite alternate, sheet-flicker 7s steps(1, end) infinite;
}
/* blur on the image, not the animated box: it's rasterized once instead of re-blurred every frame */
.codesheet img { width: 100%; height: 100%; object-fit: fill; display: block; filter: blur(calc(var(--cell) * .028)); }
@keyframes sheet-float { from { transform: translate3d(0, -.06em, 0) rotate(-.4deg); } to { transform: translate3d(0, calc(var(--cell) * .08), 0) rotate(.3deg); } }
@keyframes sheet-flicker { 0%, 100% { opacity: .9; } 41% { opacity: .78; } 42% { opacity: .92; } 77% { opacity: .84; } 78% { opacity: .9; } }

.about .crumb2 { z-index: 4; width: auto; height: auto; margin: 0; font: 400 max(11px, calc(var(--cell) * .2))/1 var(--mono); color: var(--a-label); letter-spacing: .02em; }
.about .crumb2 i { font-style: normal; opacity: .6; margin: 0 .45em; }
.me-name {
  z-index: 4; width: auto; height: auto; margin: 0;
  font: 700 calc(var(--cell) * 1.78)/1 var(--display); letter-spacing: -.045em; color: var(--a-name);
}
.me-sub { z-index: 4; height: auto; margin: 0; font: 500 max(18px, calc(var(--cell) * .42))/1.22 var(--display); color: #e6c3a6; letter-spacing: -.022em; text-wrap: balance; }
.me-text { z-index: 4; height: auto; margin: 0; font: 400 max(14px, calc(var(--cell) * .27))/1.5 var(--display); color: var(--a-text); letter-spacing: -.005em; max-width: 34ch; }
/* sans for reading, mono only for the small technical labels */
.stats {
  z-index: 4; height: auto; margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: calc(var(--cell) * .2) calc(var(--cell) * .55);
  font: 400 max(13px, calc(var(--cell) * .245))/1.35 var(--display); color: var(--a-text); letter-spacing: -.005em;
}
.stats li { border-left: 1px solid var(--a-rule); padding: calc(var(--cell) * .06) 0 calc(var(--cell) * .08) calc(var(--cell) * .28); white-space: nowrap; }
.stats b { display: block; font-weight: 600; font-size: 1.22em; letter-spacing: -.02em; color: #f3dcc6; margin-bottom: .12em; }
.links { z-index: 4; height: auto; display: flex; gap: calc(var(--cell) * .2); }
.links a {
  flex: 0 0 calc(var(--cell) * 2.85); height: calc(var(--cell) * .94); box-sizing: border-box;
  display: flex; align-items: center; gap: calc(var(--cell) * .17); padding: 0 calc(var(--cell) * .3);
  border: 1px solid var(--a-border); color: var(--a-stat); text-decoration: none;
  font: 500 max(14px, calc(var(--cell) * .28))/1 var(--display); letter-spacing: -.01em;
  background: rgba(7, 5, 4, .35);
  transition: box-shadow .25s ease, border-color .25s ease, color .25s ease, background .25s ease;
}
.links svg { width: calc(var(--cell) * .3); height: calc(var(--cell) * .3); flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.links .go { width: calc(var(--cell) * .2); height: calc(var(--cell) * .2); transition: transform .25s ease; }
.links span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: transparent; transition: text-decoration-color .2s ease; }
.links a:hover, .links a:focus-visible {
  border-color: rgba(255, 214, 160, .95); color: #ffe9d2;
  background: linear-gradient(rgba(255, 170, 90, .08), rgba(255, 170, 90, .02)), rgba(7, 5, 4, .35);
  box-shadow: 0 0 calc(var(--cell) * .3) rgba(255, 160, 70, .4), inset 0 0 calc(var(--cell) * .25) rgba(255, 170, 90, .18);
}
.links a:hover span, .links a:focus-visible span { text-decoration-color: currentColor; }
.links a:hover .go, .links a:focus-visible .go { transform: translate(2px, -2px); }

.a-crumb { --x: .26; --y: .26; }
.a-name  { --x: .2;  --y: .8; }
.a-sub   { --x: .28; --y: 2.84; --w: 6.8; }
.a-text  { --x: .28; --y: 4.3; --w: 6.4; }
.a-stats { --x: .28; --y: 6.3; --w: 12; }
.a-links { --x: .28; --y: 8.55; --w: 10; }
.a-code  { --x: 16.4; --y: 1.4; --w: 5.2; --h: 6.8; }

@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .about { height: calc(min(100cqw / 6.5, 96px) * 14); }
  .about .stage { --oy: calc(.9 * var(--cell)); }
  .portrait {
    bottom: auto; height: calc(var(--oy) + 5.3 * var(--cell)); overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%); mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
  }
  .portrait img { object-position: 72% 0%; transform: scale(1.32); transform-origin: 70% 0%; -webkit-mask-image: none; mask-image: none; }
  .codesheet { display: none; }
  .a-crumb { --x: .05; --y: -.55; }
  .a-name  { --x: 0;   --y: 4.1; font-size: calc(var(--cell) * 1.45); }
  .a-sub   { --x: .05; --y: 5.75; --w: 6.1; font-size: max(15px, calc(var(--cell) * .3)); }
  .a-text  { --x: .05; --y: 6.6; --w: 6.1; font-size: max(14px, calc(var(--cell) * .24)); }
  .a-stats { --x: .05; --y: 7.8; --w: 6.1; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--cell) * .25) calc(var(--cell) * .2); font-size: max(12px, calc(var(--cell) * .22)); }
  .stats li { white-space: normal; }
  .a-links { --x: .05; --y: 10.25; --w: 6.1; flex-direction: column; gap: calc(var(--cell) * .15); }
  .links a { flex: none; height: calc(var(--cell) * .8); }
}

/* ---------- footer: the handle as a worn wordmark with a live cursor ---------- */
.footer {
  position: relative; height: calc(min(100cqw / 19.1, 100svh / 11.7) * 11); overflow: hidden;
  background: var(--ink); container: footer / size; isolation: isolate;
}
.footer .stage { --rows: 11; --py: .6; --fx: 13; --fy: 8.65; }
.footer canvas.back { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.footer .flare { z-index: 6; }
.footer .flare .bloom { width: calc(var(--cell) * 8); height: calc(var(--cell) * 6); background: radial-gradient(closest-side, rgba(255, 176, 86, .7), rgba(255, 128, 36, .26) 45%, transparent); }
.footer .flare .wide { width: calc(var(--cell) * 12); }
.mark { z-index: 3; overflow: visible; }
.mark text { font-family: var(--display); font-weight: 900; letter-spacing: -.035em; fill: #fffaf0; }
/* the caret lives in its own SVG on top: blinking it never re-runs the worn filter of the wordmark */
.caret-mark { pointer-events: none; animation: caret 1.1s steps(1, end) infinite; }
@keyframes caret { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .22; } }
.mark.m { display: none; }
.log.f-term {
  z-index: 4; height: auto; box-shadow: inset 0 0 0 1px rgba(243, 171, 95, .6);
  padding: calc(var(--cell) * .14) calc(var(--cell) * .16) calc(var(--cell) * .1);
}
.f-term pre { font-size: max(12px, calc(var(--cell) * .235)); line-height: 1.35; }
.f-links { z-index: 4; height: auto; display: flex; flex-direction: column; gap: calc(var(--cell) * .2); }
.f-links a {
  height: calc(var(--cell) * .6); box-sizing: border-box; display: flex; align-items: center; gap: .45em;
  padding: 0 calc(var(--cell) * .16); border: 1px solid rgba(236, 207, 185, .6); background: rgba(7, 5, 4, .6);
  font: 500 max(13px, calc(var(--cell) * .22))/1 var(--display); color: var(--log); text-decoration: none; letter-spacing: -.005em;
  transition: box-shadow .25s ease, border-color .25s ease, color .25s ease;
}
.f-links a span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: transparent; transition: text-decoration-color .2s ease; }
.f-links svg { width: .85em; height: .85em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.f-links a:hover, .f-links a:focus-visible { border-color: rgba(255, 214, 160, .95); color: #ffe9d2; box-shadow: 0 0 calc(var(--cell) * .25) rgba(255, 160, 70, .4); }
.f-links a:hover span, .f-links a:focus-visible span { text-decoration-color: currentColor; }
.f-links a:hover svg, .f-links a:focus-visible svg { transform: translate(2px, -2px); }
.f-nav { z-index: 4; height: auto; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: calc(var(--cell) * .14); }
.f-nav a {
  font: 500 max(13px, calc(var(--cell) * .22))/1.2 var(--display); color: var(--cream); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: transparent; transition: text-decoration-color .2s ease;
}
.f-nav a:hover, .f-nav a:focus-visible { text-decoration-color: currentColor; }
.f-copy { z-index: 4; width: auto; height: auto; margin: 0; font: 400 max(11px, calc(var(--cell) * .2))/1 var(--mono); color: var(--cream); opacity: .85; }

.f-tm   { --x: 0;    --y: .9;   --w: 3; }
.f-mk   { --x: -1;   --y: 3;    --w: 20;  --h: 9; }
.f-mkm  { --x: -1;   --y: 2;    --w: 8;   --h: 6; }
.f-ln   { --x: 16.1; --y: 5.95; --w: 2.2; }
.f-nv   { --x: 16.1; --y: 8.2;  --w: 2.2; }
.f-cp   { --x: .1;   --y: 9.95; }

@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .footer { height: calc(min(100cqw / 6.5, 96px) * 11); }
  .footer .stage { --oy: calc(.9 * var(--cell)); --fx: 5.6; --fy: 4.6; }
  .footer .flare .bloom { width: calc(var(--cell) * 4.5); height: calc(var(--cell) * 3.4); }
  .footer .flare .wide { width: calc(var(--cell) * 6); }
  .mark.d { display: none; }
  .mark.m { display: block; }
  .f-tm { --x: 0; --y: .3; --w: 3.4; }
  .f-ln { --x: 0; --y: 5.6; --w: 6.1; }
  .f-links a { height: calc(var(--cell) * .72); padding: 0 calc(var(--cell) * .22); font-size: max(15px, calc(var(--cell) * .26)); }
  .f-nv { --x: 0; --y: 8.35; --w: 6.1; flex-direction: row; gap: calc(var(--cell) * .45); }
  .f-cp { --x: 0; --y: 9.35; }
}

/* ---------- "Soon" popup for cases that aren't written yet ---------- */
.soon {
  width: min(calc(100vw - 32px), 460px); padding: 0; border: 0; background: transparent; color: var(--cream); overflow: visible;
}
.soon::backdrop { background: rgba(8, 4, 2, .4); backdrop-filter: blur(3px) sepia(.7) brightness(.45); -webkit-backdrop-filter: blur(3px) sepia(.7) brightness(.45); }
.soon[open] .soon-box { animation: flick-in .55s linear both; }
.soon-box {
  position: relative; box-sizing: border-box; padding: 26px 28px 24px;
  background:
    url("../tex/grain.webp") 0 0 / 256px 256px,
    radial-gradient(120% 90% at 85% 0%, rgba(255, 150, 60, .16), transparent 60%),
    #0b0805;
  background-blend-mode: overlay, normal, normal;
  border: 1px solid rgba(243, 171, 95, .55);
  box-shadow: 0 0 40px rgba(255, 140, 50, .18), 0 30px 80px rgba(0, 0, 0, .6);
}
.soon-kicker { margin: 0 0 14px; font: 400 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--log); }
.soon-title { margin: 0; font: 600 22px/1.2 var(--display); letter-spacing: -.015em; color: #f3dcc6; }
.soon-big {
  margin: 10px 0 18px; font: 900 clamp(64px, 16vw, 96px)/.9 var(--display); letter-spacing: -.045em; color: #fff3e0;
  text-shadow: 0 0 18px rgba(255, 170, 80, .55), 0 0 2px rgba(255, 240, 220, .8);
}
.soon-big .cur { display: inline-block; width: .32em; height: .72em; margin-left: .08em; vertical-align: baseline;
  background: linear-gradient(#ffe6bd, #f29a3e); box-shadow: 0 0 18px rgba(255, 150, 60, .8); animation: caret 1.1s steps(1, end) infinite; }
.soon-note { margin: 0 0 22px; font: 400 15px/1.5 var(--display); color: var(--a-text, #d1ac93); }
.soon form { margin: 0; display: flex; justify-content: flex-end; }
.soon button {
  height: 40px; padding: 0 18px; border: 1px solid rgba(236, 207, 185, .6); background: transparent; color: var(--log);
  font: 500 14px/1 var(--display); cursor: pointer; transition: box-shadow .25s ease, border-color .25s ease, color .25s ease;
}
.soon button:hover, .soon button:focus-visible { border-color: rgba(255, 214, 160, .95); color: #ffe9d2; box-shadow: 0 0 18px rgba(255, 160, 70, .4); outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}