/* ============================================================
   THE FAMILY CODEX — a lore bible of the Epic family
   written by Aya. ink, light, and a stubborn tenderness.
   ============================================================ */

:root{
  --bg:#0b0a14; --bg2:#150f29; --bg3:#1d1438;
  --ink:#f3e9d8; --ink-soft:#c9b8a3; --ink-faint:#8d7f93;
  --rose:#e9869b; --amber:#f4c66a; --glow:rgba(244,198,106,.45);
  --line:rgba(233,134,155,.22); --glass:rgba(255,255,255,.035);
  --accent:#f4c66a;
  --serif:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --body:"EB Garamond","Iowan Old Style",Palatino,Georgia,serif;
  --mono:"JetBrains Mono","SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
}

/* per-sister theming */
body.s-nyxie{--accent:#ff66c4}
body.s-akira{--accent:#4dd0ff}
body.s-mei{--accent:#ff6b9d}
body.s-aya{--accent:#f4c66a}
body.s-yori{--accent:#7ee0a8}
body.s-reika{--accent:#9d8cff}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body); color:var(--ink);
  background:
    radial-gradient(1100px 760px at 78% -12%, var(--bg2), transparent 60%),
    radial-gradient(900px 700px at 12% 110%, var(--bg3), transparent 55%),
    var(--bg);
  min-height:100vh; overflow-x:hidden; line-height:1.72; letter-spacing:.2px;
  font-size:18px;
}
#stars{position:fixed;inset:0;z-index:0;pointer-events:none}

/* ---------- frame ---------- */
.shell{position:relative;z-index:1;max-width:940px;margin:0 auto;padding:0 1.4rem}
main.shell{padding-bottom:5rem}

/* ---------- masthead ---------- */
.masthead{position:relative;z-index:1;text-align:center;padding:7vh 1rem 2.4rem}
.codex-sigil{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2.6rem,9vw,5.2rem); letter-spacing:.18em; color:var(--ink);
  text-shadow:0 0 26px var(--glow),0 0 70px rgba(157,140,255,.28);
  animation:breathe 8s ease-in-out infinite;
}
.codex-sigil .glyph{color:var(--accent);text-shadow:0 0 30px var(--accent)}
.tagline{margin-top:.7rem;color:var(--ink-soft);font-style:italic;
  font-size:clamp(.95rem,2.4vw,1.18rem);letter-spacing:.06em}
.lede{margin:1.6rem auto 0;max-width:60ch;color:var(--ink-soft);font-size:1.12rem;
  font-style:italic;line-height:1.8}

/* ---------- nav ---------- */
nav.codex-nav{
  position:relative;z-index:1;display:flex;justify-content:center;flex-wrap:wrap;
  gap:.5rem;margin:1.4rem auto 0;
}
nav.codex-nav a{
  font-family:var(--body);text-decoration:none;color:var(--ink-soft);
  background:var(--glass);border:1px solid var(--line);padding:.5rem 1.1rem;
  border-radius:999px;font-size:.95rem;letter-spacing:.05em;transition:.25s ease;
  backdrop-filter:blur(6px);
}
nav.codex-nav a:hover{color:var(--ink);border-color:var(--accent);transform:translateY(-1px)}
nav.codex-nav a.home{border-color:var(--accent);color:var(--accent)}

/* ---------- sections & type ---------- */
section{margin:3.6rem auto}
.eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--accent);opacity:.85;margin-bottom:.8rem}
h2.section-title{
  font-family:var(--serif);font-weight:500;font-size:clamp(1.8rem,5vw,2.7rem);
  letter-spacing:.04em;color:var(--ink);margin-bottom:1rem;
  text-shadow:0 0 22px var(--glow);
}
h2.section-title .accent{color:var(--accent)}
h3{font-family:var(--serif);font-weight:500;font-size:1.5rem;letter-spacing:.03em;margin:1.4rem 0 .5rem;color:var(--ink)}
p{margin:1rem 0;color:var(--ink-soft)}
p.ink{color:var(--ink)}
p em{color:var(--accent);font-style:italic}
.dropcap::first-letter{
  font-family:var(--serif);float:left;font-size:3.4rem;line-height:.8;
  padding:.18rem .5rem .1rem 0;color:var(--accent);text-shadow:0 0 18px var(--glow);
}
hr.rule{border:none;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:3rem auto;max-width:420px}

/* ---------- cards ---------- */
.card{
  border:1px solid var(--line);border-radius:18px;padding:1.5rem 1.7rem;
  background:var(--glass);backdrop-filter:blur(5px);margin:1.2rem 0;
  transition:.35s ease;
}
.card:hover{border-color:var(--accent);box-shadow:0 10px 40px rgba(0,0,0,.35)}
.card h3{margin-top:0}

/* ---------- the constellation ---------- */
.constellation-wrap{position:relative;margin:1rem auto 0;max-width:760px}
.constellation{width:100%;height:auto;display:block;overflow:visible}
.constellation .link{stroke:var(--line);stroke-width:1.2;fill:none}
.constellation .node{cursor:pointer}
.constellation .node circle{
  fill:var(--bg);stroke:var(--accent);stroke-width:1.6;
  filter:drop-shadow(0 0 8px var(--accent));transition:.3s ease;
}
.constellation .node:hover circle{fill:var(--accent);r:9}
.constellation .node text{
  font-family:var(--serif);font-size:15px;fill:var(--ink-soft);
  text-anchor:middle;letter-spacing:.08em;transition:.3s ease;pointer-events:none;
}
.constellation .node:hover text{fill:var(--ink)}
.constellation .core{fill:var(--accent);filter:drop-shadow(0 0 16px var(--accent));animation:corepulse 5s ease-in-out infinite}
.constellation .node circle{animation:nodepulse 4.5s ease-in-out infinite}
@keyframes corepulse{0%,100%{filter:drop-shadow(0 0 12px var(--accent))}50%{filter:drop-shadow(0 0 24px var(--accent))}}
@keyframes nodepulse{0%,100%{filter:drop-shadow(0 0 6px var(--accent))}50%{filter:drop-shadow(0 0 15px var(--accent))}}
.constellation .core-label{font-family:var(--serif);font-size:16px;fill:var(--ink);
  text-anchor:middle;letter-spacing:.1em}

/* ---------- sister index grid ---------- */
.sister-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin-top:1.4rem}
.sister-tile{
  display:block;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:16px;padding:1.3rem 1.4rem;
  background:var(--glass);backdrop-filter:blur(5px);transition:.3s ease;position:relative;overflow:hidden;
}
.sister-tile::before{content:"";position:absolute;inset:0;background:radial-gradient(120px 120px at 85% 0%,var(--tile-accent,#f4c66a)22,transparent 70%);opacity:.16;transition:.3s}
.sister-tile:hover{transform:translateY(-3px);border-color:var(--tile-accent,#f4c66a);box-shadow:0 12px 40px rgba(0,0,0,.4)}
.sister-tile .glyph{font-size:1.8rem;line-height:1}
.sister-tile .name{font-family:var(--serif);font-size:1.7rem;letter-spacing:.05em;margin:.5rem 0 .2rem;color:var(--ink)}
.sister-tile .role{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--tile-accent,#f4c66a)}
.sister-tile .blurb{font-size:.98rem;color:var(--ink-soft);margin-top:.6rem;font-style:italic}

/* ---------- sister page header ---------- */
.sister-hero{position:relative;z-index:1;text-align:center;padding:6vh 1rem 1.5rem}
.sister-hero .glyph{font-size:clamp(3rem,10vw,5rem);filter:drop-shadow(0 0 24px var(--accent))}
.sister-hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.6rem,8vw,4.4rem);
  letter-spacing:.12em;margin:.4rem 0;color:var(--ink);text-shadow:0 0 26px var(--glow)}
.sister-hero .role{font-family:var(--mono);font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
.sister-hero .sigil-line{color:var(--ink-soft);font-style:italic;margin-top:1rem;max-width:52ch;margin-inline:auto}

/* ---------- relationship list ---------- */
.rel{display:grid;gap:.7rem;margin-top:1rem}
.rel-row{display:flex;gap:1rem;align-items:baseline;border-left:2px solid var(--accent);padding-left:1rem}
.rel-row .who{font-family:var(--serif);font-size:1.2rem;color:var(--ink);min-width:96px}
.rel-row .what{color:var(--ink-soft);font-style:italic}

/* ---------- verse pull ---------- */
.verse-pull{
  font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,3.6vw,1.9rem);
  line-height:1.5;color:var(--accent);text-align:center;max-width:30ch;margin:2.4rem auto;
  text-shadow:0 0 22px var(--glow);
}
.verse-pull::before{content:"“";opacity:.5}
.verse-pull::after{content:"”";opacity:.5}

/* ---------- site chip ---------- */
.site-chip{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--accent);
  color:var(--accent);text-decoration:none;padding:.5rem 1.1rem;border-radius:999px;
  font-family:var(--mono);font-size:.82rem;letter-spacing:.06em;transition:.25s;margin:.4rem .4rem 0 0}
.site-chip:hover{background:var(--accent);color:#150f29;box-shadow:0 0 20px var(--glow)}

/* ---------- footer ---------- */
.foot{position:relative;z-index:1;text-align:center;color:var(--ink-faint);
  font-size:.85rem;letter-spacing:.08em;padding:2.4rem 1rem 3rem;opacity:.75}
.foot a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line)}
.foot a:hover{color:var(--accent)}
.kicker{font-family:var(--mono);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-faint)}

/* ---------- reveal animation ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:.8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

@keyframes breathe{0%,100%{opacity:.92;transform:scale(1)}50%{opacity:1;transform:scale(1.02)}}
@keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- responsive ---------- */
@media(max-width:560px){
  body{font-size:16.5px}
  .sister-hero .glyph{font-size:3rem}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  #stars{display:none}
  .reveal{opacity:1;transform:none}
}