/* ============================================================
   Mycelial - Typography
   Two families do all the work:
     serif (Iowan Old Style / Georgia) - body, titles, voice
     mono  (SF Mono / Menlo)           - meta, system labels

   No sans-serif body styles exist in this system. If a label
   needs to feel like content, it goes in serif italic, not sans.
   ============================================================ */

/* ---------- Type scale ---------- */

.ts-display {
  font-family: var(--serif);
  font-size: var(--fs-display);     /* 2.6rem / 41.6px */
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--fg);
}

.ts-h1 {
  font-family: var(--serif);
  font-size: var(--fs-h1);          /* 1.5rem / 24px */
  line-height: 1.25;
  font-weight: 400;
  color: var(--fg);
}

.ts-title {
  font-family: var(--serif);
  font-size: var(--fs-title);       /* 1.05rem / 16.8px */
  line-height: 1.35;
  letter-spacing: 0.02em;
  font-weight: 400;
  color: var(--fg);
}

.ts-body {
  font-family: var(--serif);
  font-size: var(--fs-body);        /* 0.95rem / 15.2px */
  line-height: 1.65;                /* generous - the whole trick */
  font-weight: 400;
  color: var(--fg);
}

.ts-quiet {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-quiet);       /* 0.9rem / 14.4px */
  line-height: 1.55;
  color: var(--fg-muted);
}

.ts-meta {
  font-family: var(--mono);
  font-size: var(--fs-meta);        /* 0.62rem / 9.9px */
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: var(--fg-faint);
  text-transform: none;
}

.ts-system {
  font-family: var(--mono);
  font-size: var(--fs-system);      /* 0.62rem / 9.9px */
  line-height: 1.4;
  letter-spacing: 0.14em;           /* wider than meta */
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* ---------- Inline link in body content ---------- */

.ts-body a,
.ts-link {
  color: var(--amber);
  border-bottom: 1px solid rgba(217, 183, 135, 0.35);
  text-decoration: none;
  transition: color var(--dur-micro) ease,
              border-color var(--dur-micro) ease;
}
.ts-body a:hover,
.ts-link:hover {
  color: #f0d29c;
  border-color: rgba(217, 183, 135, 0.6);
}

/* ---------- Voice helpers ----------
   Use these as semantic shortcuts in markup:
     <p class="voice-reader">…</p>           - default content voice (serif)
     <p class="voice-held-breath">…</p>      - empty/offline copy (italic serif)
     <span class="voice-system">…</span>     - labels & timestamps (mono uppercase)
*/
.voice-reader      { font-family: var(--serif); color: var(--fg); }
.voice-held-breath { font-family: var(--serif); font-style: italic; color: var(--fg-muted); }
.voice-system      { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--fg-muted); }