/* randomknights.xyz landing: the owner's 2560 x 1440 mock (xyz-home.png),
   built on the vendored chalk kit.

   Only the landing loads this file. The docs pages keep src/site.css and their
   current look until their own lane.

   UNITS. Every number below is a pixel of the owner's 2560 x 1440 frame, read
   from the mock (positions are in out\board\LAYOUT.md in the lane folder). From
   1000px up the page IS that frame at any width, scaled: a unit is
   100cqw / 2560, the frame is the window width capped at 1440, and every box,
   gap and font size is a count of units, so the proportions never change. Above
   1440 the frame stays 1440 wide and centered; the ground, the header band, the
   sweep bar and the footer plate run the full window width.

   The fill rule at the end of this file scales the content group up by k on a
   window taller than the mock's room; every number here is then in --u of that
   group.

   Text floor: no text is drawn under 12px (the max(12px, ...) values). Under
   1000px the elements keep the mock's order and stack in the kit's pattern; the
   owner draws mobile and tablet separately.

   Tokens, faces, the BETA chip frame and the skip link come from the vendored
   kit (/assets/vendor/chalk/dist/kit.css). Colors the mock sets and the kit
   does not are listed in :root below with their source.
   No gradient text, no filters, no title attributes. */

:root {
  --bd-white: #ffffff;       /* the mock's text white (the kit chalk is #f6f3ed) */
  --bd-grey: #858585;        /* K13, AiEDs and Earth+ in the statement */
  --bd-footer-purple: #9c82ff;
  --bd-dim-white: #d8d8d8;
  --bd-xyz: #fdcac3;         /* the mock's family link colors, see README */
  --bd-llc: #faafa5;
  --bd-org: #e97862;
}

html {
  background: var(--rk-ground);
}
body {
  background: var(--rk-ground);
}

/* Sticky footer: the page is at least the window tall and the frame fills it,
   so on a tall window the ground fills the space above the footer. */
.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--rk-ground);
  overflow: clip;
  container-type: inline-size;
}
.frame {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}
.stage {
  --u: calc(100cqw / 2560);
  position: relative;
  flex: 1 0 auto;
  width: 100%;
  background: var(--rk-ground);
  color: var(--bd-white);
}
/* Vertical placement on the wide frame. The frame is 1440 units tall (the
   2560 x 1440 mock) and the page content is positioned by units from its top.
   On a window taller than the frame the stage grows and the footer stays on
   its bottom, so the content sits in the middle of the room between the header
   band and the sweep bar: half of the extra height goes above it and half
   below, and the drawings keep their proportions. At the frame's own height
   the offset is zero, so the 16:9 render is unchanged. A window shorter than
   the frame scrolls instead of laying the content over the footer. The
   stacked and tablet layouts (their own rules below) put the content back in
   flow. */
@container (min-width: 1000px) {
  .stage {
    min-height: calc(1440 * var(--u));
  }
  main:not(.doc-board) {
    position: absolute;
    left: 0;
    right: 0;
    top: max(0px, calc((100% - 1440 * var(--u)) / 2));
    height: calc(1440 * var(--u));
  }
}

/* ---------------------------------------------------------------- header */

/* 0 .. 148. The band is the owner's strip for the theme: dark-theme.png (the
   mock's band, anchored at the bottom: matched to the mock, mean error 0.7 of
   255) or lite-theme.png, scaled to cover the full window width. One image per
   theme, no tint, no blend, no filter. data-ck-theme on <html> picks it: the
   kit's theme.js sets it (today default and fallback; dark, lite and pro are
   listed so the kit's rename needs no change here). */
.hd {
  height: calc(148 * var(--u));
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background-color: var(--rk-ground);
  background-image: url(/assets/landing/band-dark.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 100%;
}
[data-ck-theme="fallback"] .hd,
[data-ck-theme="lite"] .hd,
[data-ck-theme="pro"] .hd {
  background-image: url(/assets/landing/band-lite.webp);
}
.hd-in {
  position: relative;
  width: 100cqw;
  height: 100%;
  margin-left: calc((100% - 100cqw) / 2);
}
/* The lamp is the kit's theme button (48px at least) wearing the owner's ruok
   lamp, flipped, where the mock draws its lamp: (92, 21), 109 units tall. ON
   (bulb #ff4124) is the dark band, OFF (bulb #723848) the lite band. */
.hd .ck-lampbtn {
  position: absolute;
  left: calc(92 * var(--u));
  top: calc(21 * var(--u));
  width: max(48px, calc(105 * var(--u)));
  height: max(48px, calc(109 * var(--u)));
}
.hd .ck-lampbtn:focus-visible {
  outline: 2px dashed var(--rk-chalk);
  outline-offset: 4px;
  border-radius: 12px;
}
.hd .ck-lampbtn .ck-lamp__art {
  justify-content: flex-start;
}
.hd .ck-lampbtn .lamp-art {
  display: none;
  width: auto;
  height: calc(109 * var(--u));
  min-height: 44px;
  max-width: none;
}
[data-ck-theme="default"] .hd .ck-lampbtn .lamp-art--on,
[data-ck-theme="dark"] .hd .ck-lampbtn .lamp-art--on,
[data-ck-theme="fallback"] .hd .ck-lampbtn .lamp-art--off,
[data-ck-theme="lite"] .hd .ck-lampbtn .lamp-art--off,
[data-ck-theme="pro"] .hd .ck-lampbtn .lamp-art--off {
  display: block;
}
/* The BETA chip is the kit's button, right after the lamp (betaPlacement
   "lamp", lampSide "left"). The kit draws the label at 10px; the page floors
   it at 12px. Remove at v1. */
.hd .ck-beta {
  position: absolute;
  left: calc(222 * var(--u));
  top: calc(75 * var(--u));
  transform: translateY(-50%);
  margin: 0;
  font-size: 12px;
}
.site-brand {
  position: absolute;
  left: calc(998 * var(--u));
  top: calc(30 * var(--u));
  width: calc(564 * var(--u));
  margin: 0;
  font: 400 0 / 0 var(--rk-font-body);
}
.site-brand a {
  position: relative;
  display: block;
}
.site-brand a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: max(100%, 44px);
  transform: translateY(-50%);
}
.site-brand img {
  width: 100%;
  height: auto;
}
.site-label {
  position: absolute;
  left: calc(2308 * var(--u));
  top: calc(42 * var(--u));
  width: calc(152 * var(--u));
  margin: 0;
}
.site-label img {
  width: 100%;
  height: auto;
}

/* ------------------------------------------------------ documentation rows */

.docs-label {
  position: absolute;
  left: calc(142.7 * var(--u));
  top: calc((229.8 - 0.375 * 23.9 - 16) * var(--u));
  height: calc(32 * var(--u));
  margin: 0;
  font: italic 400 max(12px, calc(23.9 * var(--u))) / calc(32 * var(--u)) var(--rk-font-mono);
  color: var(--bd-white);
  white-space: nowrap;
}
.docs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One row is the owner's drawing (a small box and a long pill) with its text
   erased: the words are live text. --ru is the row's unit. On the frame it is
   the frame unit; stacked, it is set from the column width. */
.row {
  --ru: var(--u);
  position: absolute;
  left: calc(145.5 * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(581.1 * var(--ru));
  height: calc(var(--h) * var(--ru));
  margin: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: var(--c);
}
.r1 { --y: 263.5; --h: 81.3; --c: #ddd8ff; --fs: 30.5; --ls: 6.29; --tx: 145; --tb: 51.9; background-image: url(/assets/landing/docs-row-1.webp); }
.r2 { --y: 365.2; --h: 91.5; --c: #bba8ff; --fs: 30.2; --ls: 6.38; --tx: 145.3; --tb: 49.1; background-image: url(/assets/landing/docs-row-2.webp); }
.r3 { --y: 481.1; --h: 96.3; --c: #9c82ff; --fs: 31.2; --ls: 5.77; --tx: 145; --tb: 53.5; background-image: url(/assets/landing/docs-row-3.webp); }
.r4 { --y: 592.8; --h: 89.6; --c: #8855ff; --fs: 35.7; --ls: 6.38; --tx: 155.8; --tb: 54.4; background-image: url(/assets/landing/docs-row-4.webp); }
.r5 { --y: 695.5; --h: 86.7; --c: #ff4124; --fs: 36; --ls: 5.84; --tx: 157.7; --tb: 45; background-image: url(/assets/landing/docs-row-5.webp); }
.r6 { --y: 802; --h: 89.3; --c: #e97862; --fs: 36; --ls: 6.17; --tx: 153.9; --tb: 59.8; background-image: url(/assets/landing/docs-row-6.webp); }
.r7 { --y: 906.7; --h: 96.3; --c: #de9481; --fs: 36; --ls: 6.13; --tx: 150; --tb: 57.8; background-image: url(/assets/landing/docs-row-7.webp); }
.r8 { --y: 1027; --h: 91.2; --c: #faafa5; --fs: 34.7; --ls: 6.63; --tx: 153.5; --tb: 57; background-image: url(/assets/landing/docs-row-8.webp); }
.r9 { --y: 1138.7; --h: 81; --c: #fdcac3; --fs: 35.4; --ls: 6.34; --tx: 153.5; --tb: 47.8; background-image: url(/assets/landing/docs-row-9.webp); }

/* The row's control: a link, a summary (a row with more than one page) or an
   inert span (no page yet). It is not positioned, so the label and the hit area
   below are placed against the row. The hit area is the whole row and never
   under 44px tall. */
.row-hit {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}
.row-hit::-webkit-details-marker {
  display: none;
}
.row-hit::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: max(100%, 44px);
  transform: translateY(-50%);
}
.row-hit:focus-visible {
  outline: none;
}
.row-hit:focus-visible::before {
  outline: 2px dashed var(--rk-chalk);
  outline-offset: 2px;
  border-radius: 12px;
}
.row-label {
  position: absolute;
  left: calc(var(--tx) * var(--ru));
  /* line-height 0 puts the baseline (A - D) / 2 = 0.30em below the top. */
  top: calc((var(--tb) - 0.3 * var(--fs)) * var(--ru));
  display: block;
  margin: 0;
  font: 400 max(12px, calc(var(--fs) * var(--ru))) / 0 var(--rk-font-hero);
  letter-spacing: calc(var(--ls) * var(--ru));
  font-synthesis: none;
  white-space: nowrap;
  color: var(--c);
}
/* Menu hover rule (owner instruction 2026-10-13, all sites that draw menu
   outlines): the row (outline pill plus its small box, as one unit) grows
   about 4 percent from its center and the name is underlined in the row's own
   color (--c), never white. Transform only, so nothing shifts or scrolls. A
   row with no page yet (.is-off) neither grows nor underlines. The grow is
   :hover only where a real hover exists, so a tap never leaves a row grown. */
.row:not(.is-off) .row-hit:hover .row-label,
.row:not(.is-off) .row-hit:focus-visible .row-label,
details[open] > .row-hit .row-label {
  text-decoration: underline;
  text-decoration-color: var(--c);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 2px;
}
.row {
  transform-origin: 50% 50%;
  transition: transform 140ms ease-out;
}
.row:not(.is-off):has(> .row-hit:focus-visible),
.row:not(.is-off):has(> .row-menu > .row-hit:focus-visible) {
  transform: scale(1.04);
  z-index: 20;
}
@media (hover: hover) {
  .row:not(.is-off):has(> .row-hit:hover),
  .row:not(.is-off):has(> .row-menu > .row-hit:hover) {
    transform: scale(1.04);
    z-index: 20;
  }
}
@media (prefers-reduced-motion: reduce) {
  .row { transition: none; }
}

/* A row with no page yet: drawn exactly as the mock, no navigation. */
.row.is-off,
.row.is-off .row-hit {
  cursor: default;
}

/* The pages a row with several standards can open. A chalk board under the
   pill, over the rows below it. */
.row-panel {
  position: absolute;
  left: calc(121 * var(--ru));
  top: calc(100% + 6px);
  z-index: 20;
  width: max-content;
  min-width: min(100%, 260px);
  max-width: calc(100vw - 24px);
  padding: 6px 10px;
  background-color: var(--rk-ground);
}
.row-panel ul {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.row-panel-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; fill: none; stroke: var(--c); stroke-width: 2.5px; }
.row-panel-line path { vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.row-panel a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 44px;
  padding: 0 8px;
  color: var(--c);
  font: 400 max(18px, calc(34 * var(--ru))) / 1.2 var(--rk-font-hero);
  letter-spacing: 0.1em;
  font-synthesis: none;
  text-decoration: none;
}
.row-panel a:hover,
.row-panel a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--c);
  text-underline-offset: 0.18em;
}
.row-panel .row-where {
  margin-left: 0.6em;
  color: var(--rk-chalk-grey);
  font: 400 max(12px, calc(20 * var(--ru))) / 1.2 var(--rk-font-mono);
  letter-spacing: 0;
}

/* ---------------------------------------------------------- open standards */

.std-label {
  position: absolute;
  left: calc(1481.6 * var(--u));
  top: calc((322.5 - 0.37 * 30.1 - 20) * var(--u));
  height: calc(40 * var(--u));
  margin: 0;
  font: 300 max(14px, calc(30.1 * var(--u))) / calc(40 * var(--u)) var(--rk-font-body);
  color: var(--bd-white);
  white-space: nowrap;
}
/* Four lines since E+ 1.2.1 (the E+ sentence is longer, owner wording 2026-10-15),
   first baseline 427 as in the mock, line step 50 instead of the mock's 63 so
   the block ends near where the mock's third line did and the drawings keep
   their gap. The box is 1420 wide and centered on x 1610.5. */
.statement {
  position: absolute;
  left: calc(901 * var(--u));
  top: calc((387.5 - 25 - 0.3 * 45.3) * var(--u));
  width: calc(1420 * var(--u));
  margin: 0;
  text-align: center;
  font: 400 max(16px, calc(45.3 * var(--u))) / calc(50 * var(--u)) var(--rk-font-hero);
  font-synthesis: none;
  color: var(--bd-white);
}
.statement .grey {
  color: var(--bd-grey);
}

.std-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.std {
  position: absolute;
  left: calc(var(--ix) * var(--u));
  top: calc(var(--iy) * var(--u));
  width: calc(var(--iw) * var(--u));
  margin: 0;
}
.std-peace { --ix: 1007; --iy: 589; --iw: 331; --cx: 1171.5; }
.std-heart { --ix: 1422; --iy: 620; --iw: 367; --cx: 1598.5; }
.std-earth { --ix: 1859; --iy: 598; --iw: 339; --cx: 2019.5; }
.std-link {
  position: relative;
  display: block;
  width: 100%;
  height: calc((1100 - var(--iy)) * var(--u));
  color: var(--bd-white);
  text-decoration: none;
}
.std-link:focus-visible {
  outline: 2px dashed var(--rk-chalk);
  outline-offset: 4px;
  border-radius: 12px;
}
.std-art {
  display: block;
  width: 100%;
  height: auto;
}
/* Two lines, baselines 1039.8 and 1081 (pitch 41.2). The short name sits above
   them (see .std-abbr), as the owner's mock draws it. */
.std-cap {
  position: absolute;
  left: calc((var(--cx) - var(--ix) - 170) * var(--u));
  top: calc((1039.8 - var(--iy) - 20.6 - 0.3 * 30.8) * var(--u));
  width: calc(340 * var(--u));
  text-align: center;
  font: 400 max(14px, calc(30.8 * var(--u))) / calc(41.2 * var(--u)) var(--rk-font-hero);
  font-synthesis: none;
}
.std-cap .ai,
.statement .ai {
  color: var(--rk-red);
}
/* The standard's short name, in parentheses, one line above the long name as
   the owner's mock draws it ( AiEDs ), ( K13 ), ( E+ ). Same centre as the
   caption; grey like the ( open standards ) label. */
.std-abbr {
  position: absolute;
  left: calc((var(--cx) - var(--ix) - 170) * var(--u));
  top: calc((973 - var(--iy) - 17) * var(--u));
  height: calc(34 * var(--u));
  width: calc(340 * var(--u));
  text-align: center;
  font: 300 max(12px, calc(26 * var(--u))) / calc(34 * var(--u)) var(--rk-font-body);
  color: var(--bd-grey);
  white-space: nowrap;
}
.std-link:hover .std-cap {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* -------------------------------------------------------------- micr0pad */

/* The owner's micr0pad link art as drawn (the pad and the lettering), placed
   at (2083.4, 1090.8) at 0.32 of the file, where the mock puts it. The whole
   picture is the link. */
.mp {
  margin: 0;
}
.mp-link {
  position: absolute;
  left: calc(2083.4 * var(--u));
  top: calc(1090.8 * var(--u));
  width: calc(409 * var(--u));
  display: block;
}
.mp-link:focus-visible {
  outline: 2px dashed var(--rk-chalk);
  outline-offset: 4px;
  border-radius: 12px;
}
.mp-art {
  display: block;
  width: 100%;
  height: auto;
}
.mp-link { left: calc(2117 * var(--u)); top: calc(1093 * var(--u)); width: calc(380 * var(--u)); display: flex; align-items: flex-end; gap: calc(50 * var(--u)); color: var(--bd-white); text-decoration: none; }
.mp-link:hover .mp-text { text-decoration: underline; text-underline-offset: 0.18em; }
.mp-text { white-space: nowrap; font: 400 max(12px, calc(32 * var(--u)))/1.2 var(--rk-font-hero); padding-bottom: calc(6 * var(--u)); font-size: max(12px, calc(33.4 * var(--u))); }
.mp-art { width: calc(153 * var(--u)); }

/* ---------------------------------------------------------------- footer */

/* The footer is the kit's .ck-footer (vendored kit.css; the markup is shared
   byte for byte by the five sites, test/footer_parity.test.mjs), and the kit
   owns every size in it. This host rule only places it: full window width at
   the bottom of the stage on the wide frame; in the stacked and tablet layouts
   it follows the content. */
.stage > .ck-footer {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
@media (min-width: 1367px), (min-width: 1000px) and (orientation: landscape) {
  .stage > .ck-footer {
    position: absolute;
    left: 0;
    bottom: 0;
  }
}

/* --------------------------------------------- keyboard and screen reader */

/* The way to every page of the site for a keyboard, a screen reader and a
   search engine, kept off the mock's picture: out of sight until a link in it
   has focus. */
.sections-nav {
  position: absolute;
  left: 8px;
  top: -64px;
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 4px;
  padding: 6px 10px;
  background: var(--rk-ground);
  border: 2px dashed var(--rk-chalk);
  font: 500 15px/1 var(--rk-font-mono);
}
.sections-nav:not(:focus-within) {
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sections-nav:focus-within {
  top: 8px;
}
.sections-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  color: var(--rk-chalk);
}

/* ------------------------------------------- tablet and phone: same order */

/* Under 1000px the frame would put 12px floored text on top of its neighbors.
   The elements keep the mock's order (header, documentation rows, open
   standards, footer) and stack. Sizes come from the kit's pattern, not the
   frame. */
@media (max-width: 999px) {
  .stage {
    --u: 1px;
    display: flex;
    flex-direction: column;
  }
  .hd {
    flex: none;
    height: 88px;
    margin-left: 0;
  }
  .hd-in {
    width: 100%;
    margin-left: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
  }
  .hd .ck-lampbtn,
  .hd .ck-beta,
  .site-brand,
  .site-label {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    flex: none;
  }
  .hd .ck-lampbtn {
    width: 48px;
    height: 48px;
  }
  .hd .ck-beta {
    margin: 0;
  }
  .site-brand {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: 280px;
    margin: 0 auto;
  }
  .site-label {
    width: 52px;
  }
  .site-brand a::after {
    height: 44px;
  }

  main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding: 28px 16px 36px;
  }
  .docs-label,
  .std-label,
  .statement,
  .std,
  .row {
    position: static;
    transform: none;
  }
  .docs-label {
    height: auto;
    font-size: 16px;
    line-height: 1.4;
  }
  .docs-list {
    container-type: inline-size;
    width: min(100%, 440px);
  }
  .row {
    --ru: calc(min(100cqw, 440px) / 581.1);
    position: relative;
    left: auto;
    top: auto;
    margin: 0 0 12px;
  }
  .row-label {
    font-size: max(14px, calc(var(--fs) * var(--ru)));
  }
  .row-panel {
    left: 0;
    width: 100%;
  }
  .std-label {
    height: auto;
    text-align: center;
    font-size: 17px;
    line-height: 1.4;
  }
  .statement {
    width: auto;
    font-size: clamp(20px, 5.6vw, 30px);
    line-height: 1.4;
  }
  .std-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px 16px;
    margin-top: 20px;
  }
  .std {
    left: auto;
    top: auto;
    width: auto;
  }
  .std-link {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 4px;
  }
  .std-art {
    width: min(100%, 190px);
  }
  .std-abbr {
    position: static;
    width: auto;
    font-size: 14px;
    line-height: 1.3;
  }
  .std-cap {
    position: static;
    width: auto;
    font-size: 18px;
    line-height: 1.35;
  }
  .mp {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
  }
  .mp-link {
    position: relative;
    left: auto;
    top: auto;
    width: min(100%, 300px);
    min-height: 44px;
  }

}

@media (min-width: 560px) and (max-width: 999px) {
  .std-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* The kit's mailto button holds "Email knights@rand0m.ai" on one line at any
   phone width (the kit lets the label wrap inside the drawn pill). Promote to
   the kit. */
.ck-notify__mailbtn {
  white-space: nowrap;
  padding-inline: 12px;
  font-size: clamp(12px, 3.4vw, 14px);
  letter-spacing: -0.02em;
  max-width: 100%;
  overflow-wrap: normal;
}

.mobile-question, .responsive-micropad { display: none; }
.turned { display: inline-block; transform: rotate(180deg); }

/* Dedicated responsive boards. The footer remains the current family footer. */
@media (max-width: 767px) {
  .hd { height: 64px; }
  .hd-in { padding: 0 30px; }
  .site-brand { display: none; }
  .hd .ck-beta { transform: none; }
  .site-label { width: 66px; margin-left: auto; }
  main { padding: 28px 18px; gap: 0; justify-content: center; }
  .mobile-question { display: block; margin: 0 0 30px; text-align: center; font: 400 17px/1.35 var(--rk-font-hero); }
  .docs-label { font-size: 12px; margin-bottom: 14px; }
  .docs-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(44px, auto)); column-gap: 18px; row-gap: 0; width: 100%; container-type: normal; }
  .docs-list .row { --ru: 1px; position: relative; left: auto; top: auto; width: 100%; height: 25px; margin: 0; background-image: none; }
  .docs-list .row:has(.row-menu[open]) { height: auto; }
  .row::after { content: ""; position: absolute; z-index: 0; inset: 0 0 auto; height: 25px; background: var(--responsive-art) center / 100% 100% no-repeat; pointer-events: none; }
  .r1 { --responsive-art: url(/assets/landing/docs-row-1.webp); grid-area: 1 / 1; }
  .r2 { --responsive-art: url(/assets/landing/docs-row-2.webp); grid-area: 2 / 1; }
  .r3 { --responsive-art: url(/assets/landing/docs-row-3.webp); grid-area: 3 / 1; }
  .r4 { --responsive-art: url(/assets/landing/docs-row-4.webp); grid-area: 4 / 1; }
  .r5 { --responsive-art: url(/assets/landing/docs-row-5.webp); grid-area: 5 / 2; }
  .r6 { --responsive-art: url(/assets/landing/docs-row-6.webp); grid-area: 4 / 2; }
  .r7 { --responsive-art: url(/assets/landing/docs-row-7.webp); grid-area: 3 / 2; }
  .r8 { --responsive-art: url(/assets/landing/docs-row-8.webp); grid-area: 2 / 2; }
  .r9 { --responsive-art: url(/assets/landing/docs-row-9.webp); grid-area: 1 / 2; }
  .docs-list .r10 { display: block; grid-area: 5 / 1; --c: #b655c4; --responsive-art: url(/assets/landing/responsive/micr0pad-mobile.webp); }
  .r1::after, .r2::after, .r3::after, .r4::after { transform: scaleX(-1); }
  .row .row-label { z-index: 1; left: 20%; width: 80%; top: 50%; transform: translateY(-50%); font-size: 12px; line-height: 1; letter-spacing: 0; text-align: center; }
  .r4 .row-label::after { content: "s"; }
  .r1 .row-label, .r2 .row-label, .r3 .row-label, .r4 .row-label { left: 0; width: 80%; text-align: center; }
  .r10 .row-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .row-menu > .row-hit { position: relative; height: 25px; }
  .row-menu > .row-panel { position: relative; left: auto; right: auto; top: auto; width: 100%; min-width: 0; max-width: none; margin: 12px 0; box-sizing: border-box; padding: 8px 4px; }
  .row-panel a { flex-wrap: wrap; gap: 4px; font-size: 18px; letter-spacing: 0; padding: 6px; overflow-wrap: anywhere; }
  .row-panel .row-where { margin-left: 0; font-size: 12px; }
  .r5 .row-panel, .r6 .row-panel, .r7 .row-panel, .r8 .row-panel { left: auto; right: 0; }
  .open { margin-top: 30px; }
  .std-label { font-size: 12px; margin: 0 0 12px; }
  .statement { width: 90%; margin: 0 auto; text-align: left; font-size: 16px; line-height: 1.45; }
  .statement-part { display: block; margin-bottom: 28px; }
  .statement-free { display: block; margin-top: 4px; font: 400 16px/1.45 var(--rk-font-mono); color: var(--bd-grey); text-align: center; }
  .std-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 28px 20px 0; }
  .std-link { padding: 0; gap: 10px; }
  .std-art { width: 100%; height: 88px; object-fit: contain; }
  .std-abbr { position: static; width: auto; font-size: 12px; line-height: 1.25; }
  .std-cap { font-size: 12px; line-height: 1.25; }
  .mp { display: none; }
}

@media (min-width: 768px) and (max-width: 999px),
       (min-width: 1000px) and (max-width: 1366px) and (orientation: portrait) {
  .frame { max-width: none; }
  .stage { --tu: calc(100cqw / 1000); display: flex; flex-direction: column; min-height: 0; }
  .hd { height: calc(89 * var(--tu)); margin-left: 0; }
  .hd-in { position: relative; display: block; width: 100%; height: 100%; padding: 0; margin: 0; }
  .hd .ck-lampbtn { position: absolute; left: calc(22 * var(--tu)); top: calc(8 * var(--tu)); width: max(48px, calc(67 * var(--tu))); height: max(48px, calc(71 * var(--tu))); }
  .hd .ck-lampbtn .lamp-art { height: 100%; }
  .hd .ck-beta { position: absolute; left: calc(100 * var(--tu)); top: 50%; transform: translateY(-50%); }
  .site-brand { position: absolute; left: 50%; top: calc(15 * var(--tu)); width: 36.5%; max-width: none; transform: translateX(-50%); margin: 0; }
  .site-label { position: absolute; left: auto; right: calc(29 * var(--tu)); top: calc(27 * var(--tu)); width: 10.2%; }
  /* In flow; a window taller than the board splits the extra height above
     and below it, between the header band and the footer (auto margins). */
  main:not(.doc-board) { position: relative; top: auto; height: auto; flex: none; margin-block: auto; display: grid; grid-template-columns: 39% 1fr; gap: 5.5%; padding: calc(55 * var(--tu)) 4% calc(55 * var(--tu)); min-height: calc(848 * var(--tu)); }
  .docs-label { position: static; font-size: 16px; height: auto; line-height: 1.4; margin-bottom: calc(24 * var(--tu)); }
  .docs-list { display: flex; flex-direction: column; width: 100%; container-type: inline-size; gap: calc(15 * var(--tu)); }
  .docs-list .row { --ru: calc(100cqw / 581.1); position: relative; left: auto; top: auto; width: 100%; height: calc(var(--h) * var(--ru)); margin: 0; }
  .docs-list .row:has(.row-menu[open]) { height: auto; background-size: 100% calc(var(--h) * var(--ru)); }
  .row-menu > .row-hit { position: relative; height: calc(var(--h) * var(--ru)); }
  .row-menu > .row-panel { position: relative; left: auto; top: auto; width: 100%; min-width: 0; max-width: none; margin: 12px 0; box-sizing: border-box; }
  .row-panel a { flex-wrap: wrap; font-size: 18px; letter-spacing: 0; }
  .row-panel .row-where { font-size: 12px; }
  .row-label { font-size: 16px; letter-spacing: 2px; }
  .docs-list .r10 { display: block; --h: 84; --c: #fdcac3; background-image: url(/assets/landing/responsive/micr0pad-tablet.webp); }
  .r10 .row-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .open { min-width: 0; padding-top: calc(45 * var(--tu)); }
  .std-label { position: static; text-align: center; font-size: 16px; height: auto; line-height: 1.4; margin-bottom: calc(40 * var(--tu)); }
  .statement { position: static; width: 100%; text-align: left; font-size: 18px; line-height: 1.4; }
  .statement-part { display: block; margin-bottom: calc(45 * var(--tu)); }
  .statement-free { display: block; font: 400 20px/1.4 var(--rk-font-mono); color: var(--bd-grey); text-align: center; }
  .std-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: calc(45 * var(--tu)); }
  .std { position: static; width: auto; }
  .std-link { height: auto; display: flex; flex-direction: column; gap: 16px; padding: 0; }
  .std-art { width: 100%; height: calc(130 * var(--tu)); object-fit: contain; }
  .std-abbr { position: static; width: auto; font-size: 12px; line-height: 1.3; }
  .std-cap { position: static; width: auto; font-size: 12px; line-height: 1.3; }
  .mp { display: none; }
}

@media (min-width: 1000px) and (max-width: 1366px) and (orientation: portrait) {
  .row-label { font-size: 20px; }
  .std-label { font-size: 20px; }
  .statement, .statement-free { font-size: 24px; }
}
@media (min-width: 768px) and (max-width: 999px), (min-width: 1000px) and (max-width: 1366px) and (orientation: portrait) {
  .hd .ck-lampbtn { left: calc(30 * var(--tu)); }
  .site-label { right: calc(40 * var(--tu)); }
}
.row-selection { display: none; position: absolute; left: 0; top: 0; width: 18%; height: 100%; fill: none; stroke: #ffffff; stroke-width: 3; stroke-linecap: round; pointer-events: none; }
.row-menu[open] > .row-hit .row-selection { display: block; }
@media (max-width: 767px) {
  .r1 .row-selection, .r2 .row-selection, .r3 .row-selection, .r4 .row-selection { left: 81%; }
}

/* ---------------------------------------------------------- app bar standard
   APPBAR-STANDARD v1 (2026-10-13). The same numbers, in the same order, on
   randomknights.xyz, .llc and .org: out\appbar\SPEC.md in the rand0m root
   lane. Mock units (--ub): 1 unit = 1/2560 of the 2560 x 1440 mock frame,
   scaled to fit the window (width and height) and held at the 1440 frame the
   other two sites use, so the three bars are the same size in the same window.
   The items anchor to the window edges (lamp and chip left, label right) and
   the wordmark to the window center, as the mock's full-bleed band draws them.
   Every item (lamp, BETA chip, wordmark, site label) is centered on ONE
   midline, half the band tall, at every window size (owner instruction
   2026-10-13). Sizes and x positions are the mock's. The site label art
   (XYZ) keeps its own drawing and width; only its right edge and midline are
   standard. */
.hd {
  --ub: min(calc(100vw / 2560), calc(100svh / 1440), 0.5625px);
  --tu: calc(100vw / 1000);
  height: calc(148 * var(--ub));
}
.hd-in {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.hd .ck-lampbtn {
  position: absolute;
  left: calc(92 * var(--ub));
  top: calc(74 * var(--ub));
  width: max(48px, calc(105 * var(--ub)));
  height: max(48px, calc(109 * var(--ub)));
  margin: 0;
  transform: translateY(-50%);
}
.hd .ck-lampbtn .lamp-art {
  width: 100%;
  height: auto;
  min-height: 0;
  max-width: none;
}
.hd .ck-beta {
  position: absolute;
  left: calc(220 * var(--ub));
  top: calc(74 * var(--ub));
  margin: 0;
  transform: translateY(-50%);
}
.hd .site-brand {
  position: absolute;
  display: block;
  left: 50%;
  top: calc(74 * var(--ub));
  width: calc(564 * var(--ub));
  margin: 0;
  transform: translate(-50%, -50%);
}
.hd .site-label {
  position: absolute;
  left: auto;
  right: calc(102 * var(--ub));
  top: calc(74 * var(--ub));
  width: calc(152 * var(--ub));
  margin: 0;
  transform: translateY(-50%);
}
.hd .site-label img {
  display: block;
}
@media (min-width: 768px) and (max-width: 999px),
       (min-width: 1000px) and (max-width: 1366px) and (orientation: portrait) {
  .hd { height: calc(89 * var(--tu)); }
  .hd .ck-lampbtn {
    left: calc(22 * var(--tu));
    top: calc(44.5 * var(--tu));
    width: max(48px, calc(67 * var(--tu)));
    height: max(48px, calc(71 * var(--tu)));
  }
  .hd .ck-beta { left: calc(100 * var(--tu)); top: calc(44.5 * var(--tu)); }
  .hd .site-brand { top: calc(44.5 * var(--tu)); width: 36.5%; }
  .hd .site-label { right: calc(29 * var(--tu)); top: calc(44.5 * var(--tu)); width: 10.2%; }
}
@media (max-width: 767px) {
  .hd { height: 64px; }
  .hd .ck-lampbtn { left: 5vw; top: 32px; width: 48px; height: 48px; }
  .hd .ck-beta { left: calc(5vw + 56px); top: 32px; }
  .hd .site-brand { display: none; }
  .hd .site-label { right: 4vw; top: 32px; width: 66px; }
}

/* ------------------------------------------------------------------ fill rule
   R3 (owner 2026-10-13): "do a better job of filling the space on screens
   (like the mocks)". Answer: scale the content up.

   The content group is the mock's body: the 1132 unit band between the app
   bar (148) and the footer (--fh, in px). --bu is the unit as it always was
   (the frame width over 2560, the frame held at 1440 wide). On a window whose
   room between the app bar and the footer is taller than the mock's band at
   that unit, the group is scaled by k = min(kh, kw), never below 1:
     kh = the room that is there / the band's height at --bu
     kw = the largest factor that keeps 4 percent of the window width free at
          each side (the group's reach is 1217 units from the center line:
          the micr0pad link's right edge, 2497, is the widest thing in it).
   Art, rows, text and drawings are all in --u, so they scale as one group and
   nothing is stretched or reflowed. The group stays centered between the app
   bar and the footer. At 1440 x 810 the room is the band, k is 1 and the
   render is today's.

   The micr0pad link is not part of the centered group: it is pinned to the
   bottom right corner of the room (the same corner the docs pages pin their
   app tile to), offsets in --u.

   tan(atan2(a, b)) is a / b for two lengths without typed arithmetic. The
   stacked and tablet layouts are untouched (the media query is the desktop
   layout's own), and a browser without tan() and atan2() keeps the 1:1 frame
   (the @supports guard). */
@supports (width: calc(1px * tan(atan2(1px, 1px)))) {
@media (min-width: 1367px), (min-width: 1000px) and (orientation: landscape) {
  .stage {
    --bu: calc(100cqw / 2560);
    --H: max(100svh, calc(1440 * var(--bu)));
    /* The kit's footer on the wide frame is NOT in frame units: its inner
       block is 84 px tall and its sweep bar is --rk-sweep-height, so the
       footer is the same px height at any window width. The room is
       measured from it (test/center_rule.test.mjs pins the 84 against the kit
       footer section). The kit token --rk-footer-height, when it exists,
       takes over. */
    --fh: var(--rk-footer-height, calc(84px + var(--rk-sweep-height)));
    /* The app bar is 148 of the standard's units (--ub, which is --bu held
       down on a window wider than 16:9: see .hd). */
    --hb: calc(148 * min(var(--bu), 100svh / 1440));
    --kh: tan(atan2(calc(var(--H) - var(--hb) - var(--fh)), calc(1132 * var(--bu))));
    --kw: tan(atan2(calc(0.92 * 100vw), calc(2434 * var(--bu))));
    --k: max(1, min(var(--kh), var(--kw)));
  }
  .stage main:not(.doc-board) {
    --u: calc(var(--bu) * var(--k));
    /* The group's ink spans 211.6 to 1219.7 units of the frame, so its middle
       is 715.65. It sits on the middle of the room between the app bar
       (--hb) and the footer (--fh): equal space above and below.
       --pin is the distance the mock's frame bottom is below the room's
       bottom edge. */
    --pin: calc((var(--hb) - var(--H) + var(--fh)) / 2 + 724.35 * var(--u));
    left: 50%;
    right: auto;
    width: calc(2560 * var(--u));
    margin-left: calc(-1280 * var(--u));
    top: calc((var(--H) + var(--hb) - var(--fh)) / 2 - 715.65 * var(--u));
    height: calc(1440 * var(--u));
  }
  /* The art's right edge was 2493 and its bottom 1242 in the mock frame. */
  .stage main:not(.doc-board) .mp-link {
    left: auto;
    top: auto;
    right: calc(63 * var(--u));
    bottom: calc(var(--pin) + 38 * var(--u));
  }
}
}

/* Open sub menu stacking (owner bug 2026-10-13). Each row is its own stacking
   context (it carries the hover transform), so a row later in the list painted
   over the panel of an open row above it, and a hover-grown row (z-index 20)
   painted through it. The row that holds an open panel sits above every row,
   grown or not (30 over 20); the panel is opaque (--rk-ground). The rows after
   it, which the panel can cover, neither grow nor underline while it is open,
   so a pointer moving across the panel and onto the rows below never leaves a
   grown row behind. The panel's own entries keep their hover underline. */
.row:has(> .row-menu[open]),
.row:not(.is-off):has(> .row-menu[open]),
.row:not(.is-off):has(> .row-menu[open]):has(> .row-menu > .row-hit:hover),
.row:not(.is-off):has(> .row-menu[open]):has(> .row-menu > .row-hit:focus-visible) {
  z-index: 30;
}
.row-panel {
  background-color: var(--rk-ground);
}
.row:has(> .row-menu[open]) ~ .row,
.row:has(> .row-menu[open]) ~ .row:has(> .row-hit:hover),
.row:has(> .row-menu[open]) ~ .row:has(> .row-hit:focus-visible),
.row:has(> .row-menu[open]) ~ .row:has(> .row-menu > .row-hit:hover),
.row:has(> .row-menu[open]) ~ .row:has(> .row-menu > .row-hit:focus-visible) {
  transform: none;
  z-index: auto;
}
.row:has(> .row-menu[open]) ~ .row .row-hit:hover .row-label,
.row:has(> .row-menu[open]) ~ .row .row-hit:focus-visible .row-label {
  text-decoration: none;
}