/* The Ley Folios — shared theme.
   Contemporary palette: green = primary interactive (buttons, active state, links),
   gold = labels/dividers/headers, purple = secondary/selected-state + detail-panel & legend chrome.
   Same custom-property + prefers-color-scheme/data-theme override pattern used site-wide;
   toggle JS sets documentElement[data-theme] to "light" or "dark" to override the OS preference. */

:root {
  --bg: #f5f6f3;
  --bg-panel: #ffffff;
  --bg-panel-raised: #eceee9;
  --bg-well: #e2e5de;
  --ink: #1b1f1c;
  --ink-dim: #57605a;
  --border: #d3d7cd;
  --hairline: #c7ccc0;
  --shadow: 0 16px 40px -18px rgba(27, 31, 28, .22);

  --green: #1f6f4a;
  --green-glow: rgba(31, 111, 74, .14);
  --purple: #5b3a8e;
  --purple-glow: rgba(91, 58, 142, .14);
  --gold: #b8842a;
  --gold-glow: rgba(184, 132, 42, .16);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1512;
    --bg-panel: #161d19;
    --bg-panel-raised: #1d2621;
    --bg-well: #232f28;
    --ink: #e7ede8;
    --ink-dim: #9aa89e;
    --border: #2c362f;
    --hairline: #384339;
    --shadow: 0 18px 48px -18px rgba(0, 0, 0, .55);

    --green: #4fbf8a;
    --green-glow: rgba(79, 191, 138, .16);
    --purple: #a487d9;
    --purple-glow: rgba(164, 135, 217, .16);
    --gold: #e0b45c;
    --gold-glow: rgba(224, 180, 92, .16);
  }
}

:root[data-theme="dark"] {
  --bg: #0f1512;
  --bg-panel: #161d19;
  --bg-panel-raised: #1d2621;
  --bg-well: #232f28;
  --ink: #e7ede8;
  --ink-dim: #9aa89e;
  --border: #2c362f;
  --hairline: #384339;
  --shadow: 0 18px 48px -18px rgba(0, 0, 0, .55);

  --green: #4fbf8a;
  --green-glow: rgba(79, 191, 138, .16);
  --purple: #a487d9;
  --purple-glow: rgba(164, 135, 217, .16);
  --gold: #e0b45c;
  --gold-glow: rgba(224, 180, 92, .16);
}

:root[data-theme="light"] {
  --bg: #f5f6f3;
  --bg-panel: #ffffff;
  --bg-panel-raised: #eceee9;
  --bg-well: #e2e5de;
  --ink: #1b1f1c;
  --ink-dim: #57605a;
  --border: #d3d7cd;
  --hairline: #c7ccc0;
  --shadow: 0 16px 40px -18px rgba(27, 31, 28, .22);

  --green: #1f6f4a;
  --green-glow: rgba(31, 111, 74, .14);
  --purple: #5b3a8e;
  --purple-glow: rgba(91, 58, 142, .14);
  --gold: #b8842a;
  --gold-glow: rgba(184, 132, 42, .16);
}

/* Base typography — contemporary sans, replacing the old Cinzel/Cormorant Garamond/
   Metamorphous/Almendra manuscript faces. JetBrains Mono stays for coordinates/stats/labels. */

html, body {
  background: var(--bg);
  color: var(--ink);
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .display {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.eyebrow, .label, .kicker {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}

.mono, .coord, .stat, code {
  font-family: 'JetBrains Mono', monospace;
}

a {
  color: var(--green);
}
a:hover {
  color: var(--purple);
}

/* Generic surfaces — flat, contemporary: no gilt corner-flourish SVGs, no gold-glow
   text-shadows, tighter radii than the old parchment-panel look. */

.panel, .card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.panel-raised {
  background: var(--bg-panel-raised);
}

.well {
  background: var(--bg-well);
  border-radius: 8px;
}

hr, .hairline {
  border-color: var(--hairline);
}

/* Buttons — green primary */
.btn, button.primary {
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s ease;
}
.btn:hover, button.primary:hover {
  filter: brightness(1.08);
}
.btn.secondary, button.secondary {
  background: transparent;
  color: var(--purple);
  border: 1px solid var(--purple);
  border-radius: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  cursor: pointer;
}

/* Selection / active states use purple so they never collide with green's
   "primary interactive" role or gold's "label" role. */
.active, .selected, [aria-selected="true"] {
  color: var(--purple);
}
::selection {
  background: var(--purple-glow);
}

/* ============================================================
   Site-wide brand chrome — nav / hero / plate-hero / footer.
   Fixed deep-purple + gold identity, shared verbatim across the
   homepage and all four plate pages. Deliberately NOT part of the
   --bg/--ink light-dark toggle above: that toggle still governs
   each page's own content area (panels, canvases, legends); this
   chrome always looks the same regardless of theme.
   ============================================================ */

:root {
  --brand-purple-deep: #2A1A45;
  --brand-purple-deep-2: #35225A;
  --brand-purple-mid: #5B3E8E;
  --brand-gold: #C9A227;
  --brand-gold-pale: #E8D9A0;
}

.wordmark, .hero-title, .plate-title {
  font-family: Copperplate, 'Copperplate Gothic Light', Cinzel, serif;
}

/* ---- Nav ---- */
.site-nav { position: sticky; top: 0; z-index: 20; background: var(--brand-purple-deep); border-bottom: 1px solid rgba(232, 217, 160, .15); }
.nav-inner { max-width: 1200px; margin: 0 auto; padding: 16px clamp(20px, 4vw, 40px); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.wordmark { font-size: 19px; letter-spacing: .04em; color: var(--brand-gold-pale); text-decoration: none; }
.nav-links { display: flex; gap: clamp(14px, 2.5vw, 30px); flex-wrap: wrap; }
.nav-links a { font-family: 'Inter', sans-serif; font-size: 13.5px; letter-spacing: .04em; color: var(--brand-gold-pale); text-decoration: none; opacity: .78; transition: opacity .15s ease, color .15s ease; }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--brand-gold); opacity: 1; outline: none; }
.nav-links a.active { opacity: 1; color: var(--brand-gold); border-bottom: 1px solid var(--brand-gold); padding-bottom: 2px; }

/* ---- Compact plate-page hero (homepage's tall .hero stays defined locally there) ---- */
.plate-hero {
  background: linear-gradient(160deg, var(--brand-purple-deep), var(--brand-purple-deep-2));
  color: var(--brand-gold-pale);
  text-align: center;
  padding: clamp(34px, 6vw, 56px) clamp(20px, 5vw, 56px) clamp(28px, 5vw, 44px);
}
.plate-hero-inner { max-width: 760px; margin: 0 auto; }
.plate-num-badge { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--brand-gold); border-radius: 50%; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .04em; color: var(--brand-gold); margin: 0 0 16px; }
.plate-eyebrow { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 11.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--brand-gold); margin: 0 0 12px; }
.plate-title { font-weight: 700; font-size: clamp(28px, 5vw, 44px); letter-spacing: .01em; margin: 0 0 12px; color: var(--brand-gold-pale); text-wrap: balance; }
.plate-strap { font-family: 'Inter', sans-serif; font-size: clamp(14px, 1.5vw, 16px); line-height: 1.6; color: rgba(232, 217, 160, .82); max-width: 620px; margin: 0 auto; text-wrap: balance; }

/* ---- Footer ---- */
.site-footer { background: var(--brand-purple-deep-2); color: var(--brand-gold-pale); padding: clamp(28px, 5vw, 44px) clamp(20px, 5vw, 56px); }
.footer-inner { max-width: 1200px; margin: 0 auto; display: flex; gap: 32px; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
.footer-inner p { margin: 0; font-family: 'Inter', sans-serif; font-size: 13.5px; line-height: 1.65; color: rgba(232, 217, 160, .82); max-width: 620px; }
.footer-inner strong { color: var(--brand-gold); font-weight: 700; }
.footer-inner .sources { font-family: 'Inter', sans-serif; font-size: 11.5px; letter-spacing: .02em; color: rgba(232, 217, 160, .65); text-align: right; line-height: 1.8; }

@media (max-width: 640px) {
  .footer-inner .sources { text-align: left; }
}