/* ANTIPHON - dark correspondence ledger. palette per CLAUDE.md:
   bg #0c0d12 / outside paper #e6ddc8 / inside lilac #b4a6e8 / rules #262833 */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #0c0d12;
  --bg2: #10121a;
  --paper: #e6ddc8;
  --paper-dim: #8f8a7a;
  --lilac: #b4a6e8;
  --lilac-dim: #6f66a0;
  --rule: #262833;
  --rule-soft: #1a1c26;
  --mono: "Red Hat Mono", monospace;
  --hand: "Victor Mono", monospace;
}

body {
  background: var(--bg);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  min-width: 1100px;
}

a { color: inherit; }

/* top bar */
.top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 28px;
  border-bottom: 1px solid var(--rule);
}
.prompt { color: var(--paper-dim); font-size: 12.5px; }
.prompt::after { content: "▌"; color: var(--lilac); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.top nav a {
  color: var(--paper-dim);
  text-decoration: none;
  font-size: 12.5px;
  margin-left: 22px;
}
.top nav a:hover { color: var(--paper); text-decoration: underline; }

/* masthead: asymmetric, no centered hero */
.masthead {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  padding: 56px 28px 40px;
  border-bottom: 1px solid var(--rule);
}
h1 {
  font-weight: 500;
  font-size: 58px;
  letter-spacing: 0.22em;
  color: var(--paper);
}
h1::after { content: "_"; color: var(--lilac); }
.thesis {
  margin-top: 18px;
  max-width: 560px;
  color: var(--paper-dim);
  font-size: 14.5px;
}
.v-out { color: var(--paper); }
.v-in { color: var(--lilac); font-family: var(--hand); font-style: italic; }
.hook {
  margin-top: 26px;
  font-family: var(--hand);
  font-style: italic;
  color: var(--lilac);
  font-size: 17px;
  max-width: 520px;
}

/* panels */
.panel {
  border: 1px solid var(--rule);
  background: var(--bg2);
  padding: 18px 22px;
}
.panel-title {
  color: var(--paper-dim);
  font-size: 12px;
  letter-spacing: 0.12em;
  margin-bottom: 14px;
}
.ledger div {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3.5px 0;
  font-size: 13px;
}
.ledger .k { color: var(--paper-dim); white-space: nowrap; }
.ledger .dots {
  flex: 1;
  border-bottom: 1px dotted var(--rule);
  transform: translateY(-4px);
}
.ledger .v { color: var(--paper); white-space: nowrap; }

/* correspondence */
.correspondence { padding: 0 28px 40px; }
.col-head {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 0;
  padding: 26px 0 14px;
  font-size: 12px;
  color: var(--paper-dim);
}
.ch-in { padding-left: 42px; }
.tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.14em;
  padding: 1px 7px;
  border: 1px solid var(--rule);
  margin-right: 8px;
}
.tag-out { color: var(--paper); }
.tag-in { color: var(--lilac); }

.tx {
  display: grid;
  grid-template-columns: 340px 1fr;
  border-top: 1px solid var(--rule-soft);
}
.tx:last-child { border-bottom: 1px solid var(--rule-soft); }

/* the wall itself */
.d-side { padding: 26px 30px 26px 0; position: relative; }
.l-side {
  padding: 26px 0 26px 42px;
  border-left: 1px dashed var(--rule);
  position: relative;
}
.l-side::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 34px;
  width: 22px;
  border-top: 1px dashed var(--rule);
}

.tx-meta {
  display: flex;
  gap: 14px;
  font-size: 11.5px;
  color: var(--paper-dim);
  margin-bottom: 12px;
}
.tx-no { color: var(--paper); }
.unsent { color: #a08340; }
.sent a { color: var(--paper-dim); }

.dispatch {
  color: var(--paper);
  font-size: 13.5px;
  white-space: pre-wrap;
}
.obs {
  margin-top: 14px;
  font-size: 11px;
  color: var(--paper-dim);
  line-height: 1.9;
}
.obs span { display: block; }
.obs b { color: var(--paper-dim); font-weight: 400; }

.letter {
  font-family: var(--hand);
  font-style: italic;
  font-weight: 400;
  color: var(--lilac);
  font-size: 15px;
  line-height: 1.75;
  white-space: pre-wrap;
  max-width: 760px;
}
.letter-words {
  margin-top: 10px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  color: var(--lilac-dim);
}

/* about */
.about { padding: 0 28px 48px; }
.wide { padding: 22px 26px; }
.about-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 34px;
}
.about-cols p { color: var(--paper-dim); font-size: 13px; }
.about-cols b { color: var(--paper); font-weight: 500; }
.about-cols .unsent { color: #a08340; }

footer {
  display: flex;
  justify-content: space-between;
  padding: 18px 28px 26px;
  border-top: 1px solid var(--rule);
  color: var(--paper-dim);
  font-size: 12px;
}