:root{
  --bg:#00bdf2;
  --bg-dark:#06101e;
  --panel:#0d1b2f;
  --panel-soft:#122847;
  --white:#fffaf0;
  --ink:#09111e;
  --yellow:#ffeb26;
  --gold:#ffd117;
  --pink:#ff2e91;
  --magenta:#ed1c8f;
  --purple:#8134ff;
  --blue:#008fff;
  --cyan:#00dbff;
  --green:#9cff2f;
  --lime:#b8ff3b;
  --red:#ff4d68;
  --shadow:0 16px 0 rgba(0,0,0,.24);
  --outline:4px solid #05070e;
  --radius:18px;
  --font-display: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:
    radial-gradient(circle at 15% 12%, rgba(255,255,255,.38), transparent 18%),
    radial-gradient(circle at 88% 16%, rgba(255,46,145,.26), transparent 19%),
    radial-gradient(circle at 85% 78%, rgba(156,255,47,.22), transparent 18%),
    radial-gradient(circle at 20% 75%, rgba(129,52,255,.18), transparent 20%),
    var(--bg);
  min-height:100vh;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.24;
  background-image:radial-gradient(rgba(5,7,14,.55) 1px, transparent 1.3px);
  background-size:11px 11px;
  mix-blend-mode:multiply;
  z-index:0;
}

.noise{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.05;
  z-index:1;
  background-image:linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size:3px 100%;
}

.shell{width:min(1320px, calc(100% - 32px)); margin:0 auto; position:relative; z-index:2}

a{color:inherit}

.top-strip{
  min-height:42px;
  padding:8px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:#05070e;
  color:var(--white);
  border-bottom:4px solid var(--pink);
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:.08em;
  font-size:.82rem;
  position:relative;
  z-index:3;
}

.top-strip strong{color:var(--cyan); text-align:center}
.top-strip span:first-child{color:var(--pink)}
.top-strip span:last-child{color:var(--yellow)}

.site-header{
  display:grid;
  grid-template-columns:minmax(420px, 1fr) minmax(300px, 420px);
  grid-template-areas:
    "brand search"
    "nav nav";
  align-items:center;
  gap:16px 22px;
  padding:20px 0 16px;
}

.site-header .brand{grid-area:brand; position:relative; z-index:3;}
.site-header .main-nav{grid-area:nav;}
.site-header .search-box{grid-area:search;}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  width:100%;
  min-width:0;
}

.brand > div:last-child{
  min-width:0;
}

.brand-mark{
  width:68px;
  height:68px;
  border:var(--outline);
  background:linear-gradient(135deg, var(--pink), var(--yellow));
  display:grid;
  place-items:center;
  font-family:var(--font-display);
  font-size:3rem;
  font-weight:900;
  color:#05070e;
  transform:rotate(-8deg);
  box-shadow:8px 8px 0 #05070e;
}

.brand strong{
  display:block;
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:clamp(2.55rem, 3.25vw, 3.7rem);
  line-height:.9;
  white-space:nowrap;
  color:var(--yellow);
  text-shadow:4px 4px 0 #05070e, 8px 8px 0 var(--pink);
}

.brand small{
  display:inline-block;
  margin-top:7px;
  background:#05070e;
  color:var(--white);
  font-weight:900;
  padding:6px 10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  border-radius:999px;
  font-size:.72rem;
}

.main-nav{
  min-width:0;
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:#05070e;
  border:var(--outline);
  padding:7px;
  border-radius:14px;
  box-shadow:8px 8px 0 rgba(0,0,0,.22);
  overflow:visible;
  scrollbar-width:none;
}

.main-nav::-webkit-scrollbar{display:none}

.main-nav a{
  color:var(--white);
  text-decoration:none;
  text-transform:uppercase;
  font-size:.8rem;
  letter-spacing:.06em;
  font-weight:950;
  padding:12px 15px;
  border-radius:9px;
  transition:transform .18s ease, background .18s ease, color .18s ease;
}

.main-nav a:hover,
.main-nav a.active{
  background:var(--yellow);
  color:#05070e;
  transform:translateY(-2px);
}

.search-box{
  display:flex;
  align-items:center;
  gap:0;
  border:var(--outline);
  background:var(--white);
  border-radius:12px;
  overflow:hidden;
  box-shadow:7px 7px 0 rgba(0,0,0,.22);
}

.search-box input{
  border:0;
  outline:0;
  width:100%;
  min-height:52px;
  padding:0 15px;
  font-weight:700;
  background:transparent;
}

.search-box button{
  border:0;
  min-width:62px;
  min-height:52px;
  cursor:pointer;
  background:var(--yellow);
  font-size:1.7rem;
  font-weight:900;
}

.menu-toggle{display:none}

.hero{margin-top:10px}
.hero-panel{
  min-height:440px;
  display:grid;
  grid-template-columns:250px minmax(420px, 1fr) 430px;
  gap:18px;
  padding:18px;
  border:var(--outline);
  border-radius:22px 22px 8px 8px;
  background:
    radial-gradient(circle at 72% 45%, rgba(255,235,38,.92), transparent 15%),
    linear-gradient(140deg, rgba(0,219,255,.94), rgba(0,143,255,.95)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 4px, transparent 4px 12px);
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}

.hero-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg, transparent 0 26%, rgba(255,255,255,.22) 26% 27%, transparent 27% 39%, rgba(255,255,255,.17) 39% 40%, transparent 40%),
    radial-gradient(circle at 60% 50%, rgba(255,255,255,.12), transparent 26%);
  pointer-events:none;
}

.hero-panel > *{position:relative; z-index:1}

.hero-side{display:grid; align-content:start; gap:16px}

.burst{
  width:100%;
  min-height:142px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:22px;
  clip-path:polygon(50% 0%, 59% 15%, 73% 4%, 75% 22%, 93% 16%, 87% 34%, 100% 42%, 87% 53%, 97% 69%, 78% 69%, 79% 89%, 61% 79%, 50% 100%, 38% 81%, 21% 91%, 22% 70%, 2% 69%, 13% 53%, 0% 43%, 14% 34%, 8% 15%, 26% 22%, 27% 4%, 41% 15%);
  border:0;
  filter:drop-shadow(6px 7px 0 #05070e);
  font-weight:950;
  text-transform:uppercase;
}

.burst.yellow{background:var(--yellow)}
.burst.pink{background:var(--pink); color:var(--white)}

.burst span{display:block;font-size:.9rem;line-height:1.05}
.burst strong{display:block;font-family:var(--font-display); font-size:2rem; line-height:.95}

.feature-list{
  list-style:none;
  padding:15px;
  margin:0;
  background:#05070e;
  color:var(--white);
  border:4px solid #05070e;
  border-radius:14px;
  box-shadow:6px 6px 0 rgba(0,0,0,.22);
}

.feature-list li{
  position:relative;
  padding:7px 0 7px 22px;
  text-transform:uppercase;
  font-weight:900;
  font-size:.82rem;
}

.feature-list li::before{content:"✓"; position:absolute; left:0; color:var(--yellow)}

.lives{display:flex; gap:10px; font-size:2rem; color:var(--pink); text-shadow:3px 3px 0 #05070e}

.hero-copy{display:grid; align-content:center; gap:12px}
.eyebrow{
  display:inline-block;
  width:max-content;
  background:#05070e;
  color:var(--white);
  border-radius:999px;
  padding:8px 13px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:950;
  font-size:.76rem;
}

.hero-copy h1{
  margin:0;
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:clamp(4.4rem, 7vw, 7.8rem);
  line-height:.82;
  color:var(--yellow);
  text-shadow:6px 6px 0 #05070e, 12px 12px 0 var(--pink);
}

.hero-copy h1 span{display:block; color:var(--white); font-size:.52em; letter-spacing:.04em; text-shadow:4px 4px 0 #05070e}
.hero-copy h2{
  margin:0;
  width:max-content;
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:clamp(2rem, 3.1vw, 3.6rem);
  line-height:1;
  color:var(--white);
  background:#05070e;
  padding:8px 16px;
  transform:skew(-8deg);
  box-shadow:8px 8px 0 var(--pink);
}

.hero-text{
  max-width:610px;
  margin:4px 0 0;
  padding:12px 14px;
  font-size:1rem;
  line-height:1.55;
  font-weight:800;
  background:rgba(255,250,240,.94);
  border:4px solid #05070e;
  border-radius:14px;
}

.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:6px}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:0 18px;
  text-decoration:none;
  text-transform:uppercase;
  font-weight:1000;
  letter-spacing:.05em;
  border:4px solid #05070e;
  border-radius:12px;
  box-shadow:6px 6px 0 rgba(0,0,0,.22);
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn:hover{transform:translate(-2px,-2px); box-shadow:8px 8px 0 rgba(0,0,0,.28)}
.btn-hot{background:var(--pink); color:var(--white)}
.btn-dark{background:#05070e; color:var(--yellow)}
.btn-green{background:var(--green)}
.btn-blue{background:var(--blue); color:var(--white)}
.btn.full{width:100%}

.hero-art{position:relative; min-height:390px}
.pixel-sun{
  position:absolute;
  inset:26px 40px auto auto;
  width:290px;
  height:290px;
  background:radial-gradient(circle, var(--yellow) 0 30%, #ff9a18 31% 52%, transparent 53%);
  clip-path:polygon(50% 0%, 57% 28%, 72% 7%, 69% 34%, 92% 18%, 78% 43%, 100% 42%, 77% 54%, 96% 67%, 70% 66%, 76% 94%, 56% 74%, 50% 100%, 43% 74%, 23% 95%, 30% 66%, 4% 67%, 23% 54%, 0% 42%, 23% 43%, 7% 18%, 31% 34%, 28% 7%, 43% 28%);
  opacity:.95;
}

.hero-kaioh{
  position:absolute;
  left:38px;
  bottom:-30px;
  height:420px;
  width:auto;
  max-width:none;
  object-fit:contain;
  filter:drop-shadow(10px 14px 0 rgba(5,7,14,.22)) drop-shadow(0 0 18px rgba(255,46,145,.18));
  z-index:2;
}


.crt{
  position:absolute;
  right:12px;
  bottom:28px;
  width:166px;
  height:136px;
  background:#1a1a1a;
  border:6px solid #05070e;
  border-radius:18px;
  box-shadow:8px 8px 0 rgba(0,0,0,.25);
  display:grid;
  place-content:center;
  text-align:center;
  color:var(--green);
  font-family:"Courier New", monospace;
  text-shadow:0 0 8px rgba(156,255,47,.72);
}
.crt::before{content:""; position:absolute; inset:12px; border:4px solid #373737; border-radius:10px}
.crt span,.crt strong{position:relative; z-index:1; display:block; font-size:1.55rem}
.crt strong{font-size:1.85rem}

.hero-sticker{position:absolute; right:-6px; top:14px; width:214px; min-height:140px; z-index:4}
.hero-sticker strong{font-size:1.35rem}
.hero-sticker span{font-size:1rem}

.hero-ribbon{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  border:var(--outline);
  border-top:0;
  background:#05070e;
  color:var(--white);
  border-radius:0 0 22px 22px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.hero-ribbon div{
  min-height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-transform:uppercase;
  font-weight:950;
  letter-spacing:.05em;
  border-right:3px solid var(--cyan);
}
.hero-ribbon div:last-child{border-right:0}
.hero-ribbon strong{color:var(--yellow)}

.content-grid{
  display:grid;
  grid-template-columns:280px minmax(0, 1fr) 310px;
  gap:18px;
  margin-top:18px;
  align-items:start;
}
.left-column{display:grid; gap:18px}
.panel{
  position:relative;
  background:rgba(255,250,240,.96);
  border:var(--outline);
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.panel-title{
  min-height:52px;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-family:var(--font-display);
  font-size:1.8rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  border-bottom:4px solid #05070e;
}
.panel-title a{font-family:var(--font-body); font-size:.72rem; font-weight:950; text-decoration:none}
.yellow-title{background:var(--yellow)}
.magenta-title{background:var(--pink); color:var(--white)}
.green-title{background:var(--green)}
.blue-title{background:var(--blue); color:var(--white)}
.purple-title{background:var(--purple); color:var(--white)}

.highlights{padding-bottom:12px}
.mini-feature{display:grid; grid-template-columns:90px 1fr; gap:10px; padding:12px; border-bottom:3px dashed rgba(5,7,14,.22)}
.mini-feature:last-child{border-bottom:0}
.mini-feature h3{margin:0 0 5px; font-size:.98rem; line-height:1.05; text-transform:uppercase}
.mini-feature p{margin:0 0 7px; font-size:.78rem; line-height:1.35; font-weight:700}
.mini-feature a{display:inline-block; text-decoration:none; background:var(--yellow); border:3px solid #05070e; padding:5px 7px; font-size:.72rem; font-weight:1000; text-transform:uppercase}
.thumb{min-height:90px; border:4px solid #05070e; border-radius:10px; position:relative; overflow:hidden}
.thumb.fantasy{background:linear-gradient(135deg,#17325f,#1088d1 50%,#a2f23c)}
.thumb.racer{background:linear-gradient(135deg,#1b274b,#ff544a 55%,#ffd117)}
.thumb.fight{background:linear-gradient(135deg,#341362,#ed1c8f 55%,#ffcf23)}
.thumb::after{content:""; position:absolute; inset:14px; border:3px dashed rgba(255,255,255,.7); border-radius:8px}

.newsletter{padding:18px; background:linear-gradient(135deg, rgba(129,52,255,.98), rgba(237,28,143,.98)); color:var(--white)}
.mail-icon{width:74px; height:74px; display:grid; place-items:center; font-size:2.6rem; background:var(--yellow); color:#05070e; border:4px solid #05070e; transform:rotate(-8deg); box-shadow:6px 6px 0 #05070e; margin-bottom:12px}
.newsletter h3{margin:0 0 8px; font-size:1.5rem; line-height:1.05; text-transform:uppercase}
.newsletter p{margin:0 0 14px; line-height:1.45; font-weight:800}
.newsletter form{display:grid; gap:10px}
.newsletter input{min-height:50px; border:4px solid #05070e; border-radius:10px; padding:0 12px; font-weight:700}

.main-column{padding-bottom:16px}
.articles-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; padding:14px}
.article-card{display:flex; flex-direction:column; min-height:365px; background:#fff; border:4px solid #05070e; border-radius:12px; overflow:hidden; box-shadow:6px 6px 0 rgba(0,0,0,.16)}
.article-image{height:150px; border-bottom:4px solid #05070e; position:relative; overflow:hidden}
.article-image.ship{background:linear-gradient(135deg,#081424,#123c7e 48%,#00dbff)}
.article-image.console{background:linear-gradient(135deg,#272727,#777,#d6d6d6)}
.article-image.platform{background:linear-gradient(135deg,#164232,#4aa94c,#f2d23e)}
.article-image.arcade{background:linear-gradient(135deg,#2a0737,#ff2e91,#00dbff)}
.article-image::before{content:""; position:absolute; inset:18px; border:4px solid rgba(255,255,255,.74); border-radius:12px; transform:skew(-8deg)}
.tag{align-self:flex-start; margin:12px 12px 0; padding:5px 7px; border:3px solid #05070e; font-size:.68rem; font-weight:1000; text-transform:uppercase}
.tag.green{background:var(--green)}
.tag.pink{background:var(--pink); color:var(--white)}
.tag.purple{background:var(--purple); color:var(--white)}
.tag.blue{background:var(--blue); color:var(--white)}
.article-card h3{margin:10px 12px 7px; font-size:1.02rem; line-height:1.08; text-transform:uppercase}
.article-card p{margin:0 12px 12px; font-size:.88rem; line-height:1.48; font-weight:700; flex:1}
.article-card a{margin:0 12px 12px; font-weight:1000; text-transform:uppercase; text-decoration:none; font-size:.78rem}

.cover-panel{padding-bottom:14px}
.mag-cover{
  margin:14px;
  min-height:540px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  color:var(--white);
  background:
    radial-gradient(circle at 72% 22%, rgba(255,235,38,.55), transparent 18%),
    linear-gradient(150deg,#0033a0,#007bff 45%,#09245f);
  border:5px solid #05070e;
  border-radius:14px;
  position:relative;
  overflow:hidden;
}
.mag-cover::after{content:""; position:absolute; inset:0; background:radial-gradient(rgba(255,255,255,.18) 1px, transparent 1.4px); background-size:10px 10px; opacity:.32}
.mag-cover > *{position:relative; z-index:1}
.cover-top{font-size:.78rem; text-transform:uppercase; font-weight:1000; background:var(--yellow); color:#05070e; width:max-content; padding:5px 8px; border:3px solid #05070e}
.mag-cover strong{font-family:var(--font-display); text-transform:uppercase; font-size:3.15rem; line-height:.85; color:var(--yellow); text-shadow:4px 4px 0 #05070e, 7px 7px 0 var(--pink)}
.mag-cover small{font-weight:1000; text-transform:uppercase; letter-spacing:.08em}
.cover-hero{height:220px; margin:10px 0; border:5px solid #05070e; background:linear-gradient(135deg,#34205c,#007bff 50%,#ffd117); border-radius:12px}
.cover-badge{position:absolute; right:12px; top:100px; width:92px; height:92px; display:grid; place-content:center; text-align:center; font-family:var(--font-display); font-size:2rem; line-height:.85; background:var(--pink); border:4px solid #05070e; border-radius:50%; color:var(--yellow); transform:rotate(12deg)}
.cover-badge small{font-family:var(--font-body); font-size:.65rem; color:var(--white)}
.mag-cover ul{margin:0; padding-left:18px; font-size:.8rem; font-weight:1000; text-transform:uppercase; display:grid; gap:6px}
.mag-cover h3{margin:auto 0 0; font-family:var(--font-display); font-size:2.15rem; line-height:.95; color:var(--yellow); text-transform:uppercase}
.cover-panel > .btn{margin:0 14px}

.triple-grid{display:grid; grid-template-columns:1fr .8fr 1fr; gap:18px; margin-top:18px}
.feature-panel,.reviews-panel,.curiosities-panel{padding-bottom:16px}
.feature-art{height:190px; margin:14px; border:5px solid #05070e; border-radius:12px}
.feature-art.dungeon{background:linear-gradient(135deg,#0d1124,#173e58,#412046)}
.sticker{position:absolute; top:104px; right:24px; background:var(--pink); color:var(--white); border:4px solid #05070e; padding:10px; font-family:var(--font-display); font-size:1.25rem; text-transform:uppercase; transform:rotate(-8deg); box-shadow:5px 5px 0 rgba(0,0,0,.25)}
.feature-panel h3,.curiosities-panel h3{margin:0 14px 8px; font-size:1.55rem; line-height:1.04; text-transform:uppercase}
.feature-panel p,.curiosities-panel p{margin:0 14px 12px; line-height:1.48; font-weight:750}
.feature-panel ul{margin:0 14px 14px; padding-left:18px; display:grid; gap:6px; font-weight:900; text-transform:uppercase; font-size:.84rem}
.feature-panel .btn{margin:0 14px}
.reviews-panel{padding-bottom:18px}
.review-row{margin:14px 14px 0; display:flex; justify-content:space-between; align-items:center; gap:10px; min-height:54px; padding:0 12px; background:#fff; border:4px solid #05070e; border-radius:10px; font-weight:950; text-transform:uppercase}
.review-row span{min-width:58px; text-align:center; background:var(--green); border:3px solid #05070e; padding:6px; border-radius:8px}
.reviews-panel .btn{margin:16px 14px 0; width:calc(100% - 28px)}
.cassette{height:190px; margin:14px; border:5px solid #05070e; border-radius:14px; background:linear-gradient(135deg,#282828,#484848,#101010); position:relative}
.cassette::before,.cassette::after{content:""; position:absolute; top:54px; width:56px; height:56px; border-radius:50%; background:#d6d6d6; border:5px solid #05070e}
.cassette::before{left:38px}
.cassette::after{right:38px}
.did-you-know{position:absolute; right:22px; top:180px; background:var(--green); border:4px solid #05070e; padding:10px; text-transform:uppercase; font-weight:1000; transform:rotate(8deg)}
.dots{display:flex; gap:8px; justify-content:center; margin-top:8px}
.dots span{width:11px; height:11px; border-radius:50%; background:#05070e}
.dots span:nth-child(2){background:var(--pink)}

.promo-strip{display:grid; grid-template-columns:.9fr 1.4fr 1fr .9fr; gap:18px; margin-top:18px; margin-bottom:26px}
.promo-card{min-height:112px; border:var(--outline); border-radius:18px; box-shadow:var(--shadow); padding:16px; display:grid; align-content:center; gap:6px; text-transform:uppercase; font-weight:1000}
.promo-card strong{font-family:var(--font-display); font-size:2rem; line-height:.95}
.poster{background:var(--yellow)}
.community{background:linear-gradient(135deg,var(--yellow),var(--pink)); color:#05070e}
.playlist{background:linear-gradient(135deg,var(--purple),var(--pink)); color:var(--white)}
.geeknews{background:var(--pink); color:var(--white)}

.footer{position:relative; z-index:2; background:#05070e; color:var(--white); border-top:5px solid var(--pink)}
.footer-inner{min-height:90px; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:18px; font-size:.82rem; font-weight:800}
.footer p{margin:0}
.footer nav{display:flex; flex-wrap:wrap; justify-content:center; gap:14px}
.footer nav a{text-decoration:none}
.footer strong{color:var(--yellow); text-transform:uppercase}

@media (max-width:1240px){
  .site-header{
    grid-template-columns:1fr;
    grid-template-areas:
      "brand"
      "nav"
      "search";
    justify-items:start;
  }
  .brand{width:max-content; max-width:100%}
  .main-nav{width:100%; justify-content:flex-start; overflow-x:auto}
  .search-box{width:min(100%, 420px)}
  .hero-panel{grid-template-columns:220px 1fr;}
  .hero-art{grid-column:1 / -1; min-height:340px}
  .hero-kaioh{left:50%; transform:translateX(-50%); bottom:-26px; height:410px}
  .crt{right:14%;}
  .hero-sticker{right:8%; top:12px;}
  .content-grid{grid-template-columns:280px 1fr}
  .right-column{grid-column:1 / -1; max-width:420px; justify-self:center}
  .articles-grid{grid-template-columns:repeat(2,1fr)}
  .triple-grid{grid-template-columns:1fr 1fr}
  .curiosities-panel{grid-column:1 / -1}
  .promo-strip{grid-template-columns:repeat(2,1fr)}
  .footer-inner{grid-template-columns:1fr; padding:18px 0; text-align:center}
}

@media (max-width:860px){
  .top-strip{display:grid; justify-items:center; text-align:center}
  .site-header{padding-top:16px}
  .menu-toggle{
    display:grid;
    gap:5px;
    width:58px;
    height:52px;
    place-content:center;
    background:var(--yellow);
    border:var(--outline);
    border-radius:12px;
    box-shadow:6px 6px 0 rgba(0,0,0,.22);
    cursor:pointer;
  }
  .menu-toggle span{display:block; width:28px; height:4px; background:#05070e}
  .main-nav{display:none; flex-direction:column; align-items:stretch; width:100%; overflow:visible}
  .main-nav.open{display:flex}
  .main-nav a{width:100%}
  .hero-panel{grid-template-columns:1fr; min-height:auto}
  .hero-side{grid-template-columns:1fr;}
  .hero-copy h1{font-size:clamp(4rem, 16vw, 6rem)}
  .hero-art{min-height:430px}
  .hero-kaioh{left:50%; transform:translateX(-50%); bottom:-20px; height:402px}
  .crt{left:50%; right:auto; transform:translateX(-50%); bottom:22px}
  .hero-sticker{right:auto; left:50%; transform:translateX(-50%); top:4px; width:220px}
  .pixel-sun{right:50%; transform:translateX(50%); top:30px}
  .hero-ribbon{grid-template-columns:1fr 1fr}
  .content-grid,.triple-grid,.promo-strip{grid-template-columns:1fr}
  .left-column,.right-column{width:100%; max-width:none; grid-column:auto}
  .articles-grid{grid-template-columns:1fr}
}

@media (max-width:560px){
  .shell{width:min(100% - 18px, 1320px)}
  .brand{align-items:flex-start}
  .brand-mark{width:58px; height:58px; font-size:2.4rem}
  .brand strong{font-size:2.65rem}
  .hero-panel{padding:12px}
  .hero-copy h2{font-size:1.8rem}
  .hero-text{font-size:.92rem}
  .hero-ribbon{grid-template-columns:1fr}
  .hero-ribbon div{border-right:0; border-bottom:3px solid var(--cyan)}
  .hero-ribbon div:last-child{border-bottom:0}
  .panel-title{font-size:1.45rem}
  .mini-feature{grid-template-columns:1fr}
  .thumb{min-height:120px}
  .mag-cover{min-height:500px}
  .cover-badge{top:115px}
  .review-row{font-size:.78rem}
  .promo-card strong{font-size:1.75rem}
}