/* ============================================================
   maid.quest — victorian-ornate fluorescent codex
   ============================================================ */

:root {
  --oak-gall: #231711;        /* deepest text */
  --oak-tannin: #3b2a1d;      /* ornament base, hatching */
  --mushroom-paper: #f4ecd8;  /* page substrate */
  --vellum-shadow: #d9c7a4;   /* secondary blocks */
  --tarnished-brass: #8b6f47; /* rules, pointers */
  --dopamine-magenta: #ff2e88;
  --dopamine-chartreuse: #b6ff3a;
  --dopamine-cyan: #00f5d4;

  --rail-hue: 0deg;

  --rail-w: 84px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--mushroom-paper);
  color: var(--oak-gall);
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.7;
  font-feature-settings: "onum" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- page grain ---------- */
.page-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.04;
  mix-blend-mode: multiply;
}
.page-grain svg { width: 100%; height: 100%; }

/* ============================================================
   FRONTISPIECE
   ============================================================ */
.frontispiece {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4vh 5vw;
  position: relative;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(217,199,164,0.5), transparent 60%),
    var(--mushroom-paper);
}

.cartouche {
  position: relative;
  width: min(840px, 92vw);
  padding: clamp(2rem, 6vw, 5rem) clamp(1.5rem, 6vw, 6rem);
}

.cartouche-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cartouche-neon {
  mix-blend-mode: multiply;
  animation: cartoucheFlicker 6s ease-in-out infinite;
}
@keyframes cartoucheFlicker {
  0%, 100% { opacity: 0.85; }
  45% { opacity: 0.6; }
  70% { opacity: 0.95; }
}

.cartouche-content {
  position: relative;
  text-align: center;
}

.imprint {
  font-family: "IM Fell English SC", "EB Garamond", serif;
  text-transform: lowercase;
  letter-spacing: 0.32em;
  color: var(--tarnished-brass);
  font-size: 0.8rem;
}
.imprint-top { margin-bottom: 1.4rem; }
.imprint-bottom { margin-top: 2rem; font-size: 0.72rem; letter-spacing: 0.22em; }

.domain-title {
  font-family: "UnifrakturCook", "EB Garamond", serif;
  font-weight: 700;
  font-size: clamp(3.4rem, 12vw, 7.5rem);
  line-height: 0.95;
  color: var(--oak-gall);
  letter-spacing: 0;
  text-shadow: 0 0 0 transparent;
  position: relative;
}
.domain-title::after {
  content: "";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  top: 0.18em;
  width: 0.5em; height: 0.5em;
  pointer-events: none;
}

.subtitle {
  font-family: "IM Fell English SC", "EB Garamond", serif;
  font-style: italic;
  font-size: clamp(0.9rem, 1.6vw, 1.05rem);
  letter-spacing: 0.04em;
  color: var(--oak-tannin);
  max-width: 36rem;
  margin: 1.6rem auto 2rem;
}

.begin-link {
  display: inline-block;
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.16em;
  font-size: 1rem;
  color: var(--oak-gall);
  text-decoration: none;
  padding: 0.55rem 1.5rem;
  border: 1.5px solid var(--oak-tannin);
  border-radius: 2px;
  background: var(--mushroom-paper);
  transition: color 0.35s, border-color 0.35s, box-shadow 0.35s;
  position: relative;
}
.begin-link::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--tarnished-brass);
  border-radius: 1px;
  pointer-events: none;
}
.begin-link:hover {
  color: var(--dopamine-magenta);
  border-color: var(--dopamine-magenta);
  box-shadow: 0 0 18px rgba(255,46,136,0.35);
}
.manicule-inline { font-style: normal; }

.scroll-cue {
  position: absolute;
  bottom: 2.5vh;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.6rem;
  color: var(--tarnished-brass);
  animation: scrollBob 2.4s ease-in-out infinite;
}
@keyframes scrollBob {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.6; }
  50% { transform: translate(-50%, 8px); opacity: 1; }
}

/* ============================================================
   CODEX GRID + ORNAMENT RAILS
   ============================================================ */
.codex {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr var(--rail-w);
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
  background: var(--mushroom-paper);
}

.ornament-rail {
  position: relative;
}
.rail-left { grid-column: 1; }
.rail-right { grid-column: 3; }

.rail-base, .rail-neon {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 48px auto;
}

/* Base engraving — oak-tannin acanthus/ivy/wheat rotating motif strip */
.rail-base {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='576' viewBox='0 0 96 576'><g fill='none' stroke='%233b2a1d' stroke-width='1.5'><path d='M48 0 C30 24 30 48 48 60 C66 48 66 24 48 0 Z M48 60 C36 76 36 90 48 96 M30 30 C12 36 8 50 18 64 M66 30 C84 36 88 50 78 64'/><path d='M24 96 C24 120 36 132 48 132 C60 132 72 120 72 96 M48 132 V160 M40 110 Q48 102 56 110 M30 100 Q24 116 32 124 M66 100 Q72 116 64 124 M48 160 V192'/><path d='M40 192 V224 M48 192 V224 M56 192 V224 M36 200 L40 196 L44 200 M44 200 L48 196 L52 200 M52 200 L56 196 L60 200 M40 224 Q44 232 40 240 M48 224 V240 M56 224 Q52 232 56 240 M48 240 V272'/><path d='M48 272 C30 296 30 320 48 332 C66 320 66 296 48 272 Z M48 332 V360 M28 300 Q14 314 24 326 M68 300 Q82 314 72 326'/><path d='M40 360 Q24 380 40 396 M40 396 Q56 396 56 380 Q56 396 72 396 M72 396 Q72 380 56 376 M40 360 Q40 376 56 376 M48 396 V432 M48 432 C36 448 36 462 48 468 C60 462 60 448 48 432 Z M48 468 V496'/><path d='M44 496 Q28 516 44 532 Q60 516 44 496 M52 504 Q68 524 52 540 Q36 524 52 504 M40 520 Q48 512 56 520 M48 540 V576'/></g></svg>");
}

/* Electrified offset stroke layer — hue rotates on scroll */
.rail-neon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='576' viewBox='0 0 96 576'><g fill='none' stroke='%23ff2e88' stroke-width='1.5' opacity='0.9' transform='translate(2,2)'><path d='M48 0 C30 24 30 48 48 60 C66 48 66 24 48 0 Z M48 60 C36 76 36 90 48 96 M30 30 C12 36 8 50 18 64 M66 30 C84 36 88 50 78 64'/><path d='M24 96 C24 120 36 132 48 132 C60 132 72 120 72 96 M48 132 V160 M40 110 Q48 102 56 110 M30 100 Q24 116 32 124 M66 100 Q72 116 64 124 M48 160 V192'/><path d='M40 192 V224 M48 192 V224 M56 192 V224 M36 200 L40 196 L44 200 M44 200 L48 196 L52 200 M52 200 L56 196 L60 200 M40 224 Q44 232 40 240 M48 224 V240 M56 224 Q52 232 56 240 M48 240 V272'/><path d='M48 272 C30 296 30 320 48 332 C66 320 66 296 48 272 Z M48 332 V360 M28 300 Q14 314 24 326 M68 300 Q82 314 72 326'/><path d='M40 360 Q24 380 40 396 M40 396 Q56 396 56 380 Q56 396 72 396 M72 396 Q72 380 56 376 M40 360 Q40 376 56 376 M48 396 V432 M48 432 C36 448 36 462 48 468 C60 462 60 448 48 432 Z M48 468 V496'/><path d='M44 496 Q28 516 44 532 Q60 516 44 496 M52 504 Q68 524 52 540 Q36 524 52 504 M40 520 Q48 512 56 520 M48 540 V576'/></g></svg>");
  mix-blend-mode: multiply;
  filter: hue-rotate(var(--rail-hue));
}

/* ============================================================
   CHRONICLE
   ============================================================ */
.chronicle {
  grid-column: 2;
  padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 4vw, 3.5rem) 4rem;
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
}

/* central spine line */
.chronicle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 1px;
  background: repeating-linear-gradient(to bottom, var(--tarnished-brass) 0 8px, transparent 8px 18px);
  opacity: 0.28;
}

/* ---------- chapter ---------- */
.chapter {
  position: relative;
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 6rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.chapter + .chapter {
  border-top: 1px solid rgba(139,111,71,0.25);
}

/* ---------- headpiece ---------- */
.headpiece {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  margin-bottom: 1.6rem;
}
.headpiece .emblem {
  width: 80px; height: 80px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.flourish {
  font-size: 1.6rem;
  color: var(--tarnished-brass);
  line-height: 1;
  opacity: 0.7;
}
.emblem .spark {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease;
  filter: drop-shadow(0 0 6px currentColor);
}
.emblem circle.spark { color: var(--dopamine-magenta); }

/* ---------- marginal timestamp ---------- */
.marginal {
  display: block;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tarnished-brass);
  background: var(--vellum-shadow);
  border: 1px solid rgba(139,111,71,0.45);
  padding: 0.35rem 0.9rem;
  width: max-content;
  margin-bottom: 1.4rem;
  opacity: 0;
  transition: opacity 0.7s ease 0.2s;
}
.chapter:nth-child(odd) .marginal { margin-left: auto; }
.chapter:nth-child(even) .marginal { margin-right: auto; }

/* stagger: odd chapters lean body left, even lean right */
.chapter:nth-child(odd) .opening,
.chapter:nth-child(odd) > p { max-width: 38rem; margin-right: auto; }
.chapter:nth-child(even) .opening,
.chapter:nth-child(even) > p { max-width: 38rem; margin-left: auto; }

/* ---------- chapter title ---------- */
.chapter-title {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-size: clamp(1.75rem, 4vw, 3rem);
  letter-spacing: 0.08em;
  font-feature-settings: "smcp" 1;
  font-variant-caps: small-caps;
  text-transform: lowercase;
  color: var(--oak-gall);
  text-align: center;
  margin-bottom: 2rem;
  line-height: 1.1;
}
.chapter:nth-child(odd) .chapter-title,
.chapter:nth-child(even) .chapter-title { text-align: center; }

/* ---------- body paragraphs ---------- */
.chapter p {
  margin-bottom: 1.2rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.chapter p:last-child { margin-bottom: 0; }

/* ---------- drop cap ---------- */
.opening { position: relative; }
.dropcap {
  font-family: "UnifrakturCook", serif;
  font-size: clamp(5rem, 12vw, 9rem);
  line-height: 0.85;
  float: left;
  margin: 0.08em 0.12em -0.02em -0.04em;
  color: var(--oak-gall);
  position: relative;
}
.dropcap::before {
  content: "";
  position: absolute;
  inset: -6px -6px 0 -6px;
  background:
    repeating-linear-gradient(30deg, var(--oak-tannin) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(120deg, var(--oak-tannin) 0 1px, transparent 1px 4px),
    var(--mushroom-paper);
  z-index: -1;
  opacity: 0.85;
}
.dropcap::after {
  content: "";
  position: absolute;
  top: 6px; left: 6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-neon, var(--dopamine-magenta));
  box-shadow: 0 0 12px currentColor;
  color: var(--accent-neon, var(--dopamine-magenta));
  transform: scale(0);
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* per-chapter neon accent assignment (every third = magenta; div-by-3 also gets cyan dot variation) */
.chapter:nth-child(3n+1) { --accent-neon: var(--dopamine-magenta); }
.chapter:nth-child(3n+2) { --accent-neon: var(--dopamine-chartreuse); }
.chapter:nth-child(3n)   { --accent-neon: var(--dopamine-cyan); }

.chapter:nth-child(3n+2) .emblem circle.spark { color: var(--dopamine-chartreuse); }
.chapter:nth-child(3n) .emblem circle.spark,
.chapter:nth-child(3n) .emblem path.spark { color: var(--dopamine-cyan); stroke: var(--dopamine-cyan); }
.emblem path.spark { color: var(--dopamine-cyan); filter: drop-shadow(0 0 6px currentColor); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 0.8s cubic-bezier(0.34,1.56,0.64,1), opacity 0.5s ease; }

/* ---------- phosphor highlight ---------- */
.phosphor {
  background: transparent;
  color: var(--oak-gall);
  position: relative;
  padding: 0 0.12em;
  white-space: normal;
}
.phosphor::before {
  content: "";
  position: absolute;
  left: -0.08em; right: -0.08em;
  top: 0.12em; bottom: -0.05em;
  background: var(--accent-neon, var(--dopamine-magenta));
  opacity: 0.42;
  z-index: -1;
  border-radius: 0.45em 0.6em 0.4em 0.7em / 0.9em 0.7em 1em 0.6em;
  transform: rotate(-0.6deg);
  filter: blur(0.3px);
}

/* ---------- in-view state (set by IntersectionObserver) ---------- */
.chapter.in-view .emblem { opacity: 1; transform: translateY(0); }
.chapter.in-view .emblem .spark,
.chapter.in-view .emblem path.spark { opacity: 1; transform: scale(1); }
.chapter.in-view .dropcap::after { transform: scale(1); }
.chapter.in-view .marginal { opacity: 1; }
.chapter.in-view p { opacity: 1; transform: translateY(0); }

/* ============================================================
   COLOPHON
   ============================================================ */
.colophon {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) 1.5rem clamp(4rem, 10vw, 7rem);
  text-align: center;
}
.colophon-text {
  font-family: "IM Fell English SC", "EB Garamond", serif;
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  line-height: 2;
  color: var(--oak-tannin);
}
.colophon-text em { font-style: italic; }
.colophon-rule {
  border: none;
  border-top: 1px solid var(--tarnished-brass);
  width: 40%;
  margin: 2rem auto;
  opacity: 0.6;
}
.manicule {
  width: 32px; height: 32px;
  margin: 0.5rem auto;
  display: block;
  filter: drop-shadow(0 0 8px rgba(182,255,58,0.5));
}
.colophon-end {
  font-family: "IM Fell English SC", "EB Garamond", serif;
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  text-transform: lowercase;
  color: var(--tarnished-brass);
  margin-top: 0.6rem;
}

/* ============================================================
   RESPONSIVE — mobile rails 36px
   ============================================================ */
@media (max-width: 720px) {
  :root { --rail-w: 36px; }
  .rail-base, .rail-neon { background-size: 30px auto; }
  body { font-size: 1.05rem; }
  .chronicle { padding-left: 0.75rem; padding-right: 0.75rem; }
  .dropcap { font-size: clamp(4rem, 16vw, 6rem); }
  .chronicle::before { display: none; }
  .headpiece { gap: 0.7rem; }
  .flourish { font-size: 1.1rem; }
}

@media (max-width: 420px) {
  .cartouche { padding: 2rem 1.2rem; }
}