/* blarg-papers-ui.css — the Blarg Papers UI, copied verbatim (tokens + light/dark + type system)
 * so the enmity intro + spectator use the SAME editorial design as Blarg Papers.
 * Light default = html.theme-blarg ; dark = html.theme-pre-dark (the #07111E navy). */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@8..96,400;8..96,700;8..96,900&family=Crimson+Pro:ital,wght@0,400;0,600;1,400&family=Oswald:wght@300;400;600;700&display=swap');

:root {
  --bg: #FFFFFF; --bg2: #F5F5F5;
  --text: #141414; --text2: #616161;
  --blarg-purple: #4C1D95; --blarg-pink: #E66BB7; --blarg-turquoise: #14B8A6;
  --papers-lime: #9BCA3C; --blue: #0096FF; --red: #DC3838;
  --border: rgba(20,20,20,0.10);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.10);
  --radius-sm: 2px; --radius: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-card: 16px;
  --content-max: 820px; --page-max: 1200px; --transition: 0.15s ease;
}
html.theme-pre-dark {
  --bg: #07111E; --bg2: #0B1B2E;
  --text: #DCE8F5; --text2: #7A9BBF;
  --border: rgba(255,255,255,0.08);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.35); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.50);
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; background: var(--bg); color: var(--text);
  font-family: 'Crimson Pro', 'Helvetica Neue', Arial, sans-serif; font-size: 18px; line-height: 1.65;
  transition: background var(--transition), color var(--transition);
}
.serif-display { font-family: 'Bodoni Moda', 'Helvetica Neue', Arial, serif; }
.sans-ui { font-family: 'Oswald', 'Helvetica Neue', Arial, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; }
a { color: var(--blarg-purple); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--transition), color var(--transition); }
a:hover { color: var(--blarg-pink); border-bottom-color: var(--blarg-pink); }

.brand { font-family: 'Bodoni Moda', serif; font-weight: 900; line-height: 1; color: var(--blarg-purple); letter-spacing: -0.02em; }
.eyebrow { font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--blarg-purple); }
.hero-title { font-family: 'Bodoni Moda', serif; font-weight: 700; line-height: 1.05; letter-spacing: -0.015em; margin: 0; }
.subtitle { font-family: 'Crimson Pro', serif; font-style: italic; color: var(--text2); }
.pullquote { font-family: 'Bodoni Moda', serif; font-weight: 400; line-height: 1.4; border-left: 4px solid var(--blarg-turquoise); padding: 12px 0 12px 24px; color: var(--text); }
.rule-turq { border-bottom: 2px solid var(--blarg-turquoise); }
.card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-lg); }
.theme-toggle {
  background: var(--blarg-purple); color: #FFFFFF; border: none; padding: 8px 16px; border-radius: var(--radius-md);
  font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer;
  transition: background var(--transition);
}
.theme-toggle:hover { background: var(--blarg-pink); }
.powered { font-family: 'Oswald', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text2); }