@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Bebas+Neue&family=Inter:wght@400;700;900&family=Permanent+Marker&family=Pirata+One&family=Special+Elite&display=swap');


:root{--font-body:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--font-display:'Archivo Black','Bebas Neue',Impact,sans-serif;--font-tall:'Bebas Neue','Arial Narrow',Impact,sans-serif;--font-gothic:'Pirata One',Georgia,serif;--font-hand:'Permanent Marker','Special Elite',cursive;
  --bg:#050101;--panel:#0d0505;--red:#d31322;--red2:#6b0409;--bone:#efe4d4;--ash:#b8aa9b;--muted:#7d7169;--yellow:#f5c441;--line:rgba(239,228,212,.16);--max:1180px;--weather:#d31322;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 40% 0,rgba(211,19,34,.18),transparent 30%),var(--bg);color:var(--bone);font-family:var(--font-body);overflow-x:hidden;padding-bottom:78px}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button{font:inherit}.grain,.smoke,.embers,.cursor-light{position:fixed;pointer-events:none}.grain{inset:0;z-index:80;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");mix-blend-mode:overlay}.smoke{inset:-20%;z-index:1;opacity:.58;filter:blur(24px);background:radial-gradient(ellipse at 20% 20%,rgba(255,255,255,.04),transparent 24%),radial-gradient(ellipse at 80% 30%,rgba(211,19,34,.11),transparent 30%);animation:smoke 22s ease-in-out infinite alternate}.embers{inset:-10%;z-index:2;opacity:.18;background:radial-gradient(circle,rgba(245,196,65,.9) 0 1px,transparent 2px) 14% 80%/160px 160px,radial-gradient(circle,rgba(211,19,34,.9) 0 1.4px,transparent 3px) 66% 72%/230px 230px;animation:embers 18s linear infinite}.cursor-light{width:340px;height:340px;border-radius:50%;z-index:3;opacity:.16;transform:translate(-50%,-50%);background:radial-gradient(circle,var(--weather),transparent 62%);filter:blur(8px)}@keyframes smoke{to{transform:translate(3%,-3%) scale(1.08)}}@keyframes embers{from{transform:translateY(18px)}to{transform:translateY(-24px)}}
body.weather-ibn{--weather:#8b0308}body.weather-umer{--weather:#e86217}body.weather-ramblings{--weather:#b99b70}body.weather-inner{--weather:#7953ff}
.site-header{position:sticky;top:0;z-index:70;display:flex;justify-content:space-between;align-items:center;padding:18px clamp(18px,4vw,54px);background:linear-gradient(to bottom,rgba(4,0,0,.9),rgba(4,0,0,.35));backdrop-filter:blur(18px);border-bottom:1px solid rgba(239,228,212,.08)}.brand{display:flex;align-items:center;gap:12px;font-weight:950;letter-spacing:.24em}.brand img{width:48px;height:48px;border-radius:50%;object-fit:cover;box-shadow:0 0 28px rgba(211,19,34,.36)}.nav{display:flex;gap:18px;text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:900;color:var(--ash)}.nav a:hover{color:var(--bone)}.nav-toggle{display:none;background:rgba(255,255,255,.04);color:var(--bone);border:1px solid var(--line);padding:14px 16px;letter-spacing:.18em}
.sound-gate{position:fixed;right:18px;bottom:88px;z-index:78;max-width:calc(100vw - 36px);color:var(--bone);background:rgba(7,0,0,.83);border:1px solid rgba(211,19,34,.62);box-shadow:0 0 30px rgba(211,19,34,.18);padding:13px 15px;border-radius:999px;letter-spacing:.15em;text-transform:uppercase;font-size:11px;font-weight:950;cursor:pointer}.sound-gate.on{background:var(--red);color:#fff}.sound-gate.missing{background:#1b1010;border-color:rgba(245,196,65,.7);color:var(--yellow)}
.sticky-convert{position:fixed;left:0;right:0;bottom:0;z-index:77;display:flex;justify-content:center;align-items:center;gap:14px;padding:14px;background:rgba(5,0,0,.91);border-top:1px solid rgba(211,19,34,.45);backdrop-filter:blur(12px)}.sticky-convert span{color:var(--yellow);letter-spacing:.18em;text-transform:uppercase;font-size:12px;font-weight:950}.sticky-convert a{border:1px solid var(--line);padding:10px 14px;text-transform:uppercase;font-size:11px;font-weight:900;letter-spacing:.12em}.sticky-convert a:first-of-type{background:var(--red);border-color:var(--red)}
.section{max-width:var(--max);margin:0 auto;padding:clamp(66px,9vw,120px) clamp(18px,4vw,36px)}.section-head{max-width:840px;margin-bottom:42px}.section-head span,.tag,.page-hero span,.song-copy span,.article-head span{color:#ff3348;letter-spacing:.27em;text-transform:uppercase;font-size:12px;font-weight:950}.section-head h2,.page-hero h1{font-family:Georgia,serif;font-size:clamp(46px,8vw,92px);line-height:.94;margin:14px 0}.section-head p,.page-hero p{color:var(--ash);font-size:clamp(18px,2.2vw,24px);line-height:1.7}
.hero{position:relative;z-index:5;min-height:calc(100vh - 86px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(280px,.62fr);gap:42px;align-items:center;max-width:var(--max);margin:0 auto;padding:80px clamp(18px,4vw,36px)}.hero-bg{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.18),rgba(0,0,0,.72)),url("assets/img/desiid-cover.webp") center/cover no-repeat;opacity:.42;filter:saturate(1.1) contrast(1.08);transition:background-image .35s ease}.hero h1{position:relative;font-size:clamp(76px,16vw,170px);line-height:.82;margin:0;font-weight:950;letter-spacing:.02em;text-shadow:0 0 40px rgba(211,19,34,.28),4px 4px 0 rgba(211,19,34,.18)}.hero h1::before,.hero h1::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none}.hero h1::before{color:var(--red);opacity:.38;transform:translate(3px,-2px);clip-path:inset(0 0 57% 0)}.hero h1::after{color:#32ddff;opacity:.16;transform:translate(-3px,2px);clip-path:inset(58% 0 0 0)}.hero-line{font-size:clamp(27px,4vw,54px);font-weight:950;margin:24px 0 12px}.hero-copy{color:var(--ash);font-size:clamp(18px,2.2vw,24px);line-height:1.65;max-width:760px}.hero-actions,.cta-row,.center-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:16px 24px;border:1px solid var(--line);text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:950;background:rgba(0,0,0,.3)}.btn.primary{background:var(--red);border-color:var(--red);color:white;box-shadow:0 24px 60px rgba(211,19,34,.22)}.btn:hover{transform:translateY(-2px);border-color:rgba(239,228,212,.44)}.hero-totem{border:1px solid var(--line);background:rgba(0,0,0,.46);padding:12px;box-shadow:0 34px 100px rgba(0,0,0,.5);transform:rotate(-2deg)}.hero-totem img{width:100%;aspect-ratio:1/1;object-fit:cover}.totem-caption{background:rgba(0,0,0,.74);margin-top:10px;padding:12px;color:var(--yellow);font-size:11px;font-weight:950;letter-spacing:.16em;text-transform:uppercase}
.weather-grid,.gate-grid,.transmission-grid,.vault-grid{display:grid;gap:22px}.weather-grid{grid-template-columns:repeat(5,1fr)}.weather-card,.gate-card,.vault-grid button{border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),rgba(12,5,5,.72);color:var(--bone);text-align:left;padding:26px;min-height:190px;box-shadow:0 28px 90px rgba(0,0,0,.32);cursor:pointer;transition:.24s ease;position:relative;overflow:hidden}.weather-card::before,.gate-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,var(--weather),transparent 40%);opacity:.18}.weather-card span,.weather-card strong,.weather-card em,.gate-card span,.gate-card strong,.gate-card em{position:relative;z-index:1}.weather-card span,.gate-card span{display:block;color:#ff3348;letter-spacing:.2em;font-size:12px;font-weight:950;text-transform:uppercase}.weather-card strong,.gate-card strong{display:block;margin:20px 0 10px;font-size:clamp(24px,3vw,40px);line-height:.92;text-transform:uppercase}.weather-card em,.gate-card em{color:var(--ash);font-style:normal;line-height:1.5}.weather-card:hover,.weather-card.active,.gate-card:hover,.vault-grid button:hover{transform:translateY(-4px);border-color:rgba(211,19,34,.68)}.gate-grid{grid-template-columns:repeat(2,1fr)}.gate-grid.mini{grid-template-columns:repeat(4,1fr)}.gate-card.massive{min-height:260px}
.transmission-grid{grid-template-columns:repeat(3,1fr)}.transmission-card{border:1px solid var(--line);background:rgba(12,5,5,.72);overflow:hidden;transition:.25s ease;min-height:100%;box-shadow:0 20px 60px rgba(0,0,0,.28)}.transmission-card:hover{transform:translateY(-5px);border-color:rgba(211,19,34,.62)}.transmission-card img{width:100%;height:240px;object-fit:cover;filter:saturate(1.06) contrast(1.05)}.transmission-card div{padding:22px}.transmission-card span{display:block;color:#ff3348;letter-spacing:.16em;font-size:11px;text-transform:uppercase;font-weight:950}.transmission-card strong{display:block;margin:12px 0;font-size:24px;line-height:1.05}.transmission-card em{color:var(--ash);font-style:normal}.archive-search{width:100%;margin-top:28px;padding:18px 20px;background:rgba(0,0,0,.34);border:1px solid var(--line);color:var(--bone);font-size:18px}.page-hero{padding-top:clamp(80px,11vw,140px)}.article{max-width:1100px;margin:0 auto;padding:clamp(40px,7vw,90px) clamp(18px,4vw,36px)}.article-hero{display:grid;grid-template-columns:minmax(280px,.75fr) minmax(0,1fr);gap:44px;align-items:center}.article-visual img{width:100%;border:1px solid var(--line);box-shadow:0 30px 90px rgba(0,0,0,.42)}.article-head h1{font-family:Georgia,serif;font-size:clamp(44px,7vw,88px);line-height:.94;margin:18px 0}.article-head p,.article-body p{color:var(--ash);font-size:clamp(18px,2vw,22px);line-height:1.8}.article-meta{margin:24px 0;padding:18px;border-left:5px solid var(--red);background:rgba(0,0,0,.26);line-height:1.7;color:var(--ash)}.article-body{max-width:860px;margin:56px auto 0}.article-body blockquote{font-family:Georgia,serif;font-size:clamp(26px,4vw,44px);line-height:1.08;border-left:7px solid var(--red);padding-left:22px;margin:36px 0}.cta-block{margin:52px 0;padding:34px;border:1px solid rgba(211,19,34,.42);background:radial-gradient(circle at 20% 10%,rgba(211,19,34,.20),transparent 36%),rgba(0,0,0,.32)}.cta-block span{color:#ff3348;letter-spacing:.2em;font-weight:950;text-transform:uppercase;font-size:12px}.cta-block h3{font-family:Georgia,serif;font-size:clamp(34px,6vw,64px);margin:10px 0}.song-file{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1fr);gap:50px;align-items:center}.song-art img{border:1px solid var(--line);box-shadow:0 34px 90px rgba(0,0,0,.45)}.song-copy h1{font-size:clamp(52px,9vw,104px);line-height:.86;margin:18px 0}.song-copy p{color:var(--ash);font-size:clamp(18px,2.2vw,24px);line-height:1.7}.song-mood{margin:24px 0;padding:18px;border:1px solid var(--line);color:var(--yellow);text-transform:uppercase;letter-spacing:.14em;font-weight:900}.vault-grid{grid-template-columns:repeat(4,1fr)}.vault-grid button{min-height:170px;font-size:24px;font-weight:950;text-transform:uppercase;letter-spacing:.12em}.vault-modal{position:fixed;inset:0;z-index:120;display:none;place-items:center;padding:20px;background:rgba(0,0,0,.78);backdrop-filter:blur(14px)}.vault-modal.open{display:grid}.vault-dialog{width:min(680px,100%);border:1px solid rgba(211,19,34,.48);background:linear-gradient(180deg,rgba(211,19,34,.16),rgba(8,2,2,.94)),#070202;padding:clamp(28px,6vw,56px);box-shadow:0 40px 120px rgba(0,0,0,.72);position:relative}.vault-dialog span{color:#ff3348;letter-spacing:.25em;font-size:12px;font-weight:950}.vault-dialog h3{font-family:Georgia,serif;font-size:clamp(38px,6vw,64px);line-height:.94;margin:16px 0}.vault-dialog p{color:var(--ash);font-size:20px;line-height:1.7}.modal-actions{display:flex;gap:12px;flex-wrap:wrap}.modal-actions a{border:1px solid var(--line);padding:14px 16px;font-weight:900;text-transform:uppercase;letter-spacing:.12em;font-size:12px}#vaultClose{position:absolute;right:16px;top:16px;width:44px;height:44px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--bone);font-size:26px;cursor:pointer}.footer{position:relative;z-index:5;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;padding:44px clamp(18px,4vw,54px);color:var(--muted);text-transform:uppercase;letter-spacing:.12em}.footer strong{color:var(--bone)}.footer-links{display:flex;gap:16px;flex-wrap:wrap}
@media(max-width:980px){.hero,.article-hero,.song-file,.gate-grid,.gate-grid.mini{grid-template-columns:1fr}.weather-grid,.transmission-grid,.vault-grid{grid-template-columns:repeat(2,1fr)}.nav{position:fixed;top:84px;left:0;right:0;display:grid;background:rgba(4,0,0,.96);padding:18px 28px;transform:translateY(-130%);transition:.25s ease}.nav.open{transform:translateY(0)}.nav-toggle{display:block}.sticky-convert{justify-content:flex-start;overflow-x:auto}.sticky-convert span{white-space:nowrap}.sound-gate{left:14px;right:14px;bottom:78px}.hero-totem{transform:none}}@media(max-width:620px){body{padding-bottom:104px}.brand span{display:none}.hero h1{font-size:clamp(62px,22vw,104px)}.weather-grid,.transmission-grid,.vault-grid{grid-template-columns:1fr}.transmission-card img{height:220px}.btn{width:100%}.footer{display:block}.sticky-convert{padding:10px}.sticky-convert span{display:none}}


/* V5 POLISH PASS — landing banner + JANGLI font system */
body {
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.site-header .brand span,
.nav a,
.nav-toggle,
.btn,
.sound-gate,
.sticky-convert,
.weather-card span,
.gate-card span,
.transmission-card span,
.section-head span,
.tag,
.page-hero span,
.song-copy span,
.article-head span {
  font-family: var(--font-tall);
  letter-spacing: .18em;
}

.hero {
  isolation: isolate;
  min-height: calc(100vh - 84px);
  border-bottom: 1px solid rgba(211,19,34,.25);
}

.hero::before {
  content: "THE FILES HAVE LEFT THE CAGE";
  position: absolute;
  left: clamp(18px, 4vw, 52px);
  right: clamp(18px, 4vw, 52px);
  top: 30px;
  z-index: -1;
  color: rgba(239,228,212,.045);
  font-family: var(--font-display);
  font-size: clamp(44px, 8vw, 132px);
  line-height: .82;
  letter-spacing: -.06em;
  pointer-events: none;
}

.hero::after {
  content: "NA GHULAM • NA HERO • SIRF JANGLI";
  position: absolute;
  left: clamp(18px, 4vw, 52px);
  bottom: 24px;
  color: rgba(245,196,65,.82);
  font-family: var(--font-tall);
  letter-spacing: .28em;
  font-size: clamp(12px, 1.4vw, 17px);
  z-index: 2;
  text-shadow: 0 0 22px rgba(211,19,34,.35);
}

.hero-bg {
  background:
    linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.38),rgba(0,0,0,.78)),
    radial-gradient(circle at 28% 40%, rgba(211,19,34,.22), transparent 36%),
    url("assets/img/landing-banner.webp") center / cover no-repeat !important;
  opacity: .88;
  filter: saturate(1.15) contrast(1.18);
}

.hero-inner {
  position: relative;
  padding: clamp(24px, 4vw, 46px);
  border-left: 1px solid rgba(211,19,34,.42);
  background: linear-gradient(90deg,rgba(0,0,0,.44),rgba(0,0,0,0));
  box-shadow: inset 8px 0 0 rgba(211,19,34,.18);
}

.hero h1 {
  font-family: var(--font-display);
  letter-spacing: -.075em;
  transform: scaleX(.96);
  transform-origin: left center;
  -webkit-text-stroke: 1px rgba(239,228,212,.16);
}

.hero-line {
  font-family: var(--font-gothic);
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--bone);
  text-shadow: 0 0 22px rgba(211,19,34,.48);
}

.hero-copy {
  max-width: 690px;
  border-left: 6px solid var(--red);
  padding-left: 18px;
  background: linear-gradient(90deg, rgba(211,19,34,.10), transparent);
}

.hero-totem {
  transform: rotate(-2deg) translateY(10px);
  border: 1px solid rgba(245,196,65,.26);
  box-shadow: 0 34px 110px rgba(0,0,0,.62), 0 0 80px rgba(211,19,34,.22);
}

.hero-totem::before {
  content: "OFFICIAL FILE";
  display: block;
  padding: 9px 10px 12px;
  color: var(--red);
  font-family: var(--font-tall);
  letter-spacing: .24em;
  font-size: 13px;
  text-align: center;
  border-bottom: 1px solid rgba(239,228,212,.12);
  background: rgba(0,0,0,.55);
}

.totem-caption {
  font-family: var(--font-tall);
  letter-spacing: .24em;
}

.section-head h2,
.page-hero h1,
.article-head h1,
.song-copy h1,
.cta-block h3 {
  font-family: var(--font-gothic);
  font-weight: 400;
  letter-spacing: -.015em;
}

.weather-card strong,
.gate-card strong,
.transmission-card strong,
.vault-grid button {
  font-family: var(--font-tall);
  letter-spacing: .035em;
}

.gate-card,
.weather-card,
.transmission-card,
.vault-grid button,
.cta-block,
.article-meta,
.song-mood {
  backdrop-filter: blur(10px);
}

.gate-card:hover strong,
.weather-card:hover strong,
.transmission-card:hover strong {
  color: var(--yellow);
}

.article-body p {
  font-family: var(--font-body);
}

.article-body blockquote {
  font-family: var(--font-hand);
  color: var(--yellow);
  border-left-color: var(--yellow);
}

.page-hero {
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: "JANGLI ARCHIVE";
  position: absolute;
  inset: auto 0 12px auto;
  color: rgba(239,228,212,.035);
  font-family: var(--font-display);
  font-size: clamp(70px, 14vw, 190px);
  letter-spacing: -.08em;
  z-index: -1;
}

@media(max-width:980px) {
  .hero-inner {
    padding: 26px 18px;
  }
  .hero::before {
    top: 16px;
  }
}

@media(max-width:620px) {
  .hero {
    padding-top: 62px;
  }
  .hero::after {
    position: static;
    margin-top: 22px;
    display: block;
    font-size: 12px;
    letter-spacing: .16em;
  }
  .hero h1 {
    letter-spacing: -.09em;
  }
  .hero-totem::before {
    font-size: 11px;
  }
}



/* AUDIO BUTTON POLISH — IBN-E-FASAADI 30S INTRO */
.sound-gate {
  min-height: 54px;
  padding: 16px 22px;
  font-size: 12px;
  letter-spacing: .16em;
  border-width: 2px;
  box-shadow: 0 0 36px rgba(211,19,34,.28), 0 18px 54px rgba(0,0,0,.44);
}

.sound-gate::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 10px;
  border-radius: 50%;
  background: #d31322;
  box-shadow: 0 0 16px rgba(211,19,34,.9);
  vertical-align: middle;
}

.sound-gate.on::before {
  background: #f5c441;
  box-shadow: 0 0 18px rgba(245,196,65,.9);
}

body.sound-awake .hero h1 {
  animation: jangliPulse .8s ease both;
}

@keyframes jangliPulse {
  0% { filter: drop-shadow(0 0 0 rgba(211,19,34,0)); transform: scaleX(.96) scale(1); }
  35% { filter: drop-shadow(0 0 28px rgba(211,19,34,.85)); transform: scaleX(.96) scale(1.018); }
  100% { filter: drop-shadow(0 0 0 rgba(211,19,34,0)); transform: scaleX(.96) scale(1); }
}