/* Campaign site: the prod homepage while the band runs its singer search. The ad and the logo sit
   on black (the logo art's own background), and the Instagram posts carry all the words. Buttons
   and frames borrow the posts' ink-outlined sticker look. */

:root {
  --black: #000000;
  --pink: #ff3399;
  --yellow: #ffe500;
  --sky: #8fd8ff;
  --ink: #15123a;
  --white: #ffffff;

  --font: "Archivo", "Arial Black", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1180px;
  --stroke: 4px;
  --lift: 6px;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.5;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 4px;
}

/* ---------- Header ---------- */

.top {
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px var(--gutter);
}

.profile {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  max-width: 100%;
}

/* The skull cherry on its own black, ringed in pink like an Instagram story avatar. */
.profile__avatar {
  width: 64px;
  height: 64px;
  flex: none;
  border: 3px solid var(--pink);
  border-radius: 50%;
}

.profile__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.profile__name {
  font-weight: 900;
  font-size: 1.25rem;
  line-height: 1.15;
}

.profile__handle {
  color: var(--sky);
  font-weight: 600;
  font-size: 0.95rem;
}

.profile:hover .profile__handle {
  text-decoration: underline;
}

/* ---------- Hero: the ad next to the pitch ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(16px, 4vw, 48px) var(--gutter) clamp(56px, 8vw, 96px);
}

.ad {
  position: relative;
  margin: 0;
  border: var(--stroke) solid var(--ink);
  border-radius: 28px;
  overflow: hidden;
  background: var(--ink);
  box-shadow: 10px 10px 0 var(--pink), 10px 10px 0 var(--stroke) var(--ink);
  aspect-ratio: 720 / 1218;
}

.ad__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

/* "Sound on!" callout under the ad, with a hand-drawn arrow up at the sound button in the ad's
   bottom-right corner. Hidden once the sound is on. */
.ad-wrap {
  position: relative;
  --ad-w: 100%;
  padding-bottom: 78px;
}

.hint {
  position: absolute;
  right: calc((100% - var(--ad-w)) / 2 + 16px);
  bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin: 0;
  color: var(--yellow);
  pointer-events: none;
}

.hint[hidden] {
  display: none;
}

.hint__text {
  margin-bottom: 4px;
  font-weight: 900;
  font-style: italic;
  font-size: 1.6rem;
  line-height: 1;
  white-space: nowrap;
  transform: rotate(-6deg);
}

.hint__arrow {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ad__sound {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  color: var(--ink);
  background: var(--yellow);
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
}

.ad__sound:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}

.ad__speaker {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.ad__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.ad__icon--on,
.ad__sound.is-on .ad__icon--muted {
  display: none;
}

.ad__sound.is-on .ad__icon--on {
  display: block;
}

.pitch {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pitch__logo {
  margin: 0;
  width: 100%;
}

.pitch__logo img {
  width: min(100%, 640px);
  margin: 0 auto;
}

.pitch__email {
  margin: 22px 0 0;
  font-weight: 600;
  font-size: 1.1rem;
}

.pitch__email a {
  color: var(--sky);
  font-weight: 800;
  overflow-wrap: anywhere;
}

/* The DM button is the post's "Slide into our DMs" sticker, made real. */
.dm {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding: 18px 30px;
  color: var(--ink);
  background: var(--yellow);
  border: var(--stroke) solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--lift) var(--lift) 0 var(--pink);
  font-weight: 900;
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.dm__bolt {
  fill: var(--pink);
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.dm:hover {
  transform: translate(-2px, -2px);
  box-shadow: calc(var(--lift) + 2px) calc(var(--lift) + 2px) 0 var(--pink);
}

.dm:active {
  transform: translate(var(--lift), var(--lift));
  box-shadow: 0 0 0 var(--pink);
}

/* ---------- The feed ---------- */

.feed {
  background: var(--pink);
  border-top: var(--stroke) solid var(--ink);
  padding: clamp(48px, 7vw, 88px) var(--gutter);
}

.feed__title,
.feed__posts,
.feed__more {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}

.feed__title {
  margin-top: 0;
  color: var(--yellow);
  font-weight: 900;
  font-stretch: 85%;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1;
  text-transform: uppercase;
  -webkit-text-stroke: 0.06em var(--ink);
  paint-order: stroke fill;
  text-shadow: 0.06em 0.06em 0 var(--ink);
  margin-bottom: 36px;
}

.feed__posts {
  list-style: none;
  padding: 0;
  margin-bottom: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 36px);
}

.post a {
  display: block;
  border: var(--stroke) solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--lift) var(--lift) 0 var(--ink);
  transition: transform 140ms ease;
}

.post:nth-child(1) a {
  transform: rotate(-1.2deg);
}

.post:nth-child(3) a {
  transform: rotate(1.2deg);
}

.post a:hover {
  transform: rotate(0) translateY(-4px);
}

.feed__more {
  display: block;
  width: fit-content;
  margin-top: 40px;
  color: var(--ink);
  font-weight: 900;
  font-size: 1.15rem;
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

.feed__more:hover {
  color: var(--white);
}

/* ---------- Footer ---------- */

.foot {
  background: var(--ink);
  padding: 40px var(--gutter) 48px;
  text-align: center;
}

.foot p {
  margin: 0 auto;
  max-width: 40rem;
}

.foot__tag {
  color: var(--yellow);
  font-weight: 900;
  font-size: 1.25rem;
}


.foot__small {
  margin-top: 18px !important;
  font-size: 0.85rem;
  opacity: 0.7;
}

/* ---------- Small screens ---------- */

@media (max-width: 820px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  /* Logo and DM button first on a phone, then the ad. */
  .pitch {
    order: -1;
  }

  .dm {
    margin-top: 16px;
  }

  .ad-wrap {
    /* Keep the ad short enough to see whole on a phone's first screen. */
    --ad-w: min(100%, 360px, calc(62svh * 720 / 1218));
  }

  .ad {
    width: var(--ad-w);
    margin: 0 auto;
    box-shadow: 8px 8px 0 var(--pink), 8px 8px 0 var(--stroke) var(--ink);
  }


  /* Swipe through the posts like the app. */
  .feed__posts {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 78%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 12px 16px 4px;
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    padding-left: var(--gutter);
    scroll-padding-left: var(--gutter);
  }

  .post {
    scroll-snap-align: start;
  }
}

@media (max-width: 480px) {
  .profile__avatar {
    width: 52px;
    height: 52px;
  }


  .dm {
    width: 100%;
    justify-content: center;
    padding: 16px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dm,
  .post a {
    transition: none;
  }
}