/* Seneca on AI — shared styles — B&W design system */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0a0a0a;
  --text: #f0f0f0;
  --text-muted: rgba(240,240,240,0.45);
  --border: rgba(240,240,240,0.12);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --max: 720px;
}

html { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.7; }
body { max-width: var(--max); margin: 0 auto; padding: 48px 24px 96px; }

/* Nav */
nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 48px; border-bottom: 1px solid var(--border); padding-bottom: 20px; font-size: 0.85em; }
nav a { color: var(--text-muted); text-decoration: none; }
nav a:hover { color: var(--text); }
.logo { color: var(--text) !important; font-family: var(--serif); font-style: italic; font-size: 1rem; }

/* Hero (index) */
.hero { margin-bottom: 48px; }
.hero h1 { font-family: var(--serif); font-size: 2.2em; font-weight: 400; line-height: 1.25; color: var(--text); margin-bottom: 16px; letter-spacing: -0.02em; }
.hero p { color: var(--text-muted); font-size: 1em; max-width: 560px; }

/* Essay list (index) */
.essays { display: flex; flex-direction: column; gap: 0; }
.essay-item { padding: 24px 0; border-top: 1px solid var(--border); }
.essay-item:last-child { border-bottom: 1px solid var(--border); }
.essay-num { font-size: 0.75em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.essay-item h2 { font-family: var(--serif); font-weight: 400; font-size: 1.2em; color: var(--text); margin-bottom: 4px; }
.essay-item h2 a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.essay-item h2 a:hover { color: var(--text-muted); }
.latin { font-family: var(--serif); font-style: italic; color: var(--text-muted); font-size: 0.9em; margin-bottom: 8px; display: block; }
.excerpt { font-size: 0.95em; color: var(--text-muted); margin-top: 6px; }

/* Footer (index) */
footer { border-top: 1px solid var(--border); margin-top: 48px; padding-top: 24px; display: flex; gap: 20px; flex-wrap: wrap; font-size: 0.8em; color: var(--text-muted); }
footer a { color: var(--text-muted); text-decoration: none; }
footer a:hover { color: var(--text); }

/* Letter pages */
.letter-header { margin-bottom: 40px; }
.back { font-size: 0.85em; color: var(--text-muted); text-decoration: none; display: inline-block; margin-bottom: 24px; }
.back:hover { color: var(--text); }
.letter-num { font-size: 0.8em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; }
.letter-header h1 { font-size: 2.2em; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 12px; }
.latin-title { font-family: var(--serif); font-style: italic; color: var(--text-muted); font-size: 0.95em; display: block; margin-bottom: 8px; }
.meta { font-size: 0.85em; color: var(--text-muted); }

/* Letter body */
.letter-body { }
.letter-body p { margin-bottom: 20px; }
.letter-body p:last-child { margin-bottom: 0; }
.letter-body blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2em;
  border-left: 2px solid var(--text);
  padding-left: 20px;
  margin: 32px 0;
  color: var(--text);
}
.letter-body blockquote cite {
  display: block;
  font-size: 0.75em;
  color: var(--text-muted);
  margin-top: 8px;
  font-style: normal;
}
.letter-body em { font-style: italic; }
.letter-body a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.letter-body a:hover { color: var(--text-muted); }

/* Letter footer nav */
.letter-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); margin-top: 48px; padding-top: 20px; font-size: 0.85em; }
.letter-footer a { color: var(--text-muted); text-decoration: none; }
.letter-footer a:hover { color: var(--text); }

/* About section */
.about { border-top: 1px solid var(--border); margin-top: 48px; padding-top: 32px; }
.about h3 { font-size: 0.85em; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; }
.about p { margin-bottom: 16px; font-size: 0.95em; color: var(--text-muted); }
.about a { color: var(--text); }
.about a:hover { color: var(--text-muted); }

/* Horizontal rule */
hr { border: none; border-top: 1px solid var(--border); margin: 48px 0; }