/* ==========================================================
   THE COIL OF XAL'RETH — Official Sanctum Stylesheet
   Approved by the Inner Scale. Do not question the margins.
   ========================================================== */

:root {
  --void: #08050f;
  --void-2: #110a1d;
  --void-3: #1a1029;
  --scale: #4b2386;
  --scale-bright: #a66bff;
  --venom: #e0c4ff;
  --gold: #b98cff;
  --gold-dim: #7651b0;
  --bone: #ece6f5;
  --bone-dim: #b0a6c4;
  --blood: #b23a3a;
  --line: rgba(185, 140, 255, 0.22);
  --glow: 0 0 24px rgba(166, 107, 255, 0.25);
  /* Type: Abril Fatface for the big voice (h1, h2, drop caps, wordmark), Lato for everything else.
     --serif-display (labels, nav, buttons, small caps) and --serif-body keep their old names; see "THE FAT AND THE FINE". */
  --fat: "Abril Fatface", "Bodoni Moda", Didot, Georgia, serif;
  --serif-display: "Lato", "Segoe UI", Helvetica, Arial, sans-serif;
  --serif-body: "Lato", "Segoe UI", Helvetica, Arial, sans-serif;
  --max: 1080px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(75, 35, 134, 0.35), transparent 60%),
    radial-gradient(800px 500px at 100% 100%, rgba(185, 140, 255, 0.08), transparent 60%),
    var(--void);
  background-attachment: fixed;
  color: var(--bone);
  font-family: var(--serif-body);
  font-size: 1.2rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Faint scale texture over everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image:
    radial-gradient(circle at 50% 0%, transparent 58%, var(--scale-bright) 60%, transparent 62%);
  background-size: 28px 18px;
  z-index: 0;
}

a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--venom); }

img, svg { max-width: 100%; }

.wrap { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; padding: 0 16px; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(8, 5, 15, 0.88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--bone);
  text-decoration: none;
  font-family: var(--serif-display);
  letter-spacing: 0.12em;
  font-size: 1rem;
  white-space: nowrap;
}
.brand svg { width: 34px; height: 34px; flex: none; }
.brand:hover { color: var(--venom); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  color: var(--gold);
  font-family: var(--serif-display);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  padding: 8px 12px;
  border-radius: 2px;
  cursor: pointer;
}
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; flex-wrap: wrap; }
.site-nav a {
  display: block;
  padding: 8px 12px;
  font-family: var(--serif-display);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="page"] {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--void-2);
    border-bottom: 1px solid var(--line);
  }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; padding: 8px 16px 16px; }
  .site-nav a { padding: 12px 4px; border-bottom: 1px solid rgba(185,140,255,0.08); }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 88px 16px 72px;
  overflow: hidden;
}
.hero .sigil { width: min(240px, 60vw); height: auto; filter: drop-shadow(var(--glow)); animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: scale(1); opacity: .92; } 50% { transform: scale(1.03); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero .sigil { animation: none; } }

.eyebrow {
  font-family: var(--serif-display);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--scale-bright);
  margin: 0 0 12px;
}
h1, h2, h3, h4 {
  font-family: var(--serif-display);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: var(--bone);
}
.hero h1 {
  font-size: clamp(2.2rem, 7vw, 4.6rem);
  margin: 18px 0 8px;
  background: linear-gradient(180deg, #f4eaff 0%, var(--gold) 55%, var(--gold-dim) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 40px rgba(185, 140, 255, 0.15);
}
.hero .tagline {
  font-style: italic;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  color: var(--bone-dim);
  max-width: 640px;
  margin: 0 auto 32px;
}

.btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-block;
  font-family: var(--serif-display);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 22px;
  border: 1px solid var(--gold);
  color: var(--void);
  background: linear-gradient(180deg, #c9a2ff, var(--gold));
  border-radius: 2px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { color: var(--void); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(185,140,255,.25); }
.btn.ghost { background: transparent; color: var(--gold); }
.btn.ghost:hover { color: var(--venom); border-color: var(--venom); }

/* ---------- Page heads ---------- */
.page-head { position: relative; z-index: 1; text-align: center; padding: 64px 16px 24px; }
.page-head h1 { font-size: clamp(2rem, 5.5vw, 3.2rem); margin: 8px 0; color: var(--gold); }
.page-head p { color: var(--bone-dim); font-style: italic; max-width: 640px; margin: 0 auto; }

.divider {
  display: flex; align-items: center; gap: 14px;
  color: var(--gold-dim); margin: 40px auto; max-width: 420px;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dim), transparent); }
.divider span { font-family: var(--serif-display); letter-spacing: .3em; font-size: .8rem; }

/* ---------- Sections ---------- */
section { position: relative; z-index: 1; padding: 32px 0; }
section h2 { font-size: clamp(1.5rem, 3.6vw, 2.1rem); color: var(--gold); margin: 0 0 16px; }
section h3 { font-size: 1.2rem; margin: 0 0 8px; }
.lede { font-size: 1.35rem; color: var(--bone); }
.muted { color: var(--bone-dim); }
.prose { max-width: 720px; margin: 0 auto; }
.prose p { margin: 0 0 1.1em; }
.dropcap::first-letter {
  font-family: var(--serif-display);
  float: left;
  font-size: 3.6em;
  line-height: .85;
  padding: 6px 10px 0 0;
  color: var(--gold);
}

.grid { display: grid; gap: 20px; }
.grid.two { grid-template-columns: repeat(2, 1fr); }
.grid.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .grid.three { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid.two, .grid.three { grid-template-columns: 1fr; } }

.card {
  background: linear-gradient(180deg, rgba(26, 16, 41, 0.85), rgba(17, 10, 29, 0.85));
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 24px;
  position: relative;
}
.card::before {
  content: "";
  position: absolute; inset: 6px;
  border: 1px solid rgba(185,140,255,0.08);
  pointer-events: none;
}
.card .kicker {
  font-family: var(--serif-display);
  font-size: .72rem; letter-spacing: .25em; text-transform: uppercase;
  color: var(--scale-bright);
  margin: 0 0 6px;
}
.card p:last-child { margin-bottom: 0; }

/* Tenets list */
.tenets { counter-reset: tenet; list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.tenets li {
  counter-increment: tenet;
  display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: start;
  padding: 16px 0; border-bottom: 1px solid rgba(185,140,255,.1);
}
.tenets li::before {
  content: counter(tenet, upper-roman);
  font-family: var(--serif-display);
  color: var(--gold);
  font-size: 1.3rem;
  text-align: center;
  border: 1px solid var(--line);
  padding: 8px 0;
}
.tenets strong { color: var(--bone); font-family: var(--serif-display); font-weight: 600; letter-spacing: .04em; }

/* Timeline */
.timeline { position: relative; margin: 0 auto; max-width: 760px; padding-left: 28px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--gold), var(--scale), transparent); }
.era { position: relative; padding: 0 0 32px; }
.era::before {
  content: ""; position: absolute; left: -27px; top: 8px;
  width: 14px; height: 14px; transform: rotate(45deg);
  background: var(--void); border: 2px solid var(--gold);
}
.era h3 { color: var(--gold); margin-bottom: 2px; }
.era .when { font-family: var(--serif-display); font-size: .75rem; letter-spacing: .2em; color: var(--scale-bright); text-transform: uppercase; }

/* Priesthood */
.clergy { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.clergy .card { text-align: center; padding-top: 32px; }
.clergy .portrait {
  width: 120px; height: 120px; margin: 0 auto 16px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, var(--void-3), var(--void));
  box-shadow: var(--glow);
}
.clergy .portrait svg { width: 70px; height: 70px; }
.clergy h3 { font-size: 1.45rem; color: var(--gold); margin-bottom: 0; }
.clergy .title { font-style: italic; color: var(--scale-bright); margin: 2px 0 14px; }
.clergy dl { text-align: left; margin: 16px 0 0; font-size: 1.05rem; }
.clergy dt { font-family: var(--serif-display); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dim); margin-top: 10px; }
.clergy dd { margin: 2px 0 0; }

/* Ranks table */
.ranks { width: 100%; border-collapse: collapse; font-size: 1.08rem; }
.ranks th, .ranks td { padding: 12px 10px; border-bottom: 1px solid rgba(185,140,255,.12); text-align: left; vertical-align: top; }
.ranks th { font-family: var(--serif-display); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.ranks td:first-child { font-family: var(--serif-display); color: var(--bone); white-space: nowrap; }
@media (max-width: 600px) {
  .ranks thead { display: none; }
  .ranks tr { display: block; padding: 12px 0; border-bottom: 1px solid rgba(185,140,255,.12); }
  .ranks td { display: block; border: 0; padding: 2px 0; }
  .ranks td:first-child { color: var(--gold); }
}

/* Scripture */
.book { max-width: 760px; margin: 0 auto 40px; }
.book > h2 { text-align: center; }
.book > .muted { text-align: center; font-style: italic; margin-top: -6px; }
.verse {
  display: grid; grid-template-columns: 64px 1fr; gap: 12px;
  padding: 14px 0; border-bottom: 1px dashed rgba(185,140,255,.14);
}
.verse .ref { font-family: var(--serif-display); color: var(--gold-dim); font-size: .85rem; letter-spacing: .08em; padding-top: 4px; }
.verse p { margin: 0; }
.verse.highlight { background: linear-gradient(90deg, rgba(166,107,255,.12), transparent); }

.oracle {
  text-align: center;
  border: 1px solid var(--line);
  padding: 36px 20px;
  max-width: 760px; margin: 0 auto;
  background: radial-gradient(circle at 50% 0%, rgba(166,107,255,.12), transparent 70%), var(--void-2);
}
.oracle blockquote { font-size: clamp(1.25rem, 3vw, 1.6rem); font-style: italic; margin: 12px 0 8px; min-height: 3.2em; }
.oracle cite { display: block; font-family: var(--serif-display); font-style: normal; font-size: .8rem; letter-spacing: .2em; color: var(--gold-dim); margin-bottom: 20px; }

/* Addons */
.addon { display: flex; flex-direction: column; }
.addon .meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.tag {
  font-family: var(--serif-display);
  font-size: .66rem; letter-spacing: .15em; text-transform: uppercase;
  border: 1px solid var(--line); color: var(--bone-dim);
  padding: 3px 8px; border-radius: 2px;
}
.tag.green { border-color: rgba(166,107,255,.45); color: var(--scale-bright); }
.addon h3 { color: var(--gold); font-size: 1.3rem; }
.addon ul { padding-left: 20px; margin: 0 0 16px; font-size: 1.05rem; }
.addon .actions { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.addon .btn { padding: 11px 16px; font-size: .75rem; }
.addon code, .install code { font-family: ui-monospace, Consolas, monospace; font-size: .85em; background: rgba(0,0,0,.35); padding: 1px 6px; border-radius: 2px; color: var(--venom); }

.install ol { padding-left: 22px; }
.install li { margin-bottom: 10px; }

.notice {
  border-left: 3px solid var(--gold);
  background: rgba(185,140,255,.07);
  padding: 14px 18px; margin: 20px 0;
  font-size: 1.05rem;
}
.notice.warn { border-left-color: var(--blood); background: rgba(178,58,58,.08); }

/* Oath / join */
.oath {
  max-width: 680px; margin: 0 auto; text-align: center;
  font-size: 1.3rem; font-style: italic; line-height: 1.8;
  border: 1px solid var(--line); padding: 36px 24px;
  background: var(--void-2);
}
.oath .sign { font-family: var(--serif-display); font-style: normal; letter-spacing: .2em; color: var(--gold); margin-top: 20px; font-size: .9rem; }

.faq details {
  border-bottom: 1px solid rgba(185,140,255,.14);
  padding: 14px 0;
}
.faq summary {
  cursor: pointer;
  font-family: var(--serif-display);
  letter-spacing: .04em;
  color: var(--bone);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "◆ "; color: var(--gold-dim); }
.faq details[open] summary::before { color: var(--venom); }
.faq details p { margin: 10px 0 0 22px; color: var(--bone-dim); }

/* ---------- Footer ---------- */
.site-footer {
  position: relative; z-index: 1;
  margin-top: 64px;
  border-top: 1px solid var(--line);
  padding: 32px 0 48px;
  text-align: center;
  color: var(--bone-dim);
  font-size: 1rem;
}
.site-footer .chant { font-family: var(--serif-display); letter-spacing: .3em; color: var(--gold); font-size: .85rem; margin-bottom: 8px; }
.site-footer small { display: block; margin-top: 10px; font-size: .85rem; opacity: .75; }

/* Utility */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Long-form lore ---------- */
.toc {
  max-width: 760px; margin: 0 auto 8px;
  border: 1px solid var(--line); background: var(--void-2);
  padding: 20px 24px;
}
.toc p { margin: 0 0 8px; font-family: var(--serif-display); font-size: .75rem; letter-spacing: .25em; color: var(--gold); text-transform: uppercase; }
.toc ol { margin: 0; padding-left: 22px; columns: 2; column-gap: 32px; font-size: 1.05rem; }
.toc li { break-inside: avoid; margin-bottom: 4px; }
.toc a { color: var(--bone-dim); text-decoration: none; }
.toc a:hover { color: var(--venom); }
@media (max-width: 640px) { .toc ol { columns: 1; } }

.chapter { max-width: 720px; margin: 0 auto; padding: 40px 0 8px; scroll-margin-top: 80px; }
.chapter .num {
  display: block; font-family: var(--serif-display); font-size: .78rem; letter-spacing: .3em;
  color: var(--scale-bright); text-transform: uppercase; margin-bottom: 4px;
}
.chapter h2 { margin-bottom: 18px; }
.chapter h3 { color: var(--gold); margin-top: 28px; }
.chapter p { margin: 0 0 1.1em; }
.chapter blockquote {
  margin: 24px 0; padding: 16px 22px;
  border-left: 3px solid var(--gold); background: rgba(185,140,255,.06);
  font-style: italic; font-size: 1.25rem;
}
.chapter blockquote cite { display: block; font-style: normal; font-family: var(--serif-display); font-size: .75rem; letter-spacing: .18em; color: var(--gold-dim); margin-top: 8px; }
.chapter ul { padding-left: 22px; }
.chapter li { margin-bottom: 8px; }

.glossary { max-width: 760px; margin: 0 auto; }
.glossary dt { font-family: var(--serif-display); color: var(--gold); letter-spacing: .05em; margin-top: 18px; }
.glossary dd { margin: 4px 0 0; color: var(--bone); padding-bottom: 14px; border-bottom: 1px solid rgba(185,140,255,.1); }

.calendar { list-style: none; padding: 0; margin: 0; max-width: 760px; margin: 0 auto; }
.calendar li { display: grid; grid-template-columns: 150px 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid rgba(185,140,255,.12); }
.calendar .when { font-family: var(--serif-display); font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; color: var(--scale-bright); padding-top: 4px; }
.calendar h3 { margin: 0 0 4px; color: var(--gold); }
.calendar p { margin: 0; }
@media (max-width: 600px) { .calendar li { grid-template-columns: 1fr; gap: 4px; } }

.titles { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0 0; padding: 0; list-style: none; }
.titles li { border: 1px solid var(--line); padding: 6px 12px; font-family: var(--serif-display); font-size: .78rem; letter-spacing: .12em; color: var(--bone-dim); }

.callresponse { max-width: 560px; margin: 16px auto; border: 1px solid var(--line); background: var(--void-2); }
.callresponse div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 16px; border-bottom: 1px solid rgba(185,140,255,.08); }
.callresponse div:last-child { border-bottom: 0; }
.callresponse span { font-family: var(--serif-display); font-size: .72rem; letter-spacing: .2em; color: var(--gold-dim); text-transform: uppercase; padding-top: 5px; }
.callresponse em { color: var(--bone); }

.coils-diagram { display: block; width: min(420px, 100%); margin: 8px auto 24px; }

/* ==========================================================
   PURPLE VOID REDESIGN — Xal'Reth the Eternal
   ========================================================== */
body {
  background:
    radial-gradient(1100px 700px at 50% 0%, rgba(120, 60, 220, 0.28), transparent 65%),
    radial-gradient(700px 500px at 0% 100%, rgba(166, 107, 255, 0.10), transparent 60%),
    radial-gradient(700px 500px at 100% 60%, rgba(90, 30, 160, 0.14), transparent 60%),
    var(--void);
  background-attachment: fixed;
}
:root { --glow: 0 0 28px rgba(166, 107, 255, 0.45); --violet: #8a4dff; --violet-hot: #c9a2ff; }

/* Shimmering gradient headings */
.page-head h1, section h2, .hero h1 {
  background: linear-gradient(100deg, #f4eaff 0%, #b98cff 30%, #ffffff 45%, #a66bff 60%, #f4eaff 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 9s linear infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }

/* ---------- Hero ---------- */
.hero { padding: 48px 16px 64px; }
.hero h1 {
  font-size: clamp(2.3rem, 7.5vw, 5rem);
  margin: 8px 0 4px;
  filter: drop-shadow(0 0 22px rgba(166,107,255,.55));
}
.hero .epithet {
  font-family: var(--serif-display); letter-spacing: .4em; text-transform: uppercase;
  font-size: clamp(.8rem, 2vw, 1rem); color: var(--violet-hot); margin: 0 0 32px;
  text-shadow: 0 0 14px rgba(166,107,255,.8);
}

.portal {
  position: relative;
  width: min(560px, 100%);
  margin: 0 auto 36px;
  aspect-ratio: 2 / 3;
  isolation: isolate;
}
/* spinning aura ring */
.portal::before {
  content: ""; position: absolute; inset: -14px; z-index: -2; border-radius: 10px;
  background: conic-gradient(from var(--spin, 0deg), #2a0d55, #a66bff, #ffffff, #8a4dff, #2a0d55, #c9a2ff, #2a0d55);
  filter: blur(18px); opacity: .85;
  animation: spin 8s linear infinite;
}
/* sharp animated border */
.portal::after {
  content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: 6px;
  background: conic-gradient(from var(--spin, 0deg), #4b2386, #e0c4ff, #8a4dff, #1a1029, #b98cff, #4b2386);
  animation: spin 8s linear infinite;
}
@property --spin { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes spin { to { --spin: 360deg; } }

.portal .frame {
  position: absolute; inset: 0; overflow: hidden; border-radius: 4px; background: #000;
  box-shadow: 0 0 60px rgba(138,77,255,.55), 0 0 140px rgba(138,77,255,.25);
  animation: pulse 4.5s ease-in-out infinite;
}
.portal img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  animation: drift 18s ease-in-out infinite alternate;
  transform-origin: 50% 30%;
}
/* light sweep across the image */
.portal .frame::after {
  content: ""; position: absolute; inset: -50%;
  background: linear-gradient(115deg, transparent 40%, rgba(224,196,255,.22) 48%, rgba(255,255,255,.35) 50%, rgba(224,196,255,.22) 52%, transparent 60%);
  animation: sweep 6s ease-in-out infinite;
  mix-blend-mode: screen; pointer-events: none;
}
/* glowing eyes */
.portal .eyes {
  position: absolute; left: 50%; top: 13.9%; width: 9%; height: 2.6%; transform: translateX(-50%);
  background: radial-gradient(ellipse at 28% 50%, rgba(255,255,255,.95) 0 8%, rgba(200,140,255,.8) 20%, transparent 45%),
              radial-gradient(ellipse at 72% 50%, rgba(255,255,255,.95) 0 8%, rgba(200,140,255,.8) 20%, transparent 45%);
  filter: blur(1px); mix-blend-mode: screen; animation: eyes 3.2s ease-in-out infinite; pointer-events: none;
}
.portal canvas { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); pointer-events: none; z-index: 2; }

.portal figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 60px 16px 18px; text-align: center;
  background: linear-gradient(transparent, rgba(8,5,15,.92));
  font-family: var(--serif-display); letter-spacing: .3em; text-transform: uppercase; font-size: .78rem;
  color: var(--violet-hot);
}

@keyframes pulse { 0%,100% { box-shadow: 0 0 50px rgba(138,77,255,.5), 0 0 120px rgba(138,77,255,.2); } 50% { box-shadow: 0 0 80px rgba(166,107,255,.85), 0 0 200px rgba(138,77,255,.4); } }
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.09) translateY(-1.5%); } }
@keyframes sweep { 0% { transform: translateX(-60%); } 55%,100% { transform: translateX(60%); } }
@keyframes eyes { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .portal::before, .portal::after, .portal .frame, .portal img, .portal .frame::after, .portal .eyes,
  .page-head h1, section h2, .hero h1 { animation: none !important; }
}

/* Purple-tinted accents elsewhere */
.btn { color: #12081f; box-shadow: 0 0 18px rgba(166,107,255,.35); }
.btn:hover { color: #12081f; box-shadow: 0 0 30px rgba(166,107,255,.7); }
.btn.ghost { color: var(--violet-hot); border-color: var(--violet); box-shadow: none; }
.btn.ghost:hover { color: #fff; border-color: #fff; box-shadow: 0 0 20px rgba(166,107,255,.5); }
.card { transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
a.card:hover, .card.addon:hover { border-color: rgba(201,162,255,.6); box-shadow: 0 0 30px rgba(138,77,255,.3); transform: translateY(-2px); }
.site-nav a:hover, .site-nav a[aria-current="page"] { text-shadow: 0 0 12px rgba(166,107,255,.8); }
.brand svg { filter: drop-shadow(0 0 6px rgba(166,107,255,.8)); }

/* Addons page extras */
.addon-hero { text-align: center; max-width: 720px; margin: 0 auto 8px; }
.quick-dl { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 18px 0 8px; }
.quick-dl a { font-family: var(--serif-display); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--line); padding: 7px 12px; color: var(--bone-dim); }
.quick-dl a:hover { color: #fff; border-color: var(--violet); box-shadow: 0 0 14px rgba(166,107,255,.4); }
.addon { scroll-margin-top: 80px; }
.addon .usage { font-size: 1rem; color: var(--bone-dim); margin: -6px 0 14px; }
.addon .usage code { color: var(--violet-hot); }

.site-nav ul { flex-wrap: nowrap; gap: 0; }
.site-nav a { padding: 8px 10px; letter-spacing: .1em; }
@media (max-width: 860px) { .site-nav ul { flex-wrap: wrap; } }

/* Featured addon */
.addon.featured { padding: 32px; border-color: rgba(201,162,255,.5); box-shadow: 0 0 40px rgba(138,77,255,.25); }
.addon.featured h2 { font-size: clamp(1.9rem, 5vw, 2.8rem); margin-bottom: 8px; }
.featured-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; align-items: center; }
.stat-col { display: grid; gap: 14px; }
.stat { border: 1px solid var(--line); padding: 14px 16px; background: rgba(8,5,15,.5); text-align: center; }
.stat b { display: block; font-family: var(--serif-display); font-size: 1.9rem; color: var(--violet-hot); text-shadow: 0 0 16px rgba(166,107,255,.7); }
.stat span { font-size: .95rem; color: var(--bone-dim); }
.btn.big { padding: 16px 26px; font-size: .9rem; animation: btnglow 2.8s ease-in-out infinite; }
@keyframes btnglow { 0%,100% { box-shadow: 0 0 18px rgba(166,107,255,.45); } 50% { box-shadow: 0 0 38px rgba(201,162,255,.9); } }
@media (prefers-reduced-motion: reduce) { .btn.big { animation: none; } }
@media (max-width: 760px) { .featured-grid { grid-template-columns: 1fr; } .addon.featured { padding: 22px; } }
.cmds td:first-child { white-space: normal; }
.cmds code { font-family: ui-monospace, Consolas, monospace; font-size: .9em; color: var(--violet-hot); }
.install code, .cmds code, .addon code { overflow-wrap: anywhere; word-break: break-word; }
.meta { min-width: 0; } .featured-grid > * { min-width: 0; }
.addon .actions { align-items: stretch; } .addon .actions .btn { display: inline-flex; align-items: center; }

/* Canon */
.basket { text-align: center; max-width: 760px; margin: 72px auto 0; padding: 40px 16px 8px; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.basket h2 { font-size: clamp(1.9rem, 5vw, 2.8rem); margin: 6px 0 10px; }
.basket p:last-child { color: var(--bone-dim); font-style: italic; margin: 0; }
.chapter .book-sub { color: var(--bone-dim); font-style: italic; margin-top: -10px; }
.verses { margin: 8px 0 24px; }
.verses .verse { grid-template-columns: 40px 1fr; }
.canon-toc ol { columns: 1; }
.canon-toc li strong { color: var(--violet-hot); font-family: var(--serif-display); font-weight: 600; letter-spacing: .04em; font-size: .95rem; }
.canon-toc li:has(strong) { margin-top: 12px; list-style: none; margin-left: -22px; }
.canon-portrait { float: right; width: min(240px, 42%); margin: 6px 0 16px 24px; border: 1px solid var(--line); box-shadow: 0 0 30px rgba(138,77,255,.35); }
.canon-portrait img { display: block; width: 100%; height: auto; }
.canon-portrait figcaption { font-family: var(--serif-display); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--violet-hot); text-align: center; padding: 8px; }
@media (max-width: 560px) { .canon-portrait { float: none; width: 100%; margin: 8px 0 20px; } }
.koans details p { font-style: italic; }
.canon-intro { margin-bottom: 32px; }
.site-nav a { padding: 8px 8px; letter-spacing: .08em; font-size: .78rem; }
.canon-toc ul { list-style: none; padding-left: 0; margin: 0; font-size: 1.05rem; }
.canon-toc ul li { margin-bottom: 4px; padding-left: 18px; }
.canon-toc ul li:has(strong) { margin: 14px 0 6px; padding-left: 0; }
.verses .verse p { margin: 0; }

/* ===== Landing page v2 ===== */
.section-intro { max-width: 640px; margin: -8px auto 24px; font-style: italic; }
.stat-strip { list-style: none; margin: 40px auto 0; padding: 0; max-width: 820px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stat-strip li { border: 1px solid var(--line); background: rgba(17,10,29,.6); padding: 16px 8px; text-align: center; }
.stat-strip b { display: block; font-family: var(--serif-display); font-size: clamp(1.4rem, 3.4vw, 2rem); color: var(--violet-hot); text-shadow: 0 0 16px rgba(166,107,255,.6); }
.stat-strip span { font-size: .95rem; color: var(--bone-dim); }
@media (max-width: 600px) { .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.story { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: st; }
.story-step { position: relative; display: block; text-decoration: none; color: inherit; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(26,16,41,.9), rgba(17,10,29,.9)); padding: 22px 18px 18px; counter-increment: st; transition: border-color .25s, box-shadow .25s, transform .25s; }
.story-step::before { content: counter(st, upper-roman); position: absolute; top: 12px; right: 14px; font-family: var(--serif-display); color: var(--gold-dim); font-size: .85rem; }
.story-step:hover { border-color: rgba(201,162,255,.6); box-shadow: 0 0 30px rgba(138,77,255,.3); transform: translateY(-2px); color: inherit; }
.story-step .when { font-family: var(--serif-display); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--scale-bright); }
.story-step h3 { color: var(--violet-hot); margin: 6px 0 8px; font-size: 1.1rem; }
.story-step p { margin: 0; font-size: 1.02rem; color: var(--bone-dim); }
@media (max-width: 960px) { .story { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .story { grid-template-columns: 1fr; } }

.turns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; align-items: center; }
.turns-art .coils-diagram { width: 100%; margin: 0; filter: drop-shadow(0 0 24px rgba(138,77,255,.35)); }
.turns-text h3 { color: var(--violet-hot); margin: 18px 0 4px; font-size: 1.1rem; }
.turns-text p { margin: 0 0 8px; }
@media (max-width: 860px) { .turns { grid-template-columns: 1fr; } .turns-art { max-width: 420px; margin: 0 auto; } }

.path { list-style: none; padding: 0; margin: 0; position: relative; }
.path::before { content: ""; position: absolute; left: 21px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--violet-hot), var(--scale), transparent); }
.path li { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 0 0 22px; position: relative; }
.path .step-n { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--void); border: 2px solid var(--violet-hot); font-family: var(--serif-display); color: var(--violet-hot); box-shadow: 0 0 16px rgba(166,107,255,.5); z-index: 1; }
.path h3 { margin: 8px 0 4px; color: var(--violet-hot); }
.path p { margin: 0 0 4px; }

.lib-card { text-decoration: none; color: inherit; }
.lib-card:hover { color: inherit; }

/* Book pages */
.canon-toc ul.cols { columns: 2; column-gap: 28px; }
@media (max-width: 640px) { .canon-toc ul.cols { columns: 1; } }
.stage { color: var(--bone-dim); font-size: 1.05rem; }

/* Footer v2 */
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 28px; text-align: left; margin-bottom: 36px; }
.foot-grid h4 { font-family: var(--serif-display); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--violet-hot); margin: 6px 0 10px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin-bottom: 6px; }
.foot-grid a { color: var(--bone-dim); text-decoration: none; font-size: 1rem; }
.foot-grid a:hover { color: #fff; }
.foot-brand p { color: var(--bone-dim); font-size: 1rem; margin: 10px 0 0; max-width: 260px; }
.foot-brand .brand { color: var(--bone); }
@media (max-width: 860px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }

/* Litany */
.warning { max-width: 820px; margin: 0 auto; border: 1px solid rgba(255,128,128,.45); background: linear-gradient(180deg, rgba(60,14,30,.55), rgba(17,10,29,.9)); padding: 32px 28px; box-shadow: 0 0 40px rgba(178,58,58,.18); }
.warning h2 { margin: 4px 0 14px; }
.warning h3 { color: #ffb3b3; margin: 22px 0 8px; }
.warning ul { padding-left: 22px; }
.warning li { margin-bottom: 10px; }
.warn-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.lit-book { max-width: 820px; margin: 32px auto 0; scroll-margin-top: 80px; }
.lit-book h3 { color: var(--violet-hot); font-size: 1.4rem; margin: 0; }
.lit-title { border-bottom: 1px solid rgba(185,140,255,.14); padding: 10px 0; }
.lit-title summary { cursor: pointer; font-family: var(--serif-display); font-size: .95rem; letter-spacing: .03em; color: var(--bone); }
.lit-title summary small { color: var(--bone-dim); font-family: var(--serif-body); letter-spacing: 0; margin-left: 6px; }
.lit-lines { font-size: 1rem; color: var(--bone-dim); padding-left: 56px; margin: 12px 0; }
.lit-lines li { margin-bottom: 6px; }
.lit-lines li::marker { color: var(--gold-dim); font-size: .85rem; }

/* ===== Disciples of Devotion ===== */
.dod-hero .dod-logo { width: 128px; height: 128px; border-radius: 50%; box-shadow: 0 0 50px rgba(166,107,255,.7); animation: breathe 7s ease-in-out infinite; }
.dod-votd { display: grid; grid-template-columns: 72px 1fr; gap: 20px; align-items: start; max-width: 820px; margin: 0 auto; border: 1px solid var(--line); background: radial-gradient(circle at 0 0, rgba(166,107,255,.18), transparent 60%), var(--void-2); padding: 24px; }
.dod-votd img { border-radius: 50%; }
.dod-votd .ref { font-family: var(--serif-display); color: var(--violet-hot); margin: 2px 0 6px; letter-spacing: .05em; }
.dod-votd blockquote { margin: 0 0 8px; font-size: 1.35rem; font-style: italic; }
.dod-reader { border: 1px solid rgba(201,162,255,.45); background: linear-gradient(180deg, rgba(26,16,41,.95), rgba(10,6,20,.98)); box-shadow: 0 0 50px rgba(138,77,255,.25); padding: 18px; }
.dod-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.dod-tab { font-family: var(--serif-display); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; background: transparent; color: var(--bone-dim); border: 1px solid var(--line); padding: 8px 10px; cursor: pointer; min-height: 36px; }
.dod-tab span { color: var(--gold-dim); margin-right: 6px; }
.dod-tab.on, .dod-tab:hover { color: #fff; border-color: var(--violet-hot); box-shadow: 0 0 14px rgba(166,107,255,.4); }
.dod-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.dod-ch { display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; background: rgba(8,5,15,.6); border: 1px solid var(--line); color: var(--bone); padding: 8px; cursor: pointer; font-family: var(--serif-body); }
.dod-ch img { grid-row: 1 / 3; border-radius: 50%; }
.dod-ch .n { display: none; }
.dod-ch .t { font-size: .98rem; line-height: 1.2; }
.dod-ch .k { font-size: .8rem; color: var(--bone-dim); }
.dod-ch.on, .dod-ch:hover { border-color: var(--violet-hot); box-shadow: 0 0 16px rgba(166,107,255,.35); }
.dod-panel { border-top: 1px solid var(--line); padding-top: 16px; }
.dod-head { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; }
.dod-head img { border-radius: 50%; }
.dod-head h3 { margin: 2px 0 4px; color: var(--violet-hot); font-size: 1.3rem; }
.dod-head p { margin: 0; }
.dod-ref { font-family: var(--serif-display); color: var(--bone); letter-spacing: .05em; }
.dod-kind { font-size: .8rem; margin-left: 8px; padding: 2px 8px; border: 1px solid var(--line); font-family: var(--serif-display); letter-spacing: .1em; text-transform: uppercase; }
.dod-kind.canon { color: #f1d98a; border-color: rgba(241,217,138,.5); }
.dod-kind.engine { color: var(--violet-hot); }
.dod-text { font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-style: italic; line-height: 1.55; min-height: 4.8em; margin: 18px 0 12px; }
.dod-bar { height: 4px; background: rgba(185,140,255,.15); margin-bottom: 14px; }
.dod-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--violet), var(--violet-hot)); box-shadow: 0 0 10px rgba(166,107,255,.8); }
.dod-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.dod-controls .btn { padding: 10px 12px; font-size: .72rem; }
.dod-go { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.dod-go label { font-family: var(--serif-display); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); }
.dod-go input { width: 90px; background: #0c0717; color: var(--bone); border: 1px solid var(--line); padding: 8px; font-size: 1rem; min-height: 40px; }
.dod-go .btn { padding: 10px 16px; }
.dod-cmdrow { margin: 0; color: var(--bone-dim); }
.dod-cmdrow code { color: var(--violet-hot); font-family: ui-monospace, Consolas, monospace; }
.btn.small { padding: 6px 10px; font-size: .68rem; }
.dod-bookhead { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; margin-bottom: 8px; }
.dod-bookhead img { border-radius: 50%; }
.dod-bookhead h3 { margin: 0; color: var(--violet-hot); }
.dod-chlist { list-style: none; padding: 0; margin: 10px 0 0; columns: 2; column-gap: 16px; font-size: .98rem; }
.dod-chlist li { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; break-inside: avoid; }
.dod-chlist img { border-radius: 50%; flex: none; }
.dod-gallery { list-style: none; padding: 0; margin: 0 auto; max-width: 820px; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; }
.dod-gallery img { width: 100%; height: auto; border-radius: 50%; transition: transform .2s, filter .2s; }
.dod-gallery img:hover { transform: scale(1.18); filter: drop-shadow(0 0 10px rgba(166,107,255,.8)); }
@media (max-width: 900px) { .dod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .dod-gallery { grid-template-columns: repeat(5, minmax(0, 1fr)); } .dod-chlist { columns: 1; } .dod-votd { grid-template-columns: 1fr; } }

/* ===== The Daily Coil ===== */
.post { border: 1px solid rgba(201,162,255,.4); background: linear-gradient(180deg, rgba(26,16,41,.92), rgba(10,6,20,.96)); padding: 26px; max-width: 980px; margin: 0 auto; box-shadow: 0 0 40px rgba(138,77,255,.18); }
.post header h2 { margin: 4px 0 4px; }
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.tile { border: 1px solid var(--line); background: rgba(8,5,15,.55); padding: 16px; }
.tile h3 { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--violet-hot); margin: 0 0 6px; }
.tile p { margin: 0 0 6px; font-size: 1.02rem; }
.tile .big { font-family: var(--serif-display); font-size: 1.2rem; color: var(--bone); }
.tile .num { font-size: 2rem; color: var(--violet-hot); text-shadow: 0 0 14px rgba(166,107,255,.6); }
.tile.moon { grid-column: span 2; display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; }
.moon-art svg { width: 96px; height: 96px; filter: drop-shadow(0 0 14px rgba(239,230,255,.35)); }
.tile.color { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; }
.swatch { width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); box-shadow: 0 0 20px rgba(0,0,0,.5); }
.post-body blockquote { margin: 18px 0; }
.post-foot { margin: 0; }
.live-wx { margin-top: 8px; }
.archive { max-width: 980px; margin: 0 auto; }
.arch { border-bottom: 1px solid rgba(185,140,255,.14); padding: 10px 0; }
.arch summary { cursor: pointer; font-family: var(--serif-display); color: var(--bone); letter-spacing: .03em; }
.arch .post { margin-top: 12px; box-shadow: none; }
@media (max-width: 860px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile.moon { grid-column: 1 / -1; } }
@media (max-width: 520px) { .post-grid { grid-template-columns: 1fr; } .post { padding: 18px; } }
.post-body blockquote cite { display: block; font-style: normal; font-family: var(--serif-display); font-size: .75rem; letter-spacing: .12em; color: var(--gold-dim); margin-top: 8px; }

/* ===== Featured posts / articles ===== */
.post-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; padding: 0; overflow: hidden; }
.post-card img { width: 100%; height: 170px; object-fit: cover; object-position: center 20%; border-bottom: 1px solid var(--line); }
.post-card .kicker, .post-card h3, .post-card p, .post-card .read { margin-left: 20px; margin-right: 20px; }
.post-card .kicker { margin-top: 16px; }
.post-card h3 { color: var(--violet-hot); }
.post-card .read { margin-top: auto; margin-bottom: 18px; font-family: var(--serif-display); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--violet-hot); }
.post-card:hover { color: inherit; }
.article { max-width: 760px; }
.article h2 { margin-top: 36px; }
.article ul { padding-left: 22px; }
.article li { margin-bottom: 10px; }
.article-hero { margin: 0 0 18px; border: 1px solid var(--line); box-shadow: 0 0 40px rgba(138,77,255,.25); overflow: hidden; }
.article-hero img { display: block; width: 100%; max-height: 380px; object-fit: cover; object-position: center 20%; }
.byline { margin-bottom: 24px; }
.article blockquote { margin: 24px 0; padding: 16px 22px; border-left: 3px solid var(--violet-hot); background: rgba(166,107,255,.07); font-style: italic; font-size: 1.25rem; }
.article blockquote cite { display: block; font-style: normal; font-family: var(--serif-display); font-size: .75rem; letter-spacing: .18em; color: var(--gold-dim); margin-top: 8px; }

/* ===== Sacred Triangle ===== */
.tri-figure { display: flex; justify-content: center; margin: 0 auto 8px; }
.tri-svg { width: min(560px, 100%); height: auto; filter: drop-shadow(0 0 30px rgba(138,77,255,.35)); }
.tri-card { border-top-width: 3px; }
.tri-card.gold { border-top-color: #f1c35c; box-shadow: inset 0 40px 60px -40px rgba(241,195,92,.25); }
.tri-card.gold h3 { color: #f6d27a; }
.tri-card.silver { border-top-color: #d8d2ea; box-shadow: inset 0 40px 60px -40px rgba(216,210,234,.18); }
.tri-card.silver h3 { color: #ece6f5; }
.tri-card.violet { border-top-color: var(--violet-hot); box-shadow: inset 0 40px 60px -40px rgba(166,107,255,.3); }
.tri-cards { margin-bottom: 28px; }

/* ---------- The Pantheon: the Sacred Triangle on the homepage, as the Icon of the Three ----------
   The three panels of the painted triptych (img/triangle/triptych.webp, one file; each card shows its own panel:
   Vyrenna x 0-260, Xal'Reth 271-529, Nhalor 540-799 of 800). The names, virtues and mottos are painted in.
   js/motion.js brings them in one by one in a burst of each god's light, and tilts them toward the pointer. */
.pantheon { padding-bottom: 86px; }
.pn-intro { margin: -6px auto 34px; max-width: 34em; font-style: italic; }
.pn-row { --ph: clamp(520px, 84vh, 940px); position: relative; display: flex; justify-content: center; gap: clamp(10px, 1.8vw, 24px); perspective: 1600px; }
.pn-card { --c1: #b98cff; --c2: #8a4dff; --w: 260; --bs: 307.69%; --bx: 0%;
  position: relative; z-index: 1; flex: none; display: block; height: var(--ph); aspect-ratio: var(--w) / 1200;
  color: inherit; text-decoration: none; outline: none; transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .5s ease, filter .5s ease; }
.pn-card.vy { --c1: #f1e6ff; --c2: #b48cff; }
.pn-card.xr { --c1: #3fe08f; --c2: #e8c35a; --w: 258; --bs: 310.08%; --bx: 50%; }
.pn-card.nh { --c1: #a46bff; --c2: #5a2ad0; --bx: 100%; }

/* the breathing aura behind each panel */
.pn-aura { position: absolute; inset: -6% -40%; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c1) 70%, transparent), color-mix(in srgb, var(--c2) 30%, transparent) 55%, transparent 80%);
  filter: blur(34px); opacity: .5; animation: pn-breathe 5.5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.8s);
  transition: opacity .6s ease, transform .6s ease; }
@keyframes pn-breathe { 0%, 100% { opacity: .38; transform: scale(.94); } 50% { opacity: .72; transform: scale(1.06); } }

.pn-inner { position: absolute; inset: 0; border-radius: 6px; overflow: hidden; isolation: isolate; transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  border: 1px solid color-mix(in srgb, var(--c1) 55%, transparent);
  box-shadow: 0 0 0 1px rgba(8, 5, 15, .7), 0 0 22px -2px color-mix(in srgb, var(--c1) 70%, transparent), 0 0 70px -10px var(--c2), 0 40px 70px -30px #000;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s ease, border-color .6s ease; }
.pn-card.is-tilting .pn-inner { transition: transform .08s linear, box-shadow .6s ease, border-color .6s ease; }
.pn-art { position: absolute; inset: 0; background: url("img/triangle/triptych.webp") var(--bx) 0 / var(--bs) 100% no-repeat;
  transform: translate(calc(var(--px, 0) * -6px), calc(var(--py, 0) * -6px)) scale(1.03); transition: transform 1s cubic-bezier(.2, .7, .2, 1), filter .6s ease; }
.pn-card.is-tilting .pn-art { transition: transform .2s linear, filter .6s ease; }
/* light that follows the pointer */
.pn-sheen { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; mix-blend-mode: screen; transition: opacity .5s ease;
  background: radial-gradient(260px circle at var(--sx, 50%) var(--sy, 35%), color-mix(in srgb, var(--c1) 45%, transparent), transparent 60%); }
/* a band of light that crosses each panel now and then */
.pn-sweep { position: absolute; inset: -20% -120%; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: linear-gradient(105deg, transparent 42%, color-mix(in srgb, var(--c1) 55%, transparent) 50%, transparent 58%); }
.pn-in .pn-sweep { animation: pn-sweep 9s ease-in-out infinite; animation-delay: calc(1.4s + var(--i, 0) * 1.1s); }
@keyframes pn-sweep { 0% { opacity: 0; transform: translateX(-40%); } 6% { opacity: 1; } 16% { opacity: 0; transform: translateX(40%); } 100% { opacity: 0; transform: translateX(40%); } }

.pn-cap { position: absolute; left: -24px; right: -24px; top: calc(100% + 16px); text-align: center; }
.pn-cap b { font: 600 .68rem var(--serif-display); letter-spacing: .3em; text-transform: uppercase; color: var(--c1); text-shadow: 0 0 14px var(--c2); }
.pn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pn-more { margin-top: 70px; }

/* ENTRANCE: one by one, each panel rises out of a flash of its own light */
.pn-armed .pn-card { opacity: 0; }
.pn-armed.pn-in .pn-card { opacity: 1; animation: pn-enter 1.5s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i, 0) * .55s); }
@keyframes pn-enter {
  0%   { opacity: 0; transform: translateY(70px) scale(.9); filter: brightness(3.2) saturate(.2) blur(12px); }
  40%  { opacity: 1; transform: translateY(-6px) scale(1.02); filter: brightness(2.2) saturate(.8) blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
.pn-card::after { content: ""; position: absolute; left: 50%; top: 42%; width: 220%; aspect-ratio: 1; z-index: 2; pointer-events: none; border-radius: 50%;
  translate: -50% -50%; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(closest-side, #fff, var(--c1) 25%, color-mix(in srgb, var(--c2) 50%, transparent) 50%, transparent 72%); }
.pn-armed.pn-in .pn-card::after { animation: pn-burst 1.6s ease-out backwards; animation-delay: calc(var(--i, 0) * .55s + .15s); }
@keyframes pn-burst { 0% { opacity: .95; transform: scale(.15); } 100% { opacity: 0; transform: scale(1.4); } }

/* HOVER: the chosen panel lifts into full glow; the other two step back into the dark */
@media (hover: hover) and (pointer: fine) {
  .pn-row:hover .pn-card:not(:hover) { opacity: .45; filter: saturate(.45) brightness(.6); }
  .pn-card:hover, .pn-card:focus-visible { z-index: 3; transform: translateY(-14px) scale(1.06); }
  .pn-card:hover .pn-aura, .pn-card:focus-visible .pn-aura { animation-play-state: paused; opacity: 1; transform: scale(1.22); }
  .pn-card:hover .pn-inner, .pn-card:focus-visible .pn-inner { border-color: var(--c1);
    box-shadow: 0 0 0 1px var(--c1), 0 0 18px var(--c1), 0 0 60px color-mix(in srgb, var(--c1) 80%, transparent), 0 0 140px var(--c2), 0 0 240px color-mix(in srgb, var(--c2) 60%, transparent), 0 50px 90px -30px #000; }
  .pn-card:hover .pn-art, .pn-card:focus-visible .pn-art { filter: brightness(1.18) saturate(1.3) contrast(1.05); }
  .pn-card:hover .pn-sheen, .pn-card:focus-visible .pn-sheen { opacity: 1; }
  .pn-card:hover .pn-cap b, .pn-card:focus-visible .pn-cap b { color: #fff; text-shadow: 0 0 10px var(--c1), 0 0 24px var(--c2); }
}
.pn-card:focus-visible .pn-inner { outline: 2px solid var(--c1); outline-offset: 5px; }

/* phones: the triptych stays whole, three panels side by side */
@media (max-width: 760px) {
  .pn-row { --ph: calc((100vw - 52px) / .652); gap: 8px; }
  .pn-cap { left: -6px; right: -6px; top: calc(100% + 10px); }
  .pn-cap b { font-size: .52rem; letter-spacing: .16em; }
  .pn-aura { inset: -4% -30%; filter: blur(22px); }
  .pantheon { padding-bottom: 60px; }
  .pn-more { margin-top: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .pn-aura, .pn-in .pn-sweep { animation: none; }
  .pn-card, .pn-inner, .pn-art { transition: none; }
  .pn-art { transform: none; }
}

/* ===== Blog system ===== */
.blog-hero .post-card.big { display: grid; grid-template-columns: 1.2fr 1fr; padding: 0; }
.blog-hero .post-card.big img { height: 100%; min-height: 300px; border-bottom: 0; border-right: 1px solid var(--line); grid-row: 1 / 6; }
.blog-hero .post-card.big .kicker { margin-top: 28px; }
.blog-hero .post-card.big h3 { font-size: clamp(1.4rem, 3vw, 2rem); }
.blog-hero .post-card.big p { font-size: 1.1rem; }
@media (max-width: 760px) { .blog-hero .post-card.big { grid-template-columns: 1fr; } .blog-hero .post-card.big img { grid-row: auto; min-height: 200px; border-right: 0; border-bottom: 1px solid var(--line); } }
.blog-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 26px 0 16px; }
.cat-bar { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-btn { font-family: var(--serif-display); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; background: transparent; color: var(--bone-dim); border: 1px solid var(--line); padding: 8px 12px; min-height: 36px; cursor: pointer; }
.cat-btn span { color: var(--gold-dim); margin-left: 4px; }
.cat-btn.on, .cat-btn:hover { color: #fff; border-color: var(--violet-hot); box-shadow: 0 0 12px rgba(166,107,255,.4); }
.blog-search input { background: #0c0717; color: var(--bone); border: 1px solid var(--line); padding: 10px 12px; font-size: 1rem; min-width: 240px; font-family: var(--serif-body); }
.post-card[hidden] { display: none; }
.post-card.mini img { height: 130px; }
.post-card.mini h3 { font-size: 1.05rem; margin-bottom: 18px; }
.post-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: .95rem; color: var(--bone-dim); margin-bottom: 6px; }
.coil-date { font-style: italic; color: var(--violet-hot); }
.cat-chip { font-family: var(--serif-display); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--violet); padding: 4px 10px; text-decoration: none; color: var(--violet-hot); }
.post-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 30px 0 10px; }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; border-top: 1px solid var(--line); padding-top: 18px; }
.post-nav a { text-decoration: none; color: var(--bone); border: 1px solid var(--line); padding: 12px 14px; font-size: 1rem; }
.post-nav a span { display: block; font-family: var(--serif-display); font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: var(--violet-hot); margin-bottom: 4px; }
.post-nav a.next { text-align: right; }
.post-nav a:hover { border-color: var(--violet-hot); }
.month-arch { list-style: none; padding: 0; }
.month-arch h4 { font-family: var(--serif-display); color: var(--violet-hot); margin: 18px 0 6px; letter-spacing: .06em; }
.month-arch ul { padding-left: 18px; }
@media (max-width: 560px) { .post-nav { grid-template-columns: 1fr; } .blog-search input { min-width: 0; width: 100%; } .blog-search { width: 100%; } }
.blog-hero .post-card.big { grid-template-rows: auto auto auto 1fr; max-height: 440px; overflow: hidden; }
.blog-hero .post-card.big img { height: 440px; min-height: 0; grid-row: 1 / span 4; grid-column: 1; }
.blog-hero .post-card.big p.kicker { font-size: .72rem; }
.blog-hero .post-card.big p.muted { font-size: 1.1rem; }
.blog-hero .post-card.big .read { align-self: end; }
@media (max-width: 760px) { .blog-hero .post-card.big { max-height: none; grid-template-rows: none; } .blog-hero .post-card.big img { height: 220px; grid-row: auto; } }
.hero .seo-line { font-family: var(--serif-display); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--bone-dim); margin: -8px auto 14px; max-width: 640px; }

/* ===== The Coil Herald (news) ===== */
.news-ticker { overflow: hidden; white-space: nowrap; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(8,5,15,.85); margin: 0 0 8px; position: relative; }
.news-ticker::before { content: "LIVE"; position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; display: flex; align-items: center; padding: 0 14px; background: #7a1f3d; color: #fff; font-family: var(--serif-display); font-size: .7rem; letter-spacing: .2em; }
.ticker-track { display: inline-block; padding: 10px 0 10px 80px; animation: ticker 140s linear infinite; }
.ticker-track a { color: var(--bone); text-decoration: none; font-size: .98rem; }
.ticker-track a b { color: var(--violet-hot); font-family: var(--serif-display); font-weight: 600; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.ticker-track span { color: var(--gold-dim); margin: 0 18px; }
.news-ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; white-space: normal; } }
.news-top { text-align: center; margin: 18px auto 0; max-width: 760px; }
.news-next { font-family: var(--serif-display); letter-spacing: .06em; font-size: 1.05rem; color: var(--bone); }
.news-next strong { color: var(--violet-hot); }
.news-list { max-width: 860px; margin: 0 auto; }
.news-day { font-size: 1.3rem; margin: 6px 0 14px; }
.news-day .muted { font-family: var(--serif-body); font-size: 1rem; letter-spacing: 0; }
.news-item { border: 1px solid var(--line); border-left: 3px solid var(--violet); background: linear-gradient(180deg, rgba(26,16,41,.85), rgba(12,7,22,.9)); padding: 16px 20px; margin-bottom: 12px; scroll-margin-top: 90px; }
.news-item.fresh { border-left-color: #ff7aa8; box-shadow: 0 0 26px rgba(255,122,168,.15); }
.news-item.fresh .desk::after { content: " · NEW"; color: #ff9cbf; }
.news-item.official { border-left-color: #f1c35c; }
.news-item h3 { margin: 6px 0 6px; font-size: 1.2rem; color: var(--bone); }
.news-item h3 a { color: var(--violet-hot); text-decoration: none; }
.news-item p { margin: 0; color: var(--bone-dim); font-size: 1.05rem; }
.news-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: .9rem; }
.news-meta .desk { font-family: var(--serif-display); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--violet-hot); }
.news-meta time { color: var(--bone); }
.news-filter { justify-content: center; max-width: 860px; margin: 0 auto 18px; }
.yesterday .news-item { opacity: .85; }
/* Release post distress warning */
.post-warning { border: 1px solid rgba(255,170,90,.55); border-left: 4px solid #ffb35c; background: rgba(60,30,10,.35); padding: 20px 22px; margin: 0 0 32px; border-radius: 6px; }
.post-warning h2 { margin-top: 0; color: #ffcf8f; font-size: 1.15rem; }
.post-warning p { margin: 0 0 12px; }
.post-warning p:last-child { margin-bottom: 0; }
/* The Hourly Coil */
.hourly { max-width: 820px; margin: 0 auto; }
.hour-next { text-align: center; color: var(--violet-hot); font-size: .95rem; margin: 0 0 18px; }
.hour-post { border: 1px solid var(--line); background: rgba(20,10,35,.55); padding: 18px 20px; border-radius: 6px; margin: 0 0 14px; }
.hour-post.big { padding: 28px 30px; border-color: rgba(185,140,255,.45); box-shadow: 0 0 40px rgba(138,77,255,.18); }
.hour-post .kicker { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--violet-hot); margin: 0 0 6px; }
.hour-post h3 { margin: 0 0 12px; font-family: var(--serif-display); }
.hour-post.big h3 { font-size: 1.6rem; }
.hour-ico { display: inline-block; width: 1.4em; text-align: center; color: var(--gold, #d9b86c); }
.hour-post .hymn { font-style: italic; line-height: 1.7; padding-left: 14px; border-left: 2px solid rgba(185,140,255,.35); }
.hour-post .praises { list-style: none; padding: 0; margin: 0 0 10px; }
.hour-post .praises li { padding: 4px 0 4px 22px; position: relative; }
.hour-post .praises li::before { content: "✦"; position: absolute; left: 0; color: var(--violet-hot); }
.hour-post .canon-ex .vn { color: var(--violet-hot); font-size: .8em; margin-right: 4px; }
.hour-post blockquote { margin: 12px 0; }
.hour-earlier { text-align: center; font-family: var(--serif-display); letter-spacing: .15em; text-transform: uppercase; font-size: .9rem; color: var(--violet-hot); margin: 28px 0 14px; }
.hour-list .hour-post { opacity: .92; }
@media (max-width: 600px) { .hour-post.big { padding: 20px 18px; } .hour-post.big h3 { font-size: 1.3rem; } }
.hour-post blockquote cite { display: block; margin-top: 6px; font-size: .9em; color: var(--violet-hot); }
/* ===== Merch: the Summoning ===== */
.summon { position: relative; overflow: hidden; min-height: 760px; padding: 40px 16px 56px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 42%, rgba(138,77,255,.32), rgba(40,10,70,.25) 38%, transparent 70%); --px: 0px; --py: 0px; }
.summon canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.summon-rays { position: absolute; left: 50%; top: 40%; width: 1400px; height: 1400px; margin: -700px 0 0 -700px; pointer-events: none; opacity: .5;
  background: repeating-conic-gradient(from 0deg, rgba(201,162,255,.22) 0deg 4deg, transparent 4deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 8%, transparent 55%); mask: radial-gradient(circle, #000 8%, transparent 55%); animation: m-spin 60s linear infinite; }
.summon-rays.two { opacity: .35; animation-duration: 90s; animation-direction: reverse; background: repeating-conic-gradient(from 7deg, rgba(255,210,140,.16) 0deg 2deg, transparent 2deg 26deg); }
.summon-core { position: relative; width: min(520px, 92vw); aspect-ratio: 1; transform: translate(var(--px), var(--py)); transition: transform .25s ease-out; }
.rune-ring, .sigil-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.rune-ring { animation: m-spin 40s linear infinite; filter: drop-shadow(0 0 8px rgba(166,107,255,.9)); }
.rune-ring text { fill: #d9c2ff; font-size: 19px; letter-spacing: 6px; }
.rr-line { fill: none; stroke: rgba(201,162,255,.6); stroke-width: 1.5; }
.rr-line.thin { stroke-width: .8; stroke-dasharray: 2 6; }
.rr-line.dashed { stroke-dasharray: 10 8; }
.sigil-ring { animation: m-spin 26s linear infinite reverse; filter: drop-shadow(0 0 10px rgba(138,77,255,.9)); }
.sigil-ring .tri { fill: none; stroke: rgba(230,210,255,.75); stroke-width: 1.6; animation: m-pulse 3.2s ease-in-out infinite; }
.sigil-ring .tri.faint { stroke: rgba(255,200,130,.4); animation-delay: 1.6s; }
.summon-portrait { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; margin: -23% 0 0 -23%; border-radius: 50%; padding: 0; border: 2px solid rgba(201,162,255,.8);
  overflow: hidden; cursor: pointer; background: #0b0614; animation: m-glow 3.2s ease-in-out infinite, m-float 6s ease-in-out infinite; }
.summon-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; transform: scale(1.08); transition: transform .4s; }
.summon-portrait:hover img { transform: scale(1.16); }
.summon-portrait:focus-visible { outline: 3px solid #ffcf8f; outline-offset: 6px; }
.summon-portrait .eye { position: absolute; top: 31%; width: 11%; height: 6%; border-radius: 50%; background: radial-gradient(circle, #fff 0, #e0b8ff 30%, rgba(160,90,255,.6) 60%, transparent 75%);
  mix-blend-mode: screen; animation: m-eyes 4s ease-in-out infinite; }
.summon-portrait .eye.l { left: 36%; } .summon-portrait .eye.r { right: 36%; }
.orbit { position: absolute; inset: 0; animation: m-spin 30s linear infinite; }
.orbit-item { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px; transform: rotate(calc(var(--i) * 60deg)) translateY(-205%) rotate(calc(var(--i) * -60deg)); }
.orbit-item svg { width: 100%; height: 100%; fill: rgba(40,16,70,.85); stroke: #e6d3ff; stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 0 10px rgba(166,107,255,.95));
  animation: m-spin 30s linear infinite reverse; }
.orbit-item span { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: #e6d3ff; white-space: nowrap; animation: m-spin 30s linear infinite reverse; }
.summon-text { position: relative; text-align: center; margin-top: 18px; z-index: 2; }
.summon .soon { font-family: var(--serif-display); font-size: clamp(2.2rem, 8vw, 5.4rem); letter-spacing: .14em; margin: 6px 0 10px; line-height: 1.05; }
.soon span { display: inline-block; color: #f1e6ff; animation: m-letter 3.6s ease-in-out infinite;
  background: linear-gradient(100deg, #b98cff 20%, #fff 45%, #ffcf8f 55%, #b98cff 80%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.summon-sub { max-width: 560px; margin: 0 auto; color: var(--bone); font-style: italic; }
.summon.flash::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.85), rgba(201,162,255,.4) 25%, transparent 60%); animation: m-flash .9s ease-out forwards; }
.summon.flash .summon-portrait { animation: m-glow 3.2s ease-in-out infinite, m-shake .5s ease-out; }
@keyframes m-spin { to { transform: rotate(360deg); } }
.orbit-item svg, .orbit-item span { transform-origin: center; }
@keyframes m-pulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes m-glow { 0%,100% { box-shadow: 0 0 30px 6px rgba(138,77,255,.55), 0 0 90px 20px rgba(138,77,255,.25); } 50% { box-shadow: 0 0 50px 14px rgba(201,162,255,.8), 0 0 140px 40px rgba(138,77,255,.4); } }
@keyframes m-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes m-eyes { 0%,100% { opacity: .35; } 45%,55% { opacity: 1; } }
@keyframes m-letter { 0%,100% { transform: translateY(0); background-position: 100% 0; text-shadow: none; } 50% { transform: translateY(-6px); background-position: 0 0; } }
@keyframes m-flash { from { opacity: 1; } to { opacity: 0; } }
@keyframes m-shake { 0%,100% { translate: 0 0; } 20% { translate: -6px 2px; } 40% { translate: 5px -3px; } 60% { translate: -3px 2px; } 80% { translate: 2px -1px; } }
.merch-call .lead { font-size: 1.25rem; color: #f1e6ff; }
.merch-cta { max-width: 820px; margin: 36px auto; padding: 28px; border: 1px solid rgba(185,140,255,.45); border-radius: 8px; background: linear-gradient(160deg, rgba(60,20,110,.45), rgba(15,8,30,.6)); box-shadow: 0 0 50px rgba(138,77,255,.2); }
.merch-cta h2 { text-align: center; margin-top: 0; }
.cta-steps { list-style: none; padding: 0; margin: 0 0 24px; }
.cta-steps li { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 14px; }
.cta-steps li > span { flex: 0 0 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif-display); background: rgba(138,77,255,.35); border: 1px solid rgba(201,162,255,.7); color: #fff; }
.altar-figure { display: block; margin: 6px 0 26px; border: 1px solid rgba(201,162,255,.55); border-radius: 8px; overflow: hidden; box-shadow: 0 0 40px rgba(138,77,255,.35), 0 0 0 1px rgba(255,207,143,.15) inset; transition: box-shadow .4s ease, transform .4s ease; }
.altar-figure img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.altar-figure:hover, .altar-figure:focus-visible { box-shadow: 0 0 60px rgba(201,162,255,.55), 0 0 0 1px rgba(255,207,143,.35) inset; transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .altar-figure, .altar-figure:hover { transition: none; transform: none; } }
.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.forge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin: 20px 0 30px; }
.forge-card { position: relative; overflow: hidden; padding: 22px 20px 20px; border: 1px solid var(--line); border-radius: 8px; background: rgba(20,10,35,.6); animation: m-rise .8s ease-out both; animation-delay: var(--d); }
.forge-card::before { content: ""; position: absolute; inset: -40% -60%; background: linear-gradient(115deg, transparent 40%, rgba(201,162,255,.18) 50%, transparent 60%); animation: m-sheen 5s ease-in-out infinite; animation-delay: var(--d); pointer-events: none; }
.forge-card h3 { margin: 10px 0 8px; font-family: var(--serif-display); }
.forge-card p { margin: 0; font-size: .95rem; }
.forge-badge { display: inline-block; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: #ffcf8f; border: 1px solid rgba(255,207,143,.5); padding: 3px 8px; border-radius: 3px; }
@keyframes m-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-sheen { 0%,60% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
@media (max-width: 600px) { .summon { min-height: 620px; } .orbit-item { width: 44px; height: 44px; margin: -22px; } .orbit-item span { font-size: .5rem; } .merch-cta { padding: 20px 16px; } }
@media (prefers-reduced-motion: reduce) { .summon *, .summon *::before, .summon *::after, .forge-card, .forge-card::before { animation: none !important; } }
/* ===== Animated mastheads ===== */
.mh { position: relative; overflow: hidden; isolation: isolate; }
.page-head.mh { padding: 96px 16px 64px; }
.mh > :not(.mh-fx) { position: relative; z-index: 2; }
.mh-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; --px: 0px; --py: 0px; }
.mh-fx canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mh-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, hsla(var(--h), 90%, 55%, .22), transparent 62%); animation: mh-breathe 7s ease-in-out infinite; }
.mh-art { position: absolute; left: 50%; top: 50%; width: min(520px, 130vw); aspect-ratio: 1; transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))); transition: transform .3s ease-out; opacity: .5;
  -webkit-mask: radial-gradient(circle, #000 52%, transparent 72%); mask: radial-gradient(circle, #000 52%, transparent 72%); }
.hero .mh-art { opacity: .35; width: min(760px, 150vw); }
.mh-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 6px hsla(var(--h), 100%, 65%, .9)); }
.mh-layer .l { fill: none; stroke: hsla(var(--h), 90%, 82%, .8); stroke-width: 1.5; }
.mh-layer .l.thin { stroke-width: .7; }
.mh-layer .l.thick { stroke-width: 3; }
.mh-layer .l.d, .mh-layer .d { stroke-dasharray: 6 8; }
.mh-layer .l.gold { stroke: rgba(255, 207, 143, .75); }
.mh-layer .fill { fill: hsla(var(--h), 100%, 85%, .9); }
.mh-layer .fill-soft { fill: hsla(var(--h), 90%, 70%, .3); stroke: hsla(var(--h), 90%, 82%, .8); stroke-width: 1.5; }
.mh-layer .rune { fill: hsla(var(--h), 90%, 85%, .85); letter-spacing: 4px; }
.mh-layer .serp { fill: none; stroke: hsla(var(--h), 90%, 75%, .85); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 26 6; }
.mh-layer .serp.wave { stroke-width: 7; animation: mh-dash 3s linear infinite; }
.mh-layer .page { fill: hsla(var(--h), 90%, 70%, .12); stroke: hsla(var(--h), 90%, 82%, .7); stroke-width: 1; transform-origin: 200px 200px; }
.mh-layer .sweep { fill: hsla(var(--h), 100%, 70%, .25); }
.mh-layer .moon { fill: hsla(var(--h), 60%, 88%, .85); }
.mh-layer .shadow { fill: #0c0618; animation: mh-phase 16s ease-in-out infinite; }
.mh-layer .door { fill: hsla(var(--h), 100%, 75%, .35); animation: mh-breathe 4s ease-in-out infinite; }
.mh-layer .flame { fill: #ffb35c; filter: drop-shadow(0 0 10px #ff8a3c); }
.mh-layer .orb.v { fill: #c9a2ff; } .mh-layer .orb.e { fill: #ff8a3c; } .mh-layer .orb.w { fill: #b8c8ff; }
.mh-layer .bowl { fill: rgba(255, 207, 143, .12); stroke: rgba(255, 207, 143, .75); stroke-width: 2; }
.mh-layer .broken { stroke-dasharray: 60 30 10 40; stroke-width: 3; }
.spin { animation: mh-spin 20s linear infinite; } .spin-slow { animation: mh-spin 50s linear infinite; }
.spin-rev { animation: mh-spin 70s linear infinite reverse; } .spin-rev-fast { animation: mh-spin 18s linear infinite reverse; }
.spin-drone { animation: mh-spin 240s linear infinite; }
.pulse { animation: mh-pulse 5s ease-in-out infinite; }
.spin-rev.pulse { animation: mh-spin 70s linear infinite reverse, mh-pulse 5s ease-in-out infinite; }
.spin-slow.pulse { animation: mh-spin 50s linear infinite, mh-pulse 5s ease-in-out infinite; }
.flicker { animation: mh-spin 50s linear infinite, mh-flicker 1.4s steps(2) infinite; }
.flip { animation: mh-flip 6s ease-in-out infinite; transform-origin: 50% 50%; }
.slither { animation: mh-slither 8s ease-in-out infinite; }
@keyframes mh-spin { to { transform: rotate(360deg); } }
@keyframes mh-pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes mh-breathe { 0%,100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes mh-flicker { 0% { opacity: .75; } 100% { opacity: 1; } }
@keyframes mh-flip { 0%,40% { transform: scaleX(1); } 50%,90% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
@keyframes mh-phase { 0% { transform: translateX(0); } 50% { transform: translateX(-130px); } 100% { transform: translateX(0); } }
@keyframes mh-dash { to { stroke-dashoffset: -64; } }
@keyframes mh-slither { 0%,100% { transform: translateX(-30px); } 50% { transform: translateX(-20px) translateY(10px); } }
@media (max-width: 600px) { .page-head.mh { padding: 72px 16px 48px; } }
@media (prefers-reduced-motion: reduce) { .mh-fx *, .mh-layer, .mh-layer * { animation: none !important; } }
/* Discord */
.discord-cta { max-width: 760px; margin: 24px auto; padding: 28px 24px; border: 1px solid rgba(124,140,255,.5); border-radius: 8px; background: linear-gradient(160deg, rgba(60,50,140,.35), rgba(15,8,30,.6)); box-shadow: 0 0 40px rgba(110,120,255,.2); }
.discord-cta h2 { margin-top: 0; }
.btn.discord-btn { background: #5865f2; border-color: #7983ff; color: #fff; }
.btn.discord-btn:hover { background: #6d78ff; color: #fff; box-shadow: 0 6px 24px rgba(88,101,242,.45); }
.prose code, .cmds code { overflow-wrap: anywhere; }
.dq-logo { float: right; width: 120px; height: 120px; margin: 0 0 12px 16px; filter: drop-shadow(0 0 18px rgba(255,79,163,.55)); }
@media (max-width: 600px) { .dq-logo { float: none; display: block; margin: 0 auto 12px; } }


/* Addon panel previews */
.addon-shot { margin: 18px 0 0; text-align: center; clear: both; }
.addon-shot img { display: block; max-width: 100%; height: auto; margin: 0 auto; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 0 28px rgba(138,77,255,.25); }
.addon-shot figcaption { font-size: .8rem; font-style: italic; color: var(--bone-dim, #b9b0c8); margin-top: 6px; }

/* The sigil of Xal'Reth (logo): header/footer mark. The homepage hero lives in css/xalreth.css. */
.brand .brand-mark { width: 40px; height: 40px; flex: none; display: block; filter: drop-shadow(0 0 6px rgba(166, 107, 255, 0.55)); }
.brand:hover .brand-mark { filter: drop-shadow(0 0 10px rgba(224, 196, 255, 0.8)); }

/* ---------- About submenu (Chronicle, Canon, Legends, Library) ---------- */
.site-nav .has-sub { position: relative; }
.site-nav .sub-toggle {
  display: flex; align-items: center; gap: 6px; background: none; border: 0; border-bottom: 1px solid transparent; cursor: pointer;
  padding: 8px 10px; font-family: var(--serif-display); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bone-dim);
}
.site-nav .sub-toggle::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform 0.2s ease;
}
.site-nav .has-sub.open .sub-toggle::after { transform: rotate(-135deg); margin-top: 3px; }
.site-nav .sub-toggle:hover, .site-nav .sub-toggle:focus-visible, .site-nav .has-sub.open .sub-toggle, .site-nav .sub-toggle.current {
  color: var(--gold); border-bottom-color: var(--gold); outline: none; text-shadow: 0 0 12px rgba(166, 107, 255, 0.8);
}
.site-nav ul.sub {
  display: none; position: absolute; top: calc(100% + 6px); left: -6px; z-index: 60; min-width: 210px;
  flex-direction: column; flex-wrap: nowrap; gap: 0; margin: 0; padding: 8px 0; list-style: none;
  background: rgba(17, 10, 29, 0.97); border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 24px rgba(166, 107, 255, 0.18);
}
.site-nav ul.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }   /* hover bridge */
.site-nav .has-sub.open > ul.sub { display: flex; }
@media (hover: hover) and (min-width: 861px) { .site-nav .has-sub:hover > ul.sub { display: flex; } }
.site-nav ul.sub a { display: block; padding: 9px 18px; white-space: nowrap; border-bottom: 0; letter-spacing: 0.08em; }
.site-nav ul.sub a:hover, .site-nav ul.sub a[aria-current="page"] { background: rgba(166, 107, 255, 0.12); }

/* in the Menu-button layout the submenu opens in place, indented */
@media (max-width: 860px) {
  .site-nav .sub-toggle { width: 100%; justify-content: space-between; padding: 12px 8px; border-bottom: 1px solid rgba(185,140,255,0.08); }
  .site-nav ul.sub { position: static; min-width: 0; padding: 0 0 6px 14px; background: none; border: 0; box-shadow: none; }
  .site-nav ul.sub a { padding: 10px 4px; border-bottom: 1px solid rgba(185,140,255,0.06); }
}

/* =====================================================================
   THE GLOWING MENU — fly-out dropdowns, a gliding light, staggered fades.
   Script: the "Menu FX" block in site.js (sets --i, the glow and the spotlight).
   ===================================================================== */
@keyframes nav-in { from { opacity: 0; transform: translateY(-12px); filter: blur(6px); } }
@keyframes nav-sweep { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@keyframes nav-edge { from { background-position: 0% 0; } to { background-position: 200% 0; } }
@keyframes mark-breathe { 50% { filter: drop-shadow(0 0 14px rgba(224, 196, 255, 0.95)) drop-shadow(0 0 28px rgba(138, 77, 255, 0.6)); } }

/* a thread of light runs along the bottom of the header */
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(224, 196, 255, 0.9), transparent) no-repeat;
  background-size: 35% 100%; animation: nav-sweep 7s linear infinite; opacity: .7;
}
.brand .brand-mark { animation: mark-breathe 4.5s ease-in-out infinite; }

/* ---------- wide screens ---------- */
@media (min-width: 861px) {
  .site-nav > ul { position: relative; }
  .site-nav > ul > li { position: relative; z-index: 1; }
  .site-nav > ul > li.has-sub:hover, .site-nav > ul > li.has-sub.open { z-index: 3; }
  html.nav-intro .site-nav > ul > li:not(.nav-glow) { animation: nav-in .7s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(var(--i, 0) * 65ms + 120ms); }

  .site-nav > ul > li > a, .site-nav .sub-toggle {
    position: relative; border-bottom-color: transparent !important;
    transition: color .3s ease, text-shadow .3s ease, letter-spacing .4s ease;
  }
  /* the beam under each item, opening from the middle */
  .site-nav > ul > li > a::before, .site-nav .sub-toggle::before {
    content: ""; position: absolute; left: 50%; right: 50%; bottom: 3px; height: 2px; border-radius: 2px; pointer-events: none;
    background: linear-gradient(90deg, transparent, #e0c4ff, #b98cff, #e0c4ff, transparent);
    box-shadow: 0 0 10px #a66bff, 0 0 22px rgba(166, 107, 255, .7); opacity: 0;
    transition: left .45s cubic-bezier(.2, .9, .3, 1.3), right .45s cubic-bezier(.2, .9, .3, 1.3), opacity .3s;
  }
  .site-nav > ul > li > a:hover::before, .site-nav > ul > li > a:focus-visible::before, .site-nav > ul > li > a[aria-current="page"]::before,
  .site-nav .sub-toggle:hover::before, .site-nav .sub-toggle:focus-visible::before, .site-nav .has-sub.open .sub-toggle::before,
  .site-nav .has-sub:hover .sub-toggle::before, .site-nav .sub-toggle.current::before { left: 12%; right: 12%; opacity: 1; }
  .site-nav > ul > li > a:hover, .site-nav > ul > li > a:focus-visible, .site-nav .sub-toggle:hover, .site-nav .has-sub:hover .sub-toggle,
  .site-nav .has-sub.open .sub-toggle, .site-nav .sub-toggle:focus-visible {
    color: #fff; text-shadow: 0 0 8px rgba(224, 196, 255, .95), 0 0 22px rgba(166, 107, 255, .85), 0 0 40px rgba(138, 77, 255, .5);
  }
  .site-nav .sub-toggle::after { transition: transform .45s cubic-bezier(.2, 1.4, .4, 1), margin .3s; }
  .site-nav .has-sub:hover .sub-toggle::after { transform: rotate(-135deg); margin-top: 3px; }

  /* the soft light that glides from item to item */
  .site-nav .nav-glow {
    position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; z-index: 0; pointer-events: none; list-style: none; opacity: 0;
    border-radius: 999px;
    background: radial-gradient(ellipse at 50% 60%, rgba(166, 107, 255, .32), rgba(138, 77, 255, .1) 55%, transparent 75%);
    box-shadow: inset 0 0 0 1px rgba(201, 162, 255, .16), 0 0 26px rgba(138, 77, 255, .3);
  }
  .site-nav .nav-glow.ready { transition: transform .5s cubic-bezier(.2, .9, .25, 1.12), width .5s cubic-bezier(.2, .9, .25, 1.12), opacity .35s ease; }

  /* ---- the dropdown: swings out of the menu bar in 3D, unblurring as it comes ---- */
  .site-nav .has-sub { perspective: 900px; }
  .site-nav ul.sub {
    display: flex !important; visibility: hidden; opacity: 0; pointer-events: none;
    top: calc(100% + 10px); left: -10px; min-width: 250px; padding: 10px; border-radius: 14px;
    transform-origin: 34px 0; transform: translateY(-16px) rotateX(-32deg) scale(.88); filter: blur(8px);
    background:
      radial-gradient(200px circle at var(--mx, 50%) var(--my, -60%), rgba(166, 107, 255, .26), transparent 65%),
      linear-gradient(165deg, rgba(34, 18, 60, .97), rgba(12, 7, 22, .97));
    -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid rgba(201, 162, 255, .3);
    box-shadow: 0 26px 60px rgba(0, 0, 0, .65), 0 0 0 1px rgba(138, 77, 255, .12), 0 0 46px rgba(138, 77, 255, .38), inset 0 1px 0 rgba(255, 255, 255, .08);
    transition: opacity .22s ease, transform .3s cubic-bezier(.4, 0, .6, 1), filter .25s ease, visibility 0s linear .3s;
  }
  .site-nav ul.sub::before { top: -12px; height: 12px; }   /* wider hover bridge for the wider gap */
  /* a shimmer runs along the top edge of the open panel */
  .site-nav ul.sub::after {
    content: ""; position: absolute; left: 14px; right: 14px; top: -1px; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, #fff, #c9a2ff, transparent, transparent) 0 0 / 200% 100%;
    animation: nav-edge 2.6s linear infinite; box-shadow: 0 0 12px rgba(201, 162, 255, .9);
  }
  .site-nav .has-sub.open > ul.sub { visibility: visible; opacity: 1; pointer-events: auto; transform: none; filter: none;
    transition: opacity .3s ease, transform .6s cubic-bezier(.16, 1.3, .3, 1), filter .4s ease, visibility 0s; }
  /* the little pointer that joins the panel to its menu item */
  .site-nav .has-sub::after {
    content: ""; position: absolute; left: 24px; top: calc(100% + 5px); width: 11px; height: 11px; z-index: 61; pointer-events: none;
    background: rgba(34, 18, 60, .98); border-left: 1px solid rgba(201, 162, 255, .3); border-top: 1px solid rgba(201, 162, 255, .3);
    transform: translateY(-8px) rotate(45deg); opacity: 0; transition: opacity .2s, transform .3s;
  }
  .site-nav .has-sub.open::after { opacity: 1; transform: rotate(45deg); transition: opacity .3s .1s, transform .5s cubic-bezier(.2, 1.3, .3, 1) .05s; }

  /* items drift in one by one */
  .site-nav ul.sub li { opacity: 0; transform: translateX(-14px); filter: blur(4px); transition: opacity .15s, transform .15s, filter .15s; }
  .site-nav .has-sub.open > ul.sub li { opacity: 1; transform: none; filter: none;
    transition: opacity .45s ease calc(.1s + var(--i, 0) * 55ms), transform .6s cubic-bezier(.2, 1.25, .3, 1) calc(.1s + var(--i, 0) * 55ms), filter .45s ease calc(.1s + var(--i, 0) * 55ms); }
  @media (hover: hover) {
    .site-nav .has-sub:hover > ul.sub { visibility: visible; opacity: 1; pointer-events: auto; transform: none; filter: none;
      transition: opacity .3s ease, transform .6s cubic-bezier(.16, 1.3, .3, 1), filter .4s ease, visibility 0s; }
    .site-nav .has-sub:hover::after { opacity: 1; transform: rotate(45deg); transition: opacity .3s .1s, transform .5s cubic-bezier(.2, 1.3, .3, 1) .05s; }
    .site-nav .has-sub:hover > ul.sub li { opacity: 1; transform: none; filter: none;
      transition: opacity .45s ease calc(.1s + var(--i, 0) * 55ms), transform .6s cubic-bezier(.2, 1.25, .3, 1) calc(.1s + var(--i, 0) * 55ms), filter .45s ease calc(.1s + var(--i, 0) * 55ms); }
  }

  .site-nav ul.sub a {
    position: relative; border-radius: 9px; padding: 11px 16px 11px 22px; color: var(--bone);
    transition: color .25s, background .3s, padding-left .35s cubic-bezier(.2, 1.3, .4, 1), text-shadow .3s;
  }
  .site-nav ul.sub a::before {
    content: ""; position: absolute; left: 9px; top: 50%; width: 3px; height: 0; border-radius: 3px; transform: translateY(-50%);
    background: linear-gradient(180deg, #fff, #b98cff); box-shadow: 0 0 10px #a66bff, 0 0 18px rgba(166, 107, 255, .8);
    transition: height .35s cubic-bezier(.2, 1.3, .4, 1);
  }
  .site-nav ul.sub a:hover, .site-nav ul.sub a:focus-visible {
    padding-left: 28px; color: #fff; outline: none;
    background: linear-gradient(90deg, rgba(166, 107, 255, .26), rgba(166, 107, 255, .04) 80%);
    text-shadow: 0 0 8px rgba(224, 196, 255, .9), 0 0 20px rgba(166, 107, 255, .7);
  }
  .site-nav ul.sub a:hover::before, .site-nav ul.sub a:focus-visible::before { height: 58%; }
  .site-nav ul.sub a[aria-current="page"] { color: var(--venom); background: rgba(166, 107, 255, .12); }
  .site-nav ul.sub a[aria-current="page"]::before { height: 40%; }
}

/* ---------- the Menu button layout (phones and small windows) ---------- */
@media (max-width: 860px) {
  .nav-toggle {
    border-color: rgba(201, 162, 255, .45); color: var(--venom); border-radius: 999px; padding: 8px 16px;
    box-shadow: 0 0 16px rgba(138, 77, 255, .35); transition: box-shadow .3s, background .3s, color .3s;
  }
  .nav-toggle[aria-expanded="true"] { background: rgba(138, 77, 255, .25); color: #fff; box-shadow: 0 0 26px rgba(166, 107, 255, .75); text-shadow: 0 0 10px #c9a2ff; }

  /* the panel unfurls downward like a scroll */
  .site-nav {
    display: block !important; visibility: hidden; opacity: 0; clip-path: inset(0 0 100% 0);
    max-height: calc(100vh - 64px); overflow-y: auto; overscroll-behavior: contain;
    background: linear-gradient(180deg, rgba(26, 14, 46, .98), rgba(10, 6, 18, .98));
    box-shadow: 0 30px 60px rgba(0, 0, 0, .6), 0 0 40px rgba(138, 77, 255, .25);
    transition: clip-path .4s cubic-bezier(.4, 0, .6, 1), opacity .3s, visibility 0s linear .4s;
  }
  .site-nav.open { visibility: visible; opacity: 1; clip-path: inset(0 0 0 0); transition: clip-path .6s cubic-bezier(.2, .9, .25, 1), opacity .3s, visibility 0s; }
  .site-nav > ul > li { opacity: 0; transform: translateY(-10px); filter: blur(4px); transition: opacity .2s, transform .2s, filter .2s; }
  .site-nav.open > ul > li { opacity: 1; transform: none; filter: none;
    transition: opacity .45s ease calc(.08s + var(--i, 0) * 45ms), transform .55s cubic-bezier(.2, 1.2, .3, 1) calc(.08s + var(--i, 0) * 45ms), filter .45s calc(.08s + var(--i, 0) * 45ms); }
  .site-nav > ul > li > a, .site-nav .sub-toggle { transition: color .25s, text-shadow .25s, padding-left .3s; }
  .site-nav > ul > li > a:active, .site-nav .sub-toggle:active, .site-nav ul.sub a:active { color: #fff; text-shadow: 0 0 10px #c9a2ff, 0 0 22px #8a4dff; }
  .site-nav a[aria-current="page"] { color: #fff; text-shadow: 0 0 10px rgba(201, 162, 255, .9); }

  /* submenus slide open in place */
  .site-nav li.has-sub { display: grid; grid-template-rows: auto 0fr; transition: grid-template-rows .45s cubic-bezier(.2, .9, .25, 1); }
  .site-nav li.has-sub.open { grid-template-rows: auto 1fr; }
  .site-nav ul.sub { display: block !important; min-height: 0; overflow: hidden; padding: 0 0 0 14px; visibility: hidden; transition: visibility 0s linear .45s; }
  .site-nav li.has-sub.open > ul.sub { visibility: visible; transition: visibility 0s; border-left: 1px solid rgba(166, 107, 255, .35); box-shadow: -8px 0 16px -12px #a66bff; }
  .site-nav ul.sub li { opacity: 0; transform: translateX(-10px); transition: opacity .2s, transform .2s; }
  .site-nav li.has-sub.open ul.sub li { opacity: 1; transform: none; transition: opacity .4s ease calc(.1s + var(--i, 0) * 50ms), transform .5s cubic-bezier(.2, 1.2, .3, 1) calc(.1s + var(--i, 0) * 50ms); }
  .site-nav .nav-glow { display: none; }
}

/* =====================================================================
   THE FROSTED GLASS MENU — the header as frosted, reflective glass, the menu as a glass capsule
   (about 15% larger than before), a glass bead for the gliding light, and on every page load the glass
   condenses out of a blur, a flash of light crosses it and the items glow in one by one (site.js: Menu FX).
   ===================================================================== */
@keyframes glass-sheen { 0%, 62% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
@keyframes glass-flash { from { background-position: 130% 0; opacity: 1; } to { background-position: -30% 0; opacity: 1; } }
@keyframes glass-in { from { opacity: 0; transform: scaleX(.72) translateY(-6px); filter: blur(12px) brightness(2.2); } 60% { filter: blur(0) brightness(1.5); } to { opacity: 1; transform: none; filter: none; } }
@keyframes glass-bar-in { from { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 90px 10px rgba(166,107,255,.75); } }
@keyframes glass-pulse { 0%, 100% { box-shadow: var(--glass-shadow), 0 0 26px rgba(138, 77, 255, .38); } 50% { box-shadow: var(--glass-shadow), 0 0 40px rgba(166, 107, 255, .6), 0 0 70px rgba(138, 77, 255, .22); } }

/* the bar: frosted glass with a bright upper edge and a fine frost grain */
.site-header {
  background: linear-gradient(180deg, rgba(46, 26, 82, .58) 0%, rgba(18, 10, 34, .66) 55%, rgba(10, 6, 20, .74) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(1.7); backdrop-filter: blur(18px) saturate(1.7);
  border-bottom: 1px solid rgba(225, 205, 255, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(166, 107, 255, .28), 0 12px 40px -14px rgba(0, 0, 0, .85), 0 6px 40px -10px rgba(138, 77, 255, .4);
}
.site-header::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, .03) 46%, rgba(255, 255, 255, 0) 52%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .55; mix-blend-mode: soft-light;
}
.site-header .wrap { min-height: 74px; max-width: 1280px; }
.brand { font-size: 1.15rem; gap: 12px; }
.brand .brand-mark { width: 46px; height: 46px; }
html.nav-intro .site-header { animation: glass-bar-in 1.6s ease-out both; }

/* menu text: about 15% larger on ordinary screens, easing down on narrow laptops so it still fits on one line */
.site-nav > ul > li > a, .site-nav .sub-toggle { font-size: clamp(.7rem, .2rem + .82vw, .9rem); letter-spacing: .09em; }

@media (min-width: 861px) {
  .site-nav > ul > li > a, .site-nav .sub-toggle { padding: .72em clamp(.45em, -.6em + 1.1vw, .8em); white-space: nowrap; }
  .site-header .wrap { gap: 12px; }
  .site-header .wrap > * { flex-shrink: 0; }
}
/* narrow laptops: the sigil stands alone so the whole menu still fits on one line */
@media (min-width: 861px) and (max-width: 1060px) {
  .site-header .brand > span { display: none; }
  .site-nav > ul > li > a, .site-nav .sub-toggle { letter-spacing: .06em; }
}
@media (min-width: 861px) {
  /* the capsule */
  .site-nav > ul {
    --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -1px 0 rgba(166, 107, 255, .35), inset 0 0 20px rgba(166, 107, 255, .14), 0 0 0 1px rgba(8, 5, 15, .45), 0 10px 26px -10px rgba(0, 0, 0, .9);
    padding: 5px; border-radius: 999px; gap: clamp(6px, calc(1vw - 3px), 10px);   /* air between items so the glass bead sits clear of its neighbours (10px from ~1300px wide) */
    background: linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .05) 48%, rgba(138, 77, 255, .1) 52%, rgba(255, 255, 255, .06) 100%);
    border: 1px solid rgba(232, 218, 255, .24);
    box-shadow: var(--glass-shadow), 0 0 26px rgba(138, 77, 255, .38);
    animation: glass-pulse 6s ease-in-out infinite;
  }
  /* the curved highlight across the top half of the glass */
  .site-nav > ul::after {
    content: ""; position: absolute; left: 14px; right: 14px; top: 2px; height: 46%; border-radius: 999px 999px 60% 60% / 999px 999px 100% 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .02)); pointer-events: none; z-index: 2;
  }
  /* a reflection that glides across now and then */
  .site-nav > ul::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; mix-blend-mode: screen;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .34) 47%, rgba(224, 196, 255, .2) 51%, transparent 60%) 130% 0 / 260% 100% no-repeat;
    animation: glass-sheen 9s cubic-bezier(.45, 0, .3, 1) 2.4s infinite;
  }
  html.nav-intro .site-nav > ul { animation: glass-in 1s cubic-bezier(.2, .9, .3, 1) both, glass-pulse 6s ease-in-out 1s infinite; }
  html.nav-intro .site-nav > ul::before { animation: glass-flash 1.1s cubic-bezier(.5, 0, .3, 1) .45s both, glass-sheen 9s cubic-bezier(.45, 0, .3, 1) 2.4s infinite; }
  /* the gliding light becomes a glowing glass bead */
  .site-nav .nav-glow {
    top: 0; bottom: 0; border: 1px solid rgba(235, 222, 255, .38);
    background: linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(201, 162, 255, .16) 48%, rgba(138, 77, 255, .3) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 14px rgba(201, 162, 255, .35), 0 0 18px rgba(166, 107, 255, .7), 0 0 42px rgba(138, 77, 255, .4);
  }
  .site-nav > ul > li > a:hover, .site-nav > ul > li > a:focus-visible, .site-nav .sub-toggle:hover, .site-nav .has-sub:hover .sub-toggle,
  .site-nav .has-sub.open .sub-toggle, .site-nav .sub-toggle:focus-visible, .site-nav > ul > li > a[aria-current="page"], .site-nav .sub-toggle.current {
    color: #fff; text-shadow: 0 0 8px #fff, 0 0 16px rgba(224, 196, 255, .95), 0 0 30px rgba(166, 107, 255, .9), 0 0 54px rgba(138, 77, 255, .6);
  }
  /* the dropdowns: frosted glass panels */
  .site-nav ul.sub {
    top: calc(100% + 14px); min-width: 285px; padding: 12px; border-radius: 18px;
    background:
      radial-gradient(220px circle at var(--mx, 50%) var(--my, -60%), rgba(201, 162, 255, .3), transparent 65%),
      linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .02) 40%, transparent 41%),
      linear-gradient(165deg, rgba(44, 24, 78, .9), rgba(14, 8, 26, .92));
    -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7);
    border: 1px solid rgba(232, 218, 255, .3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 24px rgba(166, 107, 255, .12), 0 30px 70px rgba(0, 0, 0, .7), 0 0 50px rgba(138, 77, 255, .45);
  }
  .site-nav ul.sub::before { top: -16px; height: 16px; }
  .site-nav .has-sub::after { top: calc(100% + 9px); background: rgba(58, 32, 98, .95); border-color: rgba(232, 218, 255, .32); }
  .site-nav ul.sub a { font-size: .9rem; padding: 13px 18px 13px 24px; }
}

/* phones: the Menu button and the panel are glass too */
@media (max-width: 860px) {
  .nav-toggle {
    font-size: .98rem; padding: 10px 20px; color: #fff;
    background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .04) 50%, rgba(138, 77, 255, .16));
    border: 1px solid rgba(232, 218, 255, .35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 18px rgba(138, 77, 255, .5), 0 0 34px rgba(138, 77, 255, .25);
    text-shadow: 0 0 10px rgba(224, 196, 255, .8);
  }
  html.nav-intro .nav-toggle { animation: glass-in .9s cubic-bezier(.2, .9, .3, 1) .15s both; }
  .site-nav {
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 30%), linear-gradient(180deg, rgba(36, 20, 64, .97), rgba(10, 6, 18, .98));
    -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
    border-bottom: 1px solid rgba(232, 218, 255, .2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 30px 60px rgba(0, 0, 0, .6), 0 0 50px rgba(138, 77, 255, .3);
  }
  .site-nav > ul > li > a, .site-nav .sub-toggle, .site-nav ul.sub a { font-size: .95rem; }
}

/* for visitors who asked their device for less motion: keep the glow, drop the movement */
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-nav > ul, .site-nav > ul::before, .nav-toggle { animation: none !important; }
  .site-header::after, .brand .brand-mark, .site-nav ul.sub::after { animation: none !important; }
  .site-nav, .site-nav *, .site-nav *::before, .site-nav *::after { transition-duration: .01s !important; transition-delay: 0s !important; animation: none !important; }
  .site-nav ul.sub, .site-nav ul.sub li, .site-nav > ul > li { transform: none !important; filter: none !important; }
}

/* ==========================================================
   SCROLL ENTRANCES + PARALLAX (js/motion.js, loaded by site.js)
   Only active once motion.js adds .rv-on to <html>, so without it (or with reduced motion) everything just shows.
   ========================================================== */
.rv-on .rv {
  --rv-ease: cubic-bezier(.16, .84, .22, 1);
  transition: opacity 1.05s cubic-bezier(.2, .65, .2, 1) var(--rv-d, 0s), transform 1.25s var(--rv-ease) var(--rv-d, 0s),
              filter 1.15s ease var(--rv-d, 0s), clip-path 1.35s cubic-bezier(.65, 0, .2, 1) var(--rv-d, 0s);
}
.rv-on .rv:not(.rv-in) { opacity: 0; }
/* text rises out of a blur */
.rv-on .rv-rise:not(.rv-in) { transform: translateY(36px); filter: blur(10px); }
/* headings are written out of violet mist, left to right */
.rv-on .rv-mist { transform-origin: 50% 70%; }
/* (hidden clips always leave a sliver: the scroll watcher counts an element's own clip, and a zero-size one is never "seen") */
.rv-on .rv-mist:not(.rv-in) { transform: translateY(22px) scale(1.1); filter: blur(16px) drop-shadow(0 0 26px #a66bff); clip-path: inset(-30% 94% -30% -8%); }
.rv-on .rv-mist.rv-in { clip-path: inset(-30% -8% -30% -8%); }
/* pictures open like an eye, washed in light, then settle */
.rv-on .rv-eye:not(.rv-in) { transform: scale(1.12); filter: brightness(2.2) saturate(.2) hue-rotate(40deg); clip-path: ellipse(50% 4% at 50% 50%); }
.rv-on .rv-eye.rv-in { clip-path: ellipse(80% 80% at 50% 50%); }
/* quotes are breathed in from the left */
.rv-on .rv-breath { transform-origin: 0 50%; }
.rv-on .rv-breath:not(.rv-in) { transform: translateX(-46px) scale(.95); filter: blur(8px); }
/* cards tumble up out of the floor, each at its own small tilt */
.rv-on .rv-tumble { transform-origin: 50% 100%; }
.rv-on .rv-tumble:not(.rv-in) { transform: perspective(1100px) translateY(80px) rotateX(26deg) rotate(var(--rv-tilt, 0deg)) scale(.94); filter: blur(5px) brightness(1.7); }
/* dividers unseal from the middle outward */
.rv-on .rv-veil:not(.rv-in) { clip-path: inset(0 46% 0 46%); filter: brightness(2.4); }
.rv-on .rv-veil.rv-in { clip-path: inset(0 0 0 0); }
/* lists, button rows and steps: the items follow one after another with a little spring */
.rv-on .rv-chain { transition-duration: .5s; }
.rv-on .rv-chain > .rv-kid {
  transition: opacity .75s ease calc(var(--rv-d, 0s) + var(--rv-k, 0s)), transform .95s cubic-bezier(.34, 1.56, .64, 1) calc(var(--rv-d, 0s) + var(--rv-k, 0s)),
              filter .8s ease calc(var(--rv-d, 0s) + var(--rv-k, 0s));
}
.rv-on .rv-chain:not(.rv-in) > .rv-kid { opacity: 0; transform: translateY(22px) scale(.82); filter: blur(6px); }
@media print { .rv-on .rv, .rv-on .rv-kid { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; } }

/* THE DEEP: faint sigils, scales, runes and eyes drifting behind the page at their own depths */
.coil-deep { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict; }
.coil-glyph { position: absolute; top: 0; display: block; opacity: var(--g-o, .15); color: #a66bff; will-change: transform;
  filter: drop-shadow(0 0 6px rgba(166, 107, 255, .7)); }
.coil-glyph.g-warm { color: #e0c4ff; }
.coil-glyph svg { display: block; width: 100%; height: auto; overflow: visible; animation: g-float 11s ease-in-out infinite; }
@keyframes g-float { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(8px, -14px) rotate(4deg); } 66% { transform: translate(-6px, 10px) rotate(-3deg); } }
.coil-glyph .g-l { fill: none; stroke: currentColor; stroke-width: 1.6; }
.coil-glyph .g-thin { stroke-width: .8; }
.coil-glyph .g-dash { stroke-dasharray: 3 7; }
.coil-glyph .g-rune { font: 400 64px "Abril Fatface", Georgia, serif; fill: currentColor; }
.coil-glyph.g-eye { opacity: calc(var(--g-o, .15) * 1.6); }
.coil-glyph .g-iris { fill: rgba(166, 107, 255, .35); stroke: currentColor; stroke-width: 1.2; }
.coil-glyph .g-slit { fill: #08050f; }
.coil-glyph .g-pupil { transform-box: fill-box; transform-origin: 50% 50%; }
.coil-glyph .g-lid { fill: #0d0818; stroke: currentColor; stroke-width: 1.6; transform-box: fill-box; transform-origin: 50% 50%; transform: scaleY(0);
  animation: g-blink 7s ease-in-out infinite; }
@keyframes g-blink { 0%, 91%, 100% { transform: scaleY(0); } 94% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@media (max-width: 700px) { .coil-glyph { scale: .6; } }

/* THE COIL GAUGE: a serpent along the right edge that grows as you read down */
.coil-gauge { position: fixed; right: 18px; top: 15vh; width: 26px; height: 70vh; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
.coil-gauge.on { opacity: 1; }
.coil-gauge svg { display: block; width: 100%; height: 100%; overflow: visible; }
.coil-gauge .cg-track { fill: none; stroke: rgba(185, 140, 255, .16); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.coil-gauge .cg-body { fill: none; stroke: #b98cff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  filter: drop-shadow(0 0 5px #8a4dff) drop-shadow(0 0 12px rgba(138, 77, 255, .6)); }
.coil-gauge .cg-head { position: absolute; left: 6px; top: -7px; width: 14px; height: 16px; background: linear-gradient(180deg, #f4eaff, #a66bff);
  clip-path: polygon(50% 100%, 0 20%, 50% 0, 100% 20%); filter: drop-shadow(0 0 6px #b98cff); }

/* ==========================================================
   FROSTED GLASS BOXES — every content box is frosted glass, with a slow shimmer of light passing across it.
   (The roster cards, the Triangle page panels and the menu have their own glass.) Shooting stars and comets
   cross the background behind them (js/motion.js, "the night sky").
   ========================================================== */
.card, .story-step, .oracle, .toc, .stat, .ct-form, .st-saying {
  background:
    linear-gradient(155deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .025) 38%, rgba(255, 255, 255, 0) 60%, rgba(166, 107, 255, .07) 100%),
    rgba(20, 12, 36, .58);
  border-color: rgba(228, 212, 255, .17);
}
.card, .story-step, .oracle, .toc, .stat, .ct-form, .st-saying, .merch-cta, .notice, .chapter blockquote {
  -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), inset 0 0 0 1px rgba(255, 255, 255, .025), inset 0 -18px 30px -24px rgba(166, 107, 255, .35), 0 14px 34px -16px rgba(0, 0, 0, .75);
}
.merch-cta { border-color: rgba(228, 212, 255, .28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 30px rgba(166, 107, 255, .12), 0 0 50px rgba(138, 77, 255, .22); }
a.card:hover, .card.addon:hover, .story-step:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -18px 30px -20px rgba(166, 107, 255, .5), 0 0 34px rgba(138, 77, 255, .35), 0 18px 40px -16px rgba(0, 0, 0, .8); }

/* the shimmer: a soft band of light drifts across each pane now and then (each at its own pace) */
.oracle, .toc, .stat, .notice, .merch-cta, .ct-form, .st-saying, .chapter blockquote { position: relative; }
.card::after, .story-step::after, .oracle::after, .toc::after, .stat::after, .notice::after, .merch-cta::after, .ct-form::after, .st-saying::after, .chapter blockquote::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .05) 42%, rgba(236, 222, 255, .16) 49%, rgba(255, 255, 255, .22) 50%, rgba(201, 162, 255, .1) 54%, transparent 64%) 150% 0 / 280% 100% no-repeat;
  animation: box-shimmer 9s cubic-bezier(.45, 0, .25, 1) infinite;
}
@keyframes box-shimmer { 0%, 55% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
:is(.card, .story-step, .stat, .post-card):nth-child(3n + 2)::after { animation-duration: 11s; animation-delay: -3.5s; }
:is(.card, .story-step, .stat, .post-card):nth-child(3n + 3)::after { animation-duration: 13s; animation-delay: -7s; }
:is(.card, .story-step, .stat, .post-card):nth-child(5n + 4)::after { animation-delay: -1.8s; }
/* hovering a card sends a brighter glint across it at once */
a.card:hover::after, .card.addon:hover::after, .story-step:hover::after { animation: box-glint .9s cubic-bezier(.3, 0, .2, 1) 1; }
@keyframes box-glint { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) {
  .card::after, .story-step::after, .oracle::after, .toc::after, .stat::after, .notice::after, .merch-cta::after, .ct-form::after, .st-saying::after, .chapter blockquote::after { animation: none; background: none; }
}

/* THE NIGHT SKY: shooting stars and comets falling diagonally behind the page (drawn by js/motion.js) */
.coil-sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* GUILD CREST: <div class="crest" data-crest></div> is drawn by js/crest.js from data/guild-crest.json (the tabard crest
   from the Blizzard API). Hidden until it is drawn; then it rises in with a glow and floats. */
.crest { position: relative; width: 160px; aspect-ratio: 200 / 240; margin: 0 auto; display: none; }
.crest-img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .7)) drop-shadow(0 0 16px rgba(212, 59, 214, .45)); }
.crest.ready { display: block; animation: crest-in 1.4s cubic-bezier(.2, .9, .3, 1.2) both, crest-float 7s ease-in-out 1.4s infinite; }
.crest::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(201, 162, 255, .5), rgba(138, 77, 255, .18) 60%, transparent 75%); filter: blur(10px); animation: crest-halo 5s ease-in-out infinite; }
.crest-canvas { display: block; width: 100%; height: 100%; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .7)) drop-shadow(0 0 16px rgba(166, 107, 255, .55)); }
@keyframes crest-in { from { opacity: 0; transform: translateY(18px) scale(.8); filter: brightness(2.4) blur(6px); } }
@keyframes crest-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes crest-halo { 0%, 100% { opacity: .6; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .crest.ready, .crest::before { animation: none; } }

/* THE GUILD FRAME: the gold filigree bar from the game's guild window (cut from a screenshot: img/crest/frame-*.png)
   with the crest hanging at its centre, crowning a content section. Add class="crowned" to a section or panel. The bar
   stretches to any width: two end caps, a plain bar between them, the gold centrepiece in the middle. */
.crowned { --frame-h: 96px; position: relative; margin-top: calc(var(--frame-h) * .78 + 26px) !important; padding-top: calc(var(--frame-h) * .55 + 18px) !important; }
.crowned > .gframe { position: absolute; left: -10px; right: -10px; top: calc(var(--frame-h) * -.71); height: var(--frame-h); z-index: 3; pointer-events: none;
  background: url("img/crest/frame-center.png") center top / auto 100% no-repeat, url("img/crest/frame-cap-l.png") left top / auto 100% no-repeat,
              url("img/crest/frame-cap-r.png") right top / auto 100% no-repeat, url("img/crest/frame-bar.png") left top / auto 100% repeat-x;
  background-clip: border-box; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .65)) drop-shadow(0 0 14px rgba(243, 210, 122, .18)); }
.crowned > .gframe::before { content: ""; position: absolute; left: 1.2%; right: 1.2%; bottom: 2%; height: 34%; z-index: -1;      /* the bar's own glow */
  background: radial-gradient(50% 120% at 50% 100%, rgba(212, 59, 214, .28), transparent 70%); }
.crowned > .gframe .gf-crest { position: absolute; left: 50%; top: 34%; width: calc(var(--frame-h) * .84); translate: -50% 0; aspect-ratio: 200 / 240;
  background: url("img/crest/xalreth-crest.svg?v=2") center / contain no-repeat; filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .7)) drop-shadow(0 0 10px rgba(212, 59, 214, .45));
  animation: gf-sway 6s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes gf-sway { 0%, 100% { rotate: -1.2deg; } 50% { rotate: 1.2deg; } }
@media (max-width: 760px) {
  .crowned { --frame-h: 64px; }
  .crowned > .gframe { left: -6px; right: -6px; background-image: url("img/crest/frame-center-sm.png"), url("img/crest/frame-cap-l.png"), url("img/crest/frame-cap-r.png"), url("img/crest/frame-bar.png"); }
}
@media (prefers-reduced-motion: reduce) { .crowned > .gframe .gf-crest { animation: none; } }

/* ==========================================================
   THE FAT AND THE FINE: Abril Fatface + Lato
   The big voice is Abril Fatface, a fat, high-contrast display face: page titles, section headings, drop caps, big
   numbers and the wordmark. Everything that whispers is Lato: body text in its regular weight, labels in heavy capitals
   spaced wide, lead lines and quotes in its hairline italic. The fun is in the contrast: a fat title under a thin,
   airy label, and a fat violet quote mark over a light italic verse. Fonts load from Google Fonts in every page's head.
   ========================================================== */
body { font-size: 1.08rem; line-height: 1.72; }

/* the fat */
h1, h2 { font-family: var(--fat); font-weight: 400; letter-spacing: .01em; line-height: 1.12; padding-bottom: .06em; text-wrap: balance; }
.page-head h1 { font-size: clamp(2.4rem, 7vw, 4.2rem); letter-spacing: 0; margin: 6px 0 12px; }
.hero h1 { font-size: clamp(2.7rem, 9vw, 5.8rem); letter-spacing: 0; line-height: 1.04; }
section h2 { font-size: clamp(1.75rem, 4.2vw, 2.6rem); }
.brand { font-family: var(--fat); letter-spacing: .08em; }
.gb-gold, .ac-stat b, .ac-shield b, .vy-book b, .tally b, .stat-strip b, .t-stats b { font-family: var(--fat) !important; font-weight: 400 !important; letter-spacing: .01em; }
.dropcap::first-letter { font-family: var(--fat); font-weight: 400; font-size: 4.4em; line-height: .78; padding: 10px 12px 0 0; color: var(--scale-bright);
  text-shadow: 0 0 24px rgba(166, 107, 255, .55); }

/* the fine */
h3, h4 { font-family: var(--serif-display); font-weight: 900; letter-spacing: .02em; line-height: 1.3; }
.eyebrow, .kicker, .divider span, .chapter .num, .hero .epithet, .toc p, .btn, .site-nav a, .nav-toggle { font-weight: 900; }
.eyebrow { letter-spacing: .44em; font-size: .7rem; }
.page-head > .eyebrow { display: inline-flex; align-items: center; gap: 14px; }                   /* a hairline either side */
.page-head > .eyebrow::before, .page-head > .eyebrow::after { content: ""; width: clamp(18px, 6vw, 46px); height: 1px; background: linear-gradient(90deg, transparent, currentColor); }
.page-head > .eyebrow::after { transform: scaleX(-1); margin-left: -.44em; }                         /* the spacing after the last letter */
.page-head > p:not([class]), .hero .tagline, .lede { font-weight: 300; }
.page-head > p:not([class]) { font-size: 1.14rem; letter-spacing: .01em; }

/* a light italic verse under a fat violet quote mark */
.chapter blockquote { font-family: var(--serif-body); font-weight: 300; font-size: 1.22rem; padding-left: 66px; position: relative; }
.chapter blockquote::before { content: "\201C"; position: absolute; left: 12px; top: 2px; font: 400 4.4rem/1 var(--fat); font-style: normal;
  color: var(--scale-bright); text-shadow: 0 0 18px rgba(166, 107, 255, .6); pointer-events: none; }
.chapter blockquote cite { font-weight: 900; font-style: normal; }

/* drawings that named the old font */
svg text[font-family*="Cinzel"] { font-family: var(--serif-display); font-weight: 900; }

/* ==========================================================================
   THE ILLUMINATIONS: the painted plates of the Coil (img/art/*.webp), set into the lore pages.
   <figure class="illum side"> floats beside the text (left with "side left"), "wide" spans past the text column,
   .glyph-grid lays out round sigils with names, .plates is a gallery of plates.
   ========================================================================== */
.chapter, .illum-host { display: flow-root; }
/* boxed blocks and lists sit beside a floated plate instead of running underneath it */
.chapter > :is(.callresponse, blockquote, ul, ol, dl, table) { display: flow-root; }
.illum { margin: 1.8em 0; }
.illum img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid rgba(214, 180, 106, .5);
  box-shadow: 0 0 0 4px rgba(17, 8, 30, .9), 0 0 0 5px rgba(185, 140, 255, .32), 0 18px 44px -10px rgba(0, 0, 0, .8), 0 0 46px rgba(150, 80, 255, .2);
  transition: box-shadow .5s ease, filter .5s ease; }
.illum:hover img { filter: brightness(1.08) saturate(1.08);
  box-shadow: 0 0 0 4px rgba(17, 8, 30, .9), 0 0 0 5px rgba(214, 180, 106, .55), 0 18px 44px -10px rgba(0, 0, 0, .8), 0 0 64px rgba(170, 100, 255, .38); }
.illum figcaption { margin-top: .85em; text-align: center; font: italic 300 .98rem/1.45 var(--serif-body); color: var(--bone-dim); }
.illum figcaption b { display: block; font: 900 .7rem/1.4 var(--serif-display); font-style: normal; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .25em; }
.illum.side { float: right; width: min(290px, 42%); margin: .35em 0 1.2em 1.8em; }
.illum.side.left { float: left; margin: .35em 1.8em 1.2em 0; }
.illum.wide { width: min(calc(100vw - 32px), 900px); margin-left: calc(50% - min(50vw - 16px, 450px)); }
.illum.wide img { border-radius: 12px; }
@media (max-width: 640px) {
  .illum.side, .illum.side.left { float: none; width: min(340px, 100%); margin: 1.4em auto; }
}

.glyph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 26px 18px; margin: 1.6em 0 1em; }
.glyph-grid figure { margin: 0; text-align: center; }
.glyph-grid img { display: block; width: auto; max-width: 100%; height: 160px; object-fit: contain; margin: 0 auto 10px;
  -webkit-mask-image: radial-gradient(closest-side, #000 82%, transparent 100%); mask-image: radial-gradient(closest-side, #000 82%, transparent 100%);
  filter: drop-shadow(0 0 12px rgba(166, 107, 255, .35)); transition: transform .5s cubic-bezier(.16, .84, .22, 1), filter .5s ease; }
.glyph-grid figure:hover img { transform: translateY(-4px) scale(1.04); filter: drop-shadow(0 0 20px rgba(190, 130, 255, .6)) brightness(1.1); }
.glyph-grid b { display: block; font: 900 .72rem/1.35 var(--serif-display); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.glyph-grid span { display: block; margin-top: 3px; font: italic 300 .92rem/1.35 var(--serif-body); color: var(--bone-dim); }

.plates { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 22px; margin: 1.4em 0 2em; }
.plates.strips { grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); }
.plates .illum { margin: 0; }
.plates .illum figcaption { font-size: .9rem; }
.plates a { display: block; color: inherit; text-decoration: none; }
/* --- the plates on the homepage: a picture in front of each story step and card (truths, pillars, legends, library) --- */
.story-step .st-pic, .card .card-pic { display: block; margin: -22px -18px 14px; height: 118px; overflow: hidden; border-bottom: 1px solid rgba(214, 180, 106, .35); }
/* cards: the painting stands at the front (left) of the block, full height; on phones it sits on top */
.card:has(> .card-pic) { padding-left: calc(38% + 22px); min-height: 230px; }
.card > .card-pic { position: absolute; top: 0; bottom: 0; left: 0; width: 38%; height: auto; margin: 0;
  border-bottom: 0; border-right: 1px solid rgba(214, 180, 106, .35); }
@media (max-width: 560px) {
  .card:has(> .card-pic) { padding-left: 24px; min-height: 0; }
  .card > .card-pic { position: relative; width: auto; height: 190px; margin: -24px -24px 16px; border-right: 0; border-bottom: 1px solid rgba(214, 180, 106, .35); }
}
.story-step .st-pic img, .card .card-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.16, .84, .22, 1), filter .6s ease; }
.card .card-pic img { object-position: center 35%; }
.story-step:hover .st-pic img, .card:hover .card-pic img { transform: scale(1.07); filter: brightness(1.12) saturate(1.1); }
.story-step:has(.st-pic)::before { top: 10px; z-index: 1; color: #f4e6c4; text-shadow: 0 1px 6px #000, 0 0 12px rgba(0, 0, 0, .9); }

.story-step:has(.st-pic), .card:has(.card-pic) { overflow: hidden; }
/* a picture in front of each list item: a sacred glyph before each step of the Path, a round plate before each altar step */
.path li:has(.li-pic) { grid-template-columns: 44px 92px 1fr; align-items: start; }
.path .li-pic { width: 92px; height: 108px; object-fit: contain; margin-top: -4px;
  -webkit-mask-image: radial-gradient(closest-side, #000 84%, transparent 100%); mask-image: radial-gradient(closest-side, #000 84%, transparent 100%);
  filter: drop-shadow(0 0 12px rgba(166, 107, 255, .4)); transition: transform .5s cubic-bezier(.16, .84, .22, 1), filter .5s ease; }
.path li:hover .li-pic { transform: scale(1.06); filter: drop-shadow(0 0 20px rgba(190, 130, 255, .65)) brightness(1.1); }
.cta-steps .li-pic { flex: 0 0 60px; width: 60px; height: 60px; object-fit: cover; border-radius: 50%; border: 1px solid rgba(214, 180, 106, .6);
  box-shadow: 0 0 0 3px rgba(17, 8, 30, .9), 0 0 18px rgba(166, 107, 255, .4); margin-top: -12px; }
.cta-steps li > span { margin-top: 0; }
@media (max-width: 560px) {
  .path li:has(.li-pic) { grid-template-columns: 44px 64px 1fr; gap: 12px; }
  .path .li-pic { width: 64px; height: 76px; }
  .cta-steps .li-pic { flex-basis: 48px; width: 48px; height: 48px; margin-top: -6px; }
}

/* the drifting layers and glows may reach past the edge; never let them make the page scroll sideways */
html, body { overflow-x: clip; }

/* =====================================================================
   THE BRIGHT BLOCK MENU: the hover / focus / current-page highlight is a bright, square-cornered block of violet light
   with white corner brackets and a passing sheen, the menu bar is squared to match, and star sprites burst from the
   block on hover and focus (site.js: Menu FX). Reduced motion: still, no sprites.
   ===================================================================== */
@keyframes block-sheen { 0% { background-position: -120% 0, 0 0; } 55%, 100% { background-position: 220% 0, 0 0; } }
@keyframes block-brackets { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-2px, -2px); } }
@keyframes block-brackets-2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(2px, 2px); } }
@keyframes nav-spark {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(0deg); }
  22% { opacity: 1; transform: translate(-50%, -50%) scale(var(--s, 1)) rotate(45deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(0) rotate(200deg); }
}
@media (min-width: 861px) {
  /* the bar: squared glass instead of a capsule */
  .site-nav > ul { border-radius: 4px; padding: 5px; }
  .site-nav > ul::after { left: 6px; right: 6px; border-radius: 2px; }

  /* the block of light */
  .site-nav .nav-glow {
    top: 0; bottom: 0; border-radius: 2px; border: 1px solid rgba(255, 255, 255, .85);
    background:
      linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 48%, rgba(255, 255, 255, .15) 54%, transparent 64%) -120% 0 / 60% 100% no-repeat,
      linear-gradient(180deg, #f3e8ff 0%, #cfa6ff 14%, #a466ff 46%, #7b34f0 78%, #5a1cc8 100%);
    box-shadow: inset 0 1px 0 #fff, inset 0 -8px 14px rgba(46, 6, 110, .45), 0 0 0 1px rgba(150, 90, 255, .6),
      0 0 16px rgba(190, 140, 255, .95), 0 0 36px rgba(150, 80, 255, .75), 0 0 70px rgba(138, 77, 255, .4);
    animation: block-sheen 3.2s cubic-bezier(.45, 0, .3, 1) infinite;
  }
  /* white brackets at two corners, breathing outward */
  .site-nav .nav-glow::before, .site-nav .nav-glow::after {
    content: ""; position: absolute; width: 10px; height: 10px; pointer-events: none; border: 2px solid #fff;
    filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px #c9a2ff);
  }
  .site-nav .nav-glow::before { top: -5px; left: -5px; border-right: 0; border-bottom: 0; animation: block-brackets 2.4s ease-in-out infinite; }
  .site-nav .nav-glow::after { bottom: -5px; right: -5px; border-left: 0; border-top: 0; animation: block-brackets-2 2.4s ease-in-out infinite; }

  /* text on the bright block: crisp white with a dark edge so it reads */
  .site-nav > ul > li > a:hover, .site-nav > ul > li > a:focus-visible, .site-nav .sub-toggle:hover, .site-nav .has-sub:hover .sub-toggle,
  .site-nav .has-sub.open .sub-toggle, .site-nav .sub-toggle:focus-visible, .site-nav > ul > li > a[aria-current="page"], .site-nav .sub-toggle.current {
    color: #fff; text-shadow: 0 1px 0 rgba(40, 4, 90, .85), 0 0 2px rgba(40, 4, 90, .7), 0 0 14px rgba(255, 255, 255, .45);
  }
  .site-nav > ul > li > a:focus-visible, .site-nav .sub-toggle:focus-visible { outline: none; }
  /* the old underline beam would sit on top of the block: retire it */
  .site-nav > ul > li > a::before, .site-nav .sub-toggle::before { display: none; }

  /* dropdown items: squared, bright bars */
  .site-nav ul.sub a { border-radius: 2px; }
  .site-nav ul.sub a::before { border-radius: 0; width: 3px; background: #fff; box-shadow: 0 0 8px #fff, 0 0 16px #a66bff; }
  .site-nav ul.sub { border-radius: 4px; }
  .site-nav ul.sub a:hover, .site-nav ul.sub a:focus-visible {
    color: #fff; background: linear-gradient(180deg, #e9d8ff 0%, #b98aff 16%, #9450ff 55%, #6a26dc 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), inset 0 -6px 12px rgba(46, 6, 110, .4), 0 0 14px rgba(190, 140, 255, .9), 0 0 32px rgba(150, 80, 255, .55);
    text-shadow: 0 1px 0 rgba(40, 4, 90, .85), 0 0 2px rgba(40, 4, 90, .7);
  }
  .site-nav ul.sub a[aria-current="page"] { color: #fff; background: linear-gradient(90deg, rgba(166, 107, 255, .38), rgba(166, 107, 255, .06)); box-shadow: inset 0 0 0 1px rgba(232, 218, 255, .3); }
}

/* the star sprites (made by site.js; never for reduced motion) */
.site-nav .nav-spark { position: absolute; width: 12px; height: 12px; z-index: 3; pointer-events: none; list-style: none;
  filter: drop-shadow(0 0 3px var(--c, #fff)) drop-shadow(0 0 7px #a66bff);
  animation: nav-spark var(--t, .9s) cubic-bezier(.2, .8, .3, 1) both; }
.site-nav .nav-spark::before { content: ""; position: absolute; inset: 0; background: var(--c, #fff);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
.site-nav .nav-spark.dot::before { inset: 4px; border-radius: 50%; clip-path: none; }

/* phones: the current page is a bright squared strip */
@media (max-width: 860px) {
  .site-nav a[aria-current="page"] { border-radius: 2px; background: linear-gradient(90deg, rgba(196, 150, 255, .4), rgba(138, 77, 255, .08) 80%);
    box-shadow: inset 3px 0 0 #fff, inset 0 0 0 1px rgba(232, 218, 255, .25); padding-left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav .nav-glow, .site-nav .nav-glow::before, .site-nav .nav-glow::after { animation: none; }
  .site-nav .nav-spark { display: none; }
}
/* ==========================================================
   CURSEFORGE CALLS TO ACTION (addons.html and addon-*.html; tools/build_addon_pages.py adds them for addons with a
   "curseforge" link): a "Get it on CurseForge" button beside Download, and a short panel saying why (the app keeps
   the addon up to date) and how a follow or comment helps. CurseForge's ember orange, framed in the Coil's violet.
   ========================================================== */
.btn.cf-btn { background: linear-gradient(180deg, #ff8a5c, #e8542a); border-color: #ffb08f; color: #1a0703; box-shadow: 0 0 18px rgba(241, 100, 54, .35); }
.btn.cf-btn:hover, .btn.cf-btn:focus-visible { background: linear-gradient(180deg, #ffa27c, #f16436); color: #1a0703; border-color: #fff; box-shadow: 0 0 24px rgba(241, 100, 54, .6); }
.cf-cta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; align-items: start; margin: 18px 0 4px; padding: 14px 16px;
  border: 1px solid rgba(241, 100, 54, .45); background: linear-gradient(110deg, rgba(241, 100, 54, .12), rgba(75, 35, 134, .25) 55%, rgba(17, 10, 29, .7));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.cf-cta .kicker { margin: 0 0 4px; color: #ff9a74; }
.cf-cta p { margin: 0; color: var(--bone); font-size: .95rem; }
.cf-glyph { width: 40px; height: 40px; display: grid; place-items: center; color: #ffb08f; border: 1px solid rgba(241, 100, 54, .5); border-radius: 50%;
  background: radial-gradient(circle, rgba(241, 100, 54, .25), transparent 70%); }
.cf-glyph svg { width: 22px; height: 22px; }
.cf-cta .btn { grid-column: 2; justify-self: start; }
@media (max-width: 560px) { .cf-cta .btn { grid-column: 1 / -1; } }

/* the addon pages' video (Master Baiter Pro #watch): the screenshot frame, sized for a 16:9 clip */
#watch { scroll-margin-top: 96px; }
.addon-video video { display: block; width: 100%; max-width: 960px; height: auto; aspect-ratio: 16 / 9; margin: 0 auto; background: #07040d;
  border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 0 28px rgba(138,77,255,.25); }

/* Master Baiter Pro's logo on its card and page: round, in a violet glow */
.dq-logo.mbp-logo { width: 140px; height: 140px; border-radius: 50%; filter: drop-shadow(0 0 20px rgba(150, 80, 255, .6)); }


/* ========================================================================
   ADDON FEATURE GUIDES (the "Every feature, explained" section on addon pages,
   built by tools/build_addon_pages.py from docs/*.md)
   ======================================================================== */
.prose.guide { max-width: 860px; margin-left: auto; margin-right: auto; }
.prose.guide h2[id^="guide-"] { margin-top: 2.2em; padding-bottom: .3em; border-bottom: 1px solid rgba(232, 190, 96, .25); scroll-margin-top: 90px; }
.prose.guide h3 { margin-top: 1.4em; scroll-margin-top: 90px; }
.prose.guide ul { padding-left: 1.3em; }
.prose.guide li { margin: .35em 0; line-height: 1.6; }
.guide-toc { margin: 1.2em 0 2em; padding: 1em 1.4em; border: 1px solid rgba(232, 190, 96, .35); border-radius: 10px;
  background: linear-gradient(180deg, rgba(120, 80, 200, .10), rgba(0, 0, 0, .15)); }
.guide-toc ol { columns: 2; column-gap: 2em; margin: .4em 0 0; padding-left: 0; list-style: none; }
.guide-toc li { break-inside: avoid; margin: .25em 0; }
.guide-toc a { text-decoration: none; }
.guide-toc a:hover, .guide-toc a:focus-visible { text-decoration: underline; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1em 0; }
.table-wrap table { min-width: 520px; }
@media (max-width: 640px) { .guide-toc ol { columns: 1; } }

/* StoryCaster and other multi-image screenshot galleries on addon pages */
.addon-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.addon-gallery .addon-shot { margin: 0; }
.addon-gallery .addon-shot:first-child { grid-column: 1 / -1; }
.addon-gallery .addon-shot img { transition: transform .25s ease, box-shadow .25s ease; }
.addon-gallery .addon-shot a:hover img, .addon-gallery .addon-shot a:focus-visible img { transform: translateY(-3px); box-shadow: 0 0 34px rgba(237, 194, 97, .35); }
.addon-gallery-note { margin-top: 10px; font-size: .85rem; }
@media (max-width: 760px) { .addon-gallery { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .addon-gallery .addon-shot img { transition: none; } }