:root {
  
  --sky-high: #2f7fc4;
  --sky-mid: #62aee0;
  --sky-low: #a8d6ee;
  --sky-haze: #dcefF7;

  
  --night: #1e2b48;
  --dusk-deep: #2b3a5c;
  --dusk-blue: #3f628f;
  --dusk-haze: #7f93b2;

  
  --paper: #f4f0f0;
  --paper-warm: #faf6f0;
  --paper-edge: #e2dcd6;

  
  --ink: #23364f;
  --ink-soft: #4d6484;
  --ink-faint: #8d9cb0;
  --red: #f85838;
  
  --sun: #f0e080;
  --leaf: #68a540;
  --leaf-deep: #19655b;
  --brass: #b68563;

  
  --gutter: 32px;
  --hero-radius: 34px;

  
  --accent: #bbff35;

  
  --cloud-line: 2.5px;
  
  --cloud-alpha: 0.8;

  
  --black: #0c090d;

  --dot-size: 8px;

  
  --hero-shadow:
    0 2px 4px -1px rgb(12 9 13 / 5%),
    0 8px 18px -6px rgb(12 9 13 / 6%),
    0 18px 34px -8px rgb(12 9 13 / 7%),
    0 30px 56px -14px rgb(12 9 13 / 9%);
  
  --vgen: #b8ff26;
  --vgen-ink: var(--black);

  
  --mv-blur: 16px;
  --mv-zoom: 1.10;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow-lift: 0 18px 40px -18px rgb(30 40 60 / 45%);
  --ease: cubic-bezier(.22, .68, .28, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);

  
  --page: 1240px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  
  background: var(--paper);
  
  overflow-x: clip;
}

body {
  position: relative;
  margin: 0;
  padding: var(--gutter);
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.6 Quicksand, ui-rounded, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

.skip {
  position: absolute;
  left: 50%;
  top: -60px;
  z-index: 99;
  transform: translateX(-50%);
  background: var(--paper);
  color: var(--ink);
  padding: .6rem 1.2rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: top .2s var(--ease);
}

.skip:focus-visible {
  top: 12px;
}

:where(a, button):focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 3px;
  border-radius: 8px;
}

.hero {
  position: relative;
  z-index: 1;
  isolation: isolate;
  
  min-height: calc(100svh - var(--gutter) * 2);
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border-radius: var(--hero-radius);
  overflow: hidden;
  
  background: linear-gradient(180deg,
      var(--sky-high) 0%,
      var(--sky-mid) 38%,
      var(--sky-low) 72%,
      var(--sky-haze) 100%);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -4;
  overflow: hidden;
  border-radius: inherit;
  --card-w: calc(100vw - var(--gutter) * 2);
  --card-h: calc(100svh - var(--gutter) * 2);
}

.hero-media>iframe,
.hero-media>.hero-poster {
  position: absolute;
  top: 50%;
  left: 50%;
  
  translate: -50% -50%;
  scale: var(--mv-zoom);
  
  width: max(var(--card-w), calc(var(--card-h) * 16 / 9));
  height: max(var(--card-h), calc(var(--card-w) * 9 / 16));
  max-width: none;
  
  border: 0;
  object-fit: cover;
  filter: blur(var(--mv-blur));
  
  will-change: filter;
  transform: translateZ(0);
}

@media (max-width: 700px) {
  .hero-media>iframe,
  .hero-media>.hero-poster {
    --mv-blur: 11px;
  }
}

.hero-poster {
  z-index: 1;
  transition: opacity 1.1s var(--ease);
}

.hero-media.is-live .hero-poster {
  opacity: 0;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -3;
  border-radius: inherit;
  background:
    radial-gradient(58% 40% at 50% 43%, rgb(8 26 48 / 46%) 0%, rgb(8 26 48 / 18%) 56%, transparent 78%),
    linear-gradient(180deg, rgb(8 26 48 / 22%) 0%, transparent 26%),
    linear-gradient(0deg, rgb(244 240 240 / 34%) 0%, transparent 24%);
}

.clouds {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.cloud {
  position: absolute;
  
  color: rgb(12 9 13 / var(--cloud-alpha));
  will-change: transform;
}

.cloud-art {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.cloud--full .cloud-art path {
  fill: currentColor;
}

.cloud--outline .cloud-art path {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--cloud-line);
  stroke-linejoin: round;
}

.cloud--1 {
  width: min(25vw, 360px);
  top: 17%;
  left: -3%;
}

.cloud--2 {
  width: min(12.5vw, 175px);
  top: 3%;
  right: 12%;
}

.cloud--3 {
  width: min(21vw, 300px);
  bottom: 8%;
  right: -4%;
}

.cloud--4 {
  width: min(15.5vw, 215px);
  bottom: -4%;
  left: 36%;
  opacity: .9;
}

@media (max-width: 760px) {
  .cloud--1 {
    width: 175px;
    top: 13%;
    left: -12%;
  }

  .cloud--2 {
    width: 92px;
    top: 2%;
    right: 4%;
  }

  .cloud--3 {
    width: 160px;
    bottom: -2%;
    right: -12%;
  }

  .cloud--4 {
    display: none;
  }

  :root {
    --cloud-line: 2px;
    --gutter: 30px;
    --dot-size: 7px;
  }
}

.rail {
  position: fixed;
  z-index: 20;
  
  left: calc((var(--gutter) - var(--dot-size)) / 2);
  top: 50%;
  translate: 0 -50%;
}

.dots {
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.dot {
  position: relative;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  border: 1.6px solid var(--black);
  background: transparent;
  transition: background .25s var(--ease), transform .25s var(--ease),
    opacity .25s var(--ease);
}

.dot:hover,
.dot:focus-visible {
  background: var(--black);
  transform: scale(1.3);
}

.dot[aria-current="true"] {
  background: var(--black);
  transform: scale(1.15);
}

.dot--inert {
  opacity: .32;
  cursor: default;
}

.dot--inert:hover {
  background: transparent;
  transform: none;
}

.dot-label {
  position: absolute;
  left: calc(100% + .55rem);
  top: 50%;
  translate: 0 -50%;
  padding: .18rem .55rem;
  font: 700 .68rem/1 Quicksand, sans-serif;
  letter-spacing: .08em;
  white-space: nowrap;
  color: #fffdf8;
  background: rgb(8 26 48 / 72%);
  border-radius: 999px;
  opacity: 0;
  transition: opacity .22s var(--ease), translate .22s var(--ease);
  pointer-events: none;
}

.dot:hover .dot-label,
.dot:focus-visible .dot-label {
  opacity: 1;
  translate: 4px -50%;
}

.dot--inert:hover .dot-label {
  opacity: 0;
}

@media (max-width: 760px) {
  .dots {
    gap: .7rem;
  }

  .dot-label {
    display: none;
  }
}

.stage {
  position: relative;
}

.stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--hero-radius);
  box-shadow: var(--hero-shadow);
  pointer-events: none;
}

.hero-body {
  grid-row: 1;
  align-self: center;
  text-align: center;
  max-width: min(100%, 46rem);
}

.wordmark {
  margin: 0;
  font-family: 'Baloo 2', ui-rounded, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(3.8rem, 14vw, 8.5rem);
  line-height: .9;
  letter-spacing: -.025em;
  color: #fffdf8;
}

.tagline {
  margin: .5rem 0 0;
  font-size: clamp(1rem, 3vw, 1.35rem);
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--sun);
}

.hero-body .links {
  margin-top: 2.6rem;
  justify-content: center;
}

.scroll-cue {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: calc(var(--gutter) + 1.5rem);
  translate: -50% 0;
  width: 26px;
  height: 42px;
  border: 2px solid rgb(255 255 255 / 80%);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgb(8 28 52 / 25%);
  transition: border-color .22s var(--ease), scale .22s var(--ease);
}

.scroll-cue span {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: #fff;
  animation: cue 1.9s ease-in-out infinite;
}

.scroll-cue:hover,
.scroll-cue:focus-visible {
  border-color: var(--accent);
  scale: 1.08;
}

.scroll-cue:hover span,
.scroll-cue:focus-visible span {
  background: var(--accent);
}

@keyframes cue {
  0%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }

  70% {
    transform: translateY(16px);
    opacity: 0;
  }
}

/* Animate translate/scale/opacity, never transform: a forwards-filled
   animation outranks normal declarations and would kill the chip hover. */
.line {
  display: block;
}

.js .wordmark,
.js .tagline {
  clip-path: inset(-45% -45% 0 -45%);
}

.js .line {
  translate: 0 115%;
  opacity: 0;
}

.js .chip {
  opacity: 0;
  scale: .86;
}

.js .hero-media {
  clip-path: inset(0 100% 0 0);
}

.js .stage::before {
  opacity: 0;
  scale: .985;
}

.js .clouds,
.js .mark,
.js .scroll-cue,
.js .dots,
.js .sound {
  opacity: 0;
}

.js.ready .wordmark .line {
  animation: rise .95s var(--ease-out) forwards;
}

.js.ready .tagline .line {
  animation: rise .95s var(--ease-out) .14s forwards;
}

.js.ready .chip {
  animation: pop .5s var(--ease-pop) calc(.34s + var(--i, 0) * .07s) forwards;
}

.js.ready .hero-media {
  animation: wipe 1.05s var(--ease-out) .56s forwards;
}

.js.ready .stage::before {
  animation: settle 1s var(--ease-out) .1s forwards;
}

.js.ready .clouds {
  animation: fade .9s var(--ease) .62s forwards;
}

.js.ready .mark {
  animation: fade .8s var(--ease) .9s forwards;
}

.js.ready .sound {
  animation: fade .8s var(--ease) 1s forwards;
}

.js.ready .dots {
  animation: fade .8s var(--ease) 1.05s forwards;
}

.js.ready .scroll-cue {
  animation: fade .8s var(--ease) 1.15s forwards;
}

@keyframes rise {
  to {
    translate: 0 0;
    opacity: 1;
  }
}

@keyframes pop {
  0% {
    opacity: 0;
    scale: .86;
  }

  60% {
    opacity: 1;
    scale: 1.04;
  }

  100% {
    opacity: 1;
    scale: 1;
  }
}

@keyframes wipe {
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes settle {
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes fade {
  to {
    opacity: 1;
  }
}

.paper {
  position: relative;
  
  max-width: var(--page);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(4rem, 9vw, 7rem);
  padding: clamp(4rem, 9vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
  
}

.panel {
  position: relative;
}

.panel-head {
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}

.panel-title {
  margin: 0;
  font-family: Quicksand, sans-serif;
  font-weight: 300;
  font-size: .95rem;
  letter-spacing: .32em;
  color: var(--black);
}

.panel-blurb {
  margin: .85rem 0 0;
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: .95rem;
}

.spot {
  display: grid;
  gap: clamp(1.2rem, 3vw, 2.2rem);
  align-items: center;
}

@media (min-width: 820px) {
  .spot {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  }
}

.spot-media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: var(--dusk-deep);
  cursor: pointer;
}

.spot-media img,
.spot-media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.spot-media.is-live img {
  opacity: 0;
}

.spot-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgb(12 9 13 / 22%);
  transition: background .25s var(--ease);
}

.spot-play svg {
  width: 58px;
  height: 58px;
  fill: #fffdf8;
  filter: drop-shadow(0 4px 14px rgb(12 9 13 / 55%));
  transition: scale .25s var(--ease);
}

.spot-media:hover .spot-play {
  background: rgb(12 9 13 / 10%);
}

.spot-media:hover .spot-play svg {
  scale: 1.08;
}

.spot-media.is-live .spot-play {
  display: none;
}

.spot-kicker {
  display: inline-block;
  margin: 0 0 .7rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--black);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  rotate: -2deg;
}

.spot-title {
  margin: 0;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: clamp(1.8rem, 4.4vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--black);
}

.spot-credit {
  margin: .4rem 0 0;
  color: var(--ink-soft);
  font-weight: 600;
}

.spot-date {
  margin: .15rem 0 0;
  color: var(--ink-faint);
  font-size: .9rem;
}

.links.links--spot {
  margin-top: 1.4rem;
  justify-content: flex-start;
}

.chip--apple:hover .ico {
  fill: #111;
}

.sleeves {
  display: grid;
  gap: clamp(.9rem, 2vw, 1.4rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sleeve {
  display: block;
  text-decoration: none;
}

.sleeve-art {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper-edge);
  box-shadow: 0 2px 6px rgb(12 9 13 / 8%);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.sleeve-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale .5s var(--ease);
}

.sleeve:hover .sleeve-art,
.sleeve:focus-visible .sleeve-art {
  transform: translateY(-5px);
  box-shadow: 0 16px 30px -12px rgb(12 9 13 / 34%);
}

.sleeve:hover .sleeve-art img,
.sleeve:focus-visible .sleeve-art img {
  scale: 1.05;
}

.sleeve-label {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: 2.2rem .95rem .85rem;
  background: linear-gradient(transparent, rgb(12 9 13 / 86%));
  color: #fffdf8;
  opacity: 0;
  translate: 0 8px;
  transition: opacity .28s var(--ease), translate .28s var(--ease);
}

.sleeve:hover .sleeve-label,
.sleeve:focus-visible .sleeve-label {
  opacity: 1;
  translate: 0 0;
}

@media (hover: none) {
  .sleeve-label {
    opacity: 1;
    translate: 0 0;
  }
}

.sleeve-title {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.2;
}

.sleeve-meta {
  font-size: .82rem;
  color: rgb(255 253 248 / 72%);
}

.tag {
  padding: .05rem .35rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 22%);
  font-size: .7rem;
  letter-spacing: .06em;
}

.mq {
  overflow: hidden;
  
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

.mq-track {
  display: flex;
  gap: clamp(.8rem, 1.8vw, 1.2rem);
  width: max-content;
  animation: marquee 46s linear infinite;
}

.mq:hover .mq-track,
.mq:focus-within .mq-track {
  animation-play-state: paused;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

.mq-item {
  flex: 0 0 clamp(230px, 27vw, 310px);
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.mq-art {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper-edge);
  box-shadow: 0 2px 6px rgb(12 9 13 / 8%);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.mq-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mq-item:hover .mq-art,
.mq-item:focus-visible .mq-art {
  transform: translateY(-5px);
  box-shadow: 0 14px 26px -10px rgb(12 9 13 / 30%);
}

.mq-title {
  margin-top: .6rem;
  font-weight: 600;
  font-size: .92rem;
  line-height: 1.3;
  color: var(--black);
}

.mq-for {
  align-self: flex-start;
  margin-top: .35rem;
  padding: .14rem .5rem;
  border-radius: 999px;
  background: rgb(182 133 99 / 16%);
  color: #8a6244;
  font-size: .76rem;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  
  .mq {
    overflow-x: auto;
  }

  .mq-track {
    animation: none;
  }
}

.more {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: clamp(1.2rem, 2.4vw, 1.8rem);
  padding-bottom: .2rem;
  font-weight: 500;
  font-size: .84rem;
  letter-spacing: .1em;
  text-decoration: none;
  color: var(--ink-soft);
  border-bottom: 1.5px solid var(--paper-edge);
  transition: color .2s var(--ease), border-color .2s var(--ease), gap .2s var(--ease);
}

.more svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.more:hover,
.more:focus-visible {
  color: var(--black);
  border-color: var(--accent);
  gap: .75rem;
}

.spine {
  
  position: absolute;
  top: calc(100% + 1rem);
  left: 50%;
  translate: -50% 0;
  writing-mode: vertical-rl;
  font-weight: 500;
  font-size: .68rem;
  letter-spacing: .28em;
  text-transform: lowercase;
  white-space: nowrap;
  color: var(--black);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease);
}

.spine.is-on {
  opacity: .55;
}

@media (max-width: 760px) {
  .spine {
    display: none;
  }
}

.js .reveal {
  opacity: 0;
  translate: 0 18px;
}

.js .reveal.is-in {
  animation: arrive .8s var(--ease-out) forwards;
}

@keyframes arrive {
  to {
    opacity: 1;
    translate: 0 0;
  }
}

.mark {
  position: absolute;
  z-index: 2;
  writing-mode: vertical-rl;
  color: var(--black);
  user-select: none;
}

.mark--year {
  right: 1rem;
  bottom: 1.9rem;
  font-weight: 300;
  font-size: .86rem;
  letter-spacing: .34em;
}

.mark--jp {
  
  left: calc(var(--hero-edge, 0px) + 1rem);
  top: 1.9rem;
  font-family: 'M PLUS Rounded 1c', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: .2em;
}

.sound {
  
  position: absolute;
  z-index: 5;
  right: 2rem;
  top: 1.6rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .46rem .9rem;
  font: 700 .8rem/1 Quicksand, sans-serif;
  color: #fffdf8;
  background: rgb(10 32 58 / 42%);
  border: 2px solid rgb(255 255 255 / 55%);
  border-radius: 999px;
  cursor: pointer;
  transition: all .22s var(--ease);
}

.sound:hover {
  background: var(--red);
  border-color: var(--red);
  transform: translateY(-2px);
}

.sound[aria-pressed="true"] {
  background: var(--red);
  border-color: var(--red);
}

.sound-ico {
  font-size: .95rem;
  line-height: 1;
}

.hero-noscript {
  position: absolute;
  z-index: 5;
  inset: auto 0 32% 0;
  text-align: center;
  padding: .7rem;
  background: rgb(10 32 58 / 78%);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.links {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .42rem;
  justify-content: center;
}

@media (min-width: 900px) {
  .links {
    justify-content: flex-start;
  }
}

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .8rem;
  border-radius: 999px;
  background: rgb(250 246 240 / 94%);
  color: var(--ink);
  font-weight: 700;
  font-size: .82rem;
  text-decoration: none;
  border: 2px solid transparent;
  box-shadow: 0 4px 0 rgb(35 54 79 / 30%), var(--shadow-lift);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
    background .22s var(--ease), border-color .22s var(--ease);
}

.chip .ico {
  width: 15px;
  height: 15px;
  fill: currentColor;
  flex: none;
}

.chip:hover,
.chip:focus-visible {
  transform: translateY(-4px) rotate(-1.6deg);
  border-color: var(--red);
  box-shadow: 0 8px 0 rgb(35 54 79 / 24%), 0 22px 34px -16px rgb(20 30 50 / 55%);
}

.chip--vgen {
  background: var(--vgen);
  color: var(--vgen-ink);
  padding-right: .68rem;
  box-shadow: 0 4px 0 #7fb814, var(--shadow-lift);
}

.chip--vgen .ico {
  fill: var(--vgen-ink);
}

.chip--vgen:hover,
.chip--vgen:focus-visible {
  border-color: var(--vgen-ink);
  box-shadow: 0 8px 0 #7fb814, 0 22px 34px -16px rgb(88 132 10 / 55%);
}

.chip--vgen

.chip--vgen.is-closed .chip-state {
  background: rgb(12 9 13 / 26%);
}

.chip-state {
  margin-left: .1rem;
  padding: .1rem .42rem;
  border-radius: 999px;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgb(12 9 13 / 16%);
}

.pop {
  position: absolute;
  top: -19px;
  right: -13px;
  width: 42px;
  z-index: 2;
  overflow: visible;
  pointer-events: none;
}

.pop-bubble {
  fill: var(--black);
}

.pop-ring {
  fill: none;
  stroke: #fcf1df;
}

.pop-star,
.pop-p1,
.pop-p2 {
  fill: #fcf1df;
}

.pop-bubble,
.pop-ring,
.pop-star,
.pop-p1,
.pop-p2 {
  transform-box: view-box;
}

.pop-bubble {
  transform-origin: 19px 45px;
  scale: 0;
}

.pop-ring,
.pop-star {
  transform-origin: 36px 20px;
  scale: 0;
  opacity: 0;
}

.pop-p1,
.pop-p2 {
  transform-origin: 36px 20px;
  opacity: 0;
}

.chip:hover .pop-bubble,
.chip:focus-visible .pop-bubble {
  animation: pop-bubble .8s cubic-bezier(.34, 1.56, .64, 1) both;
}

.chip:hover .pop-star,
.chip:focus-visible .pop-star {
  animation:
    pop-star-size .5s cubic-bezier(.2, .8, .2, 1) .12s both,
    pop-star-spin .5s cubic-bezier(.5, 0, .7, 1) .12s both,
    pop-star-fade .5s linear .12s both;
}

.chip:hover .pop-ring,
.chip:focus-visible .pop-ring {
  animation:
    pop-ring-grow .3s cubic-bezier(.2, .7, .3, 1) .18s both,
    pop-ring-fade .3s cubic-bezier(.4, 0, .8, 1) .18s both;
}

.chip:hover .pop-p1,
.chip:focus-visible .pop-p1 {
  animation: pop-p1 .5s cubic-bezier(.1, .9, .2, 1) .2s both;
}

.chip:hover .pop-p2,
.chip:focus-visible .pop-p2 {
  animation: pop-p2 .5s cubic-bezier(.1, .9, .2, 1) .24s both;
}

@keyframes pop-bubble {
  0% {
    scale: 0;
  }

  20%,
  80% {
    scale: 1;
  }

  100% {
    scale: 0;
  }
}

@keyframes pop-star-size {
  0% {
    scale: 0;
  }

  50% {
    scale: 1;
    animation-timing-function: cubic-bezier(.5, 0, 1, 1);
  }

  100% {
    scale: 0;
  }
}

@keyframes pop-star-spin {
  from {
    rotate: 0deg;
  }

  to {
    rotate: 127deg;
  }
}

@keyframes pop-star-fade {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 1;
    animation-timing-function: cubic-bezier(.5, 0, 1, 1);
  }

  100% {
    opacity: 0;
  }
}

@keyframes pop-ring-grow {
  from {
    scale: 0;
    stroke-width: 1.5;
  }

  to {
    scale: 1;
    stroke-width: .4;
  }
}

@keyframes pop-ring-fade {
  from {
    opacity: .9;
  }

  to {
    opacity: 0;
  }
}

@keyframes pop-p1 {
  0% {
    transform: translate(0, 0) scale(0) rotate(0deg);
    opacity: .6;
  }

  40% {
    transform: translate(5px, -5px) scale(1) rotate(40deg);
    opacity: .6;
  }

  100% {
    transform: translate(10px, -10px) scale(0) rotate(94deg);
    opacity: 0;
  }
}

@keyframes pop-p2 {
  0% {
    transform: translate(0, 0) scale(0) rotate(0deg);
    opacity: .5;
  }

  40% {
    transform: translate(-6px, -4px) scale(1) rotate(-34deg);
    opacity: .5;
  }

  100% {
    transform: translate(-11px, -8px) scale(0) rotate(-94deg);
    opacity: 0;
  }
}

.chip--vgen .pop-bubble {
  fill: #24310a;
}

@media (prefers-reduced-motion: reduce) {
  .pop {
    display: none;
  }
}

.chip--youtube:hover .ico {
  fill: #f0413a;
}

.chip--spotify:hover .ico {
  fill: #17a34a;
}

.chip--soundcloud:hover .ico {
  fill: #f26f23;
}

@media (min-width: 560px) {
  .grid--discography {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

.foot {
  position: relative;
  padding: clamp(2.5rem, 6vw, 3.5rem) 1.25rem clamp(2rem, 5vw, 2.5rem);
  text-align: center;
  color: rgb(250 246 240 / 90%);
  background: linear-gradient(180deg, var(--dusk-blue), var(--dusk-deep) 70%, var(--night));
}

.foot .links {
  justify-content: center;
  margin-top: 1.1rem;
}

.foot-mark {
  margin: 0;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 1.9rem;
  letter-spacing: -.01em;
  color: var(--paper-warm);
}

.foot-credit {
  margin: 1.6rem 0 0;
  font-size: .9rem;
  color: rgb(250 246 240 / 72%);
}

.foot-credit a {
  color: var(--sun);
  font-weight: 700;
  text-underline-offset: 3px;
}

.foot-note {
  margin: .45rem 0 0;
  font-size: .85rem;
  color: rgb(250 246 240 / 52%);
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .scroll-cue span {
    animation: none !important;
  }

  .cloud {
    transform: none !important;
  }
}

@media (max-width: 560px) {
  :root {
    --gutter: 0px;
    --hero-radius: 0px;
  }

  
  .rail {
    display: none;
  }

  
  .paper,
  .paper--stub {
    padding-inline: 1.25rem;
  }

  
  .hero-body .links {
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    
    max-width: 20rem;
    margin-inline: auto;
  }

  .hero-body .chip {
    justify-content: center;
  }
}