/* ============================================================
   MIDNIGHT LEXICON STUDIOS: lexicon.css
   Plasma Court: black is the field, plasma is the voice,
   blood and gold speak only when they must.
   Hand-written. No frameworks. The house is allowed to show off.
   Typefaces are self-hosted: zero third-party requests.
   ============================================================ */

/* ---------- self-hosted type ---------- */
@font-face{
  font-family:'Cinzel';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/cinzel-400.woff2') format('woff2');
}
@font-face{
  font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/cinzel-600.woff2') format('woff2');
}
@font-face{
  font-family:'Cinzel';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/cinzel-700.woff2') format('woff2');
}
@font-face{
  font-family:'Cinzel';font-style:normal;font-weight:900;font-display:swap;
  src:url('../fonts/cinzel-900.woff2') format('woff2');
}
@font-face{
  font-family:'Cinzel Decorative';font-style:normal;font-weight:900;font-display:swap;
  src:url('../fonts/cinzel-decorative-900.woff2') format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/cormorant-400.woff2') format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/cormorant-500.woff2') format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;
  src:url('../fonts/cormorant-italic-400.woff2') format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;
  src:url('../fonts/cormorant-italic-500.woff2') format('woff2');
}

:root{
  /* PLASMA COURT: sampled from Rain's VOTHE title artwork, crowned with Ravenhold.
     Black is the field, plasma is the voice, blood and gold speak only when they must. */
  --black:#030304;          /* absolute black: the field */
  --panel:#0a0a12;          /* violet-tinged panel */
  --ink:#f2f7ff;            /* plasma core: primary text */
  --body:#c9d2e8;           /* ice-tinted body text */
  --dim:#8b93ad;            /* quiet text */
  --faint:#414a5e;          /* decorative only, never for reading text */
  --red:#c8102e;            /* blood crimson: the hot wound, rationed */
  --ember:#ff4a2a;          /* flame: fire register only */
  --blue:#95abe6;           /* ion ice: the voice of the interface */
  --cyan:#93ecf6;           /* trace cyan: functional accents only */
  --ice:#f2f7ff;            /* white-hot core */
  --violet:#968ae9;         /* hollow violet: the second voice */
  --magenta:#ff2fb3;        /* neon bridge: atmosphere only */
  --gold:#d4a017;           /* candlelight, royal, almost never */
  --line:#1a1d26;
  --edge:#2a2f42;           /* violet-tinged edge */
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --display:'Cinzel',Georgia,serif;
}

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

html{scroll-behavior:smooth;scrollbar-color:var(--red) #050507}

body{
  background:var(--black);
  color:var(--body);
  font-family:var(--serif);
  font-size:1.25rem;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- the living dark: aurora, field, grain, vignette ---------- */

/* aurora: blood upper-left, ice lower-right, magenta heart, slowly drifting */
body::before{
  content:"";
  position:fixed;inset:-12%;z-index:-4;
  background:
    radial-gradient(900px 620px at 12% -5%, rgba(200,16,46,.13), transparent 60%),
    radial-gradient(1000px 720px at 88% 108%, rgba(149,171,230,.11), transparent 60%),
    radial-gradient(760px 540px at 50% 46%, rgba(150,138,233,.07), transparent 65%),
    radial-gradient(500px 380px at 78% 12%, rgba(212,160,23,.05), transparent 60%),
    var(--black);
  animation:aurora 80s ease-in-out infinite alternate;
}
@keyframes aurora{
  0%{transform:translate3d(-2%,1%,0) scale(1)}
  50%{transform:translate3d(2%,-1%,0) scale(1.05)}
  100%{transform:translate3d(-1%,2%,0) scale(1.02)}
}

/* the shader: a WebGL ember nebula, laid by JS, deepest of all */
.shader{position:fixed;inset:0;z-index:-6;pointer-events:none}
.stars{position:fixed;inset:0;z-index:-5;pointer-events:none}

/* the beam: blacklight bloom. Pure light addition via screen blending. */
.beam{
  position:fixed;inset:-15%;z-index:-3;pointer-events:none;
  mix-blend-mode:screen;opacity:.55;
  background:
    radial-gradient(620px 620px at 18% 22%, rgba(255,74,42,.15), transparent 60%),
    radial-gradient(720px 720px at 82% 78%, rgba(149,171,230,.14), transparent 60%),
    radial-gradient(420px 420px at 60% 55%, rgba(150,138,233,.08), transparent 60%);
  animation:beamdrift 46s ease-in-out infinite alternate;
}
@keyframes beamdrift{
  from{transform:rotate(-4deg) scale(1)}
  to{transform:rotate(5deg) scale(1.08)}
}

/* the field: a canvas of sparks rising off distant hearths, laid by JS */
.field{position:fixed;inset:0;z-index:-2;pointer-events:none}

/* grain: a whisper of film over everything */
.grain{
  position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* vignette: the dark gathers at the edges */
body::after{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.62) 100%);
}

::selection{background:var(--red);color:#fff}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#050507}
::-webkit-scrollbar-thumb{background:#232838;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--red)}

/* ---------- accessibility scaffolding ---------- */
.skip-link{
  position:absolute;left:1rem;top:-4rem;z-index:100;
  font-family:var(--display);font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;
  background:var(--panel);color:var(--blue);border:1px solid var(--blue);
  padding:.8rem 1.2rem;text-decoration:none;transition:top .2s;
}
.skip-link:focus{top:1rem}

a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--faint);
  transition:color .3s,border-color .3s,text-shadow .3s}
a:hover{color:var(--blue);border-color:var(--blue);text-shadow:0 0 14px rgba(149,171,230,.45)}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--cyan);outline-offset:3px;border-radius:2px}

img{max-width:100%;height:auto}

/* ---------- layout ---------- */
.wrap{max-width:880px;margin:0 auto;padding:0 2rem}
.wrap-narrow{max-width:680px;margin:0 auto;padding:0 2rem}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(3,3,4,.86);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 30px rgba(0,0,0,.6);
}
.topbar-inner{
  max-width:1100px;margin:0 auto;padding:0 2rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:3.6rem;
}
.brand{
  font-family:var(--display);font-size:.82rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--ink);border-bottom:none;white-space:nowrap;
}
.brand .lx{color:var(--blue);text-shadow:0 0 14px rgba(149,171,230,.55)}
.brand:hover{color:var(--ink);text-shadow:none}
.nav{display:flex;gap:1.35rem;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{
  font-family:var(--display);font-size:.64rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--dim);border-bottom:none;white-space:nowrap;
  padding:.4rem 0;
}
.nav a:hover{color:var(--blue);text-shadow:0 0 12px rgba(149,171,230,.5)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom:1px solid var(--red);text-shadow:none}

/* ---------- heroes ---------- */
.hero-home{
  position:relative;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:4rem 2rem;overflow:hidden;
}
/* the blood moon: a distant fire behind the title, shimmering with heat */
.hero-home::before{
  content:"";position:absolute;top:2%;left:50%;transform:translateX(-50%);
  width:min(78vw,600px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(200,16,46,.17),rgba(200,16,46,.05) 46%,transparent 70%);
  filter:url("../img/heat.svg#heatshimmer") blur(12px);
  animation:moonbreathe 11s ease-in-out infinite;
}
@keyframes moonbreathe{0%,100%{opacity:.75}50%{opacity:1}}
.hero-home>*{position:relative;z-index:1}
.hero-page{
  text-align:center;padding:7rem 2rem 4rem;max-width:880px;margin:0 auto;
}
.banner-lead{max-width:1400px;margin:0 auto;padding:3rem 1.5rem 0}
.banner-lead img{display:block;width:100%;height:auto;border:1px solid var(--edge);
  box-shadow:0 0 90px rgba(149,171,230,.14),0 40px 100px rgba(0,0,0,.7)}
.banner-lead + .hero-page{padding-top:3rem}
.kicker{
  font-family:var(--display);font-size:.78rem;letter-spacing:.55em;padding-left:.55em;
  color:var(--dim);text-transform:uppercase;margin-bottom:2.2rem;
}
.kicker .lx{color:var(--violet);text-shadow:0 0 14px rgba(150,138,233,.5)}
/* VOTHE, in hologram: AI technology filtered through metal.
   A chrome letterform with a light-sweep crossing it, extruded off the
   page, breathing faintly. The reflection below sells the hologram. */
/* the name above the door: living plasma. Sharp Roman serif letterforms
   (the skeleton from Rain's reference) with white-hot cores, violet-blue
   filament weather inside, and bands of light that drift through the letters
   so the word breathes. Brighter than the reference, by order. */
.display{
  font-family:'Cinzel Decorative',var(--display);font-weight:900;
  font-size:clamp(3rem,13vw,9rem);
  letter-spacing:.1em;padding-left:.1em;line-height:1.06;color:#dfe9ff;
  -webkit-box-reflect:below 10px linear-gradient(transparent 58%,rgba(150,170,255,.10));
}
/* kinetic type: the apparition assembles letter by letter, then stays alive.
   Without JS the word stands bright, edged in ice. */
.display .ltr{
  display:inline-block;
  color:transparent;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.012 0.09' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.78 0 0 0 0 0.84 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23p)'/%3E%3C/svg%3E"),
    linear-gradient(115deg,transparent 32%,rgba(255,255,255,.95) 44%,rgba(170,215,255,.85) 52%,transparent 64%),
    linear-gradient(65deg,transparent 36%,rgba(200,170,255,.8) 50%,transparent 64%),
    radial-gradient(105% 95% at 50% 38%,#ffffff 0%,#d8e8ff 28%,#93b4ff 52%,#5f6fff 76%,#2c1c6e 100%);
  background-size:240px 240px,260% 260%,300% 300%,100% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-stroke:1px rgba(238,246,255,.9);
  text-shadow:
    0 0 14px rgba(190,210,255,.9),
    0 0 46px rgba(130,150,255,.55),
    0 0 110px rgba(120,90,255,.38),
    0 0 180px rgba(90,60,220,.22);
  animation:
    kin 1.2s cubic-bezier(.2,.7,.2,1) both,
    plasmaflow 7s ease-in-out infinite,
    plasmabreathe 4.5s ease-in-out infinite;
  animation-delay:calc(var(--i,0)*80ms + 250ms),0s,0s;
}
@keyframes kin{
  from{opacity:0;transform:translateY(.4em) scale(.92);filter:blur(10px)}
  to{opacity:1;transform:none}
}
/* light drifts through the letters, two bands crossing like weather. */
@keyframes plasmaflow{
  0%,100%{background-position:0 0,18% 28%,82% 72%,0 0}
  50%{background-position:0 0,86% 76%,14% 24%,0 0}
}
/* the word breathes: a slow swell of radiance. */
@keyframes plasmabreathe{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.18)}
}
/* the true name: Rain's plasma letterforms, used exactly as supplied and
   brightened. The letter shapes are hers, not a font's. Light moves through
   them through sheens masked to the art's own alpha, so the word stays alive. */
.display-plasma{
  position:relative;display:block;
  width:min(1060px,94vw);margin:0 auto;
  animation:plasmarise 1.4s cubic-bezier(.2,.7,.2,1) both,
            plasmabreathe 4.5s ease-in-out infinite;
}
.display-plasma img{display:block;width:100%;height:auto;}
.display-plasma .sheen{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.9) 44%,rgba(170,215,255,.85) 52%,transparent 66%);
  background-size:280% 100%;
  -webkit-mask-image:url('../img/vothe-title-plasma.webp');
  mask-image:url('../img/vothe-title-plasma.webp');
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  mix-blend-mode:screen;
  animation:plasmasheen 6s ease-in-out infinite;
}
.display-plasma .sheen.s2{
  background:linear-gradient(65deg,transparent 36%,rgba(200,170,255,.7) 50%,transparent 64%);
  background-size:300% 100%;
  animation-duration:9s;animation-direction:reverse;
}
@keyframes plasmasheen{
  0%,100%{background-position:190% 0}
  50%{background-position:-90% 0}
}
@keyframes plasmabreathe{
  0%,100%{filter:brightness(1.08)}
  50%{filter:brightness(1.26)}
}
@keyframes plasmarise{
  from{opacity:0;transform:translateY(30px) scale(.985)}
  to{opacity:1;transform:none}
}
/* the glass boxes' underglow, given to the true name: the word hovers over
   its own pool of light, breathing with it */
.display-plasma::after{
  content:"";position:absolute;left:50%;top:80%;transform:translateX(-50%);
  width:92%;height:36%;min-height:110px;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 42%,
    rgba(170,220,255,.5),
    rgba(147,236,246,.26) 45%,
    rgba(120,160,255,.12) 68%,
    transparent 80%);
  filter:blur(30px);
  mix-blend-mode:screen;
}

.display-sm{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.2rem,7vw,4.2rem);
  letter-spacing:.08em;line-height:1.15;color:var(--ice);
  text-shadow:
    -2px 0 22px rgba(200,16,46,.5),
     2px 0 22px rgba(149,171,230,.5),
     0 0 70px rgba(150,138,233,.25);
}
.sub{
  font-family:var(--display);font-size:clamp(.8rem,2.2vw,1.05rem);
  letter-spacing:.42em;padding-left:.42em;text-transform:uppercase;
  color:var(--dim);margin-top:1.4rem;margin-bottom:2.2rem;
}
.lede{max-width:640px;margin:0 auto;font-size:1.35rem;font-style:italic;color:#c3ccd8;
  text-shadow:0 2px 24px rgba(0,0,0,.8)}
button.scroll-cue{background:none;border:none;cursor:pointer;font:inherit}
.scroll-cue{
  margin-top:4rem;font-family:var(--display);font-size:.68rem;
  letter-spacing:.4em;padding-left:.4em;color:var(--dim);text-transform:uppercase;
  animation:breathe 3.2s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.35}50%{opacity:1}}

/* ---------- sections & type ---------- */
section.block{padding:5.5rem 0}
.label{
  font-family:var(--display);font-size:.72rem;letter-spacing:.5em;padding-left:.5em;
  text-transform:uppercase;color:var(--violet);
  text-shadow:0 0 18px rgba(150,138,233,.4);
  display:flex;align-items:center;gap:1.2rem;margin-bottom:2rem;
}
.label::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,rgba(150,138,233,.5),transparent)}
h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.7rem,4.5vw,2.6rem);letter-spacing:.06em;
  margin-bottom:1.5rem;line-height:1.25;color:var(--ink);
  text-shadow:0 0 34px rgba(0,0,0,.9);
}
h2 em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--violet);
  text-shadow:0 0 18px rgba(150,138,233,.45)}
p{margin-bottom:1.4rem}
p.lead{font-size:1.45rem;color:var(--ink)}

/* reveal on scroll: rise through a blur (only when JS is present) */
.js .reveal{opacity:0;transform:translateY(26px);filter:blur(6px);
  transition:opacity 1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1),filter 1s ease}
.js .reveal.is-visible{opacity:1;transform:none;filter:blur(0)}

/* ---------- project cards ---------- */
.card{ /* a calling card made of light: frosted glass, floating, lit from beneath */
  --ug:.38; /* underglow strength: raised by hover */
  display:block;position:relative;overflow:hidden;
  border:1px solid rgba(190,215,255,.5);
  border-radius:20px;
  padding:2.4rem 2.6rem;margin-bottom:2.8rem;
  background:
    radial-gradient(380px 240px at var(--mx,50%) var(--my,28%),rgba(170,205,255,.16),transparent 70%),
    radial-gradient(130% 100% at 50% 0%,rgba(50,60,110,.28),transparent 60%),
    linear-gradient(180deg,rgba(13,14,26,.42),rgba(6,6,11,.38));
  -webkit-backdrop-filter:blur(9px) saturate(1.25);
  backdrop-filter:blur(9px) saturate(1.25);
  box-shadow:
    inset 0 1px 0 rgba(225,238,255,.22),
    inset 0 0 60px rgba(10,12,26,.35),
    inset 0 -4px 16px -2px rgba(150,210,255,.35),
    0 20px 48px -8px rgba(147,236,246,calc(var(--ug) * 1.5)),
    0 46px 100px -22px rgba(120,160,255,var(--ug)),
    0 32px 64px rgba(0,0,0,.55);
  transition:box-shadow .5s,border-color .5s;
}
.card::before{ /* the inner hairline: a double frame, like a printed card */
  content:"";position:absolute;inset:8px;pointer-events:none;
  border:1px solid rgba(170,200,255,.22);border-radius:13px;transition:border-color .5s;
}
a.card:hover::before{border-color:rgba(190,215,255,.45)}
.card::after{ /* the sheen: light crosses the card on hover */
  content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(217,239,255,.07),transparent);
  transform:skewX(-18deg);transition:left .9s ease;pointer-events:none;
}
a.card:hover{--ug:.85;border-color:rgba(200,225,255,.8);
  box-shadow:
    inset 0 1px 0 rgba(230,242,255,.24),
    inset 0 0 70px rgba(8,10,24,.55),
    inset 0 -5px 20px -2px rgba(160,215,255,.55),
    0 24px 64px -6px rgba(147,236,246,calc(var(--ug) * 1.5)),
    0 60px 120px -20px rgba(130,170,255,var(--ug)),
    0 38px 72px rgba(0,0,0,.6);}
a.card:hover::after{left:135%}
a.card:hover h3{color:#fff;text-shadow:0 0 26px rgba(170,200,255,.75)}
.card h3{
  font-family:var(--display);font-size:1.3rem;letter-spacing:.14em;
  margin-bottom:.4rem;font-weight:600;color:#f2f6ff;
  text-shadow:0 0 10px rgba(220,235,255,.9),0 0 28px rgba(150,180,255,.65);
  transition:color .3s,text-shadow .4s;
}
.card .status{
  font-family:var(--display);font-size:.65rem;letter-spacing:.35em;
  text-transform:uppercase;color:#bcd0ff;margin-bottom:1rem;
  text-shadow:0 0 16px rgba(149,171,230,.7);
}
.card p{margin-bottom:0;color:#c9d4ea;text-shadow:0 0 14px rgba(150,170,220,.4)}
.card .go{
  display:inline-block;margin-top:1.1rem;
  font-family:var(--display);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
  color:#a9bce4;text-shadow:0 0 12px rgba(149,171,230,.5);
}
a.card:hover .go{color:var(--violet);text-shadow:0 0 12px rgba(150,138,233,.5)}

/* ---------- buttons & links ---------- */
.btn{
  display:inline-block;position:relative;
  font-family:var(--display);font-size:.78rem;letter-spacing:.32em;padding-left:.32em;
  text-transform:uppercase;color:var(--ink);
  border:1px solid var(--edge);padding:1.1rem 2.4rem;
  background:linear-gradient(180deg,rgba(200,16,46,.08),transparent 60%);
  transition:border-color .3s,color .3s,box-shadow .3s,transform .3s;
}
.btn:hover{border-color:var(--red);color:var(--ink);
  box-shadow:0 0 30px rgba(200,16,46,.35),inset 0 0 24px rgba(200,16,46,.1);
  transform:translateY(-2px);text-shadow:0 0 14px rgba(242,247,255,.7)}
.btn-blue:hover{border-color:var(--blue);color:var(--blue);
  box-shadow:0 0 30px rgba(149,171,230,.28),inset 0 0 24px rgba(149,171,230,.08);
  text-shadow:0 0 14px rgba(149,171,230,.6)}

.linkcard{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border:1px solid var(--line);padding:1.8rem 2rem;margin-bottom:1.2rem;
  background:linear-gradient(180deg,rgba(255,255,255,.018),transparent);
  transition:border-color .35s,box-shadow .35s,transform .35s;
}
a.linkcard{border-bottom:1px solid var(--line)}
a.linkcard:hover{border-color:var(--blue);transform:translateY(-2px);
  box-shadow:0 0 34px rgba(149,171,230,.14)}
.linkcard .name{
  font-family:var(--display);font-size:1.05rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);
}
.linkcard .handle{
  font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--dim);
}
.linkcard:hover .name{color:var(--blue);text-shadow:0 0 14px rgba(149,171,230,.5)}
.linkcard:hover .handle{color:var(--body)}

/* ---------- transmissions ---------- */
.panel{
  border:1px dashed rgba(150,138,233,.4);padding:2.6rem 2.2rem;text-align:center;
  color:var(--dim);margin:2rem 0;position:relative;
  background:radial-gradient(420px 200px at 50% 0%,rgba(150,138,233,.07),transparent 70%);
}
.panel p{font-style:italic;margin-bottom:0}
.archive-note{
  border-top:1px solid var(--line);margin-top:3rem;padding-top:2rem;
  color:var(--dim);font-style:italic;
}

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid #14161d;padding:2.6rem 0 3rem;margin-top:3rem;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.5));
}
.site-footer-inner{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:1rem;
  font-family:var(--display);font-size:.68rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--dim);
}
.site-footer nav{display:flex;gap:1.4rem;flex-wrap:wrap}
.site-footer a{border-bottom:none;color:var(--dim)}
.site-footer a:hover{color:var(--blue)}

/* ---------- quiet document treatment (privacy policy) ---------- */
.doc{max-width:760px;margin:0 auto;padding:4rem 2rem 5rem}
.doc h1{
  font-family:var(--display);font-weight:700;letter-spacing:.05em;
  font-size:clamp(1.8rem,5vw,2.5rem);line-height:1.25;margin-bottom:.6rem;color:var(--ink);
  text-shadow:0 0 30px rgba(0,0,0,.9);
}
.doc .effective{color:var(--dim);font-style:italic;margin-bottom:3rem}
.doc h2{
  font-family:var(--display);font-size:.95rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--violet);margin:2.6rem 0 1rem;font-weight:600;
  text-shadow:0 0 14px rgba(150,138,233,.35);
}
.doc p{color:var(--body)}
.doc .back{
  display:inline-block;margin-bottom:3rem;font-family:var(--display);
  font-size:.72rem;letter-spacing:.35em;text-transform:uppercase;color:var(--dim);
  border-bottom:none;
}
.doc .back:hover{color:var(--violet)}

/* ---------- 404 ---------- */
.err404{
  min-height:92vh;min-height:92svh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:4rem 2rem;
}
.err404 .code{
  font-family:var(--display);font-weight:900;font-size:clamp(4rem,18vw,10rem);
  letter-spacing:.08em;color:var(--ice);line-height:1;
  animation:breathelight 7s ease-in-out infinite;
;margin-bottom:2.2rem}
@keyframes breathelight{
  0%,100%{text-shadow:
    -3px 0 24px rgba(255,74,42,.5),
     3px 0 24px rgba(149,171,230,.45),
     0 0 90px rgba(255,47,179,.22)}
  50%{text-shadow:
    -3px 0 36px rgba(255,74,42,.8),
     3px 0 36px rgba(149,171,230,.7),
     0 0 130px rgba(255,47,179,.38)}
}
.err404 .whisper{font-style:italic;color:var(--dim);margin-top:2.2rem;font-size:1.15rem}

/* ---------- the doors: first-screen paths from the home hero ---------- */
.doors{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem;
  margin-top:3rem;list-style:none;
}
.doors a{
  font-family:var(--display);font-size:.72rem;letter-spacing:.3em;padding-left:.3em;
  text-transform:uppercase;color:var(--ink);
  border:1px solid var(--edge);padding:.95rem 1.7rem;
  background:rgba(10,10,18,.65);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:border-color .3s,color .3s,box-shadow .3s,transform .3s;
}
.doors a:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px);
  box-shadow:0 0 26px rgba(149,171,230,.3),inset 0 0 18px rgba(149,171,230,.06);
  text-shadow:0 0 12px rgba(149,171,230,.6)}
.doors a.door-red:hover{border-color:var(--red);color:var(--ember);
  box-shadow:0 0 26px rgba(200,16,46,.35),inset 0 0 18px rgba(200,16,46,.08);
  text-shadow:0 0 12px rgba(255,74,42,.6)}

/* ---------- rooms not yet open: the velvet rope ---------- */
.velvet{
  border:1px solid var(--line);
  padding:3.2rem 2.4rem;margin:2.5rem 0;
  text-align:center;position:relative;overflow:hidden;
  background:
    linear-gradient(180deg,rgba(200,16,46,.04),transparent 40%),
    linear-gradient(0deg,rgba(150,138,233,.05),transparent 40%);
}
.velvet::before{ /* candlelight from above, breathing with heat */
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:70%;height:120px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(212,160,23,.09),transparent 70%);
  filter:url("../img/heat.svg#heatsoft");
}
.velvet .rope{
  font-family:var(--display);font-size:.7rem;letter-spacing:.5em;padding-left:.5em;
  text-transform:uppercase;color:var(--ember);margin-bottom:1.6rem;
  text-shadow:0 0 16px rgba(255,74,42,.45);
}
.velvet p{color:var(--dim);font-style:italic;margin-bottom:0;max-width:34rem;margin-left:auto;margin-right:auto}
.velvet p + p{margin-top:1rem}
.room-list{list-style:none;margin:2.5rem 0 0;padding:0}
.room-list li{
  border-top:1px solid var(--line);padding:1.6rem .5rem;
  display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;align-items:baseline;justify-content:space-between;
}
.room-list li:last-child{border-bottom:1px solid var(--line)}
.room-list .t{font-family:var(--display);letter-spacing:.1em;color:var(--ink);font-size:1.02rem}
.room-list .s{font-family:var(--display);font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--blue);text-shadow:0 0 12px rgba(149,171,230,.35)}

/* ---------- the signal: the release list, first thing seen ---------- */
.signal{
  width:min(520px,100%);margin:0 auto 2.4rem;
  border:1px solid rgba(150,138,233,.35);
  padding:1.05rem 1.3rem .95rem;position:relative;
  background:
    radial-gradient(420px 160px at 50% 0%,rgba(200,16,46,.1),transparent 70%),
    linear-gradient(180deg,rgba(10,10,18,.85),rgba(10,10,18,.55));
  box-shadow:0 0 30px rgba(200,16,46,.12),inset 0 0 40px rgba(0,0,0,.5);
}
.signal::before,.signal::after{
  content:"";position:absolute;top:-1px;bottom:-1px;width:2px;
  background:linear-gradient(180deg,var(--red),var(--ember));
  box-shadow:0 0 12px rgba(255,74,42,.7);
}
.signal::before{left:-1px}
.signal::after{right:-1px}
.signal-label{
  font-family:var(--display);font-size:.62rem;letter-spacing:.5em;padding-left:.5em;
  text-transform:uppercase;color:var(--ink);margin-bottom:.5rem;
  text-shadow:0 0 14px rgba(149,171,230,.5);
}
.signal-line{font-size:1.02rem;font-style:italic;color:var(--ink);margin-bottom:.75rem}
.signal-form{display:flex;gap:.6rem;flex-wrap:wrap}
.signal-form input[type="email"]{
  flex:1 1 180px;min-width:0;
  background:rgba(3,3,4,.8);border:1px solid var(--edge);color:var(--ink);
  font-family:var(--serif);font-size:1rem;padding:.68rem 1rem;
  transition:border-color .3s,box-shadow .3s;
}
.signal-form input[type="email"]::placeholder{color:var(--faint);font-style:italic}
.signal-form input[type="email"]:focus{
  outline:none;border-color:var(--cyan);box-shadow:0 0 18px rgba(147,236,246,.28)}
.signal-form button{
  font-family:var(--display);font-size:1.02rem;font-weight:800;letter-spacing:.3em;padding-left:.3em;
  text-transform:uppercase;color:#fff;cursor:pointer;white-space:nowrap;
  background:linear-gradient(180deg,#e01a3c,#a50e28);
  border:1px solid #ff4a5a;padding:.85rem 2.2rem;
  box-shadow:0 0 34px rgba(200,16,46,.65),0 0 90px rgba(200,16,46,.25);
  transition:box-shadow .3s,transform .3s,filter .3s;
}
.signal-form button:hover{transform:translateY(-2px);filter:brightness(1.12);
  box-shadow:0 0 44px rgba(200,16,46,.65)}
.signal-form button:disabled{opacity:.55;cursor:wait;transform:none}
.signal-note{margin:.55rem 0 0;font-size:.85rem;font-style:italic;color:var(--dim)}
.signal-done{margin:0;font-size:1rem;font-style:italic;color:var(--blue);
  text-shadow:0 0 14px rgba(149,171,230,.4)}
.signal-error{margin:.55rem 0 0;font-size:.9rem;font-style:italic;color:var(--ember)}

/* ---------- the walls: framed art ---------- */
.figure{margin:2.8rem auto;max-width:560px}
.figure img{
  display:block;width:100%;height:auto;
  border:1px solid var(--edge);
  box-shadow:0 0 60px rgba(149,171,230,.12),0 30px 80px rgba(0,0,0,.65);
}
.figure figcaption{
  margin-top:1rem;font-style:italic;color:var(--dim);font-size:1.05rem;text-align:center;
}
.figure figcaption .t{color:var(--ink);font-style:normal;font-family:var(--display);
  font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;display:block;margin-bottom:.3rem}
.figure-wide{max-width:720px}
.gallery{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.6rem;margin:2.8rem 0;
}
.gallery .figure{margin:0;max-width:none}
.gallery .figure img{aspect-ratio:3/4.4;object-fit:cover}

/* ---------- utilities ---------- */
.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ---------- small screens ---------- */
@media (max-width:640px){
  body{font-size:1.12rem}
  section.block{padding:4rem 0}
  .topbar-inner{padding:0 1.2rem}
  .nav{gap:1.1rem}
  .card,.linkcard{padding:1.6rem 1.4rem}
  .grain{opacity:.035}
}

/* ---------- reduced motion: everything goes still ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  body::before{inset:0}
  .display{-webkit-box-reflect:none}
  .js .reveal{opacity:1;transform:none;filter:blur(0)}
  .scroll-cue{opacity:.7}
}