/* ===================== JNASH NETWORK — core system v2 ===================== */
:root{
  --ink:#08080a;
  --ink-2:#0e0e11;
  --cream:#f3ecdf;
  --cream-dim:#a8a29a;
  --pink:#ff2e88;
  --green:#39ff14;
  --blue:#00e5ff;
  --cyber:#00ffab;
  --cyber-dim:#0aa87a;
  --burgundy:#7a1f2b;
  --burgundy-2:#5c1520;
  --gold:#d9b25c;
  --font-display:"Unbounded", sans-serif;
  --font-body:"Space Grotesk", sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--ink);color:var(--cream);font-family:var(--font-body);}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-0.01em;margin:0;}
a{color:inherit;text-decoration:none;}
button{font-family:var(--font-body);cursor:pointer;}
::selection{background:var(--pink);color:var(--ink);}

/* ===================== 8-BIT PRIORITY LOADER ===================== */
body.loading-active{overflow:hidden;}
.network-loader{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:#050506;
  opacity:1;visibility:visible;transition:opacity .55s ease,visibility .55s ease;}
.network-loader::before{content:"";position:absolute;inset:0;opacity:.22;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:24px 24px;mask-image:radial-gradient(circle at center,#000,transparent 70%);}
.network-loader::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.08;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.12) 4px);}
.network-loader.done{opacity:0;visibility:hidden;pointer-events:none;}
.network-loader-inner{position:relative;z-index:2;width:min(520px,84vw);text-align:center;font-family:"Courier New",monospace;}
.loader-signal{display:flex;justify-content:center;gap:8px;margin-bottom:1.4rem;}
.loader-signal i{width:10px;height:10px;background:var(--pink);box-shadow:0 0 12px var(--pink);animation:loader-pulse 1.1s steps(2,end) infinite;}
.loader-signal i:nth-child(2){background:var(--cream);box-shadow:0 0 12px var(--cream);animation-delay:.18s;}
.loader-signal i:nth-child(3){background:var(--cyber);box-shadow:0 0 12px var(--cyber);animation-delay:.36s;}
.loader-title{font-family:"Courier New",monospace;font-size:clamp(2rem,8vw,4.3rem);font-weight:900;letter-spacing:.08em;
  color:var(--cream);text-shadow:4px 4px 0 var(--pink),-3px -3px 0 rgba(0,255,171,.55);animation:loader-title 1.2s steps(2,end) infinite;}
.loader-cursor{color:var(--cyber);animation:loader-blink .53s steps(1,end) infinite;}
.loader-kicker{margin:.7rem 0 2.2rem;font-size:.7rem;font-weight:700;letter-spacing:.35em;color:var(--cream-dim);}
.loader-meter-wrap{position:relative;width:100%;padding-top:1.35rem;}
.loader-percent{position:absolute;right:0;top:0;font-size:.7rem;font-weight:700;color:var(--cyber);}
.loader-meter{height:18px;padding:3px;border:2px solid var(--cream);background:#000;box-shadow:5px 5px 0 rgba(255,46,136,.45);}
.loader-meter i{display:block;width:0;height:100%;background:repeating-linear-gradient(90deg,var(--pink) 0 12px,#ff6b45 12px 24px,var(--cyber) 24px 36px);
  box-shadow:0 0 14px rgba(255,46,136,.65);transition:width .18s steps(4,end);}
.loader-tip{min-height:2.8em;margin:1.8rem auto 0;max-width:460px;color:var(--cream-dim);font-size:.68rem;line-height:1.55;
  letter-spacing:.08em;text-transform:uppercase;animation:loader-tip 2.6s ease-in-out infinite;}
@keyframes loader-blink{50%{opacity:0;}}
@keyframes loader-pulse{50%{opacity:.28;}}
@keyframes loader-title{50%{transform:translateX(1px);}}
@keyframes loader-tip{50%{opacity:.45;}}
@media(max-width:600px){.loader-meter{height:15px}.loader-kicker{margin-bottom:1.7rem}.loader-tip{font-size:.6rem}}

.grain{position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}

/* ===================== DIE ANTWOORD-STYLE BLOCK TITLES ===================== */
.block-title{display:inline-block;}
.block-title .line{display:inline-block;font-family:var(--font-display);font-weight:900;
  background:var(--cream);color:var(--ink);padding:.06em .28em;line-height:1.05;
  box-shadow:6px 6px 0 #000;border:3px solid #000;transform:rotate(-1.4deg);white-space:nowrap;}
.block-title .line + .line{margin-top:.18em;transform:rotate(1deg);}
.block-title.pink .line{background:var(--pink);color:#160308;}
.block-title.cyber .line{background:var(--cyber);color:#021b12;}
.block-title.gold .line{background:var(--gold);color:#1c1305;}

/* ===================== INTRO — ONE continuous pinned scroll: door -> hallway -> sewer -> panels ===================== */
.intro-cinematic{height:700vh;}
.intro-hint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);font-family:var(--font-display);
  font-weight:700;color:var(--cream);letter-spacing:.15em;font-size:.85rem;z-index:5;
  background:rgba(0,0,0,.55);padding:.5em 1em;border:2px solid #000;box-shadow:3px 3px 0 #000;
  animation:bob 2s infinite;transition:opacity .4s;}

/* Character-select panels: transparent overlay, fades in over the already-black final frames */
.alley-content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:4vh 4vw;z-index:2;opacity:0;pointer-events:none;background:transparent;}
.alley-head{text-align:center;margin-bottom:3vh;}
.alley-sub{font-family:var(--font-body);color:var(--cream-dim);margin-top:.8rem;letter-spacing:.05em;}
.select-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;max-width:1200px;margin:0 auto;width:100%;}
.panel{position:relative;border:3px solid #000;border-radius:4px;padding:0;min-height:380px;
  --panel-glow-rgb:255,255,255;--glow-x:50%;--glow-y:50%;
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;text-align:left;color:var(--cream);
  transition:transform .3s ease, box-shadow .3s ease, filter .3s ease;background-size:cover;background-position:center top;
  isolation:isolate;
  box-shadow:6px 6px 0 #000;filter:brightness(1) saturate(1);}
.panel::before,.panel::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  opacity:0;transition:opacity .22s ease;z-index:1;}
.panel::before{background:radial-gradient(circle 190px at var(--glow-x) var(--glow-y),
  rgba(var(--panel-glow-rgb),.3) 0%,rgba(var(--panel-glow-rgb),.12) 34%,transparent 72%);
  mix-blend-mode:screen;}
.panel::after{inset:-1px;padding:3px;background:radial-gradient(circle 145px at var(--glow-x) var(--glow-y),
  rgba(var(--panel-glow-rgb),1) 0%,rgba(var(--panel-glow-rgb),.5) 42%,transparent 78%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;}
.panel:hover::before,.panel:hover::after,.panel.is-glow-active::before,.panel.is-glow-active::after{opacity:1;}
.panel > *{position:relative;z-index:2;}
.panel:hover{transform:translateY(-8px) scale(1.03);filter:brightness(1.15) saturate(1.3);}
.panel-nash{background-image:linear-gradient(180deg, rgba(20,4,14,0) 40%, rgba(10,2,7,.95) 100%), url("assets/panel-nastynash.jpg?v=3");
  background-size:auto, 165% auto;background-position:center, center 57%;
  --panel-glow-rgb:255,46,136;
  box-shadow:6px 6px 0 #000, 0 0 55px 8px rgba(255,46,136,.28);}
.panel-nash:hover{box-shadow:9px 9px 0 #000, 0 0 40px 6px rgba(255,46,136,.65);border-color:var(--pink);}
.panel-trades{background-image:linear-gradient(180deg, rgba(3,18,14,0) 40%, rgba(2,10,9,.95) 100%), url("assets/panel-nastytrades.jpg?v=3");
  background-position:center 15%;
  --panel-glow-rgb:0,255,171;
  box-shadow:6px 6px 0 #000, 0 0 55px 8px rgba(0,255,171,.28);}
.panel-trades:hover{box-shadow:9px 9px 0 #000, 0 0 40px 6px rgba(0,255,171,.65);border-color:var(--cyber);}
.panel-jnash{background-image:linear-gradient(180deg, rgba(20,15,3,0) 40%, rgba(10,7,2,.95) 100%), url("assets/panel-jnash.jpg?v=3");
  --panel-glow-rgb:217,178,92;
  box-shadow:6px 6px 0 #000, 0 0 55px 8px rgba(217,178,92,.28);}
.panel-jnash:hover{box-shadow:9px 9px 0 #000, 0 0 40px 6px rgba(217,178,92,.65);border-color:var(--gold);}
.panel-tag{position:absolute;top:.8rem;left:.8rem;font-family:var(--font-display);font-weight:900;font-size:1.1rem;
  background:#000;color:var(--cream);padding:.15em .5em;border:2px solid currentColor;}
.panel-nash .panel-tag{color:var(--pink);}
.panel-trades .panel-tag{color:var(--cyber);}
.panel-jnash .panel-tag{color:var(--gold);}
.panel-body{padding:1.4rem 1.2rem;background:rgba(0,0,0,.35);}
.panel h3{font-size:clamp(1.1rem,2.2vw,1.6rem);line-height:1.02;margin-bottom:.3rem;font-weight:900;
  text-shadow:2px 2px 0 #000;word-break:break-word;}
.panel p{margin:0;font-size:.85rem;color:var(--cream-dim);}
.panel-cta{display:inline-block;margin-top:.7rem;font-family:var(--font-display);font-weight:700;font-size:.85rem;
  background:var(--cream);color:#000;padding:.35em .8em;border:2px solid #000;}

/* ===================== NAV ===================== */
.hud{position:fixed;top:0;left:0;right:0;z-index:500;display:flex;justify-content:space-between;align-items:center;
  padding:.9rem 2rem;backdrop-filter:blur(10px);background:rgba(8,8,10,.5);border-bottom:2px solid #000;
  font-family:var(--font-display);letter-spacing:.01em;transform:translateY(-100%);transition:transform .4s;}
.hud.show{transform:translateY(0);}
.hud-brand{font-size:1rem;font-weight:900;}
.hud-brand .dim{color:var(--pink);}
.hud-links{display:flex;gap:.8rem;align-items:center;font-size:.72rem;}
.hud-links a, .hud-links button{color:var(--cream-dim);background:none;border:1px solid rgba(255,255,255,.15);
  padding:.35em .7em;transition:.2s;font-family:var(--font-body);font-weight:600;letter-spacing:.03em;}
.hud-links a:hover, .hud-links button:hover{color:#000;background:var(--cream);border-color:var(--cream);}
.hud-menu-toggle{display:none;width:42px;height:38px;padding:9px;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.45);}
.hud-menu-toggle span{display:block;height:2px;margin:4px 0;background:var(--cream);transition:transform .25s ease,opacity .2s ease;}

/* ===================== CINEMATIC SCRUB ===================== */
.cinematic{position:relative;height:190vh;}
.cinematic-tall{height:300vh;}
.sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:#000;}
.sticky canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.75) 100%);pointer-events:none;}
.vignette-nash{background:radial-gradient(ellipse at center, transparent 40%, rgba(20,0,15,.8) 100%);}
.vignette-trades{background:radial-gradient(ellipse at center, transparent 40%, rgba(0,15,12,.85) 100%);}
.vignette-jnash{background:radial-gradient(ellipse at center,
    rgba(20,5,8,0) 0%,
    rgba(20,5,8,.01) 20%,
    rgba(20,5,8,.03) 35%,
    rgba(20,5,8,.08) 50%,
    rgba(20,5,8,.18) 62%,
    rgba(20,5,8,.34) 73%,
    rgba(20,5,8,.52) 82%,
    rgba(20,5,8,.70) 90%,
    rgba(20,5,8,.85) 100%);}
.vignette-jnash::after{content:"";position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;pointer-events:none;
  /* dither noise — this radial gradient spans ~800px+ of near-black, which bands
     visibly on real displays without it (2-stop gradients over that range always will) */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}

/* Caution-tape divider — a normal-flow strip that belongs to the character-select area,
   sitting between it and the video section below so it never overlaps a face. Text scrolls
   left in an infinite marquee loop. */
.tape-divider{position:relative;z-index:20;width:100%;}
.tape-edge{height:9px;background:repeating-linear-gradient(45deg,#f5d90a 0 14px,#111 14px 28px);}
.tape-body{position:relative;background:#f5d90a;padding:.55rem 0;overflow:hidden;white-space:nowrap;}
.tape-marquee{display:flex;width:max-content;animation:tape-scroll 14s linear infinite;}
.tape-marquee span{display:inline-block;font-family:var(--font-display);
  font-weight:900;font-size:1.2rem;color:#111;letter-spacing:.18em;padding-right:0;}
@keyframes tape-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* Alter-ego label — pinned at the bottom of the sticky canvas, stays fixed on screen the whole
   time the section is scrolling so it never drifts with content. */
.nash-bottom-label{position:absolute;left:6vw;bottom:6vh;z-index:4;max-width:480px;
  opacity:0;transform:translateY(20px);transition:opacity .5s ease, transform .5s ease;}

.progress{position:absolute;bottom:0;left:0;right:0;height:4px;background:rgba(255,255,255,.1);z-index:5;}
.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--pink),var(--blue));}
.scroll-hint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);font-family:var(--font-body);
  font-weight:600;color:var(--cream-dim);letter-spacing:.15em;animation:bob 2s infinite;z-index:5;font-size:.8rem;}
@keyframes bob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}}

/* ===================== STATS ===================== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.08);padding:1px;}
.stat{background:var(--ink);padding:2.2rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;text-align:center;}
.stat-label{font-family:var(--font-body);font-size:.72rem;color:var(--cream-dim);text-transform:uppercase;letter-spacing:.12em;font-weight:600;}
.stat-value{font-family:var(--font-display);font-size:1.05rem;color:var(--cream);font-weight:700;}

/* ===================== WORLD SECTIONS ===================== */
.world{position:relative;}
.world-content{position:relative;z-index:3;max-width:1100px;margin:-26vh auto 0;padding:0 5vw 8vh;}
.world-content-left{max-width:480px;margin:-22vh 0 0 6vw;padding:0 0 8vh;}
.world-eyebrow{font-family:var(--font-body);font-weight:600;letter-spacing:.2em;color:var(--cream-dim);text-transform:uppercase;font-size:.8rem;}
.world-title{margin:.5rem 0 .8rem;}
.world-tagline{font-size:1.1rem;color:var(--cream-dim);margin-bottom:2rem;font-family:var(--font-body);}
.world-body{max-width:640px;color:var(--cream-dim);line-height:1.6;font-size:1.02rem;}

.content-glass{max-width:620px;padding:2.2rem 2.4rem;border-radius:26px;
  background:linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.03));
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 16px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(255,255,255,.04);}
.content-glass .world-tagline, .content-glass .world-body{margin-bottom:0;}
.content-glass .world-body{margin-top:1rem;}

/* NASTYNASH */
.world-nash{background:linear-gradient(180deg,#08080a,#160810 60%,#08080a);}

/* BOOMBOX — interactive, thick-ink comic style */
.boombox-wrap{max-width:560px;margin-bottom:2rem;}
.boombox-float{position:absolute;top:8%;right:5%;z-index:4;width:min(360px,34vw);opacity:0;
  transition:opacity .5s ease, transform .5s ease;transform:translateY(-12px);pointer-events:none;}
.boombox-float.in{opacity:1;transform:translateY(0);pointer-events:auto;}
.boombox-float .boombox{padding:.9rem;}
.boombox-float .boombox-label{font-size:.85rem;}
.boombox-float .social-row{margin-top:.7rem;gap:.4rem;}
.boombox-float .social-btn{font-size:.65rem;padding:.4em .6em;}
.boombox-float .link-note{font-size:.62rem;}
@media(max-width:900px){
  .boombox-float{position:absolute;top:7vh;left:50%;right:auto;width:min(410px,calc(100vw - 32px));margin:0;
    transform:translate(-50%,-12px);}
  .boombox-float.in{transform:translate(-50%,0);}
}
.boombox{position:relative;background:#0d0d10;border:4px solid #000;border-radius:14px;padding:1.2rem;
  box-shadow:8px 8px 0 #000, inset 0 0 0 2px rgba(255,46,136,.25);}
.boombox-top{display:flex;align-items:center;gap:.8rem;margin-bottom:.8rem;}
.boombox-speaker{width:44px;height:44px;border-radius:50%;border:4px solid #000;
  background:radial-gradient(circle, #222 0%, #000 70%);position:relative;flex:none;}
.boombox-speaker::after{content:"";position:absolute;inset:8px;border-radius:50%;border:3px solid var(--pink);
  box-shadow:0 0 12px var(--pink);}
.boombox.playing .boombox-speaker::after{animation:speaker-pulse 1s ease-in-out infinite;}
.boombox.playing .boombox-speaker.right::after{border-color:var(--green);box-shadow:0 0 12px var(--green);
  animation-delay:.15s;}
@keyframes speaker-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.18);}}
.boombox-label{font-family:var(--font-display);font-weight:900;font-size:1rem;color:var(--cream);flex:1;}
.boombox-label small{display:block;font-family:var(--font-body);font-weight:500;font-size:.7rem;color:var(--cream-dim);
  text-transform:uppercase;letter-spacing:.1em;margin-top:.2rem;}
.boombox-screen{border:3px solid #000;border-radius:8px;overflow:hidden;background:#000;}
.boombox-screen iframe{display:block;border:0;width:100%;height:152px;}
.social-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem;}
.social-btn{padding:.5em .9em;font-size:.75rem;font-family:var(--font-display);font-weight:700;
  border:2px solid #000;background:var(--cream);color:#000;box-shadow:3px 3px 0 #000;transition:.15s;}
.social-btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #000;}
.social-btn.spotify{background:#1ed760;}
.social-btn.placeholder{background:#3a3a3a;color:#ddd;opacity:.75;}
.link-note{font-size:.72rem;color:var(--cream-dim);opacity:.7;margin-top:.7rem;}

.nash-card{background:rgba(57,255,20,.06);border:2px solid var(--green);border-radius:10px;padding:1.4rem;max-width:560px;
  box-shadow:5px 5px 0 #000;}
.nash-card h3{color:var(--green);margin-bottom:.4rem;font-size:1.2rem;}

/* NASTY TRADES */
.world-trades{background:linear-gradient(180deg,#08080a,#05120e 60%,#08080a);}
.trade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-bottom:2rem;}
.trade-card{background:rgba(0,255,171,.05);border:2px solid rgba(0,255,171,.35);border-radius:12px;padding:1.4rem;
  display:flex;flex-direction:column;gap:.6rem;box-shadow:5px 5px 0 #000;}
.trade-card.featured{background:rgba(0,255,171,.1);border-color:var(--cyber);}
.trade-card h3{color:var(--cyber);font-size:1.25rem;font-weight:700;}
.trade-card p{font-size:.88rem;color:var(--cream-dim);margin:0;}
.trade-card .tech{font-size:.72rem;opacity:.7;font-style:italic;}
.feature-strip{display:flex;flex-wrap:wrap;gap:1rem;}
.feature{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:8px;
  padding:.7rem 1rem;font-size:.82rem;color:var(--cream);}

/* Pinned overlay content — cards stay fixed on screen; only the video scrubs underneath */
.trades-pinned{position:absolute;inset:0;z-index:4;padding:0 5vw;pointer-events:none;
  opacity:0;transition:opacity .5s ease;overflow:hidden;}
.trades-pinned.in{opacity:1;transform:translateY(0);}
.trades-identity{position:absolute;left:5vw;bottom:4vh;z-index:8;max-width:520px;
  text-shadow:0 2px 18px rgba(0,0,0,.85);}
.trades-card-stage{position:absolute;inset:0;z-index:5;pointer-events:none;}
.trade-liquid-card{--card-y:120vh;--tilt-x:0deg;--tilt-y:0deg;--mx:50%;--my:50%;
  position:absolute;top:50%;right:5vw;width:min(650px,47vw);padding:1.65rem 1.75rem 1.4rem;
  border-radius:34px;overflow:hidden;pointer-events:auto;
  transform:translate3d(0,var(--card-y),0) translateY(-50%) perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  will-change:transform,opacity;opacity:var(--card-opacity,0);
  color:#f5fffb;background:
    linear-gradient(135deg,rgba(223,255,247,.18),rgba(4,31,28,.25) 42%,rgba(1,10,9,.48)),
    rgba(3,22,19,.42);
  border:1px solid rgba(215,255,245,.4);
  border-top-color:rgba(255,255,255,.72);
  box-shadow:0 30px 80px rgba(0,0,0,.55),0 8px 30px rgba(0,255,171,.12),
    inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(25px) saturate(175%);-webkit-backdrop-filter:blur(25px) saturate(175%);
  transition:border-color .3s ease,box-shadow .3s ease;}
.trade-liquid-card:hover{border-color:rgba(225,255,248,.7);
  box-shadow:0 38px 95px rgba(0,0,0,.65),0 10px 42px rgba(0,255,171,.23),
    inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(255,255,255,.1);}
.trade-liquid-rotator{right:auto;left:5vw;background:
  linear-gradient(145deg,rgba(191,246,255,.17),rgba(4,25,28,.3) 45%,rgba(1,10,12,.5)),rgba(3,20,22,.42);
  border-color:rgba(181,246,255,.4);}
.trade-liquid-glow{position:absolute;width:330px;height:330px;left:calc(var(--mx) - 165px);top:calc(var(--my) - 165px);
  border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(151,255,230,.28),rgba(0,229,255,.08) 42%,transparent 70%);
  filter:blur(7px);transition:opacity .25s;opacity:.65;}
.trade-liquid-sheen{position:absolute;inset:-60%;pointer-events:none;opacity:.55;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.23) 45%,rgba(255,255,255,.04) 53%,transparent 62%);
  transform:translateX(calc((var(--mx) - 50%) * .45)) rotate(6deg);}
.trade-liquid-card::after{content:"";position:absolute;inset:1px;border-radius:33px;pointer-events:none;
  background:linear-gradient(145deg,rgba(255,255,255,.16),transparent 25%,transparent 68%,rgba(0,255,171,.08));}
.trade-liquid-card > *:not(.trade-liquid-glow):not(.trade-liquid-sheen){position:relative;z-index:2;}
.trade-card-topline{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.75rem;
  font-family:var(--font-display);font-size:.62rem;letter-spacing:.12em;font-weight:700;}
.trade-card-number{color:rgba(225,255,248,.58);}
.trade-live-dot,.trade-build-dot{display:flex;align-items:center;gap:.45rem;color:var(--cyber);}
.trade-live-dot::before,.trade-build-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;
  box-shadow:0 0 10px currentColor;}
.trade-build-dot{color:var(--blue);}
.trade-liquid-card h3{font-size:clamp(1.5rem,2.4vw,2.35rem);letter-spacing:-.04em;margin-bottom:.55rem;}
.trade-card-lead{font-size:.92rem;line-height:1.48;color:rgba(235,255,250,.78);max-width:92%;margin:0 0 1.15rem;}
.trade-card-columns{display:grid;grid-template-columns:1.25fr .85fr;gap:1.4rem;padding:1rem 0;
  border-top:1px solid rgba(255,255,255,.13);border-bottom:1px solid rgba(255,255,255,.13);}
.trade-mini-label{display:block;font-family:var(--font-display);font-size:.6rem;letter-spacing:.13em;color:var(--cyber);margin-bottom:.55rem;}
.trade-card-columns ul{list-style:none;padding:0;margin:0;display:grid;gap:.38rem;}
.trade-card-columns li{position:relative;padding-left:1rem;font-size:.76rem;line-height:1.35;color:rgba(235,255,250,.74);}
.trade-card-columns li::before{content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;border-radius:50%;background:var(--cyber);
  box-shadow:0 0 7px var(--cyber);}
.trade-card-columns p{margin:0;font-size:.76rem;line-height:1.48;color:rgba(235,255,250,.7);}
.trade-card-footer{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1rem;
  font-size:.64rem;color:rgba(225,255,248,.56);letter-spacing:.04em;}
.trade-card-footer a,.trade-card-footer span:last-child{font-family:var(--font-display);font-weight:700;color:var(--cyber);font-size:.6rem;}
.trade-card-footer a:hover{color:#fff;text-shadow:0 0 12px var(--cyber);}
.trades-scroll-index{position:absolute;right:2vw;top:50%;transform:translateY(-50%);z-index:9;display:flex;flex-direction:column;
  align-items:center;gap:.5rem;font-family:var(--font-display);font-size:.55rem;color:rgba(255,255,255,.5);}
.trades-scroll-index div{position:relative;width:2px;height:82px;background:rgba(255,255,255,.16);overflow:hidden;}
.trades-scroll-index i{position:absolute;left:0;top:0;width:100%;height:var(--index-progress,0%);background:var(--cyber);box-shadow:0 0 8px var(--cyber);}
.world-title.small{font-size:0}
.world-title.small .line{font-size:clamp(1.6rem,3.4vw,2.6rem);}
.world-tagline.small{font-size:.95rem;margin-bottom:1.2rem;}
.trade-grid.compact{gap:.8rem;margin-bottom:1rem;}
.trade-grid.compact .trade-card{padding:1rem;gap:.4rem;}
.trade-grid.compact .trade-card h3{font-size:1.05rem;}
.trade-grid.compact .trade-card p{font-size:.78rem;line-height:1.4;}
.trade-grid.compact .cta-btn{padding:.6em 1.1em;font-size:.8rem;}

@media(max-width:900px){
  .trade-grid.compact{grid-template-columns:1fr;}
  .trades-pinned{padding:0 4vw;}
  .trades-identity{left:4vw;bottom:3vh;}
  .trade-liquid-card,.trade-liquid-rotator{left:4vw;right:auto;width:92vw;padding:1.25rem;border-radius:26px;}
  .trade-card-columns{grid-template-columns:1fr;gap:.8rem;}
  .trade-card-lead{font-size:.82rem;}
  .trade-card-columns li,.trade-card-columns p{font-size:.7rem;}
  .trade-card-footer{align-items:flex-start;flex-direction:column;gap:.45rem;}
  .trades-scroll-index{display:none;}
}
.feature span{color:var(--cream-dim);font-size:.72rem;}

.jnash-pinned{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:0 5vw 4vh;
  opacity:0;transform:translateY(20px);transition:opacity .5s ease, transform .5s ease;}
.jnash-pinned.in{opacity:1;transform:translateY(0);}
.jnash-pinned .content-glass{margin:0;max-width:560px;padding:1.6rem 1.8rem;}

/* Overlapping fade bridging .work into the jnash cinematic's opening black frame.
   Negative margins pull it over both edges so there is no flat-color seam line.
   Stops follow a smoothstep easing (fine-grained, non-linear) rather than a few
   evenly-spaced linear stops — a handful of linear stops creates a visible slope
   discontinuity (Mach band) at each one, worst right at the last stop where it
   meets flat opaque black. Many eased stops removes any single dominant kink. */
.section-seam{position:relative;z-index:5;height:20vh;margin-top:-10vh;margin-bottom:-10vh;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(15,5,7,0) 0%,
    rgba(15,5,7,.03) 10%,
    rgba(15,5,7,.10) 20%,
    rgba(15,5,7,.22) 30%,
    rgba(15,5,7,.35) 40%,
    rgba(15,5,7,.50) 50%,
    rgba(15,5,7,.65) 60%,
    rgba(15,5,7,.78) 70%,
    rgba(12,4,6,.90) 80%,
    rgba(6,2,3,.97) 90%,
    #000 100%);}
.section-seam::after{content:"";position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;pointer-events:none;
  /* dither noise — breaks up 8-bit banding across the near-black gradient, same
     principle as film grain over a dark cinematic gradient */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}

/* JNASH — single hand-edited cinematic clip (sewer -> NYC flyover -> tower window -> orbit),
   653 frames extracted at native fps. Height scaled to keep the same vh-per-frame pace as elsewhere. */
.world-jnash{height:1200vh;background:linear-gradient(180deg,#000,#160a0d 78%,#08080a);}

/* CTA buttons */
.cta-btn{display:inline-block;padding:.85em 1.7em;font-family:var(--font-display);font-weight:700;letter-spacing:.02em;
  border:3px solid #000;box-shadow:5px 5px 0 #000;transition:.2s;}
.cta-btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #000;}
.cta-btn.cyber{background:var(--cyber);color:#021b12;}
.cta-btn.primary{background:var(--pink);color:#160308;}
.cta-btn.ghost{background:var(--cream);color:#000;}
.cta-btn.ink{background:var(--burgundy);color:var(--cream);}

.chip{display:inline-block;font-size:.7rem;padding:.3em .6em;border:2px solid #000;background:rgba(255,255,255,.08);
  color:var(--cream-dim);margin-top:.6rem;font-weight:600;}
.chip-link{color:#000;background:var(--gold);border-color:#000;}

/* ===================== LIQUID GLASS CARDS ===================== */
.work{position:relative;padding:11vh 5vw 13vh;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(circle at 18% 18%,rgba(0,255,171,.13),transparent 30%),
    radial-gradient(circle at 83% 78%,rgba(0,229,255,.09),transparent 32%),
    linear-gradient(180deg,#07110e,#080a0a 48%,#14060a 96%);}
.work::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.18;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:54px 54px;mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 78%,transparent);}
.work::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.05;mix-blend-mode:overlay;pointer-events:none;
  mask-image:linear-gradient(to bottom,transparent 70%,#000 100%);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}
.section-title{text-align:center;}
.section-sub{text-align:center;color:var(--cream-dim);font-family:var(--font-body);margin:1rem 0 3rem;}
.project-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.25rem;max-width:1360px;margin:0 auto;}

/* ===================== WORK — 3D circular gallery, rotates on scroll ===================== */
/* Overrides .work's padding/overflow for a pinned scroll-driven section; the
   background/dither-noise rules above stay (they're what the seam color-match relies on). */
.cinematic-gallery{height:420vh;padding:0;overflow:visible;}
.cinematic-gallery .sticky{position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;}
.gallery-head{position:absolute;top:7vh;left:0;right:0;z-index:6;text-align:center;pointer-events:none;padding:0 5vw;}
.gallery-head .section-sub{margin:1rem 0 0;}
.gallery-hint{margin-top:1rem;font-family:var(--font-display);font-size:.7rem;letter-spacing:.22em;
  color:var(--cream-dim);opacity:.65;}
.gallery-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  perspective:1700px;transform:translateY(4vh);}
.gallery-ring{position:relative;width:1px;height:1px;transform-style:preserve-3d;}
.gallery-card{--hover-x:50%;--hover-y:50%;--hover-tilt-x:0deg;--hover-tilt-y:0deg;--hover-scale:1;
  position:absolute;left:0;top:0;width:260px;height:340px;margin-left:-130px;margin-top:-170px;
  border-radius:24px;overflow:hidden;text-align:left;color:var(--cream);cursor:default;
  background:linear-gradient(150deg,rgba(224,255,248,.15),rgba(6,10,14,.5) 45%,rgba(4,4,6,.74));
  backdrop-filter:blur(20px) saturate(165%);-webkit-backdrop-filter:blur(20px) saturate(165%);
  border:1px solid rgba(255,255,255,.16);border-top:3px solid rgba(255,255,255,.5);
  box-shadow:0 20px 50px rgba(0,0,0,.55);
  padding:1.5rem;display:flex;flex-direction:column;justify-content:flex-end;
  font:inherit;transition:transform .18s ease-out,box-shadow .3s,filter .3s;}
.gallery-card.accent-pink{border-top-color:var(--pink);}
.gallery-card.accent-cyber{border-top-color:var(--cyber);}
.gallery-card.accent-gold{border-top-color:var(--gold);}
.gallery-card[data-project],.gallery-card.resume-card{cursor:pointer;}
.gallery-card[data-project]::before,.gallery-card.resume-card::before{content:"";position:absolute;inset:-1px;z-index:1;pointer-events:none;
  opacity:0;transition:opacity .24s ease;
  background:radial-gradient(circle 170px at var(--hover-x) var(--hover-y),rgba(255,255,255,.38) 0%,rgba(0,255,171,.19) 25%,rgba(0,229,255,.08) 43%,transparent 68%);
  mix-blend-mode:screen;}
.gallery-card[data-project]::after,.gallery-card.resume-card::after{content:"CLICK TO EXPLORE";position:absolute;right:15px;top:15px;z-index:3;
  padding:.42rem .58rem;border:1px solid rgba(255,255,255,.45);border-radius:999px;background:rgba(2,9,10,.68);
  color:#fff;font-family:var(--font-display);font-size:.48rem;letter-spacing:.11em;white-space:nowrap;
  opacity:0;transform:translateY(5px);transition:opacity .2s ease,transform .2s ease;
  box-shadow:0 0 22px rgba(0,255,171,.22);backdrop-filter:blur(8px);}
.gallery-card.resume-card::after{content:"CLICK TO OPEN";}
.gallery-card[data-project]:hover,.gallery-card.resume-card:hover{--hover-scale:1.035;
  box-shadow:0 30px 75px rgba(0,0,0,.72),0 0 34px rgba(0,255,171,.22),0 0 70px rgba(0,229,255,.1);
  filter:brightness(1.1) saturate(1.12);}
.gallery-card[data-project]:hover::before,.gallery-card.resume-card:hover::before,
.gallery-card[data-project]:hover::after,.gallery-card.resume-card:hover::after{opacity:1;}
.gallery-card[data-project]:hover::after,.gallery-card.resume-card:hover::after{transform:translateY(0);}
.gallery-card > *{position:relative;z-index:2;}
.gallery-card h3{font-size:1.1rem;margin:0 0 .4rem;font-weight:700;font-family:var(--font-display);}
.gallery-card .project-summary{font-size:.82rem;color:rgba(245,255,252,.86);font-weight:600;line-height:1.45;margin:0 0 .5rem;}
.gallery-card .project-utility{font-size:.74rem;color:rgba(235,255,250,.62);line-height:1.42;margin:0 0 .6rem;}
.gallery-card .project-utility b{color:var(--cyber);font-weight:600;}
.gallery-card .tech{font-size:.66rem;opacity:.6;font-style:italic;margin:0 0 .5rem;}
.gallery-card .chip{align-self:flex-start;}
.gallery-card.resume-card{background:linear-gradient(150deg,rgba(217,178,92,.2),rgba(122,31,43,.14) 45%,rgba(4,4,6,.74));
  border:none;text-align:left;}
@media (max-width:760px){
  /* Safari's dynamic viewport and the ring's 3D projection make the card border
     sit higher than desktop emulation suggests. This offset visually centers
     the hint between the paragraph and the real projected card edge. */
  .gallery-hint{transform:translateY(-11px);}
  .gallery-card{width:200px;height:300px;margin-left:-100px;margin-top:-150px;padding:1rem .95rem;
    justify-content:center;}
  .gallery-stage{perspective:1100px;transform:translateY(6vh);}
  .gallery-card h3{font-size:.96rem;margin-bottom:.42rem;line-height:1.12;}
  .gallery-card .project-summary{font-size:.72rem;line-height:1.35;margin-bottom:.45rem;}
  .gallery-card .project-utility{font-size:.65rem;line-height:1.34;margin-bottom:.48rem;}
  .gallery-card .tech{font-size:.58rem;margin-bottom:.35rem;}
  .gallery-card .chip{font-size:.58rem;margin-top:.35rem;}
}

.card-glass{
  --mx:50%;--my:50%;--tilt-x:0deg;--tilt-y:0deg;position:relative;border-radius:30px;padding:1.65rem;overflow:hidden;text-align:left;color:var(--cream);
  background:linear-gradient(140deg,rgba(224,255,248,.17),rgba(6,34,30,.22) 38%,rgba(4,10,10,.55));
  backdrop-filter:blur(26px) saturate(175%);-webkit-backdrop-filter:blur(26px) saturate(175%);
  border:1px solid rgba(216,255,246,.32);border-top-color:rgba(255,255,255,.58);
  box-shadow:0 18px 48px rgba(0,0,0,.48),0 4px 22px rgba(0,255,171,.06),
    inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(255,255,255,.05);
  transition:transform .35s cubic-bezier(.2,.9,.3,1), box-shadow .35s;
}
.card-glass::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.8;
  background:radial-gradient(circle 240px at var(--mx) var(--my),rgba(180,255,237,.25),rgba(0,229,255,.06) 38%,transparent 70%);}
.card-glass::after{content:"";position:absolute;inset:-65%;pointer-events:none;opacity:.45;
  background:linear-gradient(115deg,transparent 39%,rgba(255,255,255,.24) 47%,rgba(255,255,255,.04) 53%,transparent 61%);
  transform:translateX(calc((var(--mx) - 50%) * .35)) rotate(8deg);}
.card-glass:hover{transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-6px);
  box-shadow:0 30px 72px rgba(0,0,0,.62),0 8px 35px rgba(0,255,171,.16),inset 0 1px 0 rgba(255,255,255,.58);}
.card-glass > *{position:relative;z-index:2;}
.card-glass h3{font-size:1.25rem;margin-bottom:.45rem;font-weight:700;}
.card-glass p{font-size:.86rem;color:rgba(235,255,250,.68);line-height:1.52;margin:0 0 .55rem;}
.card-glass .tech{font-size:.72rem;opacity:.65;font-style:italic;}
.project-featured{grid-column:span 3;padding:1.9rem;min-height:390px;}
.project-featured h3{font-size:clamp(1.35rem,2vw,1.8rem);}
.project-support{grid-column:span 2;min-height:250px;}
.project-summary{color:rgba(245,255,252,.88)!important;font-weight:600;}
.project-proof{display:grid;gap:.65rem;margin:1.1rem 0 1rem;padding:1rem 0;
  border-top:1px solid rgba(255,255,255,.13);border-bottom:1px solid rgba(255,255,255,.13);}
.project-proof div{display:grid;grid-template-columns:62px 1fr;gap:.65rem;}
.project-proof dt{font-family:var(--font-display);font-weight:700;font-size:.57rem;letter-spacing:.08em;color:var(--cyber);padding-top:.2rem;}
.project-proof dd{margin:0;color:rgba(235,255,250,.68);font-size:.77rem;line-height:1.45;}
.project-utility b{color:var(--cyber);font-weight:600;}

.resume-card{background:linear-gradient(135deg, rgba(217,178,92,.18), rgba(122,31,43,.1));border-color:rgba(217,178,92,.4);}

/* Portfolio-to-JNASH transition: the grid collapses into a luminous identity portal. */
.work-to-jnash{position:relative;height:52vh;min-height:360px;overflow:hidden;background:#11080c;isolation:isolate;}
.work-to-jnash::before{content:"";position:absolute;inset:-2px;z-index:-1;
  background:radial-gradient(ellipse at 50% 100%,rgba(217,178,92,.28),transparent 48%),
    linear-gradient(180deg,#11080c 0%,#13090c 55%,#08080a 100%);}
.transition-grid{position:absolute;inset:-20% -10%;opacity:.32;transform:perspective(500px) rotateX(64deg) translateY(18%);
  transform-origin:center bottom;background-image:linear-gradient(rgba(217,178,92,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(217,178,92,.18) 1px,transparent 1px);
  background-size:60px 60px;mask-image:radial-gradient(ellipse at center,#000,transparent 68%);}
.transition-orbit{position:absolute;left:50%;top:55%;border:1px solid rgba(217,178,92,.34);border-radius:50%;
  transform:translate(-50%,-50%);box-shadow:0 0 35px rgba(217,178,92,.08),inset 0 0 35px rgba(217,178,92,.06);}
.orbit-a{width:min(62vw,780px);aspect-ratio:1;animation:portal-spin 16s linear infinite;}
.orbit-b{width:min(38vw,480px);aspect-ratio:1;border-style:dashed;animation:portal-spin 10s linear infinite reverse;}
.transition-beam{position:absolute;left:50%;top:-12%;width:min(34vw,380px);height:130%;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(217,178,92,.03),rgba(217,178,92,.2),rgba(217,178,92,.03),transparent);
  clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);filter:blur(7px);animation:beam-pulse 3s ease-in-out infinite;}
.transition-signal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;text-align:center;width:90%;}
.transition-signal span{display:block;font-size:.67rem;letter-spacing:.24em;color:rgba(243,236,223,.5);margin-bottom:.8rem;}
.transition-signal strong{font-family:var(--font-display);font-size:clamp(1.35rem,4vw,3.5rem);color:var(--gold);
  text-shadow:0 0 22px rgba(217,178,92,.42);letter-spacing:-.03em;}
@keyframes portal-spin{to{transform:translate(-50%,-50%) rotate(360deg);}}
@keyframes beam-pulse{0%,100%{opacity:.45;}50%{opacity:1;}}

/* ===================== FINALE ===================== */
.finale{min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.4rem;
  background:radial-gradient(ellipse at 50% 30%, rgba(255,46,136,.1), transparent 60%), #050506;text-align:center;}
.finale-title .line{font-size:clamp(2.2rem,10vw,6.5rem);}
.finale-title .line:nth-child(1){background:var(--pink);}
.finale-title .line:nth-child(2){background:var(--cyber);}
.finale-actions{display:flex;gap:1.2rem;flex-wrap:wrap;justify-content:center;}

.site-footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:2rem;padding:4rem 6vw;background:#050506;
  border-top:2px solid #000;}
.footer-brand{font-family:var(--font-display);font-size:1.3rem;font-weight:900;}
.footer-brand .dim{color:var(--pink);}
.footer-col{display:flex;flex-direction:column;gap:.6rem;color:var(--cream-dim);font-size:.88rem;}
.footer-col a:hover{color:var(--cream);}

/* ===================== RESUME MODAL (matches site system now) ===================== */
.resume-modal{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;
  padding:4vh 2vw;}
.resume-modal.open{display:flex;}
.resume-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(5px);}
.resume-sheet{position:relative;z-index:2;max-width:860px;width:100%;max-height:92vh;}
.resume-close{position:fixed;top:3vh;right:3vw;z-index:2001;width:2.4rem;height:2.4rem;border-radius:50%;
  background:var(--cream);color:#000;border:3px solid #000;font-size:1.1rem;box-shadow:3px 3px 0 #000;}
.resume-paper{background:linear-gradient(160deg,#111114,#0a0a0c);color:var(--cream);border-radius:14px;
  padding:3.5rem 3rem;box-shadow:0 40px 100px rgba(0,0,0,.6);border:3px solid #000;
  --resume-scroll-color:#ff2e88;--resume-scroll-glow:rgba(255,46,136,.75);
  max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--resume-scroll-color) #09090b;}
.resume-paper::-webkit-scrollbar{width:13px;}
.resume-paper::-webkit-scrollbar-track{background:#09090b;border-left:1px solid rgba(255,255,255,.08);border-radius:0 12px 12px 0;}
.resume-paper::-webkit-scrollbar-thumb{background:var(--resume-scroll-color);border:3px solid #09090b;border-radius:999px;
  box-shadow:0 0 8px var(--resume-scroll-color),0 0 18px var(--resume-scroll-glow),inset 0 0 4px rgba(255,255,255,.75);}
.resume-paper::-webkit-scrollbar-thumb:hover{border-width:2px;
  box-shadow:0 0 10px var(--resume-scroll-color),0 0 25px var(--resume-scroll-color),inset 0 0 5px rgba(255,255,255,.9);}
.resume-header{border-bottom:3px solid var(--pink);padding-bottom:1.4rem;margin-bottom:1.6rem;}
.resume-name{font-family:var(--font-display);font-weight:900;font-size:2.6rem;color:var(--cream);
  background:var(--pink);display:inline-block;padding:.05em .3em;border:3px solid #000;box-shadow:5px 5px 0 #000;
  transform:rotate(-1deg);}
.resume-fullname{font-size:1.1rem;margin:1rem 0 .3rem;color:var(--cream-dim);}
.resume-role{color:var(--cyber);font-size:.95rem;font-weight:600;}
.resume-loc{font-size:.85rem;color:var(--cream-dim);margin-top:.5rem;}
.resume-loc a{text-decoration:underline;}
.resume-section{margin-bottom:1.8rem;}
.resume-section h2{font-size:1.15rem;color:var(--gold);border-bottom:1px solid rgba(217,178,92,.3);
  padding-bottom:.4rem;margin-bottom:.9rem;letter-spacing:.02em;font-weight:700;}
.resume-section p{line-height:1.65;font-size:.95rem;margin:.4rem 0;color:var(--cream-dim);}
.resume-entry{margin-bottom:1.3rem;}
.resume-entry h3{font-size:1.02rem;margin-bottom:.3rem;color:var(--cream);font-weight:700;}
.resume-status{font-size:.68rem;color:var(--cream-dim);font-weight:400;margin-left:.5rem;border:1px solid var(--cream-dim);
  padding:.1em .5em;border-radius:10px;font-family:var(--font-body);}
.resume-tech{font-size:.78rem;font-style:italic;color:var(--cyber-dim);}
.resume-bullets{list-style:none;padding:0;margin:.5rem 0;display:flex;flex-wrap:wrap;gap:.4rem;}
.resume-bullets li{font-size:.75rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);
  padding:.25em .6em;border-radius:6px;color:var(--cream-dim);}
.resume-list{padding-left:0;line-height:1.7;list-style:none;}
.resume-list li{margin-bottom:.6rem;font-size:.92rem;color:var(--cream-dim);}
.resume-list b{color:var(--cream);}
.resume-list a{color:var(--cyber);text-decoration:underline;}
.resume-skills{display:flex;flex-wrap:wrap;gap:.5rem;}
.resume-skills span{font-size:.8rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  padding:.35em .7em;border-radius:16px;}
.resume-cta-row{display:flex;justify-content:space-between;align-items:center;margin-top:2rem;
  border-top:2px solid rgba(255,255,255,.15);padding-top:1.6rem;flex-wrap:wrap;gap:1rem;}
.resume-pdf-link{color:var(--cyber);font-weight:700;text-decoration:underline;}

/* ===================== PROJECT PREVIEW MODAL ===================== */
.project-modal{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;padding:4vh 2vw;}
.project-modal.open{display:flex;}
.project-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(5px);}
.project-modal-sheet{position:relative;z-index:2;max-width:900px;width:100%;max-height:92vh;
  background:linear-gradient(160deg,#111114,#0a0a0c);color:var(--cream);border-radius:14px;
  padding:2.4rem 2.2rem 2rem;box-shadow:0 40px 100px rgba(0,0,0,.6);border:3px solid #000;
  overflow-y:auto;-webkit-overflow-scrolling:touch;}
.project-modal-close{position:fixed;top:3vh;right:3vw;z-index:2001;width:2.4rem;height:2.4rem;border-radius:50%;
  background:var(--cream);color:#000;border:3px solid #000;font-size:1.1rem;box-shadow:3px 3px 0 #000;cursor:pointer;}
.project-modal-header{margin-bottom:1.4rem;}
.project-modal-eyebrow{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:.7rem;
  letter-spacing:.16em;background:var(--gold);color:#1c1305;padding:.25em .6em;margin-bottom:.7rem;}
.project-modal-header h2{font-family:var(--font-display);font-size:1.8rem;margin:0 0 .5rem;}
.project-modal-header p{color:var(--cream-dim);font-size:.92rem;line-height:1.55;margin:0;}
.project-modal-gallery{position:relative;display:flex;align-items:center;gap:.6rem;margin-top:1.6rem;}
.project-modal-frame{flex:1;border-radius:10px;overflow:hidden;border:2px solid rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;max-height:62vh;}
.project-modal-frame img{max-width:100%;max-height:62vh;width:auto;height:auto;object-fit:contain;display:block;}
.project-modal-nav{flex:0 0 auto;width:2.4rem;height:2.4rem;border-radius:50%;border:2px solid #000;
  background:var(--cream);color:#000;font-size:1.3rem;line-height:1;cursor:pointer;box-shadow:3px 3px 0 #000;
  transition:transform .15s;}
.project-modal-nav:hover{transform:translate(-1px,-1px);}
.project-modal-nav:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #000;}
.project-modal-dots{display:flex;justify-content:center;gap:.5rem;margin-top:1rem;}
.project-modal-dots button{width:.55rem;height:.55rem;border-radius:50%;border:1px solid rgba(255,255,255,.4);
  background:transparent;padding:0;cursor:pointer;}
.project-modal-dots button.active{background:var(--gold);border-color:var(--gold);}
@media (max-width:640px){
  .project-modal-sheet{padding:1.8rem 1.2rem 1.6rem;}
  .project-modal-header h2{font-size:1.4rem;}
  .project-modal-nav{width:2rem;height:2rem;font-size:1.05rem;}
}

/* ===================== CUSTOM JNASH CURSOR ===================== */
html,body,body *{cursor:url("assets/jnash-cursor.png") 1 1,auto;}
a,button,[role="button"],iframe,.panel,.gallery-card[data-project],.resume-card,.chip-link{
  cursor:url("assets/jnash-cursor.png") 1 1,pointer;
}

/* ===================== REVEALS ===================== */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

/* ===================== RESPONSIVE ===================== */
@media(max-width:900px){
  .alley-content{padding:3.5rem 0 2rem;justify-content:center;}
  .alley-head{padding:0 1rem;margin-bottom:1.25rem;}
  .alley-sub{font-size:.75rem;margin:.55rem auto 0;max-width:330px;}
  .select-grid{display:flex;gap:1rem;max-width:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    padding:.4rem max(7vw,24px) 1rem;scroll-padding-inline:max(7vw,24px);}
  .select-grid::-webkit-scrollbar{height:5px;}
  .select-grid::-webkit-scrollbar-track{background:rgba(255,255,255,.08);}
  .select-grid::-webkit-scrollbar-thumb{background:linear-gradient(90deg,var(--pink),var(--cyber));border-radius:999px;}
  .panel{flex:0 0 min(78vw,330px);width:min(78vw,330px);min-height:0;aspect-ratio:1800/2411;scroll-snap-align:center;
    background-size:cover;background-position:center top;}
  .panel:first-child{margin-left:0;}
  .panel-body{padding:1rem;}
  .panel:hover{transform:none;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .trade-grid, .project-grid{grid-template-columns:1fr;}
  .project-featured,.project-support{grid-column:1;min-height:0;}
  .project-proof div{grid-template-columns:58px 1fr;}
  .work-to-jnash{height:42vh;min-height:300px;}
  .door{height:50vh;}
  .resume-paper{padding:2.2rem 1.5rem;}
  .block-title .line{white-space:normal;}
}
@media(max-width:760px){
  .hud{padding:.75rem 1rem;background:rgba(8,8,10,.92);}
  .hud-brand{font-size:.9rem;}
  .hud-menu-toggle{display:block;position:relative;z-index:2;}
  .hud-links{position:absolute;top:100%;left:0;right:0;display:grid;gap:0;padding:.45rem 1rem 1rem;background:rgba(8,8,10,.96);
    border-bottom:2px solid var(--pink);transform:translateY(-10px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .2s ease,transform .2s ease,visibility .2s;}
  .hud-links a,.hud-links button{display:block;width:100%;padding:.8rem;text-align:left;border-width:0 0 1px;font-family:var(--font-display);}
  .hud.menu-open .hud-links{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto;}
  .hud.menu-open .hud-menu-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg);}
  .hud.menu-open .hud-menu-toggle span:nth-child(2){opacity:0;}
  .hud.menu-open .hud-menu-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
}
@media(max-width:640px){
  .world-nash .boombox-float{top:38vh;left:50%;right:auto;width:calc(100vw - 28px);transform:translate(-50%,-12px);}
  .world-nash .boombox-float.in{transform:translate(-50%,0);}
  .world-nash .boombox-screen iframe{height:132px;}
  .world-nash .boombox-float .link-note{display:none;}
  /* Force a single row so the social buttons never wrap down into the
     NASTYNASH label sitting near the bottom of the viewport. */
  .world-nash .boombox-float .social-row{flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:.35rem;}
  .world-nash .boombox-float .social-row::-webkit-scrollbar{display:none;}
  .world-nash .boombox-float .social-btn{flex:0 0 auto;font-size:.6rem;padding:.35em .55em;white-space:nowrap;}
  .nash-bottom-label{bottom:5vh;}
}