:root {
  --vellum: #efe6d2;
  --rule: rgba(28, 24, 20, 0.09);
  --ink: #1c1814;
  --mute: #5a5146;
  --lapis: #16324f;
  --cinnabar: #9c2b2b;
  --wax: #c4a15a;
  --slate: #121a22;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: Alegreya, "Times New Roman", serif;
  background:
    repeating-linear-gradient(var(--vellum), var(--vellum) 31px, var(--rule) 32px),
    var(--vellum);
  color: var(--ink);
  line-height: 1.65;
  padding-left: 52px;
}
.spine {
  position: fixed; left: 0; top: 0; bottom: 0; width: 52px;
  background: var(--lapis); color: #e8d9b8;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  z-index: 30;
  writing-mode: vertical-rl;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
}
.spine b {
  writing-mode: horizontal-tb;
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.4rem;
  color: var(--wax);
}
.mast {
  position: sticky; top: 0; z-index: 20;
  display: grid;
  grid-template-areas: "mark folio nav";
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px 18px;
  padding: 14px 4vw 12px;
  background: rgba(239, 230, 210, 0.94);
  border-bottom: 1px solid rgba(28, 24, 20, 0.18);
}
.mark {
  grid-area: mark;
  font-size: 1.55rem;
  color: var(--lapis);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.mark strong { color: var(--cinnabar); font-weight: 700; }
.folio {
  grid-area: folio;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  color: var(--mute);
}
#nav { grid-area: nav; display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: flex-end; }
#nav a { color: var(--ink); text-decoration: none; font-size: 0.95rem; }
#nav a:hover { color: var(--cinnabar); }
#menu {
  grid-area: menu;
  display: none; flex-shrink: 0;
  background: var(--lapis); color: #e8d9b8; border: 0;
  padding: 8px 12px; font: inherit; cursor: pointer;
  white-space: nowrap;
}
.open {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  min-height: 78vh;
}
.verso { padding: 56px 5vw 48px; }
.rubric {
  color: var(--cinnabar);
  font-variant: small-caps;
  letter-spacing: 0.14em;
  font-size: 0.9rem;
}
h1 {
  font-size: clamp(2.8rem, 6vw, 4.8rem);
  line-height: 1.05;
  font-weight: 700;
  margin: 10px 0 18px;
}
h1 em { color: var(--cinnabar); font-style: italic; }
.verso p, .lead, .cols p { color: var(--mute); margin-bottom: 14px; max-width: 62ch; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.wax, form button {
  background: var(--cinnabar); color: #f8efe0; text-decoration: none;
  padding: 12px 18px; border: 0; font: inherit; font-weight: 700; cursor: pointer;
}
.ink { color: var(--lapis); padding: 12px 18px; font-weight: 700; }
.recto {
  background: var(--slate);
  color: #b8c4b0;
  font-family: "IBM Plex Mono", monospace;
  padding: 48px 5vw;
  border-left: 12px solid var(--wax);
}
.prompt { color: var(--wax); font-size: 0.8rem; margin-bottom: 16px; }
.recto pre { font: inherit; white-space: pre-wrap; min-height: 9em; font-size: 0.92rem; }
.cursor { margin-top: 22px; color: #e8d9b8; }
.cursor span { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.sheet { padding: 52px 5vw; }
.sheet.slate { background: rgba(22, 50, 79, 0.08); }
.sheet.terminal { background: var(--slate); color: #d7ddd4; }
.sheet.terminal .lead { color: #9aa89a; }
.sheet.terminal h2 { color: #e8d9b8; }
h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  margin-bottom: 16px;
}
h2 span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  color: var(--cinnabar);
  margin-right: 10px;
}
.sheet.terminal h2 span { color: var(--wax); }
h3 { font-size: 1.2rem; margin-bottom: 8px; }
.cols { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 28px; }
.marginalia {
  border-left: 3px solid var(--cinnabar);
  padding: 8px 0 8px 18px;
}
.marginalia ul, .rule { margin-left: 18px; color: var(--mute); }
.marginalia li, .rule li { margin: 8px 0; }
.desk-switch {
  display: flex; flex-wrap: wrap; gap: 0;
  padding: 0 5vw;
  border-top: 1px solid rgba(28, 24, 20, 0.15);
  border-bottom: 1px solid rgba(28, 24, 20, 0.15);
}
.desk-switch button {
  flex: 1;
  background: transparent; border: 0;
  padding: 14px 10px;
  font: inherit; font-weight: 700; cursor: pointer;
  color: var(--mute);
}
.desk-switch button.on { background: var(--lapis); color: #e8d9b8; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid article {
  padding: 16px 4px 8px;
  border-top: 2px solid var(--ink);
}
.sheet.terminal .grid article { border-top-color: var(--wax); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 18px; }
.chips button {
  border: 1px solid var(--wax); background: transparent; color: #e8d9b8;
  padding: 7px 12px; font: inherit; cursor: pointer;
}
.chips button.on { background: var(--wax); color: var(--slate); }
.ops article.hide { display: none; }
.years { list-style: none; display: grid; gap: 18px; max-width: 70ch; }
.years time {
  font-family: "IBM Plex Mono", monospace;
  color: var(--cinnabar);
  font-size: 0.8rem;
}
details { padding: 12px 0; border-bottom: 1px solid rgba(28, 24, 20, 0.14); }
summary { cursor: pointer; font-weight: 700; }
a { color: var(--cinnabar); }
.sheet.terminal a { color: var(--wax); }
.letter {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  padding: 56px 5vw;
  background: var(--lapis);
  color: #e8d9b8;
}
.letter a { color: var(--wax); }
.legal { font-size: 0.92rem; opacity: 0.88; }
form { display: grid; gap: 12px; }
label { display: grid; gap: 6px; font-weight: 700; }
input, select, textarea {
  border: 1px solid #e8d9b8; background: transparent; color: #e8d9b8;
  padding: 10px; font: inherit;
}
option { color: #111; }
footer {
  padding: 18px 5vw 36px 5vw;
  font-size: 0.95rem;
}
body.hide-agro .agro-only { display: none; }
body.hide-code .code-only { display: none; }
@media (max-width: 900px) {
  body { padding-left: 0; }
  .spine { display: none; }
  .open, .cols, .grid, .letter { grid-template-columns: 1fr; }
  .recto { border-left: 0; border-top: 10px solid var(--wax); }
  .mast {
    grid-template-areas:
      "mark menu"
      "folio folio"
      "nav nav";
    grid-template-columns: 1fr auto;
  }
  #menu { display: inline-block; }
  #nav { display: none; flex-direction: column; justify-content: flex-start; }
  #nav.open { display: flex; }
}