/*  CAIRN · one stylesheet for the three pages
    A bare ridge in flat weather. The design is Mountain Retreat, one screen drawn on a frame of
    1200 by 675 design units, with its polarity inverted: pale sky, dark type, solid keys and
    survey tags, and the cairns standing under the title. Cabinet Grotesk Extrabold for the few lines
    written large, Inter for everything read, Geist Mono for every figure. The signal colour is kept
    for burned figures and nowhere else.  */

@font-face { font-family: 'Inter'; src: url('assets/fonts/inter-latin.woff2?v=60') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('assets/fonts/inter-italic-latin.woff2?v=60') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('assets/fonts/geistmono-latin.woff2?v=60') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cabinet Grotesk'; src: url('assets/fonts/cabinet-800.woff2?v=60') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  --sky: #D7DCDD;
  --far: #8D989A;
  --line: #5A6360;
  --stone: #6F6A62;
  --shade: #4E4A45;
  --lichen: #9AA86B;
  --quartz: #EDEAE2;
  --signal: #A8402F;
  --ground: #5A6360;
  --on-ink-2: #8D989A;
  --ink: #1E2221;
  --ink-2: rgba(30, 34, 33, 0.76);
  --ink-3: rgba(30, 34, 33, 0.7);

  /*  one easing for everything, the design's  */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-key: 160ms;

  /*  one design unit: 1200 of them across the screen, until the phone takes over  */
  --u: 0.08333vw;
  --bar-h: 64px;
  --gutter: clamp(16px, 3vw, 40px);
  --measure: 64ch;
  /*  the type scale: display large, display medium, the enormous figure, body, small, label  */
  --fs-dl: clamp(44px, 7.2vw, 104px);
  --fs-dm: clamp(26px, 3.1vw, 44px);
  --fs-fig: clamp(88px, 13vw, 200px);
  --fs-body: 18px;
  --fs-small: 15px;
  --fs-lab: 12px;
  --sec-pad: clamp(80px, 11vw, 160px);
  /*  three crests of stone tops, hand-cut, one per seam so that no two seams repeat  */
  --crest-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28 0 13 36 12 79 12 81 12 83 3 143 3 167 2 169 3 170 5 204 6 261 3 263 4 264 8 300 9 330 5 332 6 333 10 376 10 438 9 444 12 445 12 478 12 552 11 556 11 560 8 622 9 666 5 672 8 673 11 715 11 769 14 772 14 775 6 800 6 820 6 825 6 830 3 848 3 882 5 885 6 886 11 914 11 927 9 931 11 932 17 994 18 1046 20 1048 20 1050 11 1094 10 1122 14 1124 15 1125 22 1154 23 1196 12 1200 13 1200 28Z'/%3E%3C/svg%3E");
  --crest-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28 0 13 80 12 120 10 126 13 127 14 172 14 209 14 211 15 212 19 266 19 289 19 293 19 297 16 312 17 341 16 346 16 351 7 364 8 398 9 403 11 404 15 476 16 514 14 517 14 520 5 542 5 581 7 586 9 587 10 615 9 621 13 627 16 628 19 688 19 713 21 715 21 717 17 735 16 756 20 760 22 761 24 795 24 832 25 837 25 842 20 864 20 916 17 921 19 922 20 946 19 967 23 970 23 973 18 988 19 1018 16 1022 16 1026 10 1070 9 1086 13 1091 13 1096 5 1118 5 1135 7 1137 8 1138 14 1161 14 1196 12 1200 13 1200 28Z'/%3E%3C/svg%3E");
  --crest-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28 0 13 26 13 39 13 44 13 49 8 103 9 141 11 147 14 148 16 173 15 236 15 238 15 240 9 266 10 289 8 292 9 293 17 355 18 407 17 409 17 411 14 453 14 470 11 474 11 478 8 511 9 588 5 592 7 593 10 634 10 652 9 654 10 655 16 705 15 736 15 742 15 748 7 802 7 821 10 826 12 827 13 866 12 917 11 920 12 921 18 945 17 971 20 974 20 977 17 1010 17 1030 16 1032 17 1033 24 1082 25 1104 25 1106 25 1108 17 1169 18 1196 12 1200 13 1200 28Z'/%3E%3C/svg%3E");
  --text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --display: 'Cabinet Grotesk', 'Inter', system-ui, sans-serif;
  color-scheme: light;
  accent-color: var(--ink);
}
@media (max-width: 1000px) { :root { --u: 1px; --fs-body: 17px; } }

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar-h) + 16px);
  scrollbar-width: thin;
  scrollbar-color: var(--far) var(--sky);
  background: var(--sky);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--sky); }
::-webkit-scrollbar-thumb { background: var(--far); border: 2px solid var(--sky); border-radius: 6px; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--sky);
  color: var(--ink);
  font: 400 16px/1.55 var(--text);
  font-feature-settings: 'cv11' 1, 'ss01' 1;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
body.is-menu { overflow: hidden; }
::selection { background: var(--ink); color: var(--quartz); }
[hidden] { display: none !important; }
.hidden { display: none !important; }
img, svg, canvas { display: block; }
a { color: inherit; }
p { margin: 0; }
b, strong { font-weight: 600; }
code, [data-fig] { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
code { font-size: 0.9em; }
.nw { white-space: nowrap; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.burn, .signal { color: var(--signal); }

/*  a figure that changes gets a short tick behind it, never a move  */
.tick { animation: tick 380ms var(--ease); }
.tick.burn { animation-name: tick-burn; }
@keyframes tick { 0% { background-color: rgba(30, 34, 33, 0.12); } 100% { background-color: transparent; } }
@keyframes tick-burn { 0% { background-color: rgba(168, 64, 47, 0.16); } 100% { background-color: transparent; } }

.skip {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  padding: 12px 18px; border-radius: 10px; background: var(--ink); color: var(--quartz); box-shadow: 0 2px 0 #000;
  font-size: 15px; font-weight: 600; text-decoration: none;
  transform: translateY(-170%); transition: transform var(--t-key) var(--ease);
}
.skip:focus, .skip:focus-visible { transform: none; }

/* ---------- controls: rest, hover, press, focus ---------- */

.seg {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
  font-family: var(--text);
  transition: background-color var(--t-key) var(--ease), border-color var(--t-key) var(--ease), color var(--t-key) var(--ease), transform var(--t-key) var(--ease), opacity var(--t-key) var(--ease);
}
button { font: inherit; color: inherit; }
button:disabled { cursor: not-allowed; }

/* ---------- one key system: a slab with a hard foot, pressed it drops; a shut key is hatched ---------- */
.key {
  display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  min-height: 48px; padding: 8px 22px; border: 0; border-radius: 10px;
  background: var(--ink); color: var(--quartz); box-shadow: 0 2px 0 #000;
  font-family: var(--text); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15;
  text-decoration: none; text-align: left;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; cursor: pointer;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), box-shadow 160ms var(--ease), transform 160ms var(--ease);
}
.key small { display: block; font-size: 12px; font-weight: 400; letter-spacing: 0; opacity: 1; }
.key:hover { background: #000; box-shadow: 0 3px 0 #000; }
.key:active { transform: translateY(2px); box-shadow: 0 0 0 #000; }
.key:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 10px; }
.key.alt { background: var(--quartz); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink), 0 2px 0 var(--ink); }
.key.alt:hover { background: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--ink), 0 3px 0 var(--ink); }
.key.alt:active { box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 var(--ink); }
.key.alt[aria-pressed='true'] { background: var(--ink); color: var(--quartz); box-shadow: inset 0 0 0 1.5px var(--ink), 0 2px 0 #000; }
.key.on-dark { background: var(--quartz); color: var(--ink); box-shadow: 0 2px 0 #000; }
.key.on-dark:hover { background: #FFFFFF; box-shadow: 0 3px 0 #000; }
.key.on-dark:active { box-shadow: 0 0 0 #000; }
.key.on-dark:focus-visible { outline-color: var(--quartz); }
.key.sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.key[aria-current='page'] { transform: translateY(2px); box-shadow: 0 0 0 #000; cursor: default; }
.key[aria-current='page']:hover { background: var(--ink); }
.key.sq { width: 40px; min-height: 40px; padding: 0; align-items: center; }
.key.sq svg { width: 20px; height: 20px; }
.key:disabled, .key:disabled:hover, .key:disabled:active, .key.alt:disabled, .key.alt:disabled:hover, .key.alt:disabled:active, .key[aria-disabled='true'] {
  background: repeating-linear-gradient(135deg, rgba(30, 34, 33, 0.14) 0 1px, transparent 1px 5px);
  color: rgba(30, 34, 33, 0.74); box-shadow: inset 0 0 0 1.5px rgba(30, 34, 33, 0.35);
  cursor: not-allowed; transform: none;
}
.key.on-dark:disabled, .key.on-dark:disabled:hover, .key.on-dark:disabled:active {
  background: rgba(237, 234, 226, 0.07);
  color: rgba(237, 234, 226, 0.72); box-shadow: inset 0 0 0 1.5px rgba(237, 234, 226, 0.4);
  cursor: not-allowed; transform: none;
}
/*  the hatch is kept for what the gate shuts, the trade keys in the slip; any other shut key (Copy before
    launch) is plain and muted, its label saying why  */
.key:not(.on-dark):disabled:not(.slip *), .key.alt:disabled:not(.slip *) { background: rgba(30, 34, 33, 0.05); }

/*  the wallet key: a hollow ring when off, a small filled stone and the short address when on  */
.key.wallet { flex-direction: row; align-items: center; gap: 9px; }
.wallet .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; }
.key.wallet.is-on { background: var(--ink); color: var(--quartz); box-shadow: 0 2px 0 #000; }
.wallet.is-on .dot { width: 14px; height: 9px; border: 0; border-radius: 0; background: currentColor; clip-path: polygon(8% 100%, 0 48%, 20% 6%, 64% 0, 94% 22%, 100% 100%); }
.wallet.is-off .dot { border-style: dashed; }
.wallet-label { white-space: nowrap; font-variant-numeric: tabular-nums; }
.key.sq.is-off { background: transparent; }
/*  the sound key stays a quartz key either way: on, it shows its waves; off, it goes hollow and shows a cross  */
#btn-sound[aria-pressed='true'] { background: var(--quartz); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink), 0 2px 0 var(--ink); }
#btn-sound[aria-pressed='true']:hover { background: #FFFFFF; }
#btn-sound.is-off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ---------- the nav: four words, underlined like a map's key, then a small group of keys ---------- */

.nav { display: flex; align-items: center; gap: 30px; }
.hero > .nav { position: absolute; z-index: 6; top: max(10px, calc(12 * var(--u))); right: calc(15 * var(--u)); }
.js .hero > .nav { animation: pill-in 0.6s var(--ease) 0.3s both; }
.nav-words { display: flex; align-items: center; gap: 28px; }
.nav-words a, .nav-x {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  font-size: 15px; font-weight: 500; letter-spacing: -0.01em; line-height: 1; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.nav-words a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 9px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--t-key) var(--ease); }
.nav-words a:hover::after, .nav-words a[aria-current='page']::after { transform: scaleX(1); }
.nav-words a[aria-current='page'] { font-weight: 600; }
.nav-keys { display: flex; align-items: center; gap: 10px; }
.nav-x { padding: 0 8px; font-weight: 600; }
.nav-x::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 9px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--t-key) var(--ease); }
.nav-x:hover::after { transform: scaleX(1); }
/*  the X link: the mark drawn inline with a small north-east arrow, a way out, never a close key  */
.nav-x { gap: 5px; padding: 0 6px; }
.nav-x::after { left: 6px; right: 6px; }
.nav-x .xg, .menu-x .xg { flex: none; width: 15px; height: 15px; fill: currentColor; }
.nav-x .ne, .menu-x .ne { flex: none; width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: square; transition: transform var(--t-key) var(--ease); }
.nav-x:hover .ne, .menu-x:hover .ne, .nav-x:focus-visible .ne, .menu-x:focus-visible .ne { transform: translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) { .nav-x .ne, .menu-x .ne { transition: none; } }
/*  round 2 (C2-20): above 1000 px the header carries two keys only, Connect and Launch app, set together
    at the right; sound and X are marks in the nav words' voice (no key shape, the same 2px underline)  */
@media (min-width: 1001px) {
  .nav-keys { gap: 4px; }
  .nav-keys .wallet { margin-left: 14px; }
  .nav-keys .launch { margin-left: 6px; }
  .nav-keys #btn-sound, .nav-keys #btn-sound[aria-pressed='true'], .nav-keys #btn-sound.is-off,
  .nav-keys #btn-sound:hover, .nav-keys #btn-sound[aria-pressed='true']:hover, .nav-keys #btn-sound:active {
    position: relative; width: 34px; min-height: 44px; background: transparent; color: var(--ink); box-shadow: none; transform: none;
  }
  .nav-keys #btn-sound::after { content: ''; position: absolute; left: 7px; right: 7px; bottom: 9px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--t-key) var(--ease); }
  .nav-keys #btn-sound:hover::after { transform: scaleX(1); }
  .nav-keys #btn-sound svg { width: 21px; height: 21px; }
  .nav-keys #btn-sound:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; }
}
@media (min-width: 1001px) and (prefers-reduced-motion: reduce) { .nav-keys #btn-sound::after { transition: none; } }
.key.burger { display: none; width: 44px; min-height: 44px; gap: 5px; }
.burger i { display: block; width: 18px; height: 2px; background: currentColor; }
.burger i + i { width: 12px; transform: translateX(3px); }

/* ---------- the menu, full screen, on the ink of the foot ---------- */

.menu {
  position: fixed; inset: 0; z-index: 80;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 34px;
  padding: 92px 16px 32px;
  background: var(--ink); color: var(--quartz);
  opacity: 0; visibility: hidden;
  transition: opacity 360ms var(--ease), visibility 0s linear 360ms;
}
body.is-menu .menu { opacity: 1; visibility: visible; transition: opacity 360ms var(--ease), visibility 0s linear 0s; }
.menu :focus-visible { outline-color: var(--quartz); }
.menu .close { position: absolute; top: 12px; right: 16px; }
.menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.menu li a {
  display: inline-block; padding: 2px 0; font-size: 40px; font-weight: 650; letter-spacing: -0.04em; line-height: 1.1; color: var(--quartz); text-decoration: none;
  opacity: 0; transform: translateY(12px); transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.menu li a[aria-current='page'] { text-decoration: underline 3px; text-underline-offset: 7px; }
.menu li a:hover { color: #FFFFFF; }
.menu-x { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-size: 17px; font-weight: 600; color: var(--quartz); text-decoration: none; }
.menu-x { gap: 7px; font-size: 19px; letter-spacing: -0.02em; }
.menu-x .xg { width: 17px; height: 17px; }
.menu-x .ne { width: 10px; height: 10px; }
.key.on-dark.wallet.is-on { background: var(--quartz); color: var(--ink); }
body.is-menu .menu li a { opacity: 1; transform: none; }
body.is-menu .menu li:nth-child(2) a { transition-delay: 60ms; }
body.is-menu .menu li:nth-child(3) a { transition-delay: 120ms; }
body.is-menu .menu li:nth-child(4) a { transition-delay: 180ms; }
body.is-menu .menu li:nth-child(5) a { transition-delay: 240ms; }
.menu .menu-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.menu-foot { font-size: 13px; color: var(--far); max-width: 34rem; }

/* ---------- the first screen: one frame, two plates, the title between them ---------- */

.hero { position: relative; height: 100vh; height: 100svh; min-height: calc(560 * var(--u)); overflow: hidden; isolation: isolate; }
.plates { position: absolute; inset: 0; }
.plate { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 70%; }
.js .plate { animation: plate-in 2s var(--ease) both; }
@keyframes plate-in { from { transform: scale(1.06); } to { transform: none; } }
.plate.back { z-index: 0; }
.scrim { position: absolute; inset: 0 0 45% 0; z-index: 1; background: linear-gradient(to bottom, rgba(215, 220, 221, 0.5), rgba(215, 220, 221, 0)); pointer-events: none; }
.plate.front { z-index: 3; pointer-events: none; }

.title {
  position: absolute; z-index: 2; margin: 0;
  left: calc(15 * var(--u)); top: calc(60 / 675 * 100%);
  font-weight: 700; font-size: calc(min(123.2 * var(--u), 17.2svh) * var(--fit, 1)); line-height: 0.772; letter-spacing: -0.055em;
  white-space: nowrap; color: var(--ink);
}
.title .line { display: block; overflow: hidden; padding: 0.08em 0.06em 0.12em 0; }
.title .l1 { margin-top: -0.145em; }
.title .rise { display: inline-block; }
.js .title .rise { animation: line-rise 1.15s var(--ease) both; }
.js .title .l1 .rise { animation-delay: 0.1s; }
.js .title .l2 .rise { animation-delay: 0.22s; }
.js .title.again .rise { animation: line-rise 0.9s var(--ease) both; }
.js .title.again .l2 .rise { animation-delay: 0.08s; }
@keyframes line-rise { from { transform: translateY(110%); } to { transform: none; } }

.brand { position: absolute; z-index: 6; left: calc(15 * var(--u)); top: max(10px, calc(12 * var(--u))); display: inline-flex; align-items: center; gap: 9px; min-height: 44px; text-decoration: none; font-size: 17px; font-weight: 700; letter-spacing: -0.035em; }
.brand img { width: 26px; height: 26px; }

@keyframes pill-in { from { opacity: 0; transform: translateY(-9px); } to { opacity: 1; transform: none; } }

/*  the two pinned cards, as survey tags: solid quartz, an ink rule on top, hung at the top right;
    their lines and ticks are drawn on the front plate  */
.pins { position: absolute; z-index: 5; top: max(74px, calc(72 * var(--u))); right: calc(15 * var(--u)); display: flex; gap: calc(12 * var(--u)); }
.pin { width: calc(210 * var(--u)); }
.js .pin { animation: card-in 0.7s var(--ease) both; }
.js .pin:nth-child(1) { animation-delay: 0.72s; }
.js .pin:nth-child(2) { animation-delay: 0.86s; }
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.card {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 14px; border-radius: 4px; background: var(--quartz); border-top: 2px solid var(--ink); color: var(--ink);
}
.card canvas { width: 56px; height: 76px; }
.card .k { margin-bottom: 7px; font-family: var(--mono); font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.card h3 { margin: 0 0 5px; font-size: 22px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.card p { font-size: 15px; line-height: 1.35; color: var(--ink); }
.card p b { font-family: var(--mono); font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/*  the stone key and its note: laid out in the lower band below  */
.lay { display: inline-flex; align-items: center; -webkit-tap-highlight-color: transparent; touch-action: manipulation; cursor: pointer; }
.lay .well { display: grid; place-items: center; }
@keyframes set { from { transform: translateY(-5px); } to { transform: none; } }
.note { overflow: hidden; text-wrap: pretty; }
.note b { font-weight: 600; }

.js .enter { opacity: 0; animation: fade-up 0.9s var(--ease) both; }
.js .d1 { animation-delay: 0.7s; }
.js .d2 { animation-delay: 0.85s; }
.js .d3 { animation-delay: 1s; }
.js .d4 { animation-delay: 1.15s; }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- the phone: its own composition ---------- */

@media (max-width: 1000px) {
  .hero { height: auto; min-height: 0; display: flex; flex-direction: column; overflow: visible; }
  .plates { position: relative; inset: auto; height: clamp(360px, 56svh, 520px); overflow: hidden; }
  .title { left: 16px; top: max(74px, 16%); font-size: calc(clamp(46px, 15.2vw, 96px) * var(--fit, 1)); }
  .brand { left: 16px; top: 10px; }
  .nav { gap: 8px; }
  .hero > .nav { top: 10px; right: 12px; }
  .nav-words, .nav-x, .nav .wallet, .nav .launch { display: none; }
  .nav .key.sq { width: 44px; min-height: 44px; }
  .key.burger { display: inline-flex; }
  .pins { position: relative; top: auto; right: auto; display: flex; gap: 12px; padding: 18px 16px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 16px; scrollbar-width: none; }
  .pins::-webkit-scrollbar { display: none; }
  .pin { flex: 0 0 80vw; max-width: 340px; scroll-snap-align: start; }
  .pin:last-child { margin-right: 16px; }
}

/*  the pins, lettered on the sky like a surveyor's callouts: no card, no thumbnail. A kicker, the level
    written large, one mono line, all standing on a shelf rule; the leader leaves the shelf and ends in a
    ring on the capstone (drawn on the front plate)  */
.pins { gap: calc(48 * var(--u)); align-items: flex-end; }
.pin { width: auto; }
.pins .card { position: relative; display: block; padding: 0 2px 10px 0; border: 0; border-radius: 0; background: none; border-bottom: 1.5px solid var(--ink); }
.pins .card canvas { display: none; }
.pins .card .k { margin-bottom: 8px; font-size: 11px; letter-spacing: 0.14em; white-space: nowrap; }
.pins .card h3 { margin: 0 0 7px; font-size: 28px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.pins .card .m { font-family: var(--mono); font-size: 13px; line-height: 1.3; letter-spacing: 0; white-space: nowrap; color: var(--ink); }
.pins .card .m b { font-weight: 500; color: inherit; }
.pins .card .m i { font-style: normal; color: var(--ink-2); }
@media (max-width: 1000px) {
  /*  under the ridge: one label (two from 641 px), its shelf on top, level with the foot of the drawing,
      so the leader rises straight out of it to the walker  */
  .pins { overflow: visible; scroll-snap-type: none; flex-wrap: wrap; align-items: flex-start; gap: 16px 40px; padding: 0 16px 22px; }
  .pin, .pin:last-child { flex: 1 1 0; min-width: 0; max-width: none; margin: 0; }
  .pins .card { padding: 14px 0 0; border-bottom: 0; border-top: 1.5px solid var(--quartz); color: var(--quartz); }
  .pins .card .k, .pins .card h3, .pins .card .m { color: var(--quartz); }
  .pins .card .m i { color: rgba(237, 234, 226, 0.78); }
  .pins .card h3 { font-size: 30px; }
}
@media (max-width: 640px) { #pin-top { display: none; } }

/* ---------- the lower band: the near ground under the crest, in columns, and the ribbon of figures on its foot ---------- */

.hero-band { position: relative; z-index: 5; color: var(--quartz); }
.hero-band > * { min-width: 0; }
.intro-h { margin: 0; font-size: clamp(26px, 2.9vw, 42px); font-weight: 600; line-height: 1.02; letter-spacing: -0.035em; color: var(--quartz); }
.intro-h .line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.intro-h .rise { display: inline-block; }
.js .intro-h .rise { animation: line-rise 1s var(--ease) both; }
.js .intro-h .line:nth-child(1) .rise { animation-delay: 0.5s; }
.js .intro-h .line:nth-child(2) .rise { animation-delay: 0.56s; }
.js .intro-h .line:nth-child(3) .rise { animation-delay: 0.62s; }
.js .intro-h .line:nth-child(4) .rise { animation-delay: 0.68s; }
.hero-band .act { display: grid; gap: 14px; justify-items: start; align-content: start; }
.hero-band .note { font-size: 15px; line-height: 1.45; color: var(--quartz); height: 7.25em; }
.hero-band .note .burn { padding: 0 4px; border-radius: 2px; background: var(--quartz); color: var(--signal); font-weight: 600; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hero-band .own { font-size: 15px; line-height: 1.45; color: var(--quartz); }
/*  the act, rebuilt: the key with its one-line disclosure beside it, the running note under them  */
.hero-band .act-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; }
.hero-band .act-top .own { max-width: 34ch; font-size: 14px; line-height: 1.4; }
.hero-band .act .note { margin: 0; }

/*  the key on the dark band: a quartz slab with a hard foot, its well a small drawn stone  */
.lay {
  height: 48px; padding: 0 8px 0 20px; gap: 16px; border: 0; border-radius: 10px;
  background: var(--quartz); color: var(--ink); box-shadow: 0 2px 0 #000;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  transition: background-color 160ms var(--ease), transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.lay:hover { background: #FFFFFF; box-shadow: 0 3px 0 #000; }
.lay:active { transform: translateY(2px); box-shadow: 0 0 0 #000; }
.lay:focus-visible { outline: 2px solid var(--quartz); outline-offset: 3px; border-radius: 10px; }
.lay .well { width: 32px; height: 32px; border-radius: 7px; background: var(--ink); color: var(--quartz); }
.lay .well svg { width: 22px; height: 15px; transition: transform 160ms var(--ease); }
.lay:hover .well svg { transform: translateY(-2px); }
.lay.set .well svg { animation: set 200ms var(--ease); }

/*  the ribbon: a quartz strip on the foot of the hero, ruled like a ruler, seven figures in mono  */
.counters {
  position: relative; z-index: 5; display: flex; align-items: stretch; flex-wrap: nowrap;
  margin: 0; min-height: 64px; padding: 0 var(--gutter);
  background: var(--quartz); color: var(--ink); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); font-size: inherit; line-height: 1;
}
.figs > div { position: relative; display: grid; align-content: center; gap: 6px; padding: 9px clamp(12px, 1.5vw, 24px); }
.figs > div:first-child { padding-left: 0; }
.figs > div + div::before { content: ''; position: absolute; left: 0; top: 0; width: 2px; height: 14px; background: var(--ink); }
.counters dt { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; line-height: 1; }
.counters dd { margin: 0; font-family: var(--mono); font-size: 24px; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1; }
.counters dd b { font-weight: 500; color: inherit; font-family: inherit; }
.counters dd small { font-family: var(--text); font-size: 15px; font-weight: 400; letter-spacing: 0; }
.counters dd small b { font-family: var(--mono); font-weight: 500; }
.figs { display: flex; align-items: stretch; margin: 0; }
.counters .w3 { min-width: 3ch; } .counters .w4 { min-width: 4ch; } .counters .w6 { min-width: 6ch; } .counters .w7 { min-width: 7ch; } .counters .w8 { min-width: 8ch; }
.counters .burn dd, .counters .burn dd b { color: var(--signal); }
.counters .burn dt { color: var(--ink); }
.counters .scroll-key {
  margin-left: auto; align-self: center;
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 0 0 16px;
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); text-decoration: none;
}
.counters .scroll-key svg { width: 10px; height: 15px; transition: transform 160ms var(--ease); }
.counters .scroll-key:hover svg { transform: translateY(3px); }

@media (min-width: 1001px) {
  .hero { height: auto; min-height: 100vh; min-height: max(100svh, calc(560 * var(--u))); display: flex; flex-direction: column; }
  .hero::before { content: ''; flex: 0 0 54svh; }
  .hero-band {
    margin-top: auto; display: grid; align-items: end;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(16px, 2vw, 32px); padding: 16px var(--gutter) 28px;
  }
  /*  the slogan, the brand's one line, at display size on the left; the act on the right half  */
  .hero-band .intro-h { grid-column: 1 / 7; font-size: var(--fs-dm); font-weight: 700; line-height: 0.98; letter-spacing: -0.04em; }
  .hero-band .intro-h .line { display: inline-block; margin-right: 0.24em; }
  .hero-band .act { grid-column: 7 / 13; }
  .hero-band .act .note { height: 5.8em; }
}
@media (max-width: 1000px) {
  .hero { background: var(--line); }
  .hero-band { display: flex; flex-direction: column; gap: 26px; padding: 22px 16px 30px; }
  .hero-band .act { order: 1; padding: 0; gap: 14px; }
  .intro-h { order: 0; font-size: clamp(32px, 9.4vw, 44px); font-weight: 700; line-height: 0.98; letter-spacing: -0.04em; }
  .hero-band .note { height: 5.8em; }
  .counters { display: block; min-height: 0; padding: 0; margin: 0; order: 6; }
  .figs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .figs > div { padding: 14px 16px; border-top: 2px solid var(--ink); gap: 7px; }
  .figs > div:first-child { padding-left: 16px; border-top: 0; }
  .figs > div:nth-child(2) { border-top: 0; }
  .figs > div + div::before { display: none; }
  .figs > div:nth-child(even)::before { display: block; top: auto; bottom: 0; height: 16px; }
  .counters .burn { grid-column: 1 / -1; }
  .counters dd { font-size: 20px; }
  .counters dd small { font-size: 14px; }
  .counters .scroll-key { display: none; }
}

/*  the ribbon under 1000 px: one ruled row that slides sideways under the thumb, the next cell cut by
    the screen edge, no cell boxes; a ruler's ticks run along its top edge only  */
@media (max-width: 1000px) {
  .counters { overflow: hidden; }
  .figs { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: 16px; scrollbar-width: none; padding: 0 16px; }
  .figs::-webkit-scrollbar { display: none; }
  .figs > div, .figs > div:first-child {
    flex: 0 0 auto; min-width: 38vw; gap: 9px; padding: 20px 18px 16px 12px; border-top: 0; scroll-snap-align: start;
    background: repeating-linear-gradient(to right, var(--ink) 0 1px, transparent 1px 9px) 0 0 / 100% 6px no-repeat;
  }
  .figs > div::before, .figs > div + div::before, .figs > div:nth-child(even)::before { content: ''; display: block; position: absolute; left: 0; top: 0; bottom: auto; width: 2px; height: 14px; background: var(--ink); }
  .figs > div:last-child { margin-right: 16px; }
  .counters .burn { grid-column: auto; }
  .counters dd { font-size: 24px; }
}
/*  the ribbon under 1000 px, round 2 (C2-13): nothing slides off the screen any more. BURNED, the
    figure the site is about, opens the strip at display size on the ruler's ticks; the six others stand
    under it as short cells on their ink ticks, three to a row on a phone, six on a tablet, no boxes  */
@media (max-width: 1000px) {
  .counters { background: repeating-linear-gradient(to right, var(--ink) 0 1px, transparent 1px 9px) 0 0 / 100% 6px no-repeat var(--quartz); }
  .figs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 12px; overflow: visible; scroll-snap-type: none; padding: 0 16px 18px; }
  .figs > div, .figs > div:first-child { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 12px 0 0 12px; background: none; scroll-snap-align: none; }
  .figs > div:last-child { margin-right: 0; }
  .counters dt { white-space: normal; font-size: 10.5px; line-height: 1.25; letter-spacing: 0.1em; }
  .counters dd { font-size: 20px; }
  .counters dd small { display: block; margin-top: 5px; font-size: 13px; white-space: nowrap; }
  .counters .burn { order: -1; grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding: 22px 0 16px 12px; border-bottom: 2px solid var(--ink); }
  .counters .burn dt { font-size: 12px; letter-spacing: 0.14em; }
  .counters .burn dd { margin-left: auto; font-size: clamp(32px, 9.6vw, 48px); font-weight: 600; letter-spacing: -0.05em; text-align: right; }
}
@media (max-width: 640px) {
  .figs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- the first screen, round 2 ----------
    Above 1000 px the sky belongs to the ridge. The count is written on the near ground, quartz on the
    slate band, with its running note under it as a standfirst; the brand line and the stone key hold the
    right of the band. A strip of sky under the bar's ink rule crops the tallest cairns, as the frame of a
    drawing does. The hero keeps to the page grid: the count, its note and the first figure of the ribbon
    start on --edge, the left edge of .wrap (1200 px centred, the gutter inside), where every section head
    starts; the bar keeps the gutter, as on the two other pages. The two labels hang from their capstones
    as a drawing's callouts: a ring, a short shelf, the words under it (placed by main.js, drawn by ridge.js).  */
@media (min-width: 1001px) {
  .hero { --edge: max(var(--gutter), calc(50% - 600px + var(--gutter))); }
  .hero::before { flex-basis: 40svh; }
  .scrim { inset: 0 0 auto 0; height: var(--bar-h); z-index: 4; background: var(--sky); box-shadow: 0 2px 0 var(--ink); }
  .brand { left: var(--gutter); top: 10px; }
  .hero > .nav { top: 10px; right: var(--gutter); }
  .hero-band { align-items: start; padding: 14px var(--edge) 22px; }
  .hero-band .lead { grid-column: 1 / 8; display: grid; gap: 16px; justify-items: start; min-width: 0; }
  .hero-band .side { grid-column: 8 / 13; display: grid; gap: 20px; justify-items: start; align-content: start; min-width: 0; padding-top: 2px; }
  .title { position: relative; left: auto; top: auto; z-index: auto; color: var(--quartz); font-size: calc(min(5.4vw, 8.4svh, 84px) * var(--fit, 1)); }
  .hero-band .lead .note { height: 4.2em; max-width: 60ch; font-size: 17px; line-height: 1.4; }
  .hero-band .side > *, .hero-band .lead > * { grid-column: auto; }
  .hero-band .side .intro-h { font-size: clamp(26px, 2.5vw, 36px); line-height: 1; }
  .hero-band .side .act { gap: 0; }
  .counters { padding: 0 var(--edge); }
  /*  the callouts: laid over the whole frame, each label placed at its capstone by main.js  */
  .js .pins { inset: 0; top: 0; right: 0; display: block; pointer-events: none; }
  .js .pins .pin { position: absolute; left: 0; top: 0; }
  .js .pins .card { padding: 9px 2px 0 0; border-bottom: 0; border-top: 1.5px solid var(--ink); }
  .js .pins .card .k, .js .pins .card h3, .js .pins .card .m {
    text-shadow: 2px 0 0 var(--sky), -2px 0 0 var(--sky), 0 2px 0 var(--sky), 0 -2px 0 var(--sky),
      1.5px 1.5px 0 var(--sky), -1.5px -1.5px 0 var(--sky), 1.5px -1.5px 0 var(--sky), -1.5px 1.5px 0 var(--sky);
  }
}
@media (max-width: 1000px) {
  /*  the phone keeps its composition: the count over the sky, the band under the drawing  */
  .hero { overflow-x: clip; }
  .hero-band { position: static; }
  .hero-band .lead, .hero-band .side { display: contents; }
  .title { top: max(74px, calc(0.16 * clamp(360px, 56svh, 520px))); }
  .hero-band .note { order: 2; }
}

/* ---------- the sections under the ridge ---------- */

.wrap { width: min(1200px, 100%); margin: 0 auto; padding: 0 var(--gutter); }
.sec { position: relative; padding: var(--sec-pad) 0; }
.sec-head { display: grid; gap: 22px; margin-bottom: clamp(40px, 5vw, 72px); }
.sec-head .k, .lab {
  display: inline-flex; align-items: center; gap: 12px; margin: 0;
  font-family: var(--mono); font-size: var(--fs-lab); font-weight: 500; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase; color: currentColor;
}
.sec-head .k::before, .lab::before { content: ''; flex: none; width: 24px; height: 2px; background: currentColor; }
.sec-head h2 { margin: 0; max-width: 16ch; font-size: var(--fs-dl); font-weight: 700; line-height: 0.92; letter-spacing: -0.05em; text-wrap: balance; }
.sec-head p { font-size: var(--fs-body); line-height: 1.55; color: currentColor; max-width: 62ch; text-wrap: pretty; }

/* ---------- the strata: flat grounds laid one on another, each entered through a crest of stone tops ---------- */

.band-sky { background: var(--sky); color: var(--ink); }
.band-quartz { background: var(--quartz); color: var(--ink); }
.band-ground { background: var(--ground); color: var(--quartz); }
.band-ink { background: var(--ink); color: var(--quartz); }
.band-sky::before, .band-quartz::before, .band-ground::before, .band-ink::before {
  content: ''; position: absolute; left: 0; right: 0; top: -27px; height: 28px; z-index: 1; pointer-events: none;
  background: inherit;
  -webkit-mask-image: var(--crest-a); mask-image: var(--crest-a);
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  -webkit-mask-size: 1200px 28px; mask-size: 1200px 28px;
  -webkit-mask-position: var(--crest-x, 0) 0; mask-position: var(--crest-x, 0) 0;
}
.band-ground::before { -webkit-mask-image: var(--crest-b); mask-image: var(--crest-b); --crest-x: -380px; }
.band-ink::before { -webkit-mask-image: var(--crest-c); mask-image: var(--crest-c); --crest-x: -170px; }
.band-sky.alt-crest::before { -webkit-mask-image: var(--crest-c); mask-image: var(--crest-c); --crest-x: -610px; }
.no-crest::before { display: none; }
.band-ground :focus-visible, .band-ink :focus-visible { outline-color: var(--quartz); }

/*  twelve columns inside the wrap: a label column and a content column; display heads may run all twelve  */
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); }
.grid12 > * { min-width: 0; }
@media (max-width: 1000px) { .grid12 > * { grid-column: 1 / -1; } }
.js .arrive { opacity: 0; transform: translateY(12px); transition: opacity 520ms var(--ease), transform 520ms var(--ease); }
.js .arrive.in { opacity: 1; transform: none; }
.fine { font-size: 15px; line-height: 1.5; color: var(--ink); max-width: var(--measure); text-wrap: pretty; }

/*  the record: every finished cairn, drawn small at its true shape  */
/*  the record band: the head on the left, the burned total written enormous on the right  */
.rec-top { align-items: end; row-gap: 48px; margin-bottom: clamp(48px, 6vw, 88px); }
.rec-top .sec-head { grid-column: 1 / 7; margin: 0; }
.rec-fig { grid-column: 7 / 13; display: grid; justify-items: end; text-align: right; gap: 14px; }
.rec-fig .lab { justify-content: flex-end; }
.rec-big {
  margin: 0; min-width: 5.6ch; font-family: var(--mono); font-size: var(--fs-fig); font-weight: 500; line-height: 0.85;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--signal); white-space: nowrap;
}
/*  the point of a large mono figure: drawn at its own width, not a digit's, so '25.37' never reads '25 . 37'  */
.rec-big .pt, .rec-reads .pt { display: inline-block; margin: 0 -0.2em; }
.rec-reads { display: flex; gap: clamp(24px, 3vw, 44px); margin: 10px 0 0; }
.rec-reads > div { display: grid; gap: 8px; justify-items: end; }
.rec-reads dt { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.rec-reads dd { margin: 0; font-family: var(--mono); font-size: 26px; font-weight: 500; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rec-reads .w6 { min-width: 6ch; } .rec-reads .w13 { min-width: 13ch; }

/*  the record itself: finished cairns drawn large on one ink ground line, ruled like a ruler,
    the row running from the wrap's left edge to the edge of the screen, and cut there  */
.ridge-list {
  --pl: max(var(--gutter), calc((100% - 1200px) / 2 + var(--gutter)));
  --li: 220px; --gl: 332px;
  display: flex; gap: 0; margin: 0; padding: 0 0 12px var(--pl); list-style: none;
  overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: var(--pl); overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: var(--stone) transparent;
  background:
    linear-gradient(var(--ink), var(--ink)) 0 var(--gl) / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 calc(var(--li) / 2 - 1px), var(--ink) calc(var(--li) / 2 - 1px) calc(var(--li) / 2 + 1px), transparent calc(var(--li) / 2 + 1px) var(--li)) var(--pl) calc(var(--gl) + 2px) / 100% 6px no-repeat;
  background-attachment: local, local;
}
.ridge-list li { position: relative; flex: 0 0 var(--li); display: grid; justify-items: center; padding-top: 28px; scroll-snap-align: start; text-align: center; }
.ridge-list .lv { height: 64px; font-family: var(--mono); font-size: 56px; font-weight: 500; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--ink); }
.ridge-list canvas { width: 160px; height: 240px; }
.ridge-list .meta { margin-top: 18px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.ridge-list .meta b { font-weight: 600; }
.ridge-list .burn { margin-top: 6px; font-size: 15px; color: var(--ink); white-space: nowrap; }
.ridge-list .burn b { font-family: var(--mono); font-size: 20px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--signal); }
.ridge-list .new-tag { position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 0; border: 0; background: none; font-family: var(--mono); font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); white-space: nowrap; }
/*  the newest cairn is lettered like a map, in signal, with a short leader down to its level  */
.ridge-list .new-tag::after { content: ''; position: absolute; left: 50%; top: calc(100% + 3px); width: 1.5px; height: 12px; margin-left: -0.75px; background: currentColor; }
/*  the half-built cairns that run the row on to the edge: faded stones, the rest dashed, lettered in the ridge's line colour  */
.ridge-list li.ghost .lv { color: var(--line); }
.ridge-list li.ghost .meta { color: var(--line); }
.ridge-list li.ghost .togo { margin-top: 6px; font-size: 15px; color: var(--line); white-space: nowrap; }
.ridge-list li.arriving { animation: rec-in 420ms var(--ease) both; }
@keyframes rec-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.ridge-list:empty { min-height: calc(var(--gl) + 40px); }
@media (max-width: 1000px) {
  .rec-top .sec-head, .rec-fig { grid-column: 1 / -1; }
  .rec-fig { justify-items: start; text-align: left; }
  .rec-fig .lab { justify-content: flex-start; }
  .rec-reads > div { justify-items: start; }
  .rec-reads { flex-wrap: wrap; row-gap: 18px; }
  .rec-reads dd { font-size: 22px; }
  /*  narrow enough that the third cairn is cut by the edge of the screen: the row visibly runs on  */
  .ridge-list { --li: 150px; --gl: 250px; }
  .ridge-list .lv { height: 40px; font-size: 32px; }
  .ridge-list canvas { width: 120px; height: 182px; }
  .ridge-list .meta { font-size: 11px; letter-spacing: 0.08em; }
}
div.waiting { margin-top: 36px; display: grid; gap: 8px; max-width: 62ch; }
div.waiting p { font-size: 15px; }
div.waiting p b { font-family: var(--mono); font-weight: 500; }
/*  under the ruler: the state of the ridge as one surveyor's caption line in mono, then the lichen as a
    footnote keyed by a small drawn stone with its lichen  */
div.waiting { max-width: none; gap: 18px; margin-top: 26px; }
div.waiting .cap { display: flex; flex-wrap: wrap; row-gap: 6px; margin: 0; font-family: var(--mono); font-size: 12.5px; font-weight: 500; line-height: 1.35; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
div.waiting .cap .seg { white-space: nowrap; }
div.waiting .cap .seg + .seg::before { content: '\00B7'; margin: 0 0.75em; color: var(--ink-2); }
div.waiting .cap .fig { letter-spacing: 0.02em; }
div.waiting .cap .fig b { font-weight: 600; }
div.waiting .note-l { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; align-items: start; max-width: 64ch; margin: 0; padding-top: 16px; border-top: 1.5px solid var(--ink); font-size: 15px; line-height: 1.5; color: var(--ink-2); }
div.waiting .note-l svg { width: 26px; height: 17px; margin-top: 2px; }
@media (max-width: 1000px) {
  div.waiting .cap { font-size: 12px; letter-spacing: 0.08em; }
  div.waiting .cap .seg + .seg::before { margin: 0 0.6em; }
}

/*  the rule in its parts: one drawing across the whole width, cut by both edges, lettered like a map; then its key  */
.rule-top { margin-bottom: clamp(36px, 4.4vw, 64px); }
.rule-top .sec-head { grid-column: 1 / 8; margin: 0; }
.parts-fig { display: block; width: 100%; height: clamp(300px, 34vw, 460px); }
@media (max-width: 600px) { .parts-fig { height: clamp(300px, 92vw, 380px); } }
@media (max-width: 1000px) {
  .rule-top .sec-head { grid-column: 1 / -1; }
}

/*  the key under the drawing: the six callouts again, each numeral lettered as on the drawing
    (Geist Mono, a leader that ends in a short tick on the name it points at), three by two;
    the capstone, the climax of the rule, twice as wide and written large, a quartz capstone on its numeral  */
.parts-key { margin: clamp(32px, 3.6vw, 52px) 0 0; padding: 0; list-style: none; row-gap: clamp(44px, 4.8vw, 72px); }
.parts-key li { display: grid; grid-template-columns: auto 44px minmax(0, 1fr); grid-template-rows: auto auto; align-content: start; }
.parts-key .n {
  grid-column: 1; grid-row: 1; position: relative; align-self: start;
  font-family: var(--mono); font-size: 56px; font-weight: 500; line-height: 0.74; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.parts-key li::before {
  content: ''; grid-column: 2; grid-row: 1; align-self: start; width: 44px; height: 42px; margin-top: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 42' fill='none' stroke='%231E2221' stroke-width='1.25'%3E%3Cpath d='M5 39 37 13'/%3E%3Cpath d='M34.6 10.1l4.8 5.8'/%3E%3C/svg%3E") no-repeat 0 0 / 44px 42px;
}
.parts-key h3 { grid-column: 3; grid-row: 1; align-self: start; margin: 0; padding-top: 0; font-size: 21px; font-weight: 650; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.parts-key p { grid-column: 1 / -1; grid-row: 2; margin: 18px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink); max-width: 46ch; text-wrap: pretty; }
.parts-key .climax h3 { font-family: var(--display); font-weight: 800; font-size: var(--fs-dm); line-height: 0.92; letter-spacing: -0.03em; font-synthesis: none; margin-top: -2px; }
.parts-key .climax p { font-size: var(--fs-body); max-width: 40ch; }
.parts-key .climax .n::before {
  content: ''; position: absolute; left: 0; top: -12px; width: 32px; height: 10px;
  background: var(--quartz); border: 1.25px solid var(--ink); border-radius: 46% 54% 40% 44% / 60% 58% 42% 40%;
}
.parts-key .climax { padding-top: 6px; }
@media (min-width: 1001px) {
  .parts-key li:nth-child(-n + 3) { grid-column: span 4; }
  .parts-key li.climax { grid-column: 1 / 7; }
  .parts-key li:nth-child(5) { grid-column: 7 / 10; }
  .parts-key li:nth-child(6) { grid-column: 10 / 13; }
}
/*  round 2 (C2-14): the second row is the capstone and its two consequences. The capstone keeps the left
    half over two rows, written larger; 5 and 6 stand one over the other on the right, each wide enough
    for its name on one line, so nothing is squeezed into a three-column slot  */
@media (min-width: 1001px) {
  .parts-key li.climax { grid-column: 1 / 7; grid-row: 2 / span 2; }
  .parts-key li.climax h3 { font-size: clamp(40px, 4.4vw, 60px); }
  .parts-key li:nth-child(5) { grid-column: 8 / 13; grid-row: 2; }
  .parts-key li:nth-child(6) { grid-column: 8 / 13; grid-row: 3; margin-top: calc(36px - clamp(44px, 4.8vw, 72px)); }
  .parts-key li:nth-child(5) p, .parts-key li:nth-child(6) p { max-width: 44ch; }
}
@media (max-width: 1000px) {
  .parts-key { row-gap: 40px; }
  .parts-key li { max-width: 560px; }
}

/*  what the contracts enforce: five lines on the near ground, set large, numbered in the label column  */
.laws { margin: 0; padding: 32px 0 0; list-style: none; display: grid; gap: 28px; border-top: 2px solid var(--quartz); }
.laws li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); align-items: baseline; }
.laws li b { grid-column: 1 / 4; font-family: var(--mono); font-size: 28px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.laws li span { grid-column: 4 / 13; max-width: 34ch; font-size: clamp(20px, 2.3vw, 32px); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; text-wrap: pretty; }
.laws li span code { font-size: 0.86em; }
.laws-note { margin-top: 40px; }
/*  the five lines drawn as a cairn of five stones at the right, each stone as thick as its line and tagged
    with it, the foot cut by the edge of the screen; only where there is room beside the lines  */
.laws-fig { position: absolute; top: 0; right: 0; width: 0; height: 0; display: block; pointer-events: none; }
@media (min-width: 1001px) { .laws li span { max-width: 30ch; } }
@media (max-width: 1000px) { .laws-fig { display: none; } }
.laws-note .fine { grid-column: 4 / 13; font-size: 15px; }
@media (max-width: 1000px) {
  .laws { gap: 24px; padding-top: 24px; }
  .laws li { grid-template-columns: 52px minmax(0, 1fr); column-gap: 8px; }
  .laws li b, .laws li span { grid-column: auto; }
  .laws li b { font-size: 20px; }
}

/*  one numbering system on every page: Geist Mono 500 in two sizes only; 56 px for the rule's parts
    and the law's articles, the 13 px label for everything else (the risks, the five lines I1 to I5)  */
.laws li b, .laws-doc li b { font-size: 13px; line-height: 1; letter-spacing: 0.08em; }
@media (max-width: 1000px) { .laws li b { font-size: 13px; } }
/*  round 2 (C2-5): on the front page the five line numbers hang against their lines in the display voice,
    right-set to the text column's edge, in pale quartz (3.2:1 on the ground, large text), so the label
    column no longer floats 290px away; the stones on the right repeat them as tags  */
#enforced .laws li b {
  grid-column: 1 / 4; justify-self: end; margin-right: calc(16px - clamp(16px, 2vw, 28px));
  font-family: var(--display); font-weight: 800; font-size: clamp(44px, 4.2vw, 56px); line-height: 0.8;
  letter-spacing: -0.03em; font-synthesis: none; color: rgba(237, 234, 226, 0.66);
}
@media (max-width: 1000px) {
  #enforced .laws li { grid-template-columns: 46px minmax(0, 1fr); column-gap: 10px; }
  #enforced .laws li b { grid-column: 1; margin-right: 0; font-size: 30px; }
}
.art ul.laws-doc { margin: 26px 0 0; padding: 24px 0 0; display: grid; gap: 24px; border-top: 2px solid var(--ink); }
.art ul.laws-doc li { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding-left: 0; max-width: none; }
.art ul.laws-doc li::before { display: none; }
.art ul.laws-doc li b { grid-column: 1; font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); }
.art ul.laws-doc li span { grid-column: 2; max-width: 30ch; font-size: clamp(20px, 2vw, 26px); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.art ul.laws-doc li span code { font-size: 0.86em; }
@media (max-width: 640px) { .art ul.laws-doc li { grid-template-columns: 40px minmax(0, 1fr); column-gap: 8px; } }

/*  what can go wrong: the sharpest edge leaves the list and is written as display type; the other four in two staggered columns  */
.sharp-edge { padding-top: 28px; border-top: 2px solid var(--ink); }
.lab.thick::before { height: 6px; }
.sharp-edge .sharp {
  margin: 22px 0 0; max-width: 21ch; font-size: clamp(32px, 5.4vw, 76px); font-weight: 700; line-height: 1.02;
  letter-spacing: -0.04em; color: var(--ink); text-wrap: balance;
}
.edge-p { margin-top: clamp(24px, 3vw, 40px); }
.edge-p p { grid-column: 4 / 11; font-size: var(--fs-body); line-height: 1.55; text-wrap: pretty; }
@media (max-width: 1000px) {
  .sharp-edge .sharp { font-size: clamp(32px, 8.4vw, 60px); }
  .edge-p p, .laws-note .fine { grid-column: 1 / -1; }
}

/*  what can go wrong, as a schedule: the kicker and one plain line say what the section is, the sharpest
    edge is its head (01), and the other four are ruled rows, number, name and answer, like a surveyor's notes  */
#wrong .said { margin: 0; max-width: 34ch; font-size: clamp(19px, 1.7vw, 24px); font-weight: 500; line-height: 1.3; letter-spacing: -0.015em; color: var(--ink-2); }
#wrong .sec-head { gap: 16px; }
.risks { margin: clamp(80px, 9vw, 136px) 0 0; padding: 0; list-style: none; border-bottom: 1.25px solid var(--ink); }
.risks li {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px);
  align-items: baseline; padding: clamp(24px, 2.6vw, 34px) 0 clamp(28px, 3vw, 40px); border-top: 1.25px solid var(--ink);
}
.risks li:first-child { border-top-width: 2px; }
.risks .ix { grid-column: 1; font-family: var(--mono); font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.risks h3 { grid-column: 2 / 6; margin: 0; font-size: 24px; font-weight: 650; line-height: 1.18; letter-spacing: -0.02em; text-wrap: balance; }
.risks p { grid-column: 6 / 12; margin: 0; max-width: 54ch; font-size: 16px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
@media (max-width: 1000px) {
  .risks li { grid-template-columns: 40px minmax(0, 1fr); column-gap: 8px; row-gap: 12px; }
  .risks .ix { grid-column: 1; grid-row: 1; }
  .risks h3 { grid-column: 2; grid-row: 1; font-size: 21px; }
  .risks p { grid-column: 2; grid-row: 2; }
}

/*  what can go wrong, round 2: one numbered sequence in the rule's own voice, 01 to 05, each numeral
    Cabinet at 40px with the rule's slanted tick after it; no rules between the rows, the list stands on
    one ground line. Above 1000 px two rows carry a small drawing in the right column: 02 one stone beside
    the same trade split into a hundred, 04 a cairn left half built, its missing stones dashed.  */
.risks.r2 { border-bottom: 2px solid var(--ink); padding-bottom: clamp(8px, 1vw, 16px); }
.risks.r2 li, .risks.r2 li:first-child { border-top: 0; align-items: start; padding: clamp(28px, 3vw, 44px) 0; }
.risks.r2 li:first-child { padding-top: 0; }
.ixd, .risks.r2 .ix {
  display: inline-flex; align-items: flex-start; gap: 2px;
  font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 0.8; letter-spacing: -0.04em; font-synthesis: none;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.ixd::after, .risks.r2 .ix::after {
  content: ''; flex: none; width: 28px; height: 27px; margin-top: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 42' fill='none' stroke='%231E2221' stroke-width='1.6'%3E%3Cpath d='M5 39 37 13'/%3E%3Cpath d='M34.6 10.1l4.8 5.8'/%3E%3C/svg%3E") no-repeat 0 0 / 28px 27px;
}
.risks.r2 .ix { grid-column: 1; }
.risks.r2 h3 { grid-column: 2 / 6; }
.risks.r2 p { grid-column: 6 / 11; }
.risk-fig { display: none; }
/*  the sharpest edge opens the sequence: its label carries 01 in the same voice  */
.sharp-edge .lab.edge-lab { gap: 14px; }
.sharp-edge .lab.edge-lab::before { content: none; }
@media (min-width: 1001px) {
  .risk-fig { display: block; grid-column: 11 / 13; grid-row: 1 / span 2; justify-self: end; align-self: start; width: 100%; max-width: 190px; height: 150px; margin-top: -18px; }
  .risks.r2 li:has(.risk-fig) { min-height: 150px; }
}
@media (max-width: 1000px) {
  .risks.r2 li { grid-template-columns: 66px minmax(0, 1fr); padding: 26px 0; }
  .risks.r2 .ix { font-size: 32px; grid-row: 1 / span 2; }
  .risks.r2 .ix::after { width: 22px; height: 21px; background-size: 22px 21px; }
  .risks.r2 h3, .risks.r2 p { grid-column: 2; }
}

/* ---------- the close: every page ends on one ink stratum ---------- */
/*  a strip of the ridge at the top of it, cut by both edges  */
.close { padding-top: 0; padding-bottom: clamp(56px, 7vw, 96px); }
.close ~ .foot.no-crest, .foot.no-crest { padding-top: clamp(40px, 5vw, 72px); }
canvas.strip { display: block; width: 100%; height: 90px; pointer-events: none; }

/* the painted ridge before the contract: the sky of the band above runs into it, its near stones go down into the ink */
.plate-fond { position: relative; background: var(--sky); overflow: hidden; }
.plate-fond img { display: block; width: 100%; height: clamp(340px, 56.3vw, 820px); object-fit: cover; object-position: 72% 62%; }
.plate-fond::before, .plate-fond::after { content: ''; position: absolute; left: 0; right: 0; pointer-events: none; }
.plate-fond::before { top: 0; height: 30%; background: linear-gradient(var(--sky), rgba(215, 220, 221, 0)); }
.plate-fond::after { bottom: 0; height: 26%; background: linear-gradient(rgba(30, 34, 33, 0), var(--ink) 92%); }
@media (max-width: 700px) { .plate-fond img { height: 360px; object-position: 94% 60%; } }
.close > .wrap { padding-top: clamp(48px, 6vw, 88px); }
.close .sec-head { margin-bottom: clamp(32px, 4vw, 56px); }
.close .sec-head h2 { font-size: var(--fs-dm); line-height: 1.02; letter-spacing: -0.035em; max-width: 20ch; }
.page.ends-ink { padding-bottom: 0; }
.page > .close { margin-top: clamp(96px, 10vw, 144px); }
.close-grid { row-gap: 48px; align-items: end; }
.close-grid .ca { grid-column: 1 / 8; }
.close-grid .close-call { grid-column: 9 / 13; }
@media (max-width: 1000px) { .close-grid .ca, .close-grid .close-call { grid-column: 1 / -1; } }

/*  the address on a slate plate: dark stone, quartz letters, corners cut unevenly  */
.ca { display: grid; gap: 14px; max-width: 46rem; }
.ca-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ca-row .key { flex: none; }
.ca-addr {
  flex: 1 1 18rem; min-width: 0; display: block; padding: 12px 20px; border: 0; border-radius: 0;
  background: #2A2F2E; color: var(--quartz); font-family: var(--mono); font-size: 20px; font-weight: 500; line-height: 1.3;
  overflow-wrap: anywhere;
  clip-path: polygon(0 5px, 6px 0, 100% 1px, 100% calc(100% - 4px), calc(100% - 3px) 100%, 0 calc(100% - 1px));
}
.ca-addr.waiting { color: var(--on-ink-2); }
.ca .fine { font-size: 16px; line-height: 1.5; max-width: 52ch; }
.live { position: relative; padding-left: 18px; font-size: 15px; }
.live::before {
  content: ''; position: absolute; left: 0; top: 0.5em; width: 10px; height: 7px; background: currentColor;
  clip-path: polygon(0 45%, 22% 0, 84% 8%, 100% 62%, 78% 100%, 8% 94%);
}
.live b { font-family: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) { .ca-addr { flex-basis: 11rem; font-size: 16px; padding: 13px 14px; } .ca-addr.waiting { font-size: 15px; } }

/*  the way on: one big key with a drawn arrow  */
.close-call { display: grid; gap: 16px; justify-items: start; }
.close-call p { font-size: 17px; line-height: 1.5; max-width: 34ch; }
.key.go { flex-direction: row; align-items: center; gap: 14px; min-height: 56px; padding: 0 24px; font-size: 16px; }
.key .arrow { width: 18px; height: 12px; flex: none; transition: transform var(--t-key) var(--ease); }
.key.go:hover .arrow { transform: translateX(3px); }

/*  the foot  */
.foot { position: relative; padding: clamp(56px, 8vw, 100px) 0 36px; }
.foot.band-ink { padding-top: clamp(72px, 9vw, 128px); }
.foot > canvas.strip + .wrap { margin-top: clamp(40px, 5vw, 72px); }
.foot.has-strip { padding-top: 0; }
.band-ink .fine, .band-ink .close-call p, .band-ink .live { color: var(--quartz); }
.band-ink .legal { color: var(--on-ink-2); }
.band-ground .fine { color: var(--quartz); }
.foot .line { margin: 0 0 clamp(36px, 5vw, 64px); font-size: var(--fs-dl); font-weight: 700; line-height: 0.92; letter-spacing: -0.05em; max-width: 13ch; text-wrap: balance; }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px clamp(24px, 3.4vw, 48px); margin-bottom: clamp(36px, 4vw, 56px); }
.foot-links a {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; min-height: 44px;
  font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: inherit; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size var(--t-key) var(--ease);
}
.foot-links a .arrow { width: 16px; height: 12px; flex: none; transition: transform var(--t-key) var(--ease); }
.foot-links a:hover .arrow { transform: translateX(3px); }
.foot-links a[target] .arrow { transform: rotate(-45deg); }
.foot-links a[target]:hover .arrow { transform: rotate(-45deg) translateX(3px); }
.foot-links a:hover, .foot-links a:focus-visible { background-size: 100% 2px; }
.legal { font-size: 13px; color: var(--ink-3); max-width: 62rem; line-height: 1.6; }
.foot-mark { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.foot-mark img { width: 30px; height: 30px; }
@media (max-width: 1000px) { .foot-links { flex-direction: column; gap: 0; } }
@media (prefers-reduced-motion: reduce) { .key .arrow, .foot-links a, .foot-links a .arrow { transition: none; } }

/* ---------- the close, round 2: one ink stratum from the strip to the legal line ----------
    The contract's address is the figure: mono at display size, quartz on ink, standing on a 2px quartz
    rule with the Copy key at the rule's end; the sentence that it is published here and on X at launch
    under it. The footer runs on in the same band with no gap: the slogan once, the way on (Launch app
    first), then the mark beside the legal line.  */
.close.r2 { padding-bottom: 0; }
.close.r2 > .wrap { padding-top: clamp(40px, 5vw, 72px); }
.close.r2 .ca { max-width: none; gap: 0; }
.close.r2 .ca-head { margin: 0 0 clamp(22px, 3vw, 40px); }
.ca-line { display: flex; align-items: flex-end; gap: 0; max-width: 60rem; }
.ca-line .ca-addr {
  flex: 1 1 auto; min-width: 0; padding: 0 20px 14px 0; background: none; clip-path: none;
  font-size: clamp(24px, 2.8vw, 36px); font-weight: 500; line-height: 1.12; letter-spacing: -0.03em; color: var(--quartz);
  border-bottom: 2px solid var(--quartz);
}
.ca-line .ca-addr.waiting { color: var(--quartz); }
/*  the key stands on the rule's end: its foot on the rule, the corner that meets it square  */
.ca-line .key { flex: none; min-height: 50px; padding: 0 22px; border-radius: 10px 10px 10px 0; font-size: 15px; }
.ca-line .key + .key { margin-left: 8px; border-radius: 10px; }
.close.r2 .ca .fine { margin-top: 20px; font-size: 17px; line-height: 1.5; max-width: 60ch; }
.close.r2 .ca .live { margin-top: 12px; }
.foot.joined { padding-top: clamp(72px, 9vw, 128px); padding-bottom: 32px; }
.foot.joined .line { max-width: 14ch; margin-bottom: clamp(30px, 4vw, 52px); }
.foot.joined .foot-links { margin-bottom: clamp(48px, 6vw, 88px); }
/*  the way on: the app first, its rule always drawn  */
.foot-links a.go-app { background-size: 100% 2px; font-weight: 600; }
.foot-links a.go-app:hover, .foot-links a.go-app:focus-visible { background-size: 100% 4px; }
.foot-links a .xg { width: 19px; height: 19px; flex: none; fill: currentColor; }
.foot-end { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 40px; align-items: start; }
.foot-end .foot-mark { margin: 0; }
.foot-end .legal { margin: 0; }
@media (max-width: 1000px) {
  .ca-line .ca-addr { font-size: 20px; padding-right: 14px; }
  .ca-line .key { min-height: 46px; padding: 0 18px; }
  .foot-end { grid-template-columns: minmax(0, 1fr); }
  /*  stacked, each link keeps its own width, so the app's rule is as long as its words  */
  .foot-links { align-items: flex-start; }
}

/* ---------- the inner pages: the bar, then the page ---------- */

.bar { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--bar-h); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 var(--gutter); background: var(--sky); box-shadow: 0 0 0 var(--ink); transition: box-shadow 200ms var(--ease); }
.bar.scrolled { box-shadow: 0 2px 0 var(--ink); }
.bar .brand { position: static; }
@media (max-width: 1000px) {
  .bar { padding: 0 12px 0 16px; }
}
.page { padding: calc(var(--bar-h) + clamp(28px, 5vw, 64px)) 0 clamp(56px, 8vw, 96px); }
.page-head { display: grid; gap: 16px; max-width: 56rem; margin-bottom: clamp(30px, 4vw, 54px); }
.page-head .k { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-family: var(--mono); }
.page-head h1 { margin: 0; font-size: clamp(2.2rem, 5vw, 4.2rem); font-weight: 700; line-height: 0.98; letter-spacing: -0.055em; text-wrap: balance; }
.lede { font-size: 17px; color: var(--ink-2); max-width: var(--measure); text-wrap: pretty; }

/*  the law  */
.doc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.doc-grid > * { min-width: 0; }
@media (min-width: 980px) { .doc-grid { grid-template-columns: 240px minmax(0, 1fr); gap: 60px; } }
.toc { display: grid; align-self: start; }
@media (min-width: 980px) { .toc { position: sticky; top: calc(var(--bar-h) + 18px); max-height: calc(100vh - var(--bar-h) - 36px); overflow-y: auto; scrollbar-width: none; } }
.toc a { position: relative; display: grid; gap: 6px; text-decoration: none; transition: color var(--t-key) var(--ease), background-color var(--t-key) var(--ease); }
.toc a b { font-family: var(--mono); }
/*  the article in view is marked with a small stone, not with colour  */
.toc a.active::after { content: ''; position: absolute; right: 4px; top: 50%; margin-top: -3px; background: var(--stone); }
.art { scroll-margin-top: calc(var(--bar-h) + 18px); }
.art h2 { font-weight: 700; }
.art p, .art li { max-width: var(--measure); color: var(--ink-2); text-wrap: pretty; }
.art p + p { margin-top: 12px; }
.art p b, .art li b { color: var(--ink); }
.art ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.art ul li { position: relative; padding-left: 24px; }
.art ul li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 12px; height: 7px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath d='M.5 6.6 1.4 2.4 4.3.7 9 1 11.1 2.8 11.5 6.6Z' fill='%236F6A62'/%3E%3Cpath d='M8.2.9 11.1 2.8 11.5 6.6 8.6 6.6Z' fill='%234E4A45'/%3E%3Cpath d='M1.4 2.4 4.3.7 9 1' fill='none' stroke='%23A9A49A' stroke-width='.9'/%3E%3C/svg%3E") no-repeat center / contain; }
.formula { margin: 22px 0 !important; padding: 6px 0 6px 18px; border-left: 2px solid var(--ink); border-radius: 0; background: none; font-family: var(--mono); font-size: 18px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink) !important; overflow-x: auto; }
.tbl-wrap { margin: 30px 0 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.4; color: var(--ink); }
.tbl th { text-align: left; font-family: var(--mono); font-size: 11px; font-weight: 500; line-height: 1.35; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); padding: 0 24px 10px 0; border-bottom: 2px solid var(--ink); vertical-align: bottom; }
.tbl td { padding: 14px 24px 14px 0; vertical-align: top; }
.tbl td.num, .tbl .num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .burn { color: var(--signal); font-weight: 500; }
/*  the tables: ledgers on the desk, stacked slips on the phone. No hairline between rows; rows
    alternate on a quartz wash; the capstone row is the event.  */
.tbl th:first-child, .tbl td:first-child { padding-left: 12px; }
.tbl th:last-child, .tbl td:last-child { padding-right: 12px; }
.tbl tbody tr:nth-child(even) { background: rgba(237, 234, 226, 0.55); }
.slab-q .tbl tbody tr:nth-child(even) { background: rgba(30, 34, 33, 0.045); }
.tbl th.num, .tbl td.num { text-align: right; }
.tbl td.num, .tbl td.mono { font-family: var(--mono); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tbl td.idx { color: rgba(30, 34, 33, 0.7); }
.tbl td.mono { white-space: nowrap; }
.tbl td.what + td.mono { white-space: normal; min-width: 9ch; }
.tbl .nw { white-space: nowrap; }
.tbl code { font-size: 14px; }
.tbl-note { font-size: 16px; line-height: 1.5; color: var(--ink); margin-top: 12px; max-width: var(--measure); }
/*  the capstone row: a pale slab between two ink rules, its burn written big  */
.tbl tr.cap { background: var(--quartz); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.slab-q .tbl tr.cap { background: #F6F4EF; }
.tbl tr.cap td { padding-top: 18px; padding-bottom: 18px; background: none; }
.tbl tr.cap .burn { display: inline-block; margin-top: 4px; font-family: var(--mono); font-size: 22px; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--signal); }
.capglyph { display: inline-block; width: 24px; height: 12px; margin-right: 8px; vertical-align: -1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M1.5 10.8 3.2 4.3 8.6 1.6 16.8 2.2 21.6 4.5 22.6 10.8Z' fill='%23EDEAE2'/%3E%3Cpath d='M16.2 2.2 21.6 4.5 22.6 10.8 16.9 10.8Z' fill='%23C9C4B8'/%3E%3Cpath d='M1.5 10.8 3.2 4.3 8.6 1.6 16.8 2.2 21.6 4.5 22.6 10.8Z' fill='none' stroke='%231E2221' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.tbl tr.closed td { color: rgba(30, 34, 33, 0.74); }
.tbl tr.closed td.what { font-style: italic; }
/*  parameters: the name never stacks, the value is a stamped tag and never breaks  */
.tbl td.pname { min-width: 16ch; font-weight: 600; }
.tbl th.val, .tbl td.val { min-width: 12ch; white-space: nowrap; }
.stamp { display: inline-block; padding: 2px 7px; border: 1.5px solid var(--ink); border-radius: 3px; font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1.35; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.stamp.open { border-style: dashed; }
.tbl td code.pool { font-size: 14px; overflow-wrap: anywhere; }
#params > p.fine { font-size: 16px; line-height: 1.5; color: var(--ink); }
/*  the views: selector 15px, signature 14px  */
.tbl td.sel code { font-size: 15px; font-weight: 500; }
.tbl td.sig code { font-size: 14px; }
@media (max-width: 759px) {
  .tbl-wrap { overflow: visible; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: auto; }
  .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tbl tbody { border-top: 2px solid var(--ink); }
  .tbl tr { padding: 14px var(--gutter); }
  .tbl td, .tbl td:first-child, .tbl td:last-child { position: relative; display: block; min-height: 1.4em; padding: 0 0 0 calc(9.4rem + 12px); text-align: left; min-width: 0; white-space: normal; }
  .tbl td + td { margin-top: 7px; }
  .tbl td::before { content: attr(data-label); position: absolute; left: 0; top: 0.28em; width: 9.4rem; font-family: var(--mono); font-size: 11px; font-weight: 500; font-style: normal; line-height: 1.35; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
  .tbl td.num { text-align: left; }
  .tbl td.long { padding-left: 0; }
  .tbl td.long::before { position: static; display: block; width: auto; margin-bottom: 3px; }
  .tbl td.mono, .tbl td.val { white-space: nowrap; }
  .tbl tr.cap { padding-top: 18px; padding-bottom: 18px; }
  .tbl tr.cap td { padding-top: 0; padding-bottom: 0; }
  .tbl td.pname { min-width: 0; padding-left: 0; font-size: 18px; letter-spacing: -0.01em; }
  .tbl td.pname::before { content: none; }
}

/*  the worked tables: ink rules and no zebra; a stone laid is drawn as a stone, and a cairn as a gauge of
    its courses, heavy at the foot and tapering to the cap like a cairn laid on its side  */
.tbl tbody tr:nth-child(even), .slab-q .tbl tbody tr:nth-child(even) { background: none; }
.tbl tbody tr + tr { border-top: 1px solid var(--ink); }
.slabg { display: inline-block; width: 19px; height: 11px; margin-right: 7px; vertical-align: -1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath d='M.5 6.6 1.4 2.4 4.3.7 9 1 11.1 2.8 11.5 6.6Z' fill='%236F6A62'/%3E%3Cpath d='M8.2.9 11.1 2.8 11.5 6.6 8.6 6.6Z' fill='%234E4A45'/%3E%3Cpath d='M.5 6.6 1.4 2.4 4.3.7 9 1 11.1 2.8 11.5 6.6Z' fill='none' stroke='%231E2221' stroke-width='.7' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.gauge { --n: 0; --h: 24; display: block; width: 96px; height: 12px; margin: 2px 0 7px;
  background: linear-gradient(90deg, var(--ink) calc(var(--n) / var(--h) * 100%), rgba(30, 34, 33, 0.18) 0);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 4px); mask: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 4px);
  clip-path: polygon(0 0, 100% 42%, 100% 100%, 0 100%); }
.gauge.done { background: linear-gradient(90deg, var(--ink) calc(100% - 4px), var(--signal) 0); }
.t-stone .gauge { display: inline-block; vertical-align: -1px; margin: 0 10px 0 0; }
.tbl td.cairn { white-space: nowrap; }
.tbl td.cairn .fin { display: block; white-space: nowrap; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }

/*  article 14 in groups: the stamp heads each group once instead of standing on every row  */
.t-params tr.gh th { padding: 34px 12px 12px; border-bottom: 2px solid var(--ink); text-align: left; font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.t-params tbody:first-of-type tr.gh th { padding-top: 22px; }
.t-params tr.gh .stamp { margin-right: 14px; padding: 5px 12px; border-width: 2px; font-size: 14px; }
.t-params tr.gh + tr { border-top: 0; }
.t-params td.long .stamp { margin-right: 10px; vertical-align: 1px; }
.t-params td code.pool { display: block; width: max-content; max-width: 100%; margin-top: 6px; overflow-x: auto; white-space: nowrap; overflow-wrap: normal; font-size: 13px; scrollbar-width: none; }
.t-params thead th { padding-top: 0; }
/*  round 2 (C2-17): article 14's groups are headed in the display voice, not stamped in boxes: a short rule,
    solid for what is fixed, broken for what waits for deploy, then the word; the venue marks are mono caps
    after the small stone of the bullets, with no box round them  */
.t-params tr.gh th { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 2.1vw, 28px); line-height: 1; letter-spacing: -0.025em; text-transform: none; font-synthesis: none; }
.t-params tr.gh th::before { content: ''; display: inline-block; width: 32px; height: 6px; margin-right: 14px; vertical-align: 0.18em; background: var(--ink); }
.t-params tr.gh th:has(.stamp.open)::before { width: 34px; background: repeating-linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 13px); }
.t-params tr.gh .stamp { margin: 0; padding: 0; border: 0; border-radius: 0; font: inherit; letter-spacing: inherit; text-transform: none; }
.t-params td.long .stamp { position: relative; margin-right: 12px; padding: 0 0 0 20px; border: 0; border-radius: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; vertical-align: 1px; }
.t-params td.long .stamp::before { content: ''; position: absolute; left: 0; top: 50%; width: 13px; height: 8px; margin-top: -4.5px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath d='M.5 6.6 1.4 2.4 4.3.7 9 1 11.1 2.8 11.5 6.6Z' fill='%236F6A62'/%3E%3Cpath d='M8.2.9 11.1 2.8 11.5 6.6 8.6 6.6Z' fill='%234E4A45'/%3E%3Cpath d='M1.4 2.4 4.3.7 9 1' fill='none' stroke='%23A9A49A' stroke-width='.9'/%3E%3C/svg%3E") no-repeat center / contain; }

@media (max-width: 759px) {
  /*  the phone: one compact row per swap, the column names written once, at the top  */
  .tbl.t-stone thead, .tbl.t-cap thead { position: static; display: block; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .tbl.t-stone tr, .tbl.t-cap tr { display: grid; grid-template-columns: 2rem auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 3px; align-items: baseline; padding: 11px var(--gutter); }
  .tbl.t-stone thead tr, .tbl.t-cap thead tr { padding-top: 0; padding-bottom: 9px; row-gap: 2px; }
  .tbl.t-stone th, .tbl.t-cap th { padding: 0; border: 0; font-size: 10.5px; letter-spacing: 0.1em; }
  .tbl.t-stone td, .tbl.t-stone td:first-child, .tbl.t-stone td:last-child,
  .tbl.t-cap td, .tbl.t-cap td:first-child, .tbl.t-cap td:last-child { display: block; min-height: 0; margin: 0; padding: 0; white-space: nowrap; }
  .tbl.t-stone td::before, .tbl.t-cap td::before { content: none; }
  .tbl.t-stone > * > tr > :nth-child(1), .tbl.t-cap > * > tr > :nth-child(1) { grid-column: 1; grid-row: 1 / span 3; font-size: 13px; }
  .tbl.t-stone > * > tr > :nth-child(2) { grid-column: 2 / 4; grid-row: 1; text-align: left; }
  .tbl.t-stone > * > tr > :nth-child(3) { grid-column: 4; grid-row: 1; text-align: right; }
  .tbl.t-stone > * > tr > :nth-child(4) { grid-column: 2 / 4; grid-row: 2; }
  .tbl.t-stone > * > tr > :nth-child(5) { grid-column: 4; grid-row: 2; text-align: right; }
  .tbl.t-cap > * > tr > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .tbl.t-cap > * > tr > :nth-child(3) { grid-column: 3; grid-row: 1; text-align: left; }
  .tbl.t-cap thead th:nth-child(3)::before { content: '· '; }
  .tbl.t-cap tbody td:nth-child(3)::before { content: '· level '; position: static; width: auto; font: inherit; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
  .tbl.t-cap > * > tr > :nth-child(6) { grid-column: 4; grid-row: 1; text-align: right; }
  .tbl.t-cap > * > tr > :nth-child(5) { grid-column: 2 / 5; grid-row: 2; }
  .tbl.t-cap > * > tr > :nth-child(4) { grid-column: 2 / 5; grid-row: 3; white-space: normal; font-size: 15px; line-height: 1.4; margin-top: 4px; }
  .tbl.t-cap thead th:nth-child(4), .tbl.t-cap td.plain { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
  .tbl.t-cap td.cairn .gauge { display: inline-block; vertical-align: -1px; margin: 0 10px 0 0; }
  .tbl.t-cap td.cairn .fin { display: inline; margin-left: 6px; }
  .tbl.t-cap tr.cap { padding-top: 16px; padding-bottom: 16px; }
  .tbl.t-cap tr.cap .burn { font-size: 20px; }
  /*  article 14: the name, then what it does, under its group's stamp; no labels repeated  */
  .tbl.t-params thead { display: none; }
  .tbl.t-params tbody { border-top: 0; }
  .tbl.t-params tr { padding: 12px var(--gutter); }
  .tbl.t-params tr.gh { padding: 30px var(--gutter) 10px; border-bottom: 2px solid var(--ink); }
  .tbl.t-params tbody:first-of-type tr.gh { padding-top: 6px; }
  .tbl.t-params tr.gh th { display: block; padding: 0; border: 0; }
  .tbl.t-params td::before { content: none; }
  .tbl.t-params td.long { margin-top: 3px; font-size: 16px; }
  .tbl.t-params td code.pool { font-size: 12.5px; }
}
/*  article 14, the views (round 2, C2-12): on the phone each view is two lines, the plain name, then
    its signature and selector as one mono line, the other name tried in small type under it; the
    column names are written once, above the list  */
@media (max-width: 759px) {
  .tbl.t-views thead { position: static; display: block; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .tbl.t-views tbody { border-top: 0; }
  .tbl.t-views tr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0; row-gap: 3px; align-items: baseline; padding: 13px var(--gutter); }
  .tbl.t-views thead tr { display: flex; padding: 0 var(--gutter) 9px; border-bottom: 2px solid var(--ink); }
  .tbl.t-views th { padding: 0; border: 0; font-size: 10.5px; letter-spacing: 0.1em; }
  .tbl.t-views thead th:nth-child(3)::before { content: '\00B7'; margin: 0 0.6em; }
  .tbl.t-views thead th:nth-child(1), .tbl.t-views thead th:nth-child(4) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tbl.t-views td, .tbl.t-views td:first-child, .tbl.t-views td:last-child { display: block; min-height: 0; margin: 0; padding: 0; white-space: nowrap; }
  .tbl.t-views td::before { content: none; }
  .tbl.t-views > tbody > tr > :nth-child(1) { grid-column: 1 / -1; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; white-space: normal; }
  .tbl.t-views > tbody > tr > :nth-child(2) { grid-column: 1; }
  .tbl.t-views > tbody > tr > :nth-child(3) { grid-column: 2; }
  .tbl.t-views > tbody > tr > :nth-child(3)::before { content: '\00B7'; position: static; width: auto; margin: 0 0.55em; font: 500 14px/1 var(--mono); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
  .tbl.t-views > tbody > tr > :nth-child(4) { grid-column: 1 / -1; font-family: var(--mono); font-size: 12px; color: var(--ink-2); white-space: normal; }
  .tbl.t-views > tbody > tr > :nth-child(4)::before { content: 'also '; position: static; width: auto; font: inherit; letter-spacing: 0; text-transform: none; color: inherit; }
  .tbl.t-views > tbody > tr > :nth-child(4):empty { display: none; }
  .tbl.t-views td:nth-child(4) code { font-size: 12px; color: var(--ink); }
}

.faq { display: grid; }
.faq summary { list-style: none; cursor: pointer; position: relative; font-weight: 600; -webkit-tap-highlight-color: transparent; transition: color var(--t-key) var(--ease); }
.faq summary::-webkit-details-marker { display: none; }

/*  the app  */
.verdict b { color: var(--ink); }
.verdict .burn { color: var(--signal); }

/* ---------- the app: the head in two columns, then the instrument across the whole width ---------- */
.page.app-page { padding-top: calc(var(--bar-h) + clamp(18px, 2vw, 26px)); }
/*  eyebrow segments never break inside; the dot opens the next segment, so a wrapped line starts on it and none ends on it  */
.k .sep::before { content: '\00B7'; content: '\00B7' / ''; margin-right: 10px; }
/*  round 2 (C2-15): the dot hangs in the gap, outside its segment's box, so no line ever starts on one:
    a segment that wraps carries its dot to the line start, where chrome.js marks it .lead and it is hidden.
    Hiding it changes no width, so the lines never re-flow. Without :has the inline dot above stays.  */
p.k.lab:has(> .sep) { column-gap: 26px; }
p.k.lab:has(> .sep) > .sep { position: relative; }
p.k.lab:has(> .sep) > .sep::before { position: absolute; top: 0; left: calc(-13px - 0.36em); margin: 0; }
p.k.lab:has(> .sep) > .sep.lead::before { visibility: hidden; }

/*  the stage: the same ridge as the front page, from edge to edge, with the count written over it
    and the cairns standing in front of the words, as on the front page  */
.stage { position: relative; }
.stage-scene { position: relative; height: clamp(340px, 50vh, 500px); overflow: hidden; isolation: isolate; }
.stage-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage-scene .back { z-index: 0; }
.stage-scene .front { z-index: 2; pointer-events: none; }
.stage-words { position: relative; z-index: 1; padding-top: clamp(14px, 1.8vw, 22px); }
.count { margin: 0; font-size: calc(clamp(52px, 8.4vw, 120px) * var(--fit, 1)); font-weight: 700; line-height: 0.84; letter-spacing: -0.055em; white-space: nowrap; color: var(--ink); }
.count .line { display: block; overflow: hidden; padding: 0.07em 0.06em 0.1em 0; }
.count .line + .line { margin-top: -0.14em; }
.count .rise { display: inline-block; }
.js .count .rise { animation: line-rise 1.1s var(--ease) both; }
.js .count .line + .line .rise { animation-delay: 0.1s; }
.js .count.again .rise { animation: line-rise 0.9s var(--ease) both; }
.js .count.again .line + .line .rise { animation-delay: 0.08s; }
.stage .counters { border-top-width: 2px; }
.key.lg { min-height: 52px; padding: 8px 22px; }
.app-desk { padding-top: clamp(56px, 7vw, 96px); }
/*  the count's size above the phone (the stage's height is set in 'the app's first screen, round 2')  */
@media (min-width: 1001px) {
  .count { font-size: calc(clamp(52px, 7.2vw, 104px) * var(--fit, 1)); }
}
/*  what drives the practice ridge is one switch on the ridge's near ground: a stone for one block,
    a stack of three for the market left to run; running, the switch is ink and its top stone rocks  */
.drive { display: inline-grid; grid-template-columns: auto auto; flex: none; border-radius: 10px; overflow: hidden; background: rgba(247, 245, 240, 0.8); box-shadow: inset 0 0 0 1.5px var(--ink), 0 2px 0 var(--ink); }
.drive .seg { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 18px 0 15px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; }
.drive .seg + .seg { box-shadow: inset 1.5px 0 0 var(--ink); }
.drive .seg:hover { background: #FFFFFF; }
.drive .seg:active { background: rgba(30, 34, 33, 0.14); }
.drive .seg[aria-pressed='true'] { background: var(--ink); color: var(--quartz); }
.drive .seg:focus-visible { outline: 2px solid var(--ink); outline-offset: -5px; }
.drive .seg[aria-pressed='true']:focus-visible { outline-color: var(--quartz); }
.drive .seg:disabled, .drive .seg:disabled:hover { background: repeating-linear-gradient(135deg, rgba(30, 34, 33, 0.14) 0 1px, transparent 1px 5px); color: rgba(30, 34, 33, 0.74); }
.drive .gl { flex: none; width: 17px; height: 17px; overflow: visible; }
.drive .gl path { fill: currentColor; }
.drive .gl .cut { fill: none; stroke: var(--quartz); stroke-width: 0.6; }
.drive .seg[aria-pressed='true'] .gl .cut { stroke: var(--ink); }
.drive .seg[aria-pressed='true'] .gl .top { transform-box: fill-box; transform-origin: 50% 100%; animation: top-rock 1s var(--ease) infinite; }
@keyframes top-rock { 0%, 100% { transform: none; } 30% { transform: translateY(-1.2px) rotate(-7deg); } 60% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .drive .seg[aria-pressed='true'] .gl .top { animation: none; } }
.to-law { display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 2px 0 4px; border-bottom: 2px solid var(--ink); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.to-law .arrow { width: 18px; height: 12px; flex: none; transition: transform var(--t-key) var(--ease); }
.to-law:hover .arrow, .to-law:focus-visible .arrow { transform: translateX(4px); }
.to-law:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .to-law .arrow { transition: none; } }

/* ---------- the app's first screen, round 2: one figure, the ridge, the keys on its ground ----------
    The stage starts under the bar. In its sky: one eyebrow and the count, the page's only display line.
    Above the phone the page's title sits beside the count as a standfirst over the intro copy (cols 8-12);
    on the phone that intro comes after the ribbon, as the opening of the swap. The two keys that drive the
    practice ridge stand on its near ground, the band the canvas paints under the crest, where they act.  */
.page.app-page.r2 { padding-top: var(--bar-h); }
.app-page.r2 .stage { display: grid; grid-template-columns: minmax(0, 1fr); --st-pad: clamp(18px, 3vw, 40px);
  /*  the ribbon's first figure on the left edge of .wrap, as on the front page  */
  --edge: max(var(--gutter), calc(50% - 600px + var(--gutter))); }
.app-page.r2 .stage > * { grid-column: 1; min-width: 0; }
.app-page.r2 .stage-scene { grid-row: 1; height: clamp(470px, 66svh, 560px); --gb: 108px; }
.app-page.r2 .stage > .counters { grid-row: 2; }
.app-page.r2 .stage-intro { grid-row: 3; padding-top: clamp(40px, 9vw, 64px); }
.app-page.r2 .stage-words { padding-top: var(--st-pad); }
.stage-words .k.lab { margin: 0 0 14px; color: var(--ink); flex-wrap: wrap; column-gap: 10px; row-gap: 4px; }
.stage-intro .lede-col { display: grid; gap: 14px; justify-items: start; }
.stage-intro .stand { margin: 0; font-family: var(--text); font-size: clamp(21px, 1.9vw, 25px); font-weight: 600; line-height: 1.22; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; max-width: 24ch; }
.stage-intro .lede { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink); max-width: 48ch; text-wrap: pretty; }
.stage-intro .live[hidden] { display: block !important; visibility: hidden; }
.stage-intro .live { margin: 0; }
/*  the near ground: the canvas paints it, the band only lays the words and keys on it  */
.stage-ground { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: var(--gb); display: flex; align-items: center; pointer-events: none; }
.stage-ground .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 28px; pointer-events: auto; }
.stage-mode { margin: 0; font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; color: var(--quartz); display: inline-flex; align-items: center; gap: 12px; }
.stage-mode::before { content: ''; flex: none; width: 24px; height: 2px; background: currentColor; }
.stage-mode b { font-weight: 500; }
.stage-mode b::before { content: '\00B7\00A0'; }
.stage-ground .drive { background: var(--quartz); box-shadow: 0 2px 0 #121514; }
.stage-ground .drive .seg:hover { background: #FFFFFF; }
.stage-ground .drive .seg:focus-visible { outline-color: var(--ink); }
@media (min-width: 1001px) {
  .app-page.r2 .stage-scene { height: clamp(560px, calc(100svh - var(--bar-h) - 96px), 820px); --gb: 88px; }
  .app-page.r2 .stage-intro { grid-row: 1; align-self: start; z-index: 3; pointer-events: none; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px);
    /*  the standfirst opens on the eyebrow's line, so the intro ends above the count's foot and the ridge keeps the room  */
    padding-top: calc(var(--st-pad) - 4px); }
  .stage-intro .lede-col { grid-column: 7 / 13; pointer-events: auto; gap: 12px; }
  .stage-intro .lede { max-width: 52ch; }
  .stage-intro .stand { max-width: none; }
  .app-page.r2 .stage { --st-pad: clamp(24px, 2.4vw, 34px); }
  /*  the count keeps to cols 1-6, the intro holds 7-12  */
  .app-page.r2 .stage-words .count { width: calc(50% - 20px); }
}
@media (max-width: 1000px) {
  .stage-ground .wrap { flex-direction: column; align-items: stretch; gap: 10px; }
  .stage-ground .drive { display: grid; grid-template-columns: 1fr 1fr; }
  .stage-ground .drive .seg { height: 44px; padding: 0 10px; gap: 8px; font-size: 13.5px; }
}
@media (max-width: 480px) {
  .stage-words .k.lab .chain { display: none; }
  .stage-mode #p-ridge { display: none; }
  .stage-mode b::before { content: none; }
}

/* ---------- the desk: your swap on a quartz slip; what is read from outside and the contract on the sky ---------- */
.desk { row-gap: 56px; align-items: start; }
.desk > * { min-width: 0; }
@media (min-width: 1001px) { .desk .slip-col { grid-column: 1 / 8; } .desk .side-col { grid-column: 8 / 13; } }
.side-col { display: grid; gap: 64px; align-content: start; }
/*  every block opens on a 2px ink rule: its name in mono caps, what it runs on at the right  */
.blk-lab { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 18px; padding-top: 12px; border-top: 2px solid var(--ink); }
.blk-lab > span { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.blk-lab > b { font-size: 15px; font-weight: 500; color: var(--ink); }
.blk-note { font-size: 16px; line-height: 1.5; color: var(--ink); max-width: 56ch; text-wrap: pretty; margin-top: 18px; }
.blk-note code { font-family: var(--mono); font-size: 0.92em; }

/*  the slip  */
.slip { position: relative; display: grid; gap: 24px; padding: 28px; border-radius: 6px; background: var(--quartz); box-shadow: inset 0 2px 0 var(--ink); }
.slip .gate { margin: -28px -28px 0; padding: 20px 28px; border: 0; border-radius: 6px 6px 0 0; background: var(--ink); color: var(--quartz); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.slip .gate p { flex: 1 1 18rem; margin: 0; font-size: 16px; line-height: 1.5; color: var(--quartz); text-wrap: pretty; }
.slip .gate .key:focus-visible { outline-color: var(--quartz); }
.trade { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 28px; align-items: end; }
/*  buy or sell: one switch, the side taken is ink  */
.slip .sides { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1.5px var(--ink); }
.slip .seg { height: 52px; min-width: 92px; padding: 0 22px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.slip .seg + .seg { box-shadow: inset 1.5px 0 0 var(--ink); }
.slip .seg:hover { background: #FFFFFF; color: var(--ink); }
.slip .seg:active { transform: none; background: rgba(30, 34, 33, 0.12); }
.slip .seg[aria-pressed='true'] { background: var(--ink); color: var(--quartz); }
.slip .seg:focus-visible { outline: 2px solid var(--ink); outline-offset: -5px; outline-color: var(--quartz); }
.slip .seg:not([aria-pressed='true']):focus-visible { outline-color: var(--ink); }
.slip .seg:disabled, .slip .seg:disabled:hover, .slip .seg[aria-pressed='true']:disabled {
  opacity: 1; border: 0; background: repeating-linear-gradient(135deg, rgba(30, 34, 33, 0.14) 0 1px, transparent 1px 5px); color: rgba(30, 34, 33, 0.74); cursor: not-allowed;
}
.slip .seg[aria-pressed='true']:disabled { color: var(--ink); text-decoration: underline 2px; text-underline-offset: 6px; }
.slip .sides:has(.seg:disabled) { box-shadow: inset 0 0 0 1.5px rgba(30, 34, 33, 0.35); }
/*  the size: a big mono figure on a rule, its unit at the right  */
.slip .field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.slip .field > span:first-child { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.field-in { display: flex; align-items: baseline; gap: 12px; border-bottom: 2px solid var(--ink); }
.slip .field input { flex: 1 1 0; width: 0; min-width: 0; height: 64px; padding: 0 4px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: 500 34px/1 var(--mono); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.slip .field input:focus-visible { outline: none; box-shadow: none; }
.field-in:focus-within { outline: 2px solid var(--ink); outline-offset: 4px; }
.field-in .unit { flex: none; padding-right: 4px; font-family: var(--text); font-size: 15px; font-style: normal; letter-spacing: 0; text-transform: none; color: var(--ink); }
.slip .field input:disabled { opacity: 1; border: 0; background: repeating-linear-gradient(135deg, rgba(30, 34, 33, 0.14) 0 1px, transparent 1px 5px); color: rgba(30, 34, 33, 0.74); cursor: not-allowed; }
.field-in:has(input:disabled) { border-bottom-color: rgba(30, 34, 33, 0.35); }
/*  round 2 (C2-19): a shut switch or field is a plain muted fill, and the Size label carries a small
    lock; the hatch is kept for the two action keys only (Run it here, Send the swap), so the slip no
    longer reads as greyed out while the gate above it says why  */
.slip .seg:disabled, .slip .seg:disabled:hover, .slip .seg[aria-pressed='true']:disabled,
.drive .seg:disabled, .drive .seg:disabled:hover { background: rgba(30, 34, 33, 0.05); }
.slip .field input:disabled { background: transparent; }
.slip .field-in:has(input:disabled) { background: rgba(30, 34, 33, 0.05); }
.slip .field > span:first-child { display: flex; align-items: center; gap: 8px; }
.slip .field:has(input:disabled) > span:first-child::before {
  content: ''; flex: none; width: 10px; height: 12px; background: currentColor; transform: translateY(-1px);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2.6 5.6V3.7a2.4 2.4 0 0 1 4.8 0v1.9' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Crect x='.6' y='5.4' width='8.8' height='6.2' rx='1.2'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2.6 5.6V3.7a2.4 2.4 0 0 1 4.8 0v1.9' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Crect x='.6' y='5.4' width='8.8' height='6.2' rx='1.2'/%3E%3C/svg%3E") no-repeat center / contain;
}
/*  the quote as a receipt: label, a dotted leader, the value  */
.receipt { display: grid; gap: 2px; }
.receipt p { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border: 0; font-size: 15px; }
.receipt p span { flex: 1 1 auto; display: flex; align-items: baseline; gap: 10px; color: var(--ink); }
.receipt p span::after { content: ''; flex: 1 1 24px; min-width: 24px; border-bottom: 1px dotted rgba(30, 34, 33, 0.35); transform: translateY(-4px); }
.receipt p b { flex: none; font-family: var(--mono); font-size: 15px; font-weight: 500; color: var(--ink); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.receipt p b.burn { color: var(--signal); }
/*  the answer of the quote written large: the cairn after the swap, then its courses as a gauge laid on
    its side (heavy at the foot, tapering to the cap), the stone this swap lays in stone colour, the
    capstone in signal. Without a wallet it is the practice quote, in the second ink  */
.result { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4px 20px; padding-top: 14px; border-top: 2px solid var(--ink); }
.result .r-k { grid-column: 1 / -1; margin: 0 0 6px; font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.result .r-fig { margin: 0; font-family: var(--mono); font-size: clamp(56px, 6vw, 84px); font-weight: 500; line-height: 0.86; letter-spacing: -0.07em; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.result .r-fig .of { margin-left: 0.34em; font-size: 0.4em; letter-spacing: -0.02em; color: var(--ink-2); }
.result .r-cap { max-width: 17rem; margin: 0 0 0.3em; font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; text-align: right; text-wrap: balance; color: var(--ink); }
.result .r-cap.burn { color: var(--signal); }
.result .gauge { grid-column: 1 / -1; width: 100%; height: 28px; margin: 12px 0 0;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(100% / var(--h) - 3px), transparent 0 calc(100% / var(--h)));
  mask: repeating-linear-gradient(90deg, #000 0 calc(100% / var(--h) - 3px), transparent 0 calc(100% / var(--h))); }
.result .gauge.lays { background: linear-gradient(90deg, var(--ink) calc((var(--n) - 1) / var(--h) * 100%), var(--stone) 0 calc(var(--n) / var(--h) * 100%), rgba(30, 34, 33, 0.16) 0); }
.result .gauge.done { background: linear-gradient(90deg, var(--ink) calc((var(--h) - 1) / var(--h) * 100%), var(--signal) 0); }
.result .gauge.cap { background: linear-gradient(90deg, var(--ink) calc((var(--h) - 1) / var(--h) * 100%), var(--signal) 0); }
.result .r-scale { grid-column: 1 / -1; display: flex; justify-content: space-between; margin: 2px 0 0; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.result.idle .r-fig, .result.idle .r-cap { color: var(--ink-2); }
.result.idle .r-cap.burn { color: var(--signal); }
.result.idle .gauge { opacity: 0.62; }
@media (max-width: 640px) {
  .result { grid-template-columns: minmax(0, 1fr); }
  .result .r-cap { max-width: none; margin: 8px 0 0; text-align: left; }
  .result .gauge { height: 24px; }
}
.slip .verdict { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink); min-height: 4.5em; }
.slip .sendrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.slip .why { flex: 1 1 9rem; margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink); }
@media (max-width: 1000px) {
  .trade { grid-template-columns: minmax(0, 1fr); }
  .slip { padding: 20px 18px; }
  .slip .gate { margin: -20px -18px 0; padding: 18px; }
  .slip .sides { width: 100%; }
  .receipt p { flex-wrap: wrap; row-gap: 2px; }
  .receipt p b { flex-basis: 100%; }
  .slip .sendrow .key { flex: 1 1 100%; }
}
/*  the slip on a phone (round 2, C2-9): no leader rows. The plain answer sits under the figure, then the
    six readings as label-over-value pairs in two columns, each on the short ink tick the side column
    uses for its readouts, so the slip reads as a phone page and not as a collapsed desktop table  */
@media (max-width: 560px) {
  .slip { gap: 18px; }
  .slip .verdict { min-height: 0; font-size: 15.5px; line-height: 1.5; }
  .receipt { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; padding-top: 16px; border-top: 2px solid var(--ink); }
  .receipt p { position: relative; display: grid; align-content: start; gap: 5px; min-width: 0; padding: 0 0 0 12px; }
  .receipt p::before { content: ''; position: absolute; left: 0; top: 1px; width: 2px; height: 13px; background: var(--ink); }
  .receipt p span { display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 500; line-height: 1.3; letter-spacing: 0.09em; text-transform: uppercase; }
  .receipt p span::after { content: none; }
  .receipt p b { font-family: var(--text); font-size: 17px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  .slip .sendrow #k-send { flex: 0 0 auto; }
  .slip .sendrow .why { flex: 1 1 7rem; }
  /*  the side of the swap rides on the size label's line, the figure keeps its caption beside it  */
  .trade { position: relative; }
  .slip .sides { position: absolute; top: 0; right: 0; z-index: 1; width: auto; }
  .slip .seg { height: 44px; min-width: 0; padding: 0 18px; font-size: 15px; }
  .slip .field > span:first-child { display: flex; align-items: center; min-height: 44px; }
  .slip .field input { height: 56px; font-size: 32px; }
  .result { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; }
  .result .r-cap { margin: 0 0 0.15em; font-size: 15.5px; text-align: right; }
  .receipt p span { letter-spacing: 0.06em; }
}

/*  read from outside: readouts in two columns, the name above, the value under it  */
.reads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 24px; margin: 0; }
.reads > div:first-child, .reads > div:last-child { grid-column: 1 / -1; }
.reads > div { position: relative; min-width: 0; display: grid; gap: 6px; align-content: start; padding-left: 14px; }
.reads > div::before { content: ''; position: absolute; left: 0; top: 1px; width: 2px; height: 14px; background: var(--ink); }
.reads dt { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.reads dd { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.side-col .ca-row .ca-addr { flex: 1 1 14rem; }

/* ---------- the law: a head, the formula written as the page's one figure, then the articles ---------- */
.law-head { max-width: none; margin-bottom: clamp(48px, 6vw, 88px); gap: 22px; }
.page-head.law-head .k { color: var(--ink); letter-spacing: 0.12em; font-weight: 500; flex-wrap: wrap; column-gap: 10px; row-gap: 4px; }
.law-head h1 { font-size: var(--fs-dl); line-height: 0.92; letter-spacing: -0.05em; max-width: 15ch; }
.law-head .lede { font-size: var(--fs-body); line-height: 1.55; color: var(--ink); max-width: 62ch; }
.law-head .live[hidden] { display: block !important; visibility: hidden; }
/*  the law's head: one finished cairn standing on the formula band, its foot under the band's crest,
    its lower stones cut by the right edge, its cap marked with the height; drawn by docs.js  */
#articles { position: relative; }
#articles > .wrap { position: relative; z-index: 1; }
.law-fig { position: absolute; top: 0; right: 0; width: min(46vw, 640px); height: 560px; pointer-events: none; }
@media (max-width: 1000px) { .law-fig { display: none; } }
/*  under 1000 px (round 2, C2-11) the same cairn keeps the head: a slim stack in the right margin beside
    the lede, cut by the screen edge, its foot under the band's crest, its height still written on it  */
@media (max-width: 1000px) {
  .law-fig { display: block; width: 40vw; }
  .law-head .lede, .law-head .live { max-width: 62%; }
}
/*  the formula band: quartz, from edge to edge, the rule of the level set as display type over a ruler of ticks  */
.formula-band { position: relative; padding: clamp(56px, 7vw, 104px) 0 44px; }
.formula-band .lab { margin-bottom: clamp(18px, 2.4vw, 30px); }
.formula-big { margin: 0; font-family: var(--mono); font-size: clamp(34px, 5vw, 64px); font-weight: 500; line-height: 1.02; letter-spacing: -0.04em; color: var(--ink); }
.formula-big > span { white-space: nowrap; }
.formula-big .f1 { display: block; }
@media (max-width: 600px) { .formula-big > span { display: block; } }
/*  ticks every few pixels, a long tick at every level boundary: a level is an address on a ruler  */
.ruler { height: 30px; margin-top: clamp(40px, 5vw, 64px);
  background:
    linear-gradient(var(--ink), var(--ink)) left bottom / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 96px) left bottom / 100% 28px no-repeat,
    repeating-linear-gradient(90deg, rgba(30, 34, 33, 0.6) 0 1px, transparent 1px 8px) left bottom / 100% 10px no-repeat; }
.law-body { position: relative; padding-top: clamp(64px, 8vw, 112px); overflow-x: clip; }

/*  the index: a column of numbers at the side above the phone; a strip of number keys on it  */
.toc { border-top: 2px solid var(--ink); padding-top: 8px; }
.toc a { grid-template-columns: 2.9rem 1fr; align-items: baseline; padding: 6px 20px 6px 0; border-bottom: 0; font-size: 15px; color: var(--ink); }
.toc a b { font-size: 20px; font-weight: 500; letter-spacing: -0.03em; padding-top: 0; }
.toc a:hover { background: transparent; text-decoration: underline 2px; text-underline-offset: 4px; }
.toc a.active { font-weight: 600; }
.toc a.active::after { border-radius: 0; clip-path: polygon(8% 100%, 0 48%, 20% 6%, 64% 0, 94% 22%, 100% 100%); box-shadow: none; width: 11px; height: 7px; }
@media (max-width: 979px) {
  .toc {
    position: sticky; top: var(--bar-h); z-index: 30;
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    margin: 0 calc(-1 * var(--gutter)); padding: 10px var(--gutter) 12px; border-top: 0;
    background: var(--sky); box-shadow: 0 2px 0 var(--ink);
  }
  .toc::-webkit-scrollbar { display: none; }
  .toc a {
    flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; grid-template-columns: none;
    border-radius: 10px; background: var(--quartz); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink), 0 2px 0 var(--ink);
  }
  .toc a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .toc a b { font-size: 15px; font-weight: 600; }
  .toc a:hover { text-decoration: none; background: #FFFFFF; }
  .toc a.active { background: var(--ink); color: var(--quartz); box-shadow: 0 2px 0 #000; }
  .toc a.active::after { display: none; }
  .toc a:focus-visible { outline-offset: -5px; }
  .art { scroll-margin-top: calc(var(--bar-h) + 84px); }
}

/*  on the phone the index is a light strip: plain mono numerals, the article in view an ink pill; it
    tucks under the bar while the page is read downwards and comes back on the way up (docs.js tuck)  */
@media (max-width: 979px) {
  .toc { gap: 2px; padding: 6px var(--gutter) 7px; transition: transform 240ms var(--ease); }
  .toc.tucked { transform: translateY(calc(-100% - 2px)); }
  .toc a { width: auto; min-width: 38px; height: 32px; padding: 0 9px; border-radius: 999px; background: transparent; box-shadow: none; }
  .toc a b { font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: 0; }
  .toc a:hover { background: rgba(30, 34, 33, 0.08); }
  .toc a.active { background: var(--ink); color: var(--quartz); box-shadow: none; }
  .toc a.active b { font-weight: 600; }
  .toc a:focus-visible { outline-offset: -3px; }
  .art { scroll-margin-top: calc(var(--bar-h) + 60px); }
}
/*  round 2 (C2-22): the article in view is named in its ink pill ('07 · The scree'), the others stay
    numerals; docs.js spy() already centres the active pill in the strip after the class changes  */
@media (max-width: 979px) {
  .toc a.active { display: inline-flex; align-items: center; gap: 0; padding: 0 14px 0 11px; }
  .toc a.active span {
    position: static; width: auto; height: auto; overflow: visible; clip: auto;
    font-family: var(--text); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; line-height: 1;
  }
  .toc a.active span::before { content: '\00B7'; content: '\00B7' / ''; display: inline-block; margin: 0 7px; font-family: var(--mono); font-weight: 500; }
}

/*  the articles: a numeral as large as a head, hung in its own column; a 3px ink rule above each  */
.art { position: relative; padding: 26px 0 0; margin: 0 0 clamp(64px, 7.5vw, 96px); border-bottom: 0; border-top: 3px solid var(--ink); }
.art h2 { display: block; margin: 0 0 20px; font-size: 32px; line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
.art h2 .n { display: block; margin: 0 0 12px; font-family: var(--mono); font-size: 56px; font-weight: 500; line-height: 0.8; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--ink); }
.art > p:not(.tbl-note):not(.formula), .art > ul > li { font-size: var(--fs-body); line-height: 1.55; color: var(--ink); }
@media (min-width: 980px) {
  .art { padding-left: 110px; }
  .art h2 .n { position: absolute; left: 0; top: 22px; margin: 0; }
}
/*  two articles carry more weight: the capstone on a quartz slab, what can go wrong on ink; both run to the edge  */
.art.slab-q, .art.slab-ink { border-top: 0; padding-top: clamp(40px, 4.5vw, 56px); padding-bottom: clamp(44px, 5vw, 64px); }
/*  each is a true stratum across the whole screen, behind the index too: entered through a crest of stone tops,
    left through the sky's own crest; the index keeps its sky ground and rides over it  */
.art.slab-q, .art.slab-ink { isolation: isolate; margin-bottom: calc(clamp(64px, 7.5vw, 96px) + 12px); }
.art.slab-ink { color: var(--quartz); }
.art.slab-q::before, .art.slab-ink::before, .art.slab-q::after, .art.slab-ink::after {
  content: ''; position: absolute; z-index: -1; left: -100vw; right: -100vw; pointer-events: none;
  -webkit-mask-repeat: repeat-x, no-repeat; mask-repeat: repeat-x, no-repeat;
}
.art.slab-q::before, .art.slab-ink::before {
  top: -27px; bottom: 0;
  -webkit-mask-image: var(--crest-a), linear-gradient(#000, #000); mask-image: var(--crest-a), linear-gradient(#000, #000);
  -webkit-mask-size: 1200px 28px, 100% calc(100% - 27px); mask-size: 1200px 28px, 100% calc(100% - 27px);
  -webkit-mask-position: -260px 0, 0 27px; mask-position: -260px 0, 0 27px;
}
.art.slab-q::before { background: var(--quartz); }
.art.slab-ink::before { background: var(--ink); -webkit-mask-image: var(--crest-c), linear-gradient(#000, #000); mask-image: var(--crest-c), linear-gradient(#000, #000); }
.art.slab-q::after, .art.slab-ink::after {
  bottom: -1px; height: 29px; background: var(--sky);
  -webkit-mask-image: var(--crest-b); mask-image: var(--crest-b);
  -webkit-mask-size: 1200px 29px; mask-size: 1200px 29px; -webkit-mask-position: -540px 0; mask-position: -540px 0;
}
.art.slab-q h2 .n, .art.slab-ink h2 .n { top: clamp(36px, 4.2vw, 52px); }
/*  round 2 (C2-21): the crest of stone tops is kept only where ground meets sky (the hero's ground, #enforced,
    the formula band under the law's cairn, the closing ink), so it reads as the horizon again; every other
    change of ground is cut straight: these two slabs, the sky under the formula band, the rule and the risks  */
.art.slab-q::before, .art.slab-ink::before { top: -16px; bottom: 0; -webkit-mask-image: none; mask-image: none; }
.art.slab-q::after, .art.slab-ink::after { display: none; }
/*  the index has no card of its own: it is lettered on whatever stratum passes under it, and turns quartz,
    entry by entry, while the ink stratum is under it (docs.js strata)  */
@media (min-width: 980px) {
  .toc { z-index: 2; transition: border-color var(--t-key) var(--ease); }
  .toc a.on-ink, .toc a.on-ink b { color: var(--quartz); }
  .toc a.on-ink:focus-visible { outline-color: var(--quartz); }
  .toc.top-on-ink { border-top-color: var(--quartz); }
}
/*  round 2 (C2-18): the index is one plate in the colour of the stratum under its middle. It flips whole,
    never entry by entry, and its 12px margin of that colour lets a crest pass behind it, never through a word  */
@media (min-width: 980px) {
  .toc { --plate: var(--sky); background: var(--plate); box-shadow: 0 0 0 12px var(--plate);
    transition: background-color 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease); }
  .toc a, .toc a b { transition: color 200ms var(--ease); }
  .toc.on-q { --plate: var(--quartz); }
  .toc.on-ink { --plate: var(--ink); border-top-color: var(--quartz); }
  .toc.on-ink a, .toc.on-ink a b { color: var(--quartz); }
  .toc.on-ink a:focus-visible { outline-color: var(--quartz); }
  .toc.on-ink a.active::after { background: var(--quartz); }
}
.art.slab-ink h2, .art.slab-ink h2 .n, .art.slab-ink > ul > li, .art.slab-ink li b { color: var(--quartz); }
.art.slab-ink :focus-visible { outline-color: var(--quartz); }
.art.slab-ink > ul > li:first-child { padding-left: 0; margin-bottom: 14px; }
.art.slab-ink > ul > li:first-child::before { display: none; }
.art.slab-ink > ul > li:first-child b { display: block; margin-bottom: 14px; font-size: var(--fs-dm); font-weight: 600; line-height: 1.05; letter-spacing: -0.035em; max-width: 22ch; text-wrap: balance; }
.art.slab-ink > ul > li:first-child { max-width: 56ch; }
/*  article 03: the height, drawn  */
.height-fig { display: block; width: 100%; height: clamp(260px, 30vw, 380px); margin-top: 28px; }
/*  the drawing runs out to the edge of the screen on the right, where the finished cairn is cut  */
.height-fig { width: calc(100% + var(--gutter)); max-width: none; }
@media (max-width: 979px) { .height-fig { width: calc(100% + 2 * var(--gutter)); margin-left: calc(-1 * var(--gutter)); } }

/*  articles 05 to 10, round 2: each hangs its key phrase, the words already in bold in its text, as a pull
    line in Cabinet under a short thick rule; 07 adds the scree drawn, 10 the toll running into the reserve.
    From 1180 px the line hangs in a right column beside the text; below that it sits over the paragraph.
    The pull side repeats the text, so it is hidden from assistive technology.  */
.pull-side { margin: 0 0 20px; }
.art .pull-line { margin: 0; max-width: 15ch; font-family: var(--display); font-weight: 800; font-synthesis: none; font-size: clamp(26px, 2.3vw, 32px); line-height: 0.98; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.pull-line::before { content: ''; display: block; width: 32px; height: 6px; margin-bottom: 14px; background: var(--ink); }
.pull-fig { display: block; width: 100%; max-width: 320px; margin-top: 18px; }
canvas.pull-fig { height: 128px; }
svg.pull-fig { height: auto; overflow: visible; color: var(--ink); }
.pull-fig text { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; fill: var(--ink); }
/*  over the paragraph the line is a quieter voice than the article's head  */
@media (max-width: 1179px) {
  .art .pull-line { font-size: 22px; max-width: 22ch; }
  .pull-line::before { width: 24px; height: 4px; margin-bottom: 10px; }
}
@media (min-width: 1180px) {
  .art.pull { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, 36%); column-gap: 40px; align-content: start; }
  .art.pull > h2 { grid-column: 1 / -1; }
  .art.pull > p { grid-column: 1; }
  .art.pull > .pull-side { grid-column: 2; grid-row: 2 / span 4; align-self: start; margin: 4px 0 0; }
  /*  the scree runs off the column's right edge, as a drawing cut by its frame  */
  #scree canvas.pull-fig { width: calc(100% + max(var(--gutter), 50vw - 600px + var(--gutter))); max-width: none; }
}

/*  article 11: the two clocks as two ruled columns, each step written large  */
.clock { margin-top: 30px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-top: 2px solid var(--ink); }
.clock > div { padding: 20px 28px 4px 0; background: none; border: 0; border-radius: 0; }
.clock > div + div { padding: 20px 0 4px 28px; border-left: 2px solid var(--ink); }
.clock h3 { margin: 0 0 18px; font-family: var(--mono); font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.clock h3 code { font-size: inherit; }
.clock .step { margin: 0 0 16px; font-family: var(--mono); font-size: 48px; font-weight: 500; line-height: 0.95; letter-spacing: -0.04em; color: var(--ink); white-space: nowrap; }
.clock .step { word-spacing: -0.34em; }
.clock .step .u { font-size: 0.62em; letter-spacing: -0.02em; }
.clock .step small { word-spacing: normal; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; vertical-align: 0.6em; }
.clock .step small:first-child { margin-right: 6px; }
.clock .step small:last-child { margin-left: 8px; }
.clock p:not(.step) { font-size: 16px; line-height: 1.5; color: var(--ink); }
@media (max-width: 759px) {
  .clock { grid-template-columns: minmax(0, 1fr); }
  .clock > div, .clock > div + div { padding: 18px 0 6px; border-left: 0; }
  .clock > div + div { margin-top: 12px; border-top: 2px solid var(--ink); }
  .clock .step { font-size: 36px; }
}
/*  lists hang a small drawn slab in the margin, not a grey lozenge  */
.art.slab-ink ul li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath d='M.5 6.6 1.4 2.4 4.3.7 9 1 11.1 2.8 11.5 6.6Z' fill='%238D989A'/%3E%3Cpath d='M8.2.9 11.1 2.8 11.5 6.6 8.6 6.6Z' fill='%236F6A62'/%3E%3Cpath d='M1.4 2.4 4.3.7 9 1' fill='none' stroke='%23EDEAE2' stroke-width='.9'/%3E%3C/svg%3E"); }
@media (min-width: 980px) {
  .art ul li { padding-left: 0; }
  .art ul li::before { left: -24px; }
}
/*  article 15: the questions set large, each hung on the article that answers it; the marker is a stone
    on the ground, and opening a question lays a second stone on it  */
.faq { --ref: 4.6rem; margin-top: 18px; border-top: 2px solid var(--ink); padding-top: 10px; }
.faq summary { display: grid; grid-template-columns: var(--ref) minmax(0, 1fr) 48px; align-items: baseline; padding: 16px 0; font-size: clamp(20px, 1.9vw, 24px); font-weight: 650; line-height: 1.22; letter-spacing: -0.022em; color: var(--ink); border-radius: 0; }
.faq summary .ref { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.faq summary .q { text-decoration: underline 2px transparent; text-underline-offset: 6px; transition: text-decoration-color var(--t-key) var(--ease); }
.faq summary:hover .q { text-decoration-color: currentColor; }
.faq summary::before, .faq summary::after { content: ''; grid-column: 3; grid-row: 1; justify-self: end; align-self: center; background: no-repeat center / contain; }
.faq summary::before { width: 26px; height: 13px; margin-top: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 13'%3E%3Cpath d='M.8 12.3 2.4 5.6 7.8 2 17.9 1.4 23.6 4.4 25.2 12.3Z' fill='%236F6A62'/%3E%3Cpath d='M17.4 1.5 23.6 4.4 25.2 12.3 18.6 12.3Z' fill='%234E4A45'/%3E%3Cpath d='M.8 12.3 2.4 5.6 7.8 2 17.9 1.4 23.6 4.4 25.2 12.3Z' fill='none' stroke='%231E2221' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.faq summary::after { width: 17px; height: 10px; margin: 0 4px 12px 0; opacity: 0; transform: translateY(-14px); transition: opacity 200ms var(--ease), transform 260ms var(--ease); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 10'%3E%3Cpath d='M.7 9.4 1.9 3.7 5.6 1 12.4.8 15.6 3.2 16.4 9.4Z' fill='%23EDEAE2'/%3E%3Cpath d='M11.9.9 15.6 3.2 16.4 9.4 12.6 9.4Z' fill='%23C9C4B8'/%3E%3Cpath d='M.7 9.4 1.9 3.7 5.6 1 12.4.8 15.6 3.2 16.4 9.4Z' fill='none' stroke='%231E2221' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.faq summary:hover::after { opacity: 0.4; transform: translateY(-7px); }
.faq details[open] summary::after { opacity: 1; transform: none; }
.faq summary:focus-visible { outline-offset: 2px; border-radius: 0; }
.faq .ans { margin: -4px 0 0; padding: 0 48px 26px var(--ref); font-size: 18px; line-height: 1.55; color: var(--ink); max-width: calc(var(--ref) + var(--measure)); }
@media (max-width: 759px) {
  .faq { --ref: 2.9rem; }
  .faq summary { grid-template-columns: var(--ref) minmax(0, 1fr) 40px; padding: 14px 0; font-size: 19px; }
  .faq summary .ref { font-size: 12px; }
  .faq .ans { padding: 0 8px 22px var(--ref); font-size: 17px; }
}

/*  wrapping: display heads balanced, running text without widows; never on the lines a script
    measures (the hero title, the app's count)  */
p, li, dd, summary { text-wrap: pretty; }
.sharp, .close h2, .laws li span { text-wrap: balance; }

/* ---------- the display voice ----------
    Cabinet Grotesk Extrabold for the few lines written large: the count over the ridge, the page
    and section heads, the band statements and the footer line. Inter stays for everything read,
    Geist Mono for every figure. Tracking and leading are set for this face, not inherited from Inter.  */
.title, .count, .sec-head h2, .foot .line, .page-head h1, .law-head h1, .sharp-edge .sharp, .intro-h, .hero-band .intro-h {
  font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; font-synthesis: none;
}
.sec-head h2, .foot .line, .page-head h1, .law-head h1 { line-height: 0.9; }
.title, .count { letter-spacing: -0.035em; }
.sharp-edge .sharp { line-height: 0.96; }

/* ---------- reduced motion: everything in place at once ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .js .arrive { opacity: 1; transform: none; }
  .js .enter { opacity: 1; }
}