/* ============================================
   ICDTOMO — Kone personal site
   gothic / black-metal sigil aesthetic
   ============================================ */

@font-face{
  font-family:'Darkhorn';
  src:url('/fonts/Darkhorn.otf') format('opentype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:        #000000;
  --bg-2:      #050505;
  --ink:       #e8e3d8;          /* bone white */
  --ink-2:     #9a9389;          /* warm muted */
  --ink-3:     #5a544c;          /* dim */
  --ink-4:     #2a2622;          /* faintest */
  --line:      rgba(255,255,255,.07);
  --line-2:    rgba(255,255,255,.03);
  --card-bg:   rgba(8,8,8,.55);
  --glow:      rgba(232,227,216,.18);
  --blood:     #6b0a0a;
  --red:       #b81818;
  --red-glow:  rgba(184,24,24,.55);
  --red-deep:  #7a0d0d;
  --lime:        #d8ff3a;
  --lime-glow:   rgba(216,255,58,.5);
  --blue:        #3a8eff;
  --blue-glow:   rgba(58,142,255,.55);
  --violet:      #8b5cff;
  --violet-glow: rgba(139,92,255,.55);
  --gold:        #ffb84a;
  --gold-glow:   rgba(255,184,74,.55);
  --display:   'Darkhorn','UnifrakturCook','Pirata One',serif;
  --max:       1100px;
  --pad:       clamp(20px, 4vw, 56px);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:auto;min-height:100%}
html{
  scroll-behavior:smooth;
  scroll-snap-type:y proximity;
  scroll-padding-top:0;
}
.hero,
.section,
.ayah-section,
.site-foot{
  scroll-snap-align:start;
  scroll-snap-stop:normal;
}
@media (max-width:680px){
  html{scroll-snap-type:none}
}
body{
  margin:0;
  font-family:'Cormorant Garamond', Georgia, serif;
  background:var(--bg);
  color:var(--ink);
  cursor:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.intro-locked{overflow:hidden;height:100vh}

a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:none}
input{font-family:inherit}

/* ============================================
   Background layers
   ============================================ */
.bg-grad{
  position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(255,255,255,.04), transparent 60%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(107,10,10,.06), transparent 70%),
    #000;
  pointer-events:none;
}
.bg-grad::after{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%);
  opacity:.4;
}

/* floating Kone sigils */
.bg-sigils{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  overflow:hidden;
}
.bg-sigil{
  position:absolute;
  filter:invert(1) brightness(1) contrast(1.4) blur(.3px);
  mix-blend-mode:screen;
  opacity:.05;
  user-select:none;
  pointer-events:none;
}
.bg-sigil-center{
  width:min(95vh,95vw);
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  opacity:.022;
  animation:sigilCenterRot 120s linear infinite;
}
@keyframes sigilCenterRot{to{transform:translate(-50%,-50%) rotate(360deg)}}
.bg-sigil-1{ width:240px; top:8%; left:6%;  animation:sigilFloat1 22s ease-in-out infinite }
.bg-sigil-2{ width:180px; top:14%; right:8%; animation:sigilFloat2 26s ease-in-out infinite }
.bg-sigil-3{ width:200px; top:62%; left:10%; animation:sigilFloat3 28s ease-in-out infinite }
.bg-sigil-4{ width:160px; top:72%; right:6%; animation:sigilFloat4 24s ease-in-out infinite }
@keyframes sigilFloat1{
  0%,100%{transform:translate(0,0) rotate(-3deg);opacity:.05}
  50%{transform:translate(20px,-15px) rotate(3deg);opacity:.08}
}
@keyframes sigilFloat2{
  0%,100%{transform:translate(0,0) rotate(2deg);opacity:.04}
  50%{transform:translate(-25px,18px) rotate(-4deg);opacity:.07}
}
@keyframes sigilFloat3{
  0%,100%{transform:translate(0,0) rotate(-2deg);opacity:.05}
  50%{transform:translate(18px,-22px) rotate(4deg);opacity:.08}
}
@keyframes sigilFloat4{
  0%,100%{transform:translate(0,0) rotate(3deg);opacity:.04}
  50%{transform:translate(-20px,-12px) rotate(-3deg);opacity:.07}
}
@media (max-width:600px){
  .bg-sigil-1,.bg-sigil-2,.bg-sigil-3,.bg-sigil-4{width:130px;opacity:.04}
}

/* spinning side ornaments — pushed well outside the content column */
.spinner{
  position:fixed;
  top:50%;
  width:clamp(60px, 7vw, 92px);
  height:auto;
  z-index:4;
  pointer-events:none;
  user-select:none;
  opacity:.78;
}
.spinner-left{
  left:max(14px, calc(50% - 600px));
  transform:translateY(-50%);
  animation:spinL 18s linear infinite, breathL 5s ease-in-out infinite;
}
.spinner-right{
  right:max(14px, calc(50% - 600px));
  transform:translateY(-50%);
  animation:spinR 18s linear infinite, breathR 5s ease-in-out infinite;
}
@keyframes spinL{
  from{transform:translateY(-50%) rotate(0deg)}
  to{transform:translateY(-50%) rotate(-360deg)}
}
@keyframes spinR{
  from{transform:translateY(-50%) rotate(0deg)}
  to{transform:translateY(-50%) rotate(360deg)}
}
@keyframes breathL{
  0%,100%{filter:drop-shadow(0 0 14px rgba(120,200,160,.25))}
  50%{filter:drop-shadow(0 0 24px rgba(120,200,160,.5))}
}
@keyframes breathR{
  0%,100%{filter:drop-shadow(0 0 14px rgba(180,80,140,.25))}
  50%{filter:drop-shadow(0 0 24px rgba(180,80,140,.5))}
}
@media (max-width:980px){
  .spinner{
    width:60px;
    opacity:.7;
  }
  .spinner-left{ left:max(8px, calc(50% - 380px)) }
  .spinner-right{ right:max(8px, calc(50% - 380px)) }
}
@media (max-width:680px){
  .spinner{
    width:48px;
    opacity:.78;
    top:auto;bottom:96px;
  }
  .spinner-left{
    left:10px;
    transform:none;
    animation:spinL2 18s linear infinite, breathL 5s ease-in-out infinite;
  }
  .spinner-right{
    right:10px;
    transform:none;
    animation:spinR2 18s linear infinite, breathR 5s ease-in-out infinite;
  }
  @keyframes spinL2{ from{transform:rotate(0deg)} to{transform:rotate(-360deg)} }
  @keyframes spinR2{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
}

/* mobile: lighten frosted overlays so sprites/images stay visible */
@media (max-width:680px){
  .bg-vignette{
    background:radial-gradient(ellipse 110% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.5) 100%);
  }
  .bg-vignette::after{opacity:.22}
  .grunge-static{opacity:.1}
  .grunge-ink{opacity:.5}
  .player{
    backdrop-filter:blur(8px) saturate(105%);
    -webkit-backdrop-filter:blur(8px) saturate(105%);
    background:rgba(0,0,0,.7);
  }
}

.particles{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  opacity:.55;
}
.bg-vignette{
  position:fixed;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse 90% 70% at 50% 50%, transparent 40%, rgba(0,0,0,.85) 100%);
}
.bg-vignette::after{
  content:"";
  position:absolute;inset:-50%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.42;
  mix-blend-mode:overlay;
  animation:grainShift 5s steps(8) infinite;
}
@keyframes grainShift{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-2%)}
  60%{transform:translate(-1%,3%)}
  80%{transform:translate(3%,-1%)}
}

/* ============================================
   GRUNGE layer — scratches, static, ink
   ============================================ */
.grunge{
  position:fixed;inset:0;z-index:5;pointer-events:none;
  mix-blend-mode:screen;
}
.grunge-scratches{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:.5;
  animation:scratchFlick 9s steps(4) infinite;
}
@keyframes scratchFlick{
  0%,5%{opacity:.5}
  6%,9%{opacity:.85}
  10%,100%{opacity:.5}
}
.grunge-static{
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='2.2' numOctaves='3' stitchTiles='stitch' seed='5'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23s)'/></svg>");
  opacity:.18;
  mix-blend-mode:overlay;
  animation:staticShift 0.6s steps(4) infinite;
}
@keyframes staticShift{
  0%{transform:translate(0,0)}
  25%{transform:translate(-2%,1%)}
  50%{transform:translate(2%,-1%)}
  75%{transform:translate(-1%,2%)}
  100%{transform:translate(0,0)}
}
.grunge-ink{
  position:absolute;
  background-image:radial-gradient(ellipse, rgba(232,227,216,.08), transparent 70%);
  filter:blur(20px);
  border-radius:50%;
  mix-blend-mode:screen;
}
.grunge-ink-1{ width:300px; height:300px; top:-40px; left:8%; animation:inkDrift1 30s ease-in-out infinite }
.grunge-ink-2{ width:380px; height:380px; bottom:-60px; right:10%; animation:inkDrift2 36s ease-in-out infinite }
.grunge-ink-3{ width:240px; height:240px; top:40%; left:50%; animation:inkDrift3 24s ease-in-out infinite }
@keyframes inkDrift1{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(40px,30px) scale(1.15)}
}
@keyframes inkDrift2{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-30px,-40px) scale(.85)}
}
@keyframes inkDrift3{
  0%,100%{transform:translate(-50%,0) scale(1)}
  50%{transform:translate(-30%,40px) scale(1.2)}
}

/* ============================================
   Custom cursor — multi-style picker
   ============================================ */
.cursor{
  position:fixed;
  top:0;left:0;
  pointer-events:none;
  z-index:9999;
  width:60px;height:60px;
  transform:translate(-50%,-50%);
  transition:transform .12s ease, filter .25s ease;
  filter:drop-shadow(0 0 10px rgba(0,0,0,.6));
}
.cursor .cur-svg{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:none;
  transition:transform .25s cubic-bezier(.18,.89,.32,1.28), filter .25s;
}
.cursor[data-style="scope"] .cur-scope{display:block}
.cursor[data-style="sigil"] .cur-sigil{display:block}
.cursor[data-style="dot"]   .cur-dot  {display:block}

/* hover behavior — nudge target ring/sigil/dot */
.cursor.hover .cur-scope{
  transform:scale(1.18);
  filter:drop-shadow(0 0 12px rgba(184,24,24,.6));
}
.cursor.hover .cur-sigil{
  transform:scale(1.18);
  filter:drop-shadow(0 0 12px rgba(184,24,24,.5));
}
.cursor.hover .cur-dot{
  transform:scale(1.4);
}
.cursor.click{transform:translate(-50%,-50%) scale(.85)}

/* blood drip animation on scope + sigil */
.drip-bead{
  animation:drip 3.5s ease-in infinite;
  transform-origin:center;
}
@keyframes drip{
  0%,40%{opacity:0;transform:translateY(-8px) scale(.6)}
  55%{opacity:1;transform:translateY(0) scale(1)}
  85%{opacity:.8;transform:translateY(8px) scale(.9)}
  100%{opacity:0;transform:translateY(14px) scale(.5)}
}

@media (hover:none) and (pointer:coarse){
  body{cursor:auto}
  .cursor,.cur-picker{display:none}
  button,a,input{cursor:pointer}
}

/* picker UI — fixed top-right, near side-nav */
.cur-picker{
  position:fixed;
  top:18px;right:18px;
  z-index:31;
  display:flex;
  gap:6px;
  padding:5px;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--ink-4);
  opacity:0;
  transition:opacity .8s ease 1.2s;
}
body.entered .cur-picker{opacity:1}
.cur-opt{
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
  border:1px solid transparent;
  color:var(--ink-3);
  transition:all .2s;
  padding:0;
}
.cur-opt:hover{color:var(--ink-2);border-color:var(--ink-4)}
.cur-opt.active{
  color:var(--ink);
  border-color:var(--ink);
  background:rgba(232,227,216,.06);
}
.cur-opt.active[data-cur="scope"],
.cur-opt.active[data-cur="sigil"]{
  color:var(--red);
  border-color:var(--red);
  box-shadow:0 0 10px var(--red-glow);
}
.cur-opt svg{width:18px;height:18px}

/* prop firm logo on payout cards */
.payout-firm-mark img{
  width:28px;height:28px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 0 6px var(--p-glow));
}
.payout-firm-mark{
  padding:5px;
  background:#000;
}

/* ============================================
   Enter screen splash
   ============================================ */
.enter-screen{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  background:#000;
  cursor:none;
  transition:opacity 1s cubic-bezier(.4,0,.2,1);
}
.enter-screen.hidden{opacity:0;pointer-events:none}
.enter-bg{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 50% 40% at 50% 50%, rgba(232,227,216,.07), transparent 65%);
  animation:pulseGlow 5s ease-in-out infinite;
}
@keyframes pulseGlow{
  0%,100%{opacity:.6;transform:scale(1)}
  50%{opacity:1;transform:scale(1.08)}
}
.enter-content{position:relative;z-index:2;text-align:center;padding:32px}
.enter-title{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(60px,12vw,120px);
  letter-spacing:.02em;
  color:var(--red);
  text-shadow:
    0 0 32px var(--red-glow),
    0 0 64px rgba(184,24,24,.4);
  animation:flicker 4s ease-in-out infinite;
  margin-bottom:14px;
  text-transform:lowercase;
  line-height:.92;
}
@keyframes flicker{
  0%,100%{opacity:1}
  47%{opacity:1}
  48%{opacity:.3}
  49%{opacity:1}
  73%{opacity:1}
  74%{opacity:.5}
  75%{opacity:1}
}
.enter-sub{
  font-family:'Cinzel',serif;
  font-weight:500;
  font-size:13px;
  letter-spacing:.55em;
  color:var(--ink-2);
  text-transform:uppercase;
  margin-bottom:36px;
  margin-left:.55em;
  opacity:.85;
}
.enter-hint{
  font-family:'JetBrains Mono',monospace;
  font-weight:300;
  font-size:10.5px;
  letter-spacing:.4em;
  color:var(--ink-3);
  text-transform:uppercase;
  margin-left:.4em;
  animation:fadeBlink 2.4s ease-in-out infinite;
}
@keyframes fadeBlink{
  0%,100%{opacity:.3}
  50%{opacity:.9}
}

/* ============================================
   Side nav (vertical dots on right)
   ============================================ */
.side-nav{
  position:fixed;
  top:50%;right:18px;
  transform:translateY(-50%);
  z-index:30;
  display:flex;flex-direction:column;
  gap:14px;
  padding:14px 8px;
  opacity:0;
  transition:opacity .8s ease;
}
.site.entered ~ .side-nav,
body.entered .side-nav{opacity:1}
.side-nav a{
  position:relative;
  display:block;
  width:18px;height:18px;
  display:flex;align-items:center;justify-content:center;
}
.side-nav a span{
  display:block;
  width:5px;height:5px;border-radius:50%;
  background:var(--ink-3);
  transition:all .25s;
}
.side-nav a:hover span{background:var(--ink);transform:scale(1.4)}
.side-nav a.active span{
  background:var(--ink);
  width:5px;height:18px;border-radius:3px;
  box-shadow:0 0 8px rgba(232,227,216,.6);
}
.side-nav a::after{
  content:attr(data-label);
  position:absolute;
  right:calc(100% + 14px);top:50%;transform:translateY(-50%);
  font-family:'Cinzel',serif;
  font-weight:500;
  font-size:9px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--ink-2);
  white-space:nowrap;
  background:#000;
  padding:4px 10px 4px 12px;
  border:1px solid var(--ink-4);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s;
}
.side-nav a:hover::after{opacity:1}
@media (max-width:780px){.side-nav{display:none}}

/* ============================================
   Site shell + sections
   ============================================ */
.site{
  position:relative;
  z-index:10;
  width:100%;
  opacity:0;
  transition:opacity 1s cubic-bezier(.4,0,.2,1);
}
.site.entered{opacity:1}

.section{
  position:relative;
  max-width:var(--max);
  margin:0 auto;
  padding:120px var(--pad) 100px;
}

.section-eyebrow{
  font-family:'Cinzel',serif;
  font-weight:500;
  font-size:10px;
  letter-spacing:.5em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0 0 16px;
  margin-left:.5em;
  display:flex;align-items:center;gap:14px;
}
.section-eyebrow::after{
  content:"";
  flex:1;max-width:200px;height:1px;
  background:linear-gradient(90deg,var(--ink-4),transparent);
}
.section-title{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(48px, 8.5vw, 88px);
  line-height:.92;
  letter-spacing:.01em;
  margin:0 0 22px;
  color:var(--red);
  text-shadow:
    0 0 32px var(--red-glow),
    0 0 64px rgba(184,24,24,.35),
    0 2px 14px rgba(0,0,0,.9);
  text-transform:lowercase;
}
.section-title .italic{
  font-family:var(--display);
  font-style:normal;
  font-weight:400;
  color:var(--red);
  display:inline-block;
  text-shadow:
    0 0 32px var(--red-glow),
    0 0 64px rgba(184,24,24,.35),
    0 2px 14px rgba(0,0,0,.9);
}
.section-sub{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(15px, 2.3vw, 19px);
  color:var(--ink-2);
  margin:0 0 40px;
  max-width:560px;
  line-height:1.5;
}

/* scroll-reveal */
.rev{
  opacity:0;
  transform:translateY(24px);
  filter:blur(6px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), filter .9s ease;
}
.rev.in{opacity:1;transform:translateY(0);filter:blur(0)}

/* ============================================
   HERO
   ============================================ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;
  padding:80px var(--pad) 80px;
}
.hero-inner{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
}
/* bismillah — opening blessing */
.bismillah{
  display:flex;flex-direction:column;
  align-items:flex-start;
  gap:6px;
  margin-bottom:24px;
  padding-bottom:18px;
  border-bottom:1px solid var(--ink-4);
  max-width:600px;
}
.bism-arabic{
  font-family:'Amiri', serif;
  font-weight:400;
  font-size:clamp(22px, 3vw, 32px);
  color:var(--ink);
  line-height:1.4;
  text-shadow:0 0 18px rgba(232,227,216,.25);
  letter-spacing:0;
  direction:rtl;
}
.bism-en{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-weight:400;
  font-size:13px;
  color:var(--ink-3);
  letter-spacing:.02em;
}
@media (max-width:780px){
  .bismillah{align-items:center;text-align:center;margin:0 auto 24px}
}

.hero-online{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'JetBrains Mono',monospace;
  font-weight:300;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-3);
  padding:5px 11px;
  border:1px solid var(--ink-4);
  margin-bottom:36px;
}
.hero-online .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--ink);
  box-shadow:0 0 8px var(--ink);
  animation:dotPulse 2.4s ease-in-out infinite;
}
@keyframes dotPulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(.8)}
}
.hero-views{
  display:inline-flex;align-items:center;gap:5px;
  margin-left:8px;padding-left:10px;
  border-left:1px solid var(--ink-4);
  color:var(--ink-3);
}

.hero-grid{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(28px,5vw,64px);
  align-items:center;
}

/* hero PFP */
.hero-pfp{
  position:relative;
  width:clamp(200px, 24vw, 280px);
  aspect-ratio:1/1;
  flex-shrink:0;
}
.hero-pfp-ring{
  position:absolute;inset:-12px;border-radius:50%;
  border:1px solid var(--ink-4);
  animation:ringRotate 50s linear infinite;
}
.hero-pfp-ring::before,.hero-pfp-ring::after{
  content:"";
  position:absolute;
  background:var(--ink-3);
  opacity:.45;
}
.hero-pfp-ring::before{top:50%;left:-4px;right:-4px;height:1px}
.hero-pfp-ring::after{left:50%;top:-4px;bottom:-4px;width:1px}
@keyframes ringRotate{to{transform:rotate(360deg)}}

.hero-pfp-frame{
  position:absolute;inset:0;
  border-radius:50%;
  background:#000;
  border:1px solid var(--ink-3);
  overflow:hidden;
  box-shadow:
    0 0 30px rgba(232,227,216,.1) inset,
    0 24px 60px rgba(0,0,0,.7);
}
.hero-pfp-img{
  width:100%;height:100%;
  object-fit:cover;
  filter:contrast(1.05) brightness(.95) saturate(.85);
}
.hero-pfp-grain{
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .14 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
  opacity:.6;
  pointer-events:none;
}

/* hero text */
.hero-text{min-width:0}
.hero-eyebrow{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-weight:300;
  font-size:14px;
  color:var(--ink-3);
  margin-bottom:8px;
}
.hero-name{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(80px, 15vw, 180px);
  line-height:.82;
  margin:0 0 10px;
  letter-spacing:.01em;
  color:var(--red);
  text-shadow:
    0 0 50px var(--red-glow),
    0 0 100px rgba(184,24,24,.3),
    0 4px 22px rgba(0,0,0,.95);
  text-transform:lowercase;
}
.hero-handle{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(18px, 2.4vw, 24px);
  letter-spacing:.04em;
  color:var(--ink-2);
  margin:0 0 22px;
}
.hero-handle .at{color:var(--ink-3);font-style:normal;font-weight:300}
.hero-bio{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:clamp(17px,2.6vw,22px);
  line-height:1.4;
  color:var(--ink);
  margin:0 0 28px;
  border-left:1px solid var(--ink-3);
  padding-left:14px;
  max-width:520px;
}
.hero-bio span{display:block}
.hero-bio .italic{color:var(--ink-2)}
.bio-arabic{
  font-family:'Amiri', serif;
  font-style:normal;
  font-weight:400;
  font-size:clamp(22px, 3vw, 30px);
  color:#ffffff;
  line-height:1.5;
  margin-bottom:6px;
  text-shadow:0 0 18px rgba(232,227,216,.3);
  direction:rtl;
}
.foot-quote[dir="rtl"]{
  font-family:'Amiri', serif;
  font-style:normal;
  font-size:18px;
  color:#ffffff;
  line-height:1.4;
  text-shadow:0 0 14px rgba(232,227,216,.25);
}

.hero-cta{
  display:flex;flex-wrap:wrap;
  gap:10px;
  margin-bottom:28px;
}
.hbtn{
  font-family:'Cinzel',serif;
  font-weight:500;
  font-size:11px;
  letter-spacing:.32em;
  text-transform:uppercase;
  padding:13px 22px 13px 24px;
  border:1px solid var(--ink-3);
  color:var(--ink);
  background:transparent;
  transition:all .25s cubic-bezier(.18,.89,.32,1.28);
  display:inline-flex;align-items:center;gap:8px;
}
.hbtn:hover{
  background:rgba(232,227,216,.05);
  border-color:var(--ink);
  transform:translateY(-2px);
  box-shadow:0 8px 22px -8px rgba(232,227,216,.4);
}
.hbtn.primary{
  background:var(--ink);
  color:#000;
  border-color:var(--ink);
}
.hbtn.primary:hover{
  background:#fff;
  border-color:#fff;
}

.hero-meta{
  display:flex;flex-wrap:wrap;
  gap:9px;
  font-family:'Cinzel',serif;
  font-weight:500;
  font-size:9px;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-left:.4em;
}
.hero-aka{
  display:flex;flex-wrap:wrap;
  align-items:center;gap:8px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--ink-4);
  font-family:'JetBrains Mono',monospace;
  font-weight:300;
  font-size:11px;
  letter-spacing:.06em;
  color:var(--ink-2);
  max-width:520px;
}
.hero-aka .aka-label{
  font-family:'Cinzel',serif;
  font-weight:500;
  font-size:9px;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--ink-3);
  padding:3px 8px 3px 10px;
  border:1px solid var(--ink-4);
  margin-right:4px;
}
.hero-aka .sep{color:var(--ink-4);font-weight:300}
@media (max-width:780px){
  .hero-aka{justify-content:center;max-width:none}
}

/* scroll hint */
.scroll-hint{
  position:absolute;
  bottom:28px;left:50%;
  transform:translateX(-50%);
  display:flex;flex-direction:column;
  align-items:center;gap:5px;
  font-family:'Cinzel',serif;
  font-weight:500;
  font-size:9px;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--ink-3);
  opacity:0;
  animation:scrollHintIn 1s ease 2s forwards, scrollBob 2s ease-in-out infinite 3s;
  margin-left:.4em;
}
.scroll-arrow{font-size:14px;animation:scrollArrowBob 2s ease-in-out infinite}
@keyframes scrollHintIn{to{opacity:.7}}
@keyframes scrollArrowBob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(4px)}
}
@keyframes scrollBob{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(3px)}
}

@media (max-width:780px){
  .hero-grid{
    grid-template-columns:1fr;
    text-align:center;
    gap:30px;
  }
  .hero-pfp{margin:0 auto;width:170px}
  .hero-bio{margin-left:auto;margin-right:auto;border-left:none;padding-left:0;border-top:1px solid var(--ink-3);padding-top:14px}
  .hero-cta{justify-content:center}
  .hero-meta{justify-content:center}
}

/* ============================================
   SIGIL section
   ============================================ */
.sigil-section{text-align:center}
.sigil-section .section-eyebrow{justify-content:center;margin-left:0}
.sigil-section .section-eyebrow::after{display:none}

.sigil-display{
  position:relative;
  width:min(380px,80vw);
  margin:42px auto 32px;
  filter:drop-shadow(0 0 30px rgba(232,227,216,.18));
  animation:sigilBreathe 6s ease-in-out infinite;
}
@keyframes sigilBreathe{
  0%,100%{filter:drop-shadow(0 0 24px rgba(232,227,216,.16))}
  50%{filter:drop-shadow(0 0 40px rgba(232,227,216,.32))}
}
.sigil-large{
  width:100%;height:auto;
  display:block;
  filter:contrast(1.25) brightness(1.18);
  mix-blend-mode:screen;
}
.sigil-burn{
  position:absolute;inset:-8%;
  background:radial-gradient(circle at 50% 50%, rgba(232,227,216,.15), transparent 60%);
  animation:burnPulse 5s ease-in-out infinite;
  pointer-events:none;
  z-index:-1;
}
@keyframes burnPulse{
  0%,100%{opacity:.5;transform:scale(1)}
  50%{opacity:1;transform:scale(1.06)}
}
.sigil-lore{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:clamp(16px,2.2vw,20px);
  color:var(--ink-2);
  max-width:540px;
  margin:0 auto;
  line-height:1.55;
}
.sigil-tag{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(26px, 4vw, 38px);
  color:var(--red);
  margin:8px auto 0;
  line-height:1;
  letter-spacing:.02em;
  text-transform:lowercase;
  text-shadow:
    0 0 24px var(--red-glow),
    0 0 48px rgba(184,24,24,.3),
    0 2px 12px rgba(0,0,0,.9);
}

/* ============================================
   DECIPHER section + puzzle
   ============================================ */
/* decipher 2-col layout: art on left, puzzle on right */
.decipher-layout{
  display:grid;
  grid-template-columns:minmax(220px, 320px) 1fr;
  gap:36px;
  align-items:start;
  margin-top:30px;
}
@media (max-width:780px){
  .decipher-layout{
    grid-template-columns:1fr;
    gap:24px;
  }
}

.decipher-section-wrap .decipher{
  margin:0;
  max-width:560px;
}

/* puzzle-art frame */
.puzzle-art{
  margin:0;
  display:flex;flex-direction:column;
  gap:14px;
}
.puzzle-art-frame{
  position:relative;
  background:#0a0a0a;
  padding:14px 14px 14px;
  border:1px solid var(--ink-3);
  box-shadow:
    0 22px 50px -12px rgba(0,0,0,.85),
    0 0 0 1px rgba(255,255,255,.03) inset;
  transform:rotate(-1.6deg);
  transition:transform .4s cubic-bezier(.18,.89,.32,1.28);
}
.puzzle-art-frame:hover{
  transform:rotate(0deg) scale(1.02);
}
.puzzle-art-frame::before,.puzzle-art-frame::after{
  content:"";position:absolute;
  width:14px;height:14px;
  border:1px solid var(--ink-2);
}
.puzzle-art-frame::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.puzzle-art-frame::after{bottom:-1px;right:-1px;border-left:none;border-top:none}

.puzzle-art-frame img{
  display:block;
  width:100%;
  height:auto;
  filter:contrast(1.08) brightness(.92) saturate(.78);
  border:1px solid var(--ink-4);
}
.puzzle-art-grain{
  position:absolute;inset:14px;
  pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .2 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  mix-blend-mode:overlay;
  opacity:.55;
}
/* tape effect on opposite corners */
.puzzle-art-tape{
  position:absolute;
  width:54px;height:18px;
  background:rgba(232,227,216,.18);
  border:1px solid rgba(232,227,216,.18);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  pointer-events:none;
}
.puzzle-art-tape-tl{top:-9px;left:18px;transform:rotate(-22deg)}
.puzzle-art-tape-br{bottom:-9px;right:18px;transform:rotate(-22deg)}

.puzzle-art figcaption{
  display:flex;flex-direction:column;
  gap:6px;
  padding:0 6px;
}
.art-num{
  font-family:'Cinzel',serif;font-weight:500;font-size:9px;
  letter-spacing:.42em;text-transform:uppercase;
  color:var(--ink-3);margin-left:.42em;
}
.art-quote{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:14px;color:var(--ink);
  line-height:1.45;
  border-left:1px solid var(--ink-3);
  padding-left:10px;
}
.art-cred{
  font-family:'JetBrains Mono',monospace;font-weight:300;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-4);
  margin-top:2px;
}

.decipher{
  margin:18px 0 22px;
  padding:22px 20px 18px;
  border:1px solid var(--ink-4);
  background:rgba(0,0,0,.45);
  position:relative;
}
.decipher::before,.decipher::after{
  content:"";
  position:absolute;
  width:10px;height:10px;
  border:1px solid var(--ink-3);
}
.decipher::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.decipher::after{bottom:-1px;right:-1px;border-left:none;border-top:none}

.decipher-head{
  display:flex;align-items:center;gap:10px;
  margin-bottom:16px;
}
.d-line{
  flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--ink-4),transparent);
}
.d-title{
  font-family:'Cinzel',serif;
  font-weight:500;
  font-size:9.5px;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin-left:.42em;
  white-space:nowrap;
}

.d-glyphs{
  display:flex;justify-content:center;gap:7px;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.d-glyph{
  width:36px;height:44px;
  display:flex;align-items:center;justify-content:center;
  font-family:'UnifrakturCook','Pirata One',serif;
  font-weight:700;
  font-size:24px;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--ink-4);
  border-bottom:1px solid var(--ink-2);
  position:relative;
  transition:all .3s cubic-bezier(.18,.89,.32,1.28);
  text-shadow:0 0 12px rgba(232,227,216,.25);
}
.d-glyph.glow{
  border-color:var(--ink);
  color:#fff;
  text-shadow:0 0 18px var(--ink), 0 0 32px rgba(232,227,216,.5);
  animation:glyphPulse 1.4s ease-in-out infinite;
}
@keyframes glyphPulse{
  0%,100%{transform:translateY(0);text-shadow:0 0 18px var(--ink)}
  50%{transform:translateY(-3px);text-shadow:0 0 26px #fff,0 0 40px var(--ink)}
}
.d-glyph .d-meaning{
  position:absolute;
  top:calc(100% + 5px);
  left:50%;transform:translateX(-50%);
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:11px;
  letter-spacing:.04em;
  color:var(--ink-3);
  white-space:nowrap;
  opacity:0;
  transition:opacity .5s ease;
  text-transform:lowercase;
  text-shadow:none;
}
.d-glyph.revealed .d-meaning{opacity:1}
.d-glyph.revealed{border-bottom-color:var(--ink)}

.d-input-wrap{
  display:flex;align-items:center;gap:8px;
  padding:9px 12px;
  background:#000;
  border:1px solid var(--ink-4);
  margin-bottom:11px;
  transition:border-color .25s;
}
.d-input-wrap:focus-within{border-color:var(--ink)}
.d-prompt{
  font-family:'JetBrains Mono',monospace;
  font-weight:300;color:var(--ink-2);
  font-size:14px;user-select:none;
}
.d-input{
  flex:1;background:transparent;border:none;outline:none;
  color:var(--ink);
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:16px;letter-spacing:.02em;
  caret-color:var(--ink);
}
.d-input::placeholder{color:var(--ink-3);font-style:italic}
.d-submit{
  background:transparent;
  border:1px solid var(--ink-4);
  color:var(--ink-2);
  font-family:'Cinzel',serif;
  font-weight:500;
  font-size:9.5px;
  letter-spacing:.32em;
  text-transform:uppercase;
  padding:7px 12px 7px 14px;
  transition:all .2s;
}
.d-submit:hover{border-color:var(--ink);color:var(--ink);background:rgba(232,227,216,.05)}
.d-submit:active{transform:scale(.96)}

.d-feedback{
  display:flex;justify-content:space-between;align-items:center;
  gap:10px;
  font-family:'JetBrains Mono',monospace;
  font-weight:300;font-size:10px;
  letter-spacing:.06em;color:var(--ink-3);
}
.d-status{flex:1;line-height:1.45}
.d-status.warm{color:var(--ink-2)}
.d-status.hot{color:var(--ink)}
.d-status.win{
  color:var(--ink);font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;
}
.d-status.shake{animation:shake .35s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{
  10%,90%{transform:translateX(-1px)}
  20%,80%{transform:translateX(2px)}
  30%,50%{transform:translateX(-3px)}
  40%,60%{transform:translateX(3px)}
}
.d-attempts{font-size:9px;letter-spacing:.2em;color:var(--ink-4);white-space:nowrap}

.d-reveal{
  margin-top:14px;text-align:center;
  font-family:'UnifrakturCook','Pirata One',serif;
  font-weight:700;font-size:0;
  color:var(--ink);letter-spacing:.04em;line-height:1.05;
  text-shadow:0 0 24px rgba(232,227,216,.4);
  opacity:0;max-height:0;overflow:hidden;
  transition:max-height .9s cubic-bezier(.16,1,.3,1), opacity .9s ease, font-size .9s ease;
}
.d-reveal.show{font-size:clamp(22px,5.5vw,30px);opacity:1;max-height:200px;margin-top:18px}
.d-reveal-line{display:block}
.d-reveal-line.italic{font-style:normal;color:var(--ink-2);margin-top:4px}

.decipher.solved{border-color:var(--ink-2);background:rgba(232,227,216,.04)}
.decipher.solved::before,.decipher.solved::after{border-color:var(--ink)}

/* gospel */
.gospel{
  display:none;text-align:center;
  padding:6px 4px 4px;
  animation:gospelIn 1.4s cubic-bezier(.16,1,.3,1) both;
}
.decipher.solved .gospel{display:block}
.decipher.solved .decipher-head,
.decipher.solved .d-glyphs,
.decipher.solved .d-input-wrap,
.decipher.solved .d-feedback,
.decipher.solved .d-reveal{display:none}
.gospel-mark{
  font-family:'Cormorant Garamond',serif;
  font-size:11px;letter-spacing:.55em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:14px;margin-left:.55em;
}
.gospel-line-1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(34px,8vw,54px);letter-spacing:.02em;line-height:.92;
  color:var(--red);
  text-shadow:
    0 0 28px var(--red-glow),
    0 0 60px rgba(184,24,24,.3),
    0 2px 14px rgba(0,0,0,.9);
  text-transform:lowercase;margin:0 0 4px;
}
.gospel-line-2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(22px,5.5vw,36px);letter-spacing:.04em;line-height:1;
  color:var(--ink-2);
  text-shadow:0 0 22px rgba(232,227,216,.3),0 2px 12px rgba(0,0,0,.9);
  text-transform:lowercase;margin:0;
}
.gospel-divider{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin:14px 0;color:var(--ink-3);
}
.gospel-divider span{font-size:14px;letter-spacing:.4em}
.gospel-divider::before,.gospel-divider::after{
  content:"";flex:0 0 50px;height:1px;
  background:linear-gradient(90deg,transparent,var(--ink-3),transparent);
}
.gospel-line-3{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;
  font-size:clamp(18px,4.5vw,24px);letter-spacing:.03em;
  color:var(--ink);margin:0;line-height:1.2;
  text-shadow:0 0 18px rgba(232,227,216,.35);
}
.gospel-foot{
  margin-top:18px;
  font-family:'Cinzel',serif;font-weight:500;font-size:9.5px;
  letter-spacing:.42em;text-transform:uppercase;
  color:var(--ink-3);margin-left:.42em;
}
@keyframes gospelIn{
  0%{opacity:0;transform:translateY(8px);filter:blur(6px)}
  100%{opacity:1;transform:translateY(0);filter:blur(0)}
}

/* WIN celebration — flash, shake, sparks, oversized gospel impact */
.win-flash{
  position:fixed;inset:0;z-index:9998;
  background:radial-gradient(ellipse at 50% 50%, #fff 0%, rgba(255,80,80,.85) 40%, rgba(0,0,0,0) 80%);
  pointer-events:none;
  mix-blend-mode:screen;
  animation:winFlash 1.4s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes winFlash{
  0%{opacity:0;transform:scale(.4)}
  10%{opacity:1}
  100%{opacity:0;transform:scale(1.6)}
}
.win-sparks{
  position:fixed;
  width:1px;height:1px;
  pointer-events:none;
  z-index:9997;
}
.win-spark{
  position:absolute;
  top:0;left:0;
  width:5px;height:5px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 12px #fff, 0 0 24px var(--red), 0 0 36px var(--red-glow);
  animation:sparkFly 1.8s cubic-bezier(.16,1,.3,1) forwards;
  transform:translate(-50%,-50%);
}
@keyframes sparkFly{
  0%{transform:translate(-50%,-50%) scale(1.4);opacity:1}
  60%{opacity:1}
  100%{transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 100px)) scale(.2);opacity:0}
}
.win-shake{animation:winShake .55s cubic-bezier(.36,.07,.19,.97)}
@keyframes winShake{
  10%,90%{transform:translate3d(-1px,0,0)}
  20%,80%{transform:translate3d(2px,0,0)}
  30%,50%,70%{transform:translate3d(-4px,0,0)}
  40%,60%{transform:translate3d(4px,0,0)}
}

/* gospel lines get oversized, slingshot reveal */
.decipher.solved .gospel-line-1{
  animation:gospelImpact 1.2s cubic-bezier(.34,1.56,.64,1) .25s both;
}
.decipher.solved .gospel-line-2{
  animation:gospelImpact 1.2s cubic-bezier(.34,1.56,.64,1) .55s both;
}
.decipher.solved .gospel-line-3{
  animation:gospelImpact 1s cubic-bezier(.16,1,.3,1) 1.1s both;
}
@keyframes gospelImpact{
  0%{
    transform:scale(2.2);
    opacity:0;
    filter:blur(24px) brightness(2.5);
    text-shadow:0 0 80px #fff,0 0 160px var(--red);
  }
  35%{
    opacity:1;
    filter:blur(0) brightness(1.2);
  }
  100%{
    transform:scale(1);
    opacity:1;
    filter:blur(0) brightness(1);
  }
}

/* a brief red bloom on the body */
.win-bloom{
  animation:winBloom 2.4s ease-out;
}
@keyframes winBloom{
  0%{box-shadow:inset 0 0 0 rgba(184,24,24,0)}
  10%{box-shadow:inset 0 0 240px rgba(184,24,24,.55)}
  100%{box-shadow:inset 0 0 0 rgba(184,24,24,0)}
}

/* alt readings */
.alt-readings{margin-top:24px;padding-top:18px;border-top:1px solid var(--ink-4)}
.alt-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.alt-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--ink-4),transparent)}
.alt-title{
  font-family:'Cinzel',serif;font-weight:500;font-size:9px;
  letter-spacing:.42em;text-transform:uppercase;color:var(--ink-3);
  margin-left:.42em;white-space:nowrap;
}
.alt-stage{position:relative;min-height:74px;display:flex;align-items:center;justify-content:center;padding:6px 4px}
.alt-card{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;opacity:0;transform:translateY(8px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.alt-card.active{opacity:1;transform:translateY(0);pointer-events:auto}
.alt-num{
  font-family:'Cinzel',serif;font-weight:500;font-size:9px;
  letter-spacing:.4em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:6px;margin-left:.4em;
}
.alt-text{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;
  font-size:clamp(14px,3.6vw,17px);letter-spacing:.01em;
  color:var(--ink);line-height:1.4;max-width:340px;
  text-shadow:0 0 14px rgba(232,227,216,.15);
}
.alt-dots{display:flex;justify-content:center;gap:6px;margin-top:12px}
.alt-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--ink-4);border:none;padding:0;
  transition:all .25s;cursor:none;
}
.alt-dot.active{
  background:var(--ink);width:18px;border-radius:3px;
  box-shadow:0 0 8px rgba(232,227,216,.5);
}

/* ============================================
   MANIFESTO
   ============================================ */
.manifesto{
  list-style:none;padding:0;margin:0;
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  max-width:780px;
}
.manifesto li{
  display:grid;
  grid-template-columns:80px 1fr;
  gap:24px;
  padding:24px 0;
  border-bottom:1px solid var(--ink-4);
  align-items:start;
}
.manifesto li:last-child{border-bottom:none}
.m-num{
  font-family:'Pirata One','UnifrakturCook',serif;
  font-size:clamp(34px,5vw,46px);
  color:var(--ink-3);
  line-height:1;
  text-align:right;
  letter-spacing:.04em;
  transition:color .3s;
}
.manifesto li:hover .m-num{
  color:var(--ink);
  text-shadow:0 0 16px rgba(232,227,216,.4);
}
.m-body h4{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;font-weight:500;
  font-size:clamp(20px,3vw,28px);
  margin:0 0 6px;color:var(--ink);
  letter-spacing:.01em;line-height:1.2;
}
.m-body p{
  font-family:'Cormorant Garamond',serif;
  font-weight:400;
  font-size:clamp(15px,2vw,17px);
  line-height:1.55;
  color:var(--ink-2);
  margin:0;max-width:520px;
}

@media (max-width:600px){
  .manifesto li{grid-template-columns:50px 1fr;gap:16px;padding:18px 0}
}

/* ============================================
   WORK
   ============================================ */
.work-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
@media (max-width:760px){.work-grid{grid-template-columns:1fr}}

/* discord-style mark for The Hideout — uses an inline SVG, not an image */
.work-mark-svg{
  background:#000;
  display:flex;align-items:center;justify-content:center;
  color:var(--w-color);
}
.work-mark-svg svg{
  width:60%;height:60%;
  filter:drop-shadow(0 0 8px var(--w-glow, rgba(255,255,255,.3)));
  transition:filter .25s, transform .25s;
}
.work-card:hover .work-mark-svg svg{
  filter:drop-shadow(0 0 14px var(--w-glow, rgba(255,255,255,.5)));
  transform:scale(1.06);
}

.work-card{
  position:relative;display:block;
  background:rgba(8,8,8,.5);
  border:1px solid var(--ink-4);
  padding:0;
  transition:all .3s cubic-bezier(.18,.89,.32,1.28);
  overflow:hidden;
}
.work-card::before,.work-card::after{
  content:"";position:absolute;
  width:12px;height:12px;
  border:1px solid var(--ink-3);
  transition:border-color .3s;
}
.work-card::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.work-card::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.work-card-inner{padding:26px 26px 22px}
.work-card:hover{
  background:rgba(232,227,216,.04);
  border-color:var(--ink-2);
  transform:translateY(-4px);
  box-shadow:0 14px 30px -10px rgba(232,227,216,.2);
}
.work-card:hover::before,.work-card:hover::after{border-color:var(--ink)}
.work-card-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:18px;
}
.work-mark{
  width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  font-family:'UnifrakturCook',serif;font-weight:700;font-size:26px;
  color:var(--ink);
  border:1px solid var(--ink-3);
  background:#000;
  text-shadow:0 0 16px rgba(232,227,216,.4);
}
.work-status{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'JetBrains Mono',monospace;font-weight:300;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);
  padding:4px 9px;
  border:1px solid var(--ink-4);
}
.work-status .dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--ink);box-shadow:0 0 6px var(--ink);
  animation:dotPulse 2.4s ease-in-out infinite;
}
.work-card h3{
  font-family:var(--display);
  font-weight:400;font-size:clamp(34px,5.5vw,46px);
  margin:0 0 4px;letter-spacing:.02em;line-height:.95;
  color:var(--w-color, var(--red));text-transform:lowercase;
  text-shadow:
    0 0 22px var(--w-glow, var(--red-glow)),
    0 2px 12px rgba(0,0,0,.9);
}
.work-card.landonkone{ --w-color: var(--lime);   --w-glow: var(--lime-glow); }
.work-card.chartix   { --w-color: var(--blue);   --w-glow: var(--blue-glow); }
.work-card.hideout   { --w-color: var(--violet); --w-glow: var(--violet-glow); }
.work-card.indicators{ --w-color: var(--gold);   --w-glow: var(--gold-glow); }
.work-card.landonkone .work-mark,
.work-card.chartix .work-mark,
.work-card.hideout .work-mark,
.work-card.indicators .work-mark{
  color:var(--w-color);
  border-color:color-mix(in srgb, var(--w-color) 60%, var(--ink-3));
  text-shadow:0 0 16px var(--w-glow);
}
.work-mark-img{
  padding:5px;
  background:#000;
  box-shadow:0 0 18px var(--w-glow, transparent) inset;
}
.work-mark-img img{
  width:100%;height:100%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 0 6px var(--w-glow, rgba(255,255,255,.2)));
  transition:filter .25s, transform .25s;
}
.work-card:hover .work-mark-img img{
  filter:drop-shadow(0 0 12px var(--w-glow, rgba(255,255,255,.4)));
  transform:scale(1.06);
}
.work-card.landonkone:hover,
.work-card.chartix:hover,
.work-card.hideout:hover,
.work-card.indicators:hover{
  border-color:color-mix(in srgb, var(--w-color) 50%, var(--ink-2));
  box-shadow:0 14px 30px -10px var(--w-glow);
}
.work-card.landonkone:hover::before,.work-card.landonkone:hover::after,
.work-card.chartix:hover::before,.work-card.chartix:hover::after,
.work-card.hideout:hover::before,.work-card.hideout:hover::after,
.work-card.indicators:hover::before,.work-card.indicators:hover::after{
  border-color:var(--w-color);
}
.work-card.landonkone:hover .work-arrow,
.work-card.chartix:hover .work-arrow,
.work-card.hideout:hover .work-arrow,
.work-card.indicators:hover .work-arrow{
  color:var(--w-color);
  border-bottom-color:var(--w-color);
}
.work-tagline{
  font-family:'Cinzel',serif;font-weight:500;font-size:9.5px;
  letter-spacing:.32em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 18px;margin-left:.32em;
}
.work-desc{
  font-family:'Cormorant Garamond',serif;font-weight:400;
  font-size:16px;line-height:1.55;
  color:var(--ink-2);margin:0 0 18px;
}
.work-desc b{color:var(--ink);font-weight:500}
.work-tags{
  display:flex;flex-wrap:wrap;gap:5px;
  margin-bottom:20px;
}
.work-tags span{
  font-family:'Cinzel',serif;font-weight:500;font-size:8.5px;
  letter-spacing:.28em;text-transform:uppercase;
  padding:4px 8px 4px 10px;
  border:1px solid var(--ink-4);
  color:var(--ink-3);
}
.work-arrow{
  display:inline-block;
  font-family:'Cinzel',serif;font-weight:500;font-size:10px;
  letter-spacing:.32em;text-transform:uppercase;
  color:var(--ink-2);
  border-bottom:1px solid var(--ink-3);
  padding-bottom:3px;margin-left:.32em;
  transition:all .25s;
}
.work-card:hover .work-arrow{
  color:var(--ink);
  border-bottom-color:var(--ink);
  letter-spacing:.4em;
}

/* "by DK PROJX" parent chip on work cards */
.parent-chip{
  font-family:'Cinzel',serif;
  font-weight:500;
  font-size:8.5px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ink-3);
  padding:3px 8px 3px 10px;
  border:1px solid var(--ink-4);
  margin-right:8px;
}

/* ============================================
   WATCH — video player (coming soon)
   ============================================ */
.video-player{
  max-width:740px;
  margin:0 auto;
  cursor:none;
}
.vp-frame{
  position:relative;
  aspect-ratio:16/9;
  border:1px solid var(--ink-3);
  background:#000;
  overflow:hidden;
  box-shadow:0 24px 60px -16px rgba(0,0,0,.85);
}
.vp-frame::before,.vp-frame::after{
  content:"";position:absolute;
  width:14px;height:14px;
  border:1px solid var(--ink-2);
  z-index:3;
  transition:border-color .3s;
}
.vp-frame::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.vp-frame::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.video-player:hover .vp-frame::before,
.video-player:hover .vp-frame::after{border-color:var(--red)}

.vp-thumb{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
}
.vp-thumb img{
  width:100%;height:100%;
  object-fit:cover;
  filter:contrast(1.05) brightness(.4) saturate(.7);
  transform:scale(1.05);
  transition:filter .35s, transform .6s;
}
.video-player:hover .vp-thumb img{
  filter:contrast(1.1) brightness(.55) saturate(.8);
  transform:scale(1);
}
.vp-overlay{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, transparent, rgba(0,0,0,.65) 80%),
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.025) 2px 3px);
}
.vp-play{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:96px;height:96px;
  border-radius:50%;
  background:rgba(0,0,0,.6);
  border:1.5px solid var(--ink);
  color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  z-index:2;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:all .3s cubic-bezier(.18,.89,.32,1.28);
}
.vp-play svg{margin-left:6px;transition:transform .25s}
.vp-play::before{
  content:"";
  position:absolute;inset:-8px;
  border:1px solid var(--ink-3);
  border-radius:50%;
  animation:vpRing 2.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes vpRing{
  0%,100%{transform:scale(1);opacity:.6}
  50%{transform:scale(1.12);opacity:0}
}
.video-player:hover .vp-play{
  background:var(--red);
  border-color:var(--red);
  color:#fff;
  box-shadow:0 0 30px var(--red-glow);
}
.video-player:hover .vp-play svg{transform:scale(1.1)}

.vp-meta{
  position:absolute;
  bottom:14px;left:16px;right:16px;
  z-index:2;
  display:flex;justify-content:space-between;align-items:end;
  font-family:'Cinzel',serif;
  font-weight:500;
  font-size:10px;
  letter-spacing:.32em;
  color:var(--ink-2);
}
.vp-len{
  font-family:'JetBrains Mono',monospace;
  font-weight:300;
  font-size:11px;
  letter-spacing:.06em;
  color:var(--ink-3);
}

/* coming soon overlay */
.vp-soon{
  position:absolute;inset:0;
  z-index:5;
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;
  text-align:center;
  padding:30px;
  opacity:0;
  pointer-events:none;
  transition:opacity .55s cubic-bezier(.16,1,.3,1);
}
.video-player.soon-on .vp-soon{
  opacity:1;
  pointer-events:auto;
}
.vp-soon-mark{
  font-family:'Cinzel',serif;
  font-weight:500;
  font-size:10px;
  letter-spacing:.5em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-left:.5em;
  opacity:0;transform:translateY(8px);
  transition:opacity .6s ease .1s, transform .6s ease .1s;
}
.vp-soon-title{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(40px, 7vw, 64px);
  color:var(--red);
  text-shadow:
    0 0 26px var(--red-glow),
    0 0 60px rgba(184,24,24,.3);
  letter-spacing:.02em;
  text-transform:lowercase;
  line-height:.95;
  opacity:0;transform:translateY(12px) scale(.96);filter:blur(8px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1) .25s, transform .8s cubic-bezier(.16,1,.3,1) .25s, filter .8s ease .25s;
  animation:vpFlicker 4s ease-in-out infinite 1.2s;
}
@keyframes vpFlicker{
  0%,100%{opacity:1}
  47%{opacity:1}
  48%{opacity:.45}
  49%{opacity:1}
  73%{opacity:1}
  74%{opacity:.65}
  75%{opacity:1}
}
.vp-soon-sub{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:14px;
  color:var(--ink-2);
  opacity:0;transform:translateY(6px);
  transition:opacity .6s ease .55s, transform .6s ease .55s;
}
.vp-soon-bar{
  width:min(280px, 80%);
  height:2px;
  background:var(--ink-4);
  overflow:hidden;
  margin-top:6px;
  opacity:0;
  transition:opacity .6s ease .8s;
}
.vp-soon-bar-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg, transparent, var(--red), transparent);
  transition:none;
}
.video-player.soon-on .vp-soon-mark{opacity:1;transform:translateY(0)}
.video-player.soon-on .vp-soon-title{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
.video-player.soon-on .vp-soon-sub{opacity:1;transform:translateY(0)}
.video-player.soon-on .vp-soon-bar{opacity:1}
.video-player.soon-on .vp-soon-bar-fill{
  width:100%;
  transition:width 2.4s cubic-bezier(.4,0,.2,1) 1s;
}

.vp-close{
  position:absolute;
  top:14px;right:14px;
  width:32px;height:32px;
  background:transparent;
  border:1px solid var(--ink-4);
  color:var(--ink-3);
  font-family:'Cormorant Garamond',serif;
  font-size:22px;
  line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:all .25s;
}
.vp-close:hover{
  border-color:var(--ink);
  color:var(--ink);
}

/* ============================================
   SHOUTOUTS / RESPECT
   ============================================ */
.shoutouts-section{text-align:center}
.shoutouts-section .section-eyebrow{justify-content:center;margin-left:0}
.shoutouts-section .section-eyebrow::after{display:none}
.shoutouts-section .section-sub{margin-left:auto;margin-right:auto}

.shoutouts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:14px;
  max-width:880px;
  margin:0 auto;
}
.shoutout-card{
  display:grid;
  grid-template-columns:46px 1fr auto;
  align-items:center;gap:14px;
  padding:16px 18px 16px 14px;
  border:1px solid var(--ink-4);
  background:rgba(8,8,8,.4);
  text-align:left;
  color:var(--ink-2);
  transition:all .25s cubic-bezier(.18,.89,.32,1.28);
}
a.shoutout-card:hover{
  background:rgba(232,227,216,.04);
  border-color:var(--so-color, var(--ink-2));
  transform:translateY(-2px);
  color:var(--ink);
  box-shadow:0 10px 22px -8px var(--so-glow, transparent);
}
a.shoutout-card:hover .so-arrow{transform:translateX(4px);color:var(--so-color, var(--ink))}
.shoutout-card.golden  { --so-color:#ffd24a; --so-glow:rgba(255,210,74,.3) }
.shoutout-card.dkprojx { --so-color:#3affe5; --so-glow:rgba(58,255,229,.3) }
.shoutout-card.malick  { --so-color:var(--ink-2) }

.so-mark{
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);
  font-weight:400;font-size:24px;
  color:var(--so-color, var(--ink));
  background:#000;
  border:1px solid color-mix(in srgb, var(--so-color, var(--ink-3)) 50%, var(--ink-3));
  text-shadow:0 0 14px var(--so-glow, transparent);
}
.so-info{min-width:0}
.so-name{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-weight:500;
  font-size:18px;
  color:var(--ink);
  line-height:1.1;
  margin-bottom:2px;
}
.so-role{
  font-family:'JetBrains Mono',monospace;
  font-weight:300;
  font-size:10px;
  letter-spacing:.08em;
  color:var(--ink-3);
}
.so-arrow{
  font-family:'Cormorant Garamond',serif;
  font-size:18px;color:var(--ink-3);
  transition:transform .25s, color .25s;
}

/* ============================================
   PAYOUTS
   ============================================ */
.payouts-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
@media (max-width:820px){.payouts-grid{grid-template-columns:1fr}}

.payout-card{
  position:relative;
  padding:24px 22px 20px;
  border:1px solid var(--ink-4);
  background:rgba(8,8,8,.5);
  display:flex;flex-direction:column;
  gap:14px;
  transition:all .3s cubic-bezier(.18,.89,.32,1.28);
}
.payout-card::before,.payout-card::after{
  content:"";position:absolute;
  width:10px;height:10px;
  border:1px solid var(--ink-3);
  transition:border-color .3s;
}
.payout-card::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.payout-card::after{bottom:-1px;right:-1px;border-left:none;border-top:none}

.payout-card.mffu   { --p-color:#3aff9d; --p-glow:rgba(58,255,157,.55); }
.payout-card.lucid  { --p-color:#7a3aff; --p-glow:rgba(122,58,255,.55); }
.payout-card.topstep{ --p-color:#ff7a3a; --p-glow:rgba(255,122,58,.55); }

.payout-card:hover{
  background:rgba(232,227,216,.04);
  border-color:color-mix(in srgb, var(--p-color) 50%, var(--ink-2));
  transform:translateY(-3px);
  box-shadow:0 14px 30px -10px var(--p-glow);
}
.payout-card:hover::before,.payout-card:hover::after{border-color:var(--p-color)}

.payout-firm{
  display:flex;align-items:center;gap:11px;
}
.payout-firm-mark{
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);
  font-weight:400;font-size:22px;
  color:var(--p-color);
  background:#000;
  border:1px solid color-mix(in srgb, var(--p-color) 50%, var(--ink-3));
  text-shadow:0 0 14px var(--p-glow);
}
.payout-firm-name{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-weight:500;
  font-size:18px;
  color:var(--ink);
  line-height:1.1;
  display:flex;flex-direction:column;
  gap:2px;
}
.payout-firm-name span{
  font-family:'Cinzel',serif;
  font-style:normal;
  font-weight:500;
  font-size:9px;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-left:.4em;
}
.payout-amount{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(36px, 5vw, 48px);
  color:var(--p-color);
  line-height:.95;
  letter-spacing:.02em;
  text-shadow:
    0 0 22px var(--p-glow),
    0 2px 12px rgba(0,0,0,.9);
}
.payout-meta{
  display:flex;flex-wrap:wrap;gap:8px;
  font-family:'JetBrains Mono',monospace;
  font-weight:300;
  font-size:11px;
  letter-spacing:.06em;
  color:var(--ink-3);
}
.payout-meta b{color:var(--ink-2);font-weight:500}
.payout-status{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:auto;
  padding-top:10px;
  border-top:1px solid var(--ink-4);
  font-family:'Cinzel',serif;
  font-weight:500;
  font-size:9px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin-left:.32em;
}
.payout-status .dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--p-color);
  box-shadow:0 0 6px var(--p-color);
  animation:dotPulse 2.4s ease-in-out infinite;
}
.payouts-foot{
  margin:30px auto 0;
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:14px;
  color:var(--ink-3);
  text-align:center;
  max-width:520px;
}

/* ============================================
   AUDIO-PAUSED — freeze rotations when music stops
   ============================================ */
body:not(.audio-playing) .hero-pfp-ring,
body:not(.audio-playing) .spinner-left,
body:not(.audio-playing) .spinner-right,
body:not(.audio-playing) .bg-sigil-center,
body:not(.audio-playing) .vinyl-disc,
body:not(.audio-playing) .ayah-arabic,
body:not(.audio-playing) .sigil-display{
  animation-play-state:paused !important;
}

/* ============================================
   AYAH — Quranic verse interlude
   ============================================ */
.ayah-section{
  max-width:760px;
  margin:0 auto;
  padding:60px var(--pad);
  text-align:center;
}
.ayah-frame{
  position:relative;
  padding:46px 32px 38px;
  border:1px solid var(--ink-3);
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(232,227,216,.04), transparent 70%),
    rgba(0,0,0,.5);
  display:flex;flex-direction:column;
  align-items:center;
  gap:18px;
}
.ayah-corner{
  position:absolute;
  width:18px;height:18px;
  border:1.5px solid var(--ink-2);
}
.ayah-corner-tl{top:-2px;left:-2px;border-right:none;border-bottom:none}
.ayah-corner-tr{top:-2px;right:-2px;border-left:none;border-bottom:none}
.ayah-corner-bl{bottom:-2px;left:-2px;border-right:none;border-top:none}
.ayah-corner-br{bottom:-2px;right:-2px;border-left:none;border-top:none}

.ayah-mark{
  font-family:'Cinzel',serif;
  font-weight:500;
  font-size:10px;
  letter-spacing:.5em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-left:.5em;
}
.ayah-arabic{
  font-family:'Amiri', serif;
  font-weight:400;
  font-size:clamp(24px, 4vw, 40px);
  color:#ffffff;
  line-height:1.7;
  margin:0;
  text-shadow:
    0 0 26px rgba(232,227,216,.35),
    0 0 60px rgba(232,227,216,.15);
  direction:rtl;
}
.ayah-en{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(15px, 2vw, 18px);
  color:var(--ink-2);
  margin:0;
  max-width:480px;
  line-height:1.5;
}
.ayah-ref{
  font-family:'Cinzel',serif;
  font-weight:500;
  font-size:9.5px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-top:6px;
  margin-left:.32em;
  padding-top:14px;
  border-top:1px solid var(--ink-4);
  width:60%;
}

/* ============================================
   SOUND
   ============================================ */
.sound-display{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:36px;align-items:center;
  padding:36px;
  border:1px solid var(--ink-4);
  background:rgba(8,8,8,.4);
  position:relative;
}
.sound-display::before,.sound-display::after{
  content:"";position:absolute;width:12px;height:12px;
  border:1px solid var(--ink-3);
}
.sound-display::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.sound-display::after{bottom:-1px;right:-1px;border-left:none;border-top:none}

.vinyl{
  position:relative;
  width:160px;height:160px;
  flex-shrink:0;
}
.vinyl-disc{
  position:absolute;inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, var(--ink) 14%, #000 15%, #000 18%, transparent 19%),
    repeating-radial-gradient(circle at 50% 50%, rgba(232,227,216,.05) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 30% 30%, #2a2622, #000 70%);
  border:1px solid var(--ink-3);
  animation:spin 8s linear infinite;
  box-shadow:0 0 30px rgba(232,227,216,.2),0 0 0 1px rgba(255,255,255,.05) inset;
}
@keyframes spin{to{transform:rotate(360deg)}}
.vinyl-grooves{position:absolute;inset:0;border-radius:50%;pointer-events:none}
.vinyl-label{
  position:absolute;top:50%;left:50%;
  width:42%;height:42%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:linear-gradient(135deg, #2a1a14, #4a2a1a);
  border:1px solid var(--ink-3);
}
.vinyl-arm{
  position:absolute;
  top:-18px;right:-22px;
  width:90px;height:8px;
  background:linear-gradient(90deg, var(--ink-3), var(--ink-2));
  transform-origin:90px 4px;
  transform:rotate(-28deg);
  border-radius:4px 0 0 4px;
}
.vinyl-arm::after{
  content:"";
  position:absolute;
  left:-6px;top:50%;transform:translateY(-50%);
  width:8px;height:14px;
  background:var(--ink-2);
}

.sound-info{min-width:0}
.sound-label{
  font-family:'Cinzel',serif;font-weight:500;font-size:9.5px;
  letter-spacing:.42em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:6px;margin-left:.42em;
}
.sound-track{
  font-family:var(--display);
  font-weight:400;font-size:clamp(38px,5.5vw,52px);
  color:var(--red);margin-bottom:4px;line-height:.95;
  letter-spacing:.02em;text-transform:lowercase;
  text-shadow:
    0 0 26px var(--red-glow),
    0 2px 12px rgba(0,0,0,.9);
}
.sound-artist{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:16px;color:var(--ink-2);
  margin-bottom:10px;
}
.sound-artist a{
  color:var(--ink);
  border-bottom:1px solid var(--ink-3);
  padding-bottom:1px;
  transition:border-color .25s;
}
.sound-artist a:hover{border-bottom-color:var(--ink)}
.sound-meta{
  display:flex;flex-wrap:wrap;gap:8px;
  font-family:'JetBrains Mono',monospace;font-weight:300;font-size:11px;
  letter-spacing:.06em;color:var(--ink-3);
  margin-bottom:14px;
}
.sound-quote{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:14px;color:var(--ink-2);
  border-left:1px solid var(--ink-3);
  padding-left:12px;
  line-height:1.5;
  max-width:440px;
}

@media (max-width:640px){
  .sound-display{grid-template-columns:1fr;gap:24px;padding:24px;text-align:center}
  .vinyl{margin:0 auto}
  .sound-quote{border-left:none;border-top:1px solid var(--ink-3);padding-left:0;padding-top:10px;margin:0 auto}
}

/* ============================================
   CONNECT
   ============================================ */
.connect-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:12px;
}
.connect-card{
  display:grid;
  grid-template-columns:48px 1fr auto;
  gap:14px;align-items:center;
  padding:14px 18px 14px 14px;
  border:1px solid var(--ink-4);
  border-left:1px solid var(--ink-3);
  background:rgba(8,8,8,.4);
  transition:all .25s cubic-bezier(.18,.89,.32,1.28);
  color:var(--ink-2);
}
.connect-card:hover{
  background:rgba(232,227,216,.04);
  border-color:var(--ink-2);
  border-left-color:var(--ink);
  transform:translateX(4px);
  color:var(--ink);
}
.connect-card.primary{
  background:rgba(232,227,216,.04);
  border-color:var(--ink-3);
  border-left-color:var(--ink);
}
.cc-icon{
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  background:#000;
  border:1px solid var(--ink-4);
  color:var(--ink-2);
  transition:color .25s, border-color .25s;
}
.connect-card:hover .cc-icon{color:var(--ink);border-color:var(--ink-3)}
.cc-info{min-width:0}
.cc-name{
  font-family:'Cinzel',serif;font-weight:500;font-size:11px;
  letter-spacing:.32em;text-transform:uppercase;
  color:var(--ink);margin-bottom:2px;margin-left:.32em;
}
.cc-handle{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:14px;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cc-arrow{
  font-family:'Cormorant Garamond',serif;
  font-size:18px;color:var(--ink-3);
  transition:transform .25s, color .25s;
}
.connect-card:hover .cc-arrow{transform:translateX(4px);color:var(--ink)}

/* ============================================
   SIGNAL — contact form (centered)
   ============================================ */
.signal-section{text-align:center}
.signal-section .section-eyebrow{justify-content:center;margin-left:0}
.signal-section .section-eyebrow::after{display:none}
.signal-section .section-sub{margin-left:auto;margin-right:auto}

.signal-form{
  max-width:680px;
  margin:0 auto;
  display:flex;flex-direction:column;
  gap:18px;
  padding:30px 28px;
  border:1px solid var(--ink-4);
  background:rgba(8,8,8,.45);
  position:relative;
  text-align:left;
}
.signal-form::before,.signal-form::after{
  content:"";position:absolute;
  width:14px;height:14px;
  border:1px solid var(--ink-3);
}
.signal-form::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.signal-form::after{bottom:-1px;right:-1px;border-left:none;border-top:none}

.sf-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media (max-width:540px){.sf-row{grid-template-columns:1fr}}

.sf-field{
  display:flex;flex-direction:column;
  gap:6px;
}
.sf-field label{
  font-family:'Cinzel',serif;
  font-weight:500;
  font-size:9.5px;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-left:.4em;
}
.sf-field input,
.sf-field select,
.sf-field textarea{
  width:100%;
  background:#000;
  border:1px solid var(--ink-4);
  color:#ffffff;
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:16px;
  letter-spacing:.01em;
  padding:11px 13px;
  outline:none;
  transition:border-color .25s, background .25s;
  caret-color:#ffffff;
  border-radius:0;
  appearance:none;
  -webkit-appearance:none;
}
.sf-field input::placeholder,
.sf-field textarea::placeholder{color:rgba(255,255,255,.4);font-style:italic}
.sf-field input:focus,
.sf-field select:focus,
.sf-field textarea:focus{
  border-color:#ffffff;
  background:#050505;
}
.sf-field label{color:#ffffff}
.sf-field select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><polyline points='1,1 6,6 11,1' fill='none' stroke='%239a9389' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 13px center;
  padding-right:32px;
}
.sf-field textarea{
  font-family:'Cormorant Garamond',serif;
  resize:vertical;
  min-height:120px;
  line-height:1.55;
}

.sf-foot{
  display:flex;justify-content:center;align-items:center;
  flex-wrap:wrap;
  flex-direction:column;
  gap:12px;
  margin-top:8px;
}
.sf-submit{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Cinzel',serif;
  font-weight:500;
  font-size:11px;
  letter-spacing:.4em;
  text-transform:uppercase;
  padding:14px 22px 14px 26px;
  background:var(--ink);
  color:#000;
  border:1px solid var(--ink);
  transition:all .25s cubic-bezier(.18,.89,.32,1.28);
}
.sf-submit:hover:not(:disabled){
  background:#fff;
  border-color:#fff;
  transform:translateY(-2px);
  box-shadow:0 10px 22px -8px rgba(232,227,216,.5);
}
.sf-submit:active{transform:scale(.97)}
.sf-submit:disabled{opacity:.6;cursor:none}
.sf-submit-arrow{
  font-family:'Cormorant Garamond',serif;
  font-size:16px;font-weight:300;letter-spacing:0;
  transition:transform .25s;
}
.sf-submit:hover .sf-submit-arrow{transform:translateX(4px)}

.sf-tip{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:13px;
  color:var(--ink-3);
}
.sf-tip a{
  color:var(--ink-2);
  border-bottom:1px solid var(--ink-3);
  padding-bottom:1px;
  transition:color .25s, border-color .25s;
}
.sf-tip a:hover{color:var(--ink);border-color:var(--ink)}

.sf-status{
  display:none;
  font-family:'JetBrains Mono',monospace;
  font-weight:300;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:10px 14px;
  border:1px solid var(--ink-4);
}
.sf-status.show{display:block}
.sf-status.ok{
  color:var(--ink);
  border-color:var(--ink-2);
  background:rgba(232,227,216,.04);
}
.sf-status.err{
  color:#ff8888;
  border-color:rgba(255,80,80,.4);
  background:rgba(255,40,40,.06);
}

.signal-form.sent{
  background:rgba(232,227,216,.04);
  border-color:var(--ink-2);
}
.signal-form.sent::before,.signal-form.sent::after{border-color:var(--ink)}

/* ============================================
   FOOTER
   ============================================ */
.site-foot{
  max-width:var(--max);
  margin:60px auto 0;
  padding:50px var(--pad) 130px;
  border-top:1px solid var(--ink-4);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:30px;align-items:center;
}
.foot-sigil img{
  width:60px;height:auto;
  filter:invert(1) brightness(.8);
  opacity:.5;
}
.foot-cols{
  display:grid;
  grid-template-columns:1fr auto;
  gap:30px;align-items:center;
}
.foot-mark{
  font-family:var(--display);
  font-weight:400;font-size:30px;
  color:var(--red);margin-bottom:4px;
  letter-spacing:.02em;
  text-shadow:0 0 18px var(--red-glow);
  line-height:1;
}
.foot-handle{
  font-family:'Cinzel',serif;font-weight:500;font-size:9px;
  letter-spacing:.32em;text-transform:uppercase;
  color:var(--ink-3);margin-left:.32em;
}
.foot-quote-col{
  display:flex;flex-direction:column;gap:8px;
  text-align:right;
}
.foot-quote{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:15px;color:var(--ink-2);
}
.foot-cred{
  font-family:'JetBrains Mono',monospace;font-weight:300;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-4);
}
.foot-credit-link{
  color:var(--lime);
  border-bottom:1px solid color-mix(in srgb, var(--lime) 40%, var(--ink-4));
  padding-bottom:1px;
  text-shadow:0 0 10px var(--lime-glow);
  transition:border-color .25s, text-shadow .25s;
}
.foot-credit-link:hover{
  border-bottom-color:var(--lime);
  text-shadow:0 0 16px var(--lime-glow);
}
@media (max-width:640px){
  .site-foot{grid-template-columns:1fr;text-align:center;gap:20px;padding-bottom:140px}
  .foot-sigil{margin:0 auto}
  .foot-cols{grid-template-columns:1fr;gap:14px}
  .foot-quote-col{text-align:center}
}

/* ============================================
   Audio player widget — fixed bottom right
   ============================================ */
.player{
  position:fixed;
  bottom:18px;right:18px;
  z-index:50;
  width:min(440px,calc(100% - 36px));
  display:grid;
  grid-template-columns:50px 1fr auto;
  gap:13px;align-items:center;
  padding:10px 14px 10px 10px;
  background:rgba(0,0,0,.85);
  backdrop-filter:blur(20px) saturate(110%);
  -webkit-backdrop-filter:blur(20px) saturate(110%);
  border:1px solid var(--line);
  transform:translateY(140%);
  transition:transform .9s cubic-bezier(.16,1,.3,1) .8s, border-color .25s;
  touch-action:pan-y;
  overflow:hidden;
}
.player.swiping{cursor:grabbing}
.player.swipe-left  .player-info{transform:translateX(-12px);transition:transform .25s ease-out}
.player.swipe-right .player-info{transform:translateX(12px);transition:transform .25s ease-out}
.player.swiped{
  border-color:var(--red);
  box-shadow:0 0 0 1px var(--red), 0 12px 30px -10px var(--red-glow);
}
.player.swiped::after{
  content:attr(data-swipe-dir);
  position:absolute;top:50%;
  font-family:var(--display);
  font-size:38px;
  color:var(--red);
  opacity:.55;
  pointer-events:none;
  transform:translateY(-50%);
  text-shadow:0 0 18px var(--red-glow);
  animation:swipeFlash .5s ease-out;
}
.player.swiped[data-swipe-dir="→"]::after{right:14px}
.player.swiped[data-swipe-dir="←"]::after{left:14px}
@keyframes swipeFlash{
  0%{opacity:0;transform:translateY(-50%) scale(.6)}
  60%{opacity:.7}
  100%{opacity:0;transform:translateY(-50%) scale(1.1)}
}
.player-swipe-hint{display:none}
.site.entered ~ .player,
body.entered .player{transform:translateY(0)}

.player-art{
  position:relative;width:50px;height:50px;
  border-radius:50%;overflow:hidden;flex-shrink:0;
  background:#000;border:1px solid var(--ink-4);
}
.player-art-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.art-disc{
  width:36px;height:36px;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, #000 18%, transparent 19%),
    repeating-radial-gradient(circle at 50% 50%, rgba(232,227,216,.08) 0 1px, transparent 1px 2px),
    #050505;
  border:1px solid var(--ink-4);
  animation:spin 6s linear infinite;animation-play-state:paused;
}
.player.playing .art-disc{animation-play-state:running}
.art-shine{
  position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(232,227,216,.15) 0%, transparent 50%);
  pointer-events:none;
}
.player-info{min-width:0;display:flex;flex-direction:column;gap:3px}
.player-marquee{
  overflow:hidden;position:relative;
  mask-image:linear-gradient(90deg,transparent 0,#000 8px,#000 calc(100% - 8px),transparent 100%);
}
.player-track{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;
  font-size:14px;white-space:nowrap;color:var(--ink);
  animation:marquee 18s linear infinite;animation-play-state:paused;
}
.player.playing .player-track{animation-play-state:running}
@keyframes marquee{
  0%{transform:translateX(0)}
  10%{transform:translateX(0)}
  100%{transform:translateX(-100%)}
}
.player-sub{
  font-family:'Cinzel',serif;font-weight:500;font-size:9px;
  letter-spacing:.4em;text-transform:uppercase;
  color:var(--ink-3);margin-left:.4em;
}
.player-progress{
  height:1px;background:var(--ink-4);overflow:hidden;margin-top:6px;
}
.player-progress-fill{
  height:100%;width:0%;background:var(--ink);
  transition:width .25s linear;box-shadow:0 0 6px rgba(232,227,216,.5);
}
.player-times{
  display:flex;justify-content:space-between;
  font-family:'JetBrains Mono',monospace;font-weight:300;font-size:9px;
  color:var(--ink-3);margin-top:3px;
}
.player-ctrls{display:flex;align-items:center;gap:6px}
.ctrl-btn{
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--ink-4);color:var(--ink-2);
  transition:all .2s;
}
.ctrl-btn.small{width:26px;height:26px}
.ctrl-btn:hover{background:rgba(232,227,216,.05);border-color:var(--ink);color:var(--ink)}
.ctrl-btn:active{transform:scale(.92)}
#playBtn{background:var(--ink);border-color:var(--ink);color:#000}
#playBtn:hover{background:#fff;border-color:#fff;color:#000}
.vol-wrap{width:54px;display:flex;align-items:center}
.vol-slider{
  -webkit-appearance:none;appearance:none;
  width:100%;height:1px;background:var(--ink-4);outline:none;
}
.vol-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:9px;height:9px;border-radius:50%;
  background:var(--ink);cursor:none;box-shadow:0 0 6px rgba(232,227,216,.5);
  transition:transform .2s;
}
.vol-slider::-webkit-slider-thumb:hover{transform:scale(1.4)}
.vol-slider::-moz-range-thumb{
  width:9px;height:9px;border:none;border-radius:50%;
  background:var(--ink);box-shadow:0 0 6px rgba(232,227,216,.5);
}

@media (max-width:520px){
  .player{
    bottom:10px;left:10px;right:10px;
    width:auto;
    grid-template-columns:42px 1fr auto;
    gap:10px;padding:8px 11px 8px 8px;
  }
  .player-art{width:42px;height:42px}
  .art-disc{width:28px;height:28px}
  .vol-wrap{display:none}
}

/* reduce motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  html{scroll-behavior:auto}
}