/* ============================================================================
   Moonfall blog — long-form reading surface that matches the landing aesthetic.
   Self-contained: self-hosted fonts, no external resources. Dark cosmic theme,
   Cinzel/Spectral, violet accents, ~68ch measure. Responsive 390px -> 4K.
   ========================================================================== */

/* ---- fonts (self-hosted, same files as the landing) ---- */
@font-face{font-family:'Cinzel';src:url('/assets/fonts/cinzel-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Cinzel';src:url('/assets/fonts/cinzel-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Spectral';src:url('/assets/fonts/spectral-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Spectral';src:url('/assets/fonts/spectral-500.woff2') format('woff2');font-weight:500;font-display:swap}

/* ---- tokens (mirror landing.html) ---- */
:root{
  --ink:#07050d;
  --ink-2:#0b0816;
  --lav:#eedbf1;
  --lav-dim:#cdbce0;
  --lav-faint:#9d8fb3;
  --violet:#8a64c8;
  --violet-2:#7b68ee;
  --violet-deep:#4a3270;
  --line:rgba(238,219,241,.16);
  --line-soft:rgba(238,219,241,.09);
  --measure:38rem;      /* ~68ch of Spectral */
  --wide:62rem;
  --hero-w:70rem;
  --ease:cubic-bezier(.22,.61,.36,1);
  --pad:clamp(1.1rem,5vw,2rem);
}
*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ink);
  color:var(--lav);
  font-family:'Spectral',Georgia,serif;
  font-weight:400;
  font-size:clamp(1.02rem,.55vw + .92rem,1.19rem);
  line-height:1.75;
  letter-spacing:.2px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  min-height:100svh;
}

/* fixed cosmic backdrop: violet wash + faint star field, purely CSS */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(120% 78% at 50% -10%,rgba(74,50,112,.42),transparent 56%),
    radial-gradient(90% 70% at 12% 4%,rgba(123,104,238,.16),transparent 60%),
    linear-gradient(180deg,var(--ink),var(--ink-2) 60%,var(--ink));
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%,rgba(238,219,241,.7),transparent 60%),
    radial-gradient(1.2px 1.2px at 70% 20%,rgba(238,219,241,.55),transparent 60%),
    radial-gradient(1.1px 1.1px at 40% 70%,rgba(238,219,241,.5),transparent 60%),
    radial-gradient(1.3px 1.3px at 85% 60%,rgba(238,219,241,.5),transparent 60%),
    radial-gradient(1px 1px at 55% 45%,rgba(238,219,241,.45),transparent 60%);
  background-size:520px 520px,360px 360px,440px 440px,600px 600px,300px 300px;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:'Cinzel',serif;line-height:1.12;margin:0;letter-spacing:.4px}
p{margin:0}
:focus-visible{outline:2px solid var(--violet-2);outline-offset:3px;border-radius:6px}
::selection{background:rgba(138,100,200,.42);color:#fff}

.skip-link{position:absolute;left:-999px;top:0;z-index:50;background:var(--ink-2);color:var(--lav);
  padding:.6em 1em;border:1px solid var(--line);border-radius:8px}
.skip-link:focus{left:.6rem;top:.6rem}

/* ============================================================ NAV */
.nav{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem var(--pad);
  background:rgba(7,5,13,.72);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center}
.brandmark{height:clamp(30px,4.4vw,40px);width:auto;border-radius:6px;
  filter:drop-shadow(0 5px 14px rgba(0,0,0,.5)) drop-shadow(0 0 12px rgba(123,104,238,.34));
  transition:transform .25s var(--ease),filter .25s ease}
.brand:hover .brandmark{transform:translateY(-1px);filter:drop-shadow(0 6px 16px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(123,104,238,.5))}
.nav-right{display:flex;align-items:center;gap:clamp(.5rem,1.6vw,1.1rem)}
.nav-link{font-family:'Cinzel',serif;font-weight:600;font-size:.82rem;letter-spacing:.12em;color:var(--lav-dim);transition:color .2s}
.nav-link:hover{color:var(--lav)}
.langdial{position:relative;display:inline-flex;align-items:center;color:var(--lav-faint)}
.langdial svg{width:16px;height:16px;position:absolute;left:.55rem;pointer-events:none}
.langdial select{
  appearance:none;-webkit-appearance:none;
  background:rgba(238,219,241,.06);color:var(--lav-dim);
  border:1px solid var(--line);border-radius:999px;
  font-family:'Spectral',serif;font-size:.82rem;
  padding:.4em 1.8em .4em 2em;cursor:pointer;transition:border-color .2s,color .2s}
.langdial select:hover{color:var(--lav);border-color:rgba(238,219,241,.3)}
.langdial::after{content:"";position:absolute;right:.75rem;width:.4rem;height:.4rem;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-1px);pointer-events:none}
.nav-cta,.btn{
  font-family:'Cinzel',serif;font-weight:600;letter-spacing:.1em;color:#fff;
  background:linear-gradient(135deg,var(--violet),var(--violet-2));
  box-shadow:0 8px 24px -8px rgba(123,104,238,.7),inset 0 0 0 1px rgba(255,255,255,.18);
  border-radius:999px;transition:transform .25s var(--ease),box-shadow .35s;white-space:nowrap}
.nav-cta{font-size:.78rem;padding:.62em 1.15em}
.nav-cta:hover,.btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px -8px rgba(123,104,238,.85),inset 0 0 0 1px rgba(255,255,255,.3)}

/* ============================================================ LAYOUT WRAPS */
main{display:block}
.wrap{width:min(92%,var(--measure));margin-inline:auto}
.wrap.wide{width:min(94%,var(--wide))}

/* ============================================================ ARTICLE HEAD */
.post{padding-bottom:clamp(2.5rem,6vh,4rem)}
.head{padding-top:clamp(1.8rem,5vh,3.2rem);text-align:center}
.crumbs{margin-bottom:1.4rem}
.crumbs a{font-size:.8rem;letter-spacing:.06em;color:var(--lav-faint);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.crumbs a::before{content:"‹ ";}
.crumbs a:hover{color:var(--lav);border-color:var(--line)}
.kicker{font-family:'Cinzel',serif;font-weight:600;font-size:.76rem;letter-spacing:.28em;text-transform:uppercase;
  /* the hint label above a post title — matches landing.html's .kicker, which
     came off --violet-2 for the same reason: it is decoration, not an
     affordance. Links below deliberately KEEP the violet; colour is what
     tells you they are links. */
  color:var(--lav-dim);margin-bottom:.9rem}
.head h1{font-weight:700;font-size:clamp(1.9rem,4.4vw,3.05rem);
  background:linear-gradient(180deg,#fff, var(--lav) 55%,var(--lav-dim));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lede{margin:1.05rem auto 0;max-width:34rem;font-size:clamp(1.08rem,1.4vw,1.28rem);
  color:var(--lav-dim);line-height:1.6}
.byline{margin-top:1.35rem;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:center;
  font-size:.82rem;color:var(--lav-faint);letter-spacing:.02em}
.byline .dot{opacity:.5}
.byline time{color:var(--lav-dim)}

/* ============================================================ HERO FIGURE */
figure{margin:0}
figure.hero{
  width:min(94%,var(--hero-w));margin:clamp(1.8rem,4vh,2.8rem) auto 0;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 30px 80px -40px rgba(0,0,0,.9),0 0 0 1px rgba(123,104,238,.08);
  background:var(--ink-2);position:relative}
figure.hero img{width:100%;height:clamp(220px,42vw,460px);object-fit:cover;object-position:center 28%}
figure.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(7,5,13,.55));}
figcaption{font-size:.82rem;color:var(--lav-faint);text-align:center;line-height:1.5;
  padding:.85rem 1.1rem;font-style:italic}
figure.hero figcaption{position:relative;z-index:2;border-top:1px solid var(--line-soft)}

/* ============================================================ PROSE */
.prose{margin-top:clamp(2.2rem,5vh,3.2rem)}
.prose > p,.prose > ul,.prose > ol,.prose > blockquote{margin-top:1.15rem}
.prose > h2{font-weight:700;font-size:clamp(1.4rem,2.6vw,1.95rem);color:var(--lav);
  margin-top:2.6rem;padding-top:.3rem;letter-spacing:.3px}
.prose > h3{font-weight:600;font-size:clamp(1.12rem,1.9vw,1.4rem);color:var(--lav);margin-top:1.9rem}
.prose a{color:var(--violet-2);border-bottom:1px solid rgba(123,104,238,.4);transition:color .2s,border-color .2s}
.prose a:hover{color:var(--lav);border-color:var(--lav)}
.prose strong{color:#fff;font-weight:500}
.prose em{color:var(--lav)}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:rgba(238,219,241,.08);border:1px solid var(--line-soft);border-radius:5px;padding:.08em .38em}
.prose ul,.prose ol{padding-left:1.3rem}
.prose li{margin-top:.5rem}
.prose li::marker{color:var(--violet-2)}
.prose blockquote{margin-inline:0;padding:.2rem 0 .2rem 1.2rem;border-left:2px solid var(--violet);
  color:var(--lav-dim);font-style:italic}
.prose hr{border:0;height:1px;background:var(--line);margin:2.4rem 0}

/* inline body figures */
.prose figure.fig{margin:2rem 0;border:1px solid var(--line);border-radius:14px;overflow:hidden;
/* Data graphics break out of the 38rem reading measure: a 1280-wide chart scaled
   into the prose column renders its axis labels at about six pixels. The symmetric
   calc margin centres the overhang without a transform, so captions stay crisp, and
   the 92vw term makes it collapse back to a normal figure on narrow screens. */
.prose figure.fig.data-graphic{
  width:min(92vw,var(--wide));
  margin-inline:calc((100% - min(92vw,var(--wide))) / 2);
  background:#0b0d12}
.prose figure.fig.data-graphic picture{display:block}
.prose figure.fig.data-graphic img{display:block;object-fit:contain}
  background:var(--ink-2);box-shadow:0 24px 60px -40px rgba(0,0,0,.85)}
.prose figure.fig img{width:100%;height:auto}
.prose figure.fig.front-fig{max-width:22rem;margin-inline:auto}
.prose figure.fig.spell-card-fig{max-width:min(17rem,84vw);margin-inline:auto}
.prose figure.fig.spell-card-fig img{display:block;width:100%;height:auto;object-fit:contain}

/* ---- live Stellar embed: video inside the card frame's transparent art window.
   Window geometry measured from the swin alpha mask (8.56% / 14.02% / 83.02% / 50.69%).
   Featured size — larger than a normal front figure, per user request. */
.prose figure.stellar-fig{max-width:26rem;margin-inline:auto}
.stellar-ph{position:relative;display:block;aspect-ratio:720/1283;cursor:pointer;
  filter:drop-shadow(0 10px 34px rgba(123,104,238,.22));transition:filter .35s ease}
.stellar-ph:hover{filter:drop-shadow(0 12px 44px rgba(123,104,238,.42))}
.stellar-ph .stellar-vid,.stellar-ph .stellar-summon{position:absolute;left:7.3%;top:12.9%;
  width:85.6%;height:53%;object-fit:cover;z-index:0;display:block}
/* the loop keeps its dark bed; the summon layer is TRANSPARENT so the loop stays
   visible underneath until the summon actually has frames (JS adds .summoning only
   on the video's 'playing' signal — never on hover alone) */
.stellar-ph .stellar-vid{background:#0d0a18}
.stellar-ph .stellar-summon{opacity:0;transition:opacity .22s ease;pointer-events:none;background:transparent}
.stellar-ph.summoning .stellar-summon{opacity:1}
.stellar-ph .stellar-frame{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.stellar-sound{position:absolute;z-index:2;right:10.5%;top:58.5%;width:2.1rem;height:2.1rem;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  border:1px solid rgba(238,219,241,.35);background:rgba(13,10,24,.72);color:#cdbce0;
  cursor:pointer;transition:color .25s,border-color .25s,background .25s}
.stellar-sound:hover,.stellar-sound:focus-visible{color:#eedbf1;border-color:rgba(238,219,241,.7)}
.stellar-sound .wave{opacity:0}
.sound-on .stellar-sound{color:#f5d76e;border-color:rgba(245,215,110,.6)}
.sound-on .stellar-sound .wave{opacity:1}
.stellar-sound.locked{animation:stellarNudge 1.6s ease-in-out 2}
@keyframes stellarNudge{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}

/* ============================================================ FAQ */
.faq{margin-top:clamp(2.8rem,6vh,3.8rem);border-top:1px solid var(--line);padding-top:clamp(1.6rem,4vh,2.4rem)}
.faq > h2{font-family:'Cinzel',serif;font-weight:700;font-size:clamp(1.35rem,2.4vw,1.8rem);margin-bottom:.5rem}
.faq-item{padding:1.15rem 0;border-bottom:1px solid var(--line-soft)}
.faq-q{font-family:'Cinzel',serif;font-weight:600;font-size:1.06rem;color:var(--lav);margin-bottom:.5rem}
.faq-a{color:var(--lav-dim);font-size:.98em}
.faq-a a{color:var(--violet-2);border-bottom:1px solid rgba(123,104,238,.4)}
.faq-a a:hover{color:var(--lav)}

/* ============================================================ END CTA */
.endcta{margin-top:clamp(3rem,7vh,4.5rem);text-align:center;
  padding:clamp(1.8rem,4vw,2.8rem);border-radius:18px;
  border:1px solid rgba(123,104,238,.28);
  background:
    radial-gradient(120% 120% at 50% 0%,rgba(74,50,112,.34),transparent 62%),
    rgba(11,8,22,.6);
  box-shadow:0 30px 80px -50px rgba(123,104,238,.6)}
.endcta .kicker{margin-bottom:.7rem}
.endcta-h{font-family:'Cinzel',serif;font-weight:700;font-size:clamp(1.5rem,3vw,2.2rem);
  color:#fff;line-height:1.12}
.endcta-sub{margin:.7rem auto 1.4rem;max-width:30rem;color:var(--lav-dim)}
.endcta .btn{display:inline-block;font-size:.92rem;padding:.75em 1.7em}

/* ============================================================ RELATED */
.related{margin-top:clamp(2.8rem,6vh,4rem)}
.related > h2{font-family:'Cinzel',serif;font-weight:700;font-size:clamp(1.25rem,2.2vw,1.6rem);
  text-align:center;margin-bottom:1.4rem;color:var(--lav)}
.rel-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.rel-card{display:flex;gap:.9rem;align-items:center;padding:.7rem;border:1px solid var(--line);border-radius:14px;
  background:rgba(238,219,241,.03);transition:transform .25s var(--ease),border-color .25s,background .25s}
.rel-card:hover{transform:translateY(-3px);border-color:rgba(123,104,238,.4);background:rgba(238,219,241,.06)}
.rel-thumb{flex:none;width:64px;height:64px;border-radius:10px;overflow:hidden;border:1px solid var(--line-soft)}
.rel-thumb img{width:100%;height:100%;object-fit:cover;object-position:center 25%}
.rel-text{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.rel-kicker{font-family:'Cinzel',serif;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--lav-dim)}
.rel-title{font-family:'Cinzel',serif;font-weight:600;font-size:1rem;color:var(--lav);line-height:1.2}

/* ============================================================ INDEX */
.index{padding-bottom:clamp(3rem,7vh,5rem)}
.index-head{padding-top:clamp(2.4rem,6vh,4rem);text-align:center}
.index-head h1{font-weight:700;font-size:clamp(2.1rem,5vw,3.4rem);
  background:linear-gradient(180deg,#fff,var(--lav) 55%,var(--lav-dim));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.index-head .lede{margin-top:1.1rem}
.card-grid{margin-top:clamp(2rem,5vh,3rem);display:grid;gap:clamp(1rem,2.4vw,1.6rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr))}
.card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:rgba(11,8,22,.55);transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.card:hover{transform:translateY(-4px);border-color:rgba(123,104,238,.42);
  box-shadow:0 30px 70px -44px rgba(123,104,238,.7)}
.card-media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--ink-2)}
.card-media img{width:100%;height:100%;object-fit:cover;object-position:center 26%;transition:transform .5s var(--ease)}
.card:hover .card-media img{transform:scale(1.05)}
.card-body{display:flex;flex-direction:column;gap:.5rem;padding:1.1rem 1.15rem 1.3rem}
.card-kicker{font-family:'Cinzel',serif;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--lav-dim)}
.card-title{font-family:'Cinzel',serif;font-weight:700;font-size:1.22rem;color:var(--lav);line-height:1.18}
.card-desc{color:var(--lav-dim);font-size:.94rem;line-height:1.55}
.card-meta{font-size:.78rem;color:var(--lav-faint);margin-top:.1rem}
.card-cta{margin-top:.35rem;font-family:'Cinzel',serif;font-weight:600;font-size:.82rem;letter-spacing:.06em;color:var(--violet-2);transition:color .2s}
.card:hover .card-cta{color:var(--lav)}

/* ============================================================ FOOTER */
.site-footer{border-top:1px solid var(--line);margin-top:clamp(2rem,5vh,3rem);
  padding:clamp(1.8rem,4vh,2.6rem) var(--pad) clamp(2.2rem,5vh,3rem);
  display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center}
.socials{display:flex;gap:1rem;align-items:center}
.socials a{width:22px;height:22px;color:var(--lav-faint);transition:color .2s,transform .2s}
.socials a:hover{color:var(--lav);transform:translateY(-2px)}
.socials svg{width:22px;height:22px}
.foot-links{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;font-size:.86rem;color:var(--lav-dim)}
.foot-links a{color:var(--lav-dim);transition:color .2s}
.foot-links a:hover{color:var(--lav)}
.foot-links .sep{opacity:.4}
.foot-rights{font-size:.8rem;color:var(--lav-faint);letter-spacing:.02em}

/* ============================================================ RESPONSIVE */
@media (max-width:560px){
  .nav-link{display:none}
  figure.hero img{height:clamp(180px,54vw,320px)}
  .rel-card{gap:.7rem}
}
@media (min-width:2200px){
  :root{--measure:42rem;--wide:70rem;--hero-w:80rem}
  body{font-size:1.28rem}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
  .card:hover,.rel-card:hover,.nav-cta:hover,.btn:hover{transform:none}
}