/* write.horse — public pages.
   Palette from the original site, plus the logo's rust:
   paper #F1F0EE · slate #D8DEE8 · navy #383E59 · rust #9A4D1C · text #444/#555 · rule #D6CFC6 */

:root {
  --paper: #F1F0EE;
  --slate: #D8DEE8;
  --slate-ink: #4A5470;
  --navy: #383E59;
  --rust: #9A4D1C;
  --ink: #444;
  --soft: #595959;
  --rule: #D6CFC6;
  --rule-warm: #C9BDB0;
  --serif: 'Book Antiqua', 'Palatino Linotype', Palatino, 'URW Palladio L', Georgia, serif;
}

* { box-sizing: border-box; }
html { font-size: 17px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--navy); }
a:hover { color: var(--rust); }
a:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
img { max-width: 100%; height: auto; }
.logo img { display: block; }

.label { margin: 0 0 1.1rem; font-size: 0.76rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--slate-ink); }
.label.rust { color: var(--rust); }

/* ---------- home ---------- */
.masthead { position: relative; text-align: center; padding: 2.4rem 1.4rem 1.8rem; }
.signin { position: absolute; top: 1rem; right: 1rem; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border: 1px solid var(--navy); border-radius: 2px; color: var(--navy); font-size: 0.95rem; text-decoration: none; }
.signin:hover { background: var(--navy); color: var(--paper); }
.masthead .logo { display: inline-block; }
.masthead .logo img { width: 240px; margin: 0 auto; }
.tagline { margin: 0.3rem 0 0; font-style: italic; color: var(--soft); }

.split { flex: 1; display: flex; flex-wrap: wrap; border-top: 1px solid var(--rule); }
.who { flex: 1 1 280px; background: var(--slate); padding: 2.8rem 2.4rem; }
.who ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.who a { display: inline-block; padding: 0.55rem 0.8rem; min-height: 44px; font-size: 1.1rem; text-decoration: none; border-radius: 2px; }
.who a[aria-current] { background: var(--paper); font-style: italic; }
.who .count { font-size: 0.82rem; color: var(--slate-ink); }

.list { flex: 999 1 560px; min-width: 0; padding: 2.8rem 6%; }
.letters { list-style: none; margin: 0; padding: 0; max-width: 680px; border-top: 1px solid var(--rule); }
.letters li { border-bottom: 1px solid var(--rule); }
.letters a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1.2rem; padding: 1.05rem 0.25rem; text-decoration: none; }
.letters a:hover { background: rgba(216, 222, 232, 0.35); }
.letters .no { min-width: 3.4rem; font-size: 0.76rem; letter-spacing: 0.15em; color: var(--rust); }
.letters .t { flex: 1 1 260px; font-size: 1.24rem; font-style: italic; }
.letters .d { font-size: 0.88rem; color: var(--soft); }
.empty { font-style: italic; color: var(--soft); }

/* ---------- one letter ---------- */
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 1rem 5%; background: var(--slate); border-bottom: 1px solid var(--rule); }
.bar .logo img { width: 110px; }
.bar a:not(.logo) { text-decoration: none; padding: 0.7rem 0.2rem; }

.one main { flex: 1; }
.letter { max-width: 640px; margin: 0 auto; padding: 4.2rem 1.4rem 3.6rem; }
.letter .meta { text-align: center; margin-bottom: 2.6rem; }
.letter .meta .label { margin-bottom: 0.8rem; }
.letter h1 { margin: 0 0 0.6rem; font-size: 2.35rem; font-weight: normal; font-style: italic; color: var(--navy); line-height: 1.25; }
.letter .date { margin: 0; font-size: 0.88rem; letter-spacing: 0.08em; color: var(--soft); }
.letter .dear { margin: 0 0 1.5rem; font-style: italic; font-size: 1.12rem; }
.letter .body { font-size: 1.12rem; line-height: 1.8; text-align: justify; hyphens: auto; }
.letter .body p { margin: 0 0 1.4rem; }
.keep { margin: 3.6rem 0 0; padding: 1.6rem 0; border-top: 1px solid var(--rule-warm); border-bottom: 1px solid var(--rule-warm); text-align: center; }
.keep .label { margin-bottom: 0.6rem; }
.keep p:last-child { margin: 0; font-size: 1.18rem; font-style: italic; color: var(--navy); }
.prevnext { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3.2rem; }
.prevnext a { text-decoration: none; padding: 0.7rem 0; }
.plain { margin-top: 1.6rem; text-align: center; font-size: 0.82rem; }

.notfound { flex: 1; text-align: center; padding: 2rem 1.4rem 4rem; font-style: italic; }

/* ---------- footer ---------- */
footer.machine { text-align: center; padding: 1.6rem; font-family: 'Courier New', monospace; font-size: 0.78rem; color: var(--soft); border-top: 1px solid var(--rule); }
footer.machine a { color: var(--soft); text-decoration: none; }
footer.machine a:hover { color: var(--rust); }

@media (max-width: 480px) {
  html { font-size: 16px; }
  .letter h1 { font-size: 1.9rem; }
  .letter .body { text-align: left; }
  .who { padding: 1.8rem 1.4rem; }
}