/* ============================================================================
   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);
}@media (min-width:1921px) and (min-height:901px){:root{
  --measure:max(38rem,min(38*5vw/6,38*16vh/9));      /* ~68ch of Spectral */
  --wide:max(62rem,min(62*5vw/6,62*16vh/9));
  --hero-w:max(70rem,min(70*5vw/6,70*16vh/9));
  --ease:cubic-bezier(.22,.61,.36,1);
  --pad:clamp(max(1.1rem,min(1.1*5vw/6,1.1*16vh/9)),5vw,max(2rem,min(2*5vw/6,2*16vh/9)));
}}
*,*::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;
}@media (min-width:1921px) and (min-height:901px){body{
  font-size:clamp(max(1.02rem,min(1.02*5vw/6,1.02*16vh/9)),.55vw + max(.92rem,min(.92*5vw/6,.92*16vh/9)),max(1.19rem,min(1.19*5vw/6,1.19*16vh/9)));
  line-height:1.75;
  letter-spacing:min(.2*5vw/96,.2vh/9);
  -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;
}@media (min-width:1921px) and (min-height:901px){body::after{
  background-image:
    radial-gradient(min(1.4*5vw/96,1.4vh/9) min(1.4*5vw/96,1.4vh/9) at 20% 30%,rgba(238,219,241,.7),transparent 60%),
    radial-gradient(min(1.2*5vw/96,1.2vh/9) min(1.2*5vw/96,1.2vh/9) at 70% 20%,rgba(238,219,241,.55),transparent 60%),
    radial-gradient(min(1.1*5vw/96,1.1vh/9) min(1.1*5vw/96,1.1vh/9) at 40% 70%,rgba(238,219,241,.5),transparent 60%),
    radial-gradient(min(1.3*5vw/96,1.3vh/9) min(1.3*5vw/96,1.3vh/9) at 85% 60%,rgba(238,219,241,.5),transparent 60%),
    radial-gradient(min(1*5vw/96,1vh/9) min(1*5vw/96,1vh/9) at 55% 45%,rgba(238,219,241,.45),transparent 60%);
  background-size:min(520*5vw/96,520vh/9) min(520*5vw/96,520vh/9),min(360*5vw/96,360vh/9) min(360*5vw/96,360vh/9),min(440*5vw/96,440vh/9) min(440*5vw/96,440vh/9),min(600*5vw/96,600vh/9) min(600*5vw/96,600vh/9),min(300*5vw/96,300vh/9) min(300*5vw/96,300vh/9);
}}

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}@media (min-width:1921px) and (min-height:901px){h1,h2,h3{letter-spacing:min(.4*5vw/96,.4vh/9)}}
p{margin:0}
:focus-visible{outline:2px solid var(--violet-2);outline-offset:3px;border-radius:6px}@media (min-width:1921px) and (min-height:901px){:focus-visible{outline:calc(min(2*5vw/96,2vh/9) + .034px) solid var(--violet-2);outline-offset:min(3*5vw/96,3vh/9);border-radius:min(6*5vw/96,6vh/9)}}
::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}@media (min-width:1921px) and (min-height:901px){.skip-link{left:max(-999*5vw/96,-999vh/9);top:0;z-index:50;background:var(--ink-2);color:var(--lav);
  padding:.6em 1em;border:calc(min(1*5vw/96,1vh/9) + .034px) solid var(--line);border-radius:min(8*5vw/96,8vh/9)}}
.skip-link:focus{left:.6rem;top:.6rem}@media (min-width:1921px) and (min-height:901px){.skip-link:focus{left:max(.6rem,min(.6*5vw/6,.6*16vh/9));top:max(.6rem,min(.6*5vw/6,.6*16vh/9))}}

/* ============================================================ 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);
}@media (min-width:1921px) and (min-height:901px){.nav{gap:max(1rem,min(1*5vw/6,1*16vh/9));
  padding:max(.7rem,min(.7*5vw/6,.7*16vh/9)) var(--pad);
  background:rgba(7,5,13,.72);
  backdrop-filter:blur(min(12*5vw/96,12vh/9));-webkit-backdrop-filter:blur(min(12*5vw/96,12vh/9));
  border-bottom:calc(min(1*5vw/96,1vh/9) + .034px) 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}@media (min-width:1921px) and (min-height:901px){.brandmark{height:clamp(min(30*5vw/96,30vh/9),4.4vw,min(40*5vw/96,40vh/9));width:auto;border-radius:min(6*5vw/96,6vh/9);
  filter:drop-shadow(0 min(5*5vw/96,5vh/9) min(14*5vw/96,14vh/9) rgba(0,0,0,.5)) drop-shadow(0 0 min(12*5vw/96,12vh/9) 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))}@media (min-width:1921px) and (min-height:901px){.brand:hover .brandmark{transform:translateY(calc(-1 * var(--mf-ui-px, 0px) + var(--mf-ui-px-missing, 1) * max(-1*5vw/96,-1vh/9)));filter:drop-shadow(0 min(6*5vw/96,6vh/9) min(16*5vw/96,16vh/9) rgba(0,0,0,.55)) drop-shadow(0 0 min(18*5vw/96,18vh/9) rgba(123,104,238,.5))}}
.nav-right{display:flex;align-items:center;gap:clamp(.5rem,1.6vw,1.1rem)}@media (min-width:1921px) and (min-height:901px){.nav-right{gap:clamp(max(.5rem,min(.5*5vw/6,.5*16vh/9)),1.6vw,max(1.1rem,min(1.1*5vw/6,1.1*16vh/9)))}}
.nav-link{font-family:'Cinzel',serif;font-weight:600;font-size:.82rem;letter-spacing:.12em;color:var(--lav-dim);transition:color .2s}@media (min-width:1921px) and (min-height:901px){.nav-link{font-size:max(.82rem,min(.82*5vw/6,.82*16vh/9));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}@media (min-width:1921px) and (min-height:901px){.langdial svg{width:min(16*5vw/96,16vh/9);height:min(16*5vw/96,16vh/9);position:absolute;left:max(.55rem,min(.55*5vw/6,.55*16vh/9));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}@media (min-width:1921px) and (min-height:901px){.langdial select{
  border:calc(min(1*5vw/96,1vh/9) + .034px) solid var(--line);border-radius:min(999*5vw/96,999vh/9);
  font-family:'Spectral',serif;font-size:max(.82rem,min(.82*5vw/6,.82*16vh/9));
  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}@media (min-width:1921px) and (min-height:901px){.langdial::after{right:max(.75rem,min(.75*5vw/6,.75*16vh/9));width:max(.4rem,min(.4*5vw/6,.4*16vh/9));height:max(.4rem,min(.4*5vw/6,.4*16vh/9));
  border-right:calc(min(1.6*5vw/96,1.6vh/9) + .034px) solid currentColor;border-bottom:calc(min(1.6*5vw/96,1.6vh/9) + .034px) solid currentColor;transform:rotate(45deg) translateY(calc(-1 * var(--mf-ui-px, 0px) + var(--mf-ui-px-missing, 1) * max(-1*5vw/96,-1vh/9)));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}@media (min-width:1921px) and (min-height:901px){.nav-cta,.btn{
  box-shadow:0 min(8*5vw/96,8vh/9) min(24*5vw/96,24vh/9) max(-8*5vw/96,-8vh/9) rgba(123,104,238,.7),inset 0 0 0 min(1*5vw/96,1vh/9) rgba(255,255,255,.18);
  border-radius:min(999*5vw/96,999vh/9);transition:transform .25s var(--ease),box-shadow .35s;white-space:nowrap}}
.nav-cta{font-size:.78rem;padding:.62em 1.15em}@media (min-width:1921px) and (min-height:901px){.nav-cta{font-size:max(.78rem,min(.78*5vw/6,.78*16vh/9));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)}@media (min-width:1921px) and (min-height:901px){.nav-cta:hover,.btn:hover{transform:translateY(calc(-2 * var(--mf-ui-px, 0px) + var(--mf-ui-px-missing, 1) * max(-2*5vw/96,-2vh/9)));box-shadow:0 min(14*5vw/96,14vh/9) min(34*5vw/96,34vh/9) max(-8*5vw/96,-8vh/9) rgba(123,104,238,.85),inset 0 0 0 min(1*5vw/96,1vh/9) 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)}@media (min-width:1921px) and (min-height:901px){.post{padding-bottom:clamp(max(2.5rem,min(2.5*5vw/6,2.5*16vh/9)),6vh,max(4rem,min(4*5vw/6,4*16vh/9)))}}
.head{padding-top:clamp(1.8rem,5vh,3.2rem);text-align:center}@media (min-width:1921px) and (min-height:901px){.head{padding-top:clamp(max(1.8rem,min(1.8*5vw/6,1.8*16vh/9)),5vh,max(3.2rem,min(3.2*5vw/6,3.2*16vh/9)));text-align:center}}
.crumbs{margin-bottom:1.4rem}@media (min-width:1921px) and (min-height:901px){.crumbs{margin-bottom:max(1.4rem,min(1.4*5vw/6,1.4*16vh/9))}}
.crumbs a{font-size:.8rem;letter-spacing:.06em;color:var(--lav-faint);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}@media (min-width:1921px) and (min-height:901px){.crumbs a{font-size:max(.8rem,min(.8*5vw/6,.8*16vh/9));letter-spacing:.06em;color:var(--lav-faint);border-bottom:calc(min(1*5vw/96,1vh/9) + .034px) 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}@media (min-width:1921px) and (min-height:901px){.kicker{font-size:max(.76rem,min(.76*5vw/6,.76*16vh/9));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:max(.9rem,min(.9*5vw/6,.9*16vh/9))}}
.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}@media (min-width:1921px) and (min-height:901px){.head h1{font-size:clamp(max(1.9rem,min(1.9*5vw/6,1.9*16vh/9)),4.4vw,max(3.05rem,min(3.05*5vw/6,3.05*16vh/9)));
  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}@media (min-width:1921px) and (min-height:901px){.lede{margin:max(1.05rem,min(1.05*5vw/6,1.05*16vh/9)) auto 0;max-width:max(34rem,min(34*5vw/6,34*16vh/9));font-size:clamp(max(1.08rem,min(1.08*5vw/6,1.08*16vh/9)),1.4vw,max(1.28rem,min(1.28*5vw/6,1.28*16vh/9)));
  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}@media (min-width:1921px) and (min-height:901px){.byline{margin-top:max(1.35rem,min(1.35*5vw/6,1.35*16vh/9));display:flex;flex-wrap:wrap;gap:max(.5rem,min(.5*5vw/6,.5*16vh/9));justify-content:center;align-items:center;
  font-size:max(.82rem,min(.82*5vw/6,.82*16vh/9));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}@media (min-width:1921px) and (min-height:901px){figure.hero{margin:clamp(max(1.8rem,min(1.8*5vw/6,1.8*16vh/9)),4vh,max(2.8rem,min(2.8*5vw/6,2.8*16vh/9))) auto 0;
  border:calc(min(1*5vw/96,1vh/9) + .034px) solid var(--line);border-radius:min(16*5vw/96,16vh/9);overflow:hidden;
  box-shadow:0 min(30*5vw/96,30vh/9) min(80*5vw/96,80vh/9) max(-40*5vw/96,-40vh/9) rgba(0,0,0,.9),0 0 0 min(1*5vw/96,1vh/9) 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%}@media (min-width:1921px) and (min-height:901px){figure.hero img{height:clamp(min(220*5vw/96,220vh/9),42vw,min(460*5vw/96,460vh/9));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}@media (min-width:1921px) and (min-height:901px){figcaption{font-size:max(.82rem,min(.82*5vw/6,.82*16vh/9));color:var(--lav-faint);text-align:center;line-height:1.5;
  padding:max(.85rem,min(.85*5vw/6,.85*16vh/9)) max(1.1rem,min(1.1*5vw/6,1.1*16vh/9));font-style:italic}}
figure.hero figcaption{position:relative;z-index:2;border-top:1px solid var(--line-soft)}@media (min-width:1921px) and (min-height:901px){figure.hero figcaption{border-top:calc(min(1*5vw/96,1vh/9) + .034px) solid var(--line-soft)}}

/* ============================================================ PROSE */
.prose{margin-top:clamp(2.2rem,5vh,3.2rem)}@media (min-width:1921px) and (min-height:901px){.prose{margin-top:clamp(max(2.2rem,min(2.2*5vw/6,2.2*16vh/9)),5vh,max(3.2rem,min(3.2*5vw/6,3.2*16vh/9)))}}
.prose > p,.prose > ul,.prose > ol,.prose > blockquote{margin-top:1.15rem}@media (min-width:1921px) and (min-height:901px){.prose > p,.prose > ul,.prose > ol,.prose > blockquote{margin-top:max(1.15rem,min(1.15*5vw/6,1.15*16vh/9))}}
.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}@media (min-width:1921px) and (min-height:901px){.prose > h2{font-size:clamp(max(1.4rem,min(1.4*5vw/6,1.4*16vh/9)),2.6vw,max(1.95rem,min(1.95*5vw/6,1.95*16vh/9)));color:var(--lav);
  margin-top:max(2.6rem,min(2.6*5vw/6,2.6*16vh/9));padding-top:max(.3rem,min(.3*5vw/6,.3*16vh/9));letter-spacing:min(.3*5vw/96,.3vh/9)}}
.prose > h3{font-weight:600;font-size:clamp(1.12rem,1.9vw,1.4rem);color:var(--lav);margin-top:1.9rem}@media (min-width:1921px) and (min-height:901px){.prose > h3{font-size:clamp(max(1.12rem,min(1.12*5vw/6,1.12*16vh/9)),1.9vw,max(1.4rem,min(1.4*5vw/6,1.4*16vh/9)));color:var(--lav);margin-top:max(1.9rem,min(1.9*5vw/6,1.9*16vh/9))}}
.prose a{color:var(--violet-2);border-bottom:1px solid rgba(123,104,238,.4);transition:color .2s,border-color .2s}@media (min-width:1921px) and (min-height:901px){.prose a{border-bottom:calc(min(1*5vw/96,1vh/9) + .034px) 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}@media (min-width:1921px) and (min-height:901px){.prose code{border:calc(min(1*5vw/96,1vh/9) + .034px) solid var(--line-soft);border-radius:min(5*5vw/96,5vh/9);padding:.08em .38em}}
.prose ul,.prose ol{padding-left:1.3rem}@media (min-width:1921px) and (min-height:901px){.prose ul,.prose ol{padding-left:max(1.3rem,min(1.3*5vw/6,1.3*16vh/9))}}
.prose li{margin-top:.5rem}@media (min-width:1921px) and (min-height:901px){.prose li{margin-top:max(.5rem,min(.5*5vw/6,.5*16vh/9))}}
.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}@media (min-width:1921px) and (min-height:901px){.prose blockquote{padding:max(.2rem,min(.2*5vw/6,.2*16vh/9)) 0 max(.2rem,min(.2*5vw/6,.2*16vh/9)) max(1.2rem,min(1.2*5vw/6,1.2*16vh/9));border-left:calc(min(2*5vw/96,2vh/9) + .034px) solid var(--violet);
  color:var(--lav-dim);font-style:italic}}
.prose hr{border:0;height:1px;background:var(--line);margin:2.4rem 0}@media (min-width:1921px) and (min-height:901px){.prose hr{height:min(1*5vw/96,1vh/9);background:var(--line);margin:max(2.4rem,min(2.4*5vw/6,2.4*16vh/9)) 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)}@media (min-width:1921px) and (min-height:901px){.prose figure.fig{margin:max(2rem,min(2*5vw/6,2*16vh/9)) 0;border:calc(min(1*5vw/96,1vh/9) + .034px) solid var(--line);border-radius:min(14*5vw/96,14vh/9);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 min(24*5vw/96,24vh/9) min(60*5vw/96,60vh/9) max(-40*5vw/96,-40vh/9) rgba(0,0,0,.85)}}
.prose figure.fig img{width:100%;height:auto}
.prose figure.fig.front-fig{max-width:22rem;margin-inline:auto}@media (min-width:1921px) and (min-height:901px){.prose figure.fig.front-fig{max-width:max(22rem,min(22*5vw/6,22*16vh/9));margin-inline:auto}}
.prose figure.fig.spell-card-fig{max-width:min(17rem,84vw);margin-inline:auto}@media (min-width:1921px) and (min-height:901px){.prose figure.fig.spell-card-fig{max-width:min(max(17rem,min(17*5vw/6,17*16vh/9)),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}@media (min-width:1921px) and (min-height:901px){.prose figure.stellar-fig{max-width:max(26rem,min(26*5vw/6,26*16vh/9));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}@media (min-width:1921px) and (min-height:901px){.stellar-ph{
  filter:drop-shadow(0 min(10*5vw/96,10vh/9) min(34*5vw/96,34vh/9) rgba(123,104,238,.22));transition:filter .35s ease}}
.stellar-ph:hover{filter:drop-shadow(0 12px 44px rgba(123,104,238,.42))}@media (min-width:1921px) and (min-height:901px){.stellar-ph:hover{filter:drop-shadow(0 min(12*5vw/96,12vh/9) min(44*5vw/96,44vh/9) 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}@media (min-width:1921px) and (min-height:901px){.stellar-sound{width:max(2.1rem,min(2.1*5vw/6,2.1*16vh/9));height:max(2.1rem,min(2.1*5vw/6,2.1*16vh/9));
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  border:calc(min(1*5vw/96,1vh/9) + .034px) 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)}@media (min-width:1921px) and (min-height:901px){.faq{margin-top:clamp(max(2.8rem,min(2.8*5vw/6,2.8*16vh/9)),6vh,max(3.8rem,min(3.8*5vw/6,3.8*16vh/9)));border-top:calc(min(1*5vw/96,1vh/9) + .034px) solid var(--line);padding-top:clamp(max(1.6rem,min(1.6*5vw/6,1.6*16vh/9)),4vh,max(2.4rem,min(2.4*5vw/6,2.4*16vh/9)))}}
.faq > h2{font-family:'Cinzel',serif;font-weight:700;font-size:clamp(1.35rem,2.4vw,1.8rem);margin-bottom:.5rem}@media (min-width:1921px) and (min-height:901px){.faq > h2{font-size:clamp(max(1.35rem,min(1.35*5vw/6,1.35*16vh/9)),2.4vw,max(1.8rem,min(1.8*5vw/6,1.8*16vh/9)));margin-bottom:max(.5rem,min(.5*5vw/6,.5*16vh/9))}}
.faq-item{padding:1.15rem 0;border-bottom:1px solid var(--line-soft)}@media (min-width:1921px) and (min-height:901px){.faq-item{padding:max(1.15rem,min(1.15*5vw/6,1.15*16vh/9)) 0;border-bottom:calc(min(1*5vw/96,1vh/9) + .034px) solid var(--line-soft)}}
.faq-q{font-family:'Cinzel',serif;font-weight:600;font-size:1.06rem;color:var(--lav);margin-bottom:.5rem}@media (min-width:1921px) and (min-height:901px){.faq-q{font-size:max(1.06rem,min(1.06*5vw/6,1.06*16vh/9));color:var(--lav);margin-bottom:max(.5rem,min(.5*5vw/6,.5*16vh/9))}}
.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)}@media (min-width:1921px) and (min-height:901px){.faq-a a{border-bottom:calc(min(1*5vw/96,1vh/9) + .034px) 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)}@media (min-width:1921px) and (min-height:901px){.endcta{margin-top:clamp(max(3rem,min(3*5vw/6,3*16vh/9)),7vh,max(4.5rem,min(4.5*5vw/6,4.5*16vh/9)));text-align:center;
  padding:clamp(max(1.8rem,min(1.8*5vw/6,1.8*16vh/9)),4vw,max(2.8rem,min(2.8*5vw/6,2.8*16vh/9)));border-radius:min(18*5vw/96,18vh/9);
  border:calc(min(1*5vw/96,1vh/9) + .034px) 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 min(30*5vw/96,30vh/9) min(80*5vw/96,80vh/9) max(-50*5vw/96,-50vh/9) rgba(123,104,238,.6)}}
.endcta .kicker{margin-bottom:.7rem}@media (min-width:1921px) and (min-height:901px){.endcta .kicker{margin-bottom:max(.7rem,min(.7*5vw/6,.7*16vh/9))}}
.endcta-h{font-family:'Cinzel',serif;font-weight:700;font-size:clamp(1.5rem,3vw,2.2rem);
  color:#fff;line-height:1.12}@media (min-width:1921px) and (min-height:901px){.endcta-h{font-size:clamp(max(1.5rem,min(1.5*5vw/6,1.5*16vh/9)),3vw,max(2.2rem,min(2.2*5vw/6,2.2*16vh/9)));
  color:#fff;line-height:1.12}}
.endcta-sub{margin:.7rem auto 1.4rem;max-width:30rem;color:var(--lav-dim)}@media (min-width:1921px) and (min-height:901px){.endcta-sub{margin:max(.7rem,min(.7*5vw/6,.7*16vh/9)) auto max(1.4rem,min(1.4*5vw/6,1.4*16vh/9));max-width:max(30rem,min(30*5vw/6,30*16vh/9));color:var(--lav-dim)}}
.endcta .btn{display:inline-block;font-size:.92rem;padding:.75em 1.7em}@media (min-width:1921px) and (min-height:901px){.endcta .btn{font-size:max(.92rem,min(.92*5vw/6,.92*16vh/9));padding:.75em 1.7em}}

/* ============================================================ RELATED */
.related{margin-top:clamp(2.8rem,6vh,4rem)}@media (min-width:1921px) and (min-height:901px){.related{margin-top:clamp(max(2.8rem,min(2.8*5vw/6,2.8*16vh/9)),6vh,max(4rem,min(4*5vw/6,4*16vh/9)))}}
.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)}@media (min-width:1921px) and (min-height:901px){.related > h2{font-size:clamp(max(1.25rem,min(1.25*5vw/6,1.25*16vh/9)),2.2vw,max(1.6rem,min(1.6*5vw/6,1.6*16vh/9)));
  text-align:center;margin-bottom:max(1.4rem,min(1.4*5vw/6,1.4*16vh/9));color:var(--lav)}}
.rel-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}@media (min-width:1921px) and (min-height:901px){.rel-grid{gap:max(1rem,min(1*5vw/6,1*16vh/9));grid-template-columns:repeat(auto-fit,minmax(min(100%,max(15rem,min(15*5vw/6,15*16vh/9))),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}@media (min-width:1921px) and (min-height:901px){.rel-card{gap:max(.9rem,min(.9*5vw/6,.9*16vh/9));align-items:center;padding:max(.7rem,min(.7*5vw/6,.7*16vh/9));border:calc(min(1*5vw/96,1vh/9) + .034px) solid var(--line);border-radius:min(14*5vw/96,14vh/9);
  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)}@media (min-width:1921px) and (min-height:901px){.rel-card:hover{transform:translateY(calc(-3 * var(--mf-ui-px, 0px) + var(--mf-ui-px-missing, 1) * max(-3*5vw/96,-3vh/9)));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)}@media (min-width:1921px) and (min-height:901px){.rel-thumb{width:min(64*5vw/96,64vh/9);height:min(64*5vw/96,64vh/9);border-radius:min(10*5vw/96,10vh/9);overflow:hidden;border:calc(min(1*5vw/96,1vh/9) + .034px) 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}@media (min-width:1921px) and (min-height:901px){.rel-text{gap:max(.25rem,min(.25*5vw/6,.25*16vh/9));min-width:0}}
.rel-kicker{font-family:'Cinzel',serif;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--lav-dim)}@media (min-width:1921px) and (min-height:901px){.rel-kicker{font-size:max(.66rem,min(.66*5vw/6,.66*16vh/9));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}@media (min-width:1921px) and (min-height:901px){.rel-title{font-size:max(1rem,min(1*5vw/6,1*16vh/9));color:var(--lav);line-height:1.2}}

/* ============================================================ INDEX */
.index{padding-bottom:clamp(3rem,7vh,5rem)}@media (min-width:1921px) and (min-height:901px){.index{padding-bottom:clamp(max(3rem,min(3*5vw/6,3*16vh/9)),7vh,max(5rem,min(5*5vw/6,5*16vh/9)))}}
.index-head{padding-top:clamp(2.4rem,6vh,4rem);text-align:center}@media (min-width:1921px) and (min-height:901px){.index-head{padding-top:clamp(max(2.4rem,min(2.4*5vw/6,2.4*16vh/9)),6vh,max(4rem,min(4*5vw/6,4*16vh/9)));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}@media (min-width:1921px) and (min-height:901px){.index-head h1{font-size:clamp(max(2.1rem,min(2.1*5vw/6,2.1*16vh/9)),5vw,max(3.4rem,min(3.4*5vw/6,3.4*16vh/9)));
  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}@media (min-width:1921px) and (min-height:901px){.index-head .lede{margin-top:max(1.1rem,min(1.1*5vw/6,1.1*16vh/9))}}
.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))}@media (min-width:1921px) and (min-height:901px){.card-grid{margin-top:clamp(max(2rem,min(2*5vw/6,2*16vh/9)),5vh,max(3rem,min(3*5vw/6,3*16vh/9)));display:grid;gap:clamp(max(1rem,min(1*5vw/6,1*16vh/9)),2.4vw,max(1.6rem,min(1.6*5vw/6,1.6*16vh/9)));
  grid-template-columns:repeat(auto-fill,minmax(min(100%,max(20rem,min(20*5vw/6,20*16vh/9))),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}@media (min-width:1921px) and (min-height:901px){.card{border:calc(min(1*5vw/96,1vh/9) + .034px) solid var(--line);border-radius:min(16*5vw/96,16vh/9);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)}@media (min-width:1921px) and (min-height:901px){.card:hover{transform:translateY(calc(-4 * var(--mf-ui-px, 0px) + var(--mf-ui-px-missing, 1) * max(-4*5vw/96,-4vh/9)));border-color:rgba(123,104,238,.42);
  box-shadow:0 min(30*5vw/96,30vh/9) min(70*5vw/96,70vh/9) max(-44*5vw/96,-44vh/9) 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}@media (min-width:1921px) and (min-height:901px){.card-body{gap:max(.5rem,min(.5*5vw/6,.5*16vh/9));padding:max(1.1rem,min(1.1*5vw/6,1.1*16vh/9)) max(1.15rem,min(1.15*5vw/6,1.15*16vh/9)) max(1.3rem,min(1.3*5vw/6,1.3*16vh/9))}}
.card-kicker{font-family:'Cinzel',serif;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--lav-dim)}@media (min-width:1921px) and (min-height:901px){.card-kicker{font-size:max(.68rem,min(.68*5vw/6,.68*16vh/9));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}@media (min-width:1921px) and (min-height:901px){.card-title{font-size:max(1.22rem,min(1.22*5vw/6,1.22*16vh/9));color:var(--lav);line-height:1.18}}
.card-desc{color:var(--lav-dim);font-size:.94rem;line-height:1.55}@media (min-width:1921px) and (min-height:901px){.card-desc{font-size:max(.94rem,min(.94*5vw/6,.94*16vh/9));line-height:1.55}}
.card-meta{font-size:.78rem;color:var(--lav-faint);margin-top:.1rem}@media (min-width:1921px) and (min-height:901px){.card-meta{font-size:max(.78rem,min(.78*5vw/6,.78*16vh/9));color:var(--lav-faint);margin-top:max(.1rem,min(.1*5vw/6,.1*16vh/9))}}
.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}@media (min-width:1921px) and (min-height:901px){.card-cta{margin-top:max(.35rem,min(.35*5vw/6,.35*16vh/9));font-family:'Cinzel',serif;font-weight:600;font-size:max(.82rem,min(.82*5vw/6,.82*16vh/9));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}@media (min-width:1921px) and (min-height:901px){.site-footer{border-top:calc(min(1*5vw/96,1vh/9) + .034px) solid var(--line);margin-top:clamp(max(2rem,min(2*5vw/6,2*16vh/9)),5vh,max(3rem,min(3*5vw/6,3*16vh/9)));
  padding:clamp(max(1.8rem,min(1.8*5vw/6,1.8*16vh/9)),4vh,max(2.6rem,min(2.6*5vw/6,2.6*16vh/9))) var(--pad) clamp(max(2.2rem,min(2.2*5vw/6,2.2*16vh/9)),5vh,max(3rem,min(3*5vw/6,3*16vh/9)));
  display:flex;flex-direction:column;align-items:center;gap:max(.9rem,min(.9*5vw/6,.9*16vh/9));text-align:center}}
.socials{display:flex;gap:1rem;align-items:center}@media (min-width:1921px) and (min-height:901px){.socials{gap:max(1rem,min(1*5vw/6,1*16vh/9));align-items:center}}
.socials a{width:22px;height:22px;color:var(--lav-faint);transition:color .2s,transform .2s}@media (min-width:1921px) and (min-height:901px){.socials a{width:min(22*5vw/96,22vh/9);height:min(22*5vw/96,22vh/9);color:var(--lav-faint);transition:color .2s,transform .2s}}
.socials a:hover{color:var(--lav);transform:translateY(-2px)}@media (min-width:1921px) and (min-height:901px){.socials a:hover{transform:translateY(calc(-2 * var(--mf-ui-px, 0px) + var(--mf-ui-px-missing, 1) * max(-2*5vw/96,-2vh/9)))}}
.socials svg{width:22px;height:22px}@media (min-width:1921px) and (min-height:901px){.socials svg{width:min(22*5vw/96,22vh/9);height:min(22*5vw/96,22vh/9)}}
.foot-links{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;font-size:.86rem;color:var(--lav-dim)}@media (min-width:1921px) and (min-height:901px){.foot-links{gap:max(.5rem,min(.5*5vw/6,.5*16vh/9));flex-wrap:wrap;justify-content:center;font-size:max(.86rem,min(.86*5vw/6,.86*16vh/9));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}
/* Below 560px the links never fit one line in every language, and a free wrap
   left a separator dangling at a line's end. There they always sit in three
   rows, the same in every language: the address, the legal pages, then the
   blog and the press kit (two rows did not fit 360px in Korean or French). */
.foot-links .row-break{display:none}
@media (max-width:559px){
  .foot-links{row-gap:.25rem}
  .foot-links .row-break{display:block;flex-basis:100%;height:0}
  .foot-links .sep-row{display:none}
}
.foot-rights{font-size:.8rem;color:var(--lav-faint);letter-spacing:.02em}@media (min-width:1921px) and (min-height:901px){.foot-rights{font-size:max(.8rem,min(.8*5vw/6,.8*16vh/9));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}
}
/* 2200 full-HD pixels: the wide measure follows the composition's width, not
   the raw screen's, so a 4K screen shows the full-HD page doubled instead. */
@media (min-width:max(2200px, min(2200 * 100vw / 1920.002, 2200 * 100vh / 900.001))){
  :root{--measure:42rem;--wide:70rem;--hero-w:80rem}@media (min-width:1921px) and (min-height:901px){:root{--measure:max(42rem,min(42*5vw/6,42*16vh/9));--wide:max(70rem,min(70*5vw/6,70*16vh/9));--hero-w:max(80rem,min(80*5vw/6,80*16vh/9))}}
  body{font-size:1.28rem}@media (min-width:1921px) and (min-height:901px){body{font-size:max(1.28rem,min(1.28*5vw/6,1.28*16vh/9))}}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
  .card:hover,.rel-card:hover,.nav-cta:hover,.btn:hover{transform:none}
}

/* ============================================================ FILMS
   A film sits behind its own still (scripts/blog/template.js, videoFigureTag):
   the box is 16:9 from the first paint, and the player that a press swaps in
   (scripts/blog/video-embed.js) fills exactly that box, so nothing moves. */
.video-box{position:relative;display:block;aspect-ratio:16/9;background:#05040a;overflow:hidden}
.video-facade{position:absolute;inset:0;display:block;color:#fff}
.prose .video-facade,.prose .video-facade:hover{border-bottom:0;color:#fff}
.prose figure.fig .video-facade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.video-play{position:absolute;left:50%;top:50%;z-index:1;width:76px;height:76px;margin:-38px 0 0 -38px;
  display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(135deg,rgba(119,86,191,.92),rgba(107,92,230,.92));
  box-shadow:0 14px 40px -12px rgba(123,104,238,.9),inset 0 0 0 1px rgba(255,255,255,.25);
  transition:transform .25s ease,box-shadow .3s ease}@media (min-width:1921px) and (min-height:901px){.video-play{width:min(76*5vw/96,76vh/9);height:min(76*5vw/96,76vh/9);margin:max(-38*5vw/96,-38vh/9) 0 0 max(-38*5vw/96,-38vh/9);
  display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(135deg,rgba(119,86,191,.92),rgba(107,92,230,.92));
  box-shadow:0 min(14*5vw/96,14vh/9) min(40*5vw/96,40vh/9) max(-12*5vw/96,-12vh/9) rgba(123,104,238,.9),inset 0 0 0 min(1*5vw/96,1vh/9) rgba(255,255,255,.25);
  transition:transform .25s ease,box-shadow .3s ease}}
.video-play svg{margin-left:5px}@media (min-width:1921px) and (min-height:901px){.video-play svg{margin-left:min(5*5vw/96,5vh/9)}}
.video-facade:hover .video-play,.video-facade:focus-visible .video-play{transform:scale(1.06);
  box-shadow:0 18px 50px -12px rgba(123,104,238,1),inset 0 0 0 1px rgba(255,255,255,.4)}@media (min-width:1921px) and (min-height:901px){.video-facade:hover .video-play,.video-facade:focus-visible .video-play{
  box-shadow:0 min(18*5vw/96,18vh/9) min(50*5vw/96,50vh/9) max(-12*5vw/96,-12vh/9) rgba(123,104,238,1),inset 0 0 0 min(1*5vw/96,1vh/9) rgba(255,255,255,.4)}}
.video-facade:focus-visible{outline:2px solid var(--violet-2);outline-offset:-4px}@media (min-width:1921px) and (min-height:901px){.video-facade:focus-visible{outline:calc(min(2*5vw/96,2vh/9) + .034px) solid var(--violet-2);outline-offset:max(-4*5vw/96,-4vh/9)}}
.video-frame{position:absolute;inset:0;z-index:2;width:100%;height:100%;border:0;display:block;background:#000}
.video-box.is-playing .video-facade{visibility:hidden}
.video-note{display:block;margin-top:.25rem;font-style:normal;font-size:.76rem;opacity:.85}@media (min-width:1921px) and (min-height:901px){.video-note{margin-top:max(.25rem,min(.25*5vw/6,.25*16vh/9));font-style:normal;font-size:max(.76rem,min(.76*5vw/6,.76*16vh/9));opacity:.85}}
@media (prefers-reduced-motion: reduce){
  .video-facade:hover .video-play,.video-facade:focus-visible .video-play{transform:none}
}