@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;700;900&display=swap');

:root{--ink:#101010;--paper:#e8e0d0;--cream:#f3ebdd;--red:#ff3b24;--blue:#42d7ff;--pink:#ff4db8;--acid:#d9ff32;--mono:"IBM Plex Mono",monospace;--sans:"Inter",sans-serif;--display:"Archivo Black",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--sans);overflow-x:hidden}.vtm{overflow:hidden}.vtm-header{height:82px;padding:0 clamp(22px,5vw,80px);display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;background:#0b0b0b;border-bottom:1px solid #343434;position:relative;z-index:20}.vtm-brand{color:#fff;text-decoration:none;font-family:var(--display);font-size:15px;line-height:.77;letter-spacing:-1px;display:flex;flex-direction:column}.vtm-dot{color:var(--red)}.vtm-header-center{text-align:center;font:500 9px var(--mono);letter-spacing:.15em;color:#8e8e8e}.vtm-jump{text-align:right;color:var(--acid);font:600 10px var(--mono);text-decoration:none;letter-spacing:.08em}.vtm-hero{min-height:calc(100vh - 82px);position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(380px,.85fr);align-items:center;padding:7vw max(5vw,40px);background:#0d0d0d}.vtm-hero-grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to right,#000,transparent 72%)}.vtm-hero-copy{position:relative;z-index:2;max-width:950px}.vtm-kicker{font:600 11px var(--mono);letter-spacing:.18em;color:var(--red);text-transform:uppercase}.vtm-hero h1,.vtm-finale h2{font-family:var(--display);font-size:clamp(4.2rem,8.2vw,9rem);line-height:.82;letter-spacing:-.065em;margin:28px 0 32px;text-transform:uppercase}.vtm-hero h1 span{color:transparent;-webkit-text-stroke:2px var(--cream)}.vtm-deck{font-size:clamp(1.05rem,1.5vw,1.4rem);line-height:1.45;max-width:600px;color:#b9b2a7}.vtm-sign-wrap{position:relative;z-index:2;justify-self:center;transform:rotate(3deg)}.vtm-sign{width:clamp(280px,28vw,460px);aspect-ratio:1.12;background:var(--paper);color:var(--ink);clip-path:polygon(50% 0,94% 23%,100% 73%,50% 100%,0 73%,6% 23%);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;filter:drop-shadow(0 0 30px #ff3b2438)}.vtm-sign span{font:600 18px var(--mono);letter-spacing:.35em}.vtm-sign strong{font:400 clamp(4rem,7vw,7rem)/.7 var(--display);letter-spacing:-.08em;color:var(--red);margin:20px 0}.vtm-sign small{font:600 11px var(--mono);letter-spacing:.28em}.vtm-star{position:absolute;color:var(--pink);font-size:100px;right:-40px;top:-40px;text-shadow:0 0 35px var(--pink);animation:pulse 2s infinite alternate}.vtm-scroll-cue{position:absolute;left:max(5vw,40px);bottom:28px;font:500 9px var(--mono);letter-spacing:.15em;color:#777}.vtm-scroll-cue b{color:var(--acid);font-size:18px;margin-left:12px}.vtm-prologue{min-height:95vh;background:var(--paper);color:var(--ink);display:grid;grid-template-columns:.5fr 1fr 1fr;align-items:center;padding:8vw;position:relative}.vtm-prologue-label{font:600 10px var(--mono);letter-spacing:.15em;align-self:start}.vtm-prologue-number{font:400 clamp(9rem,24vw,28rem)/1 var(--display);letter-spacing:-.1em;color:#d3c9b8;position:absolute;left:4vw;bottom:-3vw}.vtm-prologue-copy{grid-column:3;position:relative;z-index:2}.vtm-prologue h2,.vtm-era h2{font-family:var(--display);font-size:clamp(3rem,6vw,7rem);line-height:.88;letter-spacing:-.055em;margin:18px 0 28px;text-transform:uppercase}.vtm-prologue-copy p,.vtm-era-copy>p{font-size:1.05rem;line-height:1.65;max-width:560px}.vtm-rail{position:absolute;left:8vw;top:20%;bottom:0;width:10px;border-left:2px solid var(--ink);border-right:2px solid var(--ink);opacity:.2}.vtm-timeline{position:relative}.vtm-progress{position:absolute;left:50%;top:0;bottom:0;width:1px;background:#ffffff25;z-index:10}.vtm-progress span{display:block;width:3px;background:var(--red);height:0;position:sticky;top:0}.vtm-era{min-height:120vh;position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:9vw max(6vw,50px);border-top:1px solid #ffffff18;overflow:hidden}.vtm-era-copy{position:relative;z-index:4;max-width:680px}.vtm-year{position:absolute;right:4vw;top:2vw;font:400 clamp(7rem,18vw,20rem)/1 var(--display);letter-spacing:-.1em;color:#ffffff09;z-index:1}.vtm-stat{margin-top:50px;border-top:1px solid #ffffff55;padding-top:20px;display:flex;gap:20px;align-items:end}.vtm-stat b{font:400 5rem/1 var(--display);color:var(--acid)}.vtm-stat span{font:600 10px var(--mono);max-width:130px}.vtm-era-art{height:min(70vh,720px);position:relative;margin-left:5vw}.era-1905{background:#19130d}.art-rail{background:linear-gradient(#e6b06b 0 52%,#704329 52%)}.sun{width:160px;height:160px;border-radius:50%;background:#e94425;position:absolute;top:12%;right:14%;filter:blur(1px)}.track{position:absolute;background:#24160f;height:9px;width:130%;left:-15%;transform-origin:left}.t1{bottom:10%;transform:rotate(-15deg)}.t2{bottom:16%;transform:rotate(-12deg)}.station{position:absolute;bottom:20%;left:12%;background:#d7c2a1;color:#1b120c;padding:30px 45px;font:600 18px var(--mono);box-shadow:12px 12px 0 #23160e}.station small{font-size:8px}.era-1931{background:#1c2624}.art-dam{background:#203a3c;overflow:hidden}.dam{position:absolute;bottom:-5%;left:18%;width:65%;height:85%;background:#b9b3a5;clip-path:polygon(0 0,100% 0,75% 100%,25% 100%)}.water{position:absolute;bottom:0;left:0;right:0;height:27%;background:#318ba1;opacity:.8}.cards{position:absolute;top:9%;right:8%;font:400 5rem var(--display);color:#f1e7d7;transform:rotate(8deg)}.cards span{color:var(--red)}.vtm-split-stat{display:flex;gap:25px;align-items:center;margin-top:45px}.vtm-split-stat div{border:1px solid #ffffff45;padding:15px 20px}.vtm-split-stat b,.vtm-split-stat span{display:block;font-family:var(--mono)}.vtm-split-stat span{font-size:9px;color:#aaa}.vtm-split-stat i{color:var(--acid);font-size:30px}.era-1941{background:#291811}.art-rancho{background:#d8b46d}.motel-sign{position:absolute;left:15%;top:12%;background:#e44b28;color:#fff;padding:35px 25px;text-align:center;font:600 16px var(--mono);transform:rotate(-3deg);box-shadow:0 0 40px #ff4a2f99}.motel-sign strong{font:400 4rem var(--display)}.road{position:absolute;bottom:0;left:0;right:0;height:35%;background:#29231e;color:#d6bd7f;text-align:center;padding-top:15%;font:600 11px var(--mono);letter-spacing:.3em}.vtm-marquee{margin-top:45px;white-space:nowrap;overflow:hidden;border-block:1px solid #ffffff45;padding:15px 0;font:600 11px var(--mono);letter-spacing:.12em;color:#ffb329}.era-1946{background:#351423}.art-flamingo{background:radial-gradient(circle at 60% 35%,#ff4db866,transparent 25%),linear-gradient(160deg,#120d14,#47132e)}.flamingo{position:absolute;top:36%;left:7%;right:7%;font:400 clamp(3rem,6vw,6rem) var(--display);color:#ff75c8;text-shadow:0 0 12px #ff4db8,0 0 40px #ff4db8;transform:rotate(-5deg)}.stars{position:absolute;right:12%;top:12%;font-size:45px;color:#42d7ff;text-shadow:0 0 18px #42d7ff}.era-1966{background:#251c12}.art-caesars{background:#d7c7a3;overflow:hidden}.column{position:absolute;bottom:0;width:90px;height:80%;background:repeating-linear-gradient(90deg,#c0ae87 0 12px,#e5d8bc 12px 22px)}.column:before{content:"";position:absolute;top:-35px;left:-15px;width:120px;height:40px;background:#e5d8bc}.c1{left:12%}.c2{right:12%}.laurel{position:absolute;inset:35% 0 auto;text-align:center;color:#3c2c19;font:400 3.8rem/1 var(--display)}.laurel span{font-size:2rem}.era-1989{background:#081e20}.art-mirage{background:linear-gradient(#102b2b 0 65%,#17110d 65%)}.hotel{position:absolute;bottom:20%;left:12%;right:12%;height:55%;background:repeating-linear-gradient(90deg,#cbb578 0 7px,#493e28 7px 12px);clip-path:polygon(7% 12%,50% 0,93% 12%,100% 100%,0 100%)}.volcano{position:absolute;z-index:3;bottom:9%;left:25%;width:50%;height:28%;background:#382017;clip-path:polygon(50% 0,100% 100%,0 100%);box-shadow:0 -25px 80px #ff4b20}.mirage{position:absolute;z-index:4;bottom:5%;left:0;right:0;text-align:center;font:400 3rem var(--display);color:#f1d98b}.vtm-bigword{font:400 clamp(5rem,10vw,10rem)/1 var(--display);color:#42d7ff12;margin-top:30px}.era-now{background:#080b17}.art-now{background:linear-gradient(#080b17,#17132a)}.sphere{position:absolute;width:min(34vw,430px);height:min(34vw,430px);border-radius:50%;left:50%;top:42%;transform:translate(-50%,-50%);background:radial-gradient(circle at 38% 35%,#fff 0 2%,#42d7ff 3%,#3621ff 35%,#ff4db8 70%,#ff3b24);box-shadow:0 0 70px #5438ff88}.skyline{position:absolute;bottom:0;left:0;right:0;height:24%;background:repeating-linear-gradient(90deg,#090909 0 30px,#161622 30px 55px);clip-path:polygon(0 45%,8% 45%,8% 20%,15% 20%,15% 55%,24% 55%,24% 10%,29% 10%,29% 40%,38% 40%,38% 0,43% 0,43% 50%,55% 50%,55% 25%,64% 25%,64% 60%,73% 60%,73% 12%,80% 12%,80% 45%,90% 45%,90% 30%,100% 30%,100% 100%,0 100%)}.speedline{position:absolute;bottom:8%;left:-10%;width:120%;height:5px;background:var(--red);box-shadow:0 0 20px var(--red);transform:rotate(-4deg)}.vtm-button{display:inline-block;margin-top:30px;background:var(--acid);color:#0a0a0a;text-decoration:none;padding:16px 20px;font:600 10px var(--mono)}.vtm-finale{min-height:100vh;background:var(--paper);color:var(--ink);padding:10vw max(6vw,50px);display:flex;flex-direction:column;justify-content:center}.vtm-finale h2{font-size:clamp(4rem,9vw,10rem);max-width:1200px}.vtm-finale h2 span{color:var(--red)}.vtm-finale-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;border-top:1px solid #888;padding-top:25px;max-width:1000px}.vtm-finale-grid p{font-size:1.05rem;line-height:1.5}.vtm-rewind{margin-top:70px;color:var(--ink);font:600 10px var(--mono)}.vtm-footer{background:#080808;color:#777;border-top:1px solid #333;padding:60px max(5vw,40px);display:flex;justify-content:space-between;font:500 10px/1.8 var(--mono);letter-spacing:.08em}.vtm-footer strong{color:#fff}.vtm-footer-right{text-align:right}
@keyframes pulse{to{transform:scale(1.12);filter:brightness(1.4)}}
@media(max-width:900px){.vtm-header{grid-template-columns:1fr 1fr}.vtm-header-center{display:none}.vtm-hero{grid-template-columns:1fr;padding-top:100px}.vtm-sign-wrap{margin:80px 0 100px}.vtm-prologue{grid-template-columns:1fr;padding:100px 28px}.vtm-prologue-copy{grid-column:1}.vtm-prologue-number{font-size:45vw}.vtm-era{grid-template-columns:1fr;padding:100px 28px}.vtm-era-art{margin:70px 0 0;height:62vh}.vtm-progress{left:14px}.vtm-finale-grid{grid-template-columns:1fr}.vtm-footer{flex-direction:column;gap:30px}.vtm-footer-right{text-align:left}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.vtm-star{animation:none}}


/* =========================================================
   V0.2 — TRUE SCROLL STORY ENGINE
   Each era becomes a tall scroll chapter with a pinned 100vh stage.
   JavaScript drives chapter progress from 0 → 1.
========================================================= */

.vtm-timeline{
  position:relative;
  isolation:isolate;
}

.vtm-progress{
  position:absolute;
  left:32px;
  top:0;
  bottom:0;
  width:2px;
  background:rgba(255,255,255,.14);
  z-index:30;
  pointer-events:none;
}
.vtm-progress span{
  position:absolute;
  left:-1px;
  top:0;
  width:4px;
  height:0;
  background:var(--red);
  box-shadow:0 0 16px rgba(255,59,36,.65);
}

.vtm-era{
  min-height:220vh;
  display:block;
  padding:0;
  overflow:clip;
  position:relative;
  border-top:1px solid rgba(255,255,255,.12);
}

.vtm-era-stage{
  position:sticky;
  top:0;
  height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  padding:8vh max(6vw,70px);
  overflow:hidden;
}

.vtm-era-copy{
  position:relative;
  z-index:5;
  max-width:680px;
  will-change:transform,opacity;
}

.vtm-era-art{
  height:min(72vh,760px);
  margin-left:5vw;
  position:relative;
  transform-origin:center;
  will-change:transform,opacity,filter;
}

.vtm-year{
  position:absolute;
  right:3vw;
  top:2vh;
  z-index:1;
  pointer-events:none;
  will-change:transform,opacity;
}

/* A small chapter marker makes the timeline read unmistakably as a timeline. */
.vtm-era::before{
  content:attr(data-era);
  position:absolute;
  left:20px;
  top:50vh;
  transform:translate(-50%,-50%) rotate(-90deg);
  z-index:31;
  color:#fff;
  background:var(--ink);
  border:1px solid rgba(255,255,255,.28);
  padding:8px 10px;
  font:600 9px var(--mono);
  letter-spacing:.12em;
}

/* Scene-specific animation hooks. JS updates --p from 0 to 1. */
.vtm-era .sun,
.vtm-era .station,
.vtm-era .cards,
.vtm-era .motel-sign,
.vtm-era .flamingo,
.vtm-era .stars,
.vtm-era .column,
.vtm-era .laurel,
.vtm-era .hotel,
.vtm-era .volcano,
.vtm-era .mirage,
.vtm-era .sphere,
.vtm-era .skyline,
.vtm-era .speedline{
  will-change:transform,opacity,filter;
}

.vtm-era.is-active .vtm-kicker{
  text-shadow:0 0 18px currentColor;
}

@media (max-width:900px){
  .vtm-progress{left:14px}
  .vtm-era{min-height:175vh}
  .vtm-era-stage{
    grid-template-columns:1fr;
    align-content:center;
    gap:38px;
    padding:78px 28px 52px 40px;
  }
  .vtm-era-art{
    height:46vh;
    margin:0;
  }
  .vtm-era::before{
    left:13px;
  }
}


/* =========================================================
   V0.3 — ARCHIVAL IMAGE STORYTELLING
========================================================= */
.vtm-hero-photo{position:absolute;inset:0 0 0 48%;z-index:0;overflow:hidden}
.vtm-hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0d0d0d 0%,rgba(13,13,13,.86) 16%,rgba(13,13,13,.18) 64%,rgba(13,13,13,.52) 100%),linear-gradient(0deg,rgba(0,0,0,.65),transparent 55%)}
.vtm-hero-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.08);transform:scale(1.08)}
.vtm-hero-copy,.vtm-sign-wrap,.vtm-scroll-cue{z-index:3}

.vtm-photo-stage{overflow:hidden;isolation:isolate}
.vtm-archive-photo{margin:0;position:absolute;overflow:hidden;background:#111}
.vtm-archive-photo img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.08);filter:saturate(.78) contrast(1.08)}
.photo-main{inset:0}
.photo-bw img{filter:grayscale(1) contrast(1.12)}
.photo-modern img{filter:saturate(1.05) contrast(1.08) brightness(.72)}
.vtm-photo-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.08),rgba(0,0,0,.62));z-index:1;pointer-events:none}
.vtm-photo-label{position:absolute;left:18px;bottom:16px;z-index:8;font:600 8px var(--mono);letter-spacing:.16em;color:#fff;background:#0d0d0ddd;border:1px solid #ffffff45;padding:8px 10px}
.motel-sign,.road,.flamingo,.stars,.column,.laurel,.volcano,.hotel,.mirage,.sphere,.skyline,.speedline{z-index:5}
.art-rancho .photo-main img{filter:saturate(.58) sepia(.2) contrast(1.08)}
.art-rancho .road{opacity:.84}
.art-flamingo .photo-main{opacity:.72}
.art-flamingo::after{background:radial-gradient(circle at 60% 35%,rgba(255,77,184,.24),transparent 30%),linear-gradient(135deg,rgba(20,6,15,.18),rgba(25,0,17,.62))}
.art-caesars .photo-main{opacity:.74}
.art-caesars::after{background:linear-gradient(135deg,rgba(52,34,15,.18),rgba(26,15,3,.7))}
.art-mirage .photo-main{opacity:.68}
.art-mirage::after{background:linear-gradient(180deg,rgba(3,22,22,.18),rgba(3,22,22,.78))}
.art-now .photo-main{opacity:.74}
.art-now::after{background:linear-gradient(135deg,rgba(5,5,18,.08),rgba(5,5,18,.72))}

.era-1970s{background:#2b170a}
.era-1980s{background:#150c24}
.vtm-photo-collage{background:#080808;overflow:visible}
.vtm-photo-collage .vtm-archive-photo{box-shadow:0 22px 70px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.22)}
.collage-70s .photo-a{left:4%;top:4%;width:72%;height:62%;transform:rotate(-2deg)}
.collage-70s .photo-b{right:1%;bottom:4%;width:48%;height:48%;transform:rotate(3deg)}
.collage-70s .photo-c{left:0;bottom:0;width:42%;height:36%;transform:rotate(-5deg)}
.collage-70s .photo-b img{filter:saturate(.92) contrast(1.08)}
.collage-70s .photo-c img{filter:saturate(.65) sepia(.12) contrast(1.08)}
.collage-80s .photo-a{inset:3% 2% 3% 2%;transform:rotate(1.2deg)}
.collage-80s .photo-a img{filter:saturate(.9) contrast(1.1)}
.vtm-decade-stamp{position:absolute;right:-4%;top:7%;z-index:8;font:400 clamp(5rem,9vw,9rem)/1 var(--display);letter-spacing:-.08em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.72);transform:rotate(90deg);transform-origin:center}
.vtm-tape{position:absolute;z-index:8;left:-7%;bottom:9%;background:var(--acid);color:#111;padding:11px 28px;font:700 10px var(--mono);letter-spacing:.12em;transform:rotate(-7deg)}
.vtm-era-index{margin-top:45px;font:600 9px var(--mono);letter-spacing:.15em;color:#ffffff66}
.vtm-era-photo .vtm-era-stage::after,.vtm-photo-stage::before{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;opacity:.13;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.13) 0 1px,transparent 1px 4px);mix-blend-mode:soft-light}
.vtm-photo-stage::before{z-index:7}
@media(max-width:900px){
  .vtm-hero-photo{inset:44% 0 0 0;opacity:.72}
  .vtm-hero-photo::after{background:linear-gradient(180deg,#0d0d0d 0%,transparent 35%,rgba(13,13,13,.55))}
  .vtm-decade-stamp{font-size:4rem;right:-10%}
  .collage-70s .photo-a{left:2%;top:2%;width:78%;height:62%}
  .collage-70s .photo-b{right:0;bottom:1%;width:54%;height:46%}
  .collage-70s .photo-c{left:0;bottom:2%;width:46%;height:34%}
}


/* =========================================================
   V0.4 — PACING PASS
   Earlier reveal + substantially less dead scroll.
========================================================= */

/* 220vh was making every chapter spend too long doing nothing.
   158vh gives us ~58vh of controlled animation while the stage is pinned. */
.vtm-era{
  min-height:158vh;
}

/* Keep the actual story content visually centered while pinned. */
.vtm-era-stage{
  padding-top:6vh;
  padding-bottom:6vh;
}

/* Don't let JS's initial frame make an incoming chapter look empty. */
.vtm-era-copy,
.vtm-era-art{
  opacity:1;
}

/* New Caesars image should read as photography first, graphics second. */
.art-caesars .photo-main{
  opacity:1;
}
.art-caesars .photo-main img{
  filter:saturate(.86) contrast(1.08) brightness(.82);
}
.art-caesars .column{
  opacity:.34;
}
.art-caesars .laurel{
  color:#fff;
  text-shadow:0 2px 25px rgba(0,0,0,.8);
}

/* User supplied modern Sphere/F1 image becomes the hero of the NOW scene. */
.art-now .photo-main{
  opacity:1;
}
.art-now .photo-main img{
  filter:saturate(1.04) contrast(1.08) brightness(.78);
}
.art-now .sphere{
  opacity:.22;
  mix-blend-mode:screen;
}
.art-now .skyline{
  opacity:.38;
}

@media(max-width:900px){
  .vtm-era{min-height:145vh}
}


/* =========================================================
   V0.6 — POP ART / EDITORIAL VEGAS
   Reference direction: retro pop-art Vegas poster, halftones,
   neon blocks, archival photography, compact scroll pacing.
========================================================= */

:root{
  --pop-cream:#f4e7c7;
  --pop-yellow:#ffd52f;
  --pop-pink:#ef336f;
  --pop-teal:#22b8b1;
  --pop-cyan:#16d6ee;
  --pop-orange:#ff5c2f;
  --pop-navy:#061329;
}

/* Compact the whole timeline. */
.vtm-era{
  min-height:138vh !important;
}
.vtm-era-stage{
  padding:4vh max(5vw,56px) !important;
}
.vtm-era + .vtm-era{
  margin-top:-1px;
}

/* Hero redesign. */
.vtm-pop-hero{
  min-height:calc(100vh - 82px);
  grid-template-columns:minmax(0,.78fr) minmax(500px,1.22fr);
  background:var(--pop-navy);
  overflow:hidden;
}
.vtm-pop-hero .vtm-hero-photo{
  inset:0;
  opacity:.22;
  mix-blend-mode:luminosity;
}
.vtm-pop-hero .vtm-hero-photo::after{
  background:linear-gradient(90deg,#061329 0 35%,rgba(6,19,41,.25) 70%,rgba(6,19,41,.65));
}
.vtm-pop-hero .vtm-hero-copy{
  z-index:6;
  max-width:720px;
}
.vtm-pop-hero .vtm-kicker{color:var(--pop-yellow)}
.vtm-pop-hero h1{
  font-size:clamp(5rem,8vw,9.5rem);
  line-height:.78;
  margin:28px 0 30px;
  text-shadow:6px 6px 0 rgba(0,0,0,.16);
}
.vtm-pop-hero h1 span{
  color:var(--pop-teal);
  -webkit-text-stroke:0;
}
.vtm-pop-hero h1 em{
  color:var(--pop-pink);
  font-style:normal;
}
.vtm-pop-hero .vtm-deck{
  color:#fff3df;
  max-width:520px;
}
.vtm-hero-button{
  background:transparent;
  color:var(--pop-yellow);
  border:2px solid var(--pop-yellow);
  box-shadow:5px 5px 0 var(--pop-pink);
}
.vtm-pop-burst{
  position:absolute;
  inset:-10% -5% -10% 38%;
  z-index:1;
  background:
    repeating-conic-gradient(from -10deg at 58% 42%,
      #ffb320 0deg 7deg,
      #ef336f 7deg 14deg,
      #7b2dbb 14deg 21deg,
      #ff5c2f 21deg 28deg);
  opacity:.72;
  clip-path:polygon(28% 0,100% 0,100% 100%,5% 100%,20% 70%,0 52%,22% 35%);
}
.vtm-pop-art{
  position:relative;
  z-index:4;
  height:min(74vh,760px);
  align-self:center;
  overflow:visible;
}
.vtm-pop-sign{
  position:absolute;
  left:2%;
  top:16%;
  z-index:7;
  width:270px;
  padding:26px 22px 30px;
  background:var(--pop-cream);
  color:#b51f32;
  border:7px solid #73d4e8;
  border-radius:44% 44% 38% 38%/28% 28% 35% 35%;
  text-align:center;
  font:900 23px/1 var(--sans);
  transform:rotate(-6deg);
  box-shadow:0 14px 0 #ef336f,0 0 0 9px rgba(0,0,0,.1);
}
.vtm-pop-sign small{
  font:700 11px var(--mono);
  color:#238b90;
}
.vtm-pop-sign b{
  display:block;
  margin-top:3px;
  font:900 29px/1 var(--sans);
}
.vtm-pop-skyline{
  position:absolute;
  left:14%;
  right:0;
  bottom:14%;
  height:56%;
  border-bottom:10px solid #00151e;
}
.vtm-pop-skyline .bldg{
  position:absolute;
  bottom:0;
  display:block;
  width:10%;
  background:linear-gradient(90deg,#f1325d 0 18%,#fd8b2f 18% 35%,#192d54 35% 50%,#10a8a2 50% 68%,#f7ca33 68% 84%,#192d54 84%);
  box-shadow:inset 0 0 0 4px #061329;
}
.b1{left:4%;height:44%}.b2{left:17%;height:62%}.b3{left:31%;height:34%}.b4{left:56%;height:54%}.b5{left:70%;height:40%}.b6{left:84%;height:68%}
.tower{
  position:absolute;left:43%;bottom:0;width:18px;height:92%;
  background:var(--pop-teal);box-shadow:inset 0 0 0 4px #061329;
}
.tower::before{
  content:"";position:absolute;left:-28px;top:24%;width:74px;height:74px;
  border:8px solid var(--pop-teal);border-radius:50%;background:#061329;
}
.pyramid{
  position:absolute;left:64%;bottom:0;width:20%;height:38%;
  background:var(--pop-teal);clip-path:polygon(50% 0,100% 100%,0 100%);
  box-shadow:inset 0 0 0 4px #061329;
}
.eiffel{
  position:absolute;right:7%;bottom:0;width:55px;height:72%;
  background:var(--pop-orange);
  clip-path:polygon(45% 0,55% 0,61% 50%,84% 100%,64% 100%,50% 58%,36% 100%,16% 100%,39% 50%);
}
.vtm-pop-road{
  position:absolute;left:14%;right:-5%;bottom:4%;height:18%;
  background:#07131e;
  clip-path:polygon(0 18%,100% 0,100% 100%,0 88%);
}
.vtm-pop-road::after{
  content:"";position:absolute;left:0;right:0;top:50%;height:5px;background:var(--pop-pink);
  box-shadow:0 -28px 0 var(--pop-teal),0 28px 0 var(--pop-yellow);
  transform:rotate(-2deg);
}
.vtm-halftone{
  position:absolute;border-radius:50%;
  background-image:radial-gradient(circle,#000 1.4px,transparent 1.5px);
  background-size:9px 9px;opacity:.26;mix-blend-mode:multiply;
}
.vtm-halftone.h1{width:220px;height:220px;right:0;top:4%}
.vtm-halftone.h2{width:180px;height:180px;left:35%;bottom:1%}

/* Pop-art era accents without wrecking photography. */
.era-1905{background:#f0e6cf;color:#101010}
.era-1905 .vtm-kicker{color:#e14a2d}
.era-1905 .vtm-era-copy>p{color:#2a241d}
.era-1905 .vtm-stat{border-color:#9e8e78}
.era-1905 .vtm-year{color:#0000000d}

.era-1970s{
  background:
    radial-gradient(circle at 88% 12%,rgba(239,51,111,.18) 0 2px,transparent 2.5px) 0 0/11px 11px,
    #2b130b;
}
.era-1970s .vtm-kicker{color:var(--pop-orange)}
.era-1970s h2{color:var(--pop-cream)}
.era-1970s h2::first-line{color:var(--pop-yellow)}

.era-1980s{
  background:
    linear-gradient(135deg,rgba(34,184,177,.08),transparent 40%),
    #120d25;
}
.era-1980s .vtm-kicker{color:var(--pop-cyan)}

.era-1989{
  background:
    radial-gradient(circle at 88% 10%,rgba(255,213,47,.14) 0 2px,transparent 2.5px) 0 0/13px 13px,
    #071f27;
}

/* LOCK IN THE REAL MIRAGE PHOTO. */
.art-mirage{
  background:#06151d !important;
}
.art-mirage .vtm-archive-photo.photo-main{
  display:none !important;
}
.vtm-mirage-image{
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  background-image:
    linear-gradient(180deg,rgba(4,18,22,.03),rgba(4,18,22,.44)),
    url("../images/mirage-90s.jpg");
  background-size:cover;
  background-position:center;
}
.art-mirage .hotel,
.art-mirage .volcano{
  display:none !important;
}
.art-mirage .mirage{
  left:26px;
  right:auto;
  bottom:26px;
  padding:10px 14px;
  color:var(--pop-yellow);
  background:#07151fd9;
  border:1px solid rgba(255,255,255,.35);
  font-size:1.5rem;
  letter-spacing:.02em;
}
.art-mirage::after{
  background:linear-gradient(180deg,transparent 45%,rgba(4,14,18,.7)) !important;
}

/* Lower/earlier feeling entrances. The JS now starts at 88% viewport. */
.vtm-era-copy{transform-origin:left center}
.vtm-era-art{transform-origin:center bottom}

@media(max-width:900px){
  .vtm-era{min-height:128vh !important}
  .vtm-era-stage{padding:4vh 26px 4vh 42px !important}
  .vtm-pop-hero{grid-template-columns:1fr;padding-top:90px}
  .vtm-pop-art{height:50vh;margin-top:45px}
  .vtm-pop-burst{inset:40% -20% -5% 0}
  .vtm-pop-sign{width:210px;left:1%;top:10%;font-size:18px}
}