/* Albrim. One sheet of typed paper. Black ink, white paper, and ember for what burned. */
@font-face { font-family: "Special Elite"; src: url(../fonts/special-elite-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Karla"; src: url(../fonts/karla-var.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(../fonts/jetbrains-mono-var.woff2) format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --paper: #f5f4f0;
  --ink: #121211;
  --ink-2: #4c4b47;
  --ember: #ff4a00;
  --ember-type: #d93d00;
  --hole: #0b0b0a;
  --rule: rgba(18, 18, 17, .26);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --press: cubic-bezier(.4, 0, .2, 1);
  --type: "Special Elite", "Courier New", monospace;
  --body: "Karla", system-ui, sans-serif;
  --num: "JetBrains Mono", ui-monospace, monospace;
  --title: clamp(62px, 8vw, 148px);
  --mid: clamp(22px, 1.95vw, 30px);
  --text: 17px;
  --small: 14px;
  --gutter: clamp(16px, 2.6vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper) url(../assets/grain.png);
  background-blend-mode: multiply;
  font: 400 var(--text)/1.45 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
[hidden] { display: none !important; }
h1, h2, h3, p, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
code, pre, .num, .val, .addr-val, .env-address, .seal-hash, .hash-val, .docs-cmd { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; font-size: max(13px, .92em); letter-spacing: -.01em; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* large type lands a little off the line, and its ink is uneven */
.k { display: inline-block; }
.k0 { transform: translateY(-.012em) rotate(-.25deg); opacity: .97; }
.k1 { transform: translateY(.018em) rotate(.3deg); }
.k2 { transform: translateY(-.022em); opacity: .93; }
.k3 { transform: translateY(.008em) rotate(-.4deg); }
.k4 { transform: translateY(.026em) rotate(.15deg); opacity: .96; }
.k5 { transform: translateY(-.004em); }
[data-typed] {
  -webkit-mask-image: url(../assets/ink.png);
  mask-image: url(../assets/ink.png);
  -webkit-mask-size: 300px 300px;
  mask-size: 300px 300px;
}

/* underlined text links, the only button style in this draft */
.lnk {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--type);
  font-size: var(--mid);
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .22em;
  transition: text-underline-offset 180ms var(--press), transform 150ms var(--press), opacity 150ms var(--press);
}
.lnk:hover { text-underline-offset: .34em; }
.lnk:active { transform: scale(.96); }
.lnk-small { font-size: 16px; white-space: nowrap; }

/* the round menu, a punched hole in the page */
.roundmenu {
  position: fixed;
  z-index: 40;
  top: clamp(14px, 2.2vw, 28px);
  right: clamp(14px, 2.2vw, 28px);
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 0;
  background: var(--hole);
  color: var(--paper);
  font: 400 16px/1 var(--type);
  cursor: pointer;
  transition: transform 150ms var(--press);
}
.roundmenu:hover { transform: scale(1.05); }
.roundmenu:active { transform: scale(.95); }
.roundmenu:focus-visible { outline-color: var(--ink); outline-offset: 4px; }
.menu-open .roundmenu { background: var(--paper); color: var(--ink); }
.menu {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: .1em;
  padding: var(--gutter) calc(var(--gutter) * 2.4);
  background: var(--hole);
  color: var(--paper);
  font: 400 var(--mid)/1.2 var(--type);
  clip-path: circle(0 at calc(100% - 61px) 61px);
  visibility: hidden;
  transition: clip-path 180ms cubic-bezier(.4, 0, 1, 1), visibility 0s linear 180ms;
}
.menu-open .menu {
  clip-path: circle(150vmax at calc(100% - 61px) 61px);
  visibility: visible;
  transition: clip-path 420ms var(--ease-out), visibility 0s;
}
.menu a { color: var(--paper); text-decoration: none; }
.menu a:hover, .menu a:focus-visible { text-decoration: underline; text-decoration-thickness: .05em; text-underline-offset: .14em; }
.menu a:focus-visible { outline-color: var(--paper); }
.menu a[aria-current] { opacity: .62; }
.menu .lnk { color: var(--paper); font-size: inherit; }

/* ---------- landing ---------- */
.index #paper { position: fixed; left: 0; top: 0; width: 100%; height: 100lvh; display: block; z-index: 0; }
.track { position: relative; z-index: 2; height: 660vh; overflow: clip; pointer-events: none; }
.poster {
  position: fixed;
  z-index: 10;
  left: 0; right: 0; bottom: 0;
  padding: 0 var(--gutter) clamp(10px, 1.6vh, 20px);
  text-align: center;
}
.poster-title { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(16px, 3vw, 56px); }
.lnk-a { justify-self: end; }
.lnk-b { justify-self: start; }
.title {
  font: 400 var(--title)/.98 var(--type);
  letter-spacing: .035em;
  white-space: nowrap;
}
.dialogue { font: 400 var(--mid)/1.24 var(--type); margin-top: .1em; }
.dialogue span { display: block; }
.paste { width: min(720px, 100%); margin: clamp(6px, 1.2vh, 14px) auto 0; }
.paste-line { display: flex; align-items: center; gap: 14px; border-bottom: 1.5px solid var(--ink); }
#pasteIn {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  background: none;
  border: 0;
  outline: 0;
  padding: 0 2px;
  font: 400 16px/1 var(--num);
  text-align: center;
  caret-color: var(--ember);
}
#pasteIn::placeholder { font: 400 17px/1 var(--body); color: var(--ink-2); opacity: 1; }
.paste-line:focus-within { border-bottom-width: 2.5px; margin-bottom: -1px; }
.paste-out {
  min-height: 4.3em;
  padding-top: 7px;
  font-size: 15px;
  line-height: 1.38;
  color: var(--ink-2);
}
.paste-out strong { color: var(--ink); font-weight: 600; }

/* one strip of correction paper behind a burn's name, so it stays readable over the hat */
.burn-label {
  position: fixed;
  z-index: 8;
  max-width: min(340px, 62vw);
  padding: 5px 10px 6px;
  background: var(--paper);
  font: 400 21px/1.16 var(--type);
  transform: rotate(-.35deg);
  transition: opacity 500ms var(--press);
  pointer-events: none;
}
.burn-label .amt { display: block; font: 500 15px/1.3 var(--num); font-variant-numeric: tabular-nums; min-height: 1.3em; }
.burn-label .how { display: block; font: 400 14px/1.35 var(--body); color: var(--ink-2); opacity: 0; transition: opacity 180ms var(--press); min-height: 1.25em; }
.burn-label .how.on { opacity: 1; }
.burn-label.out { opacity: 0; }

.pushed {
  position: absolute;
  left: 0; right: 0;
  top: 104vh;
  text-align: center;
  white-space: nowrap;
  font: 400 clamp(32px, 8vw, 148px)/1 var(--type);
  -webkit-text-stroke: .12em var(--paper);
  paint-order: stroke fill;
  will-change: transform;
}
.chapters { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.end {
  position: fixed;
  z-index: 9;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: calc(var(--gutter) * 1.4) var(--gutter);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.end.on { visibility: visible; opacity: 1; transition: opacity 420ms var(--ease-out); }
.end.on a, .end.on button { pointer-events: auto; }
.end-left, .end-right { width: min(25vw, 390px); display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.end-right { align-items: flex-start; }
.end-num { font: 500 var(--title)/1 var(--num); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.end-copy { font: 400 var(--mid)/1.35 var(--type); }
.end-tick { font: 500 14px/1.4 var(--num); min-height: 2.8em; color: var(--ink-2); }
.end-links { display: flex; flex-direction: column; align-items: flex-start; }

/* entrance: four things in under 1.2s, the hat types itself on in the canvas */
@keyframes strike { from { opacity: 0; translate: 0 -.07em; scale: 1.14; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes rise { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
body.index:not(.static) .title .k { animation: strike 260ms var(--ease-out) both; }
body.index:not(.static) .title .k:nth-child(1) { animation-delay: 200ms; }
body.index:not(.static) .title .k:nth-child(2) { animation-delay: 290ms; }
body.index:not(.static) .title .k:nth-child(3) { animation-delay: 360ms; }
body.index:not(.static) .title .k:nth-child(4) { animation-delay: 440ms; }
body.index:not(.static) .title .k:nth-child(5) { animation-delay: 500ms; }
body.index:not(.static) .title .k:nth-child(6) { animation-delay: 590ms; }
body.index:not(.static) .dialogue { animation: rise 480ms var(--ease-out) 560ms both; }
body.index:not(.static) .lnk-a, body.index:not(.static) .lnk-b, body.index:not(.static) .paste { animation: rise 480ms var(--ease-out) 700ms both; }

.noscript { position: fixed; z-index: 60; inset: auto 0 0 0; padding: 16px; background: var(--paper); }

/* still version: reduced motion or no WebGL2. Same words, normal flow, no camera. */
.static .track { height: auto; overflow: visible; pointer-events: auto; padding-top: 100svh; }
.static #paper { position: absolute; height: 100svh; }
.static .poster { position: absolute; bottom: auto; }
.static .pushed { position: static; padding: 8vh var(--gutter) 2vh; white-space: normal; font-size: clamp(36px, 7vw, 120px); line-height: 1.04; }
.static .chapters { position: static; width: auto; height: auto; clip-path: none; overflow: visible; padding: 2vh var(--gutter) 6vh; display: grid; gap: 1.4em; max-width: 34em; margin: 0 auto; font: 400 var(--mid)/1.3 var(--type); }
.static .end { position: static; visibility: visible; opacity: 1; pointer-events: auto; gap: 40px; padding-bottom: 8vh; }
.static .end a { pointer-events: auto; }
.static .end-left, .static .end-right { width: auto; flex: 1 1 0; }
.static .end-tick { display: none; }

/* ---------- board ---------- */
.board { min-height: 100svh; }
.sheet-top { position: relative; height: clamp(540px, min(74vh, 47vw), 860px); overflow: hidden; }
.sheet-top .burn-label { position: absolute; }
#paperBoard { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.board-head { position: absolute; z-index: 5; left: var(--gutter); top: clamp(14px, 2.2vw, 28px); max-width: 26vw; }
.board-head h1 { font: 400 var(--mid)/1.18 var(--type); }
.board-head h1 a { text-decoration: none; }
.board-head h1 a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
.board-head p { margin-top: 3px; }
.reading { position: absolute; z-index: 4; }
.reading .val {
  display: block;
  margin: 0;
  font: 500 clamp(44px, 6.1vw, 118px)/1 var(--num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.045em;
  white-space: nowrap;
}
.reading .word { display: block; font: 400 var(--mid)/1.15 var(--type); }
.reading .fine { display: block; font-size: var(--small); line-height: 1.3; color: var(--ink-2); margin-top: 2px; }
.reading.burned .val { color: var(--ember-type); }
.reading.in { left: var(--gutter); top: 96px; }
.reading.ai { right: var(--gutter); top: 96px; text-align: right; }
.reading.left { left: var(--gutter); bottom: 12px; }
.reading.burned { right: var(--gutter); bottom: 12px; text-align: right; }

.brim-line { position: absolute; z-index: 4; left: 50%; bottom: 8px; width: min(46vw, 720px); transform: translateX(-50%); font-size: var(--small); line-height: 1.3; color: var(--ink-2); text-align: center; }

.ledger { padding: 6px var(--gutter) 30px; max-width: 1560px; margin: 0 auto; }
.ledger-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; padding: 22px 0 10px; border-bottom: 1.5px solid var(--ink); }
.ledger-head h2 { font: 400 var(--mid)/1.2 var(--type); }
.ledger-head p { font-size: var(--small); color: var(--ink-2); }
.row, .row-h {
  display: grid;
  grid-template-columns: 120px minmax(160px, 1.25fr) minmax(160px, 1.25fr) 100px 96px;
  align-items: center;
  column-gap: 18px;
  width: 100%;
}
.row-h { font-size: var(--small); color: var(--ink-2); padding: 7px 8px 6px; border-bottom: 1px solid var(--rule); }
.row-h > :nth-child(n+4) { text-align: right; }
.row {
  min-height: 46px;
  padding: 5px 8px;
  background: none;
  border: 0;
  border-bottom: 1px dashed var(--rule);
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms var(--press);
}
.row:hover, .row:focus-visible { background: rgba(18, 18, 17, .055); }
.row:active { background: rgba(18, 18, 17, .1); }
.row.reading-now { background: rgba(18, 18, 17, .055); }
.row:focus-visible { outline-offset: -2px; }
.row .d, .row .a, .row .r { font: 400 15px/1.2 var(--num); font-variant-numeric: tabular-nums; }
.row .d { color: var(--ink-2); }
.row .n { font: 400 20px/1.15 var(--type); }
.row .m { font-size: 16px; line-height: 1.2; color: var(--ink-2); }
.row .a { text-align: right; font-weight: 500; }
.row .r { text-align: right; color: var(--ink-2); }
.row.burns .r { color: var(--ember-type); font-weight: 600; }
.row:nth-child(3n+1) .n { transform: translateY(.5px); }
.row:nth-child(4n+2) .n { transform: translateY(-.6px) rotate(-.06deg); }
.row:nth-child(5n+3) .a { transform: translateY(.5px); }
.ledger-more { padding-top: 12px; display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.ledger-more p { font-size: var(--small); color: var(--ink-2); }

.foot { padding: 20px var(--gutter) 34px; display: flex; flex-wrap: wrap; gap: 8px 30px; align-items: center; border-top: 1.5px solid var(--ink); }
.foot p { font-size: var(--small); color: var(--ink-2); flex: 1 1 280px; }
.foot .lnk { font-size: 20px; }

/* ---------- docs ---------- */
.docs-top { position: relative; height: clamp(190px, 28vh, 300px); overflow: hidden; }
#paperDocs { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.docs { display: grid; grid-template-columns: minmax(210px, 300px) minmax(0, 40em); gap: 20px clamp(24px, 6vw, 110px); padding: 16px var(--gutter) 56px; }
.docs h1 { font: 400 var(--title)/1 var(--type); letter-spacing: .02em; grid-column: 1 / -1; }
.docs-nav { position: sticky; top: 24px; align-self: start; display: flex; flex-direction: column; }
.docs-nav a { font: 400 18px/1.2 var(--type); padding: 7px 0; min-height: 34px; text-decoration: none; }
.docs-nav a:hover { text-decoration: underline; text-underline-offset: .2em; }
.docs-body section { padding: 0 0 30px; scroll-margin-top: 20px; }
.docs-body h2 { font: 400 clamp(26px, 2.6vw, 40px)/1.12 var(--type); padding-bottom: 8px; }
.docs-body p { max-width: 38em; }
.docs-body p + p { margin-top: .75em; }
.docs-body ol { margin-top: 8px; }
.docs-body ol li { display: grid; grid-template-columns: 4.2em 1fr; padding: 7px 0; border-bottom: 1px dashed var(--rule); }
.docs-body ol li .num { color: var(--ink-2); }
.docs-body .burnt { font: 400 clamp(26px, 2.6vw, 40px)/1.15 var(--type); }

/* ---------- phones ---------- */
@media (max-width: 720px) {
  :root { --title: 17vw; --mid: 22px; }
  .poster { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
  .poster-title { display: contents; }
  .title { grid-column: 1 / -1; grid-row: 1; }
  .dialogue { grid-column: 1 / -1; grid-row: 2; }
  .lnk-a { grid-column: 1; grid-row: 3; font-size: 20px; }
  .lnk-b { grid-column: 2; grid-row: 3; font-size: 20px; }
  .paste { grid-column: 1 / -1; grid-row: 4; margin-top: 0; }
  .paste-out { min-height: 7em; font-size: 15px; }
  .poster .poster-social { grid-column: 1 / -1; grid-row: 6; }
  .paste-line { gap: 8px; }
  .lnk-small { font-size: 15px; }
  #pasteIn::placeholder { font-size: 15px; }
  .pushed { font-size: 8.6vw; }
  .burn-label { font-size: 17px; max-width: 50vw; padding: 3px 7px 4px; }
  .burn-label .amt { font-size: 13px; }
  .burn-label .how { font-size: 13px; }
  .end { flex-direction: column; justify-content: flex-end; padding: 12px var(--gutter) 16px; gap: 2px; }
  .end-left, .end-right { width: 100%; gap: 2px; justify-content: flex-start; }
  .end-num { font-size: 15vw; line-height: 1; }
  .end-copy { font-size: 18px; line-height: 1.35; }
  .end-tick { min-height: 1.4em; font-size: 13px; white-space: nowrap; overflow: hidden; }
  .end-links { flex-direction: row; flex-wrap: wrap; gap: 0 18px; margin-top: 2px; }
  .end-links .lnk { font-size: 19px; }
  .end-right .end-copy { display: none; }
  .static .end { flex-direction: column; }

  .sheet-top { height: auto; overflow: visible; padding-top: 0; }
  #paperBoard { position: relative; height: 104vw; }
  .brim-line { position: static; transform: none; width: auto; padding: 8px var(--gutter) 0; text-align: left; }
  .board-head { max-width: 62vw; }
  .readings { display: grid; gap: 2px; padding: 6px var(--gutter) 0; }
  .reading { position: static; text-align: left !important; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 12px; }
  .reading .val { font-size: 13.2vw; letter-spacing: -.05em; grid-column: 1; }
  .reading .word { grid-column: 2; font-size: 21px; }
  .reading .fine { grid-column: 1 / -1; margin-top: 0; }
  .row-h { display: none; }
  .row { grid-template-columns: 1fr auto; grid-template-areas: "n a" "m r" "d d"; column-gap: 14px; row-gap: 0; padding: 10px 2px; }
  .row .n { grid-area: n; }
  .row .a { grid-area: a; }
  .row .m { grid-area: m; font-size: 15px; }
  .row .r { grid-area: r; }
  .row .d { grid-area: d; font-size: 13px; margin-top: 2px; }
  .docs { grid-template-columns: 1fr; gap: 14px; }
  .docs-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 0 16px; }
  .docs-nav a { min-height: 44px; display: inline-flex; align-items: center; font-size: 17px; }
}
@media (max-width: 720px) and (max-height: 700px) {
  .paste-out { min-height: 2.8em; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation: none !important; }
}

/* ---------- production chrome ---------- */
html[lang^="zh"] {
  --type: "Special Elite", "Songti SC", "STSong", "Noto Serif CJK SC", "SimSun", serif;
  --body: "Karla", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}
.lang {
  position: fixed;
  z-index: 41;
  top: clamp(14px, 2.2vw, 28px);
  right: calc(clamp(14px, 2.2vw, 28px) + 76px);
  min-height: 44px;
  margin-top: 11px;
  padding: 0 8px;
  background: var(--paper);
  border: 0;
  color: var(--ink);
  font: 400 17px/1 var(--type);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .22em;
  cursor: pointer;
  transition: text-underline-offset 180ms var(--press), transform 150ms var(--press);
}
.lang:hover { text-underline-offset: .34em; }
.lang:active { transform: scale(.96); }
.menu-open .lang { background: var(--hole); color: var(--paper); }
.menu-list { width: min(860px, 100%); }
.menu-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: .13em 0;
  min-height: 40px;
}
.menu-name { font: 400 clamp(23px, calc(2.4vh + .75vw), 44px)/1.14 var(--type); }
.menu-when { font: 400 14px/1.3 var(--num); white-space: nowrap; color: rgba(245, 244, 240, .78); }
.menu-social { display: flex; gap: 24px; margin-top: 14px; }
.menu-social .lnk { font-size: 20px; }

.chrome-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 22px;
  min-height: 74px;
  padding: clamp(18px, 2.4vw, 34px) 190px 0 var(--gutter);
}
.home { font: 400 var(--mid)/1.2 var(--type); text-decoration: none; }
.home:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
.state { font-size: var(--small); line-height: 1.35; color: var(--ink-2); }
.state:empty { display: none; }
.state-stale { color: var(--ink); font-weight: 600; }
.state-failed { color: var(--paper); background: var(--hole); padding: 3px 8px; }
.state-failed .lnk { color: var(--paper); }
.state-retry { min-height: 30px; font-size: 15px; }
.lnk-small { font-size: 16px; }
.big { font: 400 var(--title)/1 var(--type); letter-spacing: .015em; }
.lede { font: 400 var(--mid)/1.35 var(--type); max-width: 38em; margin-top: .35em; }
.plain-note { font-size: var(--text); color: var(--ink-2); margin-top: 12px; }
.inverse-note { background: var(--hole); color: var(--paper); padding: 10px 14px; margin-top: 12px; font-size: var(--text); line-height: 1.38; }
.page main { padding: 0 var(--gutter) 40px; }
.page h2, .board h2 { font: 400 var(--mid)/1.2 var(--type); }
.empty-sheet { padding: 26px 0; border-top: 1.5px solid var(--ink); }
.empty-big { font: 400 clamp(26px, 3.2vw, 46px)/1.14 var(--type); max-width: 22em; }
.empty-sheet p + p { margin-top: 10px; max-width: 40em; color: var(--ink-2); }
.typed-bar { display: block; font: 400 15px/1.1 var(--type); letter-spacing: .06em; white-space: nowrap; overflow: hidden; margin-top: 4px; }
.typed-bar b { font-weight: 400; }
.typed-bar i { font-style: normal; color: rgba(18, 18, 17, .36); }
.foot-line, .foot-next { flex: 1 1 100%; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 26px; flex: 1 1 100%; }
.foot-social { display: inline-flex; gap: 0 26px; }
.foot-next { color: var(--ink); }

/* ---------- closed page ---------- */
.closed-strip { position: relative; height: clamp(190px, 36vh, 340px); overflow: hidden; }
#paperClosed { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.closed-body { padding: 18px var(--gutter) 40px; max-width: 1100px; }
.closed-name { font: 400 clamp(46px, 6.6vw, 120px)/1.02 var(--type); }
.closed-when { font: 400 var(--mid)/1.3 var(--type); margin-top: 12px; }
.closed-line { margin-top: 10px; max-width: 40em; }
.closed-next { margin-top: 10px; }
.closed-rule { margin-top: 10px; font-size: var(--small); color: var(--ink-2); max-width: 46em; }
.closed-links { display: flex; flex-wrap: wrap; gap: 0 26px; margin-top: 8px; }

/* ---------- landing, live ---------- */
.live-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 18px; margin-top: 4px; font-size: 15px; line-height: 1.3; }
.live-age { color: var(--ink-2); }
.live-row .vh { display: inline-block; }
.live-mint { display: inline-flex; align-items: center; gap: 8px; }
.live-mint code { font: 400 14px/1 var(--num); }
.live-next { flex: 1 1 100%; color: var(--ink-2); }
.live-row .lnk { min-height: 32px; }
.end-social { display: flex; flex-wrap: wrap; gap: 0 18px; }
.poster-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 22px; }
.poster-social .lnk { min-height: 30px; font-size: 16px; }

/* ---------- board, statement and addresses ---------- */
.board .reading .fine { max-width: 30vw; }
.board .reading.ai .fine, .board .reading.burned .fine { margin-left: auto; }
.board-head h1 span { white-space: nowrap; }
.brim-bar { display: none; }
.statement, .addresses, .settlements { padding: 26px var(--gutter) 0; max-width: 1560px; margin: 0 auto; }
.stmt { margin: 10px 0 0; border-top: 1.5px solid var(--ink); }
.stmt dt, .stmt dd { margin: 0; }
.stmt-row { display: grid; grid-template-columns: minmax(170px, 1fr) 170px minmax(0, 1.4fr); column-gap: 22px; align-items: baseline; padding: 9px 0; border-bottom: 1px dashed var(--rule); }
.stmt dt { font: 400 19px/1.2 var(--type); }
.stmt dd { display: contents; }
.stmt-val { font: 500 16px/1.2 var(--num); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.stmt-word { font: 400 18px/1.2 var(--type); }
.stmt-note, .stmt-bar { font-size: 15px; line-height: 1.3; color: var(--ink-2); }
.addr-row { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(0, 2.4fr) auto; column-gap: 22px; align-items: center; min-height: 46px; padding: 6px 0; border-bottom: 1px dashed var(--rule); }
#addresses { margin-top: 10px; border-top: 1.5px solid var(--ink); }
.addr-name { font: 400 19px/1.2 var(--type); }
.addr-val { font: 400 15px/1.3 var(--num); overflow-wrap: anywhere; }
.addr-none { color: var(--ink-2); }
.addr-why { font-size: 15px; color: var(--ink-2); }
.addr-acts { display: inline-flex; gap: 16px; white-space: nowrap; }
.copy { min-width: 3.4em; justify-content: flex-start; }
.settle { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 8px 0; border-bottom: 1px dashed var(--rule); }
.settle-week { font: 400 15px/1.3 var(--num); color: var(--ink-2); }
#settlements { margin-top: 10px; border-top: 1.5px solid var(--ink); }
a.row { color: inherit; text-decoration: none; }
a.row:hover .n, a.row:focus-visible .n { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.row-static { cursor: default; }
.row-static:hover { background: none; }
.row-empty { padding: 16px 8px; color: var(--ink-2); }

/* ---------- desk: case files ---------- */
.desk-grid { display: grid; grid-template-columns: minmax(170px, 250px) minmax(0, 1fr); gap: clamp(24px, 5vw, 76px); margin-top: 28px; }
.docket { position: sticky; top: 22px; align-self: start; }
.docket:empty { display: none; }
.docket-title { font: 400 19px/1.2 var(--type); padding: 10px 0 2px; }
.docket li a { display: block; padding: 5px 0; min-height: 30px; font-size: 16px; line-height: 1.35; text-decoration: none; }
.docket li a:hover { text-decoration: underline; text-underline-offset: .2em; }
.case-group + .case-group { margin-top: 36px; }
.case-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; padding-bottom: 8px; }
.case-group-note { font-size: var(--small); color: var(--ink-2); }
.case { position: relative; padding: 18px 0 30px 54px; border-top: 1.5px solid var(--ink); scroll-margin-top: 16px; }
.case.is-target { background: rgba(18, 18, 17, .03); }
.case-watching { border-top-style: dashed; }
.case-retracted { border-top-style: dotted; }
.punch { position: absolute; left: 6px; top: 22px; width: 26px; height: 26px; border-radius: 50%; border: 2px dashed rgba(18, 18, 17, .5); }
.punch.is-due { border: 2px solid var(--ink); }
.punch.is-burned { border: 0; background: var(--hole); box-shadow: 0 0 0 2px var(--ember), 0 0 0 5px rgba(18, 18, 17, .18); }
.case-head { display: grid; gap: 2px; }
.case-status { font-size: var(--small); color: var(--ink-2); }
.case-name { font: 400 clamp(32px, 4.4vw, 68px)/1.04 var(--type) !important; }
.case-retracted .case-name { text-decoration: line-through; text-decoration-thickness: 2px; }
.case-loss { font: 400 var(--mid)/1.2 var(--type); }
.case-when { font-size: var(--small); color: var(--ink-2); }
.case-link { justify-self: start; min-height: 32px; font-size: 15px; }
.corrected { margin-top: 14px; padding: 14px 16px; background: var(--hole); color: var(--paper); }
.corrected h3 { font: 400 var(--mid)/1.2 var(--type); }
.corrected p { margin-top: 8px; line-height: 1.38; }
.corrected-when { display: block; font: 400 14px/1.3 var(--num); opacity: .8; }
.watch-note, .retract-note { margin-top: 12px; max-width: 42em; font: 400 21px/1.3 var(--type); }
.todo { margin-top: 16px; padding: 4px 0 4px 16px; border-left: 6px solid var(--ink); }
.todo h3 { font-size: var(--small); font-weight: 600; }
.todo ul { margin-top: 4px; font: 400 clamp(21px, 2vw, 28px)/1.35 var(--type); }
.todo li + li { margin-top: 8px; }
.what-happened { margin-top: 16px; max-width: 44em; font-size: 18px; line-height: 1.5; }
.twofold { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 18px; }
.twofold h3 { font: 400 19px/1.2 var(--type); padding-bottom: 6px; }
.twofold li + li { margin-top: 8px; }
.twofold-yes { padding-top: 10px; border-top: 3px solid var(--ink); }
.twofold-no { padding: 10px 14px 14px; border: 1.5px dashed rgba(18, 18, 17, .5); color: var(--ink-2); }
.src-ref { font: 400 13px/1 var(--num); vertical-align: super; }
.case-facts { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 14px; margin: 16px 0 0; }
.case-facts dt { font-size: var(--small); color: var(--ink-2); }
.case-facts dd { margin: 0; }
.analysis-source { margin-top: 10px; font-size: var(--small); color: var(--ink-2); }
.burn-file { margin-top: 18px; padding: 12px 0 0; border-top: 1px dashed var(--rule); }
.burn-file.is-burned { padding-left: 14px; border-top: 0; border-left: 4px solid var(--ember); }
.burn-file h3 { font: 400 19px/1.2 var(--type); }
.burn-line { margin-top: 4px; max-width: 46em; }
.burn-math { margin-top: 4px; font-size: var(--small); color: var(--ink-2); }
.burn-deadline { margin-top: 6px; font-weight: 600; }
.burn-deadline.is-overdue { background: var(--hole); color: var(--paper); padding: 6px 10px; }
.sources { margin-top: 18px; }
.sources h3 { font: 400 19px/1.2 var(--type); }
.source-list li { display: grid; grid-template-columns: 34px minmax(80px, 150px) 66px 170px minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed var(--rule); scroll-margin-top: 16px; }
.source-list li:target { background: rgba(18, 18, 17, .06); }
.src-id { font: 400 13px/1.3 var(--num); color: var(--ink-2); }
.src-org { font: 400 18px/1.2 var(--type); overflow-wrap: anywhere; }
.src-tier, .src-notes { font-size: 15px; color: var(--ink-2); }
.src-when { font-size: 14px; color: var(--ink-2); }
.source-list .lnk { min-height: 30px; font-size: 15px; }
.is-withdrawn .src-org { text-decoration: line-through; }
.health { margin-top: 36px; padding-top: 18px; border-top: 1.5px solid var(--ink); }
.health-tick { margin-top: 4px; color: var(--ink-2); }
.health-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); column-gap: 26px; margin-top: 10px; }
.health-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 5px 0; border-bottom: 1px dashed var(--rule); font-size: 15px; }
.health-name { overflow-wrap: anywhere; }
.health-status { text-align: right; }
.health-last { grid-column: 1 / -1; font-size: 14px; color: var(--ink-2); }
.health-error .health-status, .health-degraded .health-status { font-weight: 700; }

/* ---------- alerts: paper tape ---------- */
.tape-head { max-width: 980px; margin: 0 auto; }
.tape-telegram { margin-top: 6px; }
.tape {
  position: relative;
  max-width: 980px;
  margin: 26px auto 0;
  padding: 6px 42px;
  background-color: #fbfaf7;
  background-image: radial-gradient(circle at 50% 50%, rgba(18, 18, 17, .28) 3.5px, transparent 4px), radial-gradient(circle at 50% 50%, rgba(18, 18, 17, .28) 3.5px, transparent 4px);
  background-size: 22px 22px, 22px 22px;
  background-position: left 8px top 4px, right 8px top 4px;
  background-repeat: repeat-y, repeat-y;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}
.tape-line { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; padding: 20px 0; border-bottom: 1px dashed var(--rule); }
.tape-line:last-child { border-bottom: 0; }
.tape-when { font-size: 14px; color: var(--ink-2); padding-top: 5px; }
.tape-stop { display: inline-block; background: var(--hole); color: var(--paper); padding: 4px 10px; margin-bottom: 8px; font: 400 clamp(22px, 2.4vw, 34px)/1.15 var(--type); }
.tape-name { font: 400 clamp(26px, 2.8vw, 40px)/1.08 var(--type) !important; }
.tape-text { margin-top: 6px; white-space: pre-line; font: 400 19px/1.36 var(--type); overflow-wrap: anywhere; }
.tape-note { margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.tape-more .lnk { min-height: 34px; }

/* ---------- aim: addressed envelopes ---------- */
.aim-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 40px; }
.aim-top > div:first-child { flex: 1 1 420px; }
.aim-total { max-width: 460px; text-align: right; }
.aim-total-num { font: 500 clamp(44px, 6.1vw, 112px)/1 var(--num); font-variant-numeric: tabular-nums; letter-spacing: -.04em; white-space: nowrap; }
.aim-total-word { font: 400 19px/1.35 var(--type); margin-top: 4px; }
.aim-grid { display: grid; grid-template-columns: minmax(250px, 340px) minmax(0, 1fr); gap: clamp(24px, 5vw, 76px); margin-top: 30px; }
.aim-steps { position: sticky; top: 22px; align-self: start; }
.aim-steps ol { counter-reset: s; margin-top: 8px; }
.aim-steps li { counter-increment: s; position: relative; padding: 10px 0 10px 34px; border-top: 1px dashed var(--rule); font: 400 19px/1.4 var(--type); }
.aim-steps li::before { content: counter(s); position: absolute; left: 0; top: 10px; font: 500 19px/1.3 var(--num); }
.aim-warn { margin-top: 14px; padding: 12px 14px; background: var(--hole); color: var(--paper); font: 400 19px/1.3 var(--type); }
.aim-wallets { margin-top: 12px; font-size: 16px; color: var(--ink-2); }
.envelope { margin-top: 12px; padding: 20px clamp(16px, 2.4vw, 34px) 18px; border: 1.5px solid var(--ink); background: #fbfaf7; }
.envelope.is-leader { border-top-width: 8px; }
.env-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px; }
.env-name { font: 400 clamp(26px, 3vw, 46px)/1.08 var(--type); }
.env-leader { font: 400 18px/1.2 var(--type); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
.env-to { margin-top: 16px; font: 400 18px/1.2 var(--type); }
.env-address { display: block; margin-top: 2px; font: 500 clamp(16px, 1.95vw, 30px)/1.22 var(--num); letter-spacing: -.01em; }
.env-address span { display: inline-block; }
.env-acts { display: flex; flex-wrap: wrap; gap: 0 20px; }
.env-token { margin-top: 12px; }
.env-token-word { display: block; font-size: 15px; color: var(--ink-2); }
.env-token code { font: 400 15px/1.3 var(--num); overflow-wrap: anywhere; }
.env-tally { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--rule); }
.env-tally-num { font: 500 clamp(26px, 2.6vw, 40px)/1.1 var(--num); font-variant-numeric: tabular-nums; }
.env-all { margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.aim-envelopes > h2 { padding-bottom: 2px; }

/* ---------- atlas: typed columns and poster methods ---------- */
.atlas-sum { font: 400 var(--mid)/1.3 var(--type); margin-top: .35em; max-width: 44em; }
.atlas-sum .lnk { min-height: 30px; font-size: 16px; }
.timeline { margin-top: 30px; }
.months { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; align-items: end; margin-top: 10px; border-bottom: 1.5px solid var(--ink); }
.month { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 44px; padding: 6px 1px 6px; background: none; border: 0; cursor: pointer; color: var(--ink); transition: background-color 150ms var(--press); }
.month:hover { background: rgba(18, 18, 17, .06); }
.month:active { background: rgba(18, 18, 17, .12); }
.month.is-on { background: var(--hole); color: var(--paper); }
.month-count { font: 500 15px/1.2 var(--num); }
.month-stack { white-space: pre; font: 400 17px/.82 var(--type); margin: 3px 0 5px; text-align: center; }
.month-label { font: 500 14px/1.2 var(--num); }
.month-total { font: 400 13px/1.3 var(--num); opacity: .8; }
.month-note { margin-top: 8px; font-size: 15px; color: var(--ink-2); }
.methods { margin-top: 36px; }
.method { display: grid; grid-template-columns: minmax(120px, 230px) minmax(0, 1fr); gap: clamp(16px, 4vw, 60px); padding: 26px 0; border-top: 1.5px solid var(--ink); }
.method-count { font: 500 clamp(52px, 6.4vw, 110px)/1 var(--num); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.method-total { font: 400 19px/1.3 var(--num); color: var(--ink-2); }
.method-title { font: 400 clamp(30px, 3.6vw, 58px)/1.04 var(--type); }
.method-plain { margin-top: 10px; max-width: 44em; font-size: 18px; line-height: 1.48; }
.method-protect { margin-top: 10px; max-width: 44em; font-size: 18px; line-height: 1.48; }
.method-protect strong { font-weight: 700; }
.method-largest { margin-top: 12px; max-width: 760px; }
.method-largest li { display: grid; grid-template-columns: minmax(0, 1fr) 96px 76px; column-gap: 12px; align-items: baseline; padding: 4px 0; border-top: 1px dashed var(--rule); }
.ml-name { font: 400 18px/1.2 var(--type); overflow-wrap: anywhere; }
.ml-day { font-size: 14px; color: var(--ink-2); }
.ml-amt { text-align: right; font-weight: 500; }
.p-atlas .ledger { padding-left: 0; padding-right: 0; scroll-margin-top: 10px; }
.p-atlas .row .r { color: var(--ink-2); font-family: var(--body); font-size: 15px; }

/* ---------- scan log: receipt ---------- */
.receipt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); gap: clamp(24px, 6vw, 110px); align-items: start; padding-top: 6px; }
.receipt-why { margin-top: 16px; max-width: 34em; color: var(--ink-2); }
.receipt { padding: 26px clamp(16px, 2.2vw, 32px) 28px; background: #fbfaf7; border: 1px solid var(--rule); }
.receipt-title { padding-bottom: 12px; border-bottom: 1.5px dashed var(--ink); }
.receipt-line { display: flex; align-items: baseline; gap: 8px; padding: 9px 0; }
.rl-name { font: 400 19px/1.2 var(--type); overflow-wrap: anywhere; }
.rl-dots { flex: 1 1 12px; min-width: 12px; border-bottom: 1.5px dotted rgba(18, 18, 17, .4); transform: translateY(-4px); }
.rl-runs { font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.rl-usd { font: 500 16px/1.2 var(--num); white-space: nowrap; }
.is-unnamed .rl-name { color: var(--ink-2); }
.receipt-empty { padding: 14px 0; font: 400 19px/1.3 var(--type); }
.receipt-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding-top: 10px; border-top: 1.5px dashed var(--ink); font: 400 var(--mid)/1.2 var(--type); }
.rt-num { font: 500 clamp(40px, 4.4vw, 64px)/1 var(--num); letter-spacing: -.03em; }
.receipt-cap { margin-top: 12px; font-size: 15px; color: var(--ink-2); }
.receipt-runs { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 16px; margin: 14px 0 0; padding-top: 12px; border-top: 1.5px dashed var(--ink); }
.receipt-runs dt { font-size: 15px; }
.receipt-runs dd { margin: 0; font: 500 15px/1.3 var(--num); text-align: right; }

/* ---------- sealed: hash strips ---------- */
.seals { margin-top: 28px; }
.seal { padding: 20px 0; border-top: 3px double var(--ink); }
.seal:last-child { border-bottom: 3px double var(--ink); }
.seal-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; }
.seal-when { font-size: 15px; color: var(--ink-2); }
.seal-status { font: 400 19px/1.2 var(--type); }
.seal-hash { display: block; margin-top: 8px; font: 500 clamp(15px, 2vw, 32px)/1.24 var(--num); word-break: break-all; }
.seal-acts { display: flex; flex-wrap: wrap; gap: 0 20px; align-items: center; }
.seal-nomemo { font-size: 15px; color: var(--ink-2); }
.seal-facts { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 14px; margin: 10px 0 0; }
.seal-facts dt { font-size: 15px; color: var(--ink-2); }
.seal-facts dd { margin: 0; overflow-wrap: anywhere; }
.seal-facts code { font: 400 14px/1.3 var(--num); }
.seal-report { margin-top: 10px; }
.seal-report summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font: 400 19px/1.2 var(--type); text-decoration: underline; text-underline-offset: .22em; }
.seal-report pre { max-height: 360px; overflow: auto; padding: 12px; background: #fbfaf7; border: 1px solid var(--rule); font: 400 14px/1.4 var(--num); white-space: pre-wrap; word-break: break-word; }
.seal-check { font-size: 15px; overflow-wrap: anywhere; }
.verify { margin-top: 36px; max-width: 760px; }
.verify ol { counter-reset: v; margin-top: 8px; }
.verify li { counter-increment: v; position: relative; padding: 10px 0 10px 34px; border-top: 1px dashed var(--rule); }
.verify li::before { content: counter(v); position: absolute; left: 0; top: 10px; font: 500 17px/1.3 var(--num); }

/* ---------- weekly: the card is the page ---------- */
.week-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 30px; }
.week-range { font: 400 var(--mid)/1.25 var(--type); }
.week-card { margin: 16px 0 0; }
.week-card img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); background: #fbfaf7; }
.week-card.is-missing img { display: none; }
.week-card figcaption { padding: 26px 18px; border: 1.5px dashed rgba(18, 18, 17, .5); font: 400 19px/1.3 var(--type); }
.week-acts { display: flex; flex-wrap: wrap; gap: 0 26px; margin-top: 6px; }
.week-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 76px); margin-top: 24px; }
.week-top { margin-top: 8px; border-top: 1.5px solid var(--ink); }
.week-top li { display: grid; grid-template-columns: 96px minmax(0, 1fr) 84px; column-gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed var(--rule); }
.wt-day { font-size: 14px; color: var(--ink-2); }
.wt-name { font: 400 20px/1.2 var(--type); overflow-wrap: anywhere; }
.wt-amt { grid-column: 3; grid-row: 1; text-align: right; font-weight: 500; }
.wt-method { grid-column: 2; font-size: 15px; color: var(--ink-2); }
.week-methods { margin-top: 8px; border-top: 1.5px solid var(--ink); }
.week-methods li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--rule); }
.wm-n { font-weight: 500; }
.week-methods .typed-bar { grid-column: 1 / -1; }
.week-source { margin-top: 10px; font-size: var(--small); color: var(--ink-2); }

/* ---------- day 1: a typed memo ---------- */
.memo { max-width: 820px; margin: 0 auto; }
.memo-head { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 2px 14px; margin: 18px 0 0; padding-bottom: 12px; border-bottom: 1.5px solid var(--ink); font: 400 19px/1.3 var(--type); }
.memo-head dd { margin: 0; }
.memo-open { margin-top: 18px; font: 400 var(--mid)/1.3 var(--type); }
.memo-lines { margin: 18px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0; }
.memo-lines dt { display: flex; align-items: baseline; padding: 11px 0; font: 400 20px/1.2 var(--type); }
.memo-lines dt::after { content: ""; flex: 1 1 auto; min-width: 16px; margin: 0 10px; border-bottom: 1.5px dotted rgba(18, 18, 17, .42); transform: translateY(-4px); }
.memo-lines dd { margin: 0; padding: 7px 0; font: 500 clamp(24px, 2.6vw, 36px)/1.1 var(--num); text-align: right; font-variant-numeric: tabular-nums; }
.memo-close { margin-top: 18px; padding-top: 12px; border-top: 1.5px solid var(--ink); color: var(--ink-2); }

/* ---------- docs extras ---------- */
.docs-table { width: 100%; max-width: 620px; margin-top: 6px; border-collapse: collapse; }
.docs-table th { padding: 7px 10px 7px 0; text-align: left; font: 400 17px/1.2 var(--type); border-bottom: 1.5px solid var(--ink); vertical-align: bottom; }
.docs-table td { padding: 8px 10px 8px 0; border-bottom: 1px dashed var(--rule); }
.docs-table td.num { font-size: 16px; }
.docs-body table + p { margin-top: .75em; }
.docs-schedule li { display: grid !important; grid-template-columns: 56px minmax(0, 1fr) auto !important; column-gap: 12px; }
.sch-offset { font: 400 15px/1.5 var(--num); color: var(--ink-2); }
.sch-name a { text-underline-offset: .2em; }
.sch-when { font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.hash-box { margin-top: 10px; }
.hash-copy { margin-top: 2px; }
.hash-word { margin-top: 8px; font-size: 15px; color: var(--ink-2); }
.docs-body .docs-cmd { margin: 8px 0 0; padding: 12px; background: #fbfaf7; border: 1px solid var(--rule); font: 400 14px/1.45 var(--num); white-space: pre-wrap; word-break: break-all; }
.hash-val { display: block; font: 500 16px/1.3 var(--num); word-break: break-all; }
.hash-memo .lnk { min-height: 34px; }
.hash-out { font-size: 15px; overflow-wrap: anywhere; min-height: 1.4em; }

@media (max-width: 720px) {
  .lang { right: calc(14px + 72px); margin-top: 11px; font-size: 16px; padding: 0 6px; }
  .menu { padding: 88px var(--gutter) 24px; justify-content: flex-start; overflow-y: auto; }
  .menu-item { gap: 12px; }
  .chrome-head { padding-right: 160px; min-height: 74px; }
  .big { font-size: 15.4vw; }
  .docs h1 { font-size: 13vw; }
  .poster .live-row { grid-column: 1 / -1; grid-row: 4; }
  .poster .paste { grid-row: 5; }
  .live-row { gap: 0 12px; font-size: 14px; }
  .live-next { font-size: 13px; }
  .board .reading .fine { max-width: none; margin-left: 0 !important; }
  .reading { grid-template-columns: auto minmax(0, 1fr); }
  .reading .val { font-size: 11.6vw; }
  .reading .fine { font-size: 14px; }
  .sheet-top { display: flex; flex-direction: column; }
  #paperBoard { order: 1; }
  .sheet-top .brim-bar { order: 2; display: block; padding: 6px var(--gutter) 0; }
  .sheet-top .brim-line { order: 3; }
  .sheet-top .readings { order: 4; }
  .sheet-top .brim-bar[hidden] { display: none; }
  .brim-bar-row { display: block; font: 400 13.5px/1 var(--type); letter-spacing: .02em; white-space: nowrap; overflow: hidden; }
  .brim-bar-row b { font-weight: 400; }
  .brim-bar-row i { font-style: normal; color: var(--ember-type); }
  .stmt-row { grid-template-columns: auto minmax(0, 1fr); row-gap: 2px; column-gap: 12px; }
  .stmt dt { grid-column: 1 / -1; }
  .stmt-val { text-align: left; }
  .addr-row { grid-template-columns: minmax(0, 1fr); padding: 10px 0; }
  .addr-acts { gap: 18px; }
  .desk-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; }
  .docket { position: static; }
  .docket:not(:empty) { padding-bottom: 8px; }
  .docket ul { display: flex; flex-wrap: wrap; gap: 0 16px; }
  .docket li a { min-height: 44px; display: inline-flex; align-items: center; }
  .case { padding-left: 38px; }
  .punch { left: 0; width: 24px; height: 24px; }
  .twofold { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .case-facts { grid-template-columns: minmax(0, 1fr); }
  .source-list li { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .src-when, .src-notes { grid-column: 2 / -1; }
  .src-tier { grid-column: 3; grid-row: 1; }
  .source-list .lnk { grid-column: 2 / -1; min-height: 44px; }
  .health-list { grid-template-columns: minmax(0, 1fr); }
  .tape { padding: 4px 28px; background-position: left 4px top 4px, right 4px top 4px; }
  .tape-line { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 16px 0; }
  .tape-when { padding-top: 0; }
  .aim-total { text-align: left; }
  .aim-total-num { font-size: 13vw; }
  .aim-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .aim-steps { position: static; }
  .env-address { font-size: 4.6vw; }
  .method { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 20px 0; }
  .method-nums { display: flex; align-items: baseline; gap: 12px; }
  .method-largest li { grid-template-columns: minmax(0, 1fr) 70px; }
  .ml-day { grid-column: 1; grid-row: 2; }
  .ml-amt { grid-column: 2; grid-row: 1; }
  .month-total { display: none; }
  .month-stack { font-size: 14px; }
  .month-count, .month-label { font-size: 13px; }
  .receipt-grid { grid-template-columns: minmax(0, 1fr); }
  .receipt-line { flex-wrap: wrap; }
  .rl-name { flex: 1 1 100%; }
  .week-grid { grid-template-columns: minmax(0, 1fr); }
  .week-top li { grid-template-columns: minmax(0, 1fr) 76px; }
  .wt-day { grid-column: 1 / -1; }
  .wt-name { grid-column: 1; grid-row: 2; }
  .wt-amt { grid-column: 2; grid-row: 2; }
  .wt-method { grid-column: 1 / -1; grid-row: 3; }
  .memo-lines dt { font-size: 18px; padding-right: 0; }
  .docs-schedule li { grid-template-columns: 44px minmax(0, 1fr) !important; }
  .sch-when { grid-column: 2; white-space: normal; }
  .settle { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}