/* randomknights.org landing page: the owner's "org-home" board (2560 x 1440),
   built on the vendored chalk kit (/assets/vendor/chalk/dist/kit.css).

   Geometry uses the owner's 2560 x 1440 board units. On desktop the unit
   fits both window dimensions. The central scene is centered between the
   header and footer; the corner controls remain anchored to their corners.
   The header band, sweep bar and footer plate run the full window width.

   The owner's drawings are all placed at 0.32 of their native size on the
   board, so each art box below is (native pixels x 0.32) units wide.

   The owner lifted the footer's 12px floor on 2026-10-12. Under 1000px the elements keep the board's
   order and stack in the kit's pattern (the owner draws tablet and phone
   separately).

   Tokens, fonts, frames, the chalk dialog and the BETA chip come from the kit.
   Colors the board sets and the kit does not are listed in :root with their
   source. No gradient text, no CSS filters, no title attributes. */

:root {
  /* Board colors, sampled from org-home.png. */
  --bd-white: #ffffff;
  --bd-salmon: #e97862;       /* Read More, the ORG family link */
  --bd-note: #d8d8d8;         /* the small italic tax note, knightly.engineering */
  --bd-footer-purple: #9c82ff;/* Privacy Policy & Terms */
  --bd-xyz: #fdcac3;
  --bd-llc: #faafa5;
}

/* The 2026-10-12 phone and tablet boards replace the provisional stack.
   The footer deliberately keeps its existing content and layout. */

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

.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--rk-ground);
  overflow: clip;
}

/* --------------------------------------------------- the frame, 2560 x 1440 */

.frame {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  width: 100%;
  margin: 0 auto;
}
.stage {
  --u: calc(100cqw / 2560);
  position: relative;
  flex: 1 0 auto;
  width: 100%;
  background: var(--rk-ground);
  color: var(--bd-white);
}
/* Keep the mock's composition together in the space between the chrome. */
@media (min-width: 1000px) {
  .stage {
    --u: min(calc(100cqw / 2560), calc(100svh / 1440));
    display: flex;
    flex-direction: column;
    height: 100svh;
  }
  .hd,
  .ck-footer {
    flex: none;
  }
  .stage > .hero {
    flex: 1;
    min-height: 0;
  }
  .hero-scene {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(2560 * var(--u));
    height: calc(1132 * var(--u));
    pointer-events: none;
  }
  .hero-scene a {
    pointer-events: auto;
  }
  .hd .site-brand {
    left: 50%;
    transform: translateX(-50%);
  }
  .hd .hd-org {
    left: auto;
    right: calc(102.1 * var(--u));
  }
  .hero > .explore {
    top: auto;
    bottom: calc(43 * var(--u));
  }
  .hero > .explore-earth {
    left: auto;
    right: calc(104 * var(--u));
  }
}

/* ---------------------------------------------------------- fill rule
   Owner rule 2026-10-13: where the window is taller than the mock's 16:9, the
   central group (the trees, the five letter tiles, the aim and the note) is
   scaled up as ONE unit about the middle of the area between the app bar and
   the footer, so the space is used instead of left as bands. The corner items
   (donate, the mission text, the two explore drawings) stay anchored to
   their corners, as the board draws them.

   --us is the scale the group is drawn at, a length per board unit. It is never
   under --u (so at 16:9 and in any window wider than 16:9 it IS --u, and the
   render is the same as before), and it is the smallest of three limits:
     height  (100svh - 308u) / 1132: the nominal hero area the mock would have
             at this width (the app bar is held at the 1440 scale, so its
             height is taken at u here, which is what makes 16:9 come out at
             exactly 1);
     width   46cqw / 540: the group's drawn half-width is 540 units (the trees),
             and each side keeps 4 percent of the window width;
     cap     1.75u: past that the aim line (half-width 415 units) would run
             into the two explore drawings (370 and 2181 units from the left);
             the trees never meet the mission text or the donate pill, because
             the group's top edge comes down as the area grows. Measured with
             the group and the corner items drawn apart, 1000 to 3840 wide and
             square to 2:3 tall: the nearest drawn pixels of the two stay at
             least 270 board units (about 150 px at 1440) apart.
   Not under 1000px (the stacked and tablet layouts fill the width already). */
@media (min-width: 1367px), (min-width: 1000px) and (orientation: landscape) {
  .stage {
    --us: max(var(--u), min(calc((100svh - 308 * var(--u)) / 1132), calc(46cqw / 540), calc(1.75 * var(--u))));
  }
  .hero-scene {
    --u: var(--us);
  }
}

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

/* 0 .. 148. The band is the owner's strip for the current theme (dark-theme.png
   or lite-theme.png, converted to webp at 2880 px wide), one image per theme,
   covering the full window width and anchored to the bottom as the board draws
   it (fit against the strip: mean difference 0.4 of 255 at 2560). No tint, no
   blend, no filter, no second image. data-ck-theme is on <html>; theme.js
   switches it. "default" and "dark" are the dark band, "fallback" and "lite"
   the lite band, so the page works with the vendored theme.js and with the
   renamed one. .hd-in is the frame-wide box the header elements sit in. */
.hd {
  height: calc(148 * var(--u));
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--rk-ground) url(/assets/art/band-dark.webp?v=1a6296706ad0) center bottom / cover no-repeat;
}
html[data-ck-theme="lite"] .hd,
html[data-ck-theme="fallback"] .hd {
  background-image: url(/assets/art/band-lite.webp?v=8e18f5123a61);
}
.hd-in {
  position: relative;
  width: 100cqw;
  height: 100%;
  margin-inline: auto;
}
.hd-org img,
.site-brand img {
  width: 100%;
  height: auto;
}
/* The lamp is the kit's theme button (named "backdrop: <theme>"), drawn with the
   owner's rk_0n.svg (dark theme, bulb #ff4124) and rk_0ff.svg (lite theme, bulb
   #723848), flipped horizontally and with the black path white, as the owner
   directed. It sits where the board draws the lamp; the button is never under
   the kit's 48 px. */
.hd .ck-lampbtn {
  position: absolute;
  left: calc(91.7 * var(--u));
  top: calc(21 * var(--u));
  width: max(48px, calc(105 * var(--u)));
  height: max(48px, calc(109 * var(--u)));
}
.hd .ck-lampbtn .hd-lamp-svg {
  display: block;
  width: 100%;
  height: auto;
  transform: scaleX(-1);
}
.hd .hd-lamp-svg .cls-2 {
  fill: #6fcf8c;
}
.hd .hd-lamp-svg .cls-3 {
  fill: #f1c503;
}
.lamp-on .cls-1 {
  fill: #ff4124;
}
.lamp-off .cls-1 {
  fill: #2b2b2b;
}
.hd .ck-lampbtn .lamp-off,
html[data-ck-theme="lite"] .hd .ck-lampbtn .lamp-on,
html[data-ck-theme="fallback"] .hd .ck-lampbtn .lamp-on {
  display: none;
}
html[data-ck-theme="lite"] .hd .ck-lampbtn .lamp-off,
html[data-ck-theme="fallback"] .hd .ck-lampbtn .lamp-off {
  display: block;
}
/* The BETA button (the kit's, a real button with a 44 px hit area) sits right
   after the lamp. Remove at v1. */
.hd .ck-beta {
  position: absolute;
  left: calc(219 * var(--u));
  top: calc(75.5 * var(--u));
  transform: translateY(-50%);
  margin: 0;
}
.site-brand {
  position: absolute;
  left: calc(998 * var(--u));
  top: calc(30 * var(--u));
  width: calc(564 * var(--u));
  margin: 0;
  font-size: 0;
  line-height: 0;
}
.site-brand a {
  display: block;
}
.hd-org {
  position: absolute;
  left: calc(2303 * var(--u));
  top: calc(44 * var(--u));
  width: calc(154.9 * var(--u));
  margin: 0;
}
/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  min-height: calc(1132 * var(--u));
}
.donate,
.hero-text,
.trees,
.pay,
.tagline,
.note,
.explore {
  position: absolute;
  margin: 0;
}

/* The donate pill is the owner's drawing (the word is part of the art). It
   opens the Ways to give dialog. The button is never under 44px. */
.donate {
  left: calc(92 * var(--u));
  top: calc((196.6 - 148) * var(--u));
  width: calc(488.6 * var(--u));
}
.donate-btn {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.donate-btn img {
  width: 100%;
  height: auto;
}

/* Mission title, then Read More, right aligned to x 2458. One line pitch. */
.hero-text {
  right: calc((2560 - 2458) * var(--u));
  top: calc((190 - 148) * var(--u));
  width: calc(700 * var(--u));
  white-space: nowrap;
  text-align: right;
}
.hero-title,
.hero-more {
  margin: 0;
  font: 400 calc(43.6 * var(--u)) / 1.331 var(--rk-font-hero);
  font-synthesis: none;
  color: var(--bd-white);
}
.ai {
  color: var(--rk-red);
}
.hero-more-btn {
  display: inline-block;
  min-height: 44px;
  margin-block: min(0px, calc((58 * var(--u) - 44px) / 2));
  margin-right: -4px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--bd-salmon);
  text-decoration: underline;
  text-underline-offset: 0.12em;
  cursor: pointer;
}

/* The three trees: the owner's drawing, 3375 x 1981 native, shipped at 1620
   wide (see the PR). */
.trees {
  left: calc(740 * var(--u));
  top: calc((229 - 148) * var(--u));
  width: calc(1080 * var(--u));
}
.trees img,
#trees .ck-pop__fig img {
  /* The reduced srcset files are rounded to whole pixels, so their own ratio
     differs from the 1620 x 951 source by a fraction of a percent; the box is
     held to the source's ratio so every candidate lays out identically. */
  aspect-ratio: 1620 / 951;
}
.trees img {
  width: 100%;
  height: auto;
}
/* The three trees open the Tree-Time pop-up ("trees, please"): a real button
   that is exactly the drawing. */
.trees-btn {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.trees-btn img {
  display: block;
}

/* P V G A CC: the owner's five tiles (confirmed by the owner 2026-10-12 as
   PayPal, Venmo, Google Pay, Apple Pay, credit card). The drawing is cut into
   five images, one per letter tile (pay-p, pay-v, pay-g, pay-a, pay-cc): each
   keeps the drawing's own 1816 x 400 canvas and carries only its tile's pixels
   (nothing repainted, recolored or resized; the five stacked are the drawing,
   byte for byte). Each image sits in its own link, whose box is the tile's
   column of the drawing, with the canvas offset so the pixels land where they
   were; the link is therefore exactly the tile, and it grows on hover and
   focus like the other tiles. The hit area is never under 44px (the ::after). */
.pay {
  left: calc(972 * var(--u));
  top: calc((885.8 - 148) * var(--u));
  width: calc(581 * var(--u));
}
.pay-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1816 / 400;
}
.pay-tile {
  position: absolute;
  top: 0;
  display: block;
  height: 100%;
  border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
}
.pay-tile img {
  position: absolute;
  top: 0;
  display: block;
  height: 100%;
  max-width: none;
  /* The image is the whole canvas, so it is wider than the tile; the link's own box (and its 44px
     hit area) is what takes the pointer, never a neighbor's canvas. */
  pointer-events: none;
}
.pay-tile::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(44px, 100%);
  height: max(44px, 100%);
  transform: translate(-50%, -50%);
}
/* column of the tile in the 1816 px drawing (left, width) and the canvas offset
   (image left = minus the column's left, image width = the whole drawing), as
   shares of the tile's own width. */
.pay-p { left: 2.4229%; width: 12.1696%; }
.pay-v { left: 19.7687%; width: 14.5374%; }
.pay-g { left: 43.6674%; width: 14.6476%; }
.pay-a { left: 64.7026%; width: 13.5463%; }
.pay-cc { left: 85.2423%; width: 14.0969%; }
.pay-p img { left: -19.9095%; width: 821.7195%; }
.pay-v img { left: -135.9848%; width: 687.8788%; }
.pay-g img { left: -298.1203%; width: 682.7068%; }
.pay-a img { left: -477.6423%; width: 738.2114%; }
.pay-cc img { left: -604.6875%; width: 709.375%; }

.tagline {
  left: calc(1257.5 * var(--u));
  top: calc((1040 - 148) * var(--u));
  width: calc(1000 * var(--u));
  transform: translateX(-50%);
  text-align: center;
  font: 400 calc(43.6 * var(--u)) / 1.35 var(--rk-font-hero);
  font-synthesis: none;
  color: var(--bd-white);
}
.tagline .tl,
.hero-title .tl {
  display: block;
}
.note {
  left: calc(1247.5 * var(--u));
  top: calc((1181 - 148) * var(--u));
  width: calc(700 * var(--u));
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  font: italic 400 max(12px, calc(21.4 * var(--u))) / 1.3 var(--rk-font-mono);
  color: var(--bd-note);
}

/* ---------------------------------------------------- explore, two places */

.explore {
  display: block;
}
.explore img {
  width: 100%;
  height: auto;
}
/* Bunny and squirrel with "( explore )" under them: one drawing, two hit
   areas. The characters are pointer-only: the hit areas are anchors with
   tabindex -1 and aria-hidden, so Tab skips them and Enter and Space never
   reach them. The keyboard way is the text links beside them. */
.explore-sites {
  left: calc(88 * var(--u));
  top: calc((988 - 148) * var(--u));
  width: calc(281.9 * var(--u));
}
.explore-hit {
  position: absolute;
  top: 0;
  height: 77.9%;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.explore-bunny {
  left: 0;
  width: 43.1%;
}
.explore-squirrel {
  left: 43.1%;
  width: 56.9%;
}
/* The links are out of sight until one has focus, and then they sit under the
   drawing in the kit's focus-ring style. */
.explore-links {
  position: absolute;
  left: 0;
  top: 100%;
  width: max-content;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  background: var(--rk-ground);
  font: 500 14px / 1.3 var(--rk-font-mono);
}
.explore-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--rk-chalk);
}
.explore-links:not(:focus-within) {
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The crowned globe is the owner's RK_NewMockUps/org-home.png (2026-10-18; it replaced the globe with
   the magnifier). It is a real link to rand0m.ai/earth. The drawing carries the board's
   "( explore )" itself (the caption of the earlier drawing, set under the new globe). */
.explore-earth {
  left: calc(2180.5 * var(--u));
  top: calc(812 * var(--u));
  width: calc(276 * var(--u));
}
.explore-earth-link {
  display: block;
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
}
.explore-earth-link img {
  width: 100%;
  height: auto;
}

/* RULE-5 start */
/* POP-OUT (owner 2026-10-19): the same grow knightly.engineering and randomly.engineering draw on
   their icons: transform only (nothing shifts), 120 ms ease-out, from the center; the globe
   grows 1.03 (the earth > ai globe there), the characters 1.04 (the sun-sin drawing there). It is
   off under prefers-reduced-motion, a hover grows only where a real hover exists (a tap never
   leaves a drawing grown), and keyboard focus grows it too. Links are unchanged. The bunny and
   the squirrel are one drawing, so each is drawn again as its own half (the characters above the
   caption, split in the empty gap between them, clipped so the two halves tile exactly) and only
   the half under the pointer grows; the drawing underneath keeps the "( explore )" caption. */
.explore-char {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.explore-char--bunny {
  clip-path: inset(0 56.9% 21% 0);
  transform-origin: 21.55% 79%;
}
.explore-char--squirrel {
  clip-path: inset(0 0 21% 43.1%);
  transform-origin: 71.55% 79%;
}
.explore-sites > img:first-child {
  clip-path: inset(79% 0 0 0);
}
@media (prefers-reduced-motion: no-preference) {
  .explore-char,
  .explore-earth-link img {
    transition: transform 120ms ease-out;
  }
  .explore-sites:has(.explore-links a:nth-child(1):focus-visible) .explore-char--bunny,
  .explore-sites:has(.explore-links a:nth-child(2):focus-visible) .explore-char--squirrel {
    transform: scale(1.04);
  }
  .explore-earth-link:focus-visible img {
    transform: scale(1.03);
  }
  @media (hover: hover) {
    .explore-sites:has(.explore-bunny:hover) .explore-char--bunny,
    .explore-sites:has(.explore-squirrel:hover) .explore-char--squirrel {
      transform: scale(1.04);
    }
    .explore-earth-link:hover img {
      transform: scale(1.03);
    }
  }
}
/* RULE-5 end */

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

/* The footer is the kit's .ck-footer (kit.css, loaded above; the markup is
   shared byte for byte by the five sites, test/footer_parity.test.mjs). The kit
   owns every size in it; the stage only gives it a place at the bottom. */
.stage > .ck-footer {
  flex: none;
}

/* ------------------------------------------ the "Ways to give" dialog body */

.ck-appinfo__board {
  max-width: 640px;
}
.give-kicker {
  margin: 0 0 calc(2 * var(--pu));
  font-size: calc(3.5 * var(--pu));
  line-height: 1.2;
}
.give-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(2 * var(--pu));
  margin: 0;
  padding: 0;
  list-style: none;
}
.give-list li {
  margin: 0;
}
.tile {
  display: flex;
  align-items: center;
  gap: calc(2 * var(--pu));
  min-height: calc(10 * var(--pu));
  padding: calc(1.3 * var(--pu)) calc(2.5 * var(--pu));
  box-sizing: border-box;
  color: var(--rk-chalk);
  text-decoration: none;
  font: 500 calc(2.4 * var(--pu)) / 1.25 var(--rk-font-mono);
}
.tile svg {
  flex: none;
  width: calc(4.2 * var(--pu));
  height: calc(4.2 * var(--pu));
}
.tile-soon {
  color: var(--rk-chalk-mute);
}
.ck-appinfo__sec .taxline {
  margin-top: 16px;
  font: 500 15px / 1.4 var(--rk-font-mono);
  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 board's order (header, donate, mission, trees, the
   five tiles, the aim, the note, explore, footer) and stack. */
@media (max-width: 999px) {
  .stage {
    --u: 1px;
    display: flex;
    flex-direction: column;
  }
  .hd {
    flex: none;
    height: auto;
  }
  .hd-in {
    width: auto;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 12px 16px;
  }
  .hd .ck-lampbtn,
  .hd .ck-beta,
  .site-brand,
  .hd-org {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
  }
  .hd .ck-lampbtn {
    order: 1;
    width: 48px;
    height: 48px;
  }
  .hd .ck-beta {
    order: 2;
  }
  .hd-org {
    order: 3;
    width: 64px;
    margin-left: auto;
  }
  .site-brand {
    order: 4;
    flex: 1 0 100%;
    width: auto;
    display: flex;
    justify-content: center;
  }
  .site-brand a {
    width: min(70%, 300px);
  }
  .hero {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    min-height: 0;
    padding: 20px 16px 28px;
  }
  .hero-scene {
    display: contents;
  }
  .donate,
  .hero-text,
  .trees,
  .pay,
  .tagline,
  .note,
  .explore {
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    transform: none;
  }
  .donate {
    width: min(300px, 78%);
  }
  .hero-text {
    width: auto;
    max-width: min(100%, 36ch);
    white-space: normal;
    text-align: center;
  }
  .hero-title,
  .hero-more,
  .tagline {
    font-size: clamp(22px, 5.6vw, 30px);
    line-height: 1.331;
  }
  .trees {
    width: min(100%, 560px);
  }
  .pay {
    width: min(70%, 320px);
    min-width: 260px;
  }
  .tagline {
    width: auto;
    max-width: 30ch;
  }
  .tagline .tl,
  .hero-title .tl {
    display: inline;
  }
  .note {
    width: auto;
    white-space: normal;
    text-wrap: balance;
    font-size: 14px;
    text-align: center;
  }
  .explore-sites,
  .explore-earth {
    width: min(46%, 220px);
  }
  .explore-sites {
    align-self: flex-start;
  }
  .explore-earth {
    align-self: flex-end;
  }
  .give-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .hd { height: 62px; }
  .hd-in { height: 100%; padding: 0 30px; flex-wrap: nowrap; }
  .site-brand { display: none; }
  .hd .ck-beta { transform: none; }
  .hd-org { width: 66px; }
  .hero { padding: 17px 18px 24px; gap: 0; justify-content: center; }
  .trees { order: 1; width: 100%; max-width: none; }
  .pay { order: 2; width: 52%; min-width: 220px; margin-top: 9px; }
  .pay-art { width: 84%; margin-inline: auto; }
  .tagline { order: 3; width: 100%; max-width: none; margin-top: 9px; font-size: 14px; line-height: 1.43; }
  .tagline .tl, .hero-title .tl { display: block; }
  .note { order: 4; width: 100%; margin-top: 6px; font-size: 12px; line-height: 1.3; white-space: normal; }
  .donate { order: 5; width: 52.7%; margin-top: 16px; transform: translateX(-3px); }
  .donate-btn { margin-block: 0; }
  .explore-sites { order: 6; align-self: center; width: 36%; margin-top: 28px; transform: translateX(-5px); }
  .hero-text { order: 7; width: 72%; margin-top: 31px; transform: translateX(-9px); }
  .hero-title, .hero-more { font-size: 14.5px; line-height: 1.45; }
  .hero-title { max-width: 15em; margin-inline: auto; }
  .hero-title .tl { display: inline; }
  .hero-more-btn { margin-block: -12px; }
  .explore-earth { order: 8; align-self: center; width: 35.2%; margin-top: 38px; transform: translateX(-2px); }
}

@media (min-width: 768px) and (max-width: 999px),
       (min-width: 1000px) and (max-width: 1366px) and (orientation: portrait) {
  .stage { --tu: calc(100cqw / 1000); display: flex; flex-direction: column; height: auto; min-height: 100svh; }
  .stage > .ck-footer { margin-top: auto; }
  .hd { height: calc(89 * var(--tu)); }
  .hd-in { position: relative; display: block; width: 100%; height: 100%; padding: 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-beta { position: absolute; left: calc(100 * var(--tu)); top: 50%; transform: translateY(-50%); }
  .hd .site-brand { position: absolute; display: block; left: 50%; top: calc(15 * var(--tu)); width: 36.5%; transform: translateX(-50%); }
  .site-brand a { width: 100%; }
  .hd .hd-org { position: absolute; left: auto; right: calc(29 * var(--tu)); top: calc(27 * var(--tu)); width: 10.2%; margin: 0; }
  .stage > .hero { position: relative; display: block; flex: none; height: calc(848 * var(--tu)); min-height: 0; padding: 0; }
  .hero-scene { display: contents; }
  .hero .trees, .hero .pay, .hero .tagline, .hero .note, .hero .donate, .hero .hero-text, .hero > .explore { position: absolute; margin: 0; transform: none; }
  .hero .trees { left: 17.8%; top: calc(78 * var(--tu)); width: 64.6%; max-width: none; }
  .hero .pay { left: 31.6%; top: calc(475 * var(--tu)); width: 34.9%; }
  .hero .tagline { left: 22.3%; top: calc(567.6 * var(--tu)); width: 53%; max-width: none; font-size: 20px; line-height: 1.35; }
  .tagline .tl, .hero-title .tl { display: block; }
  .hero .note { left: 21%; top: calc(651.7 * var(--tu)); width: 54%; font-size: 12px; }
  .hero .donate { left: 34.3%; top: calc(688.6 * var(--tu)); width: 27.8%; }
  .hero .hero-text { left: auto; right: 2.9%; top: calc(46 * var(--tu)); width: 26%; max-width: none; text-align: right; white-space: normal; }
  .hero-title, .hero-more { font-size: 16px; line-height: 1.31; }
  .hero .hero-more-btn { margin-block: -9px; }
  .hero > .explore-sites { left: 3%; right: auto; top: auto; bottom: calc(20.4 * var(--tu)); width: 18.1%; }
  .hero > .explore-earth { left: auto; right: 2.8%; top: auto; bottom: calc(18.8 * var(--tu)); width: 18.1%; }
}

@media (min-width: 1000px) and (max-width: 1366px) and (orientation: portrait) {
  .hero .tagline { font-size: 24px; }
  .hero-title, .hero-more { font-size: 18px; }
}
@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)); }
  .hd .hd-org { right: calc(40 * var(--tu)); }
}

/* ---------------------------------------------------------- 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
   (ORG) 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-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 .hd-org {
  position: absolute;
  left: auto;
  right: calc(102 * var(--ub));
  top: calc(74 * var(--ub));
  width: calc(154.9 * var(--ub));
  margin: 0;
  transform: translateY(-50%);
}
.hd .hd-org 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 .hd-org { 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 .hd-org { right: 4vw; top: 32px; width: 66px; }
}

/* ------------------------------------------------------ trees pop-up */

/* popup-trees.png (2026-10-13): the figure and its caption, the question, the
   paragraph, the gray "*Tree-time" definition (centered), the monospace EIA
   paragraph and the source line "** using random-knights/standard  Read More"
   right aligned in the hero face. Sizes are shares of the card width (--pu),
   measured on the 2912 px mock; the kit's fit loop shrinks all of it together
   when a state needs more room, so nothing scrolls. */
#trees .tp-ask,
#trees .tp-lead {
  font-size: calc(var(--pu) * 3.02);
  line-height: 1.245;
}
#trees .tp-ask {
  margin-top: calc(var(--pu) * 2.35);
}
#trees .tp-lead {
  margin-top: calc(var(--pu) * 3.76);
}
#trees .tp-def {
  margin-top: calc(var(--pu) * 3.2);
  font: 300 calc(var(--pu) * 2.3) / 1.3 var(--rk-font-body);
  color: var(--rk-chalk-mute);
  text-align: center;
}
#trees .tp-term {
  text-decoration: underline;
  text-underline-offset: 0.14em;
}
#trees .tp-eia {
  margin-top: calc(var(--pu) * 3.1);
}
#trees .tp-edu {
  margin-top: calc(var(--pu) * 1.6);
}
#trees .tp-src {
  margin: calc(var(--pu) * 2.6) 0 0;
  font-size: calc(var(--pu) * 2.08);
  word-spacing: 0.25em;
  line-height: 1.3;
  text-align: right;
  color: var(--rk-chalk-mute);
}
#trees .tp-src__more {
  color: var(--rk-red);
  text-decoration: underline;
  text-underline-offset: 0.14em;
  text-decoration-thickness: 0.07em;
}

/* RULE-3 start (owner instruction 2026-10-13, all sites that draw menu
   buttons as chalk outlines). On hover and keyboard focus the item (outline
   and its content, as one unit) grows 4 percent from its center, and its name
   is underlined in the item's own color. transform only: no layout shift. A
   row that is not a link (inactive, aria-disabled) gets neither. The grow is
   hover-only on devices that have hover, so a tap leaves nothing enlarged. */
.give-list a.tile,
.donate-btn,
.pay-tile {
  transform-origin: 50% 50%;
  transition: transform 120ms ease-out;
}
.give-list a.tile .give-label {
  text-decoration: underline transparent;
  text-decoration-color: transparent;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 2px;
}
.give-list a.tile:focus-visible,
.donate-btn:focus-visible,
.pay-tile:focus-visible {
  transform: scale(1.04);
}
.give-list a.tile:focus-visible .give-label {
  text-decoration-color: currentColor;
}
@media (hover: hover) {
  .give-list a.tile:hover,
  .donate-btn:hover,
  .pay-tile:hover {
    transform: scale(1.04);
  }
  .give-list a.tile:hover .give-label {
    text-decoration-color: currentColor;
  }
}
@media (prefers-reduced-motion: reduce) {
  .give-list a.tile,
  .donate-btn,
  .pay-tile {
    transition: none;
  }
}
/* RULE-3 end */

/* The hero's height must not depend on how much of the page has been parsed.
   It was the flex remainder (stage height minus the app bar, the sweep and the
   footer), so while the footer was still streaming in, the hero was taller and
   the centered scene sat about 45 px lower, then jumped up when the footer
   arrived (layout shift 0.026). Stated outright it is the same number once the
   page is complete. */
@media (min-width: 1367px), (min-width: 1000px) and (orientation: landscape) {
  .stage > .hero {
    flex: none;
    height: calc(100svh - 148 * min(calc(100vw / 2560), calc(100svh / 1440), 0.5625px) - var(--rk-sweep-height) - 84px);
  }
}

/* RULE-4 start */
/* Hover and keyboard-focus underline for words that are part of a drawing
   (owner 2026-10-14: every button text underlines on hover like the other
   sites). A real 2px line under the drawn word, in the word's own color,
   placed from the drawing's own pixels (word box measured on donate.webp,
   1526 x 334, and on each 1816 x 400 tile cut). It is absolutely placed, so
   nothing moves; it scales with the 4 percent grow of its control. */
.donate-btn {
  position: relative;
}
.donate-btn::before,
.pay-tile::before {
  content: "";
  position: absolute;
  left: var(--ux);
  width: var(--uw);
  height: 2px;
  background: var(--uc);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease-out;
}
/* donate: word box x 537..987, bottom 205 of 1526 x 334; the line sits 9
   drawing px under the lowest letter. margin-top in percent is of the width. */
.donate-btn {
  --ux: 35.19%;
  --uw: 29.49%;
  --uc: #f07868;
}
.donate-btn::before {
  top: 0;
  margin-top: 13.96%;
}
/* tiles: letter box inside each tile cut, line 11 drawing px under it. */
.pay-p { --ux: 41.18%; --uw: 19%; --uc: #fdcac2; --uy: 56.25%; }
.pay-v { --ux: 40.15%; --uw: 22.73%; --uc: #f9afa7; --uy: 57.25%; }
.pay-g { --ux: 42.11%; --uw: 19.55%; --uc: #de9481; --uy: 58%; }
.pay-a { --ux: 40.24%; --uw: 22.76%; --uc: #e97863; --uy: 56.5%; }
.pay-cc { --ux: 27.34%; --uw: 43.36%; --uc: #ff4124; --uy: 56.75%; }
.pay-tile::before {
  top: var(--uy);
}
.donate-btn:focus-visible::before,
.pay-tile:focus-visible::before {
  opacity: 1;
}
@media (hover: hover) {
  .donate-btn:hover::before,
  .pay-tile:hover::before {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .donate-btn::before,
  .pay-tile::before {
    transition: none;
  }
}
/* RULE-4 end */
.explore-links a:hover,
.explore-links a:focus-visible {
  text-decoration: underline;
}

/* POP-UPS JUST APPEAR (owner 2026-10-18): no wipe, swipe, slide, scale or fade on open or close.
   The kit wipes the board in from the left (ck-appinfo-wipe); the vendored kit is not edited,
   so this site rule turns that animation, and any transition on the pop-up layer, off. Focus
   handling, Esc, the backdrop and the inert page are the kit's and are untouched. */
.ck-js .ck-appinfo,
.ck-js .ck-appinfo.is-open .ck-appinfo__backdrop,
.ck-js .ck-appinfo.is-open .ck-appinfo__board,
.ck-js .ck-appinfo.is-open .ck-pop__inner {
  animation: none !important;
  transition: none !important;
}