/* base.css — Ottoman Timeline · Archival Print Direction
   Paper, ink, oxblood. No dark backgrounds. No era theming.
   ─────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&display=swap');

:root {
  /* ── PAPER & INK ──────────────────────────────────────────── */
  --paper:        #f5f0e6;
  --paper-deep:   #ede5d3;
  --paper-edge:   #e0d6bf;
  --ink:          #1a1612;
  --ink-soft:     #4a3f33;
  --ink-faint:    #8a7d6a;
  --ink-hairline: rgba(26, 22, 18, 0.14);
  --ink-rule:     rgba(26, 22, 18, 0.22);

  /* ── SINGLE ACCENT ────────────────────────────────────────── */
  --oxblood:      #7a1f1f;
  --oxblood-deep: #5a1414;
  --oxblood-tint: rgba(122, 31, 31, 0.06);

  /* ── TYPE FAMILIES ────────────────────────────────────────── */
  --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-body:    'Source Serif 4', Georgia, 'Times New Roman', serif;

  /* ── TYPE SCALE ───────────────────────────────────────────── */
  --fs-folio:   11px;
  --fs-meta:    12px;
  --fs-caption: 13px;
  --fs-body:    17px;
  --fs-h2:      38px;
  --fs-h1:      clamp(42px, 6vw, 80px);
  --fs-numeral: clamp(56px, 9vw, 120px);

  /* ── WEIGHTS ──────────────────────────────────────────────── */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ── LINE HEIGHTS ─────────────────────────────────────────── */
  --lh-display: 1.05;
  --lh-title:   1.15;
  --lh-body:    1.7;
  --lh-tight:   1.3;

  /* ── LETTER SPACING ───────────────────────────────────────── */
  --ls-smallcaps: 0.18em;
  --ls-folio:     0.08em;
  --ls-display:  -0.012em;

  /* ── MEASURE ──────────────────────────────────────────────── */
  --measure:       680px;
  --measure-wide:  880px;

  /* ── SPACING ──────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ── RULES ────────────────────────────────────────────────── */
  --rule-hair: 1px solid var(--ink-hairline);
  --rule-thin: 1px solid var(--ink-rule);

  /* ── MOTION ───────────────────────────────────────────────── */
  --dur-link: 0.15s;
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── RESET ────────────────────────────────────────────────────── */

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

/* ── GLOBAL DEFAULTS ──────────────────────────────────────────── */

html {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  min-height: 100vh;
}

a {
  color: var(--oxblood);
  text-decoration: none;
  border-bottom: 1px solid var(--oxblood);
  transition: color var(--dur-link) var(--ease),
              border-color var(--dur-link) var(--ease);
}
a:hover {
  color: var(--oxblood-deep);
  border-bottom-color: var(--oxblood-deep);
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ── SEMANTIC TYPE UTILITIES ──────────────────────────────────── */

.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-smallcaps);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.t-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--ink);
}

.t-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-display);
  color: var(--ink);
}

.t-caption {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-caption);
  color: var(--ink-soft);
}

/* Drop cap on the first letter of an element */
.t-dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  float: left;
  font-size: 64px;
  line-height: 0.82;
  padding: 6px 10px 0 0;
  color: var(--oxblood);
}

/* ── ORNAMENT ─────────────────────────────────────────────────── */

.ornament {
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink-faint);
  margin: var(--space-9) 0;
}
.ornament::before {
  content: '·  ❦  ·';
  letter-spacing: 0.6em;
}