/* The steward's room. One stylesheet for the home page, the privacy notice, the guide and the
   small pages. Every colour is a role token defined twice: limewash by day, prussian by night.

   Motif discipline, which the rules below keep:
   - manila is for paper things only: the slips, citation tags, label holders on the rack and
     the book, and the one highlighted fact about where data sits;
   - red thread is only for links (the rack's threads, the book's arrows, text links, receipts,
     citations) and for form errors;
   - no gradients, no glow, no soft drop shadows on cards; only the rack casts a shadow, because
     it is furniture standing off the wall. */

:root {
  color-scheme: light dark;

  --ground: #E8EEEF;         /* limewash: the wall above stairs */
  --paper: #F6F8F9;          /* cards, sheets, the book */
  --below: #A8C1CB;          /* distemper: the wall below stairs */
  --ink: #14253A;            /* prussian: text and rules */
  --muted: #4A5864;          /* graphite: secondary text */
  --panel: #14253A;          /* painted woodwork: the rack, the book's head, dark sheets */
  --panel-deep: #0B1520;
  --panel-face: #2F3F53;
  --on-panel: #E8EEEF;
  --on-panel-muted: #C4CFD6;
  --manila: #E6C98F;
  --on-manila: #14253A;
  --card: #F6F8F9;           /* the person cards in the rack stay white in both schemes */
  --thread: #A8322C;
  --thread-on-panel: #CB6A62;
  --nickel: #AAB4BA;
  --tint: #F1E6CE;           /* a manila wash for the one "next" panel and the recommended rung */
  --field: #FFFFFF;
  --btn-bg: #14253A;
  --btn-fg: #E8EEEF;
  --btn-hover: #0B1520;
  --slip-line: #CFC7AE;
  --rack-shadow: rgba(20, 37, 58, .7);

  --rule: color-mix(in srgb, var(--ink) 16%, var(--ground));
  --rule-strong: color-mix(in srgb, var(--ink) 55%, var(--ground));
  --focus: var(--ink);

  --f-display: "Besley", "Clarendon", "Rockwell", Georgia, serif;
  --f-body: "Libre Franklin", "Franklin Gothic Book", "Helvetica Neue", Arial, sans-serif;
  /* Every rule that sets the mono face also turns its ligatures off: they draw "--help" with a
     dash and "->" as an arrow, which a reader copying a command would type wrong. */
  --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --gutter: clamp(16px, 4vw, 44px);
  --maxw: 1220px;
  --band-pad: clamp(3.75rem, 2.5rem + 4.5vw, 6.5rem);
  --head-gap: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  --topbar-h: 64px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0E1824;
    --paper: #15243A;
    --below: #1B3346;
    --ink: #E3EAEC;
    --muted: #A3B3BE;
    --panel: #1C3149;
    --panel-deep: #070E17;
    --panel-face: #2E4764;
    --on-panel: #E3EAEC;
    --on-panel-muted: #B4C2CC;
    --manila: #D9BC82;
    --on-manila: #14253A;
    --card: #DCE3E6;
    --thread: #E0675D;
    --thread-on-panel: #E77B71;
    --nickel: #7D8C98;
    --tint: #243044;
    --field: #0B141F;
    --btn-bg: #E3EAEC;
    --btn-fg: #14253A;
    --btn-hover: #FFFFFF;
    --slip-line: #C2AC7B;
    --rack-shadow: rgba(0, 0, 0, .75);
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + 12px);
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, pre { margin: 0; }
ul, ol { padding: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
b, strong { font-weight: 650; }
em { font-style: italic; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
main:focus { outline: none; }

.skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: .7rem 1rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 700;
  text-decoration: none;
  border-radius: 3px;
}
.skip:focus { top: 12px; outline-color: var(--manila); }

.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Type roles ---------- */
.display {
  font-family: var(--f-display);
  font-weight: 750;
  font-size: clamp(2.2rem, 1rem + 3.1vw, 3.45rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.display em { font-weight: 600; letter-spacing: -0.016em; }

.h2 {
  font-family: var(--f-display);
  font-weight: 750;
  font-size: clamp(1.85rem, 1.2rem + 2.2vw, 2.95rem);
  line-height: 1.07;
  letter-spacing: -0.02em;
  max-width: 21ch;
  text-wrap: balance;
}

.lede, .body-lg {
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem);
  line-height: 1.58;
  max-width: 36em;
}

.intro { max-width: 34em; }
.intro--strong {
  font-family: var(--f-display);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(1.2rem, 1rem + .7vw, 1.5rem);
  line-height: 1.3;
}

.caption {
  font-size: .9rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 64ch;
}

.footnote {
  font-size: .92rem;
  color: var(--muted);
  padding-left: 1rem;
  border-left: 2px solid var(--rule-strong);
  max-width: 34em;
}

/* Small capitals: section eyebrows and the few labels that name a thing. Sentence case
   everywhere else. */
.eyebrow {
  margin-bottom: 1rem;
  font-family: var(--f-body);
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.subhead {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.4rem;
  font-family: var(--f-body);
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.subhead::after {
  content: "";
  flex: 1;
  height: 2px;
  background: currentColor;
  opacity: .28;
}

/* A label holder: a manila card in a nickel frame. Only on the rack and the book, the two
   pieces of furniture on the page. */
.holder {
  display: inline-block;
  max-width: 100%;
  padding: 4px 8px 3px;
  font-family: var(--f-body);
  font-size: clamp(.55rem, .45rem + .3vw, .66rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  color: var(--on-manila);
  background: var(--manila);
  border: 2px solid var(--nickel);
  border-radius: 2px;
}

/* The name, taught in one line, set like a dictionary entry: the word in the display face, its
   plain respelling in the mono face (capitals mark the stressed syllable, so no case change),
   then the meaning in quiet text. Once near the hero, once in the footer by the wordmark. */
.gloss {
  max-width: 34em;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--muted);
}
.gloss__word {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.1em;
  color: var(--ink);
}
.gloss__say {
  margin-inline: .5em .55em;
  font-family: var(--f-mono);
  font-variant-ligatures: none;
  font-size: .92em;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.gloss__say:first-child { margin-left: 0; }
.hero .gloss { margin-top: 1.6rem; }
/* In the footer the wordmark above is the headword, so the line starts at the respelling. */
.footer .gloss { max-width: none; }
.footer .gloss__word, .footer .gloss__say { color: var(--on-panel); }

/* ---------- Links and buttons ---------- */
/* Every link inside running text is tied with the red thread. */
.quiet-link, .prose a, .privacy-note a, .legal a {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .26em;
  text-decoration-color: var(--thread);
}
.quiet-link:hover, .prose a:hover, .privacy-note a:hover, .legal a:hover { text-decoration-thickness: 3px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .8rem 1.3rem;
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--ink { background: var(--btn-bg); color: var(--btn-fg); }
.btn--ink:hover { background: var(--btn-hover); }

/* The hero's action is a request slip: manila, ruled in prussian, set apart from the painted
   rack beside it. */
.btn--slip {
  min-height: 54px;
  padding: .85rem 1.5rem;
  font-size: 1.06rem;
  color: var(--on-manila);
  background: var(--manila);
  border-color: var(--on-manila);
}
.btn--slip:hover { background: color-mix(in srgb, var(--manila) 82%, #14253A); }
.btn--small { min-height: 42px; padding: .55rem 1rem; font-size: .92rem; white-space: nowrap; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .7; cursor: progress; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ground) 94%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.topbar__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--topbar-h);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}
/* A four-hole rack in miniature, drawn with hard-stop fills. */
.wordmark__mark {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 3px;
  background:
    linear-gradient(#E6C98F, #E6C98F) 4px 5px / 5px 5px no-repeat,
    linear-gradient(#E6C98F, #E6C98F) 13px 7px / 5px 3px no-repeat,
    linear-gradient(#E6C98F, #E6C98F) 4px 15px / 5px 3px no-repeat,
    linear-gradient(#0B1520, #0B1520) 3px 3px / 7px 7px no-repeat,
    linear-gradient(#0B1520, #0B1520) 12px 3px / 7px 7px no-repeat,
    linear-gradient(#0B1520, #0B1520) 3px 12px / 7px 7px no-repeat,
    linear-gradient(#0B1520, #0B1520) 12px 12px / 7px 7px no-repeat,
    #1C3149;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 30%, transparent);
}
.wordmark--footer { color: var(--on-panel); }

.menu {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.nav ul {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}
.nav a {
  display: inline-block;
  white-space: nowrap;
  padding: .5rem 0;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--thread); }

.menu-toggle {
  display: none;
  min-height: 44px;
  padding: .5rem .95rem;
  font: 700 .74rem/1 var(--f-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: 3px;
  cursor: pointer;
}

@media (max-width: 999.98px) {
  html:not(.js) .topbar { position: relative; }
  .topbar__inner { flex-wrap: wrap; gap: .5rem 1rem; padding-block: .6rem; }
  .menu { flex-wrap: wrap; gap: .5rem 1.25rem; width: 100%; }
  .nav ul { flex-wrap: wrap; gap: .1rem 1.1rem; }
  .js .menu-toggle { display: inline-flex; align-items: center; }
  .js .topbar__inner { flex-wrap: nowrap; padding-block: 0; }
  .js .menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 1rem var(--gutter) 1.4rem;
    background: var(--ground);
    border-bottom: 2px solid var(--ink);
  }
  .js .menu.is-open { display: flex; }
  .js .nav ul { flex-direction: column; gap: 0; }
  .js .nav a { display: block; padding: .8rem 0; border-bottom: 1px solid var(--rule); }
}

/* ---------- Bands (section spacing lives here and only here) ---------- */
.band { padding-block: var(--band-pad); }
.band--ground { background: var(--ground); }
.band--paper { background: var(--paper); }
.band--below {
  --muted: color-mix(in srgb, var(--ink) 80%, var(--below));
  background: var(--below);
}
.band--panel {
  --focus: var(--manila);
  --muted: var(--on-panel-muted);
  background: var(--panel);
  color: var(--on-panel);
}

.sechead { margin-bottom: var(--head-gap); }
.sechead--split {
  display: grid;
  gap: 1.25rem 3rem;
  align-items: end;
}
@media (min-width: 900px) {
  .sechead--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .sechead--split .intro { padding-bottom: .35rem; }
}

/* ---------- Hero ---------- */
.hero {
  padding-top: clamp(1.75rem, 1rem + 2.4vw, 2.75rem);
  padding-bottom: clamp(2rem, 3.5vw, 2.75rem);
}
.hero__grid {
  display: grid;
  gap: 1.5rem clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.hero__copy .lede { margin-bottom: 1.75rem; }
@media (max-width: 559.98px) {
  .hero__copy .lede { font-size: 1rem; line-height: 1.55; margin-bottom: 1.25rem; }
  .actions { gap: .75rem 1.25rem; }
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
}
@media (min-width: 960px) {
  .hero__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "head head" "copy rack";
    row-gap: clamp(1.75rem, 3vw, 2.5rem);
  }
  .hero__head { grid-area: head; }
  .hero__copy { grid-area: copy; align-self: center; }
  .display em { display: block; }
  .rack { grid-area: rack; }
}

/* The rack: the signature. A painted pigeonhole rack with fixed geometry, so nothing that
   moves inside it can move the page. */
.rack {
  position: relative;
  width: 100%;
  max-width: 720px;
  justify-self: end;
  margin-top: 14px;
  margin-bottom: 9px;
  padding: clamp(10px, 1.3vw, 16px);
  background: var(--panel);
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 var(--panel-face),
    0 3px 0 var(--panel-deep),
    0 30px 44px -30px var(--rack-shadow);
}
.rack::before {
  /* cornice */
  content: "";
  position: absolute;
  left: -9px;
  right: -9px;
  top: -14px;
  height: 16px;
  background: var(--panel);
  border-radius: 3px 3px 1px 1px;
  box-shadow: inset 0 2px 0 var(--panel-face), inset 0 -3px 0 var(--panel-deep);
}
.rack::after {
  /* plinth */
  content: "";
  position: absolute;
  left: -5px;
  right: -5px;
  bottom: -9px;
  height: 9px;
  background: var(--panel-deep);
  border-radius: 0 0 2px 2px;
}
.rack__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 12px);
}
.hole { display: flex; flex-direction: column; min-width: 0; }
.hole__mouth {
  position: relative;
  aspect-ratio: 1 / .64;
  overflow: hidden;
  background: var(--panel-deep);
  border-radius: 2px;
  box-shadow:
    inset 0 14px 18px -10px rgba(0, 0, 0, .75),
    inset 10px 0 14px -12px rgba(0, 0, 0, .7),
    inset -1px 0 0 color-mix(in srgb, var(--panel-face) 60%, transparent);
}
.hole__lip {
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

.slip {
  --d: 0;
  --lift: 0;
  position: absolute;
  z-index: calc(10 - var(--d));
  left: 11%;
  right: 11%;
  bottom: calc(8% + var(--d) * 6px);
  height: 66%;
  padding: 8% 9% 0;
  border-radius: 2px;
  background:
    repeating-linear-gradient(to bottom, transparent 0 11px, var(--slip-line) 11px 12px) 0 calc(100% - 4px) / 100% 40% no-repeat,
    var(--manila);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    0 2px 5px rgba(0, 0, 0, .45);
  filter: brightness(calc(1 - var(--d) * .09));
  transform: translate(calc(var(--d) * 1.5px), calc(var(--lift) * -38%)) rotate(calc(var(--d) * -.7deg));
  transition: bottom .5s ease, transform .5s cubic-bezier(.3, .7, .2, 1), filter .5s ease, opacity .45s ease, visibility 0s;
}
.slip[data-d="1"] { --d: 1; }
.slip[data-d="2"] { --d: 2; }
.slip__t {
  display: block;
  font-family: var(--f-mono);
  font-variant-ligatures: none;
  font-size: clamp(9.5px, .3rem + .45vw, 12.5px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--on-manila);
  overflow-wrap: anywhere;
}
/* A slip behind another shows only its edge. Writing shows only on the slip in front; a lifted
   slip comes to the front, and while it is out every other slip in that hole hides its writing.
   Writing appears and disappears at once rather than fading, so no frame shows a line of text
   cut through by the edge of another slip. */
.slip:not(.is-lifted) .slip__t { opacity: calc(1 - min(var(--d), 1)); }
.hole__mouth:has(.is-lifted) .slip:not(.is-lifted) .slip__t { opacity: 0; }
.slip.is-out { opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s .45s; }
.slip.is-lifted { --lift: 1; filter: brightness(1.04); z-index: 12; }
.slip--person { background: var(--card); }
.slip--person .slip__t { font-family: var(--f-display); font-weight: 700; font-size: clamp(10.5px, .35rem + .48vw, 14px); }
.slip--skip .slip__t { text-decoration: line-through; text-decoration-thickness: 2px; }

.hole--boarded .hole__mouth {
  background:
    radial-gradient(circle, var(--nickel) 0 1.6px, transparent 2.2px) 12% 16% / 100% 33.34% repeat-y,
    radial-gradient(circle, var(--nickel) 0 1.6px, transparent 2.2px) 88% 16% / 100% 33.34% repeat-y,
    repeating-linear-gradient(to bottom, var(--panel-face) 0 calc(33.34% - 2px), var(--panel-deep) calc(33.34% - 2px) 33.34%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}
.board-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--f-body);
  font-size: clamp(.55rem, .45rem + .25vw, .64rem);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--on-panel-muted);
}

/* On a phone the four boarded holes fold into one boarded strip. */
.rack__later { display: none; }

.rack__threads {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 20;
}
/* The thread runs only along the gaps between holes and in through the side of a hole's mouth
   (see route() in script.js), so it can sit above everything without crossing any writing. */
.rack__threads path {
  fill: none;
  stroke: var(--thread-on-panel);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rack__threads circle { fill: var(--thread-on-panel); }

@keyframes file-in {
  from { opacity: 0; transform: translate(0, -34%) scale(1.08) rotate(1.5deg); }
  to { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); }
}
@keyframes skip-out {
  0% { opacity: 0; transform: translate(0, -34%) scale(1.08); }
  30% { opacity: 1; transform: translate(0, -10%) scale(1); }
  62% { opacity: 1; transform: translate(0, -10%) rotate(-3deg); }
  100% { opacity: 0; transform: translate(135%, -28%) rotate(14deg); }
}
.slip.is-entering { animation: file-in .75s cubic-bezier(.2, .75, .2, 1) backwards; }
.slip.is-skipping { animation: skip-out 1.6s ease-in-out both; }

@media (max-width: 559.98px) {
  .rack { max-width: 440px; justify-self: center; }
  .rack__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hole--boarded { display: none; }
  .hole__mouth { aspect-ratio: 1 / .62; }
  .slip { left: 12%; right: 12%; }
  .slip__t { font-size: 11px; }
  .slip--person .slip__t { font-size: 12px; }
  .holder { font-size: .62rem; }
  .rack__later {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .2rem .7rem;
    margin-top: 10px;
    min-height: 46px;
    padding: .45rem .75rem;
    text-align: center;
    background:
      radial-gradient(circle, var(--nickel) 0 1.6px, transparent 2.2px) 10px 50% / 12px 100% no-repeat,
      radial-gradient(circle, var(--nickel) 0 1.6px, transparent 2.2px) calc(100% - 10px) 50% / 12px 100% no-repeat,
      repeating-linear-gradient(to bottom, var(--panel-face) 0 21px, var(--panel-deep) 21px 23px);
    border-radius: 2px;
  }
  .rack__later-mark, .rack__later-list {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--on-panel);
  }
  .rack__later-mark { color: var(--on-panel-muted); }
}
@media (min-width: 560px) and (max-width: 959.98px) {
  .rack { max-width: 720px; justify-self: center; }
}

/* The household book */
.book {
  --book-cols: 3.6rem 6.2rem minmax(0, 1.25fr) minmax(0, 1fr);
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}
.book__head {
  --focus: var(--manila);
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem clamp(.9rem, 2vw, 1.4rem);
  background: var(--panel);
}
.holder--book { font-size: .68rem; padding: 5px 10px 4px; }
.book-toggle {
  min-height: 34px;
  padding: .35rem .8rem;
  font: 700 .7rem/1 var(--f-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-panel);
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--on-panel) 55%, transparent);
  border-radius: 3px;
  cursor: pointer;
}
.book-toggle:hover { border-color: var(--on-panel); }

.book__cols, .entry {
  display: grid;
  grid-template-columns: var(--book-cols);
  column-gap: clamp(.8rem, 1.6vw, 1.5rem);
  padding-inline: clamp(.9rem, 2vw, 1.4rem);
}
.book__cols {
  padding-top: .75rem;
  padding-bottom: .5rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 3px double var(--rule-strong);
}
.book__window {
  position: relative;
  overflow: hidden;
  height: calc(5 * 2.4rem + .3rem);
}
.book__lines {
  list-style: none;
  transition: transform .6s cubic-bezier(.3, .7, .2, 1);
}
.entry {
  position: relative;
  align-items: baseline;
  height: 2.4rem;
  padding-top: .58rem;
  font-family: var(--f-mono);
  font-variant-ligatures: none;
  font-size: .84rem;
  line-height: 1.4;
  white-space: nowrap;
  border-bottom: 1px solid var(--rule);
}
.entry > span {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  opacity: 0;
  transition: opacity .5s ease;
}
.entry.is-written > span { opacity: 1; }
.entry__time { color: var(--muted); }
.entry__src {
  font-family: var(--f-body);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.entry__to::before {
  content: "\2192\00a0";
  color: var(--thread);
  font-weight: 500;
}
.entry__to--muted { color: var(--muted); font-style: italic; }
@keyframes ink {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
.entry.is-inking > span { animation: ink .55s cubic-bezier(.4, .1, .3, 1) backwards; }
.entry.is-inking > span:nth-child(2) { animation-delay: .12s; }
.entry.is-inking > span:nth-child(3) { animation-delay: .24s; animation-duration: .8s; }
.entry.is-inking > span:nth-child(4) { animation-delay: .75s; animation-duration: .7s; }
.book.is-resetting .entry > span { opacity: 0; }

.hero__caption { margin-top: .9rem; }

@media (max-width: 719.98px) {
  .book__cols { display: none; }
  .book__window { height: calc(3 * 5.1rem); }
  .entry {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "time src" "what what" "to to";
    column-gap: .8rem;
    row-gap: .1rem;
    align-content: start;
    height: 5.1rem;
    padding-top: .6rem;
    font-size: .78rem;
    line-height: 1.35;
    white-space: normal;
  }
  .entry > span { overflow: visible; text-overflow: clip; }
  .entry__time { grid-area: time; }
  .entry__src { grid-area: src; align-self: center; }
  .entry__what { grid-area: what; }
  .entry__to { grid-area: to; }
}

/* ---------- How it works: above stairs, the stairs, below stairs ---------- */
.how { background: var(--ground); }
.above { padding-top: clamp(2.75rem, 2rem + 3vw, 4.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.above__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
@media (min-width: 960px) {
  .above__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.duties { display: grid; gap: 1.5rem 2.5rem; }
.duty dt {
  font-family: var(--f-display);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.duty dd { margin-top: .35rem; max-width: 32em; }
@media (min-width: 600px) {
  .duties--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duties--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
  .duties--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem 1.75rem; }
}

.askcard {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--ink);
  border-radius: 2px 2px 3px 3px;
}
.askcard__row {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: .9rem;
  align-items: start;
}
.askcard__row + .askcard__row { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.askcard__mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.askcard__mark--a { background: var(--ink); color: var(--paper); }
.askcard__q { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; line-height: 1.3; padding-top: .15rem; }
.askcard__a { line-height: 1.55; }
.askcard__sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem .6rem;
  margin-top: 1.3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}
.askcard__label {
  margin-right: .2rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* A citation tag: manila, an eyelet, red thread. */
.tag {
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding: .3rem .6rem .3rem 1.35rem;
  font-family: var(--f-mono);
  font-variant-ligatures: none;
  font-size: .76rem;
  line-height: 1.3;
  color: var(--on-manila);
  background: var(--manila);
  clip-path: polygon(.55rem 0, 100% 0, 100% 100%, .55rem 100%, 0 50%);
}
.tag::before {
  content: "";
  position: absolute;
  left: .55rem;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 2px var(--thread);
}

.stairs { background: var(--ground); line-height: 0; }
.stairs svg {
  width: 100%;
  height: clamp(52px, 7.5vw, 104px);
  overflow: visible;
}
.stairs__fill { fill: var(--below); }
.stairs__edge { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: miter; }

.below {
  --muted: color-mix(in srgb, var(--ink) 80%, var(--below));
  background: var(--below);
  padding-bottom: var(--band-pad);
}
.stairs__rule {
  max-width: 24ch;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
  padding-top: 1.25rem;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 650;
  font-size: clamp(1.35rem, 1rem + 1.3vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
@media (min-width: 900px) {
  .stairs__rule {
    position: relative;
    margin-top: calc(-1 * clamp(52px, 7.5vw, 104px));
    padding-top: 1.1rem;
    max-width: min(24ch, calc(45vw - max(var(--gutter), (100vw - var(--maxw)) / 2) - 2rem));
  }
}

/* ---------- People ---------- */
.people__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.people__copy .h2 { margin-bottom: 1.5rem; }
.people__copy .body-lg { margin-bottom: 1.5rem; }
@media (min-width: 1000px) {
  .people__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.assembly-fig .caption { margin-top: 1rem; }
.assembly {
  --gap: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--gap);
  align-items: start;
}
.frags { display: grid; gap: .8rem; }
.frag {
  --i: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .25rem .6rem;
  padding: .7rem 2rem .75rem .9rem;
  color: var(--on-manila);
  background: var(--manila);
  border-radius: 2px;
  transition: transform .8s cubic-bezier(.2, .75, .2, 1), opacity .6s ease;
  transition-delay: calc(var(--i) * 110ms);
}
.frag:nth-child(2) { --i: 1; }
.frag:nth-child(3) { --i: 2; }
.frag:nth-child(4) { --i: 3; }
.frag:nth-child(5) { --i: 4; }
.frag::before {
  /* the eyelet the thread runs through */
  content: "";
  position: absolute;
  right: .6rem;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--ground);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--on-manila) 45%, var(--manila));
}
.frag__plate {
  grid-column: 1;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.frag__text {
  grid-column: 1 / -1;
  font-family: var(--f-mono);
  font-variant-ligatures: none;
  font-size: .78rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.frag--joined::before { box-shadow: 0 0 0 2px var(--thread); }
.frag--joined::after {
  /* the thread, from the eyelet to the card */
  content: "";
  position: absolute;
  left: calc(100% - .6rem - 3.5px);
  top: 50%;
  width: calc(var(--gap) + .6rem + 3.5px);
  height: 2px;
  margin-top: -1px;
  background: var(--thread);
  transform-origin: left center;
  transition: transform .7s cubic-bezier(.3, .7, .2, 1);
  transition-delay: calc(400ms + var(--i) * 160ms);
}
.frag--later {
  color: var(--muted);
  background: transparent;
  border: 1.5px dashed var(--rule-strong);
}
.frag--later::before { background: transparent; box-shadow: 0 0 0 1.5px var(--rule-strong); }
.frag--later::after {
  /* a loose end: nothing to tie it to yet */
  content: "";
  position: absolute;
  left: calc(100% - .6rem + 3.5px);
  top: 50%;
  width: 1.5rem;
  height: 0;
  border-top: 2px dashed var(--rule-strong);
  margin-top: -1px;
}
.later-tag {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  padding: .16rem .4rem .12rem;
  font-size: .58rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
}

.pcard {
  position: relative;
  padding: 1.35rem 1.35rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 5px solid var(--ink);
  border-radius: 2px 3px 3px 2px;
  transition: transform .8s cubic-bezier(.2, .75, .2, 1), opacity .6s ease;
}
.pcard__name {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.pcard__addr {
  margin-top: .45rem;
  font-family: var(--f-mono);
  font-variant-ligatures: none;
  font-size: .76rem;
  line-height: 1.5;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.pcard__plate {
  margin-top: 1.1rem;
  padding-bottom: .45rem;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: 3px double var(--rule-strong);
}
.pcard__receipts { list-style: none; }
.pcard__receipts li {
  display: grid;
  grid-template-columns: 4.3rem minmax(0, 1fr) auto;
  gap: .5rem;
  align-items: baseline;
  padding: .55rem 0;
  font-family: var(--f-mono);
  font-variant-ligatures: none;
  font-size: .76rem;
  border-bottom: 1px solid var(--rule);
  transition: opacity .5s ease;
}
.pcard__receipts li:nth-child(1) { transition-delay: .9s; }
.pcard__receipts li:nth-child(2) { transition-delay: 1.06s; }
.pcard__receipts li:nth-child(3) { transition-delay: 1.22s; }
.pcard__receipts li:last-child { border-bottom: 0; }
.r-src {
  font-family: var(--f-body);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.r-title {
  text-decoration: underline;
  text-decoration-color: var(--thread);
  text-decoration-thickness: 2px;
  text-underline-offset: .25em;
}
.r-date { color: var(--muted); }

/* Only the fragments that join move; the LATER fragments are in place from the first frame, so
   no frame of the assembly suggests messages or chat will join. */
.assembly.is-waiting .frag--joined { opacity: 0; transform: translateY(calc(14px + var(--i) * 8px)); }
.assembly.is-waiting .frag--joined::after { transform: scaleX(0); }
.assembly.is-waiting .pcard { opacity: 0; transform: translateY(16px); }
.assembly.is-waiting .pcard__receipts li { opacity: 0; }

@media (max-width: 699.98px) {
  .assembly { grid-template-columns: minmax(0, 1fr); row-gap: 1rem; }
  .frags { display: contents; }
  .frag { padding: .7rem .9rem .75rem 1.6rem; }
  .frag::before { right: auto; left: .6rem; }
  .frag--joined { order: 1; }
  .pcard { order: 2; }
  .frag--later { order: 3; }
  .frag--joined::after {
    left: calc(.6rem + 2.5px);
    top: 50%;
    width: 2px;
    height: calc(50% + 1rem + 2px);
    margin-top: 0;
    transform-origin: top center;
  }
  .frag--joined + .frag--joined::before { box-shadow: 0 0 0 2px var(--thread); }
  .frag--later::after { display: none; }
  .assembly.is-waiting .frag--joined::after { transform: scaleY(0); }
}

/* ---------- Models: four doors and the one switch ---------- */
.localonly {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .6rem 1.25rem;
  align-items: center;
  padding: 1rem 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule-strong);
}
.localonly__control { display: flex; align-items: center; gap: .7rem; }
.localonly__label {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.localonly__text { max-width: 44em; font-size: .98rem; line-height: 1.5; }
@media (max-width: 599.98px) {
  .localonly { grid-template-columns: minmax(0, 1fr); }
}

.lo-switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 3rem;
  height: 1.65rem;
  margin: 0;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 3px;
  cursor: pointer;
  transition: background-color .2s ease;
}
.lo-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(1.65rem - 10px);
  height: calc(1.65rem - 10px);
  border-radius: 1px;
  background: var(--ink);
  transition: transform .2s ease, background-color .2s ease;
}
.lo-switch:checked { background: var(--ink); }
.lo-switch:checked::after { transform: translateX(1.35rem); background: var(--paper); }

/* The doors are a register, one row each, not a row of cards. */
.doors { list-style: none; }
.door {
  display: grid;
  gap: .55rem 2.5rem;
  padding: 1.25rem 0 1.35rem;
  border-bottom: 1px solid var(--rule-strong);
  transition: opacity .3s ease, background-color .3s ease, color .3s ease, padding .3s ease;
}
@media (min-width: 900px) {
  .door {
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
    padding: 1.4rem 1.1rem 1.5rem;
  }
}
.door__head { display: grid; gap: .4rem; align-content: start; }
.door__name {
  font-family: var(--f-body);
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.door__line {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.2;
}
.door__text { font-size: .98rem; line-height: 1.55; max-width: 34em; }
.door__aside { display: grid; gap: .6rem; align-content: start; }
.door__fine { font-size: .86rem; line-height: 1.45; color: var(--muted); }
.door__state {
  display: none;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.models:has(#local-only:checked) .door--hosted { opacity: .45; }
.models:has(#local-only:checked) .door__state { display: block; }
.models:has(#local-only:checked) .door--local {
  --muted: var(--on-panel-muted);
  padding-inline: 1.1rem;
  background: var(--panel);
  color: var(--on-panel);
  box-shadow: inset 4px 0 0 var(--ink);
}

.rules {
  display: grid;
  gap: 1.25rem 2.25rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}
@media (min-width: 760px) { .rules { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rule dt {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.rule dd { margin-top: .4rem; font-size: .98rem; line-height: 1.55; }

.exposure {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  max-width: 44em;
  padding: .2rem 0 .2rem 1.2rem;
  border-left: 4px solid var(--ink);
  font-weight: 500;
}

/* ---------- Plain files ---------- */
.files__grid {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}
@media (min-width: 960px) { .files__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.files__side { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); min-width: 0; }
.files__body { display: grid; gap: 1rem; }
.files__body p { max-width: 36em; }

.sheet {
  position: relative;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.sheet--tree {
  --focus: var(--manila);
  background: var(--panel);
  color: var(--on-panel);
  border-color: var(--panel);
}
.sheet--note { margin-top: 1.4rem; border-top-left-radius: 0; }
.sheet__tab {
  position: absolute;
  left: -1px;
  bottom: 100%;
  max-width: 100%;
  padding: .45rem .85rem .35rem;
  font-family: var(--f-mono);
  font-variant-ligatures: none;
  font-size: .76rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--on-manila);
  background: var(--manila);
  border-radius: 3px 3px 0 0;
}
.sheet .caption { padding: 0 clamp(1rem, 2vw, 1.5rem) 1.1rem; }
.mono {
  display: block;
  padding: clamp(1rem, 2vw, 1.5rem);
  font-family: var(--f-mono);
  font-variant-ligatures: none;
  font-size: .82rem;
  line-height: 1.7;
  overflow-x: auto;
  tab-size: 2;
}
.mono b { font-weight: 500; color: var(--ink); }
.sheet--tree .mono { font-size: .8rem; }
.tree--narrow { display: none; }
@media (max-width: 599.98px) {
  .tree--wide { display: none; }
  .tree--narrow { display: block; }
}
.sheet--tree .cm { color: var(--manila); }
.mono--wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.fm { color: var(--muted); }
.fm b { color: var(--ink); }
.wl {
  text-decoration: underline;
  text-decoration-color: var(--thread);
  text-decoration-thickness: 2px;
  text-underline-offset: .25em;
}
@media (max-width: 480px) {
  .sheet--tree .mono { font-size: .74rem; padding-inline: 14px; }
  .mono { font-size: .76rem; }
}

.sits { margin-top: clamp(3rem, 5.5vw, 4.5rem); }
.sits__grid {
  display: grid;
  gap: 1px;
  background: var(--rule-strong);
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  overflow: hidden;
}
@media (min-width: 640px) { .sits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .sits__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sit { padding: 1.2rem 1.35rem 1.35rem; background: var(--paper); }
.sit dt {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.sit dd { margin-top: .45rem; font-size: .98rem; line-height: 1.55; }
.sit--us { background: var(--manila); color: var(--on-manila); }
.sit--us dd { font-family: var(--f-display); font-weight: 650; font-size: 1.1rem; line-height: 1.4; }

/* ---------- Setup: a true sequence, so it is numbered ---------- */
.steps {
  list-style: none;
  display: grid;
  gap: 1.5rem;
}
.step__n {
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 2rem + 1.8vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.step__t {
  font-family: var(--f-display);
  font-weight: 750;
  font-size: 1.3rem;
  line-height: 1.2;
}
.step p { margin-top: .35rem; max-width: 30em; }
@media (min-width: 1040px) {
  .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.75rem; }
  .step { padding-top: .9rem; border-top: 3px solid var(--ink); }
  .step__t { margin-top: .9rem; }
}
@media (max-width: 1039.98px) {
  .steps { gap: 0; }
  .step {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    column-gap: 1rem;
    padding: 1rem 0 1.1rem;
    border-top: 2px solid var(--ink);
  }
  .step:last-child { border-bottom: 2px solid var(--ink); }
  .step__n { grid-row: 1 / span 2; font-size: 2.4rem; }
  .step__t { margin-top: .2rem; }
  .step p { grid-column: 2; }
}

/* ---------- The ledger: a tick for what works today, a ring for next, a dash for later ---------- */
.ledger__grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
}
@media (min-width: 960px) { .ledger__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.ledger__side { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }

.lcol {
  padding: clamp(1.2rem, 2.5vw, 1.7rem);
  border-radius: 3px;
}
.lcol__head {
  margin-bottom: 1rem;
  padding-bottom: .7rem;
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: 3px double currentColor;
}
.lcol__list { list-style: none; display: grid; gap: .65rem; }
@media (max-width: 599.98px) {
  .lcol__list { gap: .5rem; font-size: 1rem; }
}
.lcol__list li { position: relative; padding-left: 1.7rem; line-height: 1.5; }
.lcol__list li::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
}
.lcol--today {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--ink);
}
.lcol--today .lcol__list li::before {
  /* a tick */
  left: .15rem;
  top: .3rem;
  width: .95rem;
  height: .55rem;
  border-left: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  transform: rotate(-45deg);
}
@media (min-width: 720px) {
  .lcol--today .lcol__list { display: block; columns: 2; column-gap: 2rem; }
  .lcol--today .lcol__list li { break-inside: avoid; margin-bottom: .65rem; }
}
.lcol--next { background: var(--tint); }
.lcol--next .lcol__list li::before {
  /* a ring */
  left: .1rem;
  top: .32rem;
  width: .9rem;
  height: .9rem;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
}
.lcol--later { border: 1.5px dashed var(--rule-strong); }
.lcol--later .lcol__list li { color: var(--muted); }
.lcol--later .lcol__list li::before {
  /* a dash */
  left: .1rem;
  top: .72rem;
  width: .95rem;
  height: 0;
  border-top: 2.5px solid var(--muted);
}

/* ---------- Pricing ---------- */
.box {
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  overflow: hidden;
}
.box__head {
  display: grid;
  gap: .6rem 2rem;
  align-items: baseline;
  padding: clamp(1.2rem, 2.5vw, 1.6rem);
  background: var(--ground);
}
@media (min-width: 900px) { .box__head { grid-template-columns: auto minmax(0, 1fr); } }
.box__title {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  font-family: var(--f-display);
  font-weight: 750;
  font-size: 1.45rem;
  line-height: 1.2;
  white-space: nowrap;
}
.box__when {
  font-family: var(--f-body);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.box__lead { max-width: 52em; font-size: .98rem; }

.rungs {
  width: 100%;
  border-collapse: collapse;
  font-size: .98rem;
}
.rungs th, .rungs td {
  padding: 1rem clamp(.8rem, 1.6vw, 1.25rem);
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--rule);
}
.rungs thead th {
  padding-block: .75rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-panel);
  background: var(--panel);
  border-top: 0;
}
.rungs .num { text-align: right; white-space: nowrap; }
.rungs td.num {
  font-family: var(--f-mono);
  font-variant-ligatures: none;
  font-size: 1.02rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.num__v { display: block; }
.num__note {
  display: block;
  margin-top: .15rem;
  font-family: var(--f-body);
  font-size: .76rem;
  font-weight: 400;
  color: var(--muted);
}
.rungs tbody th { font-weight: 400; min-width: 13rem; }
.rung { display: flex; align-items: flex-start; gap: .65rem; }
.rung__id {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .98rem;
  color: var(--paper);
  background: var(--ink);
  border-radius: 2px;
}
.rung__name { padding-top: .1rem; font-family: var(--f-display); font-weight: 700; font-size: 1.08rem; line-height: 1.3; }
.rec-tag {
  display: block;
  margin-top: .35rem;
  font-family: var(--f-body);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.rung--rec th, .rung--rec td { background: var(--tint); }
.rung--rec th { box-shadow: inset 5px 0 0 var(--ink); }

@media (max-width: 759.98px) {
  .rungs, .rungs tbody, .rungs tr, .rungs th, .rungs td { display: block; }
  .rungs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .rungs tr { padding: 1rem clamp(1rem, 4vw, 1.25rem) .75rem; border-top: 2px solid var(--ink); }
  .rungs tbody th { padding: 0 0 .6rem; border: 0; min-width: 0; }
  .rungs td {
    display: grid;
    grid-template-columns: 7.2rem minmax(0, 1fr);
    gap: .75rem;
    padding: .45rem 0;
    border-top: 1px solid var(--rule);
  }
  .rungs td::before {
    content: attr(data-label);
    font-family: var(--f-body);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    padding-top: .2rem;
  }
  .rungs .num { text-align: left; white-space: normal; }
  .rungs tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1rem; }
  .rungs tbody th, .rungs td:not(.num) { grid-column: 1 / -1; }
  .rungs td.num { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
  .rung--rec { background: var(--tint); box-shadow: inset 5px 0 0 var(--ink); }
  .rung--rec th, .rung--rec td { background: transparent; box-shadow: none; }
  .rec-tag { display: inline-block; margin: 0 0 0 .5rem; vertical-align: .1rem; }
}

.pricing__foot {
  display: grid;
  gap: 2rem 3rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  align-items: start;
}
@media (min-width: 960px) { .pricing__foot { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.notes { list-style: none; display: grid; gap: .75rem; font-size: .95rem; color: var(--muted); }
.notes li { position: relative; padding-left: 1.4rem; max-width: 40em; }
.notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62rem;
  width: .75rem;
  height: 2px;
  background: var(--muted);
}
.glove {
  padding: clamp(1.2rem, 2.5vw, 1.6rem);
  background: var(--ground);
  border-top: 4px solid var(--ink);
  border-radius: 2px 2px 3px 3px;
}
.glove__title {
  margin-bottom: .35rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.glove__line {
  margin-bottom: .6rem;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.25;
}

/* ---------- Early access ---------- */
.access__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (min-width: 960px) {
  .access__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "copy form" "needs form";
    row-gap: clamp(2rem, 4vw, 3rem);
  }
  .access__copy { grid-area: copy; }
  .formcard { grid-area: form; }
  .access__needs { grid-area: needs; }
}
.access__copy .h2 { margin-bottom: 1.25rem; }
.access__copy .body-lg { color: var(--on-panel-muted); }
.needs { display: grid; gap: 1.1rem; }
.need { padding-left: 1rem; border-left: 2px solid color-mix(in srgb, var(--on-panel) 35%, transparent); }
.need dt { font-family: var(--f-display); font-weight: 700; font-size: 1.12rem; line-height: 1.3; }
.need dd { margin-top: .2rem; font-size: .98rem; line-height: 1.5; color: var(--on-panel-muted); }

.formcard {
  --focus: var(--ink);
  --muted: #4A5864;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: var(--paper);
  color: var(--ink);
  border-radius: 3px;
}
@media (prefers-color-scheme: dark) {
  .formcard { --muted: #A3B3BE; border: 1px solid var(--panel-face); background: var(--ground); }
}
.field { margin: 0 0 1.35rem; padding: 0; border: 0; min-width: 0; }
.field__label { display: block; padding: 0; font-weight: 700; font-size: 1rem; line-height: 1.3; }
.help { margin: .15rem 0 .55rem; font-size: .88rem; line-height: 1.45; color: var(--muted); }
.help--indent { margin: .2rem 0 0 2.05rem; }
.ea-form input[type="email"], .ea-form input[type="text"] {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: .7rem .85rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--field);
  border: 2px solid var(--ink);
  border-radius: 3px;
}
.ea-form input[aria-invalid="true"] { border-color: var(--thread); box-shadow: inset 4px 0 0 var(--thread); }
.field-error { margin-top: .45rem; font-size: .9rem; font-weight: 600; line-height: 1.4; color: var(--thread); }
.field-error:empty { display: none; }

.checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .2rem 1rem;
}
@media (min-width: 520px) { .checks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.check {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  font-size: .98rem;
  line-height: 1.3;
  cursor: pointer;
}
.check input {
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  margin: 0;
  accent-color: var(--ink);
  cursor: pointer;
}
.check--glove { font-weight: 600; min-height: 40px; }
.field--glove { padding: .8rem 1rem .95rem; background: var(--tint); border-radius: 3px; }
.field--glove .help--indent { margin-left: 1.9rem; }

.hp {
  position: absolute !important;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status { margin-top: .9rem; font-weight: 600; line-height: 1.45; }
.form-status:empty { display: none; }
.form-status.is-error { color: var(--thread); }
.privacy-note { margin-top: 1rem; font-size: .86rem; line-height: 1.5; color: var(--muted); }
.privacy-note a { color: var(--ink); }

.ea-success { padding: .5rem 0; }
.ea-success:focus { outline: none; }
.ea-success__title {
  margin-bottom: .6rem;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1.15;
}

/* ---------- Footer ---------- */
.footer {
  --focus: var(--manila);
  background: var(--panel-deep);
  color: var(--on-panel);
  border-top: 2px solid var(--manila);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  font-size: .92rem;
}
.footer__grid {
  display: grid;
  gap: 1.5rem 3rem;
  align-items: start;
}
@media (min-width: 900px) {
  .footer__grid { grid-template-columns: auto minmax(0, 1fr); }
  .footer__nav { justify-self: end; }
  .footer__grid > .footer__small {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid color-mix(in srgb, var(--on-panel) 16%, transparent);
  }
}
.footer__id p { margin-top: .75rem; color: var(--on-panel-muted); }
.footer__nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; }
.footer__nav a {
  display: inline-block;
  padding: .45rem 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
}
.footer__nav a:hover, .footer__nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--thread-on-panel); text-underline-offset: .3em; }
.footer__small { display: grid; gap: .3rem; color: var(--on-panel-muted); }
.footer__small a {
  color: var(--on-panel);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .26em;
  text-decoration-color: var(--thread-on-panel);
}
.footer__small a:hover { text-decoration-thickness: 3px; }

/* ---------- The small pages: privacy, thanks, not found ---------- */
.legal { padding-top: clamp(2.75rem, 6vw, 4.5rem); padding-bottom: var(--band-pad); }
.legal__wrap { max-width: calc(52rem + 2 * var(--gutter)); }
.legal .h2 { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.4rem); max-width: 18ch; }
.legal__updated {
  margin-top: .9rem;
  font-family: var(--f-mono);
  font-variant-ligatures: none;
  font-size: .84rem;
  color: var(--muted);
}
.legal__intro {
  margin-top: 2rem;
  padding: .2rem 0 .2rem 1.2rem;
  border-left: 4px solid var(--ink);
  font-size: 1.08rem;
  max-width: 40em;
}
.legal__list {
  display: grid;
  margin-top: 2.5rem;
  border-top: 3px double var(--rule-strong);
}
.legal__item {
  display: grid;
  gap: .35rem 2rem;
  padding: 1.2rem 0 1.25rem;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 720px) { .legal__item { grid-template-columns: 13rem minmax(0, 1fr); } }
.legal__item dt { font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; line-height: 1.35; }
.legal__item dd { max-width: 40em; }
.legal__back { margin-top: 2.5rem; }
.legal__lead { margin-top: 1.25rem; max-width: 36em; font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem); }

/* ---------- The guide ---------- */
.guide { padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: var(--band-pad); }
/* minmax(0, ...) so a long command line scrolls inside its own block, never widens the page. */
.guide__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem clamp(2rem, 4vw, 4rem); align-items: start; }
@media (min-width: 960px) {
  .guide__grid { grid-template-columns: 15.5rem minmax(0, 1fr); }
  .gtoc { position: sticky; top: calc(var(--topbar-h) + 1.5rem); max-height: calc(100vh - var(--topbar-h) - 3rem); overflow-y: auto; }
  .gtoc__toggle { display: none; }
}
.gtoc { font-size: .95rem; }
.gtoc__head {
  display: none;
  margin-bottom: .8rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.gtoc__list { list-style: none; border-left: 2px solid var(--rule); }
.gtoc__list > li > a {
  display: block;
  margin-left: -2px;
  padding: .38rem 0 .38rem .9rem;
  line-height: 1.35;
  text-decoration: none;
  border-left: 2px solid transparent;
}
.gtoc__list > li > a:hover { border-left-color: var(--rule-strong); }
.gtoc__list > li > a[aria-current="page"] { font-weight: 700; border-left-color: var(--thread); }
.gtoc__sub { list-style: none; margin: .1rem 0 .5rem; padding-left: 1.6rem; }
.gtoc__sub a { display: block; padding: .22rem 0; font-size: .88rem; line-height: 1.35; color: var(--muted); text-decoration: none; }
.gtoc__sub a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--thread); }
.gtoc details { border: 1px solid var(--rule-strong); border-radius: 3px; background: var(--paper); }
.gtoc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: .6rem 1rem;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.gtoc summary { list-style: none; }
.gtoc summary::-webkit-details-marker { display: none; }
.gtoc summary::after { content: "+"; font-size: 1.25rem; font-weight: 500; letter-spacing: 0; line-height: 1; }
.gtoc details[open] summary::after { content: "\2212"; }
.gtoc details[open] summary { border-bottom: 1px solid var(--rule); }
.gtoc details .gtoc__list { margin: .8rem 1rem 1rem; }
@media (min-width: 960px) {
  .gtoc__head { display: block; }
  .gtoc details { border: 0; background: transparent; }
  .gtoc summary { display: none; }
  .gtoc details .gtoc__list { margin: 0; }
}

.guide__head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); padding-bottom: 1.25rem; border-bottom: 3px double var(--rule-strong); }
.guide__head .h2 { max-width: 24ch; }

.prose { max-width: 44rem; }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 {
  margin-top: 2.75rem;
  font-family: var(--f-display);
  font-weight: 750;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  scroll-margin-top: calc(var(--topbar-h) + 16px);
}
.prose h3 {
  margin-top: 2rem;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.22rem;
  line-height: 1.25;
  scroll-margin-top: calc(var(--topbar-h) + 16px);
}
.prose h4 {
  margin-top: 1.6rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li + li { margin-top: .35rem; }
.prose li::marker { color: var(--muted); }
.prose code {
  padding: .08em .32em;
  font-family: var(--f-mono);
  font-variant-ligatures: none;
  font-size: .86em;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow-wrap: anywhere;
}
.prose pre {
  padding: 1rem 1.2rem;
  font-family: var(--f-mono);
  font-variant-ligatures: none;
  font-size: .84rem;
  line-height: 1.65;
  overflow-x: auto;
  color: var(--on-panel);
  background: var(--panel);
  border-radius: 3px;
}
.prose pre code { padding: 0; font-size: inherit; background: none; border: 0; color: inherit; overflow-wrap: normal; }
/* A fenced block names its shell, so a Shell block and its PowerShell twin never read as a
   repeat. The build puts the name in data-lang. */
.prose pre[data-lang]::before {
  content: attr(data-lang);
  display: block;
  margin: -.2rem 0 .55rem;
  font-family: var(--f-body);
  font-size: .64rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-panel-muted);
}
.prose blockquote {
  margin-inline: 0;
  padding: .2rem 0 .2rem 1.1rem;
  border-left: 4px solid var(--ink);
  color: var(--ink);
}
.prose hr { border: 0; border-top: 3px double var(--rule-strong); margin-block: 2.5rem; }
.prose .table-wrap { overflow-x: auto; border: 1px solid var(--rule-strong); border-radius: 3px; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose th, .prose td { padding: .6rem .8rem; text-align: left; vertical-align: top; border-top: 1px solid var(--rule); }
.prose thead th {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-panel);
  background: var(--panel);
  border-top: 0;
}
.prose img { height: auto; border: 1px solid var(--rule); border-radius: 3px; }

.gpager {
  display: grid;
  gap: 1rem;
  max-width: 44rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 3px double var(--rule-strong);
}
@media (min-width: 600px) { .gpager { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gpager__link {
  display: grid;
  gap: .2rem;
  padding: .9rem 1rem;
  text-decoration: none;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
}
.gpager__link:hover { border-color: var(--ink); }
.gpager__link--next { grid-column: -2; text-align: right; }
.gpager__dir { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.gpager__t { font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; line-height: 1.3; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
}