/* Authoria — Editorial publisher design system
   Calm publisher tone — Fraunces (SOFT 0, no WONK), Newsreader, JetBrains Mono.
   Off-white neutrals. Press-red retired; accent is deep editorial blue, used
   only for hero accent words and links. Sponsored is flat compliance grey. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..900,0..100,0..1&family=Newsreader:opsz,wght@6..72,200..800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Off-white neutrals — calm publisher tone */
  --at-paper: #faf8f3;
  --at-paper-2: #f1ede3;
  --at-ink: #1a1814;
  --at-ink-2: #3a342b;
  --at-ink-3: #6b6356;
  --at-rule: #1a1814;
  --at-rule-soft: rgba(26, 24, 20, 0.18);
  --at-rule-faint: rgba(26, 24, 20, 0.10);

  /* Editorial accents — used sparingly */
  --at-accent: #2a3f5f;        /* deep editorial blue — hero accent + links */
  --at-accent-ink: #1a2940;
  --at-sponsored: #7a6f5f;     /* neutral compliance grey — sponsored badge only */
  --at-sponsored-bg: rgba(122, 111, 95, 0.08);
  --at-gold: #b8893d;
  --at-moss: #4a5d3a;

  /* Type stacks */
  --at-serif-display: "Fraunces", "Times New Roman", serif;
  --at-serif-text: "Newsreader", "Iowan Old Style", Georgia, serif;
  --at-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

.authoria {
  background: var(--at-paper);
  color: var(--at-ink);
  font-family: var(--at-serif-text);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.authoria * { box-sizing: border-box; }
.authoria a { color: inherit; }

/* ── Type utilities ─────────────────────────────────────────────── */
.authoria .kicker {
  font-family: var(--at-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.authoria .eyebrow {
  font-family: var(--at-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--at-ink-3);
}
.authoria .display {
  font-family: var(--at-serif-display);
  font-weight: 420;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  letter-spacing: -0.022em;
  line-height: 0.98;
}
/* Hero accent word — upright (no italic), editorial blue. Per design chat
   rev: italic + SOFT 80 was retired in favor of an upright accent. */
.authoria .display em,
.authoria .display .accent {
  font-style: normal;
  color: var(--at-accent);
  font-weight: 380;
}

/* Drop cap — neutralized; ink color, smaller, no SOFT axis */
.authoria .dropcap::first-letter {
  font-family: var(--at-serif-display);
  font-weight: 460;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  font-size: 4.2em;
  float: left;
  line-height: 0.88;
  padding: 4px 8px 0 0;
  color: var(--at-ink);
}

/* ── Section title ───────────────────────────────────────────────
   Magazine bottom-rule h2; can carry an inline kicker and a right-aligned
   .meta line. */
.authoria .section-title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--at-rule);
  margin: 0 0 22px;
}
.authoria .section-title h2,
.authoria .section-title .h2 {
  font-family: var(--at-serif-display);
  font-variation-settings: "opsz" 96, "SOFT" 0;
  font-weight: 440;
  font-size: 28px;
  letter-spacing: -0.018em;
  margin: 0;
  color: var(--at-ink);
}
.authoria .section-title .meta {
  margin-left: auto;
  font-family: var(--at-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--at-ink-3);
}

/* ── Rules ──────────────────────────────────────────────────────── */
.authoria .h-rule        { border: 0; border-top: 1px solid var(--at-rule); margin: 0; }
.authoria .h-rule-soft   { border: 0; border-top: 1px solid var(--at-rule-soft); margin: 0; }
.authoria .h-rule-double { border: 0; border-top: 3px double var(--at-rule); margin: 0; }

/* ── Tags / pills ───────────────────────────────────────────────── */
.authoria .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--at-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 7px;
  border: 1px solid var(--at-rule);
  background: transparent;
  color: var(--at-ink);
}
.authoria .tag.solid     { background: var(--at-ink); color: var(--at-paper); }
.authoria .tag.accent    { background: var(--at-accent); color: #fff7eb; border-color: var(--at-accent); }
.authoria .tag.sponsored { color: var(--at-sponsored); border-color: var(--at-sponsored); }

/* ── Buttons ────────────────────────────────────────────────────── */
.authoria .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--at-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 14px;
  border: 1px solid var(--at-rule);
  background: transparent;
  color: var(--at-ink);
  cursor: pointer;
  text-decoration: none;
}
.authoria .btn.solid  { background: var(--at-ink); color: var(--at-paper); }
.authoria .btn.accent { background: var(--at-accent); border-color: var(--at-accent); color: #fff7eb; }
.authoria .btn:hover  { background: var(--at-ink); color: var(--at-paper); }
.authoria .btn.solid:hover { background: var(--at-accent); border-color: var(--at-accent); }

/* ── Sponsored compliance label — flat pill, neutral grey, top-left ── */
.authoria .ribbon {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--at-sponsored-bg);
  color: var(--at-sponsored);
  font-family: var(--at-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--at-sponsored);
  border-radius: 2px;
  z-index: 2;
}

/* ── Citation chip (numbered superscript) ──────────────────────── */
.authoria .cite {
  display: inline-flex;
  align-items: center;
  font-family: var(--at-mono);
  font-size: 9.5px;
  vertical-align: super;
  line-height: 1;
  padding: 2px 5px;
  border: 1px solid var(--at-rule-soft);
  margin: 0 2px;
  color: var(--at-ink-3);
}

/* ── Index numerals ─────────────────────────────────────────────── */
.authoria .index-num {
  font-family: var(--at-serif-display);
  font-variation-settings: "opsz" 144, "SOFT" 0;
  font-weight: 380;
  font-size: 52px;
  line-height: 1;
  color: var(--at-ink);
  letter-spacing: -0.02em;
}