/* Near-black ground, warm off-white ink — the app's palette. Pure white on
   pure black is the one combination to avoid; the halation is what makes
   people's eyes ache after two paragraphs. */
:root {
  --bg: #0B0B0D;
  --surface: #161619;
  --ink: #E5E1D8;
  --ink-dim: #9C9890;
  --ink-faint: #605E5A;
  --hairline: #2E2E32;
  --accent: #D9A95D;
  --measure: 34rem;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  padding: 2.5rem 1.25rem 4rem;
  background: var(--bg);
  color: var(--ink);
  font: 1.25rem/1.6 ui-serif, "New York", Charter, Georgia, "Times New Roman", serif;
  -webkit-text-size-adjust: 100%;
}

article { max-width: var(--measure); margin: 0 auto; }

a { color: var(--accent); }

.crumbs {
  display: flex;
  gap: .6rem;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 2.5rem;
}
.crumbs a { color: var(--ink-dim); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs span::before { content: "\00b7"; margin-right: .6rem; }

.masthead { margin-bottom: 2.25rem; }
.period {
  margin: 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.masthead h1 {
  margin: .35rem 0 0;
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: -.01em;
}

.verse {
  margin: 0 0 1.75rem;
  padding: 0 0 1.75rem;
  border-bottom: 1px solid var(--hairline);
}
.verse p { margin: 0; font-style: italic; font-size: 1.35rem; }
.verse cite {
  display: block;
  margin-top: .9rem;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: .06em;
  color: var(--accent);
}

.body p { margin: 0 0 1.4em; }
.body .stanza {
  margin-left: 1.25rem;
  font-style: italic;
  font-size: .92em;
  color: var(--ink-dim);
}

.pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .85rem;
}
.pager a { text-decoration: none; padding: .6rem 0; }
.pager a:hover { text-decoration: underline; }

.colophon {
  margin-top: 3rem;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .78rem;
  line-height: 1.7;
  color: var(--ink-faint);
}
.colophon p { margin: 0; }
.colophon a { color: var(--ink-dim); }

/* --- index ------------------------------------------------------------- */

/* The index is a calendar, not prose, so it gets the full width; only the
   blurb above it is held to a reading measure. */
.index { max-width: 64rem; }
.blurb { margin: 1rem 0 0; max-width: var(--measure); color: var(--ink-dim); font-size: 1.05rem; }
.today {
  display: inline-block;
  margin-top: 1.5rem;
  padding: .7rem 1.3rem;
  border: 1px solid rgba(217, 169, 93, .35);
  border-radius: 999px;
  background: var(--surface);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
}
.today[hidden] { display: none; }

.calendar {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
}
.month h2 {
  margin: 0 0 .75rem;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
/* Two short columns per month rather than one 31-row stack. */
.month ol { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 1rem; }
.month li {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .82rem;
  padding: .12rem 0;
  break-inside: avoid;
}
.month .day {
  min-width: 1.6rem;
  text-align: right;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.month a { text-decoration: none; color: var(--ink-dim); }
.month a:hover { color: var(--accent); }

@media (prefers-color-scheme: light) {
  :root {
    --bg: #FBF9F4;
    --surface: #F1EDE4;
    --ink: #23211D;
    --ink-dim: #5B564E;
    --ink-faint: #8A857C;
    --hairline: #DFD9CC;
    --accent: #8A6216;
  }
}