/* Wet Paint: a loud graphic poster. Slime green as a surface, type as image, hard edges. */
:root {
  --bg: oklch(0.13 0 0);
  --ink: oklch(0.97 0 0);
  --ink-2: oklch(0.86 0 0);            /* 13px labels; passes the body bar (Lc 78.5) */
  --slime: oklch(0.75 0.191 126.8);    /* #8ec20a, sampled from the Slime Beliefs cover (the most saturated quarter of its slime greens); was oklch(0.849 0.205 132.4) from the Slimin Fa Diamonds card */
  --on-slime: oklch(0.16 0.03 140);
  /* Text on the green, or green text on the dark, is at least 16px bold: against this darker
     green that is where it reaches APCA Lc 60 (it is 9.1:1 in WCAG terms) */
  --focus: var(--slime);
  --dialog-bg: oklch(0.17 0 0);
  --display: "Anton", Impact, "Arial Narrow", sans-serif;
  --text: "Archivo", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
}

body { font: 400 16px/1.55 var(--text); }

.band { position: relative; background: var(--slime); color: var(--on-slime); --focus: var(--on-slime); }
.section-title {
  margin: 0 var(--gutter) 20px;
  font: 400 clamp(3rem, 12vw, 9rem)/0.85 var(--display); text-transform: uppercase; letter-spacing: -0.01em;
}

/* Header band */
.band-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(8px, env(safe-area-inset-top)) var(--gutter) 8px;
}
.mark { display: inline-flex; align-items: center; min-height: 44px; font: 400 24px/1 var(--display); text-transform: uppercase; text-decoration: none; }
.band-top ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.band-top nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  font: 700 16px/1 var(--text); font-stretch: 112%; text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .band-top nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } }
/* On phones the links keep their 16px size and drop the extra width instead, so all four fit
   one row from 360px; narrower than that they sit two by two rather than being cut off */
@media (max-width: 520px) { .mark { display: none; } .band-top { justify-content: center; } .band-top nav a { padding: 0 5px; font-stretch: 100%; letter-spacing: 0; } }
@media (max-width: 359px) { .band-top ul { display: grid; grid-template-columns: auto auto; justify-content: center; column-gap: 12px; } }

/* Hero: the loop in slime duotone, the name as a wall of type */
.hero { --focus: oklch(1 0 0); position: relative; isolation: isolate; min-height: calc(100svh - 60px - env(safe-area-inset-top)); display: grid; align-content: end; padding: 0 0 28px; overflow: clip; }
.hero-media { position: absolute; inset: 0; z-index: -1; background: var(--on-slime); }
.hero-media video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.25) brightness(0.9); }
.hero-media::after { content: ""; position: absolute; inset: 0; background: var(--slime); mix-blend-mode: multiply; }
.hero-media::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* The name covers most of the hero, so the whole frame is darkened, not just the foot */
  background: linear-gradient(to top, rgb(7 7 7 / 0.92) 0%, rgb(7 7 7 / 0.62) 55%, rgb(7 7 7 / 0.55) 100%);
}
.hero-media .loop-toggle { position: absolute; top: 16px; right: var(--gutter); z-index: 2; }
.hero-name {
  padding: 0 var(--gutter);
  font: 400 clamp(5rem, 27vw, 26rem)/0.8 var(--display);
  text-transform: uppercase; letter-spacing: -0.02em; color: var(--ink);
  text-wrap: balance;
}
.hero-meta {
  margin: 16px var(--gutter) 0;
  font: 700 14px/1.3 var(--text); font-stretch: 112%; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2);
}

/* Release band */
.release { padding: 56px 0 0; }
.release-grid {
  display: grid; gap: 32px; padding: 0 var(--gutter) 40px; align-items: center;
}
@media (min-width: 56rem) { .release-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }
.release-copy { display: grid; gap: 20px; justify-items: start; min-width: 0; }
.kicker { font: 800 16px/1.2 var(--text); font-stretch: 118%; text-transform: uppercase; letter-spacing: 0.02em; }
.release-title {
  font: 400 clamp(4rem, 14vw, 11rem)/0.82 var(--display); text-transform: uppercase; letter-spacing: -0.015em;
  text-wrap: balance;
}
.countdown-units { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; }
.unit { display: grid; padding-right: clamp(10px, 2.5vw, 20px); margin-right: clamp(10px, 2.5vw, 20px); border-right: 3px solid var(--on-slime); }
[data-calm] .unit:nth-child(3) { border-right: 0; margin-right: 0; padding-right: 0; }
.unit:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.unit .digits { display: inline-block; font: 400 clamp(2.5rem, 9vw, 6rem)/0.95 var(--display); }
.unit small { font: 800 16px/1.2 var(--text); font-stretch: 112%; text-transform: uppercase; letter-spacing: 0.04em; }
.countdown-done { font: 400 clamp(3rem, 9vw, 6rem)/0.95 var(--display); text-transform: uppercase; }
.release-cover { width: 100%; height: auto; transform: rotate(2deg); box-shadow: 12px 12px 0 var(--on-slime); }

.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px;
  background: var(--on-slime); color: var(--slime);
  font: 800 16px/1 var(--text); font-stretch: 112%; text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none;
}

/* Hangs below its band, over the next section */
.drip { position: absolute; left: 0; top: calc(100% - 1px); z-index: 1; display: block; width: 100%; height: clamp(48px, 9vw, 120px); color: var(--slime); pointer-events: none; }

/* Videos */
.videos { padding: clamp(96px, 14vw, 180px) 0 64px; }
.reels { display: grid; gap: 16px; margin: 0; padding: 0 var(--gutter); list-style: none; }
@media (min-width: 56rem) { .reels { grid-template-columns: 1fr 1fr; } }
.reel { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #000; text-align: start; }
.reel-poster { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); opacity: 0.55; transition: opacity 200ms ease; }
.reel-mark { position: absolute; inset: 8% 8% 22%; width: 84%; height: 70%; object-fit: contain; }
.reel-bar {
  position: absolute; inset: auto 0 0 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: var(--slime); color: var(--on-slime);
}
.reel-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 clamp(1.5rem, 4vw, 2.25rem)/1.1 var(--display); text-transform: uppercase; }
.reel-play { font: 800 16px/1 var(--text); font-stretch: 112%; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .reel:hover .reel-poster { opacity: 0.8; } }

/* Photos: a hard-edged collage */
.photos { padding: 32px 0 96px; }
.collage {
  display: grid; gap: 6px; margin: 0; padding: 0 var(--gutter); list-style: none;
  grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; grid-auto-flow: dense;
}
@media (min-width: 56rem) { .collage { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 240px; } }
.collage li.tall { grid-row: span 2; }
.collage li.wide { grid-column: span 2; }
.collage button { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
/* Hover ring drawn above the photo, which otherwise covers the whole button */
.collage button::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 4px var(--slime); opacity: 0; transition: opacity 150ms ease; pointer-events: none; }
.collage img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) {
  .collage button:hover::after { opacity: 1; }
  .collage button:hover img { opacity: 0.9; }
}

/* Listen band */
.listen { padding: 56px 0 calc(120px + env(safe-area-inset-bottom)); }
.listen-links { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 0 0 28px; padding: 0 var(--gutter); list-style: none; }
.listen-links a {
  display: inline-flex; align-items: baseline; gap: 10px; min-height: 48px;
  font: 400 clamp(2.5rem, 8vw, 5.5rem)/1 var(--display); text-transform: uppercase; text-decoration: none;
}

.listen-links .missing-note { font: 800 13px/1 var(--text); letter-spacing: 0.04em; }
.listen-booking, .fine { margin: 0 var(--gutter); }
.listen-booking { font: 700 18px/1.5 var(--text); }
.fine { margin-top: 20px; font: 800 16px/1.3 var(--text); font-stretch: 112%; text-transform: uppercase; letter-spacing: 0.04em; }

.sheet-title { font: 800 13px/1.3 var(--text); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2); }