/*
 * Rolara Publish theme
 * Dials: DESIGN_VARIANCE 10, MOTION_INTENSITY 8, VISUAL_DENSITY 5
 * Spec: docs/superpowers/specs/2026-05-24-rolara-publish-theme-design.md
 *
 * Section order:
 *   1. Font import
 *   2. Root tokens (dark canonical)
 *   3. Light theme overrides
 *   4. Base typography, selection, focus
 *   5. Layout: Tufte 2.5-column grid
 *   6. Sidebar navigation
 *   7. Headings, drop-cap, ornamental dividers
 *   8. Links and hover effects
 *   9. Tables, callouts, blockquotes, code
 *  10. Wikilinks and tags
 *  11. Right margin: region badge, sidenote, date slots
 *  12. Graph view
 *  13. Motion (CSS-only effects, gated by prefers-reduced-motion: no-preference)
 *  14. Regional accent layer
 *  15. Responsive
 *  16. JS-state hooks (default no-op without JS)
 *  17. Hard-disable for prefers-reduced-motion: reduce
 */

/* 1. Font import */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=EB+Garamond:ital,wght@0,400;0,700;1,400&family=JetBrains+Mono:wght@400;700&display=swap');

/* 2. Root tokens (dark canonical) */
:root,
body.theme-dark {
  /* Palette */
  --ink-base: #0E0B1A;
  --ink-raised: #18142A;
  --vellum: #E8DDC4;
  --vellum-muted: #B8AC92;
  --gilt: #C9A35B;
  --ember: #B23B2A;
  --moonglow: #8FB8E8;

  /* Region accent palette */
  --region-tatharia: #C9A35B;
  --region-jiaohai: #A23C3A;
  --region-zaluma: #3F8E8C;
  --region-videha: #D08A2C;
  --region-cosmology: #8FB8E8;

  /* Typography */
  --font-text: 'EB Garamond', Georgia, serif;
  --font-interface: 'EB Garamond', system-ui, serif;
  --font-monospace: 'JetBrains Mono', Consolas, monospace;
  --font-display: 'Cinzel', 'Trajan Pro', serif;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Type scale */
  --fs-body: 18px;
  --fs-small: 15px;
  --fs-h1: 2.6rem;
  --fs-h2: 1.9rem;
  --fs-h3: 1.4rem;
  --lh-body: 1.65;
  --lh-heading: 1.2;
}

/* 3. Light theme overrides */
body.theme-light {
  --ink-base: #F4ECD6;
  --ink-raised: #EADFC2;
  --vellum: #1C1410;
  --vellum-muted: #5A4A36;
  --gilt: #8A6A1F;
  --ember: #8C2A1F;
  --moonglow: #2E5A8C;

  --region-tatharia: #8A6A1F;
  --region-jiaohai: #6F2A28;
  --region-zaluma: #285E5C;
  --region-videha: #A0671F;
  --region-cosmology: #2E5A8C;
}

/* 4. Base typography, selection, focus */
body {
  --background-primary: var(--ink-base);
  --background-secondary: var(--ink-raised);
  --background-modifier-border: rgba(201, 163, 91, 0.18);
  --text-normal: var(--vellum);
  --text-muted: var(--vellum-muted);
  --text-accent: var(--gilt);
  --interactive-accent: var(--gilt);
  --interactive-accent-hover: var(--moonglow);
  --blockquote-border: var(--ember);

  background-color: var(--background-primary);
  color: var(--text-normal);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: 'liga', 'kern';
}

::selection {
  background: var(--gilt);
  color: var(--ink-base);
}

:focus-visible {
  outline: 2px solid var(--gilt);
  outline-offset: 3px;
  border-radius: 2px;
}

/* 5. Layout: cap site width, free the article from the readable-line-width clamp
 * without touching parent containers (they hold the right-column sibling). */
.site-body {
  max-width: 2400px;
  margin: 0 auto;
}

/* Lift only the article view's max-width clamp. Do NOT touch render-container,
 * render-container-inner, or publish-renderer: those are flex parents that
 * also host the right column (graph + outline). Forcing them to width: 100%
 * collapses the right column onto the article. */
.published-container.is-readable-line-width .markdown-preview-view {
  max-width: none;
}

/* Typography inherits everywhere (including hover popovers) so previews stay
 * legible. Decorative layout (padding, max-width, corner flourish) is scoped
 * to the main article container so popovers don't get padded out or get a
 * stray corner ornament. */
.markdown-preview-view {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-align: left;
}

.site-body-center-column .markdown-preview-view {
  max-width: 80ch;
  margin-left: 0;
  margin-right: auto;
  padding-left: var(--space-7);
  padding-right: var(--space-5);
  position: relative;
}

.site-body-center-column .markdown-preview-view::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 72px;
  background-image: url('assets/ornaments/corner-flourish.svg');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.55;
  pointer-events: none;
}

/* 6. Sidebar navigation */
.site-body-left,
.nav-container,
.nav-folder-title,
.nav-file-title {
  font-family: var(--font-interface);
  color: var(--text-normal);
}

.nav-folder-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--gilt);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--background-modifier-border);
  margin-top: var(--space-4);
}

.nav-file-title {
  padding: var(--space-2) var(--space-3);
  border-radius: 3px;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}

.nav-file-title:hover {
  background: rgba(201, 163, 91, 0.08);
  color: var(--gilt);
}

.nav-file-title.is-active {
  background: rgba(201, 163, 91, 0.14);
  color: var(--gilt);
  border-left: 2px solid var(--gilt);
}

/* 7. Headings, drop-cap, ornamental dividers */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--vellum);
  line-height: var(--lh-heading);
  letter-spacing: 0.02em;
  margin-top: var(--space-7);
  margin-bottom: var(--space-4);
}

h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  border-bottom: 1px solid var(--gilt);
  padding-bottom: var(--space-3);
}

/* Polish for the article's page title (tagged by publish.js). */
.rolara-page-title {
  font-size: calc(var(--fs-h1) * 1.15);
  letter-spacing: 0.06em;
  text-transform: none;
  margin-top: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--gilt);
  position: relative;
}

.rolara-page-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 96px;
  height: 1px;
  background: var(--ember);
  opacity: 0.85;
}

/* Hide Obsidian Publish's auto-generated page-slug heading when a proper
 * markdown-authored h1 follows it (rolara-page-title carries the real title). */
.rolara-page-slug {
  display: none;
}

h2 {
  font-size: var(--fs-h2);
  color: var(--gilt);
  display: flex;
  align-items: center;
  gap: 0.5em;
}

h2::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-image: url('assets/ornaments/section-sigil.svg');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.7;
}

h3 {
  font-size: var(--fs-h3);
  color: var(--vellum);
}

/* Drop-cap on the first body paragraph. publish.js tags the paragraph with
 * .rolara-dropcap and wraps the first alphabetic glyph in a
 * .rolara-dropcap-letter span (so leading quotes/punctuation are not
 * pulled into the gilded frame). The frame SVG is square, so we render the
 * letter inside a fixed-size square box (grid place-items: center) so the
 * glyph optically centers in the frame regardless of which letter it is. */
.rolara-dropcap {
  display: block;
}
.rolara-dropcap-letter {
  font-family: var(--font-display);
  font-size: 3.6em;
  font-weight: 700;
  line-height: 1;
  float: left;
  width: 1.5em;
  height: 1.5em;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  margin: 0.05em 0.2em 0 0;
  /* Top padding optically centers cap glyphs (Cinzel capitals leave empty
   * descender space below the baseline, so geometric centering pushes them
   * visually upward). Tuned for the gilded SVG frame's interior. */
  padding: 0.22em 0 0 0;
  color: var(--gilt);
  background-image: url('assets/ornaments/dropcap-frame.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

hr {
  border: none;
  height: 48px;
  background-image: url('assets/ornaments/divider-laurel.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: var(--space-7) auto;
  color: var(--gilt);
}

/* 8. Links and hover effects */
a,
.cm-link,
.cm-hmd-internal-link {
  color: var(--gilt);
  text-decoration: none;
  background-image: linear-gradient(to right, var(--gilt), var(--gilt));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 220ms ease, color 220ms ease;
}

a:hover {
  background-size: 100% 1px;
  color: var(--moonglow);
}

/* 8b. Hover popover (wiki-link preview). Style the container only. Do NOT
 * use aggressive descendant overrides (opacity/visibility/transform !important
 * on every child) here: Obsidian Publish drives popover rendering with its
 * own transforms and incremental visibility, and forcing those off blanks
 * the content. The few targeted overrides below are the only ones needed:
 *   - undo the slug-hider so a popover-rendered slug h1 shows
 *   - tighten heading margins so the first line is in view
 *   - suppress the article corner-flourish ::before
 * The page-in animation is already scoped to .site-body-center-column
 * (section 13), so it does NOT apply to popovers. */
.popover.hover-popover {
  background: var(--ink-raised);
  color: var(--text-normal);
  border: 1px solid var(--gilt);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  padding: var(--space-3) var(--space-4);
  max-width: 480px;
  max-height: 360px;
  overflow: auto;
  z-index: 10000;
}

/* The slug-hider rule from section 7 would also hide a popover-rendered
 * slug h1. Undo it inside popovers. */
.popover.hover-popover .rolara-page-slug {
  display: block;
}

/* No laurel sigil inside popovers (saves vertical space, avoids stamping a
 * decorative SVG over preview text). */
.popover.hover-popover h2::before {
  content: none;
}

/* Tighten heading margins so the first line of preview text is in view. */
.popover.hover-popover h1,
.popover.hover-popover h2,
.popover.hover-popover h3 {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: 1.1rem;
}

.popover.hover-popover > *:first-child,
.popover.hover-popover .markdown-embed > *:first-child,
.popover.hover-popover .markdown-embed-content > *:first-child,
.popover.hover-popover .markdown-preview-view > *:first-child,
.popover.hover-popover .markdown-preview-sizer > *:first-child {
  margin-top: 0;
}

/* Suppress the article corner-flourish if it ever bleeds through. The
 * ::before is already scoped to .site-body-center-column .markdown-preview-view,
 * so this is belt-and-suspenders. */
.popover.hover-popover .markdown-preview-view::before {
  content: none;
}

/* 9. Tables, callouts, blockquotes, code */
table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--space-5) 0;
  background: var(--ink-raised);
  border: 1px solid var(--background-modifier-border);
}

th, td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--background-modifier-border);
  text-align: left;
}

th {
  font-family: var(--font-display);
  color: var(--gilt);
  background: rgba(201, 163, 91, 0.04);
}

tr:last-child td {
  border-bottom: none;
}

blockquote {
  border-left: 3px solid var(--ember);
  background: var(--ink-raised);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0;
  font-style: italic;
  color: var(--vellum-muted);
}

.callout {
  background: var(--ink-raised);
  border: 1px solid var(--gilt);
  border-left-width: 3px;
  border-radius: 3px;
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0;
  position: relative;
}

code,
.markdown-rendered code {
  font-family: var(--font-monospace);
  background: rgba(201, 163, 91, 0.08);
  padding: 0.1em 0.3em;
  border-radius: 2px;
  font-size: 0.92em;
}

pre {
  font-family: var(--font-monospace);
  background: var(--ink-raised);
  padding: var(--space-4);
  border-radius: 3px;
  border: 1px solid var(--background-modifier-border);
  overflow-x: auto;
  margin: var(--space-5) 0;
}

/* 10. Wikilinks and tags */
.internal-link,
a.internal-link {
  font-style: italic;
}

.internal-link.is-unresolved,
a.is-unresolved {
  color: var(--ember);
  border-bottom: 1px dotted var(--ember);
  background-image: none;
}

.tag,
a.tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.82em;
  letter-spacing: 0.04em;
  padding: 2px var(--space-2);
  background: var(--ink-raised);
  border: 1px solid var(--gilt);
  border-radius: 2px;
  color: var(--gilt);
  margin: 0 4px;
  background-image: none;
}

.tag:hover {
  background: var(--gilt);
  color: var(--ink-base);
}

/* 11. Right margin: region badge, sidenote, date slots */

/* Give the right column its own opaque background and elevation so it never
 * appears to ghost on top of article text. Obsidian Publish ships it without
 * a background; in dark themes that reads as a transparent overlay. */
.site-body-right-column,
.site-body-right {
  background: var(--background-primary);
  position: relative;
  z-index: 2;
}

.site-body-right-column .region-badge,
.site-body-right .region-badge {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-3);
  background: var(--region-tatharia);
  color: var(--ink-base);
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 2px;
  display: inline-block;
  margin-bottom: var(--space-5);
}

.site-body-right-column .margin-date,
.site-body-right .margin-date {
  font-family: var(--font-monospace);
  font-size: var(--fs-small);
  color: var(--gilt);
  margin: var(--space-3) 0;
}

.site-body-right-column .margin-note,
.site-body-right .margin-note {
  font-style: italic;
  color: var(--vellum-muted);
  font-size: var(--fs-small);
  margin: var(--space-4) 0;
}

.site-body-right-column .margin-note,
.site-body-right .margin-note::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gilt);
  opacity: 0.4;
  margin-bottom: var(--space-2);
}

/* 12. Graph view */
.graph-view {
  --graph-node: var(--gilt);
  --graph-line: rgba(201, 163, 91, 0.35);
  --graph-text: var(--vellum);
  background: var(--ink-base);
}

/* 13. Motion (CSS-only effects, gated by no-preference) */
@media (prefers-reduced-motion: no-preference) {
  /* Scope the page-in fade to the main article column. Hover popovers also
   * contain a .markdown-preview-view; we never want them to inherit the
   * opacity: 0 starting frame of this animation. */
  .site-body-center-column .markdown-preview-view {
    animation: rolara-page-in 600ms ease-out both;
  }
  @keyframes rolara-page-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .rolara-dropcap-letter {
    animation: rolara-dropcap-glow 6s ease-in-out infinite alternate;
  }
  @keyframes rolara-dropcap-glow {
    from { text-shadow: 0 0 0 transparent; }
    to   { text-shadow: 0 0 14px rgba(201, 163, 91, 0.45); }
  }

  hr {
    animation: rolara-divider-shimmer 8s ease-in-out infinite;
    background-blend-mode: lighten;
  }
  @keyframes rolara-divider-shimmer {
    0%, 100% { background-position: center; filter: none; }
    50%      { filter: brightness(1.15); }
  }

  h1:hover, h2:hover, h3:hover {
    transition: transform 240ms ease;
    transform: rotate(-0.5deg) scale(1.01);
  }

  .nav-file-title {
    animation: rolara-stagger-in 500ms ease-out both;
  }
  .nav-file-title:nth-child(1) { animation-delay: 30ms; }
  .nav-file-title:nth-child(2) { animation-delay: 60ms; }
  .nav-file-title:nth-child(3) { animation-delay: 90ms; }
  .nav-file-title:nth-child(4) { animation-delay: 120ms; }
  .nav-file-title:nth-child(5) { animation-delay: 150ms; }
  .nav-file-title:nth-child(6) { animation-delay: 180ms; }
  .nav-file-title:nth-child(7) { animation-delay: 210ms; }
  .nav-file-title:nth-child(n+8) { animation-delay: 240ms; }
  @keyframes rolara-stagger-in {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
  }
}

/* 14. Regional accent layer */
.nav-file-title[href*="/tatharia/"],
.nav-folder-title[href*="/tatharia/"] {
  border-left: 2px solid var(--region-tatharia);
}
.nav-file-title[href*="/tatharia/"]:hover {
  background: rgba(201, 163, 91, 0.10);
}

.nav-file-title[href*="/jiaohai/"],
.nav-folder-title[href*="/jiaohai/"] {
  border-left: 2px solid var(--region-jiaohai);
}
.nav-file-title[href*="/jiaohai/"]:hover {
  background: rgba(162, 60, 58, 0.12);
}

.nav-file-title[href*="/jeonbye/"] {
  border-left: 2px solid var(--region-jiaohai);
}
.nav-file-title[href*="/jeonbye/"]:hover {
  background: rgba(162, 60, 58, 0.10);
}

.nav-file-title[href*="/al-zaluma/"] {
  border-left: 2px solid var(--region-zaluma);
}
.nav-file-title[href*="/al-zaluma/"]:hover {
  background: rgba(63, 142, 140, 0.12);
}

.nav-file-title[href*="/videha/"],
.nav-file-title[href*="/lohastambha/"] {
  border-left: 2px solid var(--region-videha);
}
.nav-file-title[href*="/videha/"]:hover,
.nav-file-title[href*="/lohastambha/"]:hover {
  background: rgba(208, 138, 44, 0.12);
}

.nav-file-title[href*="/cosmology/"],
.nav-file-title[href*="/ordo-stellae/"] {
  border-left: 2px solid var(--region-cosmology);
}
.nav-file-title[href*="/cosmology/"]:hover,
.nav-file-title[href*="/ordo-stellae/"]:hover {
  background: rgba(143, 184, 232, 0.12);
}

/* Body-class hooks for region-tinted right-margin region badges; the JS layer adds
 * a body class like .region-tatharia, .region-jiaohai, etc., based on the article's
 * frontmatter or path. The badge picks up the matching color via the cascade. */
body.region-tatharia .region-badge { background: var(--region-tatharia); }
body.region-jiaohai  .region-badge { background: var(--region-jiaohai); color: var(--vellum); }
body.region-zaluma   .region-badge { background: var(--region-zaluma);  color: var(--vellum); }
body.region-videha   .region-badge { background: var(--region-videha); }
body.region-cosmology .region-badge { background: var(--region-cosmology); color: var(--ink-base); }

/* 15. Responsive */
@media (max-width: 1024px) {
  .site-body-right-column .region-badge,
  .site-body-right .region-badge {
    margin-bottom: var(--space-4);
  }
}

@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.5rem;
  }
}

/* 16. JS-state hooks (default no-op without JS) */
.reveal {
  /* No-op without JS. JS adds .is-revealed; the transition rules apply only then. */
}
.has-js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.popover.hover-popover .reveal,
.popover.hover-popover .has-js .reveal {
  opacity: 1 !important;
  transform: none !important;
}
.has-js .reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.candle-tint {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9990;
  opacity: 0;
  transition: opacity 400ms ease;
}
.has-js .candle-tint {
  opacity: 1;
}

.has-js .nav-file-title {
  /* JS overrides the CSS-only stagger from section 13. */
  animation: none;
}

/* 17. Hard disable for prefers-reduced-motion: reduce */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation: none !important;
    transition: none !important;
  }
  .candle-tint {
    display: none !important;
  }
}