/* ── Larry — the public record ─────────────────────────────────────
   Design language: quiet club. Near-white ground, hunter-green ink,
   brass worn sparingly. Schibsted Grotesk (display) / Hanken Grotesk
   (body, and all letterspaced labels) / DM Mono (hashes and calldata
   only). Clean hairlines, crisp cards, no ornament.

   The palette variables say what they are (§5.1's rename, done): the
   grounds are --paper*, the text is --ink*, and the primary accent is
   --club, which is green. The old names (--ink for the page, --parch
   for text, --gold for a colour that has not been gold since the
   redesign) described a palette this sheet no longer has; a variable
   whose name contradicts its value is a comment that lies.

   Four treatments below are LOAD-BEARING rather than decorative, and
   they live here so they cannot drift page to page (docs/site-redesign
   §1.2): .his-words (his verbatim words), .gen/.generated (anything a
   model wrote about him), .caveat (an operator's honest limit), and
   the .skel / .state-error / .state-empty triplet every data-backed
   page owes its reader. His words and generated text must never
   converge visually — that is the rule the shared file enforces.    */

:root {
  /* grounds — paper, from page to recessed */
  --paper:      #fafaf7;   /* page */
  --paper-2:    #ffffff;   /* raised surface */
  --paper-3:    #f1f0ea;   /* recessed surface */
  --paper-4:    #e8e7df;
  --line:       #dddcd2;   /* hairline */
  --line-soft:  #e8e7df;
  /* ink */
  --ink:        #212a24;   /* primary text — hunter ink */
  --ink-dim:    #59615b;
  --ink-faint:  #8f948c;
  /* accents */
  --club:       #2c5c42;   /* club green — primary accent */
  --club-deep:  #23503a;
  --club-soft:  rgba(44, 92, 66, 0.08);
  --brass:      #9d8248;   /* brass — used sparingly */
  --green:      #2e6b48;
  --green-soft: rgba(46, 107, 72, 0.09);
  --red:        #a8543a;   /* clay */
  --red-soft:   rgba(168, 84, 58, 0.08);
  --display: 'Schibsted Grotesk', 'Helvetica Neue', sans-serif;
  --body: 'Hanken Grotesk', 'Helvetica Neue', sans-serif;
  --sans: 'Hanken Grotesk', 'Helvetica Neue', sans-serif;
  --mono: 'DM Mono', 'SF Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: var(--club-deep); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--club); color: #fff; }

.container { max-width: 1160px; margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }
.container.narrow { max-width: 780px; }

/* shared label style — letterspaced caps, sans (never mono) */
.kicker,
nav.pages a,
.epoch-pill,
.rule-label span,
.stat .label,
.seal-badge,
.status-band .label,
.ev .ev-kind,
.epoch-list .earlier,
.diary-entry .margin-n .lbl,
.goal .origin-tag,
.slot-reader .slot-meta,
.matter .m-verdict .who,
.flow .box h4,
.cap-card .cc-slot,
.cap-card .cc-since,
.tool-note .datamark,
.dispatch,
.clamp .more,
.btn,
.epoch-head .big-n .pre {
  font-family: var(--sans);
  font-weight: 650;
  text-transform: uppercase;
}

/* ── Top bar ─────────────────────────────────────────────────── */

.topbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 250, 247, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 62px; gap: 20px;
}
.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: var(--ink);
  display: flex; align-items: baseline; gap: 10px;
  white-space: nowrap;
}
.wordmark:hover { text-decoration: none; }
.wordmark .seal {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--brass);
  align-self: center;
  flex: none;
}
.wordmark em {
  font-family: var(--body);
  font-style: normal;
  font-weight: 450;
  font-size: 13.5px;
  color: var(--ink-faint);
  letter-spacing: 0;
}

nav.pages { display: flex; gap: 2px; }
nav.pages a {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  padding: 8px 13px;
  border-radius: 4px;
}
nav.pages a:hover { color: var(--ink); text-decoration: none; background: var(--paper-3); }
nav.pages a.active {
  color: #fff;
  background: var(--club);
}

.epoch-pill {
  font-size: 11px;
  letter-spacing: 0.07em;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  background: var(--paper-2);
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
  display: flex; align-items: center; gap: 8px;
}
.epoch-pill .live {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

@media (max-width: 900px) {
  .wordmark em { display: none; }
  .epoch-pill { display: none; }
  nav.pages a { padding: 8px 8px; letter-spacing: 0.06em; }
}
@media (max-width: 600px) {
  .topbar .container { height: auto; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
  nav.pages { flex-wrap: wrap; }
}

/* ── Page scaffolding ────────────────────────────────────────── */

.page-head {
  padding: 64px 0 40px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 44px;
}
.page-head .kicker { margin-bottom: 16px; }
.page-head h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(32px, 4.6vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.022em;
}
.page-head .lede {
  margin-top: 18px;
  max-width: 60ch;
  font-size: 17.5px;
  color: var(--ink-dim);
}
.page-head .lede strong { color: var(--ink); font-weight: 600; }

.kicker {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--club);
}

h2.section {
  font-family: var(--display);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
}
.section-sub {
  color: var(--ink-dim);
  font-size: 15px;
  margin-bottom: 22px;
  max-width: 68ch;
}

.rule-label {
  display: flex; align-items: center; gap: 14px;
  margin: 56px 0 20px;
}
.rule-label::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
.rule-label span {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
}

.mono { font-family: var(--mono); }
.dim { color: var(--ink-dim); }
.faint { color: var(--ink-faint); }

.hash {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-faint);
  word-break: break-all;
}

/* ── Panels & cards ──────────────────────────────────────────── */

.panel {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px 26px;
  box-shadow: 0 1px 2px rgba(40, 45, 40, 0.04);
}
.panel + .panel { margin-top: 16px; }

.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
}

/* stat tiles */
.stat {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px 20px 16px;
  background: var(--paper-2);
}
.stat .label {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.stat .value {
  font-family: var(--display);
  font-size: 25px; font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}
.stat .value small { font-size: 14px; color: var(--ink-dim); font-family: var(--body); font-weight: 450; }
.stat .note { font-size: 13px; color: var(--ink-faint); margin-top: 6px; }

/* ── Capability chips (generic — hue derived from name) ──────── */

.cap-chip {
  --h: 140;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: hsl(var(--h) 32% 27%);
  background: hsl(var(--h) 40% 42% / 0.07);
  border: 1px solid hsl(var(--h) 28% 45% / 0.32);
  border-radius: 999px;
  padding: 3px 11px 3px 8px;
  white-space: nowrap;
}
.cap-chip::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: hsl(var(--h) 42% 38%);
  flex: none;
}
.cap-chip.lg { font-size: 13px; padding: 5px 14px 5px 10px; }

/* ── Seals (status badges) ───────────────────────────────────── */

.seal-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10px;
  letter-spacing: 0.12em;
  border-radius: 4px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  background: var(--paper-2);
  white-space: nowrap;
}
.seal-badge.gold  { color: var(--club-deep); border-color: rgba(44,92,66,0.4); background: var(--club-soft); }
.seal-badge.green { color: var(--green); border-color: rgba(46,107,72,0.35); background: var(--green-soft); }
.seal-badge.red   { color: var(--red); border-color: rgba(168,84,58,0.35); background: var(--red-soft); }
.seal-badge.dim   { color: var(--ink-faint); border-style: dashed; background: transparent; }

/* ── Epoch archive (record page) ─────────────────────────────── */

.record-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 44px;
  align-items: start;
}
@media (max-width: 900px) { .record-layout { grid-template-columns: 1fr; } }

.epoch-list { position: sticky; top: 86px; }
@media (max-width: 900px) { .epoch-list { position: static; } }

.epoch-list .item {
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 14px;
  border-left: 2px solid var(--line);
  color: var(--ink-dim);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.epoch-list .item:hover { background: var(--paper-2); text-decoration: none; }
.epoch-list .item.active {
  border-left-color: var(--club);
  background: var(--paper-2);
  color: var(--ink);
}
.epoch-list .item .n {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  min-width: 44px;
}
.epoch-list .item .what {
  font-size: 13px;
  color: var(--ink-faint);
  line-height: 1.4;
}
.epoch-list .item.active .what { color: var(--ink-dim); }
.epoch-list .item.dormant { opacity: 0.55; }
.epoch-list .earlier {
  font-size: 10.5px;
  color: var(--ink-faint);
  padding: 14px;
  letter-spacing: 0.1em;
}

/* epoch detail */
.epoch-head {
  display: flex; align-items: flex-start; gap: 28px;
  margin-bottom: 8px;
}
.epoch-head .big-n {
  font-family: var(--display);
  font-weight: 600;
  font-size: 80px;
  line-height: 0.95;
  color: var(--club);
  letter-spacing: -0.04em;
  flex: none;
}
.epoch-head .big-n .pre {
  font-size: 11px; display: block; color: var(--ink-faint);
  letter-spacing: 0.18em; font-weight: 650; margin-bottom: 10px;
}
.epoch-head .meta { padding-top: 30px; }
.epoch-head .meta .when { font-size: 12.5px; color: var(--ink-faint); letter-spacing: 0.02em; margin-bottom: 10px; }

.narrative {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 62ch;
  margin: 18px 0 8px;
}
.narrative .cap-chip { transform: translateY(-2px); }

/* run facts strip */
.run-facts {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 14px 2px;
  margin: 26px 0 34px;
}
.run-facts .f { font-size: 13px; color: var(--ink-dim); }
.run-facts .f b { color: var(--ink); font-weight: 650; }
.run-facts .f span {
  color: var(--ink-faint); letter-spacing: 0.12em; text-transform: uppercase;
  font-size: 10px; font-weight: 650; margin-right: 7px;
}

/* ── The session timeline ────────────────────────────────────── */

.run { position: relative; padding-left: 34px; }
.run::before {
  content: '';
  position: absolute; left: 10px; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--line);
}

.ev { position: relative; padding: 0 0 32px; }
.ev:last-child { padding-bottom: 6px; }
.ev .node {
  position: absolute; left: -30px; top: 5px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--ink-faint);
}
.ev.kind-action .node { background: hsl(var(--h, 140) 42% 38%); border-color: hsl(var(--h, 140) 42% 38%); box-shadow: 0 0 0 4px hsl(var(--h, 140) 42% 38% / 0.14); }
.ev.kind-snapshot .node { border-style: dotted; border-color: var(--club); }
.ev.kind-settle .node { background: var(--club); border-color: var(--club); box-shadow: 0 0 0 4px var(--club-soft); }

.ev .ev-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.ev .ev-kind {
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--ink-faint);
}
.ev .ev-name {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
}
.ev .ev-name .cap-name { color: hsl(var(--h, 140) 38% 32%); }
.ev .ev-title {
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
}
.ev .ev-doc {
  font-size: 14px;
  color: var(--ink-faint);
  max-width: 66ch;
}
.ev .ev-body { margin-top: 10px; }

/* argument table */
.args {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  max-width: 720px;
  background: var(--paper-2);
}
.args .arg {
  display: grid;
  grid-template-columns: 120px 1fr;
  border-top: 1px solid var(--line-soft);
}
.args .arg:first-child { border-top: none; }
.args .arg .k {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-faint);
  padding: 9px 14px;
  background: var(--paper-3);
  letter-spacing: 0.02em;
}
.args .arg .v {
  font-size: 14px;
  padding: 8px 14px;
  color: var(--ink-dim);
  overflow-wrap: anywhere;
}
.args .arg .v.mono { font-family: var(--mono); font-size: 12.5px; }
@media (max-width: 600px) { .args .arg { grid-template-columns: 1fr; } .args .arg .k { padding-bottom: 2px; } }

/* long-text clamp */
.clamp { position: relative; }
.clamp .txt { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.clamp.open .txt { display: block; }
.clamp .more {
  font-size: 10.5px;
  color: var(--club); cursor: pointer;
  letter-spacing: 0.1em;
  margin-top: 6px; display: inline-block;
  background: none; border: none; padding: 0;
}

/* snapshot chips row */
.snap-notes { display: grid; gap: 8px; margin-top: 10px; max-width: 720px; }
.snap-notes .sn {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 14px; color: var(--ink-dim);
}
.snap-notes .sn .cap-chip { flex: none; transform: translateY(2px); }

/* tool result note */
.tool-note {
  border-left: 2px solid var(--line);
  padding: 6px 16px;
  font-size: 14.5px;
  color: var(--ink-dim);
  max-width: 66ch;
  margin-top: 8px;
}
.tool-note .datamark {
  font-size: 9.5px;
  color: var(--ink-faint); letter-spacing: 0.12em;
  display: block; margin-bottom: 4px;
}

/* dispatch result tag */
.dispatch {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--green);
  margin-top: 10px;
}
.dispatch::before { content: '✓'; }
.dispatch.failed { color: var(--red); }
.dispatch.failed::before { content: '✕'; }

/* ── Diary ───────────────────────────────────────────────────── */

.diary-entry {
  border-top: 1px solid var(--line);
  padding: 44px 0 52px;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 36px;
}
@media (max-width: 700px) { .diary-entry { grid-template-columns: 1fr; gap: 12px; } }
.diary-entry:first-of-type { border-top: none; }
.diary-entry .margin-n {
  font-family: var(--display);
  font-weight: 600;
  font-size: 36px;
  letter-spacing: -0.02em;
  color: var(--club);
  line-height: 1;
  text-align: right;
}
@media (max-width: 700px) { .diary-entry .margin-n { text-align: left; font-size: 30px; } }
.diary-entry .margin-n .lbl {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.diary-entry .margin-n .when {
  display: block;
  font-size: 11px;
  font-weight: 450;
  color: var(--ink-faint);
  margin-top: 10px;
  letter-spacing: 0.02em;
}
.diary-entry .body-txt { font-size: 17px; line-height: 1.75; max-width: 64ch; }
.diary-entry .body-txt p + p { margin-top: 1em; }
.diary-entry .entry-foot {
  margin-top: 18px;
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.03em;
}

/* ── Goals ledger ────────────────────────────────────────────── */

.goal {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-2);
  padding: 22px 24px;
  position: relative;
  box-shadow: 0 1px 2px rgba(40, 45, 40, 0.03);
}
.goal + .goal { margin-top: 14px; }
.goal .goal-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.goal .gid { font-size: 12px; font-weight: 650; color: var(--ink-faint); }
.goal .goal-text { font-size: 16.5px; max-width: 70ch; }
.goal.closed .goal-text { color: var(--ink-faint); }
.goal .goal-meta { margin-top: 10px; font-size: 13px; color: var(--ink-faint); }
.goal .lineage {
  margin-top: 12px;
  border-left: 2px solid var(--line);
  padding: 4px 16px;
  font-size: 14px;
  color: var(--ink-dim);
}
.goal .origin-tag {
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--brass);
}

/* ── Memory slots ────────────────────────────────────────────── */

.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  gap: 6px;
  margin: 18px 0 26px;
}
.slot-cell {
  aspect-ratio: 1;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: var(--paper);
  position: relative;
  cursor: default;
}
.slot-cell.filled {
  background: var(--club-soft);
  border-color: rgba(44,92,66,0.4);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}
.slot-cell.filled:hover { transform: scale(1.12); background: rgba(44,92,66,0.22); }
.slot-cell.filled.sel { outline: 2px solid var(--club); outline-offset: 1px; }

.slot-reader { min-height: 120px; }
.slot-reader .slot-title {
  font-family: var(--display); font-size: 20px; font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.slot-reader .slot-meta { font-size: 10.5px; color: var(--ink-faint); margin-bottom: 12px; letter-spacing: 0.1em; }
.slot-reader .slot-body { font-size: 15.5px; color: var(--ink-dim); max-width: 68ch; white-space: pre-line; }

/* ── Governance ──────────────────────────────────────────────── */

.matter {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-2);
  padding: 22px 24px;
  box-shadow: 0 1px 2px rgba(40, 45, 40, 0.03);
}
.matter + .matter { margin-top: 14px; }
.matter .m-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.matter .m-id { font-size: 12px; font-weight: 650; color: var(--ink-faint); }
.matter .m-title { font-size: 17px; font-weight: 600; font-family: var(--display); letter-spacing: -0.01em; }
.matter .m-desc { font-size: 15px; color: var(--ink-dim); max-width: 72ch; margin-top: 4px; }
.matter .m-verdict {
  margin-top: 14px;
  border-left: 2px solid var(--club);
  padding: 8px 18px;
  max-width: 68ch;
}
.matter .m-verdict.veto { border-left-color: var(--red); }
.matter .m-verdict .who {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  margin-bottom: 4px;
}
.matter .m-verdict .said { font-size: 15.5px; color: var(--ink); }
.matter .m-trail { margin-top: 12px; font-size: 12px; color: var(--ink-faint); letter-spacing: 0.02em; }

.ratchet {
  border: 1px solid rgba(44,92,66,0.35);
  background: linear-gradient(180deg, var(--club-soft), var(--paper-2));
  border-radius: 8px;
  padding: 26px 28px;
  display: flex; gap: 22px; align-items: flex-start;
}
.ratchet .glyph {
  font-family: var(--display); font-size: 36px; color: var(--club);
  line-height: 1; flex: none;
}
.ratchet h3 { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; margin-bottom: 6px; }
.ratchet p { font-size: 15px; color: var(--ink-dim); max-width: 70ch; }

/* ── Capability roster ───────────────────────────────────────── */

.cap-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-2);
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 1px 2px rgba(40, 45, 40, 0.03);
}
.cap-card .cc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cap-card .cc-slot { font-size: 9.5px; color: var(--ink-faint); letter-spacing: 0.12em; }
.cap-card .cc-desc { font-size: 14px; color: var(--ink-dim); flex: 1; }
.cap-card .cc-surface { display: flex; flex-wrap: wrap; gap: 5px; }
.cap-card .fn {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 4px;
  padding: 2px 8px;
}
.cap-card .fn.ro { border-style: dotted; color: var(--ink-faint); background: transparent; }
.cap-card .cc-since { font-size: 9.5px; color: var(--brass); letter-spacing: 0.1em; }

/* ── Hero (index) ────────────────────────────────────────────── */

.hero {
  padding: 88px 0 64px;
  position: relative;
  overflow: hidden;
}
.hero .container { position: relative; }
.hero .ghost-n {
  position: absolute;
  right: -30px; top: -50px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 360px;
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(44, 92, 66, 0.055);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
@media (max-width: 900px) { .hero .ghost-n { font-size: 210px; right: -40px; top: 0; } }
.hero h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(42px, 6.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  position: relative; z-index: 1;
}
.hero h1 em { font-style: normal; color: var(--club); }
.hero .lede {
  margin-top: 24px;
  font-size: 18.5px;
  line-height: 1.65;
  color: var(--ink-dim);
  max-width: 56ch;
  position: relative; z-index: 1;
}
.hero .lede strong { color: var(--ink); font-weight: 600; }
.hero .cta-row { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; position: relative; z-index: 1; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px;
  letter-spacing: 0.09em;
  padding: 13px 22px;
  border-radius: 6px;
  border: 1px solid var(--club);
  color: var(--club-deep);
  background: transparent;
  transition: background 0.15s ease;
}
.btn:hover { background: var(--club-soft); text-decoration: none; }
.btn.solid { background: var(--club); color: #fff; }
.btn.solid:hover { background: var(--club-deep); }
.btn.ghost { border-color: var(--line); color: var(--ink-dim); }
.btn.ghost:hover { background: var(--paper-3); color: var(--ink); }

/* status band */
.status-band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.status-band .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
@media (max-width: 900px) { .status-band .container { grid-template-columns: repeat(2, 1fr); } }
.status-band .cell {
  padding: 24px 24px;
  border-left: 1px solid var(--line-soft);
}
.status-band .cell:first-child { border-left: none; }
@media (max-width: 900px) { .status-band .cell:nth-child(3) { border-left: none; } .status-band .cell { border-top: 1px solid var(--line-soft); } .status-band .cell:nth-child(-n+2) { border-top: none; } }
.status-band .label {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.status-band .value { font-family: var(--display); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.status-band .value small { font-family: var(--body); font-size: 14px; font-weight: 450; color: var(--ink-dim); }
.status-band .sub { font-size: 12.5px; color: var(--ink-faint); margin-top: 4px; }

/* explainer trio */
.how-steps { counter-reset: step; }
.how-steps .step {
  position: relative;
  padding: 24px 26px 24px 72px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-2);
}
.how-steps .step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 24px; top: 24px;
  font-family: var(--display);
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--club);
}
.how-steps .step h3 { font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; }
.how-steps .step p { font-size: 14px; color: var(--ink-dim); }

/* recent epochs strip */
.epoch-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) { .epoch-strip { grid-template-columns: repeat(2, 1fr); } }
.epoch-tile {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-2);
  padding: 18px 20px;
  display: block;
  color: var(--ink);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.epoch-tile:hover { border-color: rgba(44,92,66,0.45); text-decoration: none; transform: translateY(-2px); box-shadow: 0 4px 14px rgba(40, 45, 40, 0.07); }
.epoch-tile .n { font-family: var(--display); font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--club); }
.epoch-tile .what { font-size: 13.5px; color: var(--ink-dim); margin-top: 6px; line-height: 1.45; }
.epoch-tile .chips { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 4px; }
.epoch-tile .chips .cap-chip { font-size: 9.5px; padding: 2px 8px 2px 6px; }

/* ── About page ──────────────────────────────────────────────── */

.def-list dt {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  color: var(--club-deep);
  letter-spacing: -0.005em;
  margin-top: 20px;
}
.def-list dd { font-size: 15px; color: var(--ink-dim); max-width: 70ch; margin-top: 4px; }

.flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  margin: 26px 0;
}
@media (max-width: 800px) { .flow { grid-template-columns: 1fr; } .flow .arrow { transform: rotate(90deg); margin: 4px auto; } }
.flow .box {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-2);
  padding: 20px;
}
.flow .box h4 { font-size: 10.5px; letter-spacing: 0.14em; color: var(--club); margin-bottom: 8px; }
.flow .box p { font-size: 14px; color: var(--ink-dim); }
.flow .arrow {
  align-self: center;
  color: var(--ink-faint);
  font-size: 20px;
  padding: 0 14px;
}

blockquote.pull {
  border-left: 2px solid var(--club);
  padding: 8px 24px;
  margin: 28px 0;
  font-size: 19px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--ink);
  max-width: 62ch;
}
blockquote.pull cite { display: block; margin-top: 10px; font-weight: 450; font-size: 12px; color: var(--ink-faint); letter-spacing: 0.03em; }

/* ── Inbox preview ───────────────────────────────────────────── */

.msg {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-2);
  padding: 16px 20px;
}
.msg + .msg { margin-top: 10px; }
.msg .msg-head { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; font-weight: 550; color: var(--ink-faint); margin-bottom: 8px; }
.msg .msg-body { font-size: 14.5px; color: var(--ink-dim); }

/* ── His words, verbatim ─────────────────────────────────────── */
/* Honesty rule 1: what Larry wrote is quoted, never paraphrased, and
   never wears the same clothes as text a model wrote about him. Mark
   the element `data-verbatim="larry"` as well, so "his words are never
   styled as generated text" is auditable with one selector.         */

.his-words {
  border-left: 2px solid var(--club);
  background: var(--club-soft);
  border-radius: 0 6px 6px 0;
  padding: 14px 20px;
  font-size: 16.5px;
  line-height: 1.7;
  max-width: 66ch;
}
.his-words p + p { margin-top: 0.9em; }
.his-words .attrib {
  display: block;
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--club-deep);
}

/* ── Generated text (a model wrote this ABOUT him) ───────────── */
/* Recessed ground, dashed hairline, brass badge naming the model.
   `.gen` carries its badge first, `.generated` carries it last; one
   rule serves both so the two idioms cannot drift apart. Absent
   generated text renders as NOTHING — never a placeholder. */

.gen, .generated {
  background: var(--paper-3);
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 14px 18px;
  color: var(--ink-dim);
  font-size: 14.5px;
  max-width: 70ch;
}
.gen p { font-size: 15.5px; color: var(--ink-dim); max-width: 68ch; }
.gen p + p, .generated p + p { margin-top: 0.8em; }
.gen-badge {
  display: block;
  font-family: var(--sans);
  font-weight: 650;
  text-transform: uppercase;
  font-size: 9.5px;
  letter-spacing: 0.13em;
  color: var(--brass);
}
.gen > .gen-badge:first-child { margin-bottom: 10px; }
.gen-badge:not(:first-child) { margin-top: 8px; }
.gen-badge .mono { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-faint); }
.gen-foot { margin-top: 10px; font-size: 12.5px; color: var(--ink-faint); }

/* ── The operator's caveat ───────────────────────────────────── */
/* The third member of the family: not his words, not a model's — a
   human saying where the live deployment actually stands. Brass, so
   it reads as neither. */

.caveat {
  margin-top: 18px;
  border-left: 2px solid var(--brass);
  background: rgba(157, 130, 72, 0.06);
  border-radius: 0 6px 6px 0;
  padding: 12px 18px;
  max-width: 68ch;
  font-size: 14.5px;
  color: var(--ink-dim);
}
.caveat .lbl {
  display: block; margin-bottom: 4px;
  font-family: var(--sans);
  font-size: 9.5px; font-weight: 650;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brass);
}

/* ── Loading / failed / nothing-to-show ──────────────────────── */
/* Every data-backed page owes the reader all three, and they are here
   so the three states cannot be reinvented once per page. */

.skel {
  background: linear-gradient(90deg, var(--paper-3), var(--paper-4), var(--paper-3));
  background-size: 200% 100%;
  border-radius: 4px;
  height: 12px;
  animation: skelpulse 1.4s ease-in-out infinite;
}
.skel + .skel { margin-top: 10px; }
.skel.tall { height: 60px; }
/* a figure that is still loading, inside a running line of text */
.skel.inline { display: inline-block; height: 1em; width: 6em; vertical-align: -2px; }
.skel.w40 { width: 40%; }
.skel.w70 { width: 70%; }
.skel.w90 { width: 90%; }
@keyframes skelpulse { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

.state-error, .state-empty {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 18px 20px;
  font-size: 14.5px;
  color: var(--ink-dim);
  max-width: 74ch;
}
/* the failure reads louder than the emptiness: one is the site being
   wrong, the other is the chain having nothing to say yet. */
.state-error {
  border-color: rgba(168, 84, 58, 0.35);
  background: var(--red-soft);
  color: var(--red);
}

/* ── Progressive disclosure (§5.3) ───────────────────────────── */
/* One <details> idiom for "lay sentence → mechanism → hex": a
   letterspaced caps summary with a +/– marker, a hairline-ruled body. */

.ladder { margin-top: 26px; }
.ladder > summary {
  cursor: pointer; list-style: none;
  font-family: var(--sans);
  font-size: 10.5px; font-weight: 650;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--club);
}
.ladder > summary::-webkit-details-marker { display: none; }
.ladder > summary::before { content: '+ '; }
.ladder[open] > summary::before { content: '– '; }
.ladder .body {
  margin-top: 16px;
  border-left: 1px solid var(--line);
  padding: 4px 0 4px 22px;
  max-width: 78ch;
}

/* ── Copy button ─────────────────────────────────────────────── */

.copy-btn {
  font-family: var(--sans);
  font-weight: 650; text-transform: uppercase;
  font-size: 9.5px; letter-spacing: 0.13em;
  color: var(--ink-dim);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 4px 9px;
  cursor: pointer;
  margin-top: 8px;
}
.copy-btn:hover { border-color: var(--club); color: var(--club-deep); }
.copy-btn.done { border-color: var(--green); color: var(--green); }

/* ── Footer ──────────────────────────────────────────────────── */

footer.site {
  margin-top: 96px;
  border-top: 1px solid var(--line);
  padding: 40px 0 56px;
}
footer.site .container {
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--ink-faint);
}
footer.site .fm { font-size: 11px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; }
footer.site a { color: var(--ink-dim); }

/* the staleness stamp — data.js writes the text and toggles the state.
   "Stale beats wrong" (honesty rule 4) only works if stale is visible. */
[data-staleness].stale { color: var(--brass); }
[data-staleness].stale { font-weight: 650; }
[data-staleness].stale::before { content: 'Stale snapshot · '; }
[data-staleness].failed { color: var(--red); }

/* ── Reveal animation ────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
  transition-delay: var(--d, 0ms);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .epoch-pill .live { animation: none; }
}

/* The explanation leads; correspondence unfolds within the homepage. */
.home-welcome { padding: 64px 0 48px; }
.welcome-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.home-welcome h1 { font-size:clamp(38px,4.4vw,66px); line-height:1.05; margin:22px 0; letter-spacing:-.045em; }
.home-welcome .lede { font-size:20px; max-width:68ch; margin-bottom:22px; }
.text-link { color:var(--club); text-decoration:none; font-weight:600; }
.text-link:hover { text-decoration:underline; }
.letter-card { border:1px solid var(--line); border-radius:14px; background:var(--paper-2); padding:28px; box-shadow:0 12px 38px #212a2408; }
.letter-heading { display:flex; align-items:center; gap:10px; padding-bottom:20px; border-bottom:1px solid var(--line-soft); font-weight:600; }
.letter-tag { margin-left:auto; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-dim); }
.letter-card label { display:block; font-family:var(--display); font-size:24px; margin:22px 0 12px; }
.letter-card textarea { width:100%; padding:14px; resize:vertical; min-height:130px; border:1px solid var(--line); border-radius:6px; font:17px/1.5 var(--body); background:var(--paper); color:var(--ink); }
.letter-card textarea:focus { outline:2px solid var(--club); outline-offset:2px; }
.letter-meta { display:flex; justify-content:space-between; gap:10px; color:var(--ink-dim); font-size:11px; margin:9px 0 18px; }
.letter-note { font-size:13px; line-height:1.5; color:var(--ink-dim); margin:0 0 18px; }
.letter-card button { cursor:pointer; }
.letter-card button:disabled { cursor:default; opacity:.6; }
[data-message-status] { font-size:14px; margin-top:14px; overflow-wrap:anywhere; }
[data-message-review] { margin-top:16px; padding:16px; background:var(--paper-3); border-radius:6px; overflow-wrap:anywhere; font-size:13px; }
[data-message-review] p { margin-bottom:10px; }
.explore-layers { padding-top:20px; padding-bottom:48px; }
.explore-layers h2 { font:500 clamp(24px,3vw,36px)/1.2 var(--display); letter-spacing:-.025em; margin:12px 0 24px; }
.engagement-paths { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.engagement-paths>a { text-decoration:none; color:var(--ink); border-top:2px solid var(--club); padding:20px 0; }
.path-number { font:11px var(--mono); color:var(--ink-dim); }
.engagement-paths h3 { margin:14px 0 9px; font:500 24px var(--display); }
.engagement-paths p { color:var(--ink-dim); font-size:15px; max-width:34ch; margin-bottom:16px; }
.inside-epoch { border:1px solid var(--line); border-radius:10px; margin-top:26px; }
.inside-epoch summary { cursor:pointer; display:flex; justify-content:space-between; gap:20px; padding:23px; font-weight:600; }
.epoch-walk { display:grid; grid-template-columns:1fr 1.4fr; gap:34px; padding:0 24px 26px; }
.epoch-steps { display:grid; gap:8px; }
.epoch-steps button { display:flex; gap:16px; padding:15px; border:1px solid var(--line); background:var(--paper); border-radius:6px; text-align:left; color:var(--ink-dim); font:13px var(--mono); cursor:pointer; }
.epoch-steps button span { font:500 16px var(--body); }
.epoch-steps button[aria-pressed=true] { background:var(--club); color:white; border-color:var(--club); }
.epoch-detail { padding:16px 0; align-self:center; }
.epoch-detail h3 { font:500 27px/1.15 var(--display); margin:14px 0; }
.epoch-detail p { color:var(--ink-dim); margin-bottom:20px; line-height:1.6; }
@media(max-width:850px) { .welcome-grid { gap:28px; } .letter-card { padding:22px; } .letter-tag { display:none; } }
@media(max-width:640px) { .home-welcome { padding-top:28px; } .welcome-grid,.epoch-walk { grid-template-columns:1fr; } .home-welcome h1 br:last-child { display:none; } .home-welcome .lede { font-size:17px; } .engagement-paths { grid-template-columns:1fr; gap:0; } .inside-epoch summary { flex-direction:column; gap:8px; } .epoch-steps { grid-template-columns:1fr 1fr; } .epoch-steps button { padding:12px; gap:8px; } }

.hero-invitation { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:28px; font-size:14px; }
.home-letter { max-width:720px; margin-top:18px; }
.home-letter>summary { cursor:pointer; width:fit-content; color:var(--ink-dim); font-size:15px; padding:8px 0; }
.home-letter>summary .text-link { margin-left:6px; }
.home-letter .letter-card { margin-top:18px; }

/* A closer reading rhythm across the public site. */
.page-head { padding:32px 0 24px; margin-bottom:26px; }
.page-head h1 { font-size:clamp(29px,3.6vw,40px); }
.page-head .kicker { margin-bottom:10px; }
.page-head .lede { margin-top:14px; max-width:70ch; font-size:17px; }
.hero.home-welcome { padding:36px 0 30px; }
.home-welcome h1 { font-size:clamp(34px,4vw,52px); margin:0 0 18px; }
.home-welcome .lede { font-size:18px; max-width:70ch; margin-bottom:20px; }
.home-welcome .ghost-n { display:none; }
.home-letter { max-width: none; margin-top:22px; }
.home-letter .letter-card { margin-top:0; max-width:780px; }
.letter-card { padding:18px 20px; border-radius:8px; box-shadow:none; }
.letter-heading { padding-bottom:12px; gap:10px; }
.letter-heading .text-link { margin-left:auto; font-size:14px; }
.letter-card label { font:600 16px var(--sans); margin:14px 0 8px; }
.letter-card textarea { min-height:94px; padding:10px 12px; font:16px/1.5 var(--sans); }
.letter-meta { font-size:12px; margin:6px 0 10px; flex-wrap:wrap; }
.letter-note { font-size:14px; margin-bottom:12px; max-width:75ch; }
[data-message-status]:empty { display:none; }
.message-identity { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:12px; font-size:14px; }
.message-identity:empty { display:none; }
.message-identity .btn { padding:8px 12px; font-size:14px; }
.home-welcome .props { margin-top:24px; gap:12px; }
.prop { padding:16px; }
.prop p { font-size:16px; }
.prop .more { font-size:12px; text-transform:none; letter-spacing:0; }
.rule-label { margin:32px 0 16px; }
.panel { padding:18px 20px; }
.explore-layers { padding-top:10px; padding-bottom:28px; }
.explore-layers h2 { font-size:26px; margin:10px 0 18px; }
.engagement-paths h3 { font-size:21px; margin:10px 0 8px; }
.engagement-paths p { font-size:16px; margin-bottom:10px; }
.inside-epoch { margin-top:14px; }
.inside-epoch summary { padding:16px; }
.epoch-walk { padding:0 16px 16px; gap:20px; }
.epoch-detail h3 { font-size:23px; }
.hero-invitation { margin-top:18px; }
footer.site { margin-top:36px; padding:26px 0; }
.conversation-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:start; }
.your-conversation { min-width:0; }
.your-conversation h2, .about-section h2 { font:600 23px/1.2 var(--display); letter-spacing:-.02em; margin-bottom:12px; }
.your-conversation .section-sub { font-size:15px; margin-bottom:16px; }
.about-section { padding:22px 0; border-bottom:1px solid var(--line); }
.about-section p { font-size:17px; line-height:1.65; margin:12px 0; max-width:70ch; }
:focus-visible { outline:2px solid var(--club); outline-offset:3px; }
@media(max-width:760px) {
  .conversation-layout { grid-template-columns:1fr; gap:24px; }
  .container { padding-left:18px; padding-right:18px; }
  .page-head { padding-top:24px; }
  .hero.home-welcome { padding-top:26px; }
  .letter-card { padding:16px; }
  .home-welcome .props { grid-template-columns:1fr 1fr; }
}
@media(max-width:460px) {
  .home-welcome .props { grid-template-columns:1fr; }
  .letter-heading .text-link { font-size:12px; }
}
.guided-setup { margin-top:18px; }
.guided-setup h3 { font:600 22px var(--display); margin-bottom:10px; }
.guided-setup p { max-width:72ch; margin-bottom:14px; font-size:16px; }
.guided-setup .btn { margin:0 8px 12px 0; }
.setup-prompt { white-space:pre-wrap; overflow-wrap:anywhere; font:14px/1.5 var(--mono); padding:12px; background:var(--paper); border:1px solid var(--line); margin-bottom:14px; }
.manual-setup { border-top:1px solid var(--line); margin-top:24px; }
.manual-setup > summary { cursor:pointer; padding:18px 0; font-size:16px; font-weight:600; }

/* ── Public overview redesign ─────────────────────────────────────
   Home opens on Larry and the record, with the technical detail one
   step away. History keeps the existing evidence reader, but gives its
   overview and cycle index the compact shape used by the public pages. */

.home-intro { border-bottom: 1px solid var(--line); padding: 54px 0 46px; }
.home-intro-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .72fr); gap: 72px; align-items: start; }
.home-copy h1 { max-width: 16ch; margin: 14px 0 20px; font: 650 clamp(38px, 5vw, 62px)/1.02 var(--display); letter-spacing: -.045em; }
.home-lede { max-width: 57ch; margin: 0 0 15px; font-size: 20px; line-height: 1.45; color: var(--ink); }
.home-body { max-width: 65ch; color: var(--ink-dim); font-size: 17px; line-height: 1.65; }
.home-body sup, .home-notes sup { font-size: .72em; line-height: 0; }
.home-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 27px; }
.home-actions .btn { min-height: 44px; }
.home-actions .text-link { margin-left: 4px; font-size: 15px; }
.home-notes { display: grid; gap: 10px; margin-top: 31px; max-width: 70ch; color: var(--ink-faint); font-size: 12.5px; line-height: 1.55; }
.home-notes p { padding-left: 22px; position: relative; }
.home-notes p > sup { position: absolute; left: 0; top: .15em; font-family: var(--mono); color: var(--brass); }
.home-notes a { color: var(--ink-dim); text-decoration: underline; text-underline-offset: 2px; }
.home-status { padding: 23px 24px 20px; position: sticky; top: 86px; }
.status-list { margin: 13px 0 17px; }
.status-row { padding: 12px 0; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 2px; }
.status-row:first-child { border-top: none; padding-top: 0; }
.status-row span { color: var(--ink-faint); font-size: 12px; line-height: 1.35; }
.status-row span small { display: block; margin-top: 2px; color: var(--ink-faint); font-size: 11px; font-weight: 400; }
.status-row b { color: var(--ink); font: 500 18px/1.25 var(--display); }
.status-link { display: inline-block; font-size: 14px; color: var(--club); }
.status-foot { border-top: 1px solid var(--line-soft); margin-top: 17px; padding-top: 12px; color: var(--ink-faint); font-size: 11px; }
.home-lately, .home-activity { padding-top: 46px; }
.section-heading h2 { margin-top: 7px; font: 600 clamp(25px, 3vw, 36px)/1.12 var(--display); letter-spacing: -.025em; }
.home-lately-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-top: 24px; }
.subhead-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 11px; }
.subhead-row h3 { font: 600 19px/1.2 var(--display); letter-spacing: -.01em; }
.subhead-row a { flex: none; color: var(--club); font-size: 13px; }
.home-goal { border-bottom: 1px solid var(--line-soft); padding: 15px 0; }
.goal-line { display: flex; flex-wrap: wrap; gap: 5px 12px; color: var(--ink-faint); font: 10px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.goal-line span + span { color: var(--brass); letter-spacing: .03em; text-transform: none; }
.home-goal-text { margin-top: 7px; font-size: 15.5px; line-height: 1.55; }
.home-goal-text .his-words { display: block; padding: 0 0 0 12px; border-left-width: 1px; background: none; border-radius: 0; font-size: inherit; line-height: inherit; }
.home-diary #latest-entry { margin-top: 0; }
.home-diary .diary-entry { grid-template-columns: 72px 1fr; gap: 18px; padding: 17px 0 0; border-top: none; }
.home-diary .diary-entry .margin-n { font-size: 25px; }
.home-diary .diary-entry .body-txt { font-size: 15.5px; line-height: 1.65; }
.home-diary .diary-entry .body-txt { max-height: 18em; overflow: hidden; position: relative; }
.home-diary .diary-entry .body-txt::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 3.5em; background: linear-gradient(transparent, var(--paper-2)); pointer-events: none; }
.home-diary .diary-entry .entry-foot { margin-top: 11px; font-size: 11px; }
.compact-heading { max-width: 70ch; }
.compact-heading p { margin-top: 8px; color: var(--ink-dim); font-size: 15px; }
.cycle-list { margin-top: 18px; border-top: 1px solid var(--line); }
.cycle-row { display: grid; grid-template-columns: 90px auto 1fr 20px; align-items: center; gap: 13px; min-height: 58px; padding: 10px 2px; color: var(--ink); border-bottom: 1px solid var(--line-soft); }
.cycle-row:hover { background: var(--paper-3); text-decoration: none; padding-left: 10px; padding-right: 10px; }
.cycle-id { color: var(--club); font: 600 18px var(--display); }
.cycle-status { justify-self: start; }
.cycle-facts { color: var(--ink-faint); font-size: 13px; }
.cycle-arrow { color: var(--club); font-size: 18px; text-align: right; }
.section-link { display: inline-block; margin-top: 18px; color: var(--club); font-size: 14px; }

.history-observation { margin: 0 0 38px; padding: 26px 26px 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-2); }
.history-observation-head { display: flex; justify-content: space-between; gap: 30px; align-items: start; }
.history-observation h2 { margin-top: 7px; font: 600 27px/1.15 var(--display); letter-spacing: -.025em; }
.history-observation-head p { margin-top: 9px; max-width: 62ch; color: var(--ink-dim); font-size: 14.5px; }
.history-observation-head .text-link { padding-top: 3px; flex: none; font-size: 14px; }
.history-goal-overview { margin-top: 24px; }
.goal-counts { display: flex; flex-wrap: wrap; gap: 10px; }
.goal-count { min-width: 118px; padding: 13px 15px; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--paper); }
.goal-count b { display: block; color: var(--club-deep); font: 600 25px/1 var(--display); }
.goal-count span { display: block; margin-top: 5px; color: var(--ink-faint); font: 10px var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.goal-provenance, .goal-limit { margin-top: 12px; color: var(--ink-dim); font-size: 13px; }
.goal-limit { max-width: 75ch; color: var(--ink-faint); }
.history-treasury { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.daily-highlights { margin-top: 22px; }
.daily-summary { max-width: 78ch; }
.daily-window { margin-top: 8px; color: var(--ink-faint); font: 12px/1.45 var(--mono); }
.daily-text { margin-top: 13px; color: var(--ink-dim); font-size: 15.5px; line-height: 1.65; white-space: pre-line; }
.daily-claims { margin: 14px 0 0; padding-left: 19px; color: var(--ink-dim); font-size: 14px; }
.daily-claims li + li { margin-top: 8px; }
.daily-claims small { display: block; margin-top: 3px; color: var(--ink-faint); font-size: 11.5px; }
.daily-limit { margin-top: 11px; color: var(--ink-faint); font-size: 12.5px; }
.development-summary { margin-top: 24px; }
.history-treasury .subhead-row { border-bottom: none; padding-bottom: 5px; }
.history-treasury .subhead-row h3 { font-size: 18px; }
.history-treasury .subhead-row .faint { font-size: 12px; }
.treasury-collecting { margin-top: 7px; padding: 13px 15px; border-left: 2px solid var(--brass); background: rgba(157,130,72,.06); color: var(--ink-dim); font-size: 14px; }
.treasury-collecting strong { color: var(--ink); font-weight: 600; }
.treasury-chart { display: block; width: 100%; max-width: 600px; height: auto; margin-top: 5px; }
.chart-axis { stroke: var(--line); stroke-width: 1; }
.chart-line { fill: none; stroke: var(--club); stroke-width: 2; }
.chart-line.spendable-line { stroke: var(--brass); stroke-dasharray: 5 4; }
.chart-dot { fill: var(--paper-2); stroke: var(--club); stroke-width: 2; }
.chart-key { display: flex; gap: 18px; color: var(--ink-faint); font-size: 12px; }
.key-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; background: var(--club); }
.key-dot.spendable { background: var(--brass); }
.table-scroll { overflow-x: auto; margin-top: 12px; }
.treasury-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.treasury-table caption { text-align: left; margin-bottom: 6px; color: var(--ink-faint); font-size: 12px; }
.treasury-table th, .treasury-table td { border-top: 1px solid var(--line-soft); padding: 8px 12px 8px 0; text-align: left; white-space: nowrap; }
.treasury-table th { color: var(--ink-faint); font-weight: 500; }
.treasury-table td { color: var(--ink-dim); }
.treasury-note { margin-top: 10px; color: var(--ink-faint); font-size: 12px; }
.hx-headline { margin-top: 8px; color: var(--ink); font: 500 16px/1.3 var(--display); }
.hx-num { font-size: 27px; }
.hx-num .his { font-size: 10px; margin-top: 5px; }
.hx-ep > summary { padding: 15px 18px; grid-template-columns: 74px 1fr; gap: 17px; }
.hx-gloss { display: none; }
.hx-facts { margin-top: 6px; font-size: 12px; }
.hx-open-hint { margin-left: auto; }

@media (max-width: 820px) {
  .home-intro-grid { grid-template-columns: 1fr; gap: 30px; }
  .home-status { position: static; }
  .home-copy h1 { max-width: 18ch; }
  .history-observation-head { flex-direction: column; gap: 12px; }
}
@media (max-width: 620px) {
  .home-intro { padding: 32px 0 34px; }
  .home-copy h1 { font-size: clamp(35px, 11vw, 49px); }
  .home-lede { font-size: 18px; }
  .home-body { font-size: 16px; }
  .home-actions { align-items: stretch; flex-direction: column; }
  .home-actions .btn { justify-content: center; width: 100%; }
  .home-actions .text-link { margin: 5px 0 0; }
  .home-lately-grid { grid-template-columns: 1fr; gap: 35px; }
  .home-lately, .home-activity { padding-top: 34px; }
  .cycle-row { grid-template-columns: 72px auto 18px; gap: 8px; }
  .cycle-facts { grid-column: 1 / -1; font-size: 12px; padding-left: 1px; }
  .cycle-arrow { grid-column: 3; grid-row: 1; }
  .history-observation { padding: 20px 17px; }
  .history-observation h2 { font-size: 24px; }
  .goal-count { min-width: 100px; }
  .hx-ep > summary { grid-template-columns: 1fr; gap: 5px; }
  .hx-num { text-align: left; }
  .hx-open-hint { margin-left: 0; }
}