/* We Never Grew Up — Nostalgia Merch v2
   Home + 1970s / 1980s / 1990s / 2000s / 2010s */

:root {
  --cream: #f8f4ec;
  --ink: #141414;
  --muted: #6b6560;
  --pink: #ff2d8a;
  --purple: #7b3ff2;
  --teal: #14b8a6;
  --orange70: #e08a2a;
  --neon80: #ff3ad6;
  --line: #e6dfd4;
  --paper: #f4ead4;
  --max: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
html, body { margin: 0; padding: 0; }
body { overflow-x: hidden; }
img, svg { max-width: 100%; display: block; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

body {
  min-height: 100vh;
  color: var(--ink);
  background: var(--cream);
  font-family: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  transition: background .45s var(--ease), color .45s var(--ease);
}

.skip {
  position: absolute;
  left: -999px;
  top: 0;
  background: #000;
  color: #fff;
  padding: .6rem 1rem;
  z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

main { animation: fadeUp .55s var(--ease); }
@keyframes fadeUp {
  from { transform: translateY(10px); }
  to { transform: none; }
}

/* ========== HEADER / NAV ========== */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.1rem 1.4rem 0.6rem;
  position: relative;
  z-index: 20;
}

.brand { text-decoration: none; color: inherit; display: inline-block; }

.brand-paper {
  position: relative;
  display: inline-block;
  background:
    linear-gradient(90deg, transparent 22px, #e8a8a8 22px, #e8a8a8 23.5px, transparent 23.5px),
    repeating-linear-gradient(#f7f0de 0 26px, #c9d7ea 26px 27px);
  background-color: var(--paper);
  padding: 0.85rem 1.55rem 0.7rem 1.85rem;
  box-shadow: 0 8px 18px rgba(40, 24, 8, .12), 0 1px 0 rgba(255,255,255,.6) inset;
  transform: rotate(-1.4deg);
  clip-path: polygon(
    1% 3%, 4% 0, 12% 2%, 22% 0, 38% 3%, 54% 0, 70% 2%, 86% 0, 97% 3%,
    100% 10%, 98% 22%, 100% 40%, 97% 58%, 100% 76%, 98% 90%, 96% 100%,
    82% 97%, 68% 100%, 50% 97%, 34% 100%, 18% 97%, 6% 100%, 0 88%,
    2% 70%, 0 52%, 3% 34%, 0 16%
  );
}

.brand-mark {
  display: block;
  font-family: "Caveat", "Segoe Script", cursive;
  font-weight: 600;
  font-size: 2.05rem;
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: #1a1a1a;
  text-transform: lowercase;
}
.brand-mark .w3 { position: relative; display: inline-block; }
.brand-mark .w3::after {
  content: "";
  position: absolute;
  left: 0; right: -0.4em; bottom: -0.18em;
  height: 3px; border-radius: 2px;
  background: #1a1a1a;
  transform: rotate(-3deg);
}
.brand-star {
  position: absolute;
  right: 0.7rem;
  bottom: 1.55rem;
  font-size: 0.95rem;
  color: #1a1a1a;
}
.brand-sub {
  display: block;
  margin-top: 0.55rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #3a3a3a;
  text-align: center;
}
.brand-reflection { display: none; }

.nav { display: flex; align-items: center; gap: 1.55rem; }
.nav a, .nav .menu-btn {
  font-size: 0.98rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.nav a:hover, .nav .menu-btn:hover { opacity: 0.65; }

.has-menu { position: relative; }
.has-menu[open] .menu,
.has-menu.is-open .menu,
.has-menu:hover .menu,
.has-menu:focus-within .menu { display: block; }
.has-menu::after {
  content: "";
  position: absolute;
  left: -12px;
  right: -12px;
  top: 100%;
  height: 0.75rem;
}
.menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(20,16,10,.12);
  padding: 0.45rem;
  z-index: 30;
}
.menu a, .menu .soon-item {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-size: 0.92rem;
  text-decoration: none;
}
.menu a:hover { background: #f3eee4; opacity: 1; }
.menu a[aria-current="page"] { font-weight: 700; }

.cart { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 500; }
.cart svg { width: 22px; height: 22px; }
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.3rem;
}
.follow-btn { display: none; }

/* ========== HOME HERO ========== */
.hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.6rem 1.4rem 0;
  text-align: center;
}
.hero h1 {
  font-family: "Poppins", "DM Sans", sans-serif;
  font-weight: 800;
  font-size: clamp(1.7rem, 4vw, 2.55rem);
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 0 0 1.5rem;
}
.hero h1 em { font-style: normal; color: var(--pink); }

/* ========== TIMELINE (film strip) ========== */
.timeline-wrap {
  max-width: var(--max);
  margin: 0 auto 2rem;
  padding: 0 1.4rem;
}
.timeline-shell {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background:
    repeating-linear-gradient(90deg, #111 0 12px, #1c1c20 12px 20px) top / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, #111 0 12px, #1c1c20 12px 20px) bottom / 100% 9px no-repeat,
    #1a1a1d;
  border-radius: 18px;
  padding: 1rem 0.7rem 1.05rem;
  box-shadow: 0 18px 40px rgba(0,0,0,.18), inset 0 0 0 2px #2c2c32;
  color: #fff;
  position: relative;
}
.tl-arrow {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 10px;
  border: 0;
  background: #2a2a2e;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
}
.tl-arrow:hover { background: #3a3a40; }
.tl-arrow svg { width: 18px; height: 18px; }
.timeline {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: auto;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-y;
}
.timeline.is-dragging { cursor: grabbing; user-select: none; }
.timeline::-webkit-scrollbar { display: none; }

.timeline-track {
  display: flex;
  align-items: flex-start;
  min-width: max-content;
  position: relative;
  padding: 0.2rem 1.2rem 0.35rem;
  gap: 0;
}
.timeline-track::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 40px;
  height: 3px;
  background: linear-gradient(90deg, #c45c26, #ff2bd6, #ff2d8a, #8a4dff, #14b8a6);
  border-radius: 2px;
  opacity: .9;
}
.tl-item {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  min-width: 86px;
  padding: 0 .15rem;
}
.tl-item.is-tick {
  min-width: 54px;
  cursor: default;
  pointer-events: none;
  color: #9a9690;
}
.tl-year { font-weight: 600; font-size: 0.92rem; }
.tl-item.is-tick .tl-year { font-size: 0.68rem; font-weight: 500; opacity: .7; }
.tl-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #bdb8b2;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #cfc9c2;
  margin-top: 2px;
}
.tl-item.is-tick .tl-dot {
  width: 8px; height: 8px;
  border-width: 2px;
  box-shadow: none;
  margin-top: 6px;
  background: #8a8680;
}
.tl-item.y70s { color: var(--orange70); }
.tl-item.y70s .tl-dot { background: var(--orange70); box-shadow: 0 0 0 2px var(--orange70); }
.tl-item.y80s { color: #ff6ae0; }
.tl-item.y80s .tl-dot { background: var(--neon80); box-shadow: 0 0 0 2px #00e5ff; }
.tl-item.y90s { color: var(--pink); }
.tl-item.y90s .tl-dot { background: var(--pink); box-shadow: 0 0 0 2px var(--pink); }
.tl-item.y00s { color: #9b6bff; }
.tl-item.y00s .tl-dot { background: #8a4dff; box-shadow: 0 0 0 2px #8a4dff; }
.tl-item.y10s { color: var(--teal); }
.tl-item.y10s .tl-dot { background: var(--teal); box-shadow: 0 0 0 2px var(--teal); }
.tl-item.is-current .tl-year { text-decoration: underline; text-underline-offset: 4px; }
.tl-item.is-current .tl-dot { transform: scale(1.15); }

/* ========== COLLECTION CARDS ========== */
.collections {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.4rem 3rem;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.15rem;
}
.collections .card { grid-column: span 2; }

.card {
  border-radius: 22px;
  overflow: hidden;
  min-height: 400px;
  padding: 1.25rem 1.25rem 1.15rem;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  position: relative;
  box-shadow: 0 12px 28px rgba(20,16,10,.08);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(20,16,10,.14); }
.card h2 {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 2.2rem;
  letter-spacing: -0.03em;
  line-height: 1;
}
.card .tag {
  display: inline-block;
  margin: 0.55rem 0 0.7rem;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.card .copy h3 { margin: 0 0 0.25rem; font-size: 0.92rem; letter-spacing: 0.04em; }
.card .copy p { margin: 0; font-size: 0.92rem; max-width: 18ch; opacity: 0.92; }
.card .cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  z-index: 2;
}
.card .viz {
  position: absolute;
  right: 0.4rem;
  bottom: 0.4rem;
  width: 52%;
  pointer-events: none;
}
.card .ph {
  position: absolute;
  right: 0.8rem;
  top: 0.8rem;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
  background: rgba(255,255,255,.55);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

.card-70s {
  background:
    repeating-linear-gradient(180deg, #f0a33a 0 18px, #e07a28 18px 36px, #c44a32 36px 54px, #7a2d5a 54px 72px);
  color: #2a1408;
  border: 3px solid #5c2a10;
}
.card-70s h2 {
  font-family: "Shrikhand", Georgia, serif;
  font-weight: 400;
  color: #f6d36a;
  text-shadow: 3px 3px 0 #8b2e0e;
}
.card-70s .tag { background: #f0c14a; color: #5c2a10; }
.card-70s .cta { background: #5c2a10; color: #f6d36a; }
.card-70s .copy { color: #fff8e6; text-shadow: 0 1px 0 #5c2a10; }

.card-80s {
  background:
    linear-gradient(180deg, #14022a 0 42%, transparent 42%),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,45,214,.35) 18px 19px),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(0,229,255,.28) 18px 19px),
    linear-gradient(180deg, #1a0533 40%, #ff2e97 72%, #ffb35a 100%);
  color: #fff;
  border: 2px solid #ff3ad6;
  box-shadow: 0 0 0 2px #00e5ff, 0 12px 28px rgba(20,0,40,.3);
}
.card-80s h2 {
  font-family: "Monoton", cursive;
  font-weight: 400;
  font-size: 1.7rem;
  color: #ffe14a;
  text-shadow: 0 0 10px #ff3ad6, 0 0 18px #00e5ff;
}
.card-80s .tag { background: #00e5ff; color: #14022a; border-radius: 2px; }
.card-80s .cta { background: #ff3ad6; color: #fff; border-radius: 2px; box-shadow: 3px 3px 0 #00e5ff; }

.card-90s {
  background:
    radial-gradient(circle at 18% 80%, #ff2d8a 0 12px, transparent 13px),
    radial-gradient(circle at 86% 18%, #2ad4d8 0 10px, transparent 11px),
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,.05) 18px 20px),
    linear-gradient(160deg, #1a0828 0%, #3b0a4a 55%, #120616 100%);
  color: #fff;
  border: 2px solid #2a1638;
}
.card-90s h2 {
  background: linear-gradient(90deg, #ff4ec4, #7cf0ff 55%, #ffe14a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 #000);
}
.card-90s .tag { background: #ff2d8a; color: #fff; }
.card-90s .cta { background: #ff2d8a; color: #fff; }

.card-00s {
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.7) 0 28px, transparent 29px),
    radial-gradient(circle at 70% 20%, rgba(255,255,255,.55) 0 46px, transparent 48px),
    linear-gradient(180deg, #d7f0ff 0%, #9fd6f5 50%, #7ec8ef 100%);
  color: #16324a;
  border: 2px solid #c5e8fa;
}
.card-00s h2 {
  font-style: italic;
  color: #1a4d7a;
  text-shadow: 0 1px 0 #fff, 0 8px 18px rgba(30,90,140,.2);
}
.card-00s .tag { background: #3aa0e8; color: #fff; }
.card-00s .cta {
  background: linear-gradient(180deg, #eaf8ff 0%, #7ad1ff 30%, #2b8adf 70%, #1668b0 100%);
  color: #fff;
  border: 1px solid #1d6fb8;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 3px 0 #155888;
}

.card-10s {
  background: linear-gradient(180deg, #f6e4cf 0%, #f0d3b4 100%);
  color: #2a2118;
  border: 1px solid #ecd4b6;
}
.card-10s h2 {
  font-family: "Raleway", "Poppins", sans-serif;
  font-weight: 200;
  letter-spacing: 0.02em;
}
.card-10s .tag { background: #2a2118; color: #f6e4cf; border-radius: 2px; letter-spacing: 0.14em; }
.card-10s .cta { background: transparent; color: #2a2118; border: 1px solid #2a2118; border-radius: 0; }

/* ========== PRODUCT GRID ========== */
.page-main { max-width: var(--max); margin: 0 auto; padding: 0.5rem 1.4rem 3.5rem; }
.era-intro { margin: 0.4rem 0 1.4rem; }
.era-intro h1 {
  margin: 0 0 0.35rem;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.1;
}
.era-intro p { margin: 0; max-width: 48ch; color: var(--muted); }

.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
.product {
  background: #fff;
  border-radius: 16px;
  padding: 0.9rem 0.9rem 1rem;
  box-shadow: 0 8px 22px rgba(20,16,10,.07);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  position: relative;
}
.product-media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.product-media svg { width: 100%; height: 100%; }
.product-media .ph-label {
  position: absolute;
  left: 0.55rem;
  top: 0.55rem;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255,255,255,.78);
  color: #333;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  z-index: 2;
}
.badge-new {
  position: absolute;
  right: 0.7rem;
  top: 0.7rem;
  z-index: 3;
  background: #ffe600;
  color: #d10000;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 0.18rem 0.45rem;
  border: 2px solid #d10000;
  animation: blink 1.05s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.product h3 { margin: 0.25rem 0 0; font-size: 1.05rem; }
.product .meta { margin: 0; font-size: 0.82rem; color: var(--muted); }
.product .price { margin: 0; font-weight: 700; font-size: 1.05rem; }
.buy {
  margin-top: auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  padding: 0.65rem 0.9rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.88rem;
  background: var(--ink);
  color: #fff;
}

/* ========== ABOUT / FOOTER ========== */
.prose { max-width: 40rem; }
.prose p { color: #3a352f; }
.site-footer {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.2rem 1.4rem 2.4rem;
  color: var(--muted);
  font-size: 0.82rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
}
.notice { max-width: var(--max); margin: 4rem auto; padding: 0 1.4rem; text-align: center; }
.toast {
  position: fixed;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1a1a1d;
  color: #fff;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  font-size: 0.88rem;
  opacity: 0;
  pointer-events: none;
  transition: .3s var(--ease);
  z-index: 80;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.marquee {
  overflow: hidden;
  background: #ffe033;
  color: #1a0030;
  font-family: "Bungee", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  border-bottom: 3px solid #ff4ec4;
}
.marquee-inner {
  display: flex;
  width: max-content;
  animation: march 22s linear infinite;
  padding: 0.4rem 0;
}
.marquee-inner span { padding: 0 2rem; white-space: nowrap; }
@keyframes march { to { transform: translateX(-50%); } }
.hit-counter {
  display: inline-block;
  margin-top: 0.7rem;
  padding: 0.2rem 0.5rem;
  background: #000;
  color: #3cff6a;
  font-family: "Sniglet", monospace;
  letter-spacing: 0.16em;
  border: 2px solid #3cff6a;
}

/* ========== 1970s ========== */
.era-70s {
  color: #2a1608;
  background-color: #4a2810;
  background-image:
    repeating-linear-gradient(90deg,
      #4a2810 0 7px, #6b3a16 7px 16px, #3d200c 16px 20px, #7a4a22 20px 30px);
}
.era-70s .brand-paper {
  background: none; padding: 0; box-shadow: none; clip-path: none; transform: rotate(-3deg);
}
.era-70s .brand-mark {
  font-family: "Shrikhand", "Righteous", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.55rem, 3.2vw, 2.55rem);
  line-height: 0.95;
  color: #f0c14a;
  text-shadow: 3px 3px 0 #8b2e0e, 6px 6px 0 #3d1608;
}
.era-70s .brand-mark .w3::after { display: none; }
.era-70s .brand-mark .w3 { display: block; color: #e07a28; }
.era-70s .brand-star { display: none; }
.era-70s .brand-sub { color: #f8e2b0; text-shadow: 1px 1px 0 #3d1608; }
.era-70s .nav a, .era-70s .nav .menu-btn, .era-70s .nav-toggle { color: #f8e2b0; }
.era-70s .menu { background: #f3d9a4; border-color: #8b2e0e; }
.era-70s .menu a:hover { background: #e8c56e; }
.era-70s .timeline-shell {
  background: #3d1608;
  border: 3px solid #f0c14a;
  box-shadow: 6px 6px 0 #e07a28;
}
.era-70s .era-intro h1 {
  font-family: "Shrikhand", Georgia, serif;
  font-weight: 400;
  color: #f0c14a;
  text-shadow: 3px 3px 0 #8b2e0e;
}
.era-70s .era-intro p { color: #f8e2b0; }
.era-70s .page-well .era-intro h1 { color: #8b2e0e; text-shadow: 3px 3px 0 #f0c14a; }
.era-70s .page-well .era-intro p { color: #5c2a10; }
.era-70s .page-well {
  background: #f4d7a0;
  border-radius: 36px;
  padding: 1.2rem 1.2rem 1.6rem;
  box-shadow: 8px 8px 0 #8b2e0e;
}
.era-70s .product {
  background: #fff4d6;
  border: 3px solid #8b2e0e;
  border-radius: 28px;
  box-shadow: 6px 6px 0 #e07a28;
  color: #2a1608;
}
.era-70s .buy {
  background: #8b2e0e;
  color: #f0c14a;
  border-radius: 999px;
  box-shadow: 3px 3px 0 #e07a28;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.era-70s .site-footer { border-top-color: #f0c14a; color: #f0d8a8; }
.era-70s .marquee {
  background: #f0c14a;
  color: #3d1608;
  font-family: "Righteous", sans-serif;
  border-bottom: 0;
}
.rainbow-bar {
  height: 12px;
  background: linear-gradient(90deg, #c0392b, #e67e22, #f1c40f, #27ae60, #2980b9, #8e44ad);
}
.sunset-bar {
  height: 22px;
  background: linear-gradient(180deg, #f6c945, #e07a28 40%, #c44a3a 70%, #6b2d6b);
}
.vinyl {
  width: 72px; height: 72px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #f0c14a 0 8px, #2a1608 9px 12px, #1a0c04 13px 18px,
      transparent 19px 22px, #1a0c04 23px);
  background-color: #111;
  box-shadow: inset 0 0 0 10px #1a1a1a, 0 4px 0 #8b2e0e;
  animation: spin 8s linear infinite;
  display: inline-block;
  margin: 0.6rem 0.6rem 0 0;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ========== 1980s ========== */
.era-80s { color: #fff; background: #120224; position: relative; overflow-x: hidden; }
.era-80s .scanlines,
.era-80s .era-80s .horizon-grid { overflow: hidden;
  pointer-events: none;
  position: fixed;
  inset: 0;
}
.era-80s .horizon-grid { overflow: hidden;
  background:
    linear-gradient(180deg, #14022a 0%, #2a0870 38%, transparent 38%),
    linear-gradient(180deg, transparent 50%, #ff2e97 78%, #ffb35a 100%);
  z-index: 0;
}
.era-80s .horizon-grid::after {
  content: "";
  position: absolute;
  left: -10%; right: -10%;
  top: 48%;
  height: 70%;
  background:
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,58,214,.55) 38px 39px),
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(0,229,255,.4) 28px 29px);
  transform: perspective(420px) rotateX(62deg);
  transform-origin: center top;
  opacity: .7;
}
.era-80s .scanlines {
  z-index: 1;
  background: repeating-linear-gradient(rgba(0,0,0,.14) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
  opacity: .65;
}
.era-80s .page-main,
.era-80s .timeline-wrap,
.era-80s .site-footer,
.era-80s .vhs-bar { position: relative; z-index: 2; }
.era-80s .brand-paper {
  background: none; padding: 0; box-shadow: none; clip-path: none; transform: none;
}
.era-80s .brand-mark {
  font-family: "Monoton", cursive;
  font-weight: 400;
  font-size: clamp(1.25rem, 2.8vw, 2.05rem);
  line-height: 1.05;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, #ffffff 0%, #ff9ae8 30%, #ffffff 48%, #7ad7ff 78%, #fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px #ff3ad6) drop-shadow(0 0 16px #00e5ff);
}
.era-80s .brand-mark .w3::after { display: none; }
.era-80s .brand-mark .w3 {
  display: block;
  font-family: "Yellowtail", cursive;
  letter-spacing: 0.02em;
  background: none;
  color: #ffe14a;
  -webkit-text-fill-color: #ffe14a;
  filter: drop-shadow(0 0 8px #ff3ad6);
}
.era-80s .brand-star { display: none; }
.era-80s .brand-sub {
  font-family: "Press Start 2P", monospace;
  font-size: 0.42rem;
  color: #00e5ff;
  letter-spacing: 0.14em;
  text-shadow: 0 0 8px #00e5ff;
}
.era-80s .nav a, .era-80s .nav .menu-btn, .era-80s .nav-toggle { color: #ffe9ff; }
.era-80s .menu { background: #1a0533; border: 1px solid #ff3ad6; }
.era-80s .menu a:hover { background: #2a0870; }
.era-80s .timeline-shell {
  background: rgba(10,0,24,.78);
  border: 2px solid #ff3ad6;
  box-shadow: 0 0 0 2px #00e5ff, 0 0 24px rgba(255,58,214,.45);
  border-radius: 4px;
}
.era-80s .era-intro h1 {
  font-family: "Monoton", cursive;
  font-weight: 400;
  color: #ffe14a;
  text-shadow: 0 0 12px #ff3ad6;
  font-size: clamp(1.4rem, 3.4vw, 2.2rem);
}
.era-80s .era-intro p { color: #f4c8ff; }
.era-80s .product {
  background: rgba(16,0,36,.82);
  border: 2px solid #00e5ff;
  box-shadow: 5px 5px 0 #ff3ad6;
  color: #fff;
  border-radius: 2px;
}
.era-80s .buy {
  background: #ff3ad6;
  color: #fff;
  border-radius: 2px;
  box-shadow: 3px 3px 0 #00e5ff;
  font-family: "Press Start 2P", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.04em;
  padding: 0.85rem 0.6rem;
}
.era-80s .site-footer { border-top-color: #ff3ad6; color: #e0b8f4; }
.vhs-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 1.4rem;
  font-family: "Press Start 2P", monospace;
  font-size: 0.52rem;
  color: #ff4d4d;
  letter-spacing: 0.08em;
  background: #000;
}
.vhs-bar .rec { animation: blink 1s step-end infinite; }
.press-start {
  display: inline-block;
  margin-top: 0.7rem;
  font-family: "Press Start 2P", monospace;
  font-size: 0.62rem;
  color: #ffe14a;
  animation: blink 1.2s step-end infinite;
}

/* ========== 1990s ========== */
.era-90s {
  color: #fff;
  background-color: #120018;
  background-image:
    linear-gradient(rgba(18,0,24,.55), rgba(18,0,24,.55)),
    repeating-linear-gradient(45deg, #2a0040 0 14px, #1a0028 14px 28px),
    repeating-linear-gradient(-45deg, transparent 0 10px, rgba(255,0,180,.08) 10px 12px);
}
.era-90s .site-header { align-items: flex-start; padding-top: 1.4rem; }
.era-90s .brand-paper {
  background: none; padding: 0; box-shadow: none; clip-path: none; transform: rotate(-2deg);
}
.era-90s .brand-mark {
  font-family: "Luckiest Guy", "Bungee", cursive;
  font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  -webkit-text-stroke: 5px #1a0030;
  paint-order: stroke fill;
  filter: drop-shadow(3px 4px 0 #ff4ec4) drop-shadow(-2px 2px 0 #2ad4d8);
}
.era-90s .brand-mark .w3::after { display: none; }
.era-90s .brand-mark .w1 { color: #2ad4d8; }
.era-90s .brand-mark .w2 { color: #ff4ec4; }
.era-90s .brand-mark .w3 { color: #ffe033; display: block; }
.era-90s .brand-star { display: none; }
.era-90s .brand-sub { color: #f4f0ff; text-shadow: 0 0 8px #ff4ec4; margin-top: 0.35rem; }
.era-90s .nav a, .era-90s .nav .menu-btn, .era-90s .nav-toggle { color: #ffe9ff; }
.era-90s .menu { background: #240033; border-color: #ff4ec4; }
.era-90s .menu a:hover { background: #3a0050; }
.era-90s .timeline-shell {
  background: #000;
  border: 3px solid #ff4ec4;
  box-shadow: 0 0 0 3px #2ad4d8, 0 0 24px #ff4ec4;
}
.era-90s .era-intro h1 {
  font-family: "Bungee", "Luckiest Guy", cursive;
  color: #ffe033;
  text-shadow: 3px 3px 0 #ff4ec4, -2px 0 0 #2ad4d8;
}
.era-90s .era-intro p { color: #e7c8ff; }
.era-90s .product {
  background: #1c002c;
  border: 2px solid #ff4ec4;
  box-shadow: 6px 6px 0 #2ad4d8;
  color: #fff;
  border-radius: 6px;
}
.era-90s .product .meta { color: #d2b0ea; }
.era-90s .buy {
  background: #ffe033;
  color: #1a0030;
  border-radius: 4px;
  box-shadow: 3px 3px 0 #ff4ec4;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.era-90s .site-footer { border-top-color: #ff4ec4; color: #c9a6e0; }

/* ========== 2000s (MySpace / web 2.0) ========== */
.era-2000s {
  color: #16324a;
  background: linear-gradient(180deg, #3b9ada 0 86px, #d5f0ff 86px, #f3fbff 360px, #eaf7ff);
  position: relative;
}
.era-2000s .sparkle-field {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}
.era-2000s .sparkle-field i {
  position: absolute;
  width: 14px; height: 14px;
  background: #fff;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: twinkle 1.7s ease-in-out infinite;
  filter: drop-shadow(0 0 4px #fff);
}
.era-2000s .sparkle-field i:nth-child(1) { top: 8%; left: 6%; animation-delay: 0s; }
.era-2000s .sparkle-field i:nth-child(2) { top: 14%; left: 28%; animation-delay: .3s; width: 10px; height: 10px; }
.era-2000s .sparkle-field i:nth-child(3) { top: 6%; left: 54%; animation-delay: .7s; }
.era-2000s .sparkle-field i:nth-child(4) { top: 18%; left: 78%; animation-delay: .15s; }
.era-2000s .sparkle-field i:nth-child(5) { top: 10%; left: 92%; animation-delay: 1s; width: 9px; height: 9px; }
.era-2000s .sparkle-field i:nth-child(6) { top: 36%; left: 12%; animation-delay: .5s; }
.era-2000s .sparkle-field i:nth-child(7) { top: 48%; left: 88%; animation-delay: .9s; }
.era-2000s .sparkle-field i:nth-child(8) { top: 70%; left: 8%; animation-delay: .2s; }
.era-2000s .sparkle-field i:nth-child(9) { top: 82%; left: 40%; animation-delay: 1.1s; width: 11px; height: 11px; }
.era-2000s .sparkle-field i:nth-child(10) { top: 64%; left: 70%; animation-delay: .4s; }
.era-2000s .sparkle-field i:nth-child(11) { top: 28%; left: 46%; animation-delay: .8s; width: 8px; height: 8px; }
.era-2000s .sparkle-field i:nth-child(12) { top: 90%; left: 86%; animation-delay: .6s; }
@keyframes twinkle {
  0%, 100% { opacity: .15; transform: scale(.4) rotate(0); }
  50% { opacity: 1; transform: scale(1.15) rotate(18deg); }
}
.ms-topbar {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.45rem 1.4rem;
  background: linear-gradient(180deg, #ffffff 0%, #9fd4f8 45%, #3a9ee0 100%);
  border-bottom: 2px solid #1d6fb8;
  color: #0d3b66;
  font-weight: 700;
  box-shadow: inset 0 1px 0 #fff;
}
.online-now {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
  border: 1px solid #1d6fb8;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.82rem;
}
.online-now .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #3ad14b;
  box-shadow: 0 0 8px #3ad14b;
  animation: blink 1.4s step-end infinite;
}
.era-2000s .page-main,
.era-2000s .timeline-wrap,
.era-2000s .site-footer { position: relative; z-index: 2; }
.era-2000s .brand-paper {
  background: none; padding: 0.15rem 0 0; box-shadow: none; clip-path: none; transform: none;
}
.era-2000s .brand-mark {
  font-family: "Varela Round", "Trebuchet MS", sans-serif;
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #ffffff 0%, #e8eef6 16%, #9aa6b8 36%, #ffffff 52%, #5d6778 80%, #d5dce6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 #4a5564) drop-shadow(0 3px 0 #c5ccd6) drop-shadow(0 10px 14px rgba(20,50,90,.3));
}
.era-2000s .brand-mark .w3::after { display: none; }
.era-2000s .brand-mark .w3 { display: block; }
.era-2000s .brand-star { display: none; }
.era-2000s .brand-sub { color: #1b4f7a; text-shadow: 0 1px 0 #fff; margin-top: 0.25rem; }
.era-2000s .brand-reflection {
  display: block;
  transform: scaleY(-1);
  opacity: 0.32;
  mask-image: linear-gradient(to bottom, transparent 30%, #000 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 30%, #000 100%);
  pointer-events: none;
  margin-top: 2px;
}
.era-2000s .nav a, .era-2000s .nav .menu-btn, .era-2000s .nav-toggle { color: #10406a; font-weight: 700; }
.era-2000s .menu { background: #fff; border: 1px solid #8ec8f0; border-radius: 16px; }
.era-2000s .timeline-shell {
  background: linear-gradient(180deg, #ffffff, #d7ecfb);
  color: #16324a;
  border: 2px solid #7ec4ef;
  box-shadow: 0 8px 0 #3b8ec8, 0 16px 24px rgba(30,90,140,.18);
}
.era-2000s .tl-arrow { background: linear-gradient(180deg, #9fe0ff, #3aa0e8); color: #fff; }
.era-2000s .era-intro h1 {
  font-family: "Varela Round", "Trebuchet MS", sans-serif;
  color: #1a5c96;
  text-shadow: 0 1px 0 #fff;
}
.era-2000s .era-intro p { color: #3a6280; }

.ms-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.2rem;
  align-items: start;
}
.ms-profile {
  background: linear-gradient(180deg, #ffffff, #e7f6ff);
  border: 2px solid #fff;
  border-radius: 16px;
  padding: 1rem;
  box-shadow: inset 1px 1px 0 #fff, inset -2px -2px 0 #8ec0de, 6px 6px 0 #9ec8e0;
}
.ms-profile h2 {
  margin: 0 0 0.5rem;
  font-family: "Varela Round", sans-serif;
  font-size: 1.15rem;
  color: #1a5c96;
}
.ms-profile .mood { margin: 0.35rem 0 0.8rem; font-size: 0.9rem; }
.now-playing {
  background: linear-gradient(180deg, #1a1a1a, #333);
  color: #9cff6a;
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
  font-size: 0.82rem;
  box-shadow: inset 0 2px 0 #555;
}
.now-playing strong { display: block; color: #fff; margin-bottom: 0.25rem; }
.now-playing p { margin: 0 0 0.45rem; color: #c8f7a6; }
.eq { display: flex; gap: 3px; align-items: flex-end; height: 16px; }
.eq i {
  display: block;
  width: 4px;
  background: #3ae06a;
  animation: eq 0.55s ease-in-out infinite alternate;
}
.eq i:nth-child(2) { animation-delay: .15s; }
.eq i:nth-child(3) { animation-delay: .28s; }
.eq i:nth-child(4) { animation-delay: .05s; }
@keyframes eq { from { height: 4px; } to { height: 16px; } }
.ms-profile ul { margin-top: 0.85rem; font-size: 0.86rem; color: #3a6280; }
.ms-profile li { padding: 0.2rem 0; }

.era-2000s .products.top8 { grid-template-columns: repeat(2, 1fr); }
.era-2000s .product {
  background: linear-gradient(180deg, #ffffff, #e7f6ff);
  border: 2px solid #fff;
  border-radius: 14px;
  box-shadow: inset 1px 1px 0 #fff, inset -2px -2px 0 #8ec0de, 5px 5px 0 #b5ddf3;
}
.era-2000s .buy {
  background: linear-gradient(180deg, #eaf8ff 0%, #8ad8ff 22%, #2b9ae8 62%, #1570c0 100%);
  border: 1px solid #1868a8;
  border-radius: 16px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.85), inset 0 -3px 0 rgba(0,40,80,.22), 0 4px 0 #0d4e86;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.era-2000s .site-footer { border-top-color: #b5ddf5; color: #3a6280; }
.top8-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Varela Round", sans-serif;
  color: #1a5c96;
  margin: 0 0 0.9rem;
}

/* ========== 2010s (Instagram / Tumblr / hipster) ========== */
.era-2010s {
  color: #1c1714;
  background:
    linear-gradient(180deg, rgba(255,220,200,.35), rgba(244,214,200,.9)),
    #f4d6c8;
}
.era-2010s .brand-paper {
  background: none; padding: 0; box-shadow: none; clip-path: none; transform: none;
}
.era-2010s .brand-mark {
  font-family: "Raleway", "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 200;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: #161616;
  text-transform: lowercase;
}
.era-2010s .brand-mark .w3::after { display: none; }
.era-2010s .brand-mark .w3 {
  display: block;
  font-family: "Great Vibes", "Pacifico", cursive;
  font-weight: 400;
  font-size: 1.15em;
  letter-spacing: 0.02em;
}
.era-2010s .brand-star {
  position: static;
  display: inline-block;
  width: 22px; height: 22px;
  margin-left: 0.4rem;
  color: transparent;
}
.era-2010s .brand-star::before {
  content: "";
  display: block;
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 18px solid #161616;
}
.era-2010s .brand-sub {
  letter-spacing: 0.32em;
  font-weight: 400;
  font-size: 0.58rem;
  margin-top: 0.55rem;
  text-align: left;
  color: #161616;
}
.era-2010s .nav a,
.era-2010s .nav .menu-btn,
.era-2010s .nav-toggle {
  font-family: "Josefin Sans", "Raleway", sans-serif;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.78rem;
}
.era-2010s .follow-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border: 1px solid #161616;
  border-radius: 0;
  text-decoration: none;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.68rem;
  font-family: "Josefin Sans", sans-serif;
}
.era-2010s .follow-btn.is-on { background: #161616; color: #f4d6c8; }
.era-2010s .menu { background: #f8ece4; border: 1px solid #e3c9ba; border-radius: 2px; box-shadow: none; }
.era-2010s .timeline-shell {
  background: transparent;
  color: #1c1714;
  border: 1px solid #1c1714;
  border-radius: 0;
  box-shadow: none;
  padding: 1rem 0.4rem 0.9rem;
}
.era-2010s .tl-arrow { background: transparent; color: #1c1714; border: 1px solid #1c1714; border-radius: 0; }
.era-2010s .timeline-track::before { background: #1c1714; height: 1px; top: 43px; }
.era-2010s .era-intro h1 {
  font-family: "Raleway", sans-serif;
  font-weight: 200;
  letter-spacing: 0.02em;
}
.era-2010s .era-intro p { color: #5a4c44; font-weight: 300; }

.stories {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0.4rem 1.4rem 1rem;
}
.story {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1c1714;
}
.story .ring {
  width: 64px; height: 64px;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(#f9c784, #e07a7a, #c9a0d4, #f9c784);
}
.story .ring span {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: #fff8f2;
  border: 2px solid #fff8f2;
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: 0;
  color: #1c1714;
}
.story.is-here .ring { background: #161616; }
.story.is-here .ring span { background: #161616; border-color: #161616; color: #f4d6c8; }

.era-2010s .products.masonry {
  display: block;
  columns: 3;
  column-gap: 1.1rem;
}
.era-2010s .products.masonry .product {
  break-inside: avoid;
  margin-bottom: 1.15rem;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
.era-2010s .product-media {
  background: #fff;
  border-radius: 0;
  padding: 12px 12px 42px;
  box-shadow: 0 10px 24px rgba(40,24,16,.12);
  transform: rotate(-1.4deg);
  overflow: hidden;
}
.era-2010s .product:nth-child(2n) .product-media { transform: rotate(1.3deg); }
.era-2010s .product:nth-child(3n) .product-media { transform: rotate(-0.6deg); }
.era-2010s .product:nth-child(1) .product-media svg { filter: contrast(1.08) saturate(.8) sepia(.18); }
.era-2010s .product:nth-child(2) .product-media svg { filter: contrast(1.05) saturate(1.15) hue-rotate(-8deg); }
.era-2010s .product:nth-child(3) .product-media svg { filter: grayscale(.15) contrast(1.12) brightness(1.05); }
.era-2010s .product:nth-child(4) .product-media svg { filter: sepia(.25) saturate(.9) contrast(1.05); }
.era-2010s .product:nth-child(5) .product-media svg { filter: saturate(.7) contrast(1.1) brightness(1.08); }
.era-2010s .product:nth-child(6) .product-media svg { filter: contrast(1.15) saturate(.95) hue-rotate(8deg); }
.era-2010s .product h3 {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin-top: 0.85rem;
}
.era-2010s .hashtags {
  margin: 0;
  font-size: 0.82rem;
  color: #6a5a52;
  font-weight: 300;
}
.era-2010s .like-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.era-2010s .like-btn {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 1.2rem;
  padding: 0;
  color: #1c1714;
}
.era-2010s .like-btn.is-on { color: #d64545; }
.era-2010s .buy {
  background: transparent;
  color: #1c1714;
  border: 1px solid #1c1714;
  border-radius: 0;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 0.72rem;
}
.era-2010s .buy:hover { background: #1c1714; color: #f4d6c8; }
.era-2010s .site-footer { border-top-color: #d9b9a8; color: #6a5a52; }

.tap-heart {
  position: absolute;
  left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  font-size: 4.2rem;
  color: #fff;
  text-shadow: 0 4px 16px rgba(0,0,0,.25);
  animation: popheart .75s var(--ease) forwards;
  pointer-events: none;
  z-index: 5;
}
@keyframes popheart {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  35% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -62%) scale(1); }
}

/* ========== RESPONSIVE ========== */
@media (max-width: 980px) {
  .collections { grid-template-columns: 1fr 1fr; }
  .collections .card,
  .collections .card:nth-child(4),
  .collections .card:nth-child(5) { grid-column: auto; }
  .products { grid-template-columns: 1fr 1fr; }
  .ms-layout { grid-template-columns: 1fr; }
  .era-2010s .products.masonry { columns: 2; }
}
@media (max-width: 720px) {
  .site-header { padding: 1rem 1rem 0.4rem; }
  .nav-toggle { display: inline-grid; place-items: center; }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    right: 1rem; left: 1rem;
    background: rgba(255,255,255,.96);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0.8rem 1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }
  .era-70s .nav { background: #f3d9a4; border-color: #8b2e0e; }
  .era-80s .nav { background: #1a0533; border-color: #ff3ad6; }
  .era-90s .nav { background: #240033; border-color: #ff4ec4; }
  .era-2000s .nav { background: #eef8ff; border-color: #8ec8f0; }
  .era-2010s .nav { background: #f8ece4; border-color: #e3c9ba; border-radius: 0; }
  body.nav-open .nav { display: flex; }
  .menu { position: static; display: block; box-shadow: none; border: 0; background: transparent; padding: 0.2rem 0 0 0.6rem; }
  .collections { grid-template-columns: 1fr; }
  .products, .era-2000s .products.top8 { grid-template-columns: 1fr; }
  .era-2010s .products.masonry { columns: 1; }
  .card { min-height: 340px; }

  .timeline-shell { align-items: stretch; max-height: 340px; }
  .tl-arrow { display: none; }
  .timeline {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 280px;
    touch-action: pan-y;
  }
  .timeline-track {
    min-width: 0;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    padding: 0.4rem 0.8rem;
    gap: 0;
  }
  .timeline-track::before {
    left: 28px; right: auto; top: 12px; bottom: 12px;
    width: 3px; height: auto;
    background: linear-gradient(180deg, #c45c26, #ff2bd6, #ff2d8a, #8a4dff, #14b8a6);
  }
  .tl-item {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.9rem;
    min-width: 0;
    min-height: 44px;
    padding: 0.45rem 0;
  }
  .tl-item.is-tick { min-width: 0; min-height: 32px; }
  .tl-item.is-tick .tl-dot { margin-top: 0; }
  .tl-dot { margin-top: 0; }
  .tl-year { min-width: 3.4rem; text-align: left; }
  .era-2010s .timeline-track::before { width: 1px; left: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ========== ERA LANDING ========== */
@keyframes landIn {
  from { transform: translateY(16px); }
  to { transform: none; }
}
/* header is not animated: transform would trap the Decades dropdown */
body[class^="era-"]:not(.era-home) .timeline-wrap { animation: landIn .6s .08s var(--ease) both; }
body[class^="era-"]:not(.era-home) .era-intro { animation: landIn .6s .16s var(--ease) both; }
body[class^="era-"]:not(.era-home) .marquee,
body[class^="era-"]:not(.era-home) .vhs-bar,
body[class^="era-"]:not(.era-home) .ms-topbar,
body[class^="era-"]:not(.era-home) .stories,
body[class^="era-"]:not(.era-home) .sunset-bar { animation: landIn .45s var(--ease) both; }
body[class^="era-"]:not(.era-home) .product { animation: landIn .5s var(--ease) both; }
body[class^="era-"]:not(.era-home) .product:nth-child(1) { animation-delay: .22s; }
body[class^="era-"]:not(.era-home) .product:nth-child(2) { animation-delay: .28s; }
body[class^="era-"]:not(.era-home) .product:nth-child(3) { animation-delay: .34s; }
body[class^="era-"]:not(.era-home) .product:nth-child(4) { animation-delay: .4s; }
body[class^="era-"]:not(.era-home) .product:nth-child(5) { animation-delay: .46s; }
body[class^="era-"]:not(.era-home) .product:nth-child(6) { animation-delay: .52s; }

/* ========== TIME TRAVEL OVERLAY ========== */
.tt-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
}
.tt-overlay .tt-hud {
  position: relative;
  z-index: 5;
  text-align: center;
  pointer-events: none;
}
.tt-overlay .tt-year {
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tt-overlay .tt-cap {
  margin-top: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .85rem;
}
body.tt-lock { overflow: hidden; }

/* 70s swirl + vinyl */
.tt-70s { background: #2a1008; }
.tt-70s .tt-swirl {
  position: absolute; inset: -20%;
  background: repeating-conic-gradient(#c45c26 0 12deg, #6b2d6b 12deg 24deg, #f0c14a 24deg 36deg, #e07a28 36deg 48deg);
  animation: ttSwirlSoft 7.5s linear both;
  filter: blur(12px);
  opacity: .5;
}
.tt-70s .tt-vinyl {
  position: absolute;
  left: 50%; top: 46%;
  width: min(46vw, 280px); height: min(46vw, 280px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #f0c14a 0 14px, #1a0c04 15px 22px, transparent 23px 30px, #111 31px);
  box-shadow: 0 0 0 18px #0a0604, 0 0 80px #e07a28;
  animation: ttSpin 6.5s linear infinite;
  z-index: 2;
}
.tt-70s .tt-year { font-family: "Shrikhand", Georgia, serif; color: #f0c14a; text-shadow: 4px 4px 0 #8b2e0e; }

/* 80s warp grid */
.tt-80s { background: #0a0120; }
.tt-80s .tt-gridwarp {
  position: absolute; inset: 20% -15% -30%;
  background:
    repeating-linear-gradient(90deg, transparent 0 36px, rgba(255,58,214,.7) 36px 37px),
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(0,229,255,.55) 28px 29px);
  transform: perspective(400px) rotateX(65deg);
  animation: ttWarp 1.7s linear both;
}
.tt-80s .tt-streaks {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 80px, rgba(255,255,255,.35) 80px 82px);
  animation: ttStreak 1.5s linear both;
  mix-blend-mode: screen;
}
.tt-80s.tt-rewind .tt-streaks,
.tt-80s.tt-rewind .tt-gridwarp { animation-direction: reverse; }
.tt-80s .tt-year { font-family: "Monoton", cursive; color: #ffe14a; text-shadow: 0 0 18px #ff3ad6; font-weight: 400; font-size: clamp(2.4rem, 8vw, 5.2rem); }

/* 90s CRT + dial-up rain */
.tt-90s { background: #100018; }
.tt-90s .tt-static {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, #000 0 2px, #222 2px 3px);
  animation: none;
  opacity: .18;
}
.tt-90s .tt-crt {
  position: absolute; inset: 8%;
  border: 18px solid #1a1a1a;
  border-radius: 28px;
  box-shadow: inset 0 0 80px #000, 0 0 0 6px #333;
  background: radial-gradient(circle, #2a0840, #000);
  animation: ttSoftIn 1.8s ease both;
}
.tt-90s .tt-pixels {
  position: absolute; inset: 0;
  background-image: radial-gradient(#39ff6a 1px, transparent 1px);
  background-size: 8px 12px;
  animation: ttRain 1.6s linear both;
  opacity: .55;
  mix-blend-mode: screen;
}
.tt-90s .tt-year { font-family: "Bungee", sans-serif; color: #ffe033; text-shadow: 3px 3px 0 #ff4ec4; }

/* 2000s XP-era hills + glossy window + flip phone (original, not a wallpaper copy) */
.tt-2000s { background: #3c9ee8; }
.tt-2000s .tt-xp { position: absolute; inset: 0; overflow: hidden; }
.tt-2000s .tt-xp-sky {
  position: absolute; inset: 0 0 28% 0;
  background: linear-gradient(180deg, #2f8fe0 0%, #6ebdf2 42%, #c9ebff 100%);
}
.tt-2000s .tt-xp-cloud {
  position: absolute;
  background: #fff;
  border-radius: 40px;
  opacity: .92;
  filter: blur(.4px);
  animation: ttCloudDrift 18s linear both;
}
.tt-2000s .tt-xp-cloud::before,
.tt-2000s .tt-xp-cloud::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 50%;
}
.tt-2000s .tt-xp-cloud.c1 { width: 150px; height: 42px; left: 8%; top: 14%; }
.tt-2000s .tt-xp-cloud.c1::before { width: 58px; height: 58px; left: 22px; top: -28px; }
.tt-2000s .tt-xp-cloud.c1::after { width: 44px; height: 44px; left: 70px; top: -18px; }
.tt-2000s .tt-xp-cloud.c2 { width: 190px; height: 48px; left: 62%; top: 10%; animation-delay: -.6s; }
.tt-2000s .tt-xp-cloud.c2::before { width: 70px; height: 70px; left: 30px; top: -32px; }
.tt-2000s .tt-xp-cloud.c2::after { width: 52px; height: 52px; left: 92px; top: -20px; }
.tt-2000s .tt-xp-cloud.c3 { width: 120px; height: 36px; left: 38%; top: 22%; animation-delay: -1.1s; opacity: .8; }
.tt-2000s .tt-xp-cloud.c3::before { width: 46px; height: 46px; left: 18px; top: -22px; }
.tt-2000s .tt-xp-cloud.c3::after { width: 34px; height: 34px; left: 58px; top: -14px; }
.tt-2000s .tt-xp-hills {
  position: absolute; left: 0; right: 0; bottom: 36px;
  width: 100%; height: 48%;
  display: block;
}
.tt-2000s .tt-xp-sparkles { position: absolute; inset: 0 0 36% 0; pointer-events: none; }
.tt-2000s .tt-spark {
  position: absolute;
  width: 10px; height: 10px;
  background: #fff;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: ttSparkSoft 2.6s ease-in-out var(--d, 0s) infinite;
  opacity: .75;
}
.tt-2000s .tt-xp-taskbar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 36px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px;
  background: linear-gradient(180deg, #6db0f3 0%, #1f64c0 38%, #154e9a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
  z-index: 8;
}
.tt-2000s .tt-xp-start {
  width: 78px; height: 26px;
  border-radius: 0 16px 16px 0;
  background: linear-gradient(180deg, #9ae066 0%, #4ea82e 46%, #2f7a1c 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.28);
}
.tt-2000s .tt-xp-tray {
  width: 72px; height: 22px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,40,80,.12));
}
.tt-2000s .tt-window {
  position: absolute;
  left: 3%; top: auto; bottom: 52px;
  width: min(220px, 38vw);
  background: linear-gradient(180deg, #f4f8fc, #e4eef8);
  border: 2px solid #0a4e9c;
  border-radius: 8px 8px 6px 6px;
  box-shadow: 0 10px 28px rgba(0,30,70,.28), inset 0 0 0 1px #fff;
  z-index: 5;
  color: #16324a;
  animation: ttSoftIn 0.7s ease both;
}
.tt-2000s .tt-titlebar {
  background: linear-gradient(180deg, #8ec8ff, #1d6ec8 55%, #1556a8);
  color: #fff;
  font-weight: 700;
  font-family: "Trebuchet MS", "Varela Round", sans-serif;
  padding: .4rem .75rem;
  border-radius: 6px 6px 0 0;
  text-shadow: 0 1px 0 rgba(0,40,80,.35);
}
.tt-2000s .tt-win-body { padding: .85rem 1rem 1rem; }
.tt-2000s .tt-win-body p { margin: 0 0 .7rem; font-size: .92rem; color: #1a3a58; }
.tt-2000s .tt-bar {
  height: 18px;
  background: #fff;
  border: 1px solid #1d6fb8;
  border-radius: 3px;
  overflow: hidden;
}
.tt-2000s .tt-bar i {
  display: block; height: 100%; width: 0;
  background: repeating-linear-gradient(90deg, #1e7ad4 0 10px, #49b0f0 10px 12px);
  animation: ttLoad 1.7s ease forwards;
}
.tt-2000s .tt-flip {
  position: absolute;
  right: 4%;
  top: auto;
  bottom: 50px;
  width: 110px;
  perspective: none;
  z-index: 4;
  transform: scale(.78);
  transform-origin: bottom right;
}
.tt-2000s .tt-flip-lid,
.tt-2000s .tt-flip-base {
  width: 136px;
  margin: 0 auto;
  border: 3px solid #5c6370;
  background: linear-gradient(180deg, #d5dae2, #8e96a2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 20px rgba(0,20,40,.25);
}
.tt-2000s .tt-flip-lid {
  height: 96px;
  border-radius: 16px 16px 10px 10px;
  transform-origin: bottom center;
  animation: ttFlipOpen 1.15s cubic-bezier(.2,.75,.25,1) forwards;
  position: relative;
  z-index: 2;
}
.tt-2000s .tt-flip-lid::before {
  content: "";
  position: absolute; left: 14px; right: 14px; top: 14px; bottom: 16px;
  background: #6f8496;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px #c5ccd4;
}
.tt-2000s .tt-flip-lid::after {
  content: "";
  position: absolute; left: 50%; bottom: 6px;
  width: 18px; height: 6px; margin-left: -9px;
  background: #555; border-radius: 3px;
}
.tt-2000s .tt-flip-base {
  height: 126px;
  border-radius: 10px 10px 18px 18px;
  padding: 8px 10px 12px;
  box-sizing: border-box;
}
.tt-2000s .tt-flip-screen {
  height: 58px;
  border-radius: 6px;
  background: linear-gradient(180deg, #7ec8c0, #2a6a78);
  box-shadow: inset 0 0 0 2px #1a3038;
  display: grid; place-items: center;
}
.tt-2000s .tt-flip-pad {
  margin-top: 8px;
  height: 40px;
  background:
    repeating-linear-gradient(90deg, #cfd4dc 0 16px, transparent 16px 20px),
    repeating-linear-gradient(#cfd4dc 0 10px, transparent 10px 14px);
  background-size: 20px 14px;
  border-radius: 4px;
  opacity: .85;
}
.tt-2000s .tt-year {
  font-family: "Varela Round", "Trebuchet MS", sans-serif;
  font-size: clamp(4rem, 12vw, 8rem);
  letter-spacing: -0.04em;
  color: #ffffff;
  text-shadow: 0 1px 0 #fff, 0 3px 0 #9ad4ff, 0 10px 24px rgba(13,60,130,.4);
  font-weight: 800;
}
.tt-2000s .tt-cap {
  color: #143a66;
  background: rgba(255,255,255,.88);
  display: inline-block;
  margin-top: .55rem;
  padding: .35rem .85rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .12em;
}
.tt-2000s .tt-hud { position: relative; z-index: 12; width: auto; height: auto; overflow: visible; clip: auto; text-align: center; pointer-events: none; }
@keyframes ttCloudDrift {
  from { transform: translateX(0); }
  to { transform: translateX(28px); }
}
@keyframes ttSparkSoft {
  0%, 100% { opacity: .35; transform: scale(.85); }
  50% { opacity: .95; transform: scale(1.08); }
}
@keyframes ttFlipOpen {
  0% { transform: perspective(760px) rotateX(0deg); }
  100% { transform: perspective(760px) rotateX(-168deg); }
}

/* 2010s story swipe + filter wash */
.tt-2010s { background: #1a1410; }
.tt-2010s .tt-story {
  position: absolute;
  left: 50%; top: 50%;
  width: min(420px, 78vw); height: min(78vh, 640px);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,180,140,.45), rgba(80,40,40,.15)),
    linear-gradient(#f4d6c8, #e8b8a0);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  animation: ttSwipe 1.6s var(--ease) both;
}
.tt-2010s.tt-rewind .tt-story { animation-name: ttSwipeBack; }
.tt-2010s .tt-wash {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(255,120,90,.0), rgba(255,180,140,.55), rgba(200,140,220,.4));
  animation: ttWash 1.6s var(--ease) both;
  mix-blend-mode: overlay;
}
.tt-2010s .tt-year { font-family: "Raleway", sans-serif; font-weight: 200; color: #fff; }

@keyframes ttSwirl { from { transform: scale(1.2) rotate(0); } to { transform: scale(3.2) rotate(280deg); } }
@keyframes ttSwirlSoft { from { transform: scale(1.04) rotate(0); } to { transform: scale(1.22) rotate(55deg); } }
@keyframes ttSoftIn { from { opacity: .25; transform: scale(.98); filter: none; } to { opacity: 1; transform: none; filter: none; } }
@keyframes ttSpin { from { transform: translate(-50%,-50%) rotate(0); } to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes ttWarp { from { transform: perspective(400px) rotateX(65deg) translateY(40%); } to { transform: perspective(400px) rotateX(65deg) translateY(-30%); } }
@keyframes ttStreak { from { transform: scaleX(.2) translateX(-40%); opacity: .2; } to { transform: scaleX(1.8) translateX(30%); opacity: .8; } }
@keyframes ttStatic { 0%,100% { transform: none; } 20% { transform: translate(2px,-3px); } 40% { transform: translate(-4px,2px); } 60% { transform: translate(3px,3px); } 80% { transform: translate(-2px,-1px); } }
@keyframes ttChannel { 0%,30% { filter: contrast(2) saturate(0); transform: scaleY(.02); } 40% { transform: scaleY(1); filter: none; } 70% { filter: hue-rotate(80deg); } 100% { filter: none; } }
@keyframes ttRain { from { background-position: 0 -40vh; } to { background-position: 0 40vh; } }
@keyframes ttLoad { to { width: 100%; } }
@keyframes ttFlip { 0% { transform: rotateX(0); } 50% { transform: rotateX(-95deg); } 100% { transform: rotateX(0); } }
@keyframes ttSwipe { from { transform: translate(-50%,-50%) translateX(110%) rotate(4deg); } to { transform: translate(-50%,-50%) rotate(0); } }
@keyframes ttSwipeBack { from { transform: translate(-50%,-50%) translateX(-110%) rotate(-4deg); } to { transform: translate(-50%,-50%); } }
@keyframes ttWash { from { opacity: 0; } 50% { opacity: 1; } to { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
  .tt-overlay { display: none !important; }
}


.timeline-track::before { pointer-events: none; }
.tl-item.is-soon { opacity: 0.62; color: #c4b8a4; }
.tl-item.is-soon .tl-dot { background: #8a8074; box-shadow: 0 0 0 2px #8a8074; }
.tl-item.is-soon .tl-soon {
  position: absolute;
  top: -0.72rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
  color: inherit;
  opacity: 0.9;
}
@media (max-width: 720px) {
  .tl-item.is-soon .tl-soon {
    position: static;
    transform: none;
    margin-left: 0.15rem;
    top: auto;
    left: auto;
  }
}


/* ========== V4: INTRO ========== */
body.intro-on { overflow: hidden; }
.wnu-intro {
  position: fixed; inset: 0; z-index: 300;
  background: #000;
  color: #f6e4c4;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.wnu-intro.is-out { animation: introFade .28s ease forwards; }
@keyframes introFade { to { opacity: 0; visibility: hidden; } }
.intro-static,
.intro-tracking {
  position: absolute; inset: 0;
  pointer-events: none;
}
.intro-static {
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.09) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 2px);
  animation: introStatic .14s steps(2) infinite;
  opacity: .55;
  mix-blend-mode: screen;
}
.intro-tracking {
  background: repeating-linear-gradient(180deg, transparent 0 22px, rgba(255,255,255,.07) 22px 23px);
  animation: introTear .2s steps(2) infinite;
  opacity: .7;
}
@keyframes introStatic {
  0%, 100% { transform: none; opacity: .5; }
  50% { transform: translate(1px, -1px); opacity: .7; }
}
@keyframes introTear {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}
.intro-year {
  position: relative;
  z-index: 2;
  font-family: "Press Start 2P", ui-monospace, monospace;
  font-size: clamp(1.6rem, 7vw, 3.6rem);
  letter-spacing: .08em;
  text-shadow: 0 0 18px rgba(120,255,140,.45);
  color: #d7ffd0;
  font-variant-numeric: tabular-nums;
  opacity: 0;
}
.wnu-intro.phase-years .intro-year { opacity: 1; }
.wnu-intro.phase-logo .intro-year { opacity: 0; transition: opacity .25s; }
.intro-logo-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  padding: 1.5rem;
}
.wnu-intro.phase-logo .intro-logo-wrap { opacity: 1; transition: opacity .2s; }
.intro-logo { width: min(720px, 92vw); height: auto; overflow: visible; }
.intro-logo text {
  fill: transparent;
  stroke: #f6e4c4;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
}
.wnu-intro.phase-logo .intro-logo text { animation: introDraw 1.15s ease forwards; }
@keyframes introDraw {
  72% { stroke-dashoffset: 0; fill: transparent; }
  100% { stroke-dashoffset: 0; fill: #f6e4c4; }
}
.intro-skip {
  position: absolute;
  top: 1rem; right: 1rem;
  z-index: 5;
  background: transparent;
  color: #f6e4c4;
  border: 1px solid rgba(246,228,196,.55);
  border-radius: 999px;
  padding: .4rem .85rem;
  font: inherit;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.intro-skip:hover { background: rgba(246,228,196,.12); }

/* ========== V4: SURPRISE CARD ========== */
button.card {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.card-surprise .surprise-viz {
  display: grid;
  place-items: center;
  font-family: "Bungee", "Poppins", sans-serif;
  font-size: 4.2rem;
  line-height: 1;
  opacity: .85;
}
.card-surprise.is-glitch {
  animation: surpriseGlitch .25s steps(2);
}
@keyframes surpriseGlitch {
  0% { filter: none; transform: none; }
  35% { filter: hue-rotate(50deg) contrast(1.25); transform: translate(2px, -1px); }
  70% { filter: saturate(1.4); transform: translate(-2px, 1px); }
  100% { filter: none; transform: none; }
}

/* ========== V4: AMBIANCE ========== */
.ambiance {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
main, .page-main, .site-footer { position: relative; z-index: 2; }
body.is-paused .ambiance,
body.is-paused .ambiance *,
body.is-paused .floater { animation-play-state: paused !important; }

.amb-70s .amb-sunburst {
  position: absolute;
  left: 50%; top: -10%;
  width: 140vmax; height: 140vmax;
  transform: translate(-50%, -30%);
  background: repeating-conic-gradient(from 0deg, rgba(240,193,74,.18) 0 8deg, transparent 8deg 16deg);
  animation: ambSpin 80s linear infinite;
  opacity: .55;
}
.amb-70s .amb-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(28px);
  opacity: .42;
  animation: ambBlob 16s ease-in-out infinite alternate;
}
.amb-70s .b1 { width: 280px; height: 280px; left: 8%; top: 18%; background: #c45c26; animation-duration: 18s; }
.amb-70s .b2 { width: 340px; height: 220px; right: 6%; top: 42%; background: #6b2d6b; animation-duration: 22s; animation-delay: -4s; }
.amb-70s .b3 { width: 200px; height: 260px; left: 38%; bottom: 8%; background: #e07a28; animation-duration: 20s; animation-delay: -8s; }
@keyframes ambSpin { to { transform: translate(-50%, -30%) rotate(360deg); } }
@keyframes ambBlob {
  0% { transform: translate(0,0) scale(1); }
  100% { transform: translate(40px, -30px) scale(1.15); }
}

.amb-80s .amb-grid {
  position: absolute;
  inset: 42% -10% -20%;
  background:
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,58,214,.35) 38px 39px),
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(0,229,255,.28) 28px 29px);
  transform: perspective(480px) rotateX(62deg);
  animation: ambGrid 12s linear infinite;
  opacity: .45;
}
.amb-80s .amb-sun {
  position: absolute;
  left: 50%; top: 12%;
  width: min(28vw, 180px); height: min(28vw, 180px);
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, #ffe14a, #ff2e97 62%, transparent 64%);
  animation: ambPulse 3.2s ease-in-out infinite;
  opacity: .55;
}
.amb-80s .amb-palm {
  position: absolute;
  bottom: -8px;
  width: 70px; height: 150px;
  background:
    linear-gradient(#0a3 0 0) 50% 100% / 8px 90px no-repeat,
    radial-gradient(circle at 50% 28%, transparent 18px, #0a3 19px 28px, transparent 29px);
  animation: ambSway 5s ease-in-out infinite;
  opacity: .35;
}
.amb-80s .amb-palm.left { left: 4%; }
.amb-80s .amb-palm.right { right: 6%; animation-delay: -2s; }
@keyframes ambGrid { to { background-position: 0 80px, 0 0; } }
@keyframes ambPulse { 50% { transform: translateX(-50%) scale(1.08); opacity: .75; } }
@keyframes ambSway { 50% { transform: rotate(6deg); } }

.amb-90s .amb-shape {
  position: absolute;
  opacity: .28;
  animation: ambFloat 11s ease-in-out infinite;
}
.amb-90s .s1 { width: 54px; height: 54px; background: #ff4ec4; left: 8%; top: 22%; border-radius: 8px; transform: rotate(18deg); }
.amb-90s .s2 { width: 0; height: 0; border-left: 28px solid transparent; border-right: 28px solid transparent; border-bottom: 48px solid #2ad4d8; right: 12%; top: 18%; animation-delay: -3s; }
.amb-90s .s3 { width: 36px; height: 36px; background: #ffe033; border-radius: 50%; left: 18%; bottom: 16%; animation-delay: -6s; }
.amb-90s .s4 { width: 70px; height: 18px; background: #7a4bff; right: 20%; bottom: 24%; animation-delay: -2s; }
.amb-90s .amb-saver {
  position: absolute;
  left: 8%; top: 30%;
  font-family: "Bungee", sans-serif;
  font-size: clamp(1rem, 2.4vw, 1.6rem);
  color: #39ff6a;
  text-shadow: 2px 2px 0 #ff4ec4;
  opacity: .16;
  white-space: nowrap;
  animation: ambSaver 18s linear infinite;
}
@keyframes ambFloat {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  50% { transform: translate(24px, -28px) rotate(12deg); }
}
@keyframes ambSaver {
  0% { transform: translate(0,0); }
  25% { transform: translate(55vw, 8vh); }
  50% { transform: translate(30vw, 40vh); }
  75% { transform: translate(8vw, 18vh); }
  100% { transform: translate(0,0); }
}

.amb-00s .amb-bubble {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.55);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), rgba(180,220,255,.15));
  animation: ambRise 14s linear infinite;
  opacity: .4;
}
.amb-00s .bb1 { width: 22px; height: 22px; left: 12%; bottom: -30px; animation-duration: 16s; }
.amb-00s .bb2 { width: 36px; height: 36px; left: 48%; bottom: -40px; animation-duration: 13s; animation-delay: -4s; }
.amb-00s .bb3 { width: 16px; height: 16px; left: 72%; bottom: -20px; animation-duration: 18s; animation-delay: -7s; }
.amb-00s .bb4 { width: 28px; height: 28px; left: 28%; bottom: -36px; animation-duration: 15s; animation-delay: -2s; }
.amb-00s .amb-glitter {
  position: absolute; inset: 0;
  background-image: radial-gradient(#fff 1px, transparent 1.2px);
  background-size: 48px 52px;
  animation: ambTwinkle 2.4s steps(2) infinite;
  opacity: .18;
}
.amb-00s .amb-loader {
  position: absolute;
  right: 6%; top: 16%;
  width: 44px; height: 50px;
  border: 0;
  border-radius: 0;
  background: transparent;
  opacity: .72;
  transform-origin: 50% 50%;
  animation: hgFlip 3.8s ease-in-out infinite;
  pointer-events: none;
}
.amb-00s .amb-loader svg { width: 100%; height: 100%; display: block; overflow: visible; }
.amb-00s .hg-sand-top {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: hgDrainTop 3.8s ease-in-out infinite;
}
.amb-00s .hg-sand-bot {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: hgFillBot 3.8s ease-in-out infinite;
}
.amb-00s .hg-stream { animation: hgStream 3.8s linear infinite; }
@keyframes hgDrainTop {
  0% { transform: scaleY(1); opacity: 1; }
  46% { transform: scaleY(0.06); opacity: 1; }
  50%, 100% { transform: scaleY(0); opacity: 0; }
}
@keyframes hgFillBot {
  0% { transform: scaleY(0.15); opacity: .85; }
  46% { transform: scaleY(1); opacity: 1; }
  50%, 100% { transform: scaleY(1); opacity: 1; }
}
@keyframes hgFlip {
  0%, 52% { transform: rotate(0deg); }
  68%, 100% { transform: rotate(180deg); }
}
@keyframes hgStream {
  0%, 48% { opacity: .95; }
  52%, 100% { opacity: 0; }
}
@keyframes ambRise { to { transform: translateY(-110vh); } }
@keyframes ambTwinkle { 50% { opacity: .08; background-position: 12px 8px; } }

.amb-10s .amb-filter {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(255,180,140,.0), rgba(255,160,170,.22), rgba(180,140,200,.18));
  animation: ambWash 16s ease-in-out infinite alternate;
}
.amb-10s .amb-heart {
  position: absolute;
  color: rgba(214,69,69,.35);
  font-size: 1.1rem;
  animation: ambHeart 12s linear infinite;
}
.amb-10s .h1 { left: 12%; top: 70%; animation-duration: 14s; }
.amb-10s .h2 { left: 40%; top: 80%; animation-duration: 11s; animation-delay: -3s; font-size: .85rem; }
.amb-10s .h3 { left: 68%; top: 74%; animation-duration: 13s; animation-delay: -6s; }
.amb-10s .h4 { left: 84%; top: 82%; animation-duration: 15s; animation-delay: -2s; font-size: .7rem; }
@keyframes ambWash { to { filter: hue-rotate(25deg); opacity: .85; } }
@keyframes ambHeart { to { transform: translateY(-70vh); opacity: 0; } }

/* ========== V4: REVEAL / ENTRANCES / TYPE ========== */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
body.era-home.is-ready .hero h1 em {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--pink, #c41e3a);
  max-width: 16ch;
  animation: introType 1.35s steps(16) both, introCaret 1s step-end infinite;
  vertical-align: bottom;
}
@keyframes introType { from { width: 0; } to { width: 16ch; } }
@keyframes introCaret { 50% { border-color: transparent; } }

.hero h1 em { animation: headlineFlicker 4s steps(2) infinite; }
.era-80s .era-intro h1 { animation: neonFlicker 2.8s ease-in-out infinite; }
.era-90s .era-intro h1 { animation: headlineFlicker 2.6s steps(3) infinite; }
@keyframes headlineFlicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: .65; }
  95% { opacity: 1; }
  97% { opacity: .75; }
}
@keyframes neonFlicker {
  0%, 100% { text-shadow: 0 0 8px #ff3ad6, 0 0 18px #00e5ff; }
  46% { text-shadow: 0 0 8px #ff3ad6, 0 0 18px #00e5ff; }
  48% { text-shadow: none; }
  52% { text-shadow: 0 0 14px #ffe14a; }
}

.buy, .card .cta, .follow-btn {
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s;
}
.buy:hover, .card .cta:hover { transform: translateY(-2px) scale(1.03); }
.era-90s .buy:hover { transform: translate(2px, 2px); }

.card .viz { animation: ambBob 4.6s ease-in-out infinite; }
.vinyl { /* keep existing spin; add a gentle extra idle */ }
.badge-new { animation: blink 1.05s step-end infinite, badgePop 1.8s ease-in-out infinite; }
.hit-counter { animation: headlineFlicker 3.4s steps(2) infinite; }
.online-now { animation: ambPulseSoft 2.2s ease-in-out infinite; }
@keyframes ambBob { 50% { transform: translateY(-6px); } }
@keyframes badgePop { 50% { transform: scale(1.06); } }
@keyframes ambPulseSoft { 50% { opacity: .7; } }

/* Product tilt + era FX */
.product {
  transform-style: preserve-3d;
  transition: transform .18s ease-out;
}
.product .product-media { transform-style: preserve-3d; }
.product.is-tee:hover .product-media svg { animation: teeSpin .85s ease; }
.product.is-hoodie:hover .product-media svg { animation: hoodieSway 1.05s ease-in-out; }
.product:hover .product-media svg { filter: drop-shadow(0 0 12px rgba(255,220,140,.35)); }
@keyframes teeSpin { 50% { transform: rotateY(18deg) scale(1.04); } }
@keyframes hoodieSway { 50% { transform: rotate(-3deg) translateY(-4px); } }

/* ========== V4: CURSORS + TRAILS ========== */
.cursor-trail {
  position: fixed;
  left: 0; top: 0;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  pointer-events: none;
  z-index: 190;
  font-size: 12px;
  line-height: 1;
  animation: trailOut .55s ease forwards;
}
@keyframes trailOut { to { opacity: 0; transform: translateY(-10px) scale(.5); } }
/* old 70s-2010s trail cursors replaced in v8 */

.vinyl.spin-fast { animation-duration: 1.1s !important; }

@media (prefers-reduced-motion: reduce) {
  .wnu-intro { display: none !important; }
  .ambiance { display: none !important; }
  .amb-00s .amb-loader,
  .amb-00s .hg-sand-top,
  .amb-00s .hg-sand-bot,
  .amb-00s .hg-stream { animation: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .cursor-trail { display: none !important; }
  body.era-home.is-ready .hero h1 em { animation: none !important; max-width: none; overflow: visible; border-right: 2px solid var(--pink, #c41e3a); }
}

body.era-home .card.reveal:nth-child(1) { transition-delay: .05s; }
body.era-home .card.reveal:nth-child(2) { transition-delay: .12s; }
body.era-home .card.reveal:nth-child(3) { transition-delay: .19s; }
body.era-home .card.reveal:nth-child(4) { transition-delay: .26s; }
body.era-home .card.reveal:nth-child(5) { transition-delay: .33s; }
body.era-home .card.reveal:nth-child(6) { transition-delay: .4s; }

.card-surprise h2 {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.42em;
  row-gap: 0.05em;
  align-items: baseline;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.card-surprise h2 span { display: inline-block; }

/* ========== TIMELINE NEW DECADES ========== */
.tl-item.y50s { color: #c41e3a; }
.tl-item.y50s .tl-dot { background: #c41e3a; box-shadow: 0 0 0 2px #7ec8b3; }
.tl-item.y60s { color: #ff2e97; }
.tl-item.y60s .tl-dot { background: #ff2e97; box-shadow: 0 0 0 2px #f2d64b; }
.tl-item.y20s { color: #7a5cff; }
.tl-item.y20s .tl-dot { background: #7a5cff; box-shadow: 0 0 0 2px #44e0c8; }

/* ========== HOMEPAGE CARDS 50s / 60s / 20s ========== */
.card-50s {
  background:
    linear-gradient(#7ec8b3, #7ec8b3) top / 100% 42% no-repeat,
    repeating-conic-gradient(#1a1a1a 0% 25%, #f7efe4 0% 50%) 0 0 / 22px 22px;
  color: #1a1a1a;
  border: 4px solid #c41e3a;
}
.card-50s h2 {
  font-family: "Lobster", "Yellowtail", cursive;
  font-weight: 400;
  color: #fff8e8;
  text-shadow: 0 0 10px #c41e3a, 2px 3px 0 #1a1a1a;
}
.card-50s .tag { background: #c41e3a; color: #fff8e8; }
.card-50s .cta { background: #1a1a1a; color: #f2d39b; }
.card-50s .copy { color: #1a1a1a; background: rgba(247,239,228,.82); padding: .45rem .55rem; border-radius: 8px; }

.card-60s {
  background:
    linear-gradient(135deg, #1a0533 0 48%, #ff2e97 48% 62%, #f2d64b 62% 78%, #2255cc 78% 100%);
  color: #fff8ee;
  border: 4px solid #1a0533;
}
.card-60s h2 {
  font-family: "Fugaz One", "Luckiest Guy", cursive;
  font-weight: 400;
  color: #ffe14a;
  text-shadow: 3px 3px 0 #ff2e97, -2px 0 0 #2255cc;
}
.card-60s .tag { background: #ff2e97; color: #fff; }
.card-60s .cta { background: #ffe14a; color: #1a0533; }
.card-60s .copy { color: #fff4ff; }

.card-20s {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,122,200,.55), transparent 42%),
    radial-gradient(circle at 80% 10%, rgba(122,92,255,.5), transparent 40%),
    linear-gradient(180deg, #14141f, #0b0b14);
  color: #f6f3ff;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.card-20s h2 {
  font-family: "Fredoka", "Poppins", sans-serif;
  font-weight: 600;
  color: #fff;
  text-shadow: 2px 2px 0 #ff7ac8, 4px 4px 0 #7a5cff;
}
.card-20s .tag { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(8px); }
.card-20s .cta { background: #3d208c; color: #fff; border-radius: 16px; }
.card-20s .copy { color: #ded6f5; }

/* ========== 1950s ========== */
.era-50s {
  color: #1a1a1a;
  background-color: #7ec8b3;
  background-image:
    linear-gradient(#7ec8b3 0 118px, transparent 118px),
    repeating-conic-gradient(#1a1a1a 0% 25%, #f7efe4 0% 50%) 0 118px / 28px 28px;
}
.era-50s .diner-bar {
  background: #1a1a1a;
  color: #f2d39b;
  overflow: hidden;
  border-bottom: 4px solid #c41e3a;
  font-family: "Lobster", cursive;
  letter-spacing: 0.04em;
}
.diner-bar-inner { display: flex; width: max-content; gap: 3rem; animation: march 22s linear infinite; white-space: nowrap; padding: .45rem 0; }
.era-50s .brand-paper {
  background: #1a1a1a;
  padding: .45rem .8rem .4rem;
  border: 3px solid #c41e3a;
  box-shadow: 0 0 0 3px #f2d39b, inset 0 0 16px rgba(0,0,0,.45);
  clip-path: none;
  transform: none;
}
.era-50s .brand-mark {
  font-family: "Lobster", "Yellowtail", cursive;
  font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.8rem);
  line-height: 0.95;
  color: #fff8e8;
  text-shadow: 0 0 12px #c41e3a, 2px 3px 0 #1a1a1a;
}
.era-50s .brand-mark .w3::after { display: none; }
.era-50s .brand-mark .w3 { display: block; }
.era-50s .brand-star { color: #f2d39b; }
.era-50s .brand-sub { color: #7ec8b3; letter-spacing: 0.22em; }
.era-50s .nav a, .era-50s .nav .menu-btn, .era-50s .nav-toggle { color: #1a1a1a; font-weight: 700; }
.era-50s .menu { background: #f7efe4; border-color: #c41e3a; }
.era-50s .timeline-shell {
  background: #1a1a1a;
  color: #fff8e8;
  border: 3px solid #c41e3a;
  box-shadow: 0 0 0 3px #f2d39b;
}
.era-50s .era-intro h1 {
  font-family: "Lobster", "Yellowtail", cursive;
  font-weight: 400;
  color: #c41e3a;
  text-shadow: 2px 3px 0 #f2d39b;
}
.era-50s .era-intro p { color: #1a1a1a; background: rgba(247,239,228,.88); display: inline-block; padding: .35rem .6rem; border-radius: 8px; }
.era-50s .product {
  background: #f7efe4;
  border: 3px solid #c41e3a;
  box-shadow: 5px 5px 0 #1a1a1a;
  border-radius: 10px;
}
.era-50s .buy {
  background: #c41e3a;
  color: #fff8e8;
  border-radius: 999px;
  box-shadow: 3px 3px 0 #1a1a1a;
}
.era-50s .site-footer { border-top-color: #c41e3a; color: #1a1a1a; }
.jukebox {
  display: inline-block;
  width: 64px; height: 88px;
  margin-top: .8rem;
  border-radius: 14px 14px 8px 8px;
  background:
    radial-gradient(circle at 50% 28%, #7ec8b3 0 10px, transparent 11px),
    linear-gradient(#2c2c32, #141416);
  box-shadow: inset 0 0 0 3px #c0c4cc, 0 6px 0 #c41e3a;
  animation: ambBob 3.6s ease-in-out infinite;
}
.jukebox::after {
  content: "";
  position: absolute;
  width: 36px; height: 18px; margin: 48px 0 0 14px;
  background: repeating-linear-gradient(90deg, #c41e3a 0 4px, #f2d39b 4px 8px);
  border-radius: 3px;
}
.jukebox { position: relative; }

.amb-50s .amb-stars {
  position: absolute; inset: 0;
  background-image: radial-gradient(#fff8e8 1.2px, transparent 1.4px);
  background-size: 56px 56px;
  animation: ambTwinkle 2.8s steps(2) infinite;
  opacity: .28;
}
.amb-50s .amb-boom {
  position: absolute;
  width: 90px; height: 36px;
  border: 6px solid #c41e3a;
  border-radius: 50%;
  border-bottom-color: transparent;
  opacity: .3;
  animation: ambSway 6s ease-in-out infinite;
}
.amb-50s .b1 { left: 8%; top: 28%; }
.amb-50s .b2 { right: 10%; top: 58%; border-color: #1a1a1a; animation-delay: -2s; }

/* ========== 1960s ========== */
.era-60s {
  color: #fff8ee;
  background:
    radial-gradient(circle at 80% 10%, rgba(255,46,151,.28), transparent 36%),
    repeating-conic-gradient(from 0deg at 8% 80%, #1a0533 0 12deg, #2a0848 12deg 24deg),
    #140022;
}
.mondrian-bar { display: flex; height: 14px; }
.mondrian-bar i { flex: 1; }
.mondrian-bar i:nth-child(1) { background: #e23; flex: 1.6; }
.mondrian-bar i:nth-child(2) { background: #111; flex: .3; }
.mondrian-bar i:nth-child(3) { background: #2255cc; flex: 1; }
.mondrian-bar i:nth-child(4) { background: #f2d64b; flex: 1.2; }
.mondrian-bar i:nth-child(5) { background: #ff2e97; flex: .8; }
.era-60s .brand-paper { background: none; padding: 0; box-shadow: none; clip-path: none; transform: rotate(-1deg); }
.era-60s .brand-mark {
  font-family: "Fugaz One", "Luckiest Guy", cursive;
  font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  -webkit-text-stroke: 4px #1a0533;
  paint-order: stroke fill;
}
.era-60s .brand-mark .w3::after { display: none; }
.era-60s .brand-mark .w1 { color: #ff8a3d; }
.era-60s .brand-mark .w2 { color: #ff2e97; }
.era-60s .brand-mark .w3 { color: #ffe14a; display: block; }
.era-60s .brand-star { display: none; }
.era-60s .brand-sub { color: #f8d0ff; margin-top: .35rem; }
.era-60s .nav a, .era-60s .nav .menu-btn, .era-60s .nav-toggle { color: #ffe9ff; }
.era-60s .menu { background: #1a0533; border-color: #ff2e97; }
.era-60s .timeline-shell {
  background: #0c0018;
  border: 3px solid #ff2e97;
  box-shadow: 0 0 0 3px #f2d64b, 0 0 22px #ff2e97;
}
.era-60s .era-intro h1 {
  font-family: "Fugaz One", "Bungee", cursive;
  color: #ffe14a;
  text-shadow: 3px 3px 0 #ff2e97, -2px 0 0 #2255cc;
}
.era-60s .era-intro p { color: #f3c8ff; }
.era-60s .product {
  background: #1c0833;
  border: 2px solid #ffe14a;
  box-shadow: 6px 6px 0 #ff2e97;
  color: #fff;
  border-radius: 8px;
}
.era-60s .product .meta { color: #e2b4f4; }
.era-60s .buy {
  background: #ff2e97;
  color: #fff;
  border-radius: 4px;
  box-shadow: 3px 3px 0 #2255cc;
  text-transform: uppercase;
}
.era-60s .site-footer { border-top-color: #ff2e97; color: #e2b4f4; }

.amb-60s .amb-spiral {
  position: absolute;
  width: 90vmax; height: 90vmax;
  left: 50%; top: -10%;
  transform: translate(-50%, -30%);
  background: repeating-conic-gradient(#140022 0 10deg, #f2d64b 10deg 20deg);
  border-radius: 50%;
  animation: ambSpin 48s linear infinite;
  opacity: .12;
}
.amb-60s .amb-flower {
  position: absolute;
  width: 36px; height: 36px;
  background: radial-gradient(circle at 50% 50%, #ffe14a 0 6px, #ff2e97 7px 13px, transparent 14px);
  animation: ambFloat 10s ease-in-out infinite;
  opacity: .45;
}
.amb-60s .f1 { left: 10%; top: 30%; }
.amb-60s .f2 { right: 12%; top: 58%; animation-delay: -4s; }
.amb-60s .amb-mond {
  position: absolute;
  right: 6%; bottom: 12%;
  width: 90px; height: 70px;
  background:
    linear-gradient(#e23 0 40%, #2255cc 40% 100%) 0 0 / 55% 100% no-repeat,
    linear-gradient(#f2d64b, #f2d64b) 55% 0 / 45% 100% no-repeat;
  opacity: .28;
}

/* ========== 2020s ========== */
.era-2020s {
  color: #f4f0ff;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,122,200,.38), transparent 36%),
    radial-gradient(circle at 84% 8%, rgba(122,92,255,.4), transparent 38%),
    radial-gradient(circle at 70% 80%, rgba(68,224,200,.22), transparent 32%),
    #0b0b14;
}
.sticker-row {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: center;
  padding: .7rem 1rem .3rem;
}
.sticker-row span {
  background: #ffe14a;
  color: #1a1a1a;
  font-family: "Fredoka", "Poppins", sans-serif;
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .04em;
  padding: .25rem .55rem;
  border-radius: 8px;
  transform: rotate(-3deg);
  box-shadow: 2px 2px 0 rgba(0,0,0,.25);
}
.sticker-row span:nth-child(2) { background: #ff7ac8; color: #fff; transform: rotate(2deg); }
.sticker-row span:nth-child(3) { background: #44e0c8; transform: rotate(-1deg); }
.sticker-row span:nth-child(4) { background: #7a5cff; color: #fff; transform: rotate(3deg); }
.era-2020s .brand-paper { background: none; padding: 0; box-shadow: none; clip-path: none; transform: none; }
.era-2020s .brand-mark {
  font-family: "Fredoka", "Poppins", sans-serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 0.95;
  color: #fff;
  text-shadow: 2px 2px 0 #ff7ac8, 4px 4px 0 #7a5cff;
}
.era-2020s .brand-mark .w3::after { display: none; }
.era-2020s .brand-mark .w3 { display: block; }
.era-2020s .brand-star { display: none; }
.era-2020s .brand-sub { color: #c8c0e4; letter-spacing: 0.2em; }
.era-2020s .nav a, .era-2020s .nav .menu-btn, .era-2020s .nav-toggle { color: #f4f0ff; }
.era-2020s .menu {
  background: rgba(20,20,32,.78);
  border-color: rgba(255,255,255,.2);
  backdrop-filter: blur(16px);
}
.era-2020s .timeline-shell {
  background: rgba(18,18,28,.72);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 16px 40px rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
}
.era-2020s .era-intro h1 {
  font-family: "Fredoka", "Poppins", sans-serif;
  font-weight: 600;
  color: #fff;
  text-shadow: 2px 2px 0 #ff7ac8, 4px 4px 0 #7a5cff;
}
.era-2020s .era-intro p { color: #d5cdef; }
.era-2020s .product {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
  backdrop-filter: blur(16px);
  border-radius: 22px;
  color: #fff;
}
.era-2020s .product .meta { color: #c9c2e0; }
.era-2020s .buy {
  background: linear-gradient(180deg, #ff7ac8, #7a5cff);
  color: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(122,92,255,.35);
}
.era-2020s .site-footer { border-top-color: rgba(255,255,255,.14); color: #b8b0d0; }

.amb-20s .amb-gblob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .45;
  animation: ambBlob 18s ease-in-out infinite alternate;
}
.amb-20s .gb1 { width: 280px; height: 280px; left: 6%; top: 16%; background: #ff7ac8; }
.amb-20s .gb2 { width: 320px; height: 240px; right: 4%; top: 8%; background: #7a5cff; animation-delay: -6s; }
.amb-20s .gb3 { width: 220px; height: 220px; left: 40%; bottom: 8%; background: #44e0c8; animation-delay: -3s; }

/* Time travel: 50s / 60s / 2020s */
.tt-50s { background: #111; }
.tt-50s .tt-testpattern {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg,
    #fff 0 12.5%, #ffe14a 12.5% 25%, #2ad4d8 25% 37.5%,
    #39c46a 37.5% 50%, #c44ae0 50% 62.5%, #e23 62.5% 75%, #2255cc 75% 87.5%, #111 87.5% 100%);
  animation: ttSoftIn 1.8s ease both;
  opacity: .85;
}
.tt-50s .tt-atom {
  position: absolute; left: 50%; top: 46%;
  width: min(46vw, 240px); height: min(46vw, 240px);
  transform: translate(-50%,-50%);
  background:
    radial-gradient(circle, #ffe14a 0 16px, transparent 17px),
    repeating-conic-gradient(#c41e3a 0 8deg, transparent 8deg 22deg);
  animation: ttSpin 8s linear infinite;
  z-index: 2;
  opacity: .85;
}
.tt-50s .tt-year { font-family: "Lobster", cursive; color: #fff8e8; text-shadow: 3px 3px 0 #c41e3a; }

.tt-60s { background: #120018; }
.tt-60s .tt-spiral {
  position: absolute; inset: -40%;
  background: repeating-conic-gradient(#120018 0 10deg, #f2d64b 10deg 20deg);
  animation: ttSwirl 1.8s linear both;
  opacity: .9;
}
.tt-60s .tt-rocket {
  position: absolute; left: 50%; bottom: 6%;
  width: 22px; height: 70px;
  background: #fff;
  clip-path: polygon(50% 0, 100% 28%, 78% 28%, 78% 100%, 22% 100%, 22% 28%, 0 28%);
  animation: ttLaunch 1.6s var(--ease) both;
  z-index: 3;
  filter: drop-shadow(0 0 12px #ffe14a);
}
@keyframes ttLaunch { from { transform: translate(-50%, 30vh); } to { transform: translate(-50%, -70vh); } }
.tt-60s .tt-year { font-family: "Fugaz One", cursive; color: #ffe14a; text-shadow: 3px 3px 0 #ff2e97; }

.tt-2020s { background: #0a0a12; }
.tt-2020s .tt-phoneframe {
  position: absolute; left: 50%; top: 50%;
  width: min(168px, 38vw); height: min(296px, 46vh);
  transform: translate(-50%,-50%);
  border-radius: 34px;
  border: 8px solid #1c1c24;
  overflow: hidden;
  background: #111;
  box-shadow: 0 24px 50px rgba(0,0,0,.45);
  z-index: 2;
}
.tt-2020s .tt-feed {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #ff7ac8, #7a5cff 50%, #44e0c8);
  animation: ttFeedSwipe 1.6s var(--ease) both;
}
.tt-2020s.tt-rewind .tt-feed { animation-name: ttFeedSwipeBack; }
@keyframes ttFeedSwipe { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes ttFeedSwipeBack { from { transform: translateY(-110%); } to { transform: translateY(0); } }
.tt-2020s .tt-notify {
  position: absolute; top: 12%; left: 50%;
  transform: translateX(-50%);
  background: rgba(20,20,28,.88);
  color: #fff;
  padding: .55rem 1rem;
  border-radius: 16px;
  backdrop-filter: blur(12px);
  animation: ttNotify 1.6s var(--ease) both;
  z-index: 4;
  font-family: "Fredoka", sans-serif;
}
@keyframes ttNotify {
  0% { opacity: 0; transform: translateX(-50%) translateY(-18px) scale(.9); }
  35% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 1; }
}
.tt-2020s .tt-year { font-family: "Fredoka", sans-serif; color: #fff; text-shadow: 2px 2px 0 #ff7ac8; }

@media (max-width: 720px) {
  .era-50s .nav { background: #f7efe4; border-color: #c41e3a; }
  .era-60s .nav { background: #1a0533; border-color: #ff2e97; }
  .era-2020s .nav { background: rgba(20,20,32,.96); border-color: rgba(255,255,255,.2); }
}

/* old 50s/60s/2020s trail cursors replaced in v8 */

body.era-home .card.reveal:nth-child(7) { transition-delay: .46s; }
body.era-home .card.reveal:nth-child(8) { transition-delay: .52s; }
body.era-home .card.reveal:nth-child(9) { transition-delay: .58s; }

/* ========== V8 POLISH: 50s diner / 60s psych / 2020s FYP ========== */
body[class^="era-"]:not(.era-home) .diner-hero,
body[class^="era-"]:not(.era-home) .psych-hero,
body[class^="era-"]:not(.era-home) .fyp-hero { animation: landIn .6s .16s var(--ease) both; }
body[class^="era-"]:not(.era-home) .chrome-counter,
body[class^="era-"]:not(.era-home) .moon-strip { animation: landIn .45s .2s var(--ease) both; }

.diner-hero {
  display: block;
  padding: 1.35rem 1.15rem .35rem;
  position: relative;
}
.era-50s .diner-hero h1 {
  font-family: "Lobster", "Yellowtail", cursive;
  font-weight: 400;
  color: #c41e3a;
  text-shadow: 2px 3px 0 #f2d39b;
  margin: 0 0 .35rem;
}
.era-50s .diner-hero p {
  color: #1a1a1a;
  background: rgba(247,239,228,.9);
  display: inline-block;
  padding: .35rem .65rem;
  border-radius: 8px;
  margin: 0 0 .45rem;
}
.specials-board {
  display: block !important;
  background: #1a1a1a !important;
  color: #f2d39b !important;
  font-family: "Lobster", cursive;
  letter-spacing: .04em;
  border: 2px solid #c41e3a;
  box-shadow: 0 0 0 3px #f2d39b;
}
.neon-open {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: .35rem .2rem;
  border: 3px solid #c41e3a;
  background: #1a1a1a;
  box-shadow: 0 0 18px rgba(196,30,58,.45);
}
.neon-open span {
  font-family: "Monoton", "Lobster", cursive;
  font-size: 1.35rem;
  letter-spacing: .22em;
  color: #ff4d6d;
  text-shadow: 0 0 8px #c41e3a, 0 0 18px #ff4d6d;
  animation: neonFlicker 1.8s steps(2) infinite;
}
.real-juke {
  width: 118px;
  height: 168px;
  position: relative;
  flex-shrink: 0;
  border-radius: 18px 18px 10px 10px;
  background:
    radial-gradient(circle at 50% 38%, rgba(126,200,179,.45), transparent 38%),
    linear-gradient(180deg, #3a3a42, #141416);
  box-shadow:
    inset 0 0 0 4px #d0d4dc,
    inset 0 0 0 7px #c41e3a,
    0 10px 0 #1a1a1a;
}
.juke-tubes {
  position: absolute;
  top: 8px; left: 16px; right: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 34px;
}
.juke-tubes i {
  width: 8px;
  height: 100%;
  transform-origin: bottom center;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(#7ec8b3, #c41e3a);
  animation: tubeBubble 1.15s ease-in-out infinite alternate;
  box-shadow: 0 0 8px #7ec8b3;
}
.juke-tubes i:nth-child(2) { animation-delay: .18s; height: 72%; }
.juke-tubes i:nth-child(3) { animation-delay: .36s; height: 88%; }
.juke-tubes i:nth-child(4) { animation-delay: .54s; height: 64%; }
@keyframes tubeBubble {
  from { transform: scaleY(.62); opacity: .6; }
  to { transform: scaleY(1); opacity: 1; }
}
.juke-window {
  position: absolute;
  left: 18px; right: 18px; top: 48px;
  height: 64px;
  border-radius: 8px;
  background: #0c0c10;
  box-shadow: inset 0 0 0 3px #8e959f;
  overflow: hidden;
}
.juke-record {
  width: 52px; height: 52px;
  margin: 6px auto;
  border-radius: 50%;
  background:
    radial-gradient(circle, #f2d39b 0 6px, #1a1a1a 7px 10px, #333 11px 18px, #1a1a1a 19px 26px);
  animation: spin 2.4s linear infinite;
}
.juke-grille {
  position: absolute;
  left: 16px; right: 16px; bottom: 14px;
  height: 28px;
  background: repeating-linear-gradient(90deg, #c41e3a 0 5px, #f2d39b 5px 10px);
  border-radius: 4px;
}
.chrome-counter {
  height: 16px;
  margin: .55rem 0 0;
  background: linear-gradient(#fff, #b8bec8 42%, #fff 54%, #8e959f);
  box-shadow: 0 4px 0 #c41e3a;
}
.checker-floor {
  height: 78px;
  margin: .15rem 0 1.15rem;
  background: repeating-conic-gradient(#1a1a1a 0% 25%, #f7efe4 0% 50%) 50% / 32px 32px;
  transform: perspective(220px) rotateX(54deg);
  transform-origin: center top;
  overflow: hidden;
}

.era-50s .product { position: relative; overflow: hidden; }
.ticket {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 3;
  background: #fff8e8;
  border: 1px dashed #c41e3a;
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .22rem .42rem;
  color: #c41e3a;
  font-weight: 700;
}
.burst-price {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 3;
  width: 62px; height: 62px;
  display: grid; place-items: center;
  background: #c41e3a;
  color: #fff8e8;
  font-size: .58rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.15;
  clip-path: polygon(50% 0, 61% 22%, 88% 16%, 78% 38%, 100% 50%, 78% 62%, 88% 84%, 61% 78%, 50% 100%, 39% 78%, 12% 84%, 22% 62%, 0 50%, 22% 38%, 12% 16%, 39% 22%);
}
.tv-frame {
  background: #1a1a1a;
  border: 8px solid #2c2c32;
  border-bottom-width: 20px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 3px #c0c4cc, 0 6px 0 #c41e3a;
  position: relative;
  overflow: hidden;
}
.tv-frame::after {
  content: "";
  position: absolute;
  bottom: -15px; left: 50%;
  width: 30px; height: 6px;
  background: #8e959f;
  transform: translateX(-50%);
  border-radius: 2px;
}
.era-50s .menu-tag {
  background: #1a1a1a;
  color: #f2d39b;
  display: inline-block;
  padding: .22rem .55rem;
  border-radius: 4px;
  font-family: "DM Sans", sans-serif;
}
.era-50s .menu-tag em {
  font-style: normal;
  opacity: .7;
  margin-right: .4em;
  letter-spacing: .1em;
  font-size: .72em;
  text-transform: uppercase;
}
.era-50s .buy {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
}

.psych-hero {
  position: relative;
  text-align: center;
  padding: 2.1rem 1.1rem 1.6rem;
  overflow: hidden;
  isolation: isolate;
}
.hero-spiral {
  position: absolute;
  width: 130vmax; height: 130vmax;
  left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(#3a1858 0 16deg, #c478b0 16deg 32deg);
  border-radius: 50%;
  animation: ambSpin 90s linear infinite;
  opacity: .12;
  filter: blur(3px);
  z-index: 0;
}
.lava-morph { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lava-morph i {
  position: absolute;
  border-radius: 50%;
  filter: blur(22px);
  opacity: .5;
  animation: lavaMorph 7.5s ease-in-out infinite alternate;
}
.lava-morph i:nth-child(1) { width: 180px; height: 180px; left: 8%; top: 18%; background: #ff2e97; }
.lava-morph i:nth-child(2) { width: 220px; height: 160px; right: 6%; top: 28%; background: #7a4bff; animation-delay: -2.4s; }
.lava-morph i:nth-child(3) { width: 150px; height: 150px; left: 40%; bottom: 4%; background: #ff8a3d; animation-delay: -4s; }
@keyframes lavaMorph {
  from { transform: translate(0,0) scale(1); border-radius: 50% 42% 60% 48%; }
  to { transform: translate(28px,-22px) scale(1.18); border-radius: 42% 60% 46% 58%; }
}
.flower-decals { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.flower-decals span {
  position: absolute;
  width: 34px; height: 34px;
  background: radial-gradient(circle at 50% 50%, #ffe14a 0 6px, #ff2e97 7px 13px, transparent 14px);
  animation: ambFloat 9s ease-in-out infinite;
}
.flower-decals span:nth-child(1) { left: 6%; top: 18%; }
.flower-decals span:nth-child(2) { right: 8%; top: 22%; animation-delay: -2s; }
.flower-decals span:nth-child(3) { left: 12%; bottom: 16%; animation-delay: -4s; }
.flower-decals span:nth-child(4) { right: 14%; bottom: 12%; animation-delay: -6s; }
.psych-hero h1,
.psych-hero p { position: relative; z-index: 2; }
.wavy-rainbow {
  font-family: "Fugaz One", "Bungee", cursive;
  font-weight: 400;
  font-size: clamp(2.1rem, 6vw, 4rem);
  margin: 0 0 .5rem;
  background: linear-gradient(90deg, #ff8a3d, #ff2e97, #ffe14a, #2255cc, #ff8a3d);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0;
  filter: drop-shadow(3px 3px 0 #1a0533);
  animation: rainbowShift 5.5s linear infinite, waveY 2.6s ease-in-out infinite;
}
@keyframes rainbowShift { to { background-position: 240% 0; } }
@keyframes waveY { 50% { transform: rotate(-1.6deg) translateY(-4px); } }
.psych-hero > p:not(.happenings) { color: #f3c8ff; max-width: 36rem; margin: 0 auto .7rem; }
.happenings {
  display: inline-block;
  font-family: "Press Start 2P", ui-monospace, monospace;
  font-size: .58rem;
  letter-spacing: .06em;
  color: #1a0533;
  background: #ffe14a;
  padding: .45rem .7rem;
  box-shadow: 4px 4px 0 #ff2e97;
}
.moon-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: .7rem 0 1.2rem;
  padding: .55rem 1.1rem;
  background: #050510;
  border-top: 2px solid #ffe14a;
  border-bottom: 2px solid #ffe14a;
  overflow: hidden;
}
.ms-rocket {
  width: 16px; height: 34px;
  background: #fff;
  clip-path: polygon(50% 0, 100% 28%, 76% 28%, 76% 100%, 24% 100%, 24% 28%, 0 28%);
  filter: drop-shadow(0 0 8px #ffe14a);
  animation: rocketCruise 7s linear infinite;
}
@keyframes rocketCruise {
  0% { transform: translateX(-20px) translateY(8px); }
  100% { transform: translateX(18px) translateY(-8px); }
}
.ms-copy {
  flex: 1;
  text-align: center;
  font-family: "Fugaz One", cursive;
  letter-spacing: .12em;
  color: #ffe14a;
  text-transform: uppercase;
  font-size: .82rem;
}
.ms-moon {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 32%, #fff, #c8c0a0 58%, #8a8490);
  box-shadow: inset -6px -4px 0 rgba(0,0,0,.12);
}

.era-60s .product { position: relative; }
.groovy-badge {
  position: absolute;
  top: 12px; right: 10px;
  z-index: 3;
  background: #ffe14a;
  color: #1a0533;
  font-family: "Fugaz One", cursive;
  padding: .28rem .5rem;
  transform: rotate(8deg);
  box-shadow: 3px 3px 0 #ff2e97;
}
.mondrian-frame {
  border: 5px solid #111;
  background: #111;
  padding: 0;
  box-shadow: 7px 0 0 #e23, 0 7px 0 #2255cc, -5px 0 0 #f2d64b;
}
.era-60s .buy { letter-spacing: .04em; }

.fyp-top {
  text-align: center;
  font-family: "Fredoka", "Poppins", sans-serif;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .08em;
  padding: .55rem 1rem;
  background: rgba(18,18,28,.58);
  border-bottom: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  color: #f4f0ff;
}
.era-2020s {
  background-size: 180% 180%;
  animation: meshShift 18s ease-in-out infinite alternate;
}
@keyframes meshShift {
  to { background-position: 82% 18%, 12% 86%, 48% 42%, 0 0; }
}
.fyp-hero {
  text-align: center;
  padding: 1.5rem 1.1rem 1.1rem;
  position: relative;
}
.chunk-wobble {
  font-family: "Fredoka", "Poppins", sans-serif;
  font-weight: 600;
  font-size: clamp(2.1rem, 6vw, 3.8rem);
  margin: 0 0 .35rem;
  color: #fff;
  text-shadow: 3px 3px 0 #ff7ac8, 6px 6px 0 #7a5cff;
  animation: chunkWobble 2.7s ease-in-out infinite;
}
@keyframes chunkWobble {
  0%,100% { transform: rotate(-1.5deg) scale(1); }
  40% { transform: rotate(2deg) scale(1.04); }
  70% { transform: rotate(-.5deg) scale(.98); }
}
.pov-line {
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  color: #ff7ac8;
  margin: 0 0 .45rem;
}
.fyp-hero > p:not(.pov-line) { color: #d5cdef; max-width: 34rem; margin: 0 auto; }
.reel-window {
  width: 84px;
  height: 148px;
  margin: .7rem auto 0;
  border-radius: 16px;
  border: 2px solid rgba(255,255,255,.32);
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,.28);
  background: #111;
}
.reel-track { animation: reelSwipe 7.2s ease-in-out infinite; }
 .reel-slide {
  height: 148px;
  display: grid;
  place-items: center;
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: .08em;
}
.rs1 { background: linear-gradient(180deg, #ff7ac8, #7a5cff); }
.rs2 { background: linear-gradient(180deg, #44e0c8, #7a5cff); }
.rs3 { background: linear-gradient(180deg, #7a5cff, #14141f); }
@keyframes reelSwipe {
  0%, 26% { transform: translateY(0); }
  33%, 60% { transform: translateY(-148px); }
  67%, 94% { transform: translateY(-296px); }
  100% { transform: translateY(0); }
}
@media (max-width: 720px) {
  .reel-window { width: 68px; height: 118px; }
  .reel-slide { height: 118px; font-size: .78rem; }
}
.sticker-pile {
  position: relative;
  height: 118px;
  margin: .4rem 0 1rem;
}
.drag-sticker {
  position: absolute;
  border: 0;
  padding: .32rem .62rem;
  font-family: "Fredoka", "Poppins", sans-serif;
  font-weight: 600;
  font-size: .78rem;
  background: #ffe14a;
  color: #111;
  border-radius: 8px;
  box-shadow: 2px 2px 0 rgba(0,0,0,.3);
  touch-action: none;
  z-index: 5;
}
.drag-sticker:nth-child(2) { background: #ff7ac8; color: #fff; }
.drag-sticker:nth-child(3) { background: #44e0c8; }
.drag-sticker:nth-child(4) { background: #7a5cff; color: #fff; }
.notice-host {
  position: fixed;
  top: auto;
  bottom: 5.6rem;
  right: 1rem;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;
  width: min(260px, calc(100vw - 2rem));
}
.glass-note {
  background: rgba(20,20,32,.8);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 16px;
  padding: .55rem .85rem;
  color: #fff;
  font-family: "Fredoka", sans-serif;
  animation: noteIn .35s ease both;
}
.glass-note.is-out { animation: noteOut .3s ease forwards; }
@keyframes noteIn { from { opacity: 0; transform: translateY(-10px) scale(.96); } }
@keyframes noteOut { to { opacity: 0; transform: translateY(-8px); } }
.era-2020s .product { position: relative; }
.pov-cap {
  margin: 0 0 .45rem;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  color: #ff7ac8;
}
.reel-media { position: relative; }
.social-rail {
  position: absolute;
  right: 8px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  z-index: 3;
}
.rail-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,.48);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
}
.rail-btn.like.is-on { color: #ff4d6d; background: rgba(255,255,255,.16); }
.float-emoji {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, 8px);
  animation: floatUp .85s ease forwards;
  font-size: 1.8rem;
  pointer-events: none;
  z-index: 4;
}
@keyframes floatUp {
  to { opacity: 0; transform: translate(-50%, -46px) scale(1.25); }
}

/* Return-to-present overlay (notebook) */
.wnu-intro.wnu-return {
  background: #f4ead8;
  color: #1c1714;
}
.wnu-return .intro-static {
  background-image:
    linear-gradient(90deg, transparent 11%, #e07a7a 11% 11.35%, transparent 11.35%),
    repeating-linear-gradient(#e8d9c4 0 1px, transparent 1px 28px);
  mix-blend-mode: multiply;
  opacity: .55;
  animation: none;
}
.wnu-return .intro-tracking { opacity: 0; }
.wnu-return .intro-year {
  font-family: "Caveat", cursive;
  color: #1c1714;
  text-shadow: none;
  max-width: 92vw;
  text-align: center;
  padding: 0 1rem;
}
.wnu-return .intro-year.is-full-date {
  font-size: clamp(1.6rem, 5.6vw, 3.2rem);
  letter-spacing: 0.02em;
  line-height: 1.15;
}
.wnu-return .intro-cap {
  position: relative;
  z-index: 2;
  margin-top: 1rem;
  font-family: "Caveat", cursive;
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  opacity: 0;
}
.wnu-return.phase-years .intro-cap { opacity: 1; }
.wnu-return.phase-logo .intro-cap { opacity: 0; transition: opacity .25s; }
.wnu-return .intro-logo text { stroke: #1c1714; }
.wnu-return.phase-logo .intro-logo text { animation-name: introDrawReturn; }
@keyframes introDrawReturn {
  72% { stroke-dashoffset: 0; fill: transparent; }
  100% { stroke-dashoffset: 0; fill: #1c1714; }
}
.wnu-return .intro-skip {
  color: #1c1714;
  border-color: rgba(28,23,20,.5);
}
.wnu-return .intro-skip:hover { background: rgba(28,23,20,.08); }

@media (max-width: 720px) {
  .diner-hero { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .neon-open { writing-mode: horizontal-tb; transform: none; }
  .real-juke { margin: 0 auto; }
  .notice-host { left: .75rem; right: .75rem; top: auto; bottom: 1rem; width: auto; }
  .checker-floor { height: 56px; }
  .sticker-pile { height: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .neon-open span, .juke-record, .juke-tubes i, .hero-spiral, .lava-morph i,
  .wavy-rainbow, .chunk-wobble, .reel-track, .float-emoji, .glass-note,
  .ms-rocket, .era-2020s { animation: none !important; }
}

/* ========== CUSTOM CURSORS (per era + home) ========== */
@media (pointer: fine) and (hover: hover) {
  body.era-home {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cpath%20d%3D%22M3.2%2028.6%208%2014.8%2018.2%204.6l6.1%206.1L13.1%2021.9Z%22%20fill%3D%22%23f3d39a%22%20stroke%3D%22%233a2a18%22%20stroke-width%3D%221.4%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22m18.2%204.6%206.1%206.1-3.1-3.1z%22%20fill%3D%22%23d35400%22%2F%3E%3Cpath%20d%3D%22M3.2%2028.6%208%2014.8l5.1%207.1z%22%20fill%3D%22%23ffe08a%22%2F%3E%3Cpath%20d%3D%22m3.2%2028.6%203.2-3.2%22%20stroke%3D%22%232a2118%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") 3 28, auto;
  }
  body.era-home a,
  body.era-home button,
  body.era-home .card,
  body.era-home .tl-item,
  body.era-home .tl-arrow,
  body.era-home .nav-toggle,
  body.era-home [role="button"] {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cpath%20d%3D%22M3.2%2028.6%208%2014.8%2018.2%204.6l6.1%206.1L13.1%2021.9Z%22%20fill%3D%22%23f3d39a%22%20stroke%3D%22%233a2a18%22%20stroke-width%3D%221.4%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22m18.2%204.6%206.1%206.1-3.1-3.1z%22%20fill%3D%22%23c41e3a%22%2F%3E%3Cpath%20d%3D%22M3.2%2028.6%208%2014.8l5.1%207.1z%22%20fill%3D%22%23ffe08a%22%2F%3E%3Cpath%20d%3D%22m3.2%2028.6%203.2-3.2%22%20stroke%3D%22%232a2118%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%225%22%20fill%3D%22%23fff8e8%22%20stroke%3D%22%23c41e3a%22%20stroke-width%3D%221.2%22%2F%3E%3Cpath%20d%3D%22M24%2021.6v4.8M21.6%2024h4.8%22%20stroke%3D%22%23c41e3a%22%20stroke-width%3D%221.3%22%2F%3E%3C%2Fsvg%3E") 3 28, pointer;
  }
  body.era-50s {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cg%20fill%3D%22none%22%20stroke-width%3D%221.6%22%3E%3Cellipse%20cx%3D%2216%22%20cy%3D%2216%22%20rx%3D%2213%22%20ry%3D%225%22%20stroke%3D%22%23c41e3a%22%2F%3E%3Cellipse%20cx%3D%2216%22%20cy%3D%2216%22%20rx%3D%2213%22%20ry%3D%225%22%20stroke%3D%22%231a6b8a%22%20transform%3D%22rotate%2860%2016%2016%29%22%2F%3E%3Cellipse%20cx%3D%2216%22%20cy%3D%2216%22%20rx%3D%2213%22%20ry%3D%225%22%20stroke%3D%22%23c41e3a%22%20transform%3D%22rotate%28120%2016%2016%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%223.2%22%20fill%3D%22%23f2d39b%22%20stroke%3D%22%231a1a1a%22%2F%3E%3C%2Fsvg%3E") 16 16, auto;
  }
  body.era-50s a,
  body.era-50s button,
  body.era-50s .card,
  body.era-50s .tl-item,
  body.era-50s .tl-arrow,
  body.era-50s .nav-toggle,
  body.era-50s [role="button"] {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cpath%20d%3D%22M11%2011h10l-1.6%2012a3.6%203.6%200%200%201-6.8%200Z%22%20fill%3D%22%23fff8e8%22%20stroke%3D%22%23c41e3a%22%20stroke-width%3D%221.4%22%2F%3E%3Cellipse%20cx%3D%2216%22%20cy%3D%2211%22%20rx%3D%225.2%22%20ry%3D%222.3%22%20fill%3D%22%23f7efe4%22%20stroke%3D%22%23c41e3a%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%226.5%22%20r%3D%222.2%22%20fill%3D%22%23c41e3a%22%2F%3E%3Cpath%20d%3D%22M16%2023v6M13%2029h6%22%20stroke%3D%22%231a1a1a%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") 16 8, pointer;
  }
  body.era-60s {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2211%22%20fill%3D%22none%22%20stroke%3D%22%23ff2e97%22%20stroke-width%3D%222.2%22%2F%3E%3Cpath%20d%3D%22M16%205v22M16%2016%208.2%2023.4M16%2016l7.8%207.4%22%20fill%3D%22none%22%20stroke%3D%22%23ffe14a%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") 16 16, auto;
  }
  body.era-60s a,
  body.era-60s button,
  body.era-60s .card,
  body.era-60s .tl-item,
  body.era-60s .tl-arrow,
  body.era-60s .nav-toggle,
  body.era-60s [role="button"] {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cg%20transform%3D%22translate%2816%2016%29%22%3E%3Ccircle%20r%3D%223.2%22%20fill%3D%22%23ffe14a%22%2F%3E%3Cg%20fill%3D%22%23ff2e97%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-8%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%22-3.8%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%226.2%22%20cy%3D%225%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22-6.2%22%20cy%3D%225%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22-7%22%20cy%3D%22-3.8%22%20r%3D%224%22%2F%3E%3C%2Fg%3E%3Ccircle%20r%3D%222.2%22%20fill%3D%22%232255cc%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 16 16, pointer;
  }
  body.era-70s {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cpath%20d%3D%22M16%203v5%22%20stroke%3D%22%23f0c14a%22%20stroke-width%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2218%22%20r%3D%2210%22%20fill%3D%22%238a93a0%22%20stroke%3D%22%23222%22%20stroke-width%3D%221.3%22%2F%3E%3Cpath%20d%3D%22M6%2018h20M16%208v20M8.4%2012.2Q16%209%2023.6%2012.2M8.4%2023.8Q16%2027%2023.6%2023.8%22%20fill%3D%22none%22%20stroke%3D%22%23e8eef5%22%20stroke-width%3D%22.9%22%2F%3E%3Cpath%20d%3D%22M10%2011%2022%2025M22%2011%2010%2025%22%20stroke%3D%22%23cfd6de%22%20stroke-width%3D%22.6%22%20opacity%3D%22.8%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2214%22%20r%3D%221.4%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%221.2%22%20fill%3D%22%23f0c14a%22%2F%3E%3C%2Fsvg%3E") 16 16, auto;
  }
  body.era-70s a,
  body.era-70s button,
  body.era-70s .card,
  body.era-70s .tl-item,
  body.era-70s .tl-arrow,
  body.era-70s .nav-toggle,
  body.era-70s [role="button"] {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cpath%20d%3D%22M16%203v5%22%20stroke%3D%22%23f0c14a%22%20stroke-width%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2218%22%20r%3D%2210%22%20fill%3D%22%239aa3b0%22%20stroke%3D%22%23222%22%20stroke-width%3D%221.3%22%2F%3E%3Cpath%20d%3D%22M6%2018h20M16%208v20M8.4%2012.2Q16%209%2023.6%2012.2M8.4%2023.8Q16%2027%2023.6%2023.8%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.9%22%2F%3E%3Cpath%20d%3D%22m6%206%203%201-1%203%201-3%203-1-3-1%201-3-1%203z%22%20fill%3D%22%23f0c14a%22%2F%3E%3Cpath%20d%3D%22m24%207%202.2.8-.8%202.2.8-2.2%202.2-.8-2.2-.8.8-2.2-.8%202.2z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E") 16 16, pointer;
  }
  body.era-80s {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cpath%20d%3D%22M3%201h4v4H3zM7%201h4v4H7zM3%205h4v4H3zM7%205h4v4H7zM11%205h4v4h-4zM3%209h4v4H3zM7%209h4v4H7zM11%209h4v4h-4zM15%209h4v4h-4zM3%2013h4v4H3zM7%2013h4v4H7zM11%2013h4v4h-4zM15%2013h4v4h-4zM19%2013h4v4h-4zM3%2017h4v4H3zM7%2017h4v4H7zM3%2021h4v4H3zM7%2021h4v4H7zM7%2025h4v4H7zM11%2017h4v4h-4z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M3%201h8v4H7v4h4v4h4v4h4v4h-4v4h-4v-4H7v4H3V1z%22%20fill%3D%22none%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%221.2%22%2F%3E%3Cpath%20d%3D%22M11%2021h4v4h-4zM15%2017h4v4h-4z%22%20fill%3D%22%23ff3ad6%22%2F%3E%3C%2Fsvg%3E") 3 1, auto;
  }
  body.era-80s a,
  body.era-80s button,
  body.era-80s .card,
  body.era-80s .tl-item,
  body.era-80s .tl-arrow,
  body.era-80s .nav-toggle,
  body.era-80s [role="button"] {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Crect%20x%3D%225%22%20y%3D%2221%22%20width%3D%2222%22%20height%3D%228%22%20rx%3D%222%22%20fill%3D%22%232a2a38%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%221.2%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%229%22%20width%3D%224%22%20height%3D%2213%22%20fill%3D%22%23d0d4dc%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%228%22%20r%3D%225%22%20fill%3D%22%23ff3ad6%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%221.2%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2223.5%22%20width%3D%224%22%20height%3D%223%22%20fill%3D%22%2300e5ff%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2223.5%22%20width%3D%224%22%20height%3D%223%22%20fill%3D%22%23ff3ad6%22%2F%3E%3C%2Fsvg%3E") 16 8, pointer;
  }
  body.era-90s {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cpath%20d%3D%22M4%202%204%2026l7.2-7.2%204.6%2011.2%204.2-1.8-4.6-11%209.6-.2z%22%20fill%3D%22%23fff%22%20stroke%3D%22%23111%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M4%202%204%2026l7.2-7.2%204.6%2011.2%204.2-1.8-4.6-11%209.6-.2z%22%20fill%3D%22none%22%20stroke%3D%22%23ff4ec4%22%20stroke-width%3D%221%22%20opacity%3D%22.85%22%2F%3E%3C%2Fsvg%3E") 4 2, auto;
  }
  body.era-90s a,
  body.era-90s button,
  body.era-90s .card,
  body.era-90s .tl-item,
  body.era-90s .tl-arrow,
  body.era-90s .nav-toggle,
  body.era-90s [role="button"] {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cpath%20d%3D%22M10%2015V8.2a2.2%202.2%200%200%201%204.4%200V15m0-5.2a2.2%202.2%200%200%201%204.4%200V16m0-4.5a2.2%202.2%200%201%201%204.4%200V17.5M10%2015v1.2a2.2%202.2%200%200%200-3.6%201.7c0%204.2%203%208.6%208.6%208.6h1.4c4.4%200%207.6-2.6%207.6-7.4V17.5%22%20fill%3D%22%23fff%22%20stroke%3D%22%23111%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M10%2015V8.2a2.2%202.2%200%200%201%204.4%200V15%22%20fill%3D%22none%22%20stroke%3D%22%23ff4ec4%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E") 10 8, pointer;
  }
  body.era-2000s {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22a%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23dff7ff%22%2F%3E%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%235ad4f6%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231a8ec4%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M6%202v22l6.5-6.2%204.2%2010.2%203.8-1.6-4.2-10%208.7-.2z%22%20fill%3D%22url%28%23a%29%22%20stroke%3D%22%230b4c68%22%20stroke-width%3D%221.4%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8%205.5c2-1.4%205-.8%205.6%201.2%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.9%22%2F%3E%3Cpath%20d%3D%22m24%205%201.6.6L25%207.2l.6-1.6L27.2%205l-1.6-.6L25%202.8l-.6%201.6z%22%20fill%3D%22%23fff59a%22%20stroke%3D%22%23e0b000%22%20stroke-width%3D%22.6%22%2F%3E%3C%2Fsvg%3E") 6 2, auto;
  }
  body.era-2000s a,
  body.era-2000s button,
  body.era-2000s .card,
  body.era-2000s .tl-item,
  body.era-2000s .tl-arrow,
  body.era-2000s .nav-toggle,
  body.era-2000s [role="button"] {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22a%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23e8fbff%22%2F%3E%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%235ad4f6%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231a8ec4%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M6%202v22l6.5-6.2%204.2%2010.2%203.8-1.6-4.2-10%208.7-.2z%22%20fill%3D%22url%28%23a%29%22%20stroke%3D%22%230b4c68%22%20stroke-width%3D%221.4%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8%205.5c2-1.4%205-.8%205.6%201.2%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22m22%204%202%20.7L23.3%206.8l.7-2.1L26%204l-2-.7L23.3%201.2l-.7%202.1z%22%20fill%3D%22%23fff59a%22%2F%3E%3Cpath%20d%3D%22m26%2014%202.4.8-.8%202.4.8-2.4%202.4-.8-2.4-.8.8-2.4-.8%202.4z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E") 6 2, pointer;
  }
  body.era-2010s {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cpath%20d%3D%22M5%202%205%2023l6-6%203.6%208.8%203.2-1.4L14.2%2016H24z%22%20fill%3D%22%231a1a1a%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.15%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M23.5%205.2c1.4-1.5%203.8-1.5%205.1%200%201.4%201.5%201.3%203.8-.2%205.2L23.5%2015%2018.6%2010.4c-1.5-1.4-1.6-3.7-.2-5.2%201.3-1.5%203.7-1.5%205.1%200z%22%20fill%3D%22%23ff4d6d%22%2F%3E%3C%2Fsvg%3E") 5 2, auto;
  }
  body.era-2010s a,
  body.era-2010s button,
  body.era-2010s .card,
  body.era-2010s .tl-item,
  body.era-2010s .tl-arrow,
  body.era-2010s .nav-toggle,
  body.era-2010s [role="button"] {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cpath%20d%3D%22M16%2028%206.4%2017.8C3.6%2015%203.4%2010.4%206.6%207.6c2.8-2.5%207-2.2%209.4.7%202.4-2.9%206.6-3.2%209.4-.7%203.2%202.8%203%207.4.2%2010.2z%22%20fill%3D%22%23ff4d6d%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.4%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 16 12, pointer;
  }
  body.era-2020s {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cpath%20d%3D%22M16%204h6v11h2V9h5v15.5a6.5%206.5%200%200%201-6.5%206.5h-8A6.5%206.5%200%200%201%208%2024.5V18h4.5v-2H16V4z%22%20fill%3D%22%23c9a227%22%20transform%3D%22translate%281.6%201.6%29%22%2F%3E%3Cpath%20d%3D%22M16%204h6v11h2V9h5v15.5a6.5%206.5%200%200%201-6.5%206.5h-8A6.5%206.5%200%200%201%208%2024.5V18h4.5v-2H16V4z%22%20fill%3D%22%23ffe566%22%20stroke%3D%22%231a1a1a%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M17.2%206h3.4v9%22%20fill%3D%22none%22%20stroke%3D%22%23fff4b0%22%20stroke-width%3D%221.3%22%2F%3E%3C%2Fsvg%3E") 16 4, auto;
  }
  body.era-2020s a,
  body.era-2020s button,
  body.era-2020s .card,
  body.era-2020s .tl-item,
  body.era-2020s .tl-arrow,
  body.era-2020s .nav-toggle,
  body.era-2020s [role="button"] {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cpath%20d%3D%22M16%204h6v11h2V9h5v15.5a6.5%206.5%200%200%201-6.5%206.5h-8A6.5%206.5%200%200%201%208%2024.5V18h4.5v-2H16V4z%22%20fill%3D%22%23c9a227%22%20transform%3D%22translate%281.6%201.6%29%22%2F%3E%3Cpath%20d%3D%22M16%204h6v11h2V9h5v15.5a6.5%206.5%200%200%201-6.5%206.5h-8A6.5%206.5%200%200%201%208%2024.5V18h4.5v-2H16V4z%22%20fill%3D%22%23ffe566%22%20stroke%3D%22%231a1a1a%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%228%22%20r%3D%223%22%20fill%3D%22%23ff7ac8%22%2F%3E%3Cpath%20d%3D%22M17.2%206h3.4v9%22%20fill%3D%22none%22%20stroke%3D%22%23fff4b0%22%20stroke-width%3D%221.3%22%2F%3E%3C%2Fsvg%3E") 16 4, pointer;
  }
}

/* ========== V8: NAV STACKING ========== */
.site-header {
  position: relative;
  z-index: 185 !important;
  isolation: isolate;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}
.has-menu { position: relative; z-index: 168; }
.has-menu[open] .menu,
.has-menu.is-open .menu,
.has-menu:hover .menu,
.has-menu:focus-within .menu { display: block; }
.menu {
  z-index: 169 !important;
}
.menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 0.85rem;
}
.nav { position: relative; z-index: 166; }
@media (max-width: 720px) {
  .nav {
    z-index: 166;
  }
  body.nav-open .nav {
    z-index: 166;
  }
}

/* ========== V8: ANNOUNCEMENT BARS ========== */
.announce-bar {
  position: relative;
  z-index: 50;
  overflow: hidden;
  text-align: center;
}
.announce-inner { position: relative; min-height: 2.15rem; }
.announce-msg {
  margin: 0;
  padding: .45rem 1rem;
  display: none;
  font-size: .86rem;
  line-height: 1.35;
}
.announce-msg.is-on { display: block; }
.egg-word, .egg-streak, .egg-phone {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.announce-home {
  background: #f4ead8;
  color: #1c1714;
  border-bottom: 1px solid #d9c8ae;
  font-family: "Caveat", cursive;
  font-size: 1.15rem;
  background-image:
    linear-gradient(90deg, transparent 11%, #e07a7a 11% 11.25%, transparent 11.25%),
    repeating-linear-gradient(#f4ead8 0 27px, #e8d9c4 27px 28px);
}
.announce-home .announce-msg { font-size: 1.15rem; }
.announce-50s {
  background: #1a1a1a;
  color: #f2d39b;
  border-bottom: 4px solid #c41e3a;
  font-family: "Lobster", cursive;
  letter-spacing: .03em;
}
.announce-50s .announce-msg { text-shadow: 0 0 10px rgba(196,30,58,.45); }
.announce-60s {
  background: #1a0533;
  color: #ffe14a;
  border-bottom: 3px solid #ff2e97;
  font-family: "Fugaz One", cursive;
}
.announce-70s {
  background: #f3d9a4;
  color: #2a1008;
  font-family: "Shrikhand", Georgia, serif;
  letter-spacing: .02em;
  border-bottom: 3px solid #8b2e0e;
}
.announce-80s {
  background: #050010;
  color: #7CFF9A;
  font-family: "Press Start 2P", ui-monospace, monospace;
  font-size: .52rem;
  border-bottom: 1px solid #00e5ff;
}
.announce-80s .announce-msg { font-size: .58rem; letter-spacing: .04em; line-height: 1.5; }
.announce-80s .osd-rec { color: #ff3a3a; margin-right: .7rem; }
.announce-90s {
  background: #100018;
  color: #ffe033;
  border-bottom: 3px solid #ff4ec4;
  font-family: "Bungee", sans-serif;
  font-size: .78rem;
}
.announce-90s .announce-msg { font-size: .78rem; }
.announce-00s {
  background: linear-gradient(180deg, #7ec8ff, #2b8adf);
  color: #fff;
  font-weight: 700;
  border-bottom: 3px solid #1568a8;
  text-shadow: 0 1px 0 #1568a8;
}
.announce-10s {
  background: #f8ece4;
  color: #3a2a24;
  border-bottom: 1px solid #e3c9ba;
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  letter-spacing: .08em;
  font-size: .78rem;
}
.announce-10s .announce-msg { font-size: .78rem; }
.announce-20s {
  display: flex;
  justify-content: center;
  background: transparent;
  padding: .45rem .75rem .15rem;
}
.announce-20s .announce-inner {
  background: rgba(20,20,32,.82);
  color: #f4f0ff;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  backdrop-filter: blur(14px);
  min-width: min(520px, calc(100% - 1rem));
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.announce-20s .announce-msg { font-family: "Fredoka", sans-serif; font-size: .84rem; }

/* ========== 60s TRAVEL: soft swirl + daisy bloom ========== */
.tt-60s { background: #1a0828; }
.tt-60s .tt-swirl-soft {
  position: absolute; inset: -30%;
  background: repeating-conic-gradient(#5a2a78 0 20deg, #c478b0 20deg 40deg, #e8c56e 40deg 60deg);
  animation: ttSwirlSoft 8s linear both;
  filter: blur(16px);
  opacity: .42;
}
.tt-60s .tt-bloom { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.tt-daisy {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: 42px; height: 42px;
  margin: -21px 0 0 -21px;
  transform: scale(0) rotate(-20deg);
  animation: daisyBloom 1.5s var(--d, 0s) ease forwards;
  background:
    radial-gradient(circle at 50% 50%, #ffe14a 0 6px, transparent 7px),
    radial-gradient(circle at 50% 18%, #ffe3f2 0 8px, transparent 9px),
    radial-gradient(circle at 50% 82%, #ffe3f2 0 8px, transparent 9px),
    radial-gradient(circle at 18% 50%, #ff9ad4 0 8px, transparent 9px),
    radial-gradient(circle at 82% 50%, #ff9ad4 0 8px, transparent 9px),
    radial-gradient(circle at 27% 27%, #fff 0 7px, transparent 8px),
    radial-gradient(circle at 73% 27%, #fff 0 7px, transparent 8px),
    radial-gradient(circle at 27% 73%, #fff 0 7px, transparent 8px),
    radial-gradient(circle at 73% 73%, #fff 0 7px, transparent 8px);
  filter: drop-shadow(0 4px 0 rgba(26,5,51,.25));
}
@keyframes daisyBloom {
  to { transform: scale(1) rotate(18deg); }
}
.tt-petals { position: absolute; inset: 0; overflow: hidden; z-index: 3; pointer-events: none; }
.tt-petals i {
  position: absolute;
  width: 12px; height: 18px;
  background: #ff9ad4;
  border-radius: 50% 50% 50% 50%;
  opacity: .85;
  animation: petalDrift 2s linear forwards;
  left: var(--x, 10%);
  top: -8%;
}
.tt-petals i:nth-child(odd) { background: #fff0f8; }
@keyframes petalDrift {
  to { transform: translate3d(40px, 110vh, 0) rotate(160deg); opacity: .2; }
}
.tt-60s .tt-year { font-family: "Fugaz One", cursive; color: #ffe14a; text-shadow: 3px 3px 0 #ff2e97; }

/* 60s page extra flowers */
.amb-60s .amb-daisy,
.page-daisy, .card-daisy {
  position: absolute;
  width: 30px; height: 30px;
  background:
    radial-gradient(circle at 50% 50%, #ffe14a 0 5px, transparent 6px),
    radial-gradient(circle at 50% 16%, #ffe3f2 0 7px, transparent 8px),
    radial-gradient(circle at 50% 84%, #ffe3f2 0 7px, transparent 8px),
    radial-gradient(circle at 16% 50%, #ff9ad4 0 7px, transparent 8px),
    radial-gradient(circle at 84% 50%, #ff9ad4 0 7px, transparent 8px);
  animation: daisyFloat 14s ease-in-out infinite;
  opacity: .7;
  pointer-events: none;
}
.amb-60s .amb-daisy.d1 { left: 6%; top: 22%; animation-delay: -2s; }
.amb-60s .amb-daisy.d2 { right: 8%; top: 36%; animation-delay: -5s; }
.amb-60s .amb-daisy.d3 { left: 18%; bottom: 18%; animation-delay: -8s; width: 22px; height: 22px; }
.amb-60s .amb-daisy.d4 { right: 16%; bottom: 12%; animation-delay: -11s; }
.amb-60s .amb-daisy.d5 { left: 48%; top: 12%; width: 18px; height: 18px; animation-delay: -3s; }
@keyframes daisyFloat {
  0%,100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-16px) rotate(22deg); }
}
.era-60s .product { overflow: visible; }
.card-daisy { z-index: 3; }
.card-daisy.d1 { top: 54%; left: 8px; transform: rotate(-18deg); }
.card-daisy.d2 { bottom: 18%; right: 10px; transform: rotate(14deg); width: 22px; height: 22px; }

/* ========== TIME MACHINE WIDGET ========== */
.tm-widget {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 80;
  min-width: 148px;
  padding: .55rem .7rem .5rem;
  background: #1c1714;
  color: #f4ead8;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  font-size: .72rem;
  letter-spacing: .04em;
  pointer-events: none;
}
.tm-widget strong { display: block; font-size: 0.98rem; letter-spacing: 0; line-height: 1.25; max-width: 11.5rem; }
.tm-widget .tm-here { opacity: .8; margin-top: .15rem; }
body.era-50s .tm-widget { background: #1a1a1a; color: #f2d39b; border: 2px solid #c41e3a; }
body.era-60s .tm-widget { background: #1a0533; color: #ffe14a; border: 2px solid #ff2e97; }
body.era-70s .tm-widget { background: #2a1008; color: #f0c14a; }
body.era-80s .tm-widget { background: #050010; color: #00e5ff; border: 1px solid #ff3ad6; font-family: "Press Start 2P", monospace; font-size: .42rem; }
body.era-80s .tm-widget strong { font-size: .46rem; line-height: 1.35; max-width: 9rem; }
body.era-90s .tm-widget { background: #100018; color: #ffe033; border: 2px solid #ff4ec4; }
body.era-2000s .tm-widget { background: linear-gradient(180deg,#7ec8ff,#2b8adf); color: #fff; }
body.era-2010s .tm-widget { background: #fff; color: #3a2a24; border: 1px solid #e3c9ba; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
body.era-2020s .tm-widget { background: rgba(20,20,32,.8); color: #fff; border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(12px); }
@media (max-width: 720px) {
  .tm-widget { left: .6rem; bottom: .6rem; min-width: 0; padding: .4rem .5rem; }
}

/* ========== ARRIVALS ========== */
.arrival {
  position: fixed; inset: 0;
  z-index: 150;
  pointer-events: none;
  display: grid; place-items: center;
}
.arrival.is-out { animation: introFade .4s ease forwards; }
.arrival-home { background: rgba(244,234,216,.55); }
.arrival-50s { background: radial-gradient(circle, transparent 30%, rgba(26,26,26,.35)); }
.arrival-60s { background: rgba(26,5,51,.2); }
.arrival-70s { background: radial-gradient(circle, rgba(240,193,74,.2), transparent 60%); }
.arrival-80s {
  background: linear-gradient(180deg, transparent 46%, rgba(0,229,255,.18) 50%, transparent 54%);
  animation: arriveWipe 1.2s ease both;
}
.arrival-90s { background: #100018; color: #39ff6a; font-family: "Press Start 2P", monospace; font-size: .7rem; }
.arrival-2000s { background: rgba(74,163,224,.18); }
.arrival-2010s { background: linear-gradient(180deg, rgba(255,180,140,.35), transparent 70%); }
.arrival-2020s { backdrop-filter: blur(16px); background: rgba(11,11,20,.35); }
@keyframes arriveWipe { from { transform: translateY(-30%); opacity: .8; } to { transform: translateY(30%); opacity: 0; } }
.arrival-note {
  padding: .7rem 1rem;
  border-radius: 8px;
  background: rgba(0,0,0,.55);
  color: #d7ffd0;
  font-family: "Press Start 2P", monospace;
  font-size: .62rem;
}

/* ========== CARD MICRO-HOVERS ========== */
.era-50s .product::after,
.era-80s .product::after,
.era-90s .product::after,
.era-2000s .product::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.28) 50%, transparent 60%);
  transform: translateX(-120%);
  pointer-events: none;
  z-index: 4;
}
.era-50s .product:hover::after,
.era-80s .product:hover::after,
.era-90s .product:hover::after,
.era-2000s .product:hover::after { animation: gleam 0.9s ease; }
@keyframes gleam { to { transform: translateX(120%); } }
.era-60s .product:hover .groovy-badge { transform: rotate(-8deg) scale(1.08); }
.era-70s .product:hover { box-shadow: 0 0 28px rgba(240,193,74,.35); }
.era-2020s .product:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 12px 32px rgba(122,92,255,.28); }

/* ========== IDLE SCREENSAVERS ========== */
.ssaver {
  position: fixed; inset: 0;
  z-index: 175;
  overflow: hidden;
  background: rgba(4,4,8,.55);
}
.ssaver-bounce {
  position: absolute;
  left: 20%; top: 30%;
  font-weight: 800;
  font-size: 2rem;
  color: #fff;
  animation: dvdBounce 8s linear infinite alternate;
}
@keyframes dvdBounce {
  0% { transform: translate(0,0); }
  50% { transform: translate(40vw, 28vh); }
  100% { transform: translate(8vw, 50vh); }
}
.ssaver-toast, .ssaver-heart, .ssaver-atom, .ssaver-flower {
  position: absolute;
  animation: saverDrift 12s linear infinite;
  font-size: 1.6rem;
}
@keyframes saverDrift {
  from { transform: translateY(-10vh) rotate(0); }
  to { transform: translateY(110vh) rotate(40deg); }
}

.mail-popup {
  position: fixed;
  right: 1.2rem; bottom: 5rem;
  z-index: 170;
  background: #fff;
  color: #111;
  border: 2px solid #333;
  border-radius: 6px;
  padding: .7rem 1rem;
  box-shadow: 6px 6px 0 #111;
  font-family: "Trebuchet MS", "DM Sans", sans-serif;
}
.flip-pop {
  position: fixed;
  right: 1.2rem; bottom: 5rem;
  z-index: 170;
  width: 70px; height: 128px;
  background: linear-gradient(#d0d6de,#8a93a0);
  border: 3px solid #444;
  border-radius: 10px;
  transform-origin: top center;
  animation: ttFlip 1.4s ease both;
}

@media (prefers-reduced-motion: reduce) {
  .arrival, .ssaver, .tt-swirl-soft, .tt-daisy, .tt-petals, .page-daisy, .card-daisy, .amb-daisy,
  .tm-widget { animation: none !important; }
  .announce-msg { display: block; }
  .announce-msg + .announce-msg { display: none; }
}

/* ========== FLOATING ERA ICONS ========== */
.float-field {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.float-scrim {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.float-depth {
  position: absolute;
  inset: -10%;
  will-change: transform;
}
.floater {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--s, 40px);
  height: var(--s, 40px);
  margin: 0;
  transform: translate(-50%, -50%);
  animation: floatBob var(--dur, 10s) ease-in-out var(--delay, 0s) infinite;
  opacity: .46;
}
.floater.f-far { opacity: .4; }
.floater.f-mid { opacity: .58; }
.floater.f-near { opacity: .74; }
.floater svg { width: 100%; height: 100%; display: block; overflow: visible; }
@keyframes floatBob {
  0%, 100% { transform: translate(-50%, -50%) translate3d(0, 0, 0) rotate(-6deg); }
  50% { transform: translate(-50%, -50%) translate3d(10px, -16px, 0) rotate(8deg); }
}
body.era-home .float-scrim {
  background: radial-gradient(ellipse 72% 58% at 50% 36%, rgba(248,244,236,.7) 0 36%, rgba(248,244,236,.28) 72%, transparent 100%);
}
body.era-50s .float-scrim {
  background: radial-gradient(ellipse 72% 58% at 50% 36%, rgba(126,200,179,.42) 0 36%, rgba(126,200,179,.16) 72%, transparent 100%);
}
body.era-60s .float-scrim {
  background: radial-gradient(ellipse 72% 58% at 50% 36%, rgba(20,0,34,.4) 0 36%, rgba(20,0,34,.16) 72%, transparent 100%);
}
body.era-70s .float-scrim {
  background: radial-gradient(ellipse 72% 58% at 50% 36%, rgba(42,16,8,.28) 0 42%, rgba(42,16,8,.08) 72%, transparent 100%);
}
body.era-80s .float-scrim {
  background: radial-gradient(ellipse 72% 58% at 50% 36%, rgba(18,2,36,.38) 0 36%, rgba(18,2,36,.14) 72%, transparent 100%);
}
body.era-90s .float-scrim {
  background: radial-gradient(ellipse 72% 58% at 50% 36%, rgba(16,0,24,.38) 0 36%, rgba(16,0,24,.14) 72%, transparent 100%);
}
body.era-2000s .float-scrim {
  background: radial-gradient(ellipse 72% 58% at 50% 36%, rgba(232,245,255,.72) 0 42%, rgba(232,245,255,.2) 72%, transparent 100%);
}
body.era-2010s .float-scrim {
  background: radial-gradient(ellipse 72% 58% at 50% 36%, rgba(248,236,228,.72) 0 42%, rgba(248,236,228,.2) 72%, transparent 100%);
}
body.era-2020s .float-scrim {
  background: radial-gradient(ellipse 72% 58% at 50% 36%, rgba(11,11,20,.38) 0 36%, rgba(11,11,20,.14) 72%, transparent 100%);
}
body.era-home .floater { opacity: .42; }
body.era-home .floater.f-far { opacity: .28; }
body.era-home .floater.f-near { opacity: .52; }

@media (prefers-reduced-motion: reduce) {
  .float-field, .float-scrim { display: none !important; }
}


/* ========== V11: readability, copy styles, draw layer ========== */
.card-60s .tag { color: #1a0533; }
.era-60s .buy { color: #1a0533; }
.neon-open { background: #111; }
.neon-open span {
  color: #ffc2cb;
  animation: neonGlowSoft 1.8s ease-in-out infinite;
}
@keyframes neonGlowSoft {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}
.era-70s .buy { background: #5c1808; color: #fff4d6; }
.era-70s .product .meta { color: #3d1608; }
.drag-sticker:nth-child(2) { color: #1a0533; }
.drag-sticker:nth-child(4) { background: #4e28d4; color: #fff; }

.product .blurb {
  margin: .35rem 0 .2rem;
  font-size: .9rem;
  line-height: 1.45;
  max-width: 38ch;
}
.collection-kicker {
  margin: 1.45rem 0 .85rem;
  font-size: clamp(1.15rem, 2.5vw, 1.75rem);
  line-height: 1.2;
}
.era-50s .collection-kicker { font-family: "Lobster", cursive; color: #c41e3a; }
.era-60s .collection-kicker { font-family: "Fugaz One", cursive; color: #ffe14a; text-shadow: 2px 2px 0 #1a0533; }
.era-70s .collection-kicker { font-family: "Shrikhand", Georgia, serif; color: #8b2e0e; }
.era-80s .collection-kicker { font-family: "Press Start 2P", monospace; color: #00e5ff; font-size: clamp(.7rem, 1.6vw, 1rem); }
.era-90s .collection-kicker { font-family: "Bungee", sans-serif; color: #ffe033; }
.era-2000s .top8-heading, .era-2000s .collection-kicker { font-family: "Varela Round", sans-serif; }
.era-2010s .collection-kicker { font-family: "Raleway", sans-serif; font-weight: 500; color: #5a3830; }
.era-2020s .collection-kicker { font-family: "Fredoka", "Poppins", sans-serif; color: #f4f0ff; }
.hero-lede {
  max-width: 42ch;
  margin: .9rem auto 0;
  font-size: 1.08rem;
  line-height: 1.5;
  color: #3a342e;
}
.psych-hero > p:not(.happenings) {
  background: rgba(16, 0, 28, .72);
  padding: .45rem .85rem;
  border-radius: 10px;
  color: #ffe9ff;
}

.draw-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
}
main, .page-main, .site-footer { position: relative; z-index: 4; }
.draw-layer.is-drawing { pointer-events: auto; touch-action: none; }
.draw-clear {
  position: fixed;
  left: 1rem;
  bottom: 8.8rem;
  z-index: 12;
  border: 0;
  border-radius: 999px;
  padding: .4rem .75rem;
  font: 650 .78rem/1 "DM Sans", sans-serif;
  background: rgba(255,255,255,.88);
  color: #1a1a1a;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  cursor: pointer;
}
body.era-80s .draw-clear { background: #1a0533; color: #00e5ff; border: 1px solid #ff2bd6; }
body.era-90s .draw-clear { background: #240033; color: #ffe033; }
body.era-60s .draw-clear { background: #1a0533; color: #ffe14a; }
body.era-70s .draw-clear { background: #5c1808; color: #fff4d6; }
body.era-2020s .draw-clear { background: #1a1630; color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .draw-layer { /* drawing still allowed; fades handled in JS */ }
}


/* ========== V11b: contrast follow-ups ========== */
.card .tag, .card .cta { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.card-60s .tag { background: #ff2e97; color: #1a0533; }
.card-60s .cta { background: #ffe14a; color: #1a0533; }
.card-70s .tag { background: #f0c14a; color: #3d1608; }
.card-70s .cta { background: #3d1608; color: #fff4d6; }
.card-80s .tag { background: #00e5ff; color: #14022a; }
.card-80s .cta { background: #ff3ad6; color: #14022a; }
.card-90s .tag,
.card-90s .cta { background: #c2186a; color: #fff; }

.era-60s .buy { background: #ffe14a; color: #1a0533; }
.groovy-badge { background: #ffe14a; color: #1a0533; }

.era-50s .collection-kicker {
  color: #8b1024;
  background: rgba(247,239,228,.94);
  display: inline-block;
  padding: .28rem .6rem;
  border-radius: 8px;
}
.era-50s .site-footer { background: #f7efe4; color: #1a1a1a; }
.era-50s .site-footer a { color: #8b1024; }
.era-80s .site-footer { background: #0a0120; color: #ffe9ff; }
.era-80s .site-footer a { color: #7af0ff; }

.era-70s .product { background: #fff8e4; color: #2a1608; isolation: isolate; }
.era-70s .product h3,
.era-70s .product .blurb,
.era-70s .product .price { color: #2a1608; }
.era-70s .product .meta { color: #3d1608; }
.era-70s .buy { background: #5c1808; color: #fff4d6; }


/* year on the 2000s flip-phone screen */
.tt-overlay.tt-2000s .tt-flip-screen .tt-year,
.tt-2000s .tt-flip-screen .tt-year {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  font-size: 1.55rem !important;
  line-height: 1 !important;
  letter-spacing: .06em !important;
  color: #e8fbff !important;
  text-shadow: 0 1px 0 #102428 !important;
  font-variant-numeric: tabular-nums;
}
.tt-2000s .tt-flip-screen {
  height: 68px;
  overflow: hidden;
}

/* homepage card chips: opaque, isolated */
.card .tag, .card .cta {
  isolation: isolate;
  position: relative;
  z-index: 2;
  background-clip: padding-box;
}
.card-00s .tag { background: #1d6fb8; color: #fff; }
.card-00s .cta { background: #0d4f8a; color: #fff; }

.era-50s .site-footer,
.era-50s .site-footer p,
.era-50s .site-footer a { color: #1a1a1a; }
.era-50s .site-footer a { color: #8b1024; text-decoration: underline; }
.era-80s .site-footer,
.era-80s .site-footer p { color: #ffe9ff; background: #0a0120; }
.era-80s .site-footer a { color: #7af0ff; }

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}


/* ========== V11: ERA MUSIC PLAYER + BACK TO TOP ========== */
.wnu-player {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 88;
  width: min(250px, calc(100vw - 5.5rem));
  font-size: .78rem;
  line-height: 1.3;
  pointer-events: auto;
}
.wnu-player .player-shell {
  padding: .55rem .65rem .5rem;
  border-radius: 12px;
  background: #1c1714;
  color: #f4ead8;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
}
.player-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .35rem; }
.player-badge { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .68rem; }
.player-info {
  width: 1.3rem; height: 1.3rem; border-radius: 50%;
  border: 1px solid currentColor; background: transparent; color: inherit;
  font: 700 .7rem/1 Georgia, serif; cursor: pointer;
}
.player-face { display: grid; grid-template-columns: auto 1fr; gap: .4rem .55rem; align-items: center; }
.player-reel { width: 36px; height: 36px; position: relative; }
.player-reel i {
  position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; top: 10px;
}
.player-reel i:first-child { left: 0; }
.player-reel i:last-child { right: 0; }
.wnu-player.is-playing .player-reel i { animation: reelSpin 1.6s linear infinite; }
@keyframes reelSpin { to { transform: rotate(360deg); } }
.player-viz { width: 100%; height: 28px; grid-column: 1 / -1; opacity: .85; }
.player-title { font-weight: 700; font-size: .86rem; }
.player-artist { opacity: .8; font-size: .72rem; }
.player-controls { display: flex; align-items: center; gap: .28rem; margin-top: .4rem; }
.player-controls button {
  background: transparent; border: 0; color: inherit; cursor: pointer;
  font-size: .95rem; padding: .15rem .25rem;
}
.player-play { font-size: 1.05rem; }
.player-vol-wrap { flex: 1; display: flex; }
.player-vol { width: 100%; }
.player-date { margin-top: .35rem; opacity: .75; font-size: .68rem; }
.player-credits {
  margin-top: .4rem; max-height: 9rem; overflow: auto;
  padding: .45rem; border-radius: 8px;
  background: rgba(0,0,0,.18); font-size: .7rem;
}
.player-credits ul { margin: .3rem 0; padding-left: 1.1rem; }
.player-credits a { color: inherit; }

body.era-home .wnu-player .player-shell {
  background: #f6efe4; color: #1a1a1a; border: 1px dashed #c41e3a;
  box-shadow: 3px 3px 0 rgba(0,0,0,.08);
  font-family: "Caveat", cursive;
}
body.era-home .player-title, body.era-home .player-badge { font-family: "Caveat", cursive; font-size: 1rem; }
body.era-50s .wnu-player .player-shell {
  background: #1a1a1a; color: #f2d39b; border: 3px solid #c41e3a;
  border-radius: 18px 18px 10px 10px;
  box-shadow: 0 0 0 2px #c0c4cc, 0 10px 24px rgba(0,0,0,.35);
}
body.era-60s .wnu-player .player-shell {
  background: #1a0533; color: #ffe14a; border: 3px solid #ff2e97;
  border-radius: 16px 16px 22px 22px;
}
body.era-70s .wnu-player .player-shell {
  background: #3d1608; color: #f0c14a; border: 3px solid #8b2e0e;
  box-shadow: 6px 6px 0 #e07a28;
}
body.era-80s .wnu-player .player-shell {
  background: #050010; color: #00e5ff; border: 1px solid #ff2bd6;
  font-family: "Press Start 2P", monospace; font-size: .42rem;
}
body.era-80s .player-title { font-size: .46rem; line-height: 1.35; }
body.era-80s .player-badge, body.era-80s .player-date, body.era-80s .player-artist { font-size: .38rem; }
body.era-90s .wnu-player .player-shell {
  background: #1a1a22; color: #39ff6a; border: 2px solid #888;
  border-radius: 2px; box-shadow: inset 0 0 0 1px #333;
  font-family: Tahoma, "DM Sans", sans-serif;
}
body.era-2000s .wnu-player .player-shell {
  background: linear-gradient(180deg,#fff,#e8f2fa);
  color: #143a66; border: 1px solid #9ad4ff; border-radius: 22px;
}
body.era-2010s .wnu-player .player-shell {
  background: #fff; color: #3a2420; border: 1px solid #e3c9ba;
  box-shadow: 0 8px 24px rgba(0,0,0,.08); border-radius: 10px;
}
body.era-2020s .wnu-player .player-shell {
  background: rgba(20,20,32,.72); color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(14px); border-radius: 999px;
  padding: .65rem .9rem;
}

.back-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 88;
  width: 48px; height: 48px;
  border: 0; cursor: pointer;
  border-radius: 50%;
  background: #1c1714; color: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  font-size: 1.2rem;
  opacity: 0; pointer-events: none;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease;
}
.back-to-top.is-on { opacity: 1; pointer-events: auto; transform: none; }
.back-to-top.is-launching { transform: translateY(-30px) scale(1.08); }
body.era-home .back-to-top { background: #f6efe4; color: #c41e3a; border: 1px dashed #c41e3a; }
body.era-50s .back-to-top { background: #c41e3a; color: #f2d39b; box-shadow: 0 0 0 2px #c0c4cc; }
body.era-60s .back-to-top { background: #ffe14a; color: #1a0533; border: 2px solid #ff2e97; }
body.era-70s .back-to-top { background: #e07a28; color: #fff4d6; box-shadow: 4px 4px 0 #8b2e0e; border-radius: 8px; }
body.era-80s .back-to-top { background: #050010; color: #00e5ff; border: 1px solid #ff2bd6; box-shadow: 0 0 12px #ff2bd6; }
body.era-90s .back-to-top { background: #c0c0c0; color: #000; border: 2px outset #fff; border-radius: 0; font-family: Tahoma, sans-serif; }
body.era-2000s .back-to-top { background: radial-gradient(circle at 35% 30%, #fff, #7ec8ff 55%, #2b8adf); color: #143a66; }
body.era-2010s .back-to-top { background: #fff; color: #3a2420; border: 1px solid #e3c9ba; }
body.era-2020s .back-to-top { background: rgba(20,20,32,.75); color: #fff; border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(12px); }

.music-credits { margin: 2rem auto 0; max-width: 48rem; padding: 0 1.2rem 2rem; }
.music-credits h2 { margin-bottom: .4rem; }
.music-credits h3 { margin: 1.1rem 0 .35rem; }
.music-credits ul { padding-left: 1.2rem; }

@media (prefers-reduced-motion: reduce) {
  .wnu-player.is-playing .player-reel i { animation: none; }
  .back-to-top { transition: none; }
}
@media (max-width: 720px) {
  .wnu-player { left: .55rem; bottom: .55rem; }
  .back-to-top { right: .55rem; bottom: .55rem; width: 44px; height: 44px; }
}


/* ========== V12: caret, draw hint, player, contrast, extras, games, lang ========== */
.draw-trail {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  width: 100%; height: 100%;
}
.draw-hint {
  position: fixed; left: 50%; bottom: 6.5rem; transform: translateX(-50%);
  z-index: 90; display: flex; align-items: center; gap: .4rem;
  padding: .4rem .7rem; border-radius: 999px;
  background: #1c1714; color: #fff8e8; font-size: .86rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
}
.draw-hint-x { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 1.1rem; }
body.era-80s .draw-hint { background: #050010; color: #00e5ff; border: 1px solid #ff2bd6; }
body.era-60s .draw-hint { background: #1a0533; color: #ffe14a; }
body.era-50s .draw-hint { background: #c41e3a; color: #fff8e8; }
body.is-doodling, body.is-doodling * { user-select: none !important; }

/* compact collapsible player */
.wnu-player { width: auto; max-width: min(220px, calc(100vw - 5.2rem)); }
.player-fab {
  width: 54px; height: 54px; border: 0; cursor: pointer; border-radius: 50%;
  background: #1c1714; color: #fff; box-shadow: 0 8px 18px rgba(0,0,0,.25);
  position: relative;
}
.player-fab-art { display: block; width: 100%; height: 100%; border-radius: inherit; }
.wnu-player .player-pop { display: none; margin-top: .4rem; }
.wnu-player.is-open .player-pop { display: block; }
.wnu-player .player-shell { padding: .45rem .55rem .4rem; }
.player-min { background: transparent; border: 0; color: inherit; cursor: pointer; margin-left: .15rem; }
.player-title { font-size: .8rem; }
.player-date { font-size: .64rem; }
body.era-home .player-fab { background: #f6efe4; border: 1px dashed #c41e3a; border-radius: 8px; }
body.era-home .player-fab-art { background: repeating-linear-gradient(#f6efe4, #f6efe4 10px, #e7d9c6 11px); }
body.era-50s .player-fab, body.era-50s .wnu-player .player-shell {
  background: radial-gradient(120% 80% at 50% 0%, #f2d39b 0 28%, #c41e3a 29% 100%);
  color: #fff8e8; border: 3px solid #c0c4cc; border-radius: 18px 18px 10px 10px;
}
body.era-50s .player-fab { border-radius: 16px 16px 8px 8px; }
body.era-60s .player-fab, body.era-60s .wnu-player .player-shell {
  background: linear-gradient(90deg, #5a2a14 0 12px, #c48a3a 12px 14px, #8b5a2a 14px);
  color: #ffe14a; border: 3px solid #3a1608; border-radius: 10px;
}
body.era-70s .player-fab, body.era-70s .wnu-player .player-shell {
  background: linear-gradient(#6b3a14, #3d1608); color: #fff4d6;
  border: 3px solid #8b2e0e; box-shadow: 4px 4px 0 #e07a28;
}
body.era-80s .player-fab { background: #2a2a2a; border: 2px solid #888; border-radius: 8px; box-shadow: 0 0 0 3px #ff7a18; }
body.era-80s .player-fab-art { background: linear-gradient(#d0d0d0, #777); border-radius: 4px; }
body.era-80s .wnu-player .player-shell { background: #1a1a1a; color: #f4f0e8; border: 2px solid #888; }
body.era-80s .player-fab::before, body.era-80s .player-fab::after {
  content: ""; position: absolute; width: 16px; height: 22px; border: 4px solid #ff7a18;
  border-radius: 50%; top: -10px;
}
body.era-80s .player-fab::before { left: -10px; }
body.era-80s .player-fab::after { right: -10px; }
body.era-90s .player-fab, body.era-90s .wnu-player .player-shell {
  background: #1a1a22; color: #39ff6a; border: 2px outset #666; border-radius: 2px;
  font-family: Tahoma, sans-serif;
}
body.era-2000s .player-fab { background: linear-gradient(#fff,#e8e8e8); border: 1px solid #bbb; color: #143a66; }
body.era-2000s .player-fab-art {
  background: radial-gradient(circle at 50% 50%, #fff 0 8px, #d0d5da 9px 16px, #fff 17px 22px);
}
body.era-2000s .wnu-player .player-shell { background: linear-gradient(#fff,#e8f2fa); color: #143a66; border-radius: 18px; }
body.era-2010s .player-fab, body.era-2010s .wnu-player .player-shell {
  background: #fff6f0; color: #3a2420; border: 1px solid #e3c9ba; border-radius: 12px;
}
body.era-2020s .player-fab { background: rgba(20,20,32,.72); color: #fff; border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(12px); }
body.era-2020s .wnu-player .player-shell {
  background: rgba(20,20,32,.72); color: #fff; border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(14px); border-radius: 22px;
}

/* contrast: homepage chips */
body.era-home .card .tag, body.era-home .card .cta {
  background-image: none !important; opacity: 1 !important;
}
body.era-home .card-60s .tag { background: #ffe14a; color: #1a0533; box-shadow: 0 0 0 3px #ffe14a; }
body.era-home .card-60s .cta { background: #1a0533; color: #ffe14a; box-shadow: 0 0 0 3px #1a0533; }
body.era-home .card-70s .tag { background: #fff4d6; color: #3d1608; box-shadow: 0 0 0 3px #fff4d6; }
body.era-home .card-70s .cta { background: #3d1608; color: #fff4d6; box-shadow: 0 0 0 3px #3d1608; }
body.era-home .card-80s .tag { background: #00e5ff; color: #14022a; box-shadow: 0 0 0 3px #00e5ff; }
body.era-home .card-80s .cta { background: #14022a; color: #00e5ff; box-shadow: 0 0 0 3px #14022a; }
body.era-home .card-90s .tag, body.era-home .card-90s .cta { background: #5c0a3a; color: #fff; box-shadow: 0 0 0 3px #5c0a3a; }
body.era-home .card-00s .tag, body.era-home .card-00s .cta { background: #0a3a66; color: #fff; box-shadow: 0 0 0 3px #0a3a66; }

body.era-60s .groovy-badge { background: #ffe14a; color: #1a0533; box-shadow: 3px 3px 0 #1a0533; }
body.era-60s .buy { background: #ffe14a; color: #1a0533; }

body.era-70s .product { background: #fff8e4 !important; color: #2a1608; }
body.era-70s .product h3, body.era-70s .product .blurb, body.era-70s .product .price { color: #2a1608 !important; }
body.era-70s .product .meta { color: #3d1608 !important; }
body.era-70s .buy { background: #5c1808 !important; color: #fff4d6 !important; }

body.era-50s .site-footer, body.era-50s .site-footer p { background: #f7efe4; color: #1a1a1a; }
body.era-50s .site-footer { max-width: none; width: 100%; box-sizing: border-box; }
body.era-50s .site-footer a { color: #8b1024; }
body.era-80s .site-footer, body.era-80s .site-footer p { background: #0a0120; color: #ffe9ff; }
body.era-80s .site-footer { max-width: none; width: 100%; box-sizing: border-box; }
body.era-80s .site-footer a { color: #7af0ff; }

/* extras */
.tm-panel { max-width: var(--max, 1100px); margin: 1.2rem auto; padding: 1rem 1.2rem; }
.tm-console { display: grid; gap: 1.2rem; }
@media (min-width: 800px) { .tm-console { grid-template-columns: 1.2fr .8fr; } }
.tm-track { position: relative; height: 48px; background: #1c1714; border-radius: 999px; margin: .8rem 0; cursor: pointer; }
.tm-handle { position: absolute; top: 6px; width: 36px; height: 36px; margin-left: -18px; border-radius: 50%; background: #c41e3a; box-shadow: 0 2px 0 #111; }
.tm-notches { display: flex; justify-content: space-between; font-size: .64rem; padding: 0 .2rem; color: inherit; }
.capsule-form label, .birth-decade label { display: block; margin: .45rem 0; }
.capsule-form textarea, .capsule-form input, .birth-decade input {
  display: block; width: 100%; max-width: 28rem; margin-top: .2rem; padding: .4rem .5rem;
}
.teen-room { max-width: var(--max, 1100px); margin: 1.4rem auto; padding: 0 1.2rem; }
.room-stage { position: relative; border-radius: 16px; overflow: hidden; background: var(--wall); }
.room-stage svg { width: 100%; height: auto; display: block; }
.room-hot {
  position: absolute; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid #fff; background: rgba(255,255,255,.35); cursor: pointer;
}
.room-find { margin-top: .6rem; padding: .5rem .7rem; background: rgba(0,0,0,.06); border-radius: 8px; }
.product .product-media.can-age { position: relative; }
.product:hover .product-media.can-age { filter: sepia(.35) contrast(1.12) saturate(.85); }
.product:hover .product-media.can-age::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, transparent 0 3px, rgba(80,50,20,.08) 3px 4px);
}
@media (prefers-reduced-motion: reduce) {
  .product:hover .product-media.can-age { transition: none; }
}
.wnu-modal, .game-modal {
  position: fixed; inset: 0; z-index: 220; background: rgba(0,0,0,.45);
  display: grid; place-items: center; padding: 1rem;
}
.wnu-modal[hidden], .game-modal[hidden] { display: none; }
.wnu-modal-card, .game-cabinet {
  background: #fff8e8; color: #1a1a1a; padding: 1rem; border-radius: 12px;
  max-width: 26rem; width: min(92vw, 26rem); max-height: 90vh; overflow: auto;
}
.arcade-btn { margin-top: 0; }
.game-cabinet { max-width: 400px; background: #1a1a1a; color: #fff; padding: .75rem; }
.game-cabinet[data-era="50s"] { background: #3a1414; border: 6px solid #c0c4cc; }
.game-cabinet[data-era="60s"] { background: #1a0533; border: 6px solid #ffe14a; }
.game-cabinet[data-era="70s"] { background: #3d1608; border: 6px solid #e07a28; }
.game-cabinet[data-era="80s"] { background: #050010; border: 4px solid #ff2bd6; }
.game-cabinet[data-era="90s"] { background: #100018; border: 4px outset #666; }
.game-cabinet[data-era="2000s"] { background: #e8f6ff; color: #143a66; border: 4px solid #2b8adf; }
.game-cabinet[data-era="2010s"] { background: #fff6f0; color: #3a2420; }
.game-cabinet[data-era="2020s"] { background: #12101c; border: 1px solid rgba(255,255,255,.2); }
.game-canvas { width: 100%; height: auto; background: #000; display: block; }
.game-top, .game-hud { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin: .35rem 0; }
.game-start { text-align: center; margin-top: .4rem; }
#arcade-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); max-width: var(--max,1100px); margin: 1rem auto; padding: 0 1.2rem; }
.arcade-card { text-align: left; padding: 1rem; cursor: pointer; border: 2px solid currentColor; background: transparent; color: inherit; display: grid; gap: .35rem; }
@media (prefers-reduced-motion: reduce) {
  .draw-trail { display: none !important; }
  .wnu-player.is-playing .player-reel i { animation: none; }
}


/* V12 contrast follow-up */
.tm-notches { color: #f6efe4; font-weight: 700; font-size: .72rem; }
.tm-notches span { color: #f6efe4; text-shadow: 0 1px 0 #000; }
body.era-home .site-footer,
body.era-home .site-footer p,
body.era-home .site-footer a {
  color: #2a2420 !important;
}
body.era-home .site-footer a { text-decoration: underline; }
body.era-50s .site-footer,
body.era-50s .site-footer p,
body.era-50s .site-footer a {
  background: #f7efe4 !important;
  color: #1a1a1a !important;
  isolation: isolate;
  position: relative;
  z-index: 6;
}
body.era-50s .site-footer a { color: #8b1024 !important; }
body.era-80s .site-footer,
body.era-80s .site-footer p {
  background: #0a0120 !important;
  color: #ffe9ff !important;
  isolation: isolate;
  position: relative;
  z-index: 6;
}
body.era-80s .site-footer a { color: #7af0ff !important; }
body.era-home .card-60s .tag { background: #ffe14a !important; color: #1a0533 !important; }
body.era-home .card-60s .cta { background: #1a0533 !important; color: #ffe14a !important; }
body.era-home .card-70s .tag { background: #fff4d6 !important; color: #3d1608 !important; }
body.era-home .card-70s .cta { background: #3d1608 !important; color: #fff4d6 !important; }
body.era-home .card-80s .tag { background: #00e5ff !important; color: #14022a !important; }
body.era-home .card-80s .cta { background: #14022a !important; color: #00e5ff !important; }
body.era-home .card-90s .tag,
body.era-home .card-90s .cta { background: #5c0a3a !important; color: #fff !important; }
body.era-home .card-00s .tag,
body.era-home .card-00s .cta { background: #0a3a66 !important; color: #fff !important; }

body { isolation: isolate; }
body.era-home .site-footer,
body.era-home .site-footer p { background: #f6efe4 !important; color: #2a2420 !important; }


body.era-home .site-footer {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  isolation: isolate;
  position: relative;
  z-index: 6;
}


body.era-home .card-20s .cta { background: #3d208c !important; color: #fff !important; }

/* ========== V13: hero spacing, pages, quiz, manual ========== */
.hero h1 { margin: 0 0 2.1rem; line-height: 1.28; }
.hero-lede {
  max-width: 38rem;
  margin: 1.75rem auto 0;
  font-size: 1.14rem;
  line-height: 1.8;
  letter-spacing: 0.01em;
}
.hero-close {
  margin: 1.35rem auto 0;
  max-width: 38rem;
  font-family: "Caveat", cursive;
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  line-height: 1.35;
  color: var(--pink, #c41e3a);
}
.player-artist { display: none !important; }

.footer-links { display: flex; flex-wrap: wrap; gap: .35rem .7rem; max-width: 52rem; }
.footer-links a { text-underline-offset: 3px; }

.site-page { max-width: var(--max, 1100px); margin: 0 auto; padding: 1.5rem 1.4rem 4rem; }
.site-page h1 { font-family: "Poppins", sans-serif; font-weight: 800; letter-spacing: -.03em; margin: 0 0 1rem; }
.site-page .lede { font-size: 1.12rem; line-height: 1.7; max-width: 40rem; margin: 0 0 2rem; color: #3a342e; }
.draft-banner {
  background: #fff4d6; color: #3d1608; border: 2px dashed #c41e3a;
  padding: .85rem 1rem; margin: 0 0 1.6rem; font-weight: 600;
}
.lookbook-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.look-card {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 260px; padding: 1.1rem; text-decoration: none; color: inherit;
  border-radius: 18px; overflow: hidden; position: relative;
}
.look-card strong { font-size: 1.4rem; }
.look-card span { display: block; margin-top: .4rem; line-height: 1.45; font-size: .92rem; }
.look-50s { background: linear-gradient(160deg, #f7efe4, #c41e3a 80%); color: #fff8e8; }
.look-60s { background: linear-gradient(160deg, #ffe14a, #ff2e97 70%, #1a0533); color: #fff4ff; }
.look-70s { background: linear-gradient(160deg, #f0c14a, #8b2e0e); color: #fff4d6; }
.look-80s { background: linear-gradient(160deg, #00e5ff, #ff2bd6 60%, #14022a); color: #eafaff; }
.look-90s { background: linear-gradient(160deg, #ffe033, #5c0a3a); color: #fff; }
.look-2000s { background: linear-gradient(160deg, #b5ddf5, #0a3a66); color: #fff; }
.look-2010s { background: linear-gradient(160deg, #f6e4cf, #e57a90); color: #3a2824; }
.look-2020s { background: linear-gradient(160deg, #c9b8ff, #14141f); color: #f6f3ff; }

.journal-list { display: grid; gap: 1.1rem; }
.journal-tease {
  display: block; padding: 1.1rem 1.2rem; text-decoration: none; color: inherit;
  border: 1px solid #e7d9c6; background: #fffaf2; border-radius: 14px;
}
.journal-tease:hover { border-color: #c41e3a; }
.journal-tease time { font-size: .78rem; color: #6b6560; }
.article-body { max-width: 40rem; }
.article-body p { line-height: 1.75; margin: 0 0 1rem; color: #3a342e; }

.quiz-wrap { max-width: 40rem; }
.quiz-q { margin: 0 0 1rem; font-size: 1.25rem; }
.quiz-choices { display: grid; gap: .65rem; }
.quiz-choice {
  text-align: left; padding: .85rem 1rem; border-radius: 12px; cursor: pointer;
  border: 2px solid #d9cfc0; background: #fffaf2; color: #2a2420; font: inherit;
}
.quiz-choice:hover, .quiz-choice:focus { border-color: #c41e3a; }
.quiz-progress { font-size: .86rem; color: #6b6560; margin-bottom: .7rem; }
.quiz-result h1 { margin-bottom: .6rem; }
.share-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }

.memory-disclaimer {
  background: #f6efe4; border: 2px solid #c41e3a; padding: .8rem 1rem; margin: 0 0 1.4rem;
}
.memory-examples { display: grid; gap: 1rem; margin: 0 0 2rem; }
.memory-example {
  border: 1px dashed #b8a890; padding: 1rem; background: #fffaf2; border-radius: 12px;
}
.example-tag {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; background: #ffe14a; color: #1a0533; padding: .2rem .5rem; border-radius: 999px;
}
.memory-form label { display: grid; gap: .35rem; margin: 0 0 1rem; font-weight: 600; }
.memory-form textarea { width: 100%; min-height: 7rem; font: inherit; padding: .6rem; }
.memory-status { margin-top: 1rem; font-weight: 600; }

.tv-set {
  max-width: 520px; margin: 1rem auto 2rem; padding: 1.1rem 1.1rem 1.6rem;
  background: #1a1a1d; border-radius: 22px 22px 16px 16px;
  box-shadow: inset 0 0 0 6px #3a3a40, 0 16px 30px rgba(0,0,0,.25);
}
.tv-screen {
  background: radial-gradient(circle at 30% 20%, #2a4030, #0b150f 70%);
  color: #7dff9a; min-height: 220px; padding: 1.4rem 1rem; text-align: center;
  font-family: "Press Start 2P", monospace; border-radius: 8px;
}
.tv-label { font-size: .62rem; letter-spacing: .12em; margin: 0 0 1rem; }
.tv-digits { display: flex; justify-content: center; gap: .55rem; margin: 0 0 1rem; }
.tv-digits span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 3rem; padding: .45rem .35rem; background: #041208; font-size: 1.1rem;
}
.tv-note { font-family: "DM Sans", sans-serif; color: #d5ead9; font-size: .95rem; line-height: 1.5; }
.tv-dial { display: flex; justify-content: center; gap: 1.2rem; margin-top: .8rem; }
.tv-dial i { width: 28px; height: 28px; border-radius: 50%; background: #5a5a62; display: block; }

.manual {
  background: #f3efe4; border: 2px solid #2a2420; padding: 1.4rem 1.3rem 2rem;
  box-shadow: 6px 6px 0 rgba(0,0,0,.08);
}
.manual h1 { font-family: "Courier New", Courier, monospace; text-transform: uppercase; letter-spacing: .04em; }
.manual h2 { font-family: "Courier New", Courier, monospace; font-size: 1.05rem; margin: 1.6rem 0 .5rem; }
.manual dl { margin: 0; }
.manual dt { font-weight: 800; margin-top: 1rem; }
.manual dd { margin: .35rem 0 0; line-height: 1.6; }
.size-table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .95rem; }
.size-table th, .size-table td { border: 1px solid #2a2420; padding: .45rem .55rem; text-align: left; }
.size-table th { background: #e7d9c6; }

@media (max-width: 640px) {
  .tv-digits span { min-width: 2.2rem; font-size: .8rem; }
  .look-card { min-height: 210px; }
}

/* ========== V13 contrast plates ========== */
body.era-home .tm-notches span {
  background: #1c1714 !important;
  color: #fff8e8 !important;
  text-shadow: none;
  padding: .12rem .3rem;
  border-radius: 4px;
}
body.era-home .tm-console p,
body.era-home .tm-year-readout,
body.era-home .capsule-form p,
body.era-home .capsule-form label,
body.era-home .birth-decade p,
body.era-home .birth-decade label {
  color: #2a2420 !important;
}
body.era-home .buy,
body.era-home button.buy,
body.era-home a.buy,
body.era-home .quiz-choice {
  background: #1c1714 !important;
  color: #fff8e8 !important;
  border: 2px solid #1c1714;
}
.journal-tease { background: #fffaf2 !important; color: #1c1714 !important; }
.journal-tease time, .journal-tease p, .journal-tease h2 { color: #1c1714 !important; }
.manual, .manual p, .manual dt, .manual dd, .manual h1, .manual h2, .manual li {
  color: #1c1714 !important;
}
.manual { background: #f3efe4 !important; }
.size-table th, .size-table td { color: #1c1714 !important; background: #f3efe4 !important; }
.size-table th { background: #e4d3b8 !important; }
.arcade-card { background: #fffaf2 !important; color: #1c1714 !important; border-color: #1c1714 !important; }
.arcade-card strong, .arcade-card span, .arcade-card em { color: #1c1714 !important; }
.arcade-btn {
  background: #1c1714;
  color: #fff8e8;
  border: 2px solid #1c1714;
  padding: .45rem .75rem;
  font: inherit;
  cursor: pointer;
  margin: .35rem 1.2rem;
}
body.era-50s .arcade-btn { background: #c41e3a; color: #fff8e8; border-color: #c41e3a; }
body.era-60s .arcade-btn { background: #ffe14a; color: #1a0533; border-color: #1a0533; }
body.era-70s .arcade-btn { background: #3d1608; color: #fff4d6; border-color: #3d1608; }
body.era-80s .arcade-btn { background: #00e5ff; color: #14022a; border-color: #00e5ff; }
body.era-90s .arcade-btn { background: #5c0a3a; color: #fff; border-color: #5c0a3a; }
body.era-2000s .arcade-btn { background: #0a3a66; color: #fff; border-color: #0a3a66; }
body.era-2010s .arcade-btn { background: #5a3830; color: #fff8f2; border-color: #5a3830; }
body.era-2020s .arcade-btn { background: #3d208c; color: #fff; border-color: #3d208c; }

.neon-open { background: #1a1a1a !important; }
.neon-open span { color: #ffd4dc !important; }
.specials-board { background: #141414 !important; color: #ffe7b8 !important; }
.era-50s .collection-kicker { color: #8b1024 !important; }

.drag-sticker { background: #ffe14a !important; color: #1a0a10 !important; }
.drag-sticker:nth-child(2) { background: #ffd6ea !important; color: #3a1028 !important; }
.drag-sticker:nth-child(3) { background: #0f4a44 !important; color: #e9fffb !important; }
.drag-sticker:nth-child(4) { background: #3d208c !important; color: #ffffff !important; }

.music-credits {
  background: #f6efe4 !important;
  color: #2a2420 !important;
  isolation: isolate;
  position: relative;
  z-index: 6;
  padding: 1rem 1.2rem 2rem;
}
.music-credits a { color: #8b1024 !important; text-decoration: underline; }
.music-credits p, .music-credits li { color: #2a2420 !important; }

.memory-disclaimer, .memory-example, .memory-example blockquote, .memory-form label {
  color: #1c1714 !important;
}
.memory-disclaimer { background: #fff6e8 !important; }
.story.is-here .ring span { color: #fff8f2 !important; }

body.era-60s .groovy-badge { background: #ffe14a !important; color: #1a0533 !important; }
body.era-60s .product .meta,
body.era-60s .product .blurb,
body.era-60s .product h3,
body.era-60s .collection-kicker,
body.era-60s .era-intro p {
  color: #1a0533 !important;
}
body.era-60s .product .meta,
body.era-60s .product .blurb,
body.era-60s .product h3 { background: rgba(255,225,74,.92); }
body.era-60s .happenings { color: #1a0533 !important; background: #ffe14a !important; }

body.era-70s .era-intro p,
body.era-70s .collection-kicker,
body.era-70s .product h3,
body.era-70s .product .meta,
body.era-70s .product .blurb {
  color: #fff4d6 !important;
}
body.era-70s .era-intro p,
body.era-70s .collection-kicker {
  background: #3d1608;
  padding: .35rem .55rem;
  display: inline-block;
}
body.era-70s .product { background: #5c1808; }
body.era-70s .product h3,
body.era-70s .product .meta,
body.era-70s .product .blurb { background: #5c1808; }

.site-page .lede, .article-body p { color: #2a2420 !important; }
.manual h2 { color: #1c1714 !important; }

/* ========== V13b: survive page-color wash, kill neon glow sample ========== */
.arcade-btn, .quiz-choice, button.buy, a.buy, .drag-sticker {
  -webkit-appearance: none !important;
  appearance: none !important;
  isolation: isolate;
  mix-blend-mode: normal !important;
  text-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  font-weight: 700;
}
.arcade-btn {
  background-color: #1a140f !important;
  color: #fff8e8 !important;
  border: 2px solid #1a140f !important;
}
body.era-50s .arcade-btn {
  background-color: #5a0e1c !important;
  color: #fff8e8 !important;
  border-color: #5a0e1c !important;
}
body.era-60s .arcade-btn {
  background-color: #ffe14a !important;
  color: #140228 !important;
  border-color: #140228 !important;
}
body.era-70s .arcade-btn {
  background-color: #2a0e06 !important;
  color: #fff4d6 !important;
  border-color: #2a0e06 !important;
}
body.era-80s .arcade-btn {
  background-color: #00f6ff !important;
  color: #0a0014 !important;
  border-color: #00f6ff !important;
}
body.era-90s .arcade-btn {
  background-color: #3d0626 !important;
  color: #ffffff !important;
  border-color: #3d0626 !important;
}
body.era-2000s .arcade-btn {
  background-color: #062033 !important;
  color: #ffffff !important;
  border-color: #062033 !important;
}
body.era-2010s .arcade-btn {
  background-color: #241410 !important;
  color: #fff8f2 !important;
  border-color: #241410 !important;
}
body.era-2020s .arcade-btn {
  background-color: #1e0f4a !important;
  color: #ffffff !important;
  border-color: #1e0f4a !important;
}
body.era-home .quiz-choice, body.era-home a.buy, body.era-home button.buy {
  background-color: #1a140f !important;
  color: #fff8e8 !important;
}
.neon-open {
  background: #111 !important;
  box-shadow: 0 0 16px rgba(196,30,58,.4), 0 0 0 3px #c41e3a;
}
.neon-open span {
  color: #ffe8ee !important;
  text-shadow: none !important;
  filter: none !important;
  animation: none !important;
}
.era-50s .collection-kicker,
body.era-50s .collection-kicker {
  color: #5a0e1c !important;
  background: #f7efe4 !important;
  display: inline-block;
  padding: .3rem .65rem;
}
body.era-70s .product { background: #fff8e4 !important; color: #2a1608 !important; }
body.era-70s .product .price,
body.era-70s .product h3,
body.era-70s .product .blurb,
body.era-70s .product .meta {
  color: #2a1608 !important;
  background: #fff8e4 !important;
}
body.era-60s .product h3,
body.era-60s .product .meta,
body.era-60s .product .blurb {
  background: #ffe14a !important;
  color: #140228 !important;
}
.drag-sticker { background: #ffe14a !important; color: #140208 !important; }
.drag-sticker:nth-child(2) { background: #ffc6df !important; color: #2a0818 !important; }
.drag-sticker:nth-child(3) { background: #0b3d38 !important; color: #e9fffb !important; }
.drag-sticker:nth-child(4) { background: #2a1468 !important; color: #ffffff !important; }
.card-50s .tag { background: #5a0e1c !important; color: #fff8e8 !important; }

/* ========== V14: submenu contrast follows the PANEL, not the header bar ========== */
body.era-home .nav .menu a,
body.era-home .nav .menu .soon-item,
body.era-home .nav .menu .menu-label {
  color: #1c1714;
}
body.era-home .nav .menu a:hover,
body.era-home .nav .menu a:focus-visible { background: #efe6d8; color: #1c1714; }

body.era-50s .nav .menu a,
body.era-50s .nav .menu .soon-item,
body.era-50s .nav .menu .menu-label { color: #1a1a1a !important; }
body.era-50s .nav .menu a:hover,
body.era-50s .nav .menu a:focus-visible { background: #ead9c4; color: #1a1a1a !important; }

body.era-60s .nav .menu a,
body.era-60s .nav .menu .soon-item,
body.era-60s .nav .menu .menu-label { color: #ffe14a !important; }
body.era-60s .nav .menu a:hover,
body.era-60s .nav .menu a:focus-visible { background: #2a0870; color: #ffe14a !important; }

body.era-70s .nav .menu a,
body.era-70s .nav .menu .soon-item,
body.era-70s .nav .menu .menu-label { color: #3d1608 !important; }
body.era-70s .nav .menu a:hover,
body.era-70s .nav .menu a:focus-visible { background: #e0b85a; color: #3d1608 !important; }

body.era-80s .nav .menu a,
body.era-80s .nav .menu .soon-item,
body.era-80s .nav .menu .menu-label { color: #00e5ff !important; }
body.era-80s .nav .menu a:hover,
body.era-80s .nav .menu a:focus-visible { background: #2a0870; color: #00e5ff !important; }

body.era-90s .nav .menu a,
body.era-90s .nav .menu .soon-item,
body.era-90s .nav .menu .menu-label { color: #ffe033 !important; }
body.era-90s .nav .menu a:hover,
body.era-90s .nav .menu a:focus-visible { background: #3a0050; color: #ffe033 !important; }

body.era-2000s .nav .menu a,
body.era-2000s .nav .menu .soon-item,
body.era-2000s .nav .menu .menu-label { color: #10406a !important; }
body.era-2000s .nav .menu a:hover,
body.era-2000s .nav .menu a:focus-visible { background: #d7ecfb; color: #10406a !important; }

body.era-2010s .nav .menu a,
body.era-2010s .nav .menu .soon-item,
body.era-2010s .nav .menu .menu-label { color: #1c1714 !important; }
body.era-2010s .nav .menu a:hover,
body.era-2010s .nav .menu a:focus-visible { background: #ead9cc; color: #1c1714 !important; }

body.era-2020s .nav .menu a,
body.era-2020s .nav .menu .soon-item,
body.era-2020s .nav .menu .menu-label { color: #f4f0ff !important; }
body.era-2020s .nav .menu a:hover,
body.era-2020s .nav .menu a:focus-visible { background: rgba(255,255,255,.14); color: #f4f0ff !important; }

/* Mobile: 70s (and any vivid) slide-out nav uses the same bright panel as the desktop submenu */
@media (max-width: 720px) {
  body.era-70s .nav a,
  body.era-70s .nav .menu-btn,
  body.era-70s .nav .menu a,
  body.era-70s .nav .menu .menu-label,
  body.era-70s .nav-toggle {
    color: #3d1608 !important;
  }
  body.era-50s .nav .menu a,
  body.era-50s .nav .menu .menu-label { color: #1a1a1a !important; }
  body.era-2000s .nav .menu a,
  body.era-2000s .nav .menu .menu-label { color: #10406a !important; }
  body.era-2010s .nav .menu a,
  body.era-2010s .nav .menu .menu-label { color: #1c1714 !important; }
  body.era-home .nav .menu a,
  body.era-home .nav .menu .menu-label { color: #1c1714 !important; }
}


/* ========== V14: player clearance + title-only ========== */
.wnu-player {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  max-width: min(240px, calc(100vw - 5.5rem));
}
.wnu-player .player-pop {
  margin-top: 0;
  margin-bottom: .45rem;
  max-height: min(62vh, 26rem);
  overflow: auto;
  width: min(240px, calc(100vw - 5.5rem));
}
.player-title {
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.3;
}
.player-meta { min-width: 0; }
.player-artist { display: none !important; }
.site-footer { padding-bottom: 5.5rem; }
@media (max-width: 720px) {
  .wnu-player {
    left: .6rem;
    bottom: .6rem;
    max-width: min(230px, calc(100vw - 5.2rem));
  }
  .wnu-player .player-pop { width: min(230px, calc(100vw - 5.2rem)); }
}


/* ========== V14: redesign layout, widgets, rooms, decor, player icons ========== */
.shop-decades-h {
  grid-column: 1 / -1;
  margin: 0 0 .15rem;
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  line-height: 1.2;
}
.home-teasers { margin: 2.4rem 0 0; }
.home-teasers h2 { font-size: 1.15rem; margin: 0 0 .85rem; }
.tease-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.tease-card {
  display: grid; gap: .3rem;
  padding: .95rem 1rem;
  border: 1px solid var(--line, #e4d9cc);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  background: rgba(255,255,255,.42);
}
.tease-kicker { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; opacity: .72; }
.tease-card strong { font-size: 1.05rem; }
.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(8rem, 1fr));
  gap: 1rem 1.6rem;
}
.footer-nav a { display: block; margin: .22rem 0; }
.footer-k { font-weight: 700; margin: 0 0 .35rem; }
.shop-filters {
  display: flex; flex-wrap: wrap; gap: .45rem;
  max-width: var(--max, 1100px);
  margin: .15rem auto .9rem;
  padding: 0 1.2rem;
}
.shop-filter {
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: .32rem .85rem;
  cursor: pointer;
  font: inherit;
  font-size: .86rem;
}
.shop-filter.is-on { background: #1c1714; color: #fff8e8; border-color: #1c1714; }
body.era-60s .shop-filter.is-on { background: #ffe14a; color: #1a0533; border-color: #ffe14a; }
body.era-80s .shop-filter.is-on { background: #00e5ff; color: #14022a; border-color: #00e5ff; }
body.era-90s .shop-filter.is-on { background: #ffe033; color: #240033; border-color: #ffe033; }
body.era-2020s .shop-filter.is-on { background: #f4f0ff; color: #1a1630; border-color: #f4f0ff; }
.era-tools {
  display: flex; flex-wrap: wrap; gap: .55rem .7rem; align-items: center;
  max-width: var(--max, 1100px);
  margin: 1.05rem auto 0;
  padding: 0 1.2rem;
}
.era-tools .arcade-btn { margin: 0; }
.util-dock {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 89;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: .5rem;
}
.util-dock .back-to-top {
  position: static;
  right: auto;
  bottom: auto;
}
.draw-hint { bottom: 7.2rem; }

/* Teen rooms */
.teen-room { max-width: var(--max, 1100px); margin: 1.8rem auto 0; padding: 0 1.2rem 1rem; }
.teen-room h2 { font-size: 1.15rem; margin: 0 0 .65rem; }
.room-stage { border: 1px solid rgba(0,0,0,.08); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.room-hot { width: 28px; height: 28px; box-shadow: 0 0 0 2px rgba(0,0,0,.12); }
.room-hot:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* 2000s decorative chat */
.era-chat {
  margin: 2rem 0 0;
  max-width: 36rem;
  border: 1px solid #7eb6d8;
  border-radius: 10px;
  background: #f4fbff;
  box-shadow: 4px 4px 0 #9ec8e0;
  font-family: Tahoma, "Trebuchet MS", sans-serif;
  font-size: .86rem;
  color: #143a66;
}
.era-chat-bar {
  display: flex; justify-content: space-between; align-items: center; gap: .6rem;
  padding: .45rem .75rem;
  background: linear-gradient(180deg, #dff2fc, #b7e0f6);
  color: #0c3354;
  border-radius: 9px 9px 0 0;
  font-weight: 700;
}
.era-chat-note { font-weight: 500; font-size: .72rem; opacity: .8; }
.era-chat-body { display: grid; grid-template-columns: 8.4rem 1fr; min-height: 12rem; max-height: 16rem; }
.era-chat-friends {
  margin: 0; padding: .55rem .5rem;
  background: #e7f4fc;
  border-right: 1px solid #c5e2f2;
  list-style: none;
  font-size: .75rem;
  overflow: auto;
}
.era-chat-friends li { display: flex; align-items: center; gap: .35rem; margin: .28rem 0; }
.era-chat-friends .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #2fad3e;
  box-shadow: 0 0 6px #3ad14b;
}
.era-chat-log { margin: 0; padding: .55rem .75rem; list-style: none; overflow: auto; }
.era-chat-log li { margin: 0 0 .42rem; line-height: 1.35; }
.era-chat-log b { margin-right: .35rem; }
.era-chat-log .u1 { color: #0b4f8a; }
.era-chat-log .u2 { color: #7a2070; }
.era-chat-log .u3 { color: #0b5a3a; }
.era-chat-log .u4 { color: #8a3a08; }
.era-chat-log .u5 { color: #143a66; }
.era-chat-log .u6 { color: #6a1a4a; }
.era-chat-log .u7 { color: #1a4a6a; }

/* 2010s early photo roll */
.era-feed { margin: 2rem 0 .4rem; }
.era-feed-kicker {
  font-family: "Josefin Sans", "Raleway", sans-serif;
  letter-spacing: .12em;
  text-transform: lowercase;
  font-size: .95rem;
  margin: 0 0 .8rem;
}
.era-feed-kicker span { display: block; letter-spacing: .04em; text-transform: none; font-size: .78rem; opacity: .7; margin-top: .2rem; }
.era-feed-row {
  display: flex; gap: 1rem;
  overflow-x: auto;
  padding: .2rem .1rem 1rem;
  scroll-snap-type: x mandatory;
}
.era-polaroid {
  flex: 0 0 176px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid #e6ddd6;
  box-shadow: 0 8px 20px rgba(60,40,30,.08);
  padding: 10px 10px 8px;
  color: #1c1714;
}
.era-feed-user { display: flex; align-items: center; gap: .4rem; font-size: .74rem; margin: 0 0 .45rem; font-weight: 600; }
.era-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: #f0d3b4; color: #3a2420; font-size: .68rem;
}
.era-polaroid-frame { position: relative; aspect-ratio: 1; overflow: hidden; background: #ddd; border: 8px solid #fff; box-shadow: inset 0 0 0 1px #ece6df; }
.era-polaroid-frame svg { width: 100%; height: 100%; display: block; }
.era-polaroid.filter-warm .era-polaroid-frame svg { filter: sepia(.28) saturate(1.32) contrast(.92) brightness(1.08) hue-rotate(-8deg); }
.era-polaroid.filter-cross .era-polaroid-frame { box-shadow: inset 0 0 42px rgba(20,10,0,.42); }
.era-polaroid.filter-cross .era-polaroid-frame svg { filter: contrast(1.35) saturate(1.18) sepia(.16) hue-rotate(-12deg); }
.era-polaroid.filter-fade .era-polaroid-frame svg { filter: contrast(1.08) saturate(.72) brightness(1.1) sepia(.14); }
.era-feed-tools { display: flex; gap: .4rem; padding: .45rem 0 .15rem; }
.era-heart, .era-skbtn {
  width: 32px; height: 28px; border-radius: 6px;
  background: linear-gradient(180deg, #fff 0%, #ececec 48%, #d0d0d0 100%);
  border: 1px solid #b8b8b8;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.12);
  color: #666;
  display: inline-grid; place-items: center;
  cursor: pointer; font-size: .95rem;
}
.era-heart.is-on { color: #c41e3a; }
.era-feed-caption { margin: .15rem 0 0; font-size: .78rem; color: #3a2a24; }
.era-feed-when { margin: .1rem 0 0; font-size: .68rem; color: #4a382e; }

/* Detailed era player icons */
.player-fab-art { position: relative; overflow: hidden; }
.player-fab-art::before, .player-fab-art::after { position: absolute; content: ""; pointer-events: none; }
body.era-home .player-fab-art::before {
  inset: 10px 8px 12px;
  background: repeating-linear-gradient(#f6efe4, #f6efe4 5px, #e7d9c6 6px);
  border: 1px dashed #c41e3a; border-radius: 3px;
}
body.era-50s .player-fab-art {
  background:
    radial-gradient(circle at 50% 30%, #f2d39b 0 7px, transparent 8px),
    linear-gradient(#2c2c32, #141416);
  border-radius: 16px 16px 8px 8px;
}
body.era-50s .player-fab-art::after {
  left: 10px; right: 10px; bottom: 8px; height: 10px;
  background: repeating-linear-gradient(90deg, #c41e3a 0 6px, #f2d39b 6px 8px);
}
body.era-60s .player-fab-art {
  background: linear-gradient(180deg, #c48a3a, #8b5a2a);
  border-radius: 8px;
}
body.era-60s .player-fab-art::before {
  width: 4px; height: 16px; left: 50%; top: 4px; margin-left: -2px;
  background: #3a1608; border-radius: 2px;
}
body.era-60s .player-fab-art::after {
  width: 22px; height: 22px; left: 50%; top: 20px; margin-left: -11px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #5a2a14 0 2px, #c48a3a 3px 5px);
  box-shadow: inset 0 0 0 2px #3a1608;
}
body.era-70s .player-fab-art {
  background: radial-gradient(circle at 50% 50%, #1a0a04 0 6px, #3d1608 7px 14px, #f0c14a 15px 16px, #3d1608 17px 22px);
}
body.era-80s .player-fab-art { background: linear-gradient(#d8d8d8, #777); border-radius: 5px; }
body.era-90s .player-fab-art {
  background:
    conic-gradient(#39ff6a, #5c0a3a, #ffe033, #39ff6a);
  border-radius: 50%;
  box-shadow: inset 0 0 0 10px #1a1a22;
}
body.era-2000s .player-fab-art {
  background:
    repeating-conic-gradient(#fff 0 12deg, #c8e4f8 12deg 24deg);
  border-radius: 50%;
  box-shadow: inset 0 0 0 8px #e8e8e8, inset 0 0 0 11px #bbb;
}
body.era-2010s .player-fab-art {
  background: #fff6f0;
  border-radius: 10px;
}
body.era-2010s .player-fab-art::before {
  inset: 10px 14px;
  border: 2px solid #3a2420;
  border-radius: 6px;
}
body.era-2010s .player-fab-art::after {
  width: 8px; height: 8px; left: 50%; bottom: 8px; margin-left: -4px;
  border-radius: 50%; background: #3a2420;
}
body.era-2020s .player-fab-art {
  background: linear-gradient(135deg, #ff7ac8, #7a5cff 50%, #44e0c8);
  border-radius: 16px;
}
body.era-2020s .player-fab-art::after {
  left: 12px; right: 12px; top: 50%; height: 3px; margin-top: -1px;
  background: rgba(255,255,255,.85); border-radius: 2px;
  box-shadow: 0 -6px 0 rgba(255,255,255,.45), 0 6px 0 rgba(255,255,255,.45);
}

@media (max-width: 720px) {
  .tease-grid, .footer-nav { grid-template-columns: 1fr; }
  .era-chat-body { grid-template-columns: 1fr; max-height: none; }
  .era-chat-friends {
    display: flex; flex-wrap: wrap; gap: .3rem .7rem;
    border-right: 0; border-bottom: 1px solid #c5e2f2;
  }
  .util-dock { right: .55rem; bottom: .55rem; }
  .era-feed-row {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    overflow: visible;
    scroll-snap-type: none;
    gap: .9rem;
    padding-bottom: .4rem;
  }
  .era-polaroid { flex: none; width: min(280px, 100%); max-width: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  .era-chat-friends .dot { animation: none; box-shadow: none; }
}


/* ========== Single-line footer, no links ========== */
.site-footer {
  display: block;
  opacity: 1;
  max-width: none;
  width: 100%;
  margin: 3rem 0 0;
  padding: 1.7rem 1.4rem 5.8rem;
  border-top: 1px solid var(--line, #e4d9cc);
  font-size: 0.88rem;
  line-height: 1.55;
  text-align: center;
}
.footer-line {
  max-width: 46rem;
  margin: 0 auto;
  color: inherit;
}

/* Game button sits to the right of each era title */
.era-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.95rem;
  margin: 0 0 0.35rem;
}
.era-title-row > h1 {
  margin: 0;
}
.era-title-row .arcade-btn {
  margin: 0;
  flex: 0 0 auto;
  white-space: nowrap;
  border-radius: 999px;
  padding: 0.42rem 0.95rem;
  font-size: 0.86rem;
  line-height: 1.15;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 0 rgba(0,0,0,.12);
}
.era-title-row .arcade-btn:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}
body.era-50s .era-title-row .arcade-btn {
  border-radius: 999px;
  box-shadow: 3px 3px 0 #1a1a1a;
}
body.era-60s .era-title-row .arcade-btn {
  border-radius: 4px;
  box-shadow: 3px 3px 0 #ff2e97;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.78rem;
}
body.era-70s .era-title-row .arcade-btn {
  border-radius: 2px;
  box-shadow: 4px 4px 0 #f0c14a;
}
body.era-80s .era-title-row .arcade-btn {
  border-radius: 0;
  box-shadow: 0 0 12px rgba(0, 229, 255, .45);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
body.era-90s .era-title-row .arcade-btn {
  border-radius: 0;
  box-shadow: 4px 4px 0 #ffe033;
}
body.era-2000s .era-title-row .arcade-btn {
  border-radius: 10px;
  box-shadow: 0 3px 0 #3b8ec8;
  font-family: "Varela Round", "Trebuchet MS", sans-serif;
}
body.era-2010s .era-title-row .arcade-btn {
  border-radius: 8px;
  box-shadow: none;
  font-weight: 600;
}
body.era-2020s .era-title-row .arcade-btn {
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(61, 32, 140, .35);
}
@media (max-width: 720px) {
  .era-title-row {
    gap: 0.42rem 0.7rem;
  }
  .era-title-row .arcade-btn {
    font-size: 0.8rem;
    padding: 0.36rem 0.75rem;
  }
  .diner-hero .era-title-row,
  .psych-hero .era-title-row,
  .fyp-hero .era-title-row {
    justify-content: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.era-80s .era-title-row .arcade-btn { box-shadow: none; }
}

/* Licensed bedroom photographs + era tooltips */
.teen-room { max-width: var(--max, 1100px); margin: 1.8rem auto 0; padding: 0 1.2rem 1.2rem; }
.teen-room h2 { font-size: 1.15rem; margin: 0 0 .65rem; }
.room-stage { position: relative; border-radius: 16px; overflow: hidden; background: #1a1714; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.room-stage img { width: 100%; height: auto; display: block; }
.room-hot {
  position: absolute; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid #fff; background: rgba(255,255,255,.38); cursor: pointer;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px rgba(0,0,0,.18);
}
.room-hot.is-game { background: rgba(255, 214, 90, .55); border-color: #fff4c4; }
.room-hot:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.room-tip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 14px));
  padding: .32rem .58rem;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  z-index: 4;
  pointer-events: none;
  border-radius: 999px;
  background: #1c1714;
  color: #fff8e8;
  opacity: 0;
  transition: opacity .16s ease;
}
.room-tip.is-on { opacity: 1; }
.room-credit { margin: .55rem 0 0; font-size: .78rem; line-height: 1.45; max-width: 72ch; opacity: .82; }
.room-credit a { color: inherit; text-decoration: underline; }
body.era-50s .room-tip { background: #fff8e8; color: #5a0e1c; box-shadow: 3px 3px 0 #c41e3a; border-radius: 999px; }
body.era-60s .room-tip { background: #ffe14a; color: #1a0533; box-shadow: 3px 3px 0 #ff2e97; border-radius: 4px; }
body.era-70s .room-tip { background: #3d1608; color: #fff4d6; box-shadow: 4px 4px 0 #f0c14a; border-radius: 2px; }
body.era-80s .room-tip { background: #00e5ff; color: #14022a; border-radius: 0; box-shadow: 0 0 10px rgba(0,229,255,.45); text-transform: uppercase; letter-spacing: .04em; }
body.era-90s .room-tip { background: #3d0626; color: #fff; box-shadow: 4px 4px 0 #ffe033; border-radius: 0; }
body.era-2000s .room-tip { background: #062033; color: #fff; border-radius: 10px; box-shadow: 0 3px 0 #3b8ec8; }
body.era-2010s .room-tip { background: #241410; color: #fff8f2; border-radius: 8px; }
body.era-2020s .room-tip { background: #1e0f4a; color: #fff; border-radius: 999px; box-shadow: 0 8px 18px rgba(61,32,140,.35); }
.player-sfx {
  font: inherit;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .03em;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: .18rem .48rem;
  cursor: pointer;
  margin-left: .2rem;
}
.player-sfx.is-on { box-shadow: 0 0 0 2px currentColor; }
@media (prefers-reduced-motion: reduce) {
  .room-tip { transition: none; }
}

/* Lock 60s/70s product text to solid AA pairs */
body.era-60s .groovy-badge {
  background: #ffe14a !important;
  color: #1a0533 !important;
  isolation: isolate;
}
body.era-70s .product,
body.era-70s .product h3,
body.era-70s .product .meta,
body.era-70s .product .blurb,
body.era-70s .product .price {
  background-color: #fff4d6 !important;
  color: #2a1608 !important;
}
body.era-70s .product .meta { color: #3d1608 !important; }

/* ===== V20 =====
   Static timeline, flush announce + footer, centered Decades menu,
   mobile panel nav, clean player icons, no leftover blurbs. */

:root { --footer-safe: 3.15rem; }

html, body { min-height: 100%; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main, .page-main { flex: 1 0 auto; }

/* ---- Sticky top: announcement flush + header flush beneath ---- */
.site-top {
  position: sticky;
  top: 0;
  z-index: 200;
  width: 100%;
  margin: 0;
  padding: 0;
  background: inherit;
}
.announce-bar {
  position: relative !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: block !important;
  box-sizing: border-box;
  overflow: hidden;
  text-align: center;
}
.announce-inner {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box;
}
.announce-20s,
.announce-20s .announce-inner {
  background: #161422 !important;
  color: #f4f0ff !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.2) !important;
  backdrop-filter: none !important;
}
.site-header {
  margin-top: 0 !important;
  padding-top: 0.7rem !important;
  width: 100%;
  max-width: var(--max);
  box-sizing: border-box;
}
body.era-90s .site-header { padding-top: 0.7rem !important; }

/* ---- Decades dropdown: centered under the word ---- */
.has-menu { position: relative; }
.has-menu > .menu-btn { position: relative; }
.menu {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
}
.has-menu.is-open > .menu-btn::after,
.has-menu[open] > .menu-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 0.45rem - 8px);
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-bottom-color: #fff;
  z-index: 171;
  pointer-events: none;
}
body.era-60s .has-menu.is-open > .menu-btn::after,
body.era-60s .has-menu[open] > .menu-btn::after,
body.era-80s .has-menu.is-open > .menu-btn::after,
body.era-80s .has-menu[open] > .menu-btn::after,
body.era-90s .has-menu.is-open > .menu-btn::after,
body.era-90s .has-menu[open] > .menu-btn::after,
body.era-2020s .has-menu.is-open > .menu-btn::after,
body.era-2020s .has-menu[open] > .menu-btn::after {
  border-bottom-color: #1a0533;
}
body.era-90s .has-menu.is-open > .menu-btn::after,
body.era-90s .has-menu[open] > .menu-btn::after { border-bottom-color: #240033; }
body.era-2020s .has-menu.is-open > .menu-btn::after,
body.era-2020s .has-menu[open] > .menu-btn::after { border-bottom-color: #161422; }

/* ---- Hamburger morph ---- */
.nav-toggle-bars {
  display: block;
  width: 22px;
  height: 16px;
  position: relative;
}
.nav-toggle-bars span {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 280ms ease-out, top 280ms ease-out, opacity 200ms ease-out;
}
.nav-toggle-bars span:nth-child(1) { top: 1px; }
.nav-toggle-bars span:nth-child(2) { top: 7px; }
.nav-toggle-bars span:nth-child(3) { top: 13px; }
body.nav-open .nav-toggle-bars span:nth-child(1) {
  top: 7px;
  transform: rotate(45deg);
}
body.nav-open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle-bars span:nth-child(3) {
  top: 7px;
  transform: rotate(-45deg);
}
.nav-toggle { z-index: 220; position: relative; }

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16, 12, 10, .48);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 198;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease-out;
}
body.nav-open .nav-backdrop {
  opacity: 1;
  pointer-events: auto;
}
@media (min-width: 721px) {
  .nav-backdrop { display: none !important; }
}

@media (max-width: 720px) {
  .nav-toggle { display: inline-grid; place-items: center; }
  .nav {
    display: flex !important;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(22rem, 86vw);
    height: 100%;
    height: 100dvh;
    margin: 0;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 5.25rem 1.45rem 2rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    z-index: 205;
    background: #fffaf3;
    color: #1c1714;
    box-shadow: -18px 0 40px rgba(0,0,0,.18);
    transform: translateX(100%);
    transition: transform 280ms ease-out;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    pointer-events: none;
    visibility: hidden;
  }
  body.nav-open .nav {
    transform: translateX(0);
    pointer-events: auto;
    visibility: visible;
  }
  .nav .has-menu { width: 100%; }
  .nav .has-menu > .menu-btn { display: none !important; }
  .nav .has-menu .menu,
  .nav .has-menu.is-open .menu,
  .nav .has-menu[open] .menu {
    display: flex !important;
    flex-direction: column;
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    min-width: 0;
    width: 100%;
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0;
    border-radius: 0;
  }
  .nav .has-menu > .menu-btn::after { display: none !important; }
  .nav .follow-btn { display: none !important; }
  .nav > a,
  .nav .menu a {
    display: block;
    font-size: 1.32rem;
    font-weight: 650;
    line-height: 1.25;
    padding: 0.72rem 0.15rem;
    opacity: 0;
    transform: translateY(8px);
    text-decoration: none;
    color: inherit;
  }
  body.nav-open .nav > a,
  body.nav-open .nav .menu a {
    animation: wnuNavItemIn 360ms ease-out forwards;
  }
  body.nav-open .nav > a:nth-child(1) { animation-delay: 40ms; }
  body.nav-open .nav .menu li:nth-child(1) a { animation-delay: 70ms; }
  body.nav-open .nav .menu li:nth-child(2) a { animation-delay: 100ms; }
  body.nav-open .nav .menu li:nth-child(3) a { animation-delay: 130ms; }
  body.nav-open .nav .menu li:nth-child(4) a { animation-delay: 160ms; }
  body.nav-open .nav .menu li:nth-child(5) a { animation-delay: 190ms; }
  body.nav-open .nav .menu li:nth-child(6) a { animation-delay: 220ms; }
  body.nav-open .nav .menu li:nth-child(7) a { animation-delay: 250ms; }
  body.nav-open .nav .menu li:nth-child(8) a { animation-delay: 280ms; }
  body.nav-open .nav > a.cart { animation-delay: 310ms; margin-top: 0.65rem; padding-top: 0.9rem; border-top: 1px solid rgba(0,0,0,.1); }
  @keyframes wnuNavItemIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
  body.era-50s .nav { background: #f7efe4; color: #1a1a1a; }
  body.era-60s .nav { background: #1a0533; color: #ffe14a; }
  body.era-70s .nav { background: #f3d9a4; color: #3d1608; }
  body.era-80s .nav { background: #0a0120; color: #ffe9ff; }
  body.era-90s .nav { background: #180024; color: #ffe033; }
  body.era-2000s .nav { background: #eef8ff; color: #10406a; }
  body.era-2010s .nav { background: #f8ece4; color: #3a2420; border-radius: 0 !important; }
  body.era-2020s .nav { background: #161422; color: #f4f0ff; }
  body.era-60s .nav > a.cart,
  body.era-80s .nav > a.cart,
  body.era-90s .nav > a.cart,
  body.era-2020s .nav > a.cart { border-top-color: rgba(255,255,255,.16); }
}

@media (prefers-reduced-motion: reduce) {
  .nav, .nav-backdrop, .nav-toggle-bars span,
  body.nav-open .nav > a, body.nav-open .nav .menu a {
    transition: none !important;
    animation: none !important;
  }
  body.nav-open .nav > a,
  body.nav-open .nav .menu a {
    opacity: 1;
    transform: none;
  }
}

/* ---- Static timeline ---- */
.tl-arrow { display: none !important; }
.timeline-wrap {
  max-width: var(--max);
  margin: 0 auto 1.5rem;
  padding: 0 1.4rem;
}
.timeline-shell {
  display: block;
  max-height: none !important;
  padding: 1rem 0.9rem 1.05rem;
}
.timeline {
  overflow: visible !important;
  cursor: default !important;
  touch-action: auto !important;
  max-height: none !important;
  scrollbar-width: none;
}
.timeline-track {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0 !important;
  width: 100%;
  gap: 0;
  padding: 0.2rem 0 0.35rem;
  flex-direction: row !important;
}
.timeline-track::before {
  left: 0 !important;
  right: 0 !important;
  top: 40px !important;
  bottom: auto !important;
  width: auto !important;
  height: 3px !important;
  background: linear-gradient(90deg, #c45c26, #ff2bd6, #ff2d8a, #8a4dff, #14b8a6) !important;
}
.tl-item {
  flex: 1 1 0;
  min-width: 0 !important;
  min-height: 0;
  flex-direction: column !important;
  justify-content: flex-start;
  gap: 0.35rem;
  padding: 0 .1rem;
}
.tl-dot { margin-top: 2px !important; }
.tl-year { font-weight: 600; font-size: 0.92rem; text-align: center; min-width: 0 !important; }
.tl-short { display: none; }
.tl-full { display: inline; }

@media (max-width: 720px) {
  .timeline-wrap { padding: 0 0.85rem; margin-bottom: 1.15rem; }
  .timeline-shell { padding: 0.75rem 0.55rem 0.8rem; }
  .timeline-track {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.55rem 0.2rem;
    width: 100%;
  }
  .timeline-track::before { display: none !important; }
  .tl-item {
    min-height: 0 !important;
    padding: 0.15rem 0;
  }
  .tl-year { font-size: 0.78rem; min-width: 0 !important; text-align: center; }
  .tl-full { display: none; }
  .tl-short { display: inline; }
  .era-2010s .timeline-track::before { display: none !important; }
}

/* ---- Footer flush to the bottom ---- */
.site-footer {
  flex-shrink: 0;
  margin-top: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
  width: 100%;
  padding: 0.8rem 1.4rem !important;
  box-sizing: border-box;
  justify-content: center;
  text-align: center;
}
.footer-line {
  margin: 0 auto !important;
  max-width: 46rem;
}
.footer-nav { display: none !important; }

/* Lift corner docks above the footer so they never cover the copyright */
.wnu-player {
  left: 1rem;
  bottom: calc(var(--footer-safe) + 0.35rem) !important;
}
.util-dock {
  right: 1rem;
  bottom: calc(var(--footer-safe) + 0.35rem) !important;
}
@media (max-width: 720px) {
  .wnu-player { left: .55rem; bottom: calc(var(--footer-safe) + 0.25rem) !important; }
  .util-dock { right: .55rem; bottom: calc(var(--footer-safe) + 0.25rem) !important; }
}

/* ---- Back to top: always a chevron-up ---- */
.back-to-top {
  display: inline-grid;
  place-items: center;
  font-size: 0;
}
.back-to-top .btt-icon,
.back-to-top svg {
  display: block;
  width: 22px;
  height: 22px;
}
.back-to-top.is-launching { transform: translateY(-10px); }

/* ---- Player icons: crisp SVG, consistent size ---- */
.player-fab {
  width: 56px !important;
  height: 56px !important;
  padding: 5px !important;
  border-radius: 16px !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.22) !important;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.player-fab::before,
.player-fab::after,
.player-fab-art::before,
.player-fab-art::after { content: none !important; display: none !important; }
.player-fab-art {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.player-fab-art svg {
  width: 100%;
  height: 100%;
  display: block;
}
body.era-home .player-fab { background: #f7f0de !important; border-color: #c41e3a !important; }
body.era-50s .player-fab { background: #f7efe4 !important; border-color: #c41e3a !important; }
body.era-60s .player-fab { background: #1a0533 !important; border-color: #ffe14a !important; }
body.era-70s .player-fab { background: #f3d9a4 !important; border-color: #8b2e0e !important; }
body.era-80s .player-fab { background: #1a1a1a !important; border-color: #ff7a18 !important; }
body.era-90s .player-fab { background: #100018 !important; border-color: #ff4ec4 !important; }
body.era-2000s .player-fab { background: #eef8ff !important; border-color: #8ec8f0 !important; }
body.era-2010s .player-fab { background: #fff6f0 !important; border-color: #e3c9ba !important; }
body.era-2020s .player-fab { background: #161422 !important; border-color: rgba(255,255,255,.22) !important; backdrop-filter: none !important; }

/* ---- Clean leftover intro / kicker / copy styles ---- */
.hero-lede, .collection-kicker, .top8-heading,
.press-start, .hit-counter, .pov-line, .card .copy { display: none !important; }
.hero h1 { margin-bottom: 1.15rem; }
.era-intro { margin: 0.35rem 0 1rem; }
.era-intro p, .diner-hero p, .psych-hero > p:not(.happenings), .fyp-hero > p:not(.pov-cap) { display: none !important; }
.diner-hero, .psych-hero, .fyp-hero { margin-bottom: 0.85rem; }

/* Passport leftovers, if any */
.passport-fab, .passport-modal, .stamp-grid { display: none !important; }


/* V20b: timeline year labels must meet contrast on every shell */
.timeline-shell .tl-year {
  display: inline-block;
  padding: 0.12rem 0.38rem;
  border-radius: 999px;
  background: #141416;
  color: #fff !important;
  text-decoration: none;
  line-height: 1.2;
}
.tl-item.is-current .tl-year {
  background: #fff;
  color: #141416 !important;
  text-decoration: none;
  box-shadow: 0 0 0 2px currentColor;
}
.tl-item.is-current .tl-year { box-shadow: 0 0 0 2px #141416; }

/* V20c: pin the top bar; keep footer text clear of corner docks */
.site-top {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  width: 100%;
}
body { padding-top: var(--site-top-h, 8.75rem); }
@media (max-width: 720px) {
  :root { --footer-safe: 5.5rem; }
  .site-footer { padding: 0.7rem 4.35rem !important; }
}

/* ===== V21 =====
   Desktop-only timeline, full-screen mobile nav, corner draw hint,
   flush announcement-to-header chrome in every era. */

/* 1. Timeline is desktop only */
@media (max-width: 720px) {
  .timeline-wrap,
  .timeline-shell,
  .timeline {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

/* 2. Full-screen mobile menu */
@media (max-width: 720px) {
  /* Backdrop stays under .site-top so the X (inside the header) remains clickable.
     The panel itself is opaque and covers logo/announce. */
  .nav-backdrop {
    z-index: 198;
  }
  .nav {
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    height: 100% !important;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    padding: 5.25rem 1.6rem 2.2rem;
    border-radius: 0 !important;
    box-shadow: none;
    z-index: 240;
  }
  body.nav-open .nav {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav-toggle { z-index: 250 !important; }
  .nav > a.cart,
  body.nav-open .nav > a.cart {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.45rem !important;
    white-space: nowrap !important;
    width: auto;
    align-self: flex-start;
  }
  .nav > a.cart svg {
    display: block;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
  }
}

/* 3. Draw hint must never sit over products — remove it */
.draw-hint { display: none !important; }

/* 4. Flush announcement-to-header chrome.
   Do not inherit the page gradient onto .site-top (it restarts mid-header
   color stops, which is the 2000s second blue band). Only the 2000s header
   needs a solid light fill so typography stays on #d5f0ff and the leftover
   86px #3b9ada stripe is gone. Other eras keep inherit. */
body.era-2000s .site-top { background: #d5f0ff; }
.era-2000s {
  background: linear-gradient(180deg, #d5f0ff 0, #f3fbff 280px, #eaf7ff) !important;
}
.announce-00s {
  background: linear-gradient(180deg, #7ec8ff, #2b8adf) !important;
  border-bottom: 3px solid #1568a8 !important;
}
.era-50s {
  background-image:
    linear-gradient(#7ec8b3 0 var(--site-top-h, 118px), transparent var(--site-top-h, 118px)),
    repeating-conic-gradient(#1a1a1a 0% 25%, #f7efe4 0% 50%) 0 var(--site-top-h, 118px) / 28px 28px !important;
}

/* ===== V22 =====
   Time-travel overlays above chrome, shared 3-col product grid,
   matched header height, one timeline, compact 2-line mobile footer. */

/* Overlay always covers the fixed header and the full-screen mobile menu */
.tt-overlay {
  z-index: 400 !important;
}

/* 2000s products use the shared 3-column grid */
.era-2000s .products,
.era-2000s .products.top8 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.1rem !important;
}

/* 2010s: drop masonry columns, use the same 3-col grid; keep polaroid card look */
.era-2010s .products.masonry {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.1rem !important;
  columns: auto !important;
  column-gap: normal !important;
}
.era-2010s .products.masonry .product {
  margin-bottom: 0;
  break-inside: auto;
}

@media (max-width: 980px) {
  .era-2000s .products,
  .era-2000s .products.top8,
  .era-2010s .products.masonry,
  .products {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 720px) {
  .era-2000s .products,
  .era-2000s .products.top8,
  .era-2010s .products.masonry,
  .products {
    grid-template-columns: 1fr !important;
  }
}

/* 2000s reflection stays in the logo box so the header matches other eras */
.era-2000s .brand-paper { position: relative; }
.era-2000s .brand-reflection {
  display: block !important;
  position: absolute !important;
  left: 0;
  right: 0;
  top: 46%;
  bottom: auto;
  height: 42%;
  margin: 0 !important;
  overflow: hidden;
  opacity: 0.34;
  pointer-events: none;
  transform: none !important;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 88%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 88%);
}
.era-2000s .brand-reflection .brand-mark {
  transform: scaleY(-1);
  transform-origin: 50% 0;
}

/* No decorative second timeline (2010s story rings, any leftover) */
.stories { display: none !important; }

/* Footer: desktop one line, mobile exactly two compact centered lines */
.footer-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 0.4rem;
  text-align: center;
  line-height: 1.35;
}
.footer-name, .footer-note { display: inline; }
.footer-name::after {
  content: " · ";
  font-weight: inherit;
}

@media (max-width: 720px) {
  .site-footer {
    padding: 0.45rem 0.4rem !important;
  }
  .footer-line {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.08rem;
    font-size: 0.68rem;
    letter-spacing: 0;
    line-height: 1.25;
    max-width: none;
    padding: 0 3.1rem;
    text-wrap: pretty;
  }
  .footer-name, .footer-note {
    display: block;
    white-space: nowrap;
  }
  .footer-name::after { content: none; }
}
@media (max-width: 380px) {
  .footer-line {
    font-size: 0.62rem;
    letter-spacing: -0.01em;
    padding: 0 2.85rem;
  }
}

/* Follow stays out of the header everywhere, including the 2010s override */
.follow-btn, .nav .follow-btn, body.era-2010s .follow-btn { display: none !important; }

/* ===== V23 =====
   Shared header height, gutters-only floaters, mobile dock clearance. */

/* 1. One header row height across eras (~110–120px at 1440) */
.site-header {
  align-items: center !important;
  padding-top: 0.55rem !important;
  padding-bottom: 0.45rem !important;
  min-height: 6.9rem;
  box-sizing: border-box;
}

/* 50s diner sign: keep the frame, shrink the type and chrome */
.era-50s .brand-paper {
  padding: 0.22rem 0.62rem 0.18rem !important;
  border-width: 2px !important;
  box-shadow: 0 0 0 2px #f2d39b, inset 0 0 10px rgba(0,0,0,.45) !important;
}
.era-50s .brand-mark {
  font-size: clamp(1.15rem, 2.15vw, 1.85rem) !important;
  line-height: 0.88 !important;
}
.era-50s .brand-sub {
  margin-top: 0.08rem !important;
  font-size: 0.52rem !important;
}

/* 2010s: tighter script, triangle not in flow, sub tucked under the mark */
.era-2010s .brand-paper { position: relative; }
.era-2010s .brand-mark {
  font-size: clamp(1.15rem, 2.1vw, 1.8rem) !important;
  line-height: 0.88 !important;
}
.era-2010s .brand-mark .w3 {
  display: block;
  font-size: 0.98em !important;
  line-height: 0.8 !important;
  margin-top: -0.08em;
}
.era-2010s .brand-star {
  position: absolute !important;
  left: 0;
  top: auto;
  bottom: 1.05rem;
  width: 12px !important;
  height: 12px !important;
  margin: 0 !important;
}
.era-2010s .brand-star::before {
  border-left-width: 6px !important;
  border-right-width: 6px !important;
  border-bottom-width: 10px !important;
}
.era-2010s .brand-sub {
  margin-top: 0.1rem !important;
  font-size: 0.5rem !important;
  letter-spacing: 0.2em !important;
}

/* Other era wordmarks stay in the same band */
.era-60s .brand-mark,
.era-70s .brand-mark,
.era-90s .brand-mark,
.era-2020s .brand-mark {
  font-size: clamp(1.25rem, 2.3vw, 2.05rem) !important;
}
.era-80s .brand-mark {
  font-size: clamp(1.05rem, 2vw, 1.7rem) !important;
}
.era-2000s .brand-mark {
  font-size: clamp(1.15rem, 2.15vw, 1.85rem) !important;
}

@media (max-width: 720px) {
  .site-header {
    min-height: 5.35rem;
    padding-top: 0.4rem !important;
    padding-bottom: 0.3rem !important;
  }
}

/* 2. Floaters may only occupy the side gutters */
.float-field {
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0,
    #000 max(0px, calc((100vw - var(--max, 1180px)) / 2)),
    transparent max(12px, calc((100vw - var(--max, 1180px)) / 2 + 10px)),
    transparent calc(100vw - max(12px, calc((100vw - var(--max, 1180px)) / 2 + 10px))),
    #000 calc(100vw - max(0px, calc((100vw - var(--max, 1180px)) / 2))),
    #000 100%
  );
  mask-image: linear-gradient(
    90deg,
    #000 0,
    #000 max(0px, calc((100vw - var(--max, 1180px)) / 2)),
    transparent max(12px, calc((100vw - var(--max, 1180px)) / 2 + 10px)),
    transparent calc(100vw - max(12px, calc((100vw - var(--max, 1180px)) / 2 + 10px))),
    #000 calc(100vw - max(0px, calc((100vw - var(--max, 1180px)) / 2))),
    #000 100%
  );
}
@media (max-width: 720px) {
  .float-field { display: none !important; }
}

/* 3. Mobile docks never cover content/CTAs; footer stays a compact 2-line bar */
@media (max-width: 720px) {
  :root { --footer-safe: 4.85rem; }
  main, .page-main {
    padding-bottom: var(--footer-safe) !important;
  }
  .wnu-player,
  .back-to-top,
  .util-dock {
    bottom: 0.5rem !important;
  }
}

/* Full-width mobile CTAs must clear the corner docks */
@media (max-width: 720px) {
  a.buy,
  .card .cta,
  a.cta,
  #surprise-card a,
  #surprise-card .cta {
    margin-left: 3.4rem !important;
    margin-right: 3.4rem !important;
    width: auto !important;
    max-width: calc(100% - 6.8rem);
    box-sizing: border-box;
  }
}

/* 2010s floating hearts stay in the side gutters as they rise */
.amb-10s .h1 { left: 4% !important; }
.amb-10s .h2 { left: 7% !important; }
.amb-10s .h3 { left: 93% !important; }
.amb-10s .h4 { left: 96% !important; }