:root {
  --void: #0a0b0d;
  --ink: #d4d0c8;
  --muted: #8a8680;
  --yellow: #f8c808;
  --yellow-ink: #16120a;
  --steel: #2a2d31;
  --font-display: "Arial Narrow", "Helvetica Neue", "Segoe UI", sans-serif;
  --font-text: "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0;
  min-height: 100%;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-text);
  line-height: 1.45;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.top {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 2.6rem;
  padding: 0.35rem 1rem;
  background: rgba(10, 11, 13, 0.94);
  border-bottom: 1px solid #16181b;
  font-size: 0.78rem;
}
.brand {
  font: 800 0.82rem/1 var(--font-display);
  letter-spacing: 0.16em;
  color: #a8a49c;
  text-decoration: none;
}
.top nav {
  display: flex;
  gap: 0.85rem;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.top nav::-webkit-scrollbar { display: none; }
.top nav a {
  color: #b8b4ac;
  text-decoration: none;
}
.top nav a:hover { color: var(--yellow); }
.book-chip {
  margin-left: auto;
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--yellow);
  font: 700 0.62rem/1.2 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border: 1px solid #2a2618;
  background: #101114;
  box-shadow: inset 0 1px 0 #000, inset 0 -1px 0 rgba(248,200,8,0.12);
}
.book-chip[hidden] { display: none; }

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(16rem, 38%) minmax(0, 62%);
  background: var(--void);
  overflow: hidden;
}
.hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 1.6rem 4rem 6vw;
  max-width: 32rem;
}
.stu-mark {
  margin: 0 0 0.85rem;
  font: 800 clamp(3.2rem, 9vw, 6rem)/0.86 var(--font-display);
  letter-spacing: -0.045em;
  color: #8e8a84;
  text-shadow: 0 1px 0 #050505;
  background: none;
}
.hero-machine {
  position: relative;
  min-height: 100%;
  overflow: hidden;
}
#stu-presence-mount {
  position: absolute;
  right: 14%;
  bottom: 16%;
  left: auto;
  top: auto;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  z-index: 2;
}
#stu-presence {
  width: 112px;
  height: 96px;
  display: block;
}
.line {
  margin: 0 0 0.55rem;
  font-size: 1.2rem;
  color: var(--ink);
}
.promise {
  margin: 0 0 1.4rem;
  color: var(--muted);
  font-size: 1rem;
  max-width: 26rem;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}
.btn-open {
  display: inline-flex;
  align-items: center;
  min-height: 2.6rem;
  padding: 0 1.15rem;
  font: 800 0.82rem/1 var(--font-display);
  letter-spacing: 0.12em;
  color: var(--yellow-ink);
  background: var(--yellow);
  text-decoration: none;
  border: 0;
}
.btn-choose {
  min-height: 2.6rem;
  padding: 0 1rem;
  font: 600 0.82rem/1 var(--font-text);
  color: var(--ink);
  background: transparent;
  border: 1px solid #3a3d42;
  cursor: pointer;
}

.hero-machine {
  position: relative;
  min-height: 100%;
  overflow: hidden;
}
#stu-machine {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.presence-caption {
  margin: 0.2rem 0 0;
  min-height: 1em;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(212, 208, 200, 0.32);
}

.one-book {
  max-width: 58rem;
  margin: 0 auto;
  padding: 2.4rem 1.2rem 1.4rem;
}
.one-book h2,
.steward-bench h2 {
  margin: 0 0 0.4rem;
  font: 800 0.78rem/1 var(--font-display);
  letter-spacing: 0.18em;
  color: var(--yellow);
}
.one-book-lede,
.bench-lede {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 0.92rem;
}
.spines {
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.4rem 0 1rem;
  min-height: 8.5rem;
  align-items: flex-end;
  scrollbar-width: thin;
}
.spine {
  flex: 0 0 auto;
  width: 2.15rem;
  height: 7.4rem;
  padding: 0.55rem 0.15rem 0.4rem;
  border: 1px solid #1c1e21;
  background: #1a1c1f;
  color: #c4c0b8;
  cursor: pointer;
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.04), 3px 6px 0 #08090a;
  transition: transform 0.18s ease, height 0.18s ease, background 0.18s ease;
}
.spine:nth-child(3n) { height: 8rem; background: #17191c; }
.spine:nth-child(4n) { height: 6.8rem; }
.spine:nth-child(5n) { width: 2.4rem; }
.spine span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  display: block;
  max-height: 6.6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.spine.on {
  height: 8.6rem;
  background: #24262a;
  border-color: #3a3420;
  box-shadow: inset 0 0 0 1px rgba(248, 200, 8, 0.45), 4px 8px 0 #08090a;
  transform: translateY(-8px);
  color: var(--yellow);
}
.one-book label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow);
  margin: 0.2rem 0 0.35rem;
}
.book-select, #q {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  appearance: auto;
  font: inherit;
  color: var(--ink);
  background: #101114;
  border: 1px solid #1a1c1f;
  border-radius: 2px;
  padding: 0.45rem 0.7rem;
}

.ask-stage {
  max-width: 44rem;
  margin: 0 auto 2.4rem;
  padding: 0 1.2rem;
}
.beats {
  display: flex;
  gap: 0.35rem 1.1rem;
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
  font: 800 0.72rem/1 var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6e6a64;
}
.beats li { position: relative; }
.beats li.on { color: var(--yellow); }
.beats li + li::before {
  content: "→";
  position: absolute;
  left: -0.9rem;
  color: #3e3c38;
  font-weight: 400;
}
.ask-state {
  margin: 0 0 0.55rem;
  min-height: 1.1em;
  font: 700 0.66rem/1.3 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
}
.ask-state.idle, .ask-state:empty { color: #6e6a64; }
section[data-engine="trades-free"] {
  background: #0e1012;
  border: 1px solid #15171a;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.5), inset 0 1px 0 rgba(180,176,168,0.04);
  padding: 0.9rem;
  min-height: 10rem;
}
.ask-furniture form { display: flex; gap: 0.5rem; align-items: stretch; }
#q { flex: 1; }
#send {
  min-height: 2.75rem;
  padding: 0 1.2rem;
  font: 700 0.95rem/1 var(--font-text);
  color: var(--yellow-ink);
  background: var(--yellow);
  border: 0;
  cursor: pointer;
}
#send:disabled { opacity: 0.4; cursor: default; }
.hint { min-height: 1em; margin: 0.4rem 0 0; color: var(--muted); font-size: 0.82rem; }
.feed { min-height: 4.5rem; margin-top: 0.7rem; }
.feed .msg { margin: 0.7rem 0 1.1rem; }
.feed .msg.user .msg-body { color: var(--yellow); }
.stu-explain {
  color: var(--ink);
  max-width: 38rem;
}
.stu-explain strong { color: #e8e4dc; font-weight: 700; }
.evidence.source {
  margin-top: 0.9rem;
  padding: 0.15rem 0 0.2rem 1rem;
  border-left: 3px solid var(--yellow);
  background: none;
}
.evidence.source.flash { box-shadow: inset 4px 0 0 var(--yellow); }
.copy-cite {
  display: inline-block;
  margin-left: 0.7rem;
  padding: 0.2rem 0.45rem;
  font: 700 0.62rem/1 var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yellow);
  background: transparent;
  border: 1px solid #3a3420;
  cursor: pointer;
}
a.citation.locator { box-shadow: 0 1px 0 var(--yellow); }
.evidence-meta {
  margin: 0 0 0.35rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yellow);
}
.evidence.source h3 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  color: var(--ink);
  font-weight: 650;
}
.evidence.source blockquote {
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
  color: #cfcbc3;
  border: 0;
  padding: 0;
}
.citation {
  color: var(--yellow);
  font-size: 0.8rem;
}
.partner-whisper {
  margin: 0.6rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}
.partner-whisper a { color: var(--yellow); }

.steward-bench {
  max-width: 58rem;
  margin: 0 auto 2.6rem;
  padding: 0 1.2rem;
}
.bench-row {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr 0.9fr;
  gap: 0.7rem;
  align-items: stretch;
}
.surf {
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  border: 1px solid #1a1c1f;
  padding: 0.85rem 0.8rem 0.9rem;
}
.surf strong { display: block; margin: 0.35rem 0 0.15rem; font-size: 0.95rem; }
.surf span:last-child { display: block; color: var(--muted); font-size: 0.8rem; }
.surf-ot {
  background: #1b1d20;
  box-shadow: inset 0 0 0 1px #111;
}
.stamp {
  display: inline-block;
  font: 800 1.15rem/1 var(--font-display);
  letter-spacing: 0.08em;
  color: var(--yellow);
  border: 2px solid var(--yellow);
  padding: 0.2rem 0.35rem 0.1rem;
  transform: rotate(-8deg);
}
.surf-gr {
  background: #2a2c28;
  border-style: dashed;
  transform: rotate(-0.6deg);
}
.slip {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #6a6860;
}
.surf-hi {
  background: repeating-linear-gradient(#16181b 0 22px, #121316 22px 24px);
  padding-top: 0.55rem;
}
.slots { display: flex; gap: 0.25rem; }
.slots i {
  display: block;
  width: 1.4rem;
  height: 0.55rem;
  background: #0c0d0f;
  border: 1px solid #2a2c30;
}
.surf-co {
  background: #141618;
  display: flex;
  flex-direction: column;
}
.twin { display: flex; gap: 0.3rem; height: 2.4rem; align-items: flex-end; }
.twin i {
  display: block;
  width: 0.55rem;
  background: #2a2d31;
  border: 1px solid #111;
}
.twin i:first-child { height: 2.2rem; }
.twin i:last-child { height: 1.6rem; background: #3a3420; }

.trust {
  max-width: 44rem;
  margin: 0 auto 3rem;
  padding: 0 1.2rem;
}
.trust-big {
  margin: 0 0 1rem;
  font: 800 clamp(1.4rem, 4.4vw, 2.2rem)/1.05 var(--font-display);
  letter-spacing: 0.04em;
  color: #c8c4bc;
}
.weak-demo .stu-explain { margin: 0 0 0.45rem; color: #9a968e; }
.weak-source {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5c5a56;
}

.site-footer {
  max-width: 58rem;
  margin: 0 auto;
  padding: 0 1.2rem 2.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  color: var(--muted);
  font-size: 0.8rem;
}
.site-footer a { color: var(--yellow); }

#article-plane {
  position: fixed; inset: 8% 8% auto; max-height: 80vh; overflow: auto;
  background: #ece8df; color: #1c1a16; z-index: 20; padding: 1rem;
}
#article-plane[hidden], #plane-dim[hidden] { display: none; }
#plane-dim { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 19; }

.mill-body {
  max-width: 48rem;
  margin: 0 auto;
  padding: 1.4rem 1.2rem 2.4rem;
}
.mill-body h1 {
  margin: 0 0 0.45rem;
  font: 800 clamp(1.4rem, 3.6vw, 2rem)/1.1 var(--font-display);
  letter-spacing: 0.03em;
  color: var(--ink);
}
.mill-body h2 {
  margin: 1.5rem 0 0.45rem;
  font: 800 0.74rem/1 var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow);
}
.mill-body .lede, .mill-body .ed, .mill-body p { color: var(--muted); }
.mill-body a { color: var(--yellow); }
.mill-body label {
  display: block;
  margin: 0.9rem 0 0.3rem;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow);
}
.mill-body input, .mill-body textarea, .mill-body select {
  display: block;
  width: 100%;
  min-height: 2.6rem;
  padding: 0.45rem 0.7rem;
  font: inherit;
  color: var(--ink);
  background: #101114;
  border: 1px solid #1a1c1f;
  border-radius: 2px;
}
.mill-body textarea { min-height: 6.5rem; }
.mill-body .btn, .mill-body button[type="submit"] {
  min-height: 2.6rem;
  padding: 0 1.1rem;
  margin-top: 0.7rem;
  font: 800 0.78rem/1 var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yellow-ink);
  background: var(--yellow);
  border: 0;
  cursor: pointer;
}
.mill-body .ok { color: #b8d4a8; }
.mill-body .err { color: #d4a8a8; }
.mill-body table.rate { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.mill-body table.rate th, .mill-body table.rate td {
  text-align: left;
  padding: 0.45rem 0.35rem;
  border-bottom: 1px solid #1a1c1f;
  color: var(--ink);
}
.mill-body .engraved {
  margin: 0 0 0.25rem;
  font: 700 0.66rem/1 var(--font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6e6a64;
}

.rack-lede { color: var(--muted); margin: 0 0 1rem; }
.rack-list { list-style: none; margin: 0; padding: 0; }
.rack-list li { border-bottom: 1px solid #1a1c1f; }
.rack-list a {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: baseline;
  padding: 0.85rem 0.35rem;
  color: var(--ink);
  text-decoration: none;
  box-shadow: inset 0 0 0 0 transparent;
}
.rack-list a.on { box-shadow: inset 3px 0 0 var(--yellow); }
.rack-list a.on .vol-title { color: var(--yellow); }
.vol-ref {
  font: 800 0.72rem/1 var(--font-display);
  letter-spacing: 0.08em;
  color: #6e6a64;
}
.vol-title { font: 600 1rem/1.3 var(--font-text); color: var(--ink); }
.vol-ed { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }

.art-list { margin: 1rem 0 2rem; }
.art-coord {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: 0.55rem 0;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid #141618;
}
.art-coord .coord {
  font: 800 0.95rem/1 var(--font-display);
  letter-spacing: 0.04em;
  color: var(--yellow);
}
.art-coord .art-title { color: var(--ink); }

.evidence-viewer { margin: 0 auto 2rem; }
.ev-head {
  margin: 0 0 0.9rem;
  padding: 0.35rem 0 0.7rem;
  border-bottom: 1px solid #1a1c1f;
  font: 700 0.68rem/1.45 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yellow);
}
.paper-field {
  background: #ece8df;
  color: #1c1a16;
  padding: 1.5rem 1.35rem 1.8rem;
  max-width: 66ch;
  margin: 0 0 1rem;
}
.paper-field h1 {
  margin: 0 0 0.8rem;
  color: #1c1a16;
  font: 700 1.25rem/1.2 var(--font-text);
  letter-spacing: 0;
}
.paper-field .clause {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.55;
  max-width: 66ch;
  color: #1c1a16;
  white-space: pre-wrap;
}
.action-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.4rem 0 1.4rem;
}
.action-rail a, .action-rail button {
  min-height: 2.4rem;
  padding: 0 0.8rem;
  font: 700 0.68rem/1 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid #2a2d31;
  background: #121416;
  color: var(--ink);
  cursor: pointer;
}
.action-rail a.ask-this {
  background: var(--yellow);
  color: var(--yellow-ink);
  border-color: var(--yellow);
}
.ev-disc { font-size: 0.78rem; color: var(--muted); }

@media (max-width: 700px) {
  .hero {
    min-height: 0;
    grid-template-columns: 1fr;
  }
  .hero-copy { padding: 0.7rem 1rem 0.45rem; max-width: none; }
  .hero-machine { min-height: 16vh; height: 16vh; }
  #stu-presence-mount { right: 8%; bottom: 8%; left: auto; top: auto; transform: none; }
  #stu-presence { width: 72px; height: 62px; }
  .stu-mark { font-size: 2.2rem; margin-bottom: 0.45rem; }
  .line { font-size: 0.98rem; margin-bottom: 0.35rem; }
  .promise { margin-bottom: 0.65rem; font-size: 0.88rem; }
  .btn-open, .btn-choose { min-height: 2.35rem; }
  .one-book { padding: 0.9rem 1rem 0.6rem; }
  .one-book-lede { margin-bottom: 0.45rem; font-size: 0.82rem; }
  .spines { min-height: 5.6rem; padding: 0.15rem 0 0.45rem; overflow-x: auto; overflow-y: hidden; }
  .spine { height: 5.2rem; width: 1.85rem; }
  .spine:nth-child(3n) { height: 5.6rem; }
  .spine:nth-child(4n) { height: 4.9rem; }
  .spine.on { height: 5.9rem; transform: translateY(-4px); }
  .spine span { max-height: 4.8rem; font-size: 0.62rem; }
  .ask-stage { padding: 0 1rem; margin-bottom: 1.6rem; }
  .ask-furniture form { flex-direction: column; }
  .bench-row { grid-template-columns: 1fr 1fr; }
  .book-chip { max-width: 48%; font-size: 0.56rem; padding: 0.12rem 0.35rem; letter-spacing: 0.04em; }
  .rack-list a { grid-template-columns: 1.8rem 1fr; }
  .vol-ed { grid-column: 2; white-space: normal; }
  .action-rail a, .action-rail button { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .spine, .spine.on { transition: none; }
  #stu-machine { opacity: 1; }
}

/* Honeypot: off-screen for people, still in the form for bots. */
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Link buttons: a real tap target, not an underlined strip. */
.mill-body a.btn { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
.mill-body .btn-ghost { background: transparent; color: var(--yellow); box-shadow: inset 0 0 0 1px var(--yellow); }
.mill-body .actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* Link-buttons in the article rail centre their label like the real buttons. */
.action-rail a { display: inline-flex; align-items: center; justify-content: center; }
/* Top nav: a finger-sized target, not a line of text. */
.top nav a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* Whole-article reader: every clause with its number; the cited one marked. */
.paper-field .cl { margin: 0 0 1.1rem; scroll-margin-top: 4.5rem; }
.paper-field .cl:last-child { margin-bottom: 0; }
.paper-field .cl-ref { margin: 0 0 0.2rem; font: 700 0.78rem/1.2 var(--font-display); letter-spacing: 0.06em; color: #6b5a12; }
.paper-field .cl.hit { margin-left: -0.75rem; padding-left: 0.55rem; border-left: 0.2rem solid var(--yellow); }