/* Hitman's Milkshake: "a milk bar run by hitmen".
   Brand palette per the workspace CLAUDE.md brand bible. Sections are full colour slabs (pink,
   black, yellow) like a gig poster; blue is the interactive/"live" colour. Cream is lifted from the
   working logo art and used for type on black. */
:root {
  color-scheme: dark;
  --black: #000;
  --cream: #fbeccb;
  --cream-muted: #c9bb9c;
  --pink: #ff2d6b;
  --blue: #00e5ff;
  --yellow: #ffe600;
  --ink: #000;

  --font-display: "Bowlby One", "Arial Black", Impact, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;

  --max-width: 1120px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --shadow-hard: 6px 6px 0 var(--ink);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The tilted ticker and the wordmark's offset shadow poke past the viewport edges on purpose; clip
   them so they can't widen the page on mobile (overflow-x on body alone doesn't stop that in every
   mobile browser). `hidden` first as a fallback for browsers without `clip`. */
html,
main {
  overflow-x: hidden;
  overflow-x: clip;
}

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

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

.slab--pink :focus-visible,
.slab--yellow :focus-visible {
  outline-color: var(--ink);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 20;
  background: var(--yellow);
  color: var(--ink);
  padding: 0.5rem 1rem;
  font-weight: 700;
}

.skip-link:focus {
  top: 1rem;
}

/* Placeholder tag: striped hazard tape so nothing unfinished can pass for real content. */
.placeholder {
  display: inline-block;
  vertical-align: 0.15em;
  margin-right: 0.35em;
  padding: 0.1em 0.5em;
  font: 700 0.7rem/1.4 var(--font-body);
  font-stretch: 75%;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: repeating-linear-gradient(-45deg, var(--yellow) 0 8px, #fff38a 8px 16px);
  border: 1.5px solid var(--ink);
  border-radius: 3px;
}

.placeholder--sticker {
  position: absolute;
  z-index: 2;
  top: -0.8rem;
  right: -0.6rem;
  transform: rotate(4deg);
  margin: 0;
  font-size: 0.8rem;
}

/* Header / nav */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--pink);
}

.nav {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.7rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__brand {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--cream);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.nav__brand:hover {
  color: var(--pink);
}

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 0.5rem;
  cursor: pointer;
}

.nav__toggle-bar {
  width: 24px;
  height: 3px;
  background: var(--cream);
}

.nav__links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

.nav__links a {
  color: var(--cream);
  text-decoration: none;
  font-weight: 600;
  font-stretch: 85%;
  font-size: 0.95rem;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}

.nav__links a:hover,
.nav__links a:focus-visible {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

.nav__links a[aria-current="page"] {
  color: var(--pink);
  border-bottom-color: var(--pink);
}

@media (max-width: 720px) {
  .nav__toggle {
    display: flex;
  }

  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--black);
    border-bottom: 2px solid var(--pink);
    display: none;
  }

  .nav__links.is-open {
    display: flex;
  }

  .nav__links a {
    display: block;
    padding: 0.9rem var(--gutter);
    border-top: 1px solid #2a2a2a;
    border-bottom: 0;
  }
}

/* Hero */

.hero {
  position: relative;
  padding: clamp(3rem, 8vw, 6rem) var(--gutter) clamp(3.5rem, 8vw, 6rem);
  /* Pink halftone fading out from the top right, like a cheap screen print. */
  background:
    radial-gradient(circle at 85% 20%, transparent 0, var(--black) 60%),
    radial-gradient(var(--pink) 1.4px, transparent 1.6px) 0 0 / 14px 14px;
}

.hero__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* The one loud thing on the page: the name, stacked, with a hard pink offset and cream drips. */
.wordmark {
  margin: 0 0 1.5rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 8.2vw, 6.6rem);
  line-height: 0.88;
  letter-spacing: -0.01em;
  color: var(--cream);
  text-shadow: 0.05em 0.05em 0 var(--pink);
}

.wordmark__line {
  display: block;
}

.wordmark__line:first-child {
  transform: rotate(-3deg);
  transform-origin: left bottom;
}

.wordmark__line--drip {
  position: relative;
  width: fit-content;
  color: var(--yellow);
  text-shadow: 0.05em 0.05em 0 var(--pink), 0.1em 0.1em 0 var(--ink);
}

.hero__tagline {
  max-width: 34ch;
  margin: 0 0 1.75rem;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--cream-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.hero__soon {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 800;
  font-stretch: 80%;
  font-size: 1.15rem;
  color: var(--blue);
}

.icon-bolt {
  color: var(--yellow);
  flex: none;
}

.hero__art {
  position: relative;
  margin: 0;
  justify-self: center;
  max-width: 380px;
  transform: rotate(3deg);
  will-change: translate;
}

.hero__art img {
  border: 4px solid var(--cream);
  border-radius: 6px;
  box-shadow: 10px 10px 0 var(--pink), 20px 20px 0 var(--blue);
}

.hero__art .placeholder--sticker {
  top: auto;
  bottom: -0.9rem;
  left: -0.8rem;
  right: auto;
  transform: rotate(-6deg);
}

@media (max-width: 820px) {
  .hero__inner {
    grid-template-columns: 1fr;
  }

  .wordmark {
    font-size: clamp(2.5rem, 13.5vw, 6.6rem);
  }

  /* Centred, nudged left by half the 20px offset shadow so the art plus shadow reads as centred. */
  .hero__art {
    max-width: 260px;
    justify-self: center;
    margin-right: 20px;
  }
}

/* Ticker */

.ticker {
  position: relative;
  z-index: 2;
  overflow: hidden;
  margin: -1.25rem -2rem 0;
  padding: 0.7rem 0;
  background: var(--yellow);
  color: var(--ink);
  transform: rotate(-1.5deg);
  border-block: 3px solid var(--ink);
}

.ticker__track {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  width: max-content;
  animation: ticker 32s linear infinite;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.2vw, 1.4rem);
  white-space: nowrap;
}

.ticker__cherry {
  width: 1.2em;
  height: 1.2em;
  color: var(--pink);
  flex: none;
}

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

/* Slabs (page sections) */

.slab {
  position: relative;
  padding: clamp(4rem, 9vw, 7rem) var(--gutter);
}

.slab__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.slab--pink {
  background: var(--pink);
  color: var(--ink);
  padding-top: clamp(5rem, 10vw, 8rem);
}

.slab--yellow {
  background: var(--yellow);
  color: var(--ink);
}

.slab--after-drip {
  padding-top: clamp(8.5rem, 12vw, 9.5rem);
}

.slab--before-drip {
  padding-bottom: clamp(8.5rem, 12vw, 9.5rem);
}

/* Parallax seams: every colour change between slabs is a drip of one colour pouring over the next.
   The seam is a solid strip in the source colour with the drip on its end, and initParallax()
   slides it up to --parallax-max either way, so the drip stretches further into the next section
   as the seam crosses the viewport. The strip is 2x the travel and starts that far back inside its
   own slab (tucked under the slab's content), so at either extreme there's still solid colour
   between the slab edge and the drip: no gap, no hard edge showing through. */
.seam {
  --parallax-max: 36px;
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: none;
  will-change: translate;
}

.seam::before {
  content: "";
  flex: none;
  height: calc(2 * var(--parallax-max) + 2px);
  background: currentColor;
}

/* The drip art is 1200 units wide and stretches to fit, so on a phone it would squash into skinny
   spikes. Never draw it narrower than 900px; the seam clips whatever overhangs the viewport. */
.seam .drip {
  display: block;
  flex: none;
  width: max(100%, 900px);
  height: clamp(48px, 5vw, 64px);
}

/* Overlap the strip by 1px so no anti-aliased hairline shows where the strip meets the drip. */
.seam--down {
  top: calc(100% - var(--parallax-max) - 2px);
}

.seam--down .drip {
  margin-top: -1px;
}

.seam--up {
  bottom: calc(100% - var(--parallax-max) - 2px);
  flex-direction: column-reverse;
}

.seam--up .drip {
  margin-bottom: -1px;
  transform: scaleY(-1) scaleX(-1);
}

.seam--mirror .drip {
  transform: scaleX(-1);
}

.slab--pink .seam {
  color: var(--pink);
}

.slab--yellow .seam {
  color: var(--yellow);
}

/* Keep slab content above the part of a seam strip that reaches back into its own slab. */
.slab__inner {
  position: relative;
  z-index: 2;
}

.heading {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
}

.lede {
  max-width: 36ch;
  margin: 0;
  font-size: 1.2rem;
  font-weight: 500;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 2rem 4rem;
  align-items: start;
}

@media (max-width: 820px) {
  .split {
    grid-template-columns: 1fr;
  }
}

/* About: case file */

.dossier {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 3rem 5rem;
  align-items: center;
}

.dossier__file {
  max-width: 60ch;
}

.dossier__file .heading {
  color: var(--pink);
}

.polaroid {
  position: relative;
  margin: 0;
  padding: 0.9rem 0.9rem 0;
  background: var(--cream);
  color: var(--ink);
  transform: rotate(-4deg);
  box-shadow: 8px 8px 0 var(--blue);
  max-width: 340px;
}

/* A strip of tape holding the photo to the file. */
.polaroid::before {
  content: "";
  position: absolute;
  top: -0.9rem;
  left: 50%;
  width: 7rem;
  height: 1.8rem;
  background: rgba(255, 230, 0, 0.8);
  transform: translateX(-50%) rotate(3deg);
}

.polaroid__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(255, 45, 107, 0.12) 10px 20px),
    #1a1a1a;
  color: var(--pink);
}

.polaroid__photo svg {
  width: 55%;
}

.polaroid__photo .placeholder {
  position: absolute;
  bottom: 0.6rem;
  left: 0.6rem;
}

.polaroid figcaption {
  padding: 0.7rem 0 0.9rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  text-align: center;
}

@media (max-width: 820px) {
  .dossier {
    grid-template-columns: 1fr;
  }

  .polaroid {
    width: 100%;
    max-width: 280px;
    justify-self: center;
  }
}

/* Music: milk bar menu board */

.slab--menu {
  padding-top: clamp(1rem, 3vw, 2rem);
}

.menu-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.menu-head .heading {
  margin: 0;
  color: var(--blue);
}

/* Countdown styled as a price tag. */
.countdown {
  padding: 0.6rem 1.2rem 0.7rem;
  background: var(--pink);
  color: var(--ink);
  border-radius: 999px 999px 999px 8px;
  transform: rotate(-4deg);
  box-shadow: 5px 5px 0 var(--yellow);
  text-align: center;
}

.countdown__label {
  margin: 0;
  font-weight: 700;
  font-stretch: 80%;
  font-size: 0.85rem;
}

.countdown__value {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.8rem;
  line-height: 1.1;
}

.menu-body {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 2rem 3rem;
  align-items: start;
}

.embed-frame {
  position: relative;
  padding: 10px;
  border: 3px solid var(--blue);
  border-radius: 22px;
}

.spotify-embed {
  display: block;
  border-radius: 12px;
}

.menu-side h3 {
  margin: 0 0 0.5rem;
  font-weight: 900;
  font-stretch: 70%;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--cream);
}

.platform-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0;
  margin: 0;
}

.platform-links a {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.6rem 0;
  color: var(--cream);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.15rem;
}

/* Menu-board dot leaders between the item and its "price". */
.platform-links a::before {
  content: "";
  order: 1;
  flex: 1;
  height: 0.3em;
  background: radial-gradient(var(--cream-muted) 1px, transparent 1.5px) 0 0 / 8px 100% repeat-x;
}

.platform-links a::after {
  content: "Listen";
  order: 2;
  padding: 0.15rem 0.7rem 0.2rem;
  background: var(--pink);
  color: var(--ink);
  border-radius: 999px 999px 999px 6px;
  box-shadow: 3px 3px 0 var(--yellow);
  transform: rotate(-4deg);
  font-weight: 800;
  font-stretch: 80%;
  font-size: 0.95rem;
}

.platform-links a:hover::after,
.platform-links a:focus-visible::after {
  background: var(--blue);
}

.platform-links a:hover,
.platform-links a:focus-visible {
  color: var(--blue);
}

@media (max-width: 820px) {
  .menu-body {
    grid-template-columns: 1fr;
  }
}

/* Buttons */

.button {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  border: 3px solid var(--ink);
  border-radius: 999px;
  font: 800 1rem/1 var(--font-body);
  font-stretch: 90%;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.button--pink {
  background: var(--pink);
  color: var(--ink);
  border-color: var(--cream);
  box-shadow: 4px 4px 0 var(--cream);
}

.button--black {
  background: var(--ink);
  color: var(--cream);
  box-shadow: 4px 4px 0 var(--cream);
}

.slab--yellow .button--black {
  box-shadow: 4px 4px 0 var(--pink);
}

.button:hover,
.button:focus-visible {
  transform: translate(-2px, -2px) rotate(-2deg);
}

.button:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 transparent;
}

.button:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* Forms */

.form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.form__honeypot {
  position: absolute;
  left: -9999px;
}

.form__input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 0.85rem 1rem;
  background: var(--cream);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 10px;
  font: 500 1rem/1.3 var(--font-body);
}

.form__input::placeholder {
  color: #6b604b;
}

.form__input:focus-visible {
  outline-offset: 2px;
}

.form__input--select {
  flex: 0 1 190px;
  appearance: none;
  padding-right: 2.2rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(-45deg, transparent 50%, var(--ink) 50%);
  background-position: calc(100% - 1.2rem) 55%, calc(100% - 0.8rem) 55%;
  background-size: 0.4rem 0.4rem;
  background-repeat: no-repeat;
}

.form__input--textarea {
  flex-basis: 100%;
  resize: vertical;
}

.form .button {
  flex: none;
}

.form__status {
  min-height: 1.4em;
  margin: 0.75rem 0 0;
  font-weight: 600;
}

.form__status[data-state="error"] {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  background: var(--ink);
  color: var(--yellow);
  border-radius: 6px;
}

@media (max-width: 520px) {
  .form__input--select,
  .form .button {
    flex: 1 1 100%;
  }
}

/* Footer */

.site-footer {
  padding: 4rem var(--gutter) 3rem;
  text-align: center;
  color: var(--cream-muted);
}

/* Extra top room for the yellow drip hanging off the contact slab. */
.site-footer--after-drip {
  padding-top: clamp(8.5rem, 12vw, 9.5rem);
}

.site-footer__sign {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: var(--pink);
  text-shadow: 3px 3px 0 var(--blue);
}

.social-links {
  display: flex;
  gap: 1.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.social-links a {
  color: var(--cream);
  font-weight: 700;
  text-decoration: none;
}

.social-links a:hover,
.social-links a:focus-visible {
  color: var(--blue);
}

.site-footer__legal {
  margin: 0;
  font-size: 0.85rem;
}

/* Shop page */

.shop {
  min-height: 60vh;
}

.shop .heading {
  color: var(--yellow);
}

.shop__shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 40%), 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
  padding: 0;
  list-style: none;
}

.shop__item {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 3px dashed #444;
  border-radius: 14px;
  color: #8a8a8a;
  font-family: var(--font-display);
  font-size: 1.1rem;
}

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

  .ticker__track {
    animation: none;
  }

  .button:hover,
  .button:focus-visible {
    transform: none;
  }
}