*{box-sizing:border-box}
:root{
  --black:#090a12;
  --navy:#111429;
  --cream:#fff8eb;
  --pink:#ff3cac;
  --cyan:#14d9e8;
  --purple:#7257ff;
  --yellow:#ffd84c;
  --orange:#ff6b35;
  --mint:#50e3a4;
  --ink:#171321;
  --muted:#6b6675;
  --max:1280px;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.55;
  overflow-x:hidden;
}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:Arial Black,Arial,Helvetica,sans-serif;line-height:.98}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:1rem;top:1rem;z-index:9999;background:white;padding:.8rem 1rem;border:3px solid #000}

.hero{
  position:relative;
  color:#fff;
  background:
    linear-gradient(rgba(9,10,18,.1),rgba(9,10,18,.1)),
    radial-gradient(circle at 12% 20%,rgba(255,60,172,.22),transparent 27%),
    radial-gradient(circle at 86% 0%,rgba(20,217,232,.18),transparent 27%),
    var(--black);
  overflow:hidden
}
.hero:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:90px;
  background:
    linear-gradient(90deg,transparent 0 8%,var(--pink) 8% 13%,transparent 13% 18%,var(--cyan) 18% 29%,transparent 29% 36%,var(--yellow) 36% 43%,transparent 43% 54%,var(--purple) 54% 66%,transparent 66%);
  clip-path:polygon(0 68%,100% 10%,100% 100%,0 100%);
  opacity:.8;
  pointer-events:none
}
.decades{
  width:min(100% - 28px,1420px);
  margin:auto;
  display:grid;
  grid-template-columns:repeat(10,minmax(0,1fr));
  gap:2px;
  padding:12px 0
}
.decades a,.decades span{
  padding:8px 4px;
  text-align:center;
  text-decoration:none;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.08em;
  border-bottom:2px solid rgba(255,255,255,.18)
}
.decades span{color:var(--yellow);border-color:var(--yellow)}
.hero-stage{
  width:min(100% - 32px,var(--max));
  margin:auto;
  display:grid;
  grid-template-columns:.86fr 1.14fr;
  gap:38px;
  align-items:center;
  padding:68px 0 128px
}
.signal,.micro-label{
  margin:0 0 14px;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-weight:900;
  font-size:.72rem
}
.signal{color:var(--cyan)}
.hero-year{display:flex;align-items:flex-end;gap:4px;line-height:.72;margin-bottom:28px}
.hero-year span{
  font-family:Georgia,serif;
  font-size:4.6rem;
  color:var(--pink);
  font-style:italic
}
.hero-year strong{
  font-family:Arial Black,Arial,sans-serif;
  font-size:clamp(6rem,12vw,11rem);
  letter-spacing:-.11em;
  background:linear-gradient(90deg,var(--yellow),var(--pink),var(--cyan));
  -webkit-background-clip:text;
  color:transparent
}
.hero h1{font-size:clamp(2rem,4vw,4rem);max-width:650px;margin:0 0 18px}
.hero-lede{font-size:1.1rem;max-width:620px;color:#ddd9ec}
.hero-visual{
  margin:0;
  transform:rotate(1.4deg);
  background:#fff;
  padding:9px;
  box-shadow:20px 20px 0 var(--pink),-16px -14px 0 var(--cyan)
}
.hero-visual img{width:100%;aspect-ratio:16/9;object-fit:cover}
.hero-visual figcaption{color:#171321;padding:10px 8px 3px;font-size:.84rem}
.hero-stripe{
  position:absolute;left:0;right:0;bottom:25px;
  display:flex;gap:34px;white-space:nowrap;
  padding:9px 0;
  background:var(--yellow);
  color:#151515;
  font-weight:900;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  transform:rotate(-2deg) scale(1.03)
}
.hero-stripe span{margin-right:24px}

.channel-nav{
  width:min(100% - 32px,var(--max));
  margin:34px auto 0;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  border:3px solid var(--ink)
}
.channel-nav span,.channel-nav a{
  padding:10px 12px;
  border-right:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  text-decoration:none;
  font-size:.76rem;
  font-weight:900
}
.channel-nav span{background:var(--ink);color:#fff}
.channel-nav a:hover{background:var(--cyan)}

main section{width:min(100% - 32px,var(--max));margin:auto}
.overview{
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  gap:36px;
  padding:72px 0 20px
}
.overview-title{
  position:relative;
  align-self:start;
  padding:34px;
  background:var(--yellow);
  box-shadow:16px 16px 0 var(--purple)
}
.overview-title:before{
  content:"";position:absolute;width:74px;height:18px;background:var(--pink);
  right:-22px;top:22px;transform:rotate(22deg)
}
.overview-title h2{font-size:clamp(2rem,4vw,4rem);margin:0}
.overview-copy{columns:2 280px;column-gap:30px}
.overview-copy p{margin:0 0 16px;break-inside:avoid;font-family:Georgia,serif;font-size:1.02rem}
.overview-pulses{
  grid-column:1/-1;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:10px;margin-top:6px
}
.overview-pulses div{padding:18px;border:3px solid var(--ink)}
.overview-pulses strong{display:block;font-size:1.6rem;color:var(--pink)}
.overview-pulses span{font-weight:700}

.events-screen{
  margin-top:72px;
  padding:38px;
  color:#eafaff;
  background:
    repeating-linear-gradient(0deg,rgba(20,217,232,.035) 0 2px,transparent 2px 5px),
    var(--navy);
  border:8px solid #252943;
  box-shadow:0 0 0 3px var(--cyan),0 20px 50px rgba(0,0,0,.2)
}
.screen-head{max-width:800px;margin-bottom:28px}
.screen-head .micro-label{color:var(--cyan)}
.screen-head h2{font-size:clamp(2.2rem,5vw,4.8rem);margin:0 0 12px;color:#fff}
.screen-head p:last-child{color:#bdc8db}
.index-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:#313852
}
.index-item{
  display:grid;grid-template-columns:58px 1fr;gap:14px;
  padding:18px;background:#11162b
}
.index-number{
  font-family:Arial Black,Arial,sans-serif;
  color:var(--yellow);font-size:1.2rem
}
.index-item h3{margin:0 0 5px;font-size:1rem;color:#fff}
.index-item p{margin:0;color:#bdc8db;font-size:.9rem}

.tech-zone{
  padding:90px 0 20px;
  display:grid;grid-template-columns:.7fr 1.3fr;gap:28px
}
.tech-intro{
  background:var(--cyan);
  padding:30px;
  align-self:start;
  transform:rotate(-1deg)
}
.tech-intro h2{font-size:clamp(2.2rem,4.5vw,4.4rem);margin:0 0 18px}
.tech-intro p:last-child{font-family:Georgia,serif;font-size:1.08rem}
.tech-image{
  margin:0;background:#000;padding:8px;
  box-shadow:18px 18px 0 var(--yellow)
}
.tech-image img{width:100%;aspect-ratio:16/9;object-fit:cover}
.tech-image figcaption{background:#000;color:#eee;padding:10px;font-size:.84rem}
.tech-list{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:20px}
.pop-tile{min-height:190px;padding:18px;border:3px solid var(--ink);position:relative;overflow:hidden}
.pop-tile>span{font-family:Arial Black,Arial,sans-serif;font-size:2rem;opacity:.28}
.pop-tile h3{font-size:1rem;margin:18px 0 7px}
.pop-tile p{margin:0;font-size:.88rem}
.tile-1{background:#ffd84c}.tile-2{background:#ff73c3}.tile-3{background:#71edf4}.tile-4{background:#b19cff}.tile-5{background:#ff9a62}.tile-6{background:#8ef0bf}

.culture-zone{padding:84px 0 20px}
.zone-title{display:flex;align-items:end;justify-content:space-between;gap:30px;border-bottom:8px solid var(--pink);padding-bottom:18px}
.zone-title h2{font-size:clamp(2.4rem,5vw,5rem);max-width:800px}
.culture-lede{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:960px;margin:26px 0}
.culture-lede p{font-family:Georgia,serif;font-size:1.04rem;margin:0}
.culture-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}

.america-zone{
  width:100%;
  max-width:none;
  margin-top:80px;
  padding:70px max(16px,calc((100vw - var(--max))/2));
  background:
    linear-gradient(135deg,transparent 0 47%,rgba(20,217,232,.08) 47% 53%,transparent 53%),
    var(--black);
  color:#fff
}
.zone-title.inverse{border-color:var(--cyan)}
.zone-title.inverse .micro-label{color:var(--cyan)}
.america-lines{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:2px solid #555b73;margin-top:24px}
.america-lines .index-item{background:transparent;border-bottom:1px solid #424860}
.america-lines .index-item:nth-child(odd){border-right:1px solid #424860}

.fashion-zone{padding:74px 0 20px}
.fashion-marquee{
  display:flex;justify-content:space-between;gap:8px;
  overflow:hidden;margin-bottom:28px
}
.fashion-marquee span{
  font-family:Arial Black,Arial,sans-serif;
  font-size:clamp(1.4rem,4vw,3.5rem);
  color:transparent;-webkit-text-stroke:2px var(--ink)
}
.fashion-marquee span:nth-child(2){-webkit-text-stroke-color:var(--pink)}
.fashion-marquee span:nth-child(3){-webkit-text-stroke-color:var(--cyan)}
.fashion-marquee span:nth-child(4){-webkit-text-stroke-color:var(--purple)}
.fashion-main>div:first-child{display:grid;grid-template-columns:.7fr 1.3fr;gap:30px;align-items:end;margin-bottom:28px}
.fashion-main h2{font-size:clamp(2.2rem,5vw,4.8rem)}
.fashion-main>div:first-child>p:last-child{font-family:Georgia,serif;font-size:1.05rem}
.fashion-items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}

.media-zone{
  margin-top:78px;
  padding:54px;
  background:#f1eaff;
  border-left:18px solid var(--purple)
}
.media-title{display:grid;grid-template-columns:.55fr 1.2fr .9fr;gap:26px;align-items:end;margin-bottom:30px}
.media-title h2{font-size:clamp(2.2rem,4vw,4rem)}
.media-title p:last-child{font-family:Georgia,serif}
.media-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:#c9bbdf}
.media-list .index-item{background:#f9f5ff}
.media-list .index-item h3{color:var(--ink)}
.media-list .index-item p{color:#595166}
.media-list .index-number{color:var(--purple)}

.music-zone{
  padding:84px 0 20px;
  display:grid;grid-template-columns:1.1fr .9fr;gap:28px
}
.music-image{margin:0;background:var(--pink);padding:10px;transform:rotate(-1deg)}
.music-image img{width:100%;aspect-ratio:16/9;object-fit:cover}
.music-image figcaption{background:var(--pink);color:#190914;padding:10px 4px 2px;font-size:.84rem}
.music-copy{padding:24px;align-self:center;background:var(--yellow)}
.music-copy h2{font-size:clamp(2.2rem,4vw,4rem);margin-bottom:14px}
.music-copy p:last-child{font-family:Georgia,serif}
.music-list{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}

.cars-zone{padding:84px 0 30px}
.cars-head{
  display:grid;grid-template-columns:.5fr 1.2fr .8fr;gap:28px;align-items:end;
  border-top:10px solid var(--ink);padding-top:24px;margin-bottom:28px
}
.cars-head h2{font-size:clamp(2rem,4.4vw,4.2rem)}
.cars-head p:last-child{font-family:Georgia,serif}
.cars-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cars-list .index-item{background:#fff;border:3px solid var(--ink)}
.cars-list .index-item h3{color:var(--ink)}
.cars-list .index-item p{color:#504a54}
.cars-list .index-number{color:var(--pink)}

.legacy-zone{
  width:100%;max-width:none;
  margin-top:70px;padding:82px max(16px,calc((100vw - var(--max))/2));
  display:grid;grid-template-columns:220px 1fr;gap:36px;
  color:#fff;
  background:
    repeating-linear-gradient(90deg,transparent 0 58px,rgba(20,217,232,.05) 58px 60px),
    linear-gradient(135deg,#33175f,#0a1735)
}
.legacy-number{font-family:Arial Black,Arial,sans-serif;font-size:9rem;color:var(--pink);line-height:.8}
.legacy-text{max-width:860px}
.legacy-text .micro-label{color:var(--cyan)}
.legacy-text h2{font-size:clamp(2.3rem,5vw,5rem);margin-bottom:22px}
.legacy-text p{font-family:Georgia,serif;font-size:1.03rem;color:#e8e3f0}

.faq-zone{padding:76px 0}
.faq-head{max-width:800px;margin-bottom:28px}
.faq-head h2{font-size:clamp(2rem,4vw,3.8rem)}
.faq-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.faq-list details{border:3px solid var(--ink);background:#fff;padding:0 18px}
.faq-list summary{cursor:pointer;padding:17px 0;font-weight:900}
.faq-list p{margin:0 0 18px;font-family:Georgia,serif}

.footer{
  position:relative;
  overflow:hidden;
  padding:48px 20px;
  text-align:center;
  color:#fff;
  background:var(--black)
}
.footer-mark{font-family:Arial Black,Arial,sans-serif;font-size:5rem;color:var(--cyan)}
.footer p{max-width:800px;margin:0 auto 14px;color:#d8d6e0}
.footer a{color:var(--yellow);font-weight:900;text-decoration:none}

@media(max-width:1100px){
  .tech-list,.fashion-items{grid-template-columns:repeat(3,1fr)}
  .culture-tiles,.music-list{grid-template-columns:repeat(4,1fr)}
  .media-title,.cars-head{grid-template-columns:1fr}
}
@media(max-width:880px){
  .decades{grid-template-columns:repeat(5,1fr)}
  .hero-stage,.overview,.tech-zone,.music-zone{grid-template-columns:1fr}
  .hero-visual{transform:none}
  .overview-title{box-shadow:8px 8px 0 var(--purple)}
  .channel-nav{grid-template-columns:repeat(3,1fr)}
  .index-grid,.america-lines,.media-list,.cars-list,.faq-list{grid-template-columns:1fr}
  .america-lines .index-item:nth-child(odd){border-right:0}
  .culture-tiles,.music-list{grid-template-columns:repeat(3,1fr)}
  .fashion-main>div:first-child{grid-template-columns:1fr}
  .legacy-zone{grid-template-columns:1fr}
  .legacy-number{font-size:6rem}
}
@media(max-width:620px){
  .hero-stage{padding-top:36px}
  .hero-year span{font-size:3rem}
  .hero-year strong{font-size:6rem}
  .hero-stripe{display:none}
  .hero-stage{padding-bottom:50px}
  .overview-copy{columns:1}
  .overview-pulses{grid-template-columns:1fr}
  .tech-list,.fashion-items,.culture-tiles,.music-list{grid-template-columns:1fr}
  .culture-lede{grid-template-columns:1fr}
  .events-screen,.media-zone{padding:24px 16px}
  .channel-nav{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}