*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#111722;background:#e9e0ce;font-family:Inter,Arial,sans-serif;overflow-x:hidden}:root{--red:#df1931;--blue:#075fa9;--blue2:#1487df;--yellow:#ffd329;--paper:#efe6d5;--ink:#111722}a{text-decoration:none;color:inherit}h1,h2,h3,h4{font-family:Bangers,Impact,sans-serif;font-weight:400}button{font:inherit}
.paper{position:fixed;inset:0;z-index:-20;background:linear-gradient(130deg,#f4eddf,#ddd2bd);pointer-events:none}.halftone{position:fixed;inset:0;z-index:-19;pointer-events:none;background-image:radial-gradient(rgba(17,23,34,.22) .8px,transparent .8px);background-size:7px 7px;opacity:.18}.ink-cloud{position:fixed;z-index:-18;pointer-events:none;filter:blur(1px);opacity:.12}.cloud-red{width:800px;height:600px;right:-300px;top:50px;background:#df1931;clip-path:polygon(5% 50%,20% 25%,45% 28%,62% 0,78% 28%,100% 40%,80% 60%,87% 90%,57% 74%,35% 100%,26% 72%,0 80%)}.cloud-blue{width:850px;height:650px;left:-400px;bottom:-250px;background:#075fa9;clip-path:polygon(0 45%,25% 30%,39% 8%,58% 25%,82% 4%,100% 50%,79% 62%,87% 100%,51% 79%,26% 100%,28% 68%)}.global-web{position:fixed;inset:-20%;z-index:-17;pointer-events:none;background:repeating-radial-gradient(circle at 78% 20%,transparent 0 70px,rgba(17,23,34,.14) 71px 73px,transparent 74px 115px),repeating-conic-gradient(from 0deg at 78% 20%,transparent 0 14deg,rgba(17,23,34,.12) 15deg 15.3deg,transparent 16deg 30deg);mask-image:radial-gradient(circle at 78% 20%,black,transparent 60%);transform:rotate(-5deg)}.city-silhouette{position:fixed;bottom:0;left:0;right:0;height:120px;z-index:-16;background:#101722;opacity:.08;clip-path:polygon(0 100%,0 55%,4% 55%,4% 25%,9% 25%,9% 62%,14% 62%,14% 35%,20% 35%,20% 70%,25% 70%,25% 20%,30% 20%,30% 60%,37% 60%,37% 32%,44% 32%,44% 68%,51% 68%,51% 23%,58% 23%,58% 55%,65% 55%,65% 30%,71% 30%,71% 64%,78% 64%,78% 18%,84% 18%,84% 58%,91% 58%,91% 35%,96% 35%,96% 62%,100% 62%,100% 100%)}
#loader{position:fixed;inset:0;z-index:300;background:#df1931;color:#fff;display:grid;place-content:center;text-align:center}.pow{font:90px Bangers;color:var(--yellow);text-shadow:6px 6px 0 #111;transform:rotate(-6deg)}.loader-name{font:30px Bangers;letter-spacing:3px}.loader-line{height:7px;width:250px;background:#111;margin:20px auto;overflow:hidden;border:2px solid #111}.loader-line i{display:block;width:0;height:100%;background:#fff}
header{position:fixed;z-index:100;top:0;left:0;right:0;height:72px;background:rgba(239,230,213,.96);border-bottom:4px solid #111;display:flex;align-items:center;justify-content:space-between;padding:0 30px;box-shadow:0 5px 0 rgba(0,0,0,.08)}.brand{font:45px Bangers;text-shadow:2px 2px 0 #fff;transform:rotate(-3deg)}.brand span{color:var(--red)}nav{display:flex;gap:28px}nav a{font:15px Bangers;letter-spacing:1px}nav a:hover{color:var(--red)}.header-btn{font:14px Bangers;background:var(--yellow);border:3px solid #111;padding:8px 12px;box-shadow:4px 4px 0 #111}.menu{display:none;border:0;background:none;font-size:22px}
.hero{min-height:100vh;padding:102px 5vw 42px;display:grid;grid-template-columns:1fr 1.08fr;gap:38px;align-items:center;position:relative}.hero-left{padding:25px}.issue-tag{display:inline-block;background:#111;color:#fff;padding:7px 11px;font:12px Bangers;letter-spacing:1px;transform:rotate(-2deg)}.caption{font:24px "Permanent Marker";margin:27px 0 4px;transform:rotate(-2deg)}h1{font-size:clamp(100px,12vw,175px);line-height:.72;margin:12px 0 28px;text-shadow:5px 5px 0 #111;letter-spacing:1px}h1 .red{color:var(--red);margin-left:8vw}h1 .blue{color:var(--blue2);margin-left:3vw}.intro{max-width:590px;font-size:14px;line-height:1.85;border-left:5px solid var(--red);padding-left:15px}.buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}.comic-btn{display:inline-flex;align-items:center;gap:18px;padding:12px 16px;border:3px solid #111;box-shadow:5px 5px 0 #111;color:#fff;font:18px Bangers;transition:.2s}.comic-btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #111}.red-btn{background:var(--red)}.blue-btn{background:var(--blue)}.socials{display:flex;gap:7px;margin-top:22px}.socials a{background:#111;color:#fff;font:10px Bangers;padding:7px 10px;box-shadow:3px 3px 0 var(--red)}
.hero-comic{height:650px;border:5px solid #111;background:#124f8c;box-shadow:12px 12px 0 #111;position:relative;overflow:hidden;transform:rotate(.5deg)}.comic-sky{position:absolute;inset:0;background:linear-gradient(145deg,#df1931 0 31%,#153d78 31% 38%,#0a64aa 38% 100%);overflow:hidden}.comic-sky:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.5) 1px,transparent 1px);background-size:8px 8px;opacity:.17}.panel-label{position:absolute;z-index:20;top:14px;right:14px;background:#fff;border:3px solid #111;padding:5px 9px;font:12px Bangers}.speed-lines{position:absolute;inset:-30%;background:repeating-conic-gradient(from 2deg at 50% 55%,transparent 0 8deg,rgba(255,255,255,.18) 8.3deg 8.7deg,transparent 9deg 18deg);mask-image:radial-gradient(circle,black,transparent 67%);animation:spin 45s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.sunburst{position:absolute;width:650px;height:650px;left:50%;top:50%;transform:translate(-50%,-50%);background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.12) 0 6deg,transparent 6deg 14deg);mask-image:radial-gradient(circle,black 0 43%,transparent 68%)}.web-giant{position:absolute;width:560px;height:560px;left:50%;top:44%;transform:translate(-50%,-50%);border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 38px,rgba(255,255,255,.38) 39px 41px,transparent 42px 68px),repeating-conic-gradient(from 0deg,transparent 0 14deg,rgba(255,255,255,.30) 15deg 15.3deg,transparent 16deg 30deg);mask-image:radial-gradient(circle,black,transparent 75%);opacity:.7}.hero-silhouette{position:absolute;z-index:8;width:300px;height:500px;left:50%;top:48%;transform:translate(-50%,-50%);filter:drop-shadow(10px 12px 0 #111)}.sil-head{position:absolute;width:165px;height:190px;left:68px;top:8px;border:5px solid #111;border-radius:50%;background:linear-gradient(150deg,#e51b32 0 56%,#0a5da5 57%);overflow:hidden}.sil-head:before{content:"";position:absolute;inset:-20%;background:repeating-radial-gradient(circle at 50% 45%,transparent 0 25px,rgba(255,255,255,.45) 26px 28px,transparent 29px 45px),repeating-conic-gradient(transparent 0 14deg,rgba(255,255,255,.42) 15deg 15.3deg,transparent 16deg 30deg);opacity:.45}.sil-head:after{content:"";position:absolute;left:24px;top:65px;width:50px;height:78px;background:#fff;border:4px solid #111;clip-path:polygon(0 17%,100% 0,76% 100%,8% 76%);box-shadow:70px 0 0 -4px #fff,70px 0 0 0 #111}.sil-body{position:absolute;top:185px;left:34px;width:232px;height:280px;border:5px solid #111;border-radius:45% 45% 20% 20%;background:linear-gradient(145deg,#df1931 0 43%,#0a5da5 44%)}.sil-body:before{content:"";position:absolute;inset:-10%;background:repeating-radial-gradient(circle at 50% 15%,transparent 0 28px,rgba(255,255,255,.35) 29px 31px,transparent 32px 48px),repeating-conic-gradient(transparent 0 14deg,rgba(255,255,255,.35) 15deg 15.3deg,transparent 16deg 30deg);opacity:.3}.sil-arm{position:absolute;width:70px;height:190px;background:#0a5da5;border:5px solid #111;border-radius:50px;top:235px;z-index:-1}.sil-arm.a{left:5px;transform:rotate(16deg)}.sil-arm.b{right:5px;transform:rotate(-16deg)}.sil-web{position:absolute;z-index:20;width:100px;height:100px;border-radius:50%;border:2px solid rgba(255,255,255,.4);left:100px;top:250px}.floating-word{position:absolute;z-index:25;font:55px Bangers;color:#fff;text-shadow:4px 4px 0 #111}.word-wow{right:25px;top:70px;color:var(--yellow);transform:rotate(9deg)}.word-thwip{left:20px;bottom:35px;transform:rotate(-8deg)}.hero-copy-card{position:absolute;z-index:30;left:18px;top:145px;background:#f1e9da;border:3px solid #111;padding:12px 15px;box-shadow:5px 5px 0 #111;transform:rotate(-3deg);border-left:7px solid var(--red)}.hero-copy-card.second{left:auto;right:18px;top:auto;bottom:110px;border-left:3px solid #111;border-right:7px solid var(--blue);transform:rotate(3deg)}.hero-copy-card small{display:block;font-size:7px;letter-spacing:1.5px}.hero-copy-card strong{font-size:10px}.spider-symbol{position:absolute;z-index:25;bottom:80px;left:50%;transform:translateX(-50%);font:60px Bangers;color:#fff;text-shadow:4px 4px 0 #111}.panel-caption{position:absolute;bottom:0;left:0;right:0;background:#111;color:#fff;padding:9px;text-align:center;font:15px Bangers;letter-spacing:1px;z-index:35}

.section{position:relative;min-height:92vh;padding:125px 7vw;border-top:5px solid #111;background:#eee4d1}.number{position:absolute;top:22px;left:25px;background:#111;color:#fff;padding:7px 12px;font:22px Bangers;transform:rotate(-3deg)}.label{display:inline-block;background:var(--red);color:#fff;border:3px solid #111;padding:6px 12px;box-shadow:4px 4px 0 #111;font:16px Bangers;letter-spacing:1px}.section-title{margin-bottom:45px}.section-title h2,.lab .section-title h2{font-size:105px;line-height:.72;margin:20px 0}.section-title h2 em,.lab .section-title h2 em{font-style:normal;color:var(--blue);text-shadow:3px 3px 0 #111}.section-title p{font-size:11px}.story-panels{display:grid;grid-template-columns:.65fr 1.35fr .65fr;gap:28px;align-items:center}.speech-panel{background:#fff;border:4px solid #111;box-shadow:8px 8px 0 #111;padding:30px;transform:rotate(-3deg)}.speech-panel span{font:38px Bangers;color:var(--red)}.speech-panel h3{font-size:44px;line-height:.8;margin:10px 0}.speech-panel p{font:17px "Permanent Marker"}.story-text .mini{font-size:8px;letter-spacing:2px;font-weight:800}.story-text .large{font-size:25px;line-height:1.3}.story-text p{font-size:13px;line-height:1.85}.ticker{background:var(--yellow);border:3px solid #111;box-shadow:5px 5px 0 #111;padding:12px;font-size:8px;margin-top:25px;transform:rotate(1deg)}.newspaper{background:#d6cebd;border:4px solid #111;box-shadow:8px 8px 0 #111;padding:17px;transform:rotate(3deg);position:relative}.newspaper>div:first-child{font:23px Bangers;border-bottom:3px solid #111}.newspaper h3{font-size:43px;line-height:.78;margin:15px 0}.newspaper p{font:11px "Permanent Marker"}.stamp{position:absolute;bottom:25px;right:-15px;background:var(--red);color:#fff;border:3px solid #111;padding:7px;font:20px Bangers;transform:rotate(-8deg)}
.powers{background:#0c5f9f;color:#fff;background-image:radial-gradient(rgba(255,255,255,.20) 1px,transparent 1px);background-size:8px 8px}.powers .number{background:#fff;color:#111}.powers .label{background:var(--yellow);color:#111}.powers .section-title h2{color:#fff}.powers .section-title h2 em{color:var(--yellow)}.powers-comic{height:500px;border:5px solid #111;box-shadow:10px 10px 0 #111;position:relative;overflow:hidden;background:linear-gradient(135deg,#075398,#1789df)}.powers-comic:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 29px,rgba(255,255,255,.07) 30px 31px),repeating-linear-gradient(90deg,transparent 0 29px,rgba(255,255,255,.07) 30px 31px)}.panel-caption.top{position:absolute;top:0;bottom:auto;left:0;right:0;background:#111;color:#fff;padding:8px 13px;font:13px Bangers;letter-spacing:1px}.web-grid{position:absolute;width:500px;height:500px;left:50%;top:53%;transform:translate(-50%,-50%);border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 40px,rgba(255,255,255,.22) 41px 43px,transparent 44px 70px),repeating-conic-gradient(transparent 0 14deg,rgba(255,255,255,.2) 15deg 15.3deg,transparent 16deg 30deg);mask-image:radial-gradient(circle,black,transparent 75%)}.skill{position:absolute;z-index:5;width:96px;height:88px;background:#f2e8d6;color:#111;border:4px solid #111;box-shadow:5px 5px 0 #111;display:grid;place-content:center;text-align:center;transform:rotate(var(--r));transition:.2s}.skill:hover{transform:rotate(0) scale(1.12);z-index:9}.skill b{font:38px Bangers}.skill span{font-size:7px;font-weight:800;letter-spacing:1px}.s1{left:7%;top:18%;--r:-6deg}.s2{left:36%;top:10%;--r:4deg}.s3{right:6%;top:17%;--r:-5deg}.s4{left:13%;top:52%;--r:5deg}.s5{left:43%;top:43%;--r:-3deg}.s6{right:11%;top:52%;--r:4deg}.s7{left:27%;bottom:7%;--r:-5deg}.s8{right:27%;bottom:7%;--r:6deg}.burst-power{position:absolute;right:25px;bottom:25px;background:var(--red);color:#fff;border:4px solid #111;box-shadow:5px 5px 0 #111;padding:14px;clip-path:polygon(50% 0,60% 34%,100% 50%,62% 63%,50% 100%,38% 64%,0 50%,38% 34%);font:24px Bangers;text-align:center;transform:rotate(8deg)}
.lab .section-title{margin-bottom:40px}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.project{min-height:390px;border:5px solid #111;box-shadow:9px 9px 0 #111;padding:22px;position:relative;transition:.25s}.project:hover{transform:translateY(-9px) rotate(-1deg)}.p-red{background:var(--red);color:#fff}.p-blue{background:var(--blue);color:#fff}.p-yellow{background:var(--yellow);color:#111}.project-top{font:13px Bangers;letter-spacing:1px}.big-symbol{position:absolute;right:18px;top:5px;font-size:55px;text-shadow:3px 3px 0 rgba(0,0,0,.2)}.project h3{font-size:70px;line-height:.72;margin:85px 0 20px;text-shadow:3px 3px 0 #111}.p-yellow h3{text-shadow:3px 3px 0 #fff}.project p{font-size:11px;line-height:1.7;max-width:270px}.project footer{position:absolute;left:22px;right:22px;bottom:20px;border-top:3px solid currentColor;padding-top:9px;font-size:7px;font-weight:800;letter-spacing:1px}.project footer b{float:right;font-size:20px}
.life{background:var(--yellow)}.life .section-title h2 em{color:var(--red)}.life-panels{display:grid;grid-template-columns:1.2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:18px}.life-main{grid-row:span 2;border:5px solid #111;box-shadow:9px 9px 0 #111;background:#f2eadb;padding:30px;position:relative;overflow:hidden}.marker{font:18px "Permanent Marker";transform:rotate(-2deg)}.life-main h3{font-size:95px;line-height:.72;margin:35px 0}.life-main h3 em{font-style:normal;color:var(--red)}.doodle{position:absolute;right:-5px;bottom:10px;font:65px Bangers;color:var(--blue);text-shadow:4px 4px 0 #111;transform:rotate(-10deg)}.life-card{border:5px solid #111;box-shadow:7px 7px 0 #111;background:#fff;padding:17px;transform:rotate(var(--r));transition:.25s}.life-card:hover{transform:rotate(0) translateY(-7px)}.life-card div{font-size:52px}.life-card b{font:15px Bangers}.life-card h4{font-size:38px;margin:4px 0}.life-card p{font-size:9px}.blue-life{background:var(--blue);color:#fff}
.contact{min-height:85vh;background:var(--red);border-top:5px solid #111;display:grid;place-items:center;position:relative;overflow:hidden}.contact:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.2) 1px,transparent 1px);background-size:8px 8px}.contact-web{position:absolute;width:900px;height:900px;border-radius:50%;border:3px solid rgba(255,255,255,.15);box-shadow:0 0 0 70px rgba(255,255,255,.03),0 0 0 140px rgba(255,255,255,.03),0 0 0 210px rgba(255,255,255,.02)}.contact-card{z-index:5;background:#efe6d5;border:5px solid #111;box-shadow:12px 12px 0 #111;padding:55px 70px;text-align:center;transform:rotate(-2deg)}.contact-card h2{font-size:105px;line-height:.72;margin:20px 0}.contact-card h2 em{font-style:normal;color:var(--blue);text-shadow:3px 3px 0 #111}.contact-card p{font-size:12px}.center{justify-content:center}.final-burst{position:absolute;right:8%;bottom:12%;z-index:7;font:70px Bangers;color:var(--yellow);text-shadow:5px 5px 0 #111;transform:rotate(12deg)}
footer{background:#111;color:#eee;padding:25px 30px;display:flex;justify-content:space-between;font-size:7px;letter-spacing:1.5px}footer b{color:var(--yellow)}
@media(max-width:950px){header nav,.header-btn{display:none}.menu{display:block}.hero{grid-template-columns:1fr;padding:100px 20px 45px}.hero-left{padding:20px}.hero-comic{height:590px}.story-panels,.powers-layout{grid-template-columns:1fr}.project-grid{grid-template-columns:1fr}.life-panels{grid-template-columns:1fr 1fr}.life-main{grid-column:span 2;grid-row:auto}.story-panels .newspaper{max-width:300px;margin:auto}}
@media(max-width:600px){h1{font-size:82px}.hero{padding-left:10px;padding-right:10px}.hero-comic{height:500px}.hero-silhouette{transform:translate(-50%,-50%) scale(.78)}.floating-word{font-size:38px}.hero-copy-card{transform:scale(.85) rotate(-3deg);left:4px}.hero-copy-card.second{right:4px}.section{padding:95px 20px}.section-title h2,.lab .section-title h2{font-size:80px}.powers-comic{height:470px}.skill{width:78px;height:72px}.skill b{font-size:31px}.s1{left:2%}.s2{left:34%}.s3{right:2%}.s4{left:6%}.s5{left:40%}.s6{right:3%}.s7{left:20%}.s8{right:20%}.project{min-height:350px}.project h3{font-size:60px}.life-panels{grid-template-columns:1fr}.life-main{grid-column:auto}.life-main h3{font-size:75px}.contact-card{padding:38px 22px}.contact-card h2{font-size:78px}.final-burst{font-size:45px;right:2%;bottom:4%}footer{flex-direction:column;gap:9px}}


/* V4 headline spacing + real-life photo panel */
.hero-left h1{display:flex;flex-direction:column;align-items:flex-start;gap:0.01em}
.hero-left h1 span{display:block;white-space:nowrap}
.hero-left h1 .red{margin-left:0.45em}
.hero-left h1 .blue{margin-left:1.0em}
.real-life-card{
  position:absolute;
  z-index:40;
  width:176px;
  right:22px;
  bottom:58px;
  padding:8px 8px 10px;
  background:#efe6d5;
  border:4px solid #111;
  box-shadow:7px 7px 0 #111;
  transform:rotate(4deg);
}
.real-life-card:before{
  content:"";
  position:absolute;
  inset:5px;
  border:2px solid rgba(17,23,34,.18);
  pointer-events:none;
}
.real-life-card img{
  display:block;
  width:100%;
  height:205px;
  object-fit:cover;
  object-position:center 24%;
  filter:saturate(.9) contrast(1.05);
  border:2px solid #111;
}
.real-life-tag{
  position:absolute;
  z-index:3;
  top:-18px;
  left:-18px;
  background:#ffd329;
  color:#111;
  border:3px solid #111;
  box-shadow:3px 3px 0 #111;
  padding:5px 7px;
  font:10px Bangers;
  transform:rotate(-7deg);
}
.real-life-name{
  font:22px Bangers;
  text-align:center;
  margin-top:6px;
  text-shadow:2px 2px 0 #fff;
}
@media(max-width:600px){
  .hero-left h1 .red{margin-left:.25em}
  .hero-left h1 .blue{margin-left:.55em}
  .real-life-card{width:132px;right:8px;bottom:50px;padding:5px}
  .real-life-card img{height:155px}
  .real-life-name{font-size:17px}
  .real-life-tag{font-size:8px;left:-8px}
}


/* V5 — replace mascot/cartoon with detailed comic-book Spider-Man art */
.real-spidey-art{
  position:absolute;
  z-index:12;
  width:430px;
  height:470px;
  left:50%;
  top:51%;
  transform:translate(-50%,-50%) rotate(-2deg);
  display:grid;
  place-items:center;
}
.art-frame{
  width:100%;
  height:100%;
  border:6px solid #111;
  background:#111;
  padding:9px;
  box-shadow:12px 14px 0 #111;
  overflow:hidden;
  transform:skewY(-1deg);
  position:relative;
}
.art-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  filter:contrast(1.12) saturate(1.08);
}
.art-ink{
  position:absolute;
  inset:9px;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 45%, rgba(0,0,0,.18) 72%, rgba(0,0,0,.52) 100%),
    repeating-linear-gradient(90deg,transparent 0 5px,rgba(255,255,255,.035) 6px 7px);
  mix-blend-mode:multiply;
}
.spidey-label{
  position:absolute;
  left:-17px;
  bottom:18px;
  z-index:5;
  background:#df1931;
  color:#fff;
  border:4px solid #111;
  box-shadow:5px 5px 0 #111;
  padding:9px 14px;
  font:25px Bangers;
  letter-spacing:.5px;
  transform:rotate(-5deg);
}
.art-credit{
  position:absolute;
  z-index:35;
  right:12px;
  bottom:76px;
  color:rgba(255,255,255,.72);
  font-size:7px;
  letter-spacing:.5px;
  background:rgba(0,0,0,.48);
  padding:4px 6px;
}
@media(max-width:600px){
  .real-spidey-art{width:315px;height:350px;top:48%}
  .spidey-label{font-size:19px;left:-8px}
  .art-credit{right:5px;bottom:55px;font-size:6px}
}

/* V6 — richer backgrounds, expanded stack and gaming life */
.themed-section{position:relative;overflow:hidden}
.themed-section::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.28}
.themed-section>*{position:relative;z-index:2}
.story::before{background:radial-gradient(circle at 85% 20%,rgba(223,25,49,.34),transparent 28%),linear-gradient(120deg,rgba(7,95,169,.13),transparent 45%),radial-gradient(rgba(17,23,34,.28) 1px,transparent 1px);background-size:auto,auto,9px 9px}
.powers{background:#071f3c;background-image:linear-gradient(135deg,#061a31 0%,#0b5e9e 45%,#06365e 100%);color:#fff}
.powers::before{background:radial-gradient(circle at 75% 30%,rgba(0,191,255,.25),transparent 22%),linear-gradient(110deg,transparent 0 45%,rgba(223,25,49,.22) 46% 60%,transparent 61%),repeating-linear-gradient(90deg,transparent 0 59px,rgba(255,255,255,.06) 60px 61px)}
.lab{background:#16131b;color:#fff;background-image:linear-gradient(135deg,rgba(223,25,49,.18),transparent 40%),radial-gradient(circle at 80% 25%,rgba(0,129,255,.25),transparent 28%)}
.lab::before{background:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);background-size:8px 8px;opacity:.16}
.life{background:#e4a900;background-image:linear-gradient(135deg,#ffd21f 0%,#f6bb00 55%,#df1931 145%);color:#111}
.life::before{background:radial-gradient(circle at 90% 10%,rgba(7,95,169,.35),transparent 25%),repeating-linear-gradient(135deg,transparent 0 80px,rgba(255,255,255,.11) 81px 84px)}
.contact{background:linear-gradient(135deg,#8f0d1d,#df1931 48%,#075fa9 150%)}

/* Expanded powers board */
.powers-comic{height:auto;min-height:650px;padding:68px 24px 30px;background:linear-gradient(135deg,#062f57,#087bc7 55%,#07518f);overflow:hidden}
.powers-comic:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 0 32%,rgba(255,255,255,.08) 33% 36%,transparent 37% 62%,rgba(223,25,49,.10) 63% 75%,transparent 76%);z-index:1}
.tech-photo-wash{position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(3,24,48,.28),rgba(3,24,48,.72)),url("assets/spiderman-comic-mask.png") center 42%/cover no-repeat;filter:saturate(.75) contrast(1.1);opacity:.14;mix-blend-mode:screen}
.powers-comic .web-grid{z-index:2;width:700px;height:700px;opacity:.42}
.skills-grid{position:relative;z-index:8;display:grid;grid-template-columns:repeat(5,minmax(100px,1fr));gap:16px;max-width:1100px;margin:0 auto}
.skills-grid .skill{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:auto;height:105px;transform:rotate(var(--r,0deg));}
.skills-grid .skill:nth-child(3n){--r:2deg}.skills-grid .skill:nth-child(3n+1){--r:-2deg}.skills-grid .skill:nth-child(3n+2){--r:1deg}
.skills-grid .skill:hover{transform:translateY(-7px) rotate(0) scale(1.05)}
.skills-grid .skill b{font-size:32px}
.skills-grid .skill span{font-size:7px;line-height:1.2;padding:0 5px}
.burst-power{position:absolute!important;z-index:15!important;right:26px!important;bottom:22px!important;width:150px!important;height:135px!important;background:none!important;border:0!important;box-shadow:none!important;clip-path:none!important;transform:rotate(8deg)!important;display:grid!important;place-items:center!important;align-content:center!important;color:#fff!important;font:28px/0.75 Bangers!important;text-align:center!important}
.burst-power:before{content:"";position:absolute;inset:0;background:#df1931;border:4px solid #111;box-shadow:6px 6px 0 #111;clip-path:polygon(50% 0,59% 24%,77% 7%,76% 29%,100% 34%,80% 50%,98% 67%,75% 70%,78% 95%,58% 78%,50% 100%,40% 78%,19% 96%,23% 71%,0 68%,20% 51%,1% 34%,25% 29%,21% 6%,42% 24%)}
.burst-power span{position:relative;z-index:2;text-shadow:3px 3px 0 #111;display:block}
.burst-power span:first-child{transform:rotate(-3deg)}
.burst-power span:last-child{transform:rotate(3deg)}
.tech-stamp{position:absolute;z-index:12;left:20px;bottom:22px;background:#ffd329;color:#111;border:4px solid #111;box-shadow:5px 5px 0 #111;padding:9px 12px;font:20px/0.75 Bangers;transform:rotate(-6deg)}

/* Gaming zone */
.gaming-zone{margin-top:80px;display:grid;grid-template-columns:.8fr 1fr 1.4fr;gap:22px;align-items:stretch;position:relative}
.gaming-heading{padding:18px 4px}
.gaming-heading h3{font-size:70px;line-height:.75;margin:22px 0;text-shadow:3px 3px 0 #fff}
.gaming-heading h3 em{font-style:normal;color:#df1931;text-shadow:3px 3px 0 #fff}
.gaming-heading p{font-size:11px;line-height:1.7;max-width:300px}
.yellow-label{background:#111;color:#ffd329}
.gaming-cover{position:relative;min-height:390px;border:5px solid #111;background:#111;box-shadow:9px 9px 0 #111;overflow:hidden;transform:rotate(-2deg)}
.gaming-cover img{width:100%;height:100%;min-height:390px;object-fit:cover;object-position:center;filter:saturate(.75) contrast(1.12);opacity:.82}
.gaming-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.88));}
.gaming-cover-text{position:absolute;z-index:3;left:18px;bottom:18px;color:#fff;font:74px/0.72 Bangers;text-shadow:5px 5px 0 #df1931}
.controller-mark{position:absolute;z-index:3;right:20px;top:18px;color:#ffd329;font-size:50px;text-shadow:3px 3px 0 #111}
.game-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.game-card{min-height:185px;border:4px solid #111;box-shadow:6px 6px 0 #111;padding:17px;position:relative;overflow:hidden;color:#fff}
.game-card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.28));pointer-events:none;z-index:0}
.game-card span,.game-card h4,.game-card p{position:relative;z-index:2}
.game-card span{font:11px Bangers;letter-spacing:1px}
.game-card h4{font-size:45px;line-height:.72;margin:28px 0 12px;text-shadow:3px 3px 0 #111}
.game-card p{font-size:8px;line-height:1.55;max-width:220px}
.game-card.nfs{
  background-image:linear-gradient(90deg,rgba(3,10,22,.82),rgba(3,10,22,.25)),url('assets/nfs-game.jpg');
  background-size:cover;background-position:center;
}
.game-card.hogwarts{
  background-image:linear-gradient(90deg,rgba(12,12,28,.82),rgba(20,20,35,.22)),url('assets/hogwarts-game.png');
  background-size:cover;background-position:center;
}
.game-card.gta{
  background-image:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.18)),url('assets/gta-v-game.png');
  background-size:cover;background-position:center;
}
.game-card.spider{
  background-image:linear-gradient(90deg,rgba(70,0,8,.78),rgba(70,0,8,.18)),url('assets/spiderman-game.jpg');
  background-size:cover;background-position:center;
}
.game-card.mk{
  background-image:linear-gradient(90deg,rgba(0,0,0,.78),rgba(78,25,0,.22)),url('assets/mortal-kombat-game.jpg');
  background-size:cover;background-position:center;
}

@media(max-width:1050px){
 .skills-grid{grid-template-columns:repeat(4,minmax(100px,1fr))}
 .gaming-zone{grid-template-columns:1fr 1fr}
 .gaming-heading{grid-column:span 2}
 .gaming-cover{min-height:330px}.gaming-cover img{min-height:330px}
}
@media(max-width:700px){
 .skills-grid{grid-template-columns:repeat(2,1fr);gap:11px}
 .powers-comic{padding:62px 12px 125px;min-height:900px}
 .skills-grid .skill{height:88px}.skills-grid .skill b{font-size:27px}
 .burst-power{right:10px!important;bottom:15px!important;transform:scale(.85) rotate(8deg)!important}
 .tech-stamp{left:10px;bottom:20px;transform:scale(.8) rotate(-6deg)}
 .gaming-zone{grid-template-columns:1fr;gap:18px}
 .gaming-heading{grid-column:auto}.gaming-heading h3{font-size:58px}
 .gaming-cover{min-height:330px}.gaming-cover img{min-height:330px}
 .game-grid{grid-template-columns:1fr 1fr}.game-card{min-height:170px}.game-card h4{font-size:35px}
}

/* =========================================================
   V7 POWERS — COMIC TECH CONSTELLATION
   Replaces the "box grid" with a web/reactor interface.
   ========================================================= */
.powers-v7{
  min-height:650px;
  height:650px;
  border:5px solid #111;
  box-shadow:11px 11px 0 #111;
  background:
    radial-gradient(circle at 50% 50%,rgba(25,143,228,.55),transparent 28%),
    linear-gradient(135deg,#062e5b 0%,#075b98 48%,#0b8bd1 100%);
  isolation:isolate;
}
.powers-v7:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.065) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.065) 1px,transparent 1px),
    radial-gradient(rgba(255,255,255,.35) .9px,transparent .9px);
  background-size:34px 34px,34px 34px,7px 7px;
  opacity:.75;
  z-index:-1;
}
.powers-v7:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg,transparent 0 36%,rgba(255,255,255,.07) 36.2% 37%,transparent 37.2%),
    linear-gradient(65deg,transparent 0 58%,rgba(255,255,255,.06) 58.2% 59%,transparent 59.2%);
  pointer-events:none;
}
.power-web{
  position:absolute;
  z-index:1;
  width:570px;height:570px;
  left:50%;top:53%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    repeating-radial-gradient(circle,transparent 0 54px,rgba(255,255,255,.20) 55px 57px,transparent 58px 90px),
    repeating-conic-gradient(from 0deg,transparent 0 14deg,rgba(255,255,255,.15) 14.5deg 15deg,transparent 15.5deg 30deg);
  mask-image:radial-gradient(circle,black 0 76%,transparent 77%);
  opacity:.85;
  animation:powerSpin 38s linear infinite;
}
@keyframes powerSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}

.core-pulse{
  position:absolute;
  z-index:20;
  left:50%;top:53%;
  width:170px;height:170px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  display:grid;
  place-content:center;
  text-align:center;
  background:
    radial-gradient(circle,#f5e8d4 0 44%,#ffd329 45% 51%,#df1931 52% 58%,#111 59% 62%,#0a69ac 63%);
  border:5px solid #111;
  box-shadow:0 0 0 8px rgba(255,255,255,.12),8px 9px 0 #111,0 0 45px rgba(255,211,41,.35);
}
.core-pulse strong{
  position:relative;z-index:4;
  font:31px/0.75 Bangers;
  color:#111;
  text-shadow:2px 2px 0 #fff;
}
.core-pulse small{
  position:relative;z-index:4;
  margin-top:10px;
  font-size:6px;
  font-weight:900;
  letter-spacing:1.3px;
}
.core-icon{
  position:absolute;
  z-index:5;
  top:-19px;left:50%;
  transform:translateX(-50%);
  width:34px;height:34px;
  display:grid;place-items:center;
  background:#111;color:#ffd329;
  border-radius:50%;
  border:3px solid #fff;
  font-size:17px;
}
.core-ring{position:absolute;border:2px solid rgba(255,255,255,.45);border-radius:50%;inset:-17px;animation:corePulse 2.4s ease-in-out infinite}
.core-ring.r2{inset:-35px;border-color:rgba(255,211,41,.22);animation-delay:.7s}
@keyframes corePulse{50%{transform:scale(1.04);opacity:.55}}

.power-node{
  position:absolute;
  z-index:15;
  min-width:94px;
  padding:9px 12px 8px;
  color:#fff;
  background:rgba(7,31,61,.82);
  border:2px solid rgba(255,255,255,.78);
  border-radius:3px 14px 3px 14px;
  box-shadow:4px 4px 0 rgba(0,0,0,.65);
  display:flex;
  align-items:center;
  gap:8px;
  transform:rotate(var(--rot,0deg));
  transition:.25s ease;
  backdrop-filter:blur(4px);
}
.power-node:before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  background:#ffd329;
  box-shadow:0 0 9px #ffd329;
  flex:none;
}
.power-node b{
  font:25px/1 Bangers;
  color:#fff;
  text-shadow:2px 2px 0 #111;
}
.power-node span{
  font-size:7px;
  font-weight:900;
  letter-spacing:.7px;
  line-height:1.05;
}
.power-node:hover{
  z-index:50;
  background:#df1931;
  border-color:#fff;
  transform:translateY(-6px) rotate(0deg) scale(1.08);
  box-shadow:5px 7px 0 #111;
}
.n1{left:5%;top:15%;--rot:-5deg}.n2{left:24%;top:8%;--rot:3deg}.n3{left:43%;top:10%;--rot:-2deg}.n4{right:23%;top:8%;--rot:4deg}.n5{right:5%;top:16%;--rot:-4deg}
.n6{left:4%;top:34%;--rot:3deg}.n7{left:22%;top:30%;--rot:-3deg}.n8{right:22%;top:30%;--rot:3deg}.n9{right:4%;top:35%;--rot:-3deg}
.n10{left:5%;top:56%;--rot:-4deg}.n11{left:22%;top:55%;--rot:3deg}.n12{right:22%;top:54%;--rot:-2deg}.n13{right:4%;top:57%;--rot:4deg}
.n14{left:8%;bottom:12%;--rot:4deg}.n15{left:28%;bottom:7%;--rot:-3deg}.n16{right:29%;bottom:7%;--rot:3deg}.n17{right:9%;bottom:12%;--rot:-4deg}
.n18{left:36%;top:68%;--rot:2deg}.n19{left:51%;top:68%;--rot:-2deg}.n20{left:43%;bottom:4%;--rot:1deg}

.power-legend{
  position:absolute;
  z-index:30;
  left:18px;bottom:16px;
  display:flex;gap:7px;flex-wrap:wrap;
  background:rgba(17,23,34,.82);
  border:2px solid #fff;
  padding:7px 9px;
  box-shadow:4px 4px 0 #111;
}
.power-legend span{
  font:9px Bangers;color:#fff;letter-spacing:.7px;
  display:flex;align-items:center;gap:4px;
}
.power-legend i{width:7px;height:7px;background:#ffd329;border-radius:50%;display:block}
.power-legend span:nth-child(2) i{background:#2fd0ff}
.power-legend span:nth-child(3) i{background:#ff4d67}
.power-legend span:nth-child(4) i{background:#fff}

.powers-v7 .burst-power{
  position:absolute!important;
  z-index:35!important;
  right:22px!important;
  bottom:15px!important;
  width:150px!important;
  height:115px!important;
  display:grid!important;
  place-content:center!important;
  gap:0!important;
  padding:0!important;
  background:#df1931!important;
  color:#fff!important;
  border:4px solid #111!important;
  box-shadow:6px 6px 0 #111!important;
  clip-path:polygon(50% 0,59% 25%,80% 8%,78% 33%,100% 42%,80% 54%,91% 77%,65% 69%,55% 100%,43% 75%,18% 90%,25% 63%,0 55%,22% 42%,8% 20%,36% 28%)!important;
  transform:rotate(5deg)!important;
  text-align:center!important;
}
.powers-v7 .burst-power:before{display:none!important}
.powers-v7 .burst-power span{
  position:relative;z-index:3;
  display:block!important;
  font:31px/.72 Bangers!important;
  color:#fff!important;
  text-shadow:3px 3px 0 #111!important;
  transform:rotate(-4deg);
}
.powers-v7 .burst-power span+span{font-size:27px!important}

@media(max-width:950px){
  .powers-v7{height:760px;min-height:760px}
  .power-node{min-width:82px;padding:7px 8px}
  .power-node b{font-size:21px}
  .power-node span{font-size:6px}
  .n1{left:2%}.n5{right:2%}.n6{left:2%}.n9{right:2%}.n10{left:2%}.n13{right:2%}
}
@media(max-width:700px){
  .powers-v7{
    height:auto;min-height:0;
    padding:70px 12px 18px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    background:
      radial-gradient(circle at 50% 22%,rgba(20,145,225,.7),transparent 28%),
      linear-gradient(145deg,#062e5b,#087fc0);
  }
  .powers-v7 .panel-caption.top{
    top:0;
    font-size:11px;
    padding:8px;
  }
  .power-web{
    position:absolute;
    width:430px;height:430px;
    top:170px;left:50%;
    opacity:.55;
  }
  .core-pulse{
    position:relative;
    left:auto;top:auto;
    transform:none;
    grid-column:1/-1;
    justify-self:center;
    width:150px;height:150px;
    margin:4px auto 16px;
    order:0;
  }
  .power-node{
    position:relative!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    width:100%;
    min-width:0;
    height:52px;
    padding:6px 8px;
    transform:rotate(0)!important;
    box-shadow:3px 3px 0 #111;
    z-index:25;
  }
  .power-node:before{width:5px;height:5px}
  .power-node b{font-size:22px;min-width:36px}
  .power-node span{font-size:6px}
  .power-node:nth-of-type(2n){background:rgba(222,25,49,.82)}
  .power-node:hover{transform:translateY(-3px) scale(1.02)!important}
  .power-legend{
    position:relative;
    left:auto;bottom:auto;
    grid-column:1/-1;
    justify-content:center;
    margin-top:6px;
    order:25;
  }
  .powers-v7 .burst-power{
    position:absolute!important;
    right:8px!important;
    bottom:72px!important;
    width:115px!important;height:90px!important;
    transform:rotate(5deg) scale(.8)!important;
  }
  .powers-v7 .tech-stamp{display:none}
}
@media(max-width:430px){
  .powers-v7{grid-template-columns:1fr;padding-left:10px;padding-right:10px}
  .power-node{height:48px}
  .power-node:nth-of-type(n){grid-column:auto}
  .power-web{width:350px;height:350px}
  .core-pulse{width:138px;height:138px}
  .core-pulse strong{font-size:27px}
  .powers-v7 .burst-power{bottom:65px;right:2px}
}

/* V9 polish — stable off-duty composition; no flickering/stacking overlays */
.core-pulse small{color:#111!important;text-shadow:none!important;font-size:7px!important;font-weight:1000!important;opacity:1!important}
.core-pulse strong{color:#111!important;text-shadow:2px 2px 0 #fff!important}
.powers-v7{margin-top:10px}

/* Keep the Off Duty section in one stable stacking context. The previous negative-z pseudo
   layers could visually shimmer/flash while scrolling in Chromium. */
.life{isolation:isolate;background:
  radial-gradient(rgba(17,23,34,.10) 1px,transparent 1px),
  linear-gradient(135deg,#ffd21f 0%,#f7bd08 58%,#efaa12 100%) !important;
  background-size:9px 9px,auto !important;}
.life::before{display:none!important}
.life > *{position:relative;z-index:2}
.life-panels,.gaming-zone{position:relative;z-index:3}
.life-card{position:relative;color:#fff;overflow:hidden;isolation:isolate;min-height:190px;transform:rotate(var(--r,0deg));}
.life-card::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(0,0,0,.28));}
.life-card::after{content:"";position:absolute;width:170px;height:170px;right:-70px;bottom:-90px;border-radius:50%;
  border:2px solid rgba(255,255,255,.14);box-shadow:0 0 0 24px rgba(255,255,255,.035);
  z-index:0;pointer-events:none;}
.life-card > *{position:relative;z-index:2}
.life-card:nth-of-type(2){background:linear-gradient(145deg,#0874c7,#102847)}
.life-card:nth-of-type(3){background:linear-gradient(145deg,#e3203b,#5b1020)}
.life-card:nth-of-type(4){background:linear-gradient(145deg,#5a2a91,#171b3c)}
.life-card:nth-of-type(5){background:linear-gradient(145deg,#087fc5,#063d70)}
.life-card div{filter:drop-shadow(3px 3px 0 #111)}
.life-card h4{color:#fff;text-shadow:3px 3px 0 #111}
.life-card p{color:#fff;font-weight:700}
.life-card b{color:#ffd329;text-shadow:2px 2px 0 #111}
.gaming-cover img{object-fit:cover;object-position:center 42%;filter:saturate(.92) contrast(1.08)}
.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.game-card.mk{background:linear-gradient(145deg,#151515,#8d1020 55%,#e52b37);}
.game-card.mk:after{content:"FIGHT!";position:absolute;right:-18px;bottom:-28px;font:75px Bangers;color:rgba(255,211,41,.16);transform:rotate(-12deg);pointer-events:none}
.game-card.mk h4{font-size:40px}
@media(max-width:700px){
  .powers-v7{height:auto!important;min-height:0!important;padding-bottom:95px!important}
  .core-pulse{margin-bottom:18px!important}
  .life-card{min-height:170px}
  .gaming-cover img{object-position:center 42%}
  .game-grid{grid-template-columns:1fr 1fr!important;gap:10px}
  .game-card{min-height:155px!important;padding:13px!important}
  .game-card h4{font-size:31px!important;margin:22px 0 9px!important}
}
@media(max-width:430px){
  .game-grid{grid-template-columns:1fr!important}
  .game-card{min-height:145px!important}
}


/* V9: deterministic paint order for Off Duty / Game Mode */
.life-main{z-index:2}
.gaming-heading,.gaming-cover,.game-grid{z-index:3}
.game-card{isolation:isolate}
.game-card::before{z-index:0}
.game-card span,.game-card h4,.game-card p{z-index:2}
@media(max-width:700px){
  .life-card{min-height:175px}
  .gaming-cover,.game-card{transform:none}
}

/* V10 — user-supplied game artwork */
.game-card{background-repeat:no-repeat;transition:transform .22s ease,filter .22s ease;background-color:#111}
.game-card:hover{transform:translateY(-5px) rotate(-.5deg);filter:saturate(1.08)}
.game-card h4,.game-card span,.game-card p{text-shadow:3px 3px 0 rgba(0,0,0,.75)}
@media(max-width:700px){.game-card:hover{transform:none}.game-card{background-position:center}.game-card h4{font-size:30px!important}}


/* V10.2 — navigation/section number visibility + clearer powers legend */
.section > .number{
  z-index:999 !important;
  top:14px !important;
  left:20px !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  min-width:34px;
  text-align:center;
  border:3px solid #111;
  box-shadow:4px 4px 0 #111;
  transform:rotate(-3deg) !important;
}
.powers > .number{background:#fff !important;color:#111 !important}
.lab > .number{background:#df1931 !important;color:#fff !important}
.life > .number{background:#df1931 !important;color:#fff !important}

/* Keep section title content safely below the number badge. */
.section > .section-title{position:relative;z-index:20;margin-top:14px}

/* Make the category strip impossible to miss. */
.powers-v7 .panel-caption.top{
  z-index:90 !important;
  font-size:15px !important;
  letter-spacing:2px !important;
  text-align:center !important;
  background:#111 !important;
  color:#fff !important;
  border-bottom:3px solid #ffd329;
}
.powers-v7 .power-legend{
  z-index:80 !important;
  left:50% !important;
  right:auto !important;
  top:45px !important;
  bottom:auto !important;
  transform:translateX(-50%) !important;
  flex-wrap:nowrap !important;
  padding:7px 13px !important;
  gap:12px !important;
  background:#111 !important;
  border:3px solid #fff !important;
  box-shadow:4px 4px 0 #111 !important;
}
.powers-v7 .power-legend span{
  font-size:13px !important;
  letter-spacing:1px !important;
  color:#fff !important;
  text-shadow:2px 2px 0 #000;
}
.powers-v7 .power-legend i{width:8px;height:8px;box-shadow:0 0 6px currentColor}
.powers-v7 .power-legend span:nth-child(1) i{background:#ffd329}
.powers-v7 .power-legend span:nth-child(2) i{background:#2fd0ff}
.powers-v7 .power-legend span:nth-child(3) i{background:#ff4d67}
.powers-v7 .power-legend span:nth-child(4) i{background:#fff}

@media(max-width:700px){
  .section > .number{top:10px !important;left:10px !important;font-size:18px !important;padding:5px 9px !important}
  .section > .section-title{margin-top:18px}
  .powers-v7 .panel-caption.top{font-size:11px !important;letter-spacing:1.2px !important}
  .powers-v7 .power-legend{
    top:43px !important;
    width:max-content;
    max-width:calc(100% - 20px);
    gap:7px !important;
    padding:6px 8px !important;
  }
  .powers-v7 .power-legend span{font-size:10px !important}
}
@media(max-width:430px){
  .powers-v7 .power-legend{gap:5px !important}
  .powers-v7 .power-legend span{font-size:9px !important}
  .powers-v7 .power-legend i{width:6px;height:6px}
}

/* V10.3 — clean section index badges
   02 / 04 were being painted as long decorative bars. Keep them as the same
   compact comic-style index badges used by the other sections. */
.section > .number,
.powers > .number,
.life > .number,
.lab > .number,
.story > .number {
  position:absolute !important;
  display:inline-block !important;
  box-sizing:border-box !important;
  width:max-content !important;
  min-width:0 !important;
  max-width:none !important;
  height:auto !important;
  right:auto !important;
  bottom:auto !important;
  top:24px !important;
  left:7vw !important;
  margin:0 !important;
  padding:6px 11px !important;
  white-space:nowrap !important;
  overflow:visible !important;
  border:3px solid #111 !important;
  border-radius:0 !important;
  box-shadow:4px 4px 0 #111 !important;
  font:16px/1 Bangers !important;
  letter-spacing:.5px !important;
  text-align:center !important;
  transform:rotate(-2deg) !important;
  z-index:1000 !important;
}

.story > .number,
.lab > .number { background:#df1931 !important; color:#fff !important; }
.powers > .number { background:#ffd329 !important; color:#111 !important; }
.life > .number { background:#df1931 !important; color:#fff !important; }

@media (max-width:700px){
  .section > .number,
  .powers > .number,
  .life > .number,
  .lab > .number,
  .story > .number {
    top:14px !important;
    left:20px !important;
    padding:5px 9px !important;
    font-size:14px !important;
  }
}

/* V10.4 — powers cleanup
   Remove the floating category legend that was sitting over the Databricks node,
   and give the API node more breathing room from the DATA MODE burst. */
.powers-v7 .power-legend{display:none !important;}
.powers-v7 .n17{right:21% !important;}

@media (max-width:700px){
  .powers-v7 .n17{right:25% !important;}
}
@media (max-width:430px){
  .powers-v7 .n17{right:28% !important;}
}

/* =========================================================
   V11 — final responsive polish + latest profile photo
   ========================================================= */
.browser-note{
  display:block;
  position:relative;
  z-index:3;
  max-width:100%;
  margin:18px 0 72px;
  padding-right:4px;
  font:11px/1.5 "Permanent Marker", cursive;
}
.newspaper .stamp{
  z-index:5;
  bottom:12px;
  right:10px;
}

/* Never let the newspaper stamp cover its text. */
@media (min-width:701px){
  .newspaper{padding-bottom:24px;}
  .newspaper .browser-note{max-width:210px;}
}

/* Header stays usable at every width. */
@media (max-width:950px){
  header{height:68px;padding:0 18px;}
  header nav{display:none;}
  .header-btn{display:none;}
  .menu{display:block;cursor:pointer;padding:7px 9px;border:3px solid #111;background:#ffd329;box-shadow:4px 4px 0 #111;font-size:20px;line-height:1;}
  header nav.mobile-open{display:flex!important;}
}

/* Tablet: avoid oversized comic typography and horizontal overflow. */
@media (max-width:950px){
  .hero{min-height:auto;padding-top:96px;grid-template-columns:1fr;gap:28px;}
  .hero-left{padding:12px 10px;}
  .hero-comic{width:100%;max-width:720px;height:min(620px,78vw);min-height:500px;margin:0 auto;}
  .story-panels{grid-template-columns:1fr 1.4fr;align-items:stretch;}
  .story-panels .newspaper{grid-column:1/-1;max-width:none;transform:rotate(1deg);}
  .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .life-panels{grid-template-columns:1fr 1fr;}
  .life-main{grid-column:1/-1;grid-row:auto;min-height:360px;}
  .gaming-zone{grid-template-columns:1fr 1fr;}
  .gaming-heading{grid-column:1/-1;}
  .gaming-cover{min-height:380px;}
  .game-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* Mobile: single-column layout, readable comic scale, no clipped controls. */
@media (max-width:700px){
  body{width:100%;overflow-x:hidden;}
  header{height:64px;padding:0 14px;}
  .brand{font-size:38px;}
  .hero{padding:88px 14px 35px;gap:24px;}
  .hero-left{padding:4px 2px;}
  .issue-tag{font-size:10px;}
  .caption{font-size:18px;margin-top:22px;}
  h1{font-size:clamp(66px,18vw,92px);line-height:.76;margin:12px 0 22px;}
  .intro{font-size:13px;line-height:1.7;}
  .buttons{gap:10px;}
  .comic-btn{font-size:15px;padding:11px 12px;box-shadow:4px 4px 0 #111;}
  .socials{flex-wrap:wrap;}
  .socials a{font-size:9px;}
  .hero-comic{height:520px;min-height:0;width:100%;border-width:4px;box-shadow:8px 8px 0 #111;transform:none;}
  .real-spidey-art{width:68%;height:64%;top:48%;}
  .real-life-card{width:122px;right:7px;bottom:47px;}
  .real-life-card img{height:145px;object-position:center 25%;}
  .hero-copy-card{left:5px;top:112px;max-width:130px;padding:9px 10px;}
  .hero-copy-card.second{right:5px;bottom:100px;}
  .hero-copy-card strong{font-size:8px;}
  .floating-word{font-size:34px;}
  .word-wow{right:14px;top:45px;}
  .word-thwip{left:12px;bottom:24px;}
  .panel-caption{font-size:11px;padding:7px;}

  .section{padding:92px 16px 70px;min-height:auto;}
  .section > .number{top:12px!important;left:16px!important;font-size:13px!important;padding:5px 8px!important;}
  .section-title{margin-bottom:30px!important;}
  .section-title .label{font-size:13px;padding:5px 9px;}
  .section-title h2,.lab .section-title h2{font-size:clamp(62px,18vw,88px);line-height:.76;margin:18px 0;}
  .section-title p{font-size:10px;}

  .story-panels{grid-template-columns:1fr;gap:22px;}
  .speech-panel,.story-text,.newspaper{width:100%;max-width:none!important;transform:none!important;}
  .speech-panel{padding:24px;}
  .story-text .large{font-size:22px;}
  .story-text p{font-size:12px;}
  .ticker{font-size:7px;line-height:1.5;}
  .newspaper{padding:16px 15px 76px;}
  .newspaper h3{font-size:clamp(36px,11vw,50px);}
  .browser-note{font-size:11px;line-height:1.55;margin:16px 0 0;max-width:100%;padding-right:0;}
  .newspaper .stamp{right:8px;bottom:10px;font-size:17px;}

  .powers-v7{width:100%;}
  .power-node{min-height:50px;}
  .power-node span{font-size:7px;}
  .power-node b{font-size:22px;}
  .powers-v7 .burst-power{display:none!important;}

  .project-grid{grid-template-columns:1fr;gap:18px;}
  .project{min-height:330px;padding:20px;}
  .project h3{font-size:58px;}

  .life-panels{grid-template-columns:1fr;gap:16px;}
  .life-main{grid-column:auto;min-height:320px;padding:24px;}
  .life-main h3{font-size:clamp(58px,17vw,82px);}
  .doodle{font-size:50px;}
  .life-card{min-height:165px;transform:none!important;}
  .life-card h4{font-size:34px;}

  .gaming-zone{grid-template-columns:1fr;gap:18px;margin-top:58px;}
  .gaming-heading{grid-column:auto;padding:8px 0;}
  .gaming-heading h3{font-size:clamp(52px,16vw,72px);}
  .gaming-heading p{font-size:10px;}
  .gaming-cover{min-height:330px;transform:none;}
  .gaming-cover img{min-height:330px;object-position:center 42%;}
  .gaming-cover-text{font-size:60px;}
  .game-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .game-card{min-height:155px!important;padding:12px!important;}
  .game-card h4{font-size:clamp(27px,8vw,36px)!important;line-height:.78;margin:20px 0 9px!important;}
  .game-card p{font-size:7px;}

  .contact{padding:70px 16px 50px;}
  .contact-card{width:100%;padding:32px 20px;}
  .contact-card h2{font-size:clamp(58px,17vw,82px);}
  .contact .buttons{justify-content:flex-start;}
  footer{padding:22px 16px;gap:8px;text-align:center;flex-direction:column;}
}

@media (max-width:430px){
  .hero{padding-left:10px;padding-right:10px;}
  .hero-comic{height:470px;}
  .real-spidey-art{width:66%;height:62%;}
  .real-life-card{width:108px;bottom:43px;}
  .real-life-card img{height:128px;}
  .real-life-name{font-size:15px;}
  .hero-copy-card{max-width:116px;font-size:8px;}
  .hero-copy-card.second{max-width:108px;}
  .socials a{padding:6px 8px;}
  .game-grid{grid-template-columns:1fr;}
  .game-card{min-height:145px!important;}
  .game-card h4{font-size:34px!important;}
  .life-main{min-height:280px;}
  .life-card{min-height:155px;}
}

/* Accessibility: don't let animation become a source of motion/flicker for reduced-motion users. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important;}
}