:root {
  --navy: #000000;
  --black: #030303;
  --yellow: #f6e850;
  --white: #fffef5;
  --soft-white: #d5d5d5;
  --gray: #8d8d8d;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--navy); color: var(--white); font-family: "Space Grotesk", Arial, sans-serif; }

.page-shell {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  max-width: 1360px;
  margin: 0 auto;
  padding: 22px clamp(24px, 6vw, 94px) 20px;
  overflow: hidden;
}

.page-shell::before,
.page-shell::after {
  position: absolute;
  z-index: -2;
  border-radius: 36px;
  background: var(--black);
  content: "";
}
.page-shell::before { top: 27px; left: clamp(14px, 2vw, 30px); width: calc(100% - clamp(28px, 4vw, 60px)); height: calc(100% - 54px); }
.page-shell::after { z-index: -1; top: 50%; left: 50%; width: 340px; height: 340px; border: 1px solid rgba(246, 232, 80, .22); background: transparent; box-shadow: 0 0 0 35px rgba(246,232,80,.025), 0 0 0 71px rgba(246,232,80,.02); transform: translate(-50%, -50%); }

.nav, footer { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; }
.nav { border-bottom: 1px solid #333; padding: 3px 0 15px; }
.brand { display: inline-flex; align-items: center; width: clamp(126px, 14vw, 185px); text-decoration: none; }
.brand img { display: block; width: 100%; height: auto; }
.issue { margin: 0; color: var(--gray); font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }.issue b { color: var(--yellow); }

.hero { position: relative; z-index: 1; width: min(930px, 100%); margin: auto 0; padding: 70px 235px 70px 0; }
.eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--yellow); font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }.eyebrow::before { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 5px rgba(246,232,80,.13); content: ""; }.eyebrow span { display: none; }
h1 { margin: 0; font-family: "Barlow Condensed", Arial, sans-serif; font-size: clamp(72px, 12vw, 170px); font-weight: 800; letter-spacing: -.045em; line-height: .75; text-transform: uppercase; } h1 span { color: var(--soft-white); font-size: .52em; letter-spacing: .01em; } .hero h1 em { display: inline-block; color: var(--yellow); font-family: "Barlow Condensed", Arial, sans-serif; font-size: 1.05em; font-style: normal; font-weight: 800; letter-spacing: -.02em; transform: rotate(-2deg); }
.hero-bottom { margin-top: 46px; padding-top: 18px; border-top: 1px solid #333; }.intro { max-width: 400px; margin: 0; color: var(--soft-white); font-family: "DM Mono", monospace; font-size: 12px; font-weight: 400; line-height: 1.65; }.intro strong { color: var(--yellow); font-weight: 500; }

.burst { position: absolute; top: 11%; right: 57px; z-index: -1; display: grid; width: 135px; aspect-ratio: 1; place-items: center; border: 2px solid var(--yellow); border-radius: 50%; background: var(--yellow); clip-path: polygon(50% 0%, 60% 26%, 79% 7%, 75% 32%, 100% 28%, 81% 47%, 100% 63%, 75% 65%, 85% 90%, 62% 77%, 51% 100%, 42% 77%, 19% 91%, 27% 66%, 0% 70%, 18% 52%, 0% 35%, 25% 34%, 13% 10%, 39% 25%); }.burst span { color: var(--black); font-family: "DM Mono", monospace; font-size: 13px; font-weight: 500; line-height: 1.1; text-align: center; }

.side-panel { position: absolute; right: clamp(40px, 8vw, 135px); bottom: 50%; z-index: 0; width: 177px; aspect-ratio: .67; border: 1px solid #4b4b4b; border-radius: 24px; background: #090909; box-shadow: 0 0 0 5px #090909, 0 0 0 6px #515151; overflow: hidden; transform: translateY(50%); }.side-panel::before { position: absolute; top: 18px; left: 20px; width: 10px; height: 10px; border-radius: 50%; background: var(--white); box-shadow: 128px 0 var(--white); content: ""; }.side-panel::after { position: absolute; right: 18px; bottom: 20px; left: 18px; height: 1px; background: #464646; box-shadow: 0 -38px #333, 0 -76px #333; content: ""; }.side-panel p { position: absolute; z-index: 1; right: 18px; bottom: 31px; left: 18px; margin: 0; color: var(--white); font-family: "DM Mono", monospace; font-size: 10px; line-height: 1.5; text-align: center; text-transform: uppercase; }.side-panel p span { color: var(--yellow); }.eye { position: absolute; top: 40%; left: 50%; width: 67px; height: 67px; border-radius: 50% 50% 12px 12px; background: var(--yellow); transform: translate(-50%, -50%) rotate(45deg); }.eye i { position: absolute; top: 15px; left: 15px; width: 37px; height: 37px; border-radius: 50%; background: var(--black); }.eye i::after { position: absolute; top: 8px; left: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--white); content: ""; }.sound-effect { display: none; }

.speed-lines { position: absolute; z-index: -3; top: 0; right: -14%; width: 57%; height: 100%; opacity: .42; background: repeating-linear-gradient(119deg, transparent 0 28px, rgba(246,232,80,.24) 29px 30px, transparent 31px 52px); }
footer { border-top: 1px solid #333; color: var(--gray); padding-top: 14px; font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .07em; text-transform: uppercase; } footer p { margin: 0; } footer span { color: var(--yellow); }

@media (max-width: 900px) { .hero { padding-right: 180px; }.side-panel { right: 40px; width: 145px; }.burst { right: 26px; } }
@media (max-width: 680px) { .hero { padding-right: 0; }.side-panel { display: none; }.burst { top: 3%; right: 8%; opacity: .9; } }
@media (max-width: 560px) { .page-shell { padding: 18px 28px; }.page-shell::before { top: 14px; left: 10px; width: calc(100% - 20px); height: calc(100% - 28px); border-radius: 25px; }.issue { display: none; }.hero { padding: 74px 0 68px; } h1 { font-size: clamp(67px, 23vw, 125px); } .hero-bottom { margin-top: 37px; }.intro { max-width: 290px; font-size: 10px; }.burst { top: 10%; right: -19px; width: 98px; }.burst span { font-size: 9px; } footer { font-size: 7px; } }