/* ============================================================
   shared.css — Veiled Codex shared base styles
   Loaded before each page's <style> block so per-file
   :root variables and character-specific rules take priority.
============================================================ */

/* ----- Google Fonts ----- */
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* ----- Box model reset ----- */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ----- Base HTML / Body ----- */
html, body {
  margin: 0;
  padding: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ----- Noise texture overlay ----- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ----- Heading base ----- */
h1, h2, h3, h4 {
  font-family: "Cinzel", serif;
  font-weight: 500;
  letter-spacing: 0.06em;
  margin: 0;
}

/* ----- Back link (fixed top-left navigation) ----- */
.back-link {
  position: fixed;
  top: 22px;
  left: 22px;
  z-index: 300;
  font-family: "Cinzel", serif;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold);
  padding: 8px 14px;
  border: 1px solid var(--gold-dim);
  background: rgba(7, 7, 14, 0.85);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  backdrop-filter: blur(6px);
  transition: gap 0.3s, border-color 0.3s, color 0.3s;
}

.back-link:hover {
  gap: 16px;
  border-color: var(--gold);
  color: var(--ink);
}

.back-link .arr {
  width: 14px;
  height: 1px;
  background: currentColor;
  position: relative;
}

.back-link .arr::after {
  content: "";
  position: absolute;
  left: 0;
  top: -3px;
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-left: 1px solid currentColor;
  transform: rotate(-45deg);
}

/* ----- Reading progress bar ----- */
#read-progress {
  position: fixed;
  top: 0; left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--gold, #c9a45c), var(--gold-bright, #f6efd2));
  z-index: 999;
  transition: width 0.1s linear;
  pointer-events: none;
}

/* ----- Folio nav (prev / next) ----- */
.folio-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 0 12px;
  border-top: 1px solid var(--line, #2a2a35);
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}
.folio-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Cinzel", serif;
  font-size: 0.60rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-mute, #7a7461);
  padding: 9px 16px;
  border: 1px solid var(--line, #2a2a35);
  background: rgba(7, 7, 14, 0.6);
  backdrop-filter: blur(4px);
  transition: color 0.3s, border-color 0.3s, gap 0.3s;
}
.folio-nav-link:hover {
  color: var(--gold, #c9a45c);
  border-color: var(--gold-dim, #8a6f3a);
  gap: 14px;
}
.folio-nav-link .fn-arr {
  width: 16px; height: 1px;
  background: currentColor;
  position: relative;
  flex-shrink: 0;
}
.folio-nav-link.prev .fn-arr::after,
.folio-nav-link.next .fn-arr::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 6px; height: 6px;
  border-style: solid;
  border-width: 1px 0 0 1px;
  transform: rotate(-45deg);
}
.folio-nav-link.prev .fn-arr::after { left: 0; }
.folio-nav-link.next .fn-arr::after {
  right: 0; left: auto;
  border-width: 1px 1px 0 0;
}
.folio-nav-link .fn-label { display: flex; flex-direction: column; gap: 2px; }
.folio-nav-link .fn-num  { font-size: 0.52rem; color: var(--gold-dim, #8a6f3a); letter-spacing: 0.3em; }
.folio-nav-link .fn-name { font-size: 0.64rem; color: inherit; }
.folio-nav-spacer { flex: 1; }
@media (max-width: 480px) {
  .folio-nav { padding: 20px 0 8px; }
  .folio-nav-link { padding: 7px 12px; gap: 8px; }
  .folio-nav-link .fn-num { display: none; }
  .folio-nav-link .fn-name { font-size: 0.58rem; }
}
.folio-nav-keys {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  pointer-events: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.46rem; letter-spacing: 0.06em;
  color: var(--ink-faint, #4a4636); opacity: 0.6;
  white-space: nowrap;
}
.folio-nav-keys kbd {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line, #2a2a35);
  padding: 1px 4px; border-radius: 2px; font-size: 0.9em;
}
@media (max-width: 480px) { .folio-nav-keys { display: none; } }
@media print { .folio-nav-keys { display: none !important; } }

/* ----- Scroll-to-top button ----- */
#scroll-top {
  position: fixed;
  bottom: 24px; right: 22px;
  z-index: 300;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(7,7,10,.82);
  border: 1px solid var(--gold-dim, #8a6f3a);
  color: var(--gold, #c9a45c);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, border-color .2s, color .2s;
  backdrop-filter: blur(4px);
}
#scroll-top.show { opacity: 1; pointer-events: auto; }
#scroll-top:hover { color: var(--gold-bright, #f6efd2); border-color: var(--gold, #c9a45c); }

/* ----- Page container ----- */
.page {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 40px) clamp(40px, 6vw, 80px);
  position: relative;
}

/* ----- Print styles (shared baseline) ----- */
@media print {
  /* hide all fixed / interactive UI */
  .back-link,
  #read-progress,
  #scroll-top,
  .folio-nav,
  .music-ctrl,
  #bg-audio { display: none !important; }

  /* strip dark backgrounds, set legible defaults */
  html, body {
    background: #fff !important;
    color: #111 !important;
  }
  body::before { display: none !important; } /* noise overlay */

  /* remove backdrop-filter (unsupported in most print engines) */
  * { backdrop-filter: none !important; }

  /* ensure anchors don't clutter output */
  a { color: #111 !important; text-decoration: none !important; }
}