/* ── VESPERZINE — a transmission for the evening stars ── */
:root{
  --black:#050507;--night:#140726;--char:#96FF00;--bloom:#3A3FE6;--iris:#9D3BE8;--ember:#BF3B12;
  --white:#E9E7F0;--mute:#7C7892;--line:rgba(150,255,0,.12);--hair:rgba(233,231,240,.12);
  --serif:'Fraunces',Georgia,serif;--body:'Spectral',Georgia,serif;--mono:'Space Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:#050507;color-scheme:dark}
body{background:var(--black);color:var(--white);font-family:var(--body);font-weight:300;line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(52% 36% at 50% 8%,rgba(58,63,230,.10),transparent 70%),
             radial-gradient(46% 30% at 50% 96%,rgba(157,59,232,.09),transparent 70%)}
a{color:inherit}
.wrap{position:relative;z-index:1;max-width:880px;margin:0 auto;padding:0 30px}

/* topbar */
.topbar{position:fixed;top:0;left:0;right:0;z-index:9;display:flex;align-items:center;justify-content:space-between;
  padding:18px 26px;background:linear-gradient(180deg,rgba(5,5,7,.92),rgba(5,5,7,0));pointer-events:none}
.topbar .tag{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
.vesper{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;line-height:0}
.vesper svg{display:block;overflow:visible;
  filter:drop-shadow(0 0 7px rgba(255,110,40,.85)) drop-shadow(0 0 16px rgba(191,59,18,.5));
  animation:star 5.6s ease-in-out infinite}
@keyframes star{
  0%{opacity:.45;transform:scale(.88) rotate(0deg)}9%{opacity:.85;transform:scale(1)}
  14%{opacity:.6;transform:scale(.93)}22%{opacity:1;transform:scale(1.14) rotate(4deg)}
  26%{opacity:.7;transform:scale(.96) rotate(0deg)}38%{opacity:.5;transform:scale(.9)}
  47%{opacity:.95;transform:scale(1.05)}51%{opacity:1;transform:scale(1.22) rotate(-5deg)}
  54%{opacity:.65;transform:scale(.95) rotate(0deg)}68%{opacity:.8;transform:scale(1.02)}
  74%{opacity:.5;transform:scale(.9)}86%{opacity:.9;transform:scale(1.08)}
  100%{opacity:.45;transform:scale(.88) rotate(0deg)}}

/* shimmer */
.shimmer{position:fixed;top:0;left:50%;width:2px;height:100%;z-index:0;pointer-events:none;opacity:.35}
.shimmer span{position:absolute;left:0;width:3px;height:3px;border-radius:50%;background:var(--char);
  box-shadow:0 0 6px var(--char);animation:rise linear infinite}
@keyframes rise{from{transform:translateY(100vh) scale(.4);opacity:0}10%{opacity:.8}90%{opacity:.8}
  to{transform:translateY(-12vh) scale(1);opacity:0}}

/* cover */
.cover{min-height:96vh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:110px 0 70px}
.iss{font-family:var(--mono);font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--char)}
.cover h1{font-family:var(--mono);font-weight:700;font-size:clamp(26px,6.4vw,68px);letter-spacing:.34em;
  text-transform:uppercase;padding-left:.34em;margin-top:18px;text-shadow:0 0 40px rgba(58,63,230,.35);color:var(--white)}
.zl{font-family:var(--mono);font-size:12px;letter-spacing:.24em;color:var(--mute);margin-top:14px}
.cover-luna{width:min(500px,80vw);margin:30px auto 34px;display:block;
  filter:drop-shadow(0 0 60px rgba(150,255,0,.18))}
.cover .it{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(24px,4.6vw,42px);line-height:1.15}
.cover .sub{font-family:var(--body);font-style:italic;color:var(--mute);font-size:clamp(14px,2.2vw,18px);margin-top:14px}

/* sections */
section{padding:80px 0 60px}
.dept{font-family:var(--mono);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--char);margin-bottom:10px}
h2{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(30px,5.4vw,50px);margin-bottom:30px;color:var(--white)}

/* feature player */
.feature{padding:30px 0 70px}
.player{position:relative;border:1px solid var(--line);aspect-ratio:16/9;display:flex;align-items:center;
  justify-content:center;background:radial-gradient(60% 80% at 50% 50%,rgba(58,63,230,.14),rgba(5,5,7,.4)),#08080e;
  overflow:hidden;text-decoration:none}
.player-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6}
.player-bloom{position:absolute;width:52%;opacity:.55;filter:drop-shadow(0 0 44px rgba(58,63,230,.3))}
.player .play{position:relative;z-index:2;font-family:var(--mono);font-size:12px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--white);border:1px solid rgba(233,231,240,.4);padding:16px 28px;
  background:rgba(5,5,7,.5);transition:border-color .3s,color .3s}
.player:hover .play{border-color:var(--char);color:var(--char)}
.lede{font-family:var(--body);font-weight:200;font-style:italic;font-size:clamp(17px,2.6vw,21px);
  line-height:1.85;color:#cfcddd;max-width:54ch;margin:36px 0 0}

/* contents tracklist */
.track{display:grid;grid-template-columns:54px 1fr auto;gap:18px;align-items:baseline;
  padding:20px 4px;border-top:1px solid var(--hair);text-decoration:none;color:inherit;transition:background .3s}
.track:last-of-type{border-bottom:1px solid var(--hair)}
.track:hover{background:rgba(150,255,0,.03)}
.track .no{font-family:var(--mono);font-size:12px;color:var(--mute);letter-spacing:.1em}
.track .ti{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(19px,3vw,26px);line-height:1.25}
.track .ti small{display:block;font-family:var(--body);font-style:italic;font-size:14px;color:var(--mute);margin-top:4px}
.track .rt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--mute);text-transform:lowercase;white-space:nowrap}
.track .rt.lock,.lock{color:var(--char)}

/* pagination */
.pagination{display:flex;justify-content:space-between;padding:26px 4px 0;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:lowercase;color:var(--mute)}
.pagination a{color:var(--mute);text-decoration:none}
.pagination a:hover{color:var(--char)}
.pagination .page-number{opacity:.7}

/* invitation */
.invite{text-align:center;padding:100px 0}
.invite-bunny{width:min(400px,74vw);display:block;margin:0 auto 18px;filter:drop-shadow(0 0 52px rgba(157,59,232,.32))}
.invite p{font-family:var(--body);font-style:italic;color:var(--mute);max-width:42ch;margin:0 auto 34px;font-size:16.5px}
.cta{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:lowercase;
  color:var(--black);background:var(--char);padding:16px 30px;text-decoration:none;transition:box-shadow .3s}
.cta:hover{box-shadow:0 0 30px rgba(150,255,0,.45)}

/* article */
.article{padding:140px 0 40px;max-width:700px;margin:0 auto}
.art-title{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(32px,6vw,56px);line-height:1.1;color:var(--white)}
.art-sub{font-family:var(--body);font-style:italic;font-weight:200;font-size:18px;color:var(--mute);margin-top:16px}
.art-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);margin-top:20px}
.art-hero{margin:44px 0}
.art-hero img{width:100%;display:block}
.art-body{margin-top:44px}

/* prose */
.gh-content>*+*{margin-top:1.4em}
.gh-content p{font-size:17px;font-weight:300;color:#d6d4e2}
.gh-content h2,.gh-content h3{font-family:var(--serif);font-style:italic;font-weight:300;color:var(--white);margin-top:2em}
.gh-content h2{font-size:30px}.gh-content h3{font-size:23px}
.gh-content a{color:var(--char);text-decoration:none;border-bottom:1px solid rgba(150,255,0,.3)}
.gh-content blockquote{border-left:1px solid var(--char);padding-left:24px;font-style:italic;color:#cfcddd}
.gh-content hr{border:0;border-top:1px solid var(--hair);margin:3em 0}
.gh-content figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mute);text-align:center;margin-top:12px}
.gh-content img{max-width:100%;height:auto}
.kg-width-wide{margin-left:-80px;margin-right:-80px}
.kg-width-full{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.kg-embed-card{position:relative}
.kg-embed-card iframe{width:100%;aspect-ratio:16/9;height:auto;border:1px solid var(--line)}
.kg-card figcaption{padding-top:8px}

/* the gate */
.gate-box{position:relative;text-align:center;border:1px solid var(--line);background:#08080e;
  padding:54px 30px;margin-top:-90px;z-index:2;
  box-shadow:0 -70px 50px 30px rgba(5,5,7,.96)}
.gate-box .g1{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--char)}
.gate-box .g2{font-family:var(--body);font-style:italic;color:var(--mute);font-size:14px;margin:10px 0 26px}

.art-next{max-width:700px;margin:0 auto;padding:30px 0 80px}
.art-next a{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:lowercase;
  color:var(--mute);text-decoration:none}
.art-next a:hover{color:var(--char)}

/* footer */
.site-foot{position:relative;z-index:1;text-align:center;padding:80px 20px 60px;border-top:1px solid var(--hair);margin-top:60px}
.site-foot .w{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;color:var(--mute)}
.site-foot .colo{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);
  opacity:.6;margin-top:22px;line-height:2}

@media(max-width:700px){
  .topbar{padding:13px 16px}.topbar .tag{font-size:9px;letter-spacing:.16em}
  .track{grid-template-columns:40px 1fr;gap:12px}.track .rt{grid-column:2;justify-self:start}
  .kg-width-wide{margin-left:0;margin-right:0}
  body::before{background:
    radial-gradient(60% 30% at 50% 6%,rgba(58,63,230,.055),transparent 70%),
    radial-gradient(52% 26% at 50% 96%,rgba(157,59,232,.05),transparent 70%)}
}
@media(prefers-reduced-motion:reduce){
  .shimmer span,.vesper svg{animation:none!important}.shimmer{opacity:.18}}

/* archive (back-issues) */
.arch-head{padding:150px 0 10px;text-align:center}
.arch-title{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(34px,6vw,56px);color:var(--white);margin-top:14px}
.arch-sub{font-family:var(--body);font-style:italic;color:var(--mute);margin-top:12px}
.arch-list{padding-top:40px}
.arch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.vol{border:1px solid var(--hair);padding:26px 22px;text-decoration:none;color:inherit;transition:border-color .3s;background:#08080e}
.vol:hover{border-color:var(--line)}
.vol .vn{font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
.vol .vt{font-family:var(--serif);font-style:italic;font-weight:300;font-size:19px;margin-top:10px;line-height:1.3}
.vol .vs{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--mute);margin-top:14px;text-transform:lowercase}