/* Site-wide theme: palette, type and light/dark mode for every page.
   Loaded last on each page, so it also re-maps the older colour variables (--teal, --yellow…)
   onto the palette. html[data-theme] is set before first paint by the inline script in <head>
   and switched by the toggle in the nav (theme.js). */

/* ---------- Palette: "Amethyst & Orchid" ----------
   Jewel tones that stay vivid without shouting: amethyst carries the voice (links, italics,
   labels), orchid warms it (underlines, highlights), sapphire and blush only appear as light. */
:root, html[data-theme="light"] {
  color-scheme: light;
  --bg: #fcfbfe;
  --bg-2: #f4f0fb;
  --surface: rgba(255,255,255,.72);
  --surface-solid: #ffffff;
  --ink: #241b47;
  --text: #3d3560;
  --muted: #6c6690;
  --faint: #a9a3c4;
  --accent: #6a48d7;
  --accent-2: #b8478f;
  --accent-3: #4f6bdb;
  --accent-4: #9b4fc9;
  --on-accent: #ffffff;
  --fill: #6a48d7;
  --band: linear-gradient(115deg, #5a3cc8 0%, #7d44b8 55%, #a8458f 100%);
  --line: rgba(106,72,215,.16);
  --glow-1: #cdbef7;
  --glow-2: #f6c6df;
  --glow-3: #bfd0fb;
  --glow-4: #f3d9f0;
  --glow-alpha: .55;
  --glow-blend: multiply;
  --shadow: 0 30px 80px -24px rgba(74,44,160,.18);
  --grad: linear-gradient(90deg, var(--accent), var(--accent-2));
  --grad-text: linear-gradient(100deg, #6a48d7 0%, #9a4fc4 55%, #c4528f 100%);
  --nav-bg: rgba(252,251,254,.78);
  --water-top: color-mix(in srgb, #e9e1fb 55%, transparent);
  --water-deep: color-mix(in srgb, #d3c6f4 70%, transparent);
  --shaft: rgba(255,255,255,.5);

  /* Older names used around the site, now pointing into the palette. */
  --teal: var(--accent);
  --teal-light: var(--accent);
  --teal-name: var(--ink);
  --teal-hero: var(--accent);
  --yellow: var(--accent-2);
  --grey: var(--muted);
  --contact-bg: var(--bg-2);
  --contact-muted: var(--muted);
  --arc-bg: var(--bg);

  --serif: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #160634;
  --bg-2: #1f0b47;
  --surface: rgba(255,255,255,.06);
  --surface-solid: #221050;
  --ink: #f4efff;
  --text: #ddd4f6;
  --muted: #a99ccf;
  --faint: #6e5f9c;
  --accent: #b9a0ff;
  --accent-2: #f08bcb;
  --accent-3: #93a8ff;
  --accent-4: #d7a0f5;
  --on-accent: #160634;
  --fill: #7656e0;
  --band: linear-gradient(115deg, #3d2399 0%, #5e2c94 55%, #85306f 100%);
  --line: rgba(185,160,255,.18);
  --glow-1: #5b2bc2;
  --glow-2: #9c2f8a;
  --glow-3: #2f3db8;
  --glow-4: #3d1a8f;
  --glow-alpha: .5;
  --glow-blend: screen;
  --shadow: 0 30px 80px -24px rgba(0,0,0,.5);
  --grad-text: linear-gradient(100deg, #c9b6ff 0%, #e6a2e6 55%, #ff9ccc 100%);
  --nav-bg: rgba(22,6,52,.72);
  --water-top: rgba(42,18,99,.55);
  --water-deep: rgba(11,2,34,.85);
  --shaft: rgba(255,255,255,.07);
}
/* ---------- Base ---------- */
html { background: var(--bg); transition: background-color .5s ease; }
body { background: transparent !important; color: var(--text); font-family: var(--sans); }
body, .nav, .chapter, .about, .journey, .touch, .bg-stage .card { transition: background-color .5s ease, color .5s ease, border-color .5s ease; }

/* Light in the background: soft, slow-drifting colour behind every page. */
body::before { content: ""; position: fixed; inset: -10vmax; z-index: -1; pointer-events: none; opacity: var(--glow-alpha);
  background:
    radial-gradient(38vmax 38vmax at 12% 18%, var(--glow-1), transparent 70%),
    radial-gradient(34vmax 34vmax at 88% 12%, var(--glow-2), transparent 70%),
    radial-gradient(40vmax 40vmax at 78% 82%, var(--glow-3), transparent 70%),
    radial-gradient(30vmax 30vmax at 18% 88%, var(--glow-4), transparent 70%);
  filter: blur(40px); animation: ambient 48s ease-in-out infinite alternate; }
@keyframes ambient { to { transform: translate(3vmax, -2vmax) rotate(4deg) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

/* ---------- Type ---------- */
.display, .serif { font-family: var(--serif) !important; font-weight: 300; letter-spacing: -.01em; }
.display.w5, .display.w6, .display.w7, .display.w8 { font-weight: 400; }
.grad-text, .display strong, .display em { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.w7, .w8 { font-weight: 600; }

/* ---------- Icons drawn from the SVG files as masks, so they take the theme colour ---------- */
.mk { display: block; background: var(--mk, currentColor); -webkit-mask: var(--src) center / 100% 100% no-repeat; mask: var(--src) center / 100% 100% no-repeat; }
.logo-mk { position: absolute; inset: 0; --mk: var(--accent); }

/* ---------- Navigation ---------- */
.nav { background: var(--nav-bg) !important; -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 1px 0 var(--line); }
.nav-item { color: var(--muted) !important; font-family: var(--sans); font-weight: 500 !important; letter-spacing: .4px; margin-left: -44px; transition: color .3s ease; }
.nav-item:hover, .nav-item:focus-visible { color: var(--ink) !important; }
.nav-item i { background: var(--grad) !important; }
.nav-item .mk { --mk: var(--muted); }
.nav-item:hover .mk { --mk: var(--accent); }

.theme-toggle { position: absolute; left: 1392px; top: 21px; width: 32px; height: 32px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--accent); cursor: pointer;
  display: grid; place-items: center; transition: border-color .3s ease, transform .4s cubic-bezier(.22,1,.36,1), background-color .5s ease; }
.theme-toggle:hover, .theme-toggle:focus-visible { border-color: var(--accent); transform: rotate(-18deg); }
.theme-toggle svg { width: 16px; height: 16px; grid-area: 1 / 1; transition: opacity .4s ease, transform .5s cubic-bezier(.22,1,.36,1); }
.theme-toggle .moon { opacity: 0; transform: rotate(-60deg) scale(.6); }
html[data-theme="dark"] .theme-toggle .sun { opacity: 0; transform: rotate(60deg) scale(.6); }
html[data-theme="dark"] .theme-toggle .moon { opacity: 1; transform: none; }

/* ---------- Chapter pages ---------- */
body.paper, .paper .chapter, .chapter { background: transparent !important; }
.crumb { color: var(--accent) !important; font-family: var(--sans); font-weight: 500; letter-spacing: 2.4px; }
.label { font-family: var(--sans); font-weight: 600 !important; font-size: 12px !important; letter-spacing: 2.6px !important; color: var(--accent) !important; }
.pager { color: var(--accent) !important; font-family: var(--sans); font-weight: 500; letter-spacing: 1.2px; }
.pager.light { color: #fff !important; }
.ul::after { background: var(--grad) !important; }
.c-ink { color: var(--ink) !important; } .c-grey { color: var(--muted) !important; }
.c-teal, .c-tl { color: var(--accent) !important; }
.hl { color: var(--accent) !important; font-weight: 500; }
.badge { background: var(--fill) !important; }
.card { background: var(--surface) !important; border: 1px solid var(--line); box-shadow: var(--shadow) !important;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-radius: 14px !important; }
.back { border-color: var(--line) !important; background: var(--surface) !important; color: var(--accent) !important; font-family: var(--sans); }
.back:hover, .back:focus-visible { border-color: var(--accent) !important; box-shadow: var(--shadow) !important; }
.photo { border-radius: 10px; }
.chapter .small, .chapter .quote, .chapter .note, .chapter .stat span { font-weight: 300; }
.c-white { color: #fff !important; }
.nav-icon { display: block; width: 100%; height: 100%; overflow: visible; color: var(--muted); transition: color .3s ease; }
.nav-item:hover .nav-icon, .nav-item:focus-visible .nav-icon { color: var(--accent); }

/* ---------- Horizons: the one nav item that carries a highlight ----------
   Echoes the .is-now card in the journey: glass surface, hairline border, soft lift. */
.nav-chip { position: absolute; top: 21px; margin-left: -44px; display: flex; align-items: center; gap: 7px;
  padding: 7px 14px 7px 11px; border-radius: 20px; border: 1px solid var(--line);
  background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--surface) 50%, transparent));
  -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px);
  box-shadow: 0 3px 12px -5px rgba(36,27,71,.22);
  color: var(--accent); font-family: var(--sans); font-weight: 600; font-size: 11.5px; letter-spacing: .4px;
  white-space: nowrap; text-decoration: none;
  transition: border-color .3s ease, color .3s ease, transform .4s cubic-bezier(.22,1,.36,1), box-shadow .3s ease; }
.nav-chip svg { width: 15px; height: 15px; flex: none; }
.nav-chip:hover, .nav-chip:focus-visible { border-color: var(--accent-2); color: var(--accent-2);
  transform: translateY(-1px); box-shadow: 0 6px 18px -6px rgba(36,27,71,.28); }
.nav-chip[aria-current="page"] { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
html[data-theme="dark"] .nav-chip { box-shadow: 0 3px 12px -5px rgba(0,0,0,.5); }
html[data-theme="dark"] .nav-chip:hover, html[data-theme="dark"] .nav-chip:focus-visible { box-shadow: 0 6px 18px -6px rgba(0,0,0,.6); }

/* Where you are: the nav item for the section in view (or the page you're on) stays lit and underlined. */
.nav-item[aria-current] { color: var(--ink) !important; }
.nav-item[aria-current] .nav-icon { color: var(--accent); }

/* The underline sits under the words only (not the icon), so it is centred on what it underlines. */
.nav-item > i { display: none; }
.nav-item span { right: auto !important; }   /* hug the words, so the line matches them exactly */
.nav-item span::after { content: ""; position: absolute; left: 50%; right: 50%; top: calc(100% + 11px); height: 2px; border-radius: 1px;
  background: var(--grad); transition: left .3s, right .3s; }
.nav-item:hover span::after, .nav-item:focus-visible span::after, .nav-item[aria-current] span::after { left: 0; right: 0; }