/* writes.css — the voice of ajin.im/writes (living log) + ajin.im/wrote (sealed
   archive) + their reading pages. Deliberately NOT creative-house.css: this is
   its own clean, minimal "log / minimal blog" world. Two voices, scoped by body
   class: .log-page (the indexes, monospace) and .read-page (a piece, serif). */

:root {
  --bg: #faf8f3;
  --ink: #1c1a16;
  --ink-soft: #4a443b;
  --soft: #6a6358;
  --faint: #a39a8b;
  --ember: #b1532a;
  --line: rgba(28, 26, 22, 0.12);
  --line-soft: rgba(28, 26, 22, 0.06);
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }

/* ============================================================= *
 *  LOG voice — the indexes (/writes, /wrote)                     *
 * ============================================================= */
body.log-page { font-family: var(--mono); font-size: 14px; line-height: 1.6; }
.log-page .shell { max-width: 660px; margin: 0 auto; padding: 3.4rem 1.6rem 2rem; }

.log-page .bar a { font-size: 0.9rem; letter-spacing: 0.04em; color: var(--ink); text-decoration: none; }
.log-page .bar a:hover { color: var(--ember); }

.log-page .note { font-size: 0.78rem; color: var(--faint); margin: 0.9rem 0 0; letter-spacing: 0.02em; }
.log-page .note a { color: var(--soft); text-decoration: none; border-bottom: 1px solid var(--line); }
.log-page .note a:hover { color: var(--ember); }

.log-page .rule { height: 1px; background: var(--line); margin: 2rem 0 0.4rem; }

.log-page .yr { font-size: 0.7rem; letter-spacing: 0.14em; color: var(--faint); margin: 1.8rem 0 0.2rem; }
.log-page .yr:first-of-type { margin-top: 0.6rem; }

.log-page .log .line {
  display: grid; grid-template-columns: 5.4rem 1fr; column-gap: 1.1rem; align-items: baseline;
  text-decoration: none; padding: 0.78rem 0; border-bottom: 1px solid var(--line-soft);
}
.log-page .log .line:last-of-type { border-bottom: 0; }
.log-page .line .d { font-size: 0.72rem; color: var(--faint); letter-spacing: 0.04em; white-space: nowrap; }
.log-page .line .t { font-size: 0.96rem; color: var(--ink); transition: color 0.12s; }
.log-page .line:hover .t { color: var(--ember); }
.log-page .line .t .new { color: var(--ember); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; margin-left: 0.5rem; }
.log-page .line .dek { display: block; font-size: 0.8rem; color: var(--soft); margin-top: 0.3rem; line-height: 1.55; }

.log-page .endmark { font-size: 0.72rem; color: var(--faint); margin: 1.8rem 0 0; letter-spacing: 0.06em; }

/* dateless variant — a log with no date column (writes v1, until real dates exist) */
.log-page .log.nodate .line { grid-template-columns: 1fr; }
.log-page .log.nodate .line .d { display: none; }

/* ============================================================= *
 *  READING voice — an individual piece                          *
 * ============================================================= */
body.read-page { font-family: var(--serif); }
.read-page .shell { max-width: 38rem; margin: 0 auto; padding: 3rem 1.6rem 2rem; }

.read-page .back { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--faint); text-decoration: none; }
.read-page .back:hover { color: var(--ember); }

.read-page .kick { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin: 2.4rem 0 0.7rem; }
.read-page h1 { font-family: var(--serif); font-weight: 500; font-size: 2.5rem; line-height: 1.12; letter-spacing: 0.005em; margin: 0 0 1.6rem; color: var(--ink); }
.read-page .post-subtitle { font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.4; color: var(--soft); margin: -0.8rem 0 1.8rem; }
.read-page .post-note { font-family: var(--mono); font-size: 0.7rem; line-height: 1.65; color: var(--faint); letter-spacing: 0.02em; margin: 0 0 2rem; }
.read-page .post-note a { color: var(--soft); }
.read-page .post-note a:hover { color: var(--ember); }

.read-page .body { font-size: 1.22rem; line-height: 1.75; color: var(--ink-soft); }
.read-page .body p { margin: 0 0 1.4rem; }
.read-page .body p:first-of-type { color: var(--ink); }
.read-page .body em { font-style: italic; color: var(--ink); }
.read-page .body strong { font-weight: 600; color: var(--ink); }
.read-page .body a { color: var(--ember); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 0.5px; }
.read-page .body h2 { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; line-height: 1.25; margin: 2.4rem 0 0.8rem; color: var(--ink); }
.read-page .body h3 { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; margin: 2rem 0 0.6rem; color: var(--ink); }
.read-page .body blockquote { margin: 1.6rem 0; padding-left: 1.2rem; border-left: 2px solid var(--line); color: var(--soft); font-style: italic; }
.read-page .body ul, .read-page .body ol { margin: 0 0 1.4rem; padding-left: 1.4rem; }
.read-page .body li { margin: 0 0 0.5rem; }
.read-page .body hr { border: 0; border-top: 1px solid var(--line); margin: 2.2rem 0; }

/* ============================================================= *
 *  shared footer                                                *
 * ============================================================= */
.site-foot {
  max-width: 660px; margin: 1rem auto 0; padding: 1.8rem 1.6rem 3.4rem;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em;
  color: var(--faint); border-top: 1px solid var(--line);
}
.read-page .site-foot { max-width: 38rem; }
.site-foot a { color: var(--soft); text-decoration: none; }
.site-foot a:hover { color: var(--ember); }

/* ============================================================= *
 *  mobile                                                       *
 * ============================================================= */
@media (max-width: 480px) {
  .log-page .log .line { grid-template-columns: 4.4rem 1fr; column-gap: 0.8rem; }
  .log-page .line .d { font-size: 0.66rem; }
  .read-page h1 { font-size: 2rem; }
  .read-page .body { font-size: 1.14rem; }
}