/* typography.css
 *
 * Fonts are loaded via <link> in each HTML page — not @import here.
 * Required <link> tags (place before this stylesheet):
 *
 *   <link rel="preconnect" href="https://fonts.googleapis.com">
 *   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 *   <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Crimson+Pro:ital,wght@0,400;0,600;1,400;1,600&display=swap" rel="stylesheet">
 */

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}

h1 { font-size: 2.2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.1rem; }

p {
  margin-bottom: var(--s4);
}
p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover {
  color: var(--accent-hover);
}

strong {
  font-weight: 600;
}

em {
  font-style: italic;
}

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--parchment-dark);
  padding: 1px 5px;
  border-radius: var(--r);
  border: 1px solid var(--border);
}

/* Latin text in idiom cards (monospace, no code styling) */
.latin-text {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  background: none;
  border: none;
  padding: 0;
}

/* Long-form prose sections (about page, etc.) */
.prose {
  max-width: 700px;
  line-height: 1.75;
}

.prose h2 {
  margin-top: var(--s6);
  margin-bottom: var(--s3);
}

.prose h3 {
  margin-top: var(--s5);
  margin-bottom: var(--s2);
}

.prose p {
  margin-bottom: var(--s4);
}

.prose ul,
.prose ol {
  padding-left: var(--s5);
  margin-bottom: var(--s4);
  list-style: revert;
}

.prose li {
  margin-bottom: var(--s1);
  line-height: 1.6;
}

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

.prose blockquote {
  border-left: 3px solid var(--border);
  padding-left: var(--s4);
  margin: var(--s3) 0;
  color: var(--ink-muted);
  font-style: italic;
}