/* lowkey718 bio — public page */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; }

body {
  font-family: var(--font, system-ui, sans-serif);
  color: var(--text, #fff);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.bg {
  position: fixed; inset: 0; z-index: -1;
  background-size: cover; background-position: center;
  background-color: var(--bg-solid, #0f0f12);
}

.wrap {
  max-width: 520px;
  margin: 0 auto;
  padding: 48px 20px 56px;
  display: flex; flex-direction: column; align-items: center;
  gap: 16px;
}

/* ---------- hero: cut-out figure floating over the background ---------- */
.wrap.has-hero { padding-top: 20px; gap: 12px; }

/* one source of truth: the sticker band sits at --split down the hero, and the
   red-to-black colour block breaks on exactly that line */
:root { --hero-h: clamp(420px, 68vh, 640px); --split: 77%; }

.hero {
  position: relative;
  width: 100%;
  display: flex; justify-content: center;
  margin-bottom: -4px;
  height: var(--hero-h);
}

/* The mark is clipped to the sticker line (--split, 77%) so it never hangs
   below into the black. The mask fades the last few percent so the cut reads
   as the mark sinking behind the sticker band rather than being chopped. */
.hero-mark {
  position: absolute; left: 0; right: 0; top: 0;
  height: 77%;
  display: grid; place-items: center;
  overflow: hidden;
  z-index: 0;                     /* behind the figure, above the red */
  pointer-events: none;
  /* Two masks composited: one ends the mark at the sticker line, the other
     feathers the left and right arms so they dissolve into the wall instead
     of being sliced flat by the container edge. */
  -webkit-mask-image:
    linear-gradient(to bottom, #000 0 86%, rgba(0,0,0,.45) 95%, transparent 100%),
    linear-gradient(to right,  transparent 0, rgba(0,0,0,.5) 6%, #000 16%, #000 84%, rgba(0,0,0,.5) 94%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to bottom, #000 0 86%, rgba(0,0,0,.45) 95%, transparent 100%),
    linear-gradient(to right,  transparent 0, rgba(0,0,0,.5) 6%, #000 16%, #000 84%, rgba(0,0,0,.5) 94%, transparent 100%);
          mask-composite: intersect;
}
.hero-mark img {
  width: min(150%, 860px); height: auto; max-width: none;
  box-shadow: none;
  /* Raised, not carved: a tight highlight on the lit edge and a tight core
     shadow on the far edge give it thickness, then a soft cast shadow lifts
     the whole thing clear of the molten glow and the static behind it. */
  mix-blend-mode: normal;
  opacity: .95;
  /* the bevel shadows carry a little blur — hard 0px edges re-introduce the
     stair-stepping the artwork was just cleaned of */
  filter:
    drop-shadow(-2px -3px 1.5px rgba(255,196,168,.5))
    drop-shadow( 3px  4px 2px   rgba(58,4,2,.6))
    drop-shadow( 9px 12px 16px  rgba(0,0,0,.5));
  image-rendering: auto;
}
/* the layer itself is blended, so it can't punch a hole in the background */
.hero-mark { mix-blend-mode: normal; isolation: auto; }
.hero .hero-img { position: relative; z-index: 1; }

.hero-img {
  height: 100%; width: auto; max-width: 100%;
  object-fit: contain; object-position: center bottom;
  /* the figure ends at the sticker line (77%) — no legs below the colour break */
  --cut: linear-gradient(to bottom,
          #000 0 64%, rgba(0,0,0,.92) 72%, rgba(0,0,0,.45) 78%, transparent 83%);
  -webkit-mask-image: var(--cut); mask-image: var(--cut);
  filter: none;                  /* no shadow behind the floating figure */
  transform: translate3d(0,0,0);
  will-change: transform;
}

/* warm bloom behind the figure so it lifts off flat color */
.hero-glow {
  position: absolute; left: 50%; bottom: 4%;
  width: min(100%, 560px); height: 74%;
  transform: translateX(-50%);
  background: none;              /* removed: was a dark patch only behind the figure */
  filter: none;
  pointer-events: none;
}

/* entrance */
.hero-img { animation: hero-in .9s cubic-bezier(.16,.84,.34,1) both; }
.hero-glow { animation: glow-in 1.1s ease-out both; }
@keyframes hero-in { from { opacity: 0; transform: translate3d(0,26px,0) scale(.97); } }
@keyframes glow-in { from { opacity: 0; } }

/* idle float + pointer parallax (JS sets --px/--py).
   The float lives on a wrapper so it composes with the parallax transform
   instead of overwriting it — and it animates transform, not margin, so the
   browser never re-lays-out mid-drift. */
.hero-float { display: block; will-change: transform; }
.hero.fx .hero-float {
  animation: hero-float 11s cubic-bezier(.37,0,.63,1) infinite;
}
.hero.fx .hero-img {
  animation: hero-in .9s cubic-bezier(.16,.84,.34,1) both;
  transform: translate3d(calc(var(--px, 0) * 12px), calc(var(--py, 0) * 8px), 0);
  transition: transform .9s cubic-bezier(.22,.61,.36,1);
}
.hero.fx .hero-glow {
  transform: translateX(-50%) translate3d(calc(var(--px, 0) * -7px), calc(var(--py, 0) * -4px), 0);
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
@keyframes hero-float {
  0%, 100% { transform: translate3d(0, 0, 0)      scale(1);     }
  50%      { transform: translate3d(0, -15px, 0)  scale(1.006); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-float, .hero-img, .hero-glow { animation: none !important; transition: none !important; transform: none !important; }
  .hero.fx .hero-glow { transform: translateX(-50%) !important; }
}

/* ---------- die-cut logo stickers, slapped across at hand height ---------- */
/* ---------- red → black colour block, breaking at the sticker midline ---------- */
body.hero-page { background: #000; }
/* the red becomes a block that ends on the split line instead of a full-bleed fill */
body.hero-page .bg {
  position: absolute; top: 0; left: 0; right: 0; bottom: auto;
  height: calc(20px + var(--hero-h) * 0.77);   /* wrap padding + split point */
}
body.hero-page .wrap { position: relative; z-index: 1; }

/* ---- analog TV static across the ENTIRE red block ---- */
body.hero-page .bg { overflow: hidden; }
body.hero-page .bg::before,
body.hero-page .bg::after {
  content: ""; position: absolute; inset: 0;
  pointer-events: none; z-index: 2;      /* over the molten glow */
  mix-blend-mode: multiply;      /* grey snow x red = dark red static */
}

/* molten light — slow heat blooms under the static, like the album's lit wall */
body.hero-page .molten {
  position: absolute; inset: -20%; z-index: 1; pointer-events: none;
  background:
    radial-gradient(28% 22% at 24% 28%, rgba(255,138,74,.55), transparent 68%),
    radial-gradient(32% 26% at 74% 44%, rgba(232,64,31,.50), transparent 70%),
    radial-gradient(24% 20% at 52% 74%, rgba(255,96,48,.42), transparent 72%),
    radial-gradient(38% 30% at 40% 12%, rgba(180,22,10,.55), transparent 74%);
  filter: blur(34px) saturate(1.2);
  mix-blend-mode: screen;                 /* light added onto the deep red */
  /* two animations on different clocks so the motion never visibly repeats */
  animation: molten-drift 9s ease-in-out infinite alternate,
             molten-churn 13s ease-in-out infinite;
  will-change: transform, opacity, background-position;
  background-size: 180% 180%, 200% 200%, 170% 170%, 220% 220%;
}
@keyframes molten-drift {
  0%   { transform: translate3d(-9%, -6%, 0) scale(1.00) rotate(-2deg); opacity: .78; }
  35%  { transform: translate3d( 7%,  5%, 0) scale(1.22) rotate( 3deg); opacity: 1;   }
  70%  { transform: translate3d(-5%,  8%, 0) scale(1.08) rotate(-1deg); opacity: .9;  }
  100% { transform: translate3d(10%, -7%, 0) scale(1.18) rotate( 4deg); opacity: 1;   }
}
/* the blooms slide across each other, so the heat looks like it moves */
@keyframes molten-churn {
  0%   { background-position:   0%   0%, 100%   0%,   0% 100%, 100% 100%; }
  50%  { background-position: 100%  60%,   0%  80%,  70%   0%,  20%  40%; }
  100% { background-position:   0%   0%, 100%   0%,   0% 100%, 100% 100%; }
}
@media (prefers-reduced-motion: reduce) {
  body.hero-page .molten { animation: none; }
}
/* fine snow — the bulk of the effect */
body.hero-page .bg::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='3.1' intercept='-.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23s)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: .78;
  animation: tv-snow .07s steps(1) infinite;
}
/* coarser second layer at a different rate so it never visibly repeats */
body.hero-page .bg::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23c)'/%3E%3C/svg%3E");
  background-size: 320px 320px;
  opacity: .46;
  animation: tv-snow-2 .11s steps(1) infinite;
}
/* hard position jumps = the flicker of analog snow */
@keyframes tv-snow {
  0%{background-position:0 0}      20%{background-position:-57px 33px}
  40%{background-position:71px -49px} 60%{background-position:-91px -23px}
  80%{background-position:43px 67px}  100%{background-position:19px -71px}
}
@keyframes tv-snow-2 {
  0%{background-position:0 0}      25%{background-position:83px -41px}
  50%{background-position:-63px 77px} 75%{background-position:37px 51px}
  100%{background-position:-29px -59px}
}
@media (prefers-reduced-motion: reduce) {
  body.hero-page .bg::before,
  body.hero-page .bg::after { animation: none; }
}

/* everything past the hero reads on black */
body.hero-page .name,
body.hero-page .tagline { color: #fff; }

.hero-stickers {
  /* Span the full width of the phone. Four stickers lapping by .34 occupy
     --s * 2.98, and the ±10deg tilt adds ~.08--s at each end, so the visual
     width is ~3.15--s. Solve for that against the viewport, cap on desktop. */
  --s: min(calc((100vw - 12px) / 3.15), 150px);
  position: absolute; left: 50%; top: 77%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  width: max-content; max-width: none;
  z-index: 3; isolation: isolate;
}
.hero-stickers a {
  --rot: 0deg; --lift: 0px; --sc: 1; --shift: 0%;
  position: relative; flex: 0 0 auto;
  width: var(--s); height: var(--s);
  min-width: 44px; min-height: 44px;
  display: grid; place-items: center;
  z-index: calc(var(--i, 0) + 1);
  transform: translate(var(--shift), var(--lift)) rotate(var(--rot)) scale(var(--sc));
  transition: transform .3s cubic-bezier(.2,.9,.25,1.2), filter .3s ease;
  -webkit-tap-highlight-color: transparent;
}
/* each laps the previous — enough to read as a stack, not so much
   that the logo silhouettes stop being recognisable */
.hero-stickers a + a { margin-left: calc(var(--s) * -.34); }

/* hand-slapped tilt */
.hero-stickers a:nth-child(1) { --rot: -10deg; --lift: 4px; }
.hero-stickers a:nth-child(2) { --rot:   7deg; --lift: -6px; }
.hero-stickers a:nth-child(3) { --rot:  -6deg; --lift: 5px; }
.hero-stickers a:nth-child(4) { --rot:  11deg; --lift: -4px; }

.hero-stickers svg {
  width: 100%; height: 100%; display: block; overflow: visible;
  /* the lift off the page */
  filter: drop-shadow(2px 4px 3px rgba(46,2,0,.55));
}
/* the die cut: a white lip painted BEHIND the fill, hugging the glyph outline */
.hero-stickers svg path {
  paint-order: stroke fill;
  stroke: #fff; stroke-width: 2.1;
  stroke-linejoin: round; stroke-linecap: round;
}

/* hovered sticker straightens, lifts and peels above the stack */
.hero-stickers a:hover, .hero-stickers a:focus-visible {
  --rot: 0deg; --sc: 1.16; --lift: -10px; z-index: 20;
}
.hero-stickers a:hover svg, .hero-stickers a:focus-visible svg {
  filter: drop-shadow(4px 9px 8px rgba(46,2,0,.6));
}
/* the rest of the stack parts around it */
.hero-stickers a:hover ~ a { --shift: 9%; }
.hero-stickers a:has(~ a:hover) { --shift: -9%; }
.hero-stickers a:active { --sc: 1.04; --lift: -2px; transition-duration: .08s; }
.hero-stickers a:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  .hero-stickers a { transition: none; }
  .hero-stickers a:hover, .hero-stickers a:focus-visible { --sc: 1; --lift: 0px; }
  .hero-stickers a:hover ~ a, .hero-stickers a:has(~ a:hover) { --shift: 0%; }
}

.avatar {
  width: 104px; height: 104px; object-fit: cover;
  border: 2px solid rgba(255,255,255,.35);
  box-shadow: 0 10px 34px rgba(0,0,0,.4);
}
.avatar.circle  { border-radius: 50%; }
.avatar.rounded { border-radius: 24px; }
.avatar.square  { border-radius: 8px; }
.avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  font-size: 42px; font-weight: 800;
  background: rgba(255,255,255,.14);
}

.name { font-size: 1.55rem; font-weight: 800; margin: 4px 0 0; text-align: center; letter-spacing: -.02em; }
.tagline { margin: 0; opacity: .82; text-align: center; font-size: .98rem; }

.socials { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 6px 0 2px; }
.socials a {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--text);
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16);
  transition: transform .15s ease, background .15s ease;
}
.socials a:hover { transform: translateY(-2px); background: rgba(255,255,255,.22); }
.socials svg { width: 22px; height: 22px; }

/* ---------------- featured releases ---------------- */
.albums { width: 100%; display: flex; flex-direction: column; gap: 0; margin: 26px 0 0; }

/* Each release is a full-bleed panel that breaks out of the 520px column.
   The panel itself animates in, carrying its background with it. */
.album {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding: 40px max(20px, calc(50vw - 260px)) 44px;
  overflow: hidden;                 /* the slide-in must never widen the page */
  opacity: 0;
  transition: opacity .75s ease, transform .85s cubic-bezier(.16,.84,.34,1);
}
/* --dir drives every child's entry so the whole panel arrives as one gesture */
.album.from-left  { --dir: -1; transform: translateX(-38px); }
/* "swing": a touch of rotation so it arrives with weight rather than sliding flat */
.album.from-right { --dir:  1; transform: translateX(38px) rotate(1.2deg); }
.album.in { opacity: 1; transform: none; }

.album--dark  { background: #000; }
.album--light { background: #f2f0eb; color: #0b0b0b; }
/* Opening pushes the artwork left but keeps it on screen; the platform list
   slides in beside it, so you always see which release you're choosing for. */
.album-inner { position: relative; }

.album-stage {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px;
  transform-origin: left center;
  transition: transform .6s cubic-bezier(.34,.02,.28,1), opacity .5s ease, filter .5s ease;
}
.album.open .album-stage {
  transform: translateX(-30%) scale(.62);
  opacity: .42; filter: saturate(.7);
  pointer-events: none;              /* the shrunk player must not swallow taps */
}

/* cover art — slides in from the left when scrolled into view.
   It is also the tap target that reveals the other platforms. */
.album-art {
  position: relative; display: block; padding: 0;
  width: 100%; aspect-ratio: 1; overflow: hidden;   /* matches the paper panel */
  border: 0; border-radius: 4px; background: none;
  box-shadow: 0 18px 44px rgba(0,0,0,.6);
  opacity: 0; transform: translateX(calc(var(--dir, -1) * 56px));
  transition: opacity .7s ease .06s, transform .8s cubic-bezier(.16,.84,.34,1) .06s, box-shadow .3s ease;
  -webkit-tap-highlight-color: transparent;
}
button.album-art { cursor: pointer; }
.album-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album.in .album-art { opacity: 1; transform: translateX(0); }

/* the affordance */
.album-art-hint {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 34px 10px 11px;
  background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,.45) 45%, transparent);
  color: #fff; font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  transition: opacity .25s ease;
}
.album-art-hint span::after { content: " \203A"; opacity: .8; }
button.album-art:hover { box-shadow: 0 22px 52px rgba(0,0,0,.72); }
button.album-art:hover .album-art-hint { opacity: .82; }
button.album-art:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

/* each release gets its own player */
.album-embed {
  width: 100%; margin-top: 4px;
  opacity: 0; transform: translateX(calc(var(--dir, -1) * 24px));
  transition: opacity .7s ease .28s, transform .8s cubic-bezier(.16,.84,.34,1) .28s;
}
.album.in .album-embed { opacity: 1; transform: translateY(0); }

/* fallback trigger when a release has no cover image yet */
.album-more {
  align-self: center; margin-top: 2px;
  min-height: 44px; padding: 0 6px;
  background: none; border: 0; cursor: pointer;
  color: var(--text); opacity: .68;
  font: inherit; font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  transition: opacity .2s ease;
}
.album-more::after { content: " \203A"; }
.album-more:hover { opacity: 1; }
.album-more:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.services-for {
  margin: 0 0 10px; padding: 0 6px;
  font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; opacity: .5;
}

.album-meta {
  text-align: center;
  opacity: 0; transform: translateX(calc(var(--dir, -1) * 34px));
  transition: opacity .7s ease .16s, transform .8s cubic-bezier(.16,.84,.34,1) .16s;
}
.album.in .album-meta { opacity: 1; transform: translateX(0); }
.album-title { margin: 0; font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; }
.album-sub { margin: 4px 0 0; font-size: .86rem; opacity: .62; letter-spacing: .16em; text-transform: uppercase; }


/* ---- streaming services: icons + plain text, no borders ---- */
.album-services {
  position: absolute; top: 0; right: 0;
  width: 62%; max-width: 340px;
  opacity: 0; transform: translateX(18px); pointer-events: none;
  transition: opacity .45s ease .12s, transform .55s cubic-bezier(.16,.84,.34,1) .12s;
}
.album.open .album-services { opacity: 1; transform: none; pointer-events: auto; }
.services { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.services a {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 6px; min-height: 56px;
  color: var(--text); text-decoration: none;
  font-size: 1.02rem; font-weight: 600;
  border: 0; background: none;
  transition: opacity .18s ease, transform .18s ease;
}
.services a:hover { opacity: .62; transform: translateX(4px); }
.svc-ico { flex: 0 0 26px; width: 26px; height: 26px; display: block; }
.svc-ico svg { width: 100%; height: 100%; display: block; }
.svc-name { flex: 1; }
.services-back {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-bottom: 6px; padding: 0 6px;
  background: none; border: 0; cursor: pointer;
  color: var(--text); opacity: .6; font: inherit; font-size: .86rem; font-weight: 600;
}
.services-back:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .album-inner, .album-art, .album-meta, .album-embed, .album-services { transition: none !important; }
  .album-art, .album-meta, .album-embed { opacity: 1 !important; transform: none !important; }
}

.embed { width: 100%; margin: 6px 0; }
.embed iframe { width: 100%; border: 0; border-radius: 14px; display: block; box-shadow: 0 8px 26px rgba(0,0,0,.3); }
.embed.video { position: relative; aspect-ratio: 16 / 9; }
.embed.video iframe { position: absolute; inset: 0; height: 100%; }

.links { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.link {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 16px 18px; border-radius: var(--radius, 16px); text-decoration: none;
  color: var(--text); font-weight: 600; font-size: 1rem;
  transition: transform .15s ease, background .15s ease, filter .15s ease, box-shadow .15s ease;
}
.link:hover { transform: translateY(-2px); }
.link .ico { font-size: 1.15rem; width: 24px; text-align: center; flex: 0 0 auto; }
.link .lbl { flex: 1; text-align: center; }
.link .arrow { opacity: .45; flex: 0 0 auto; }

body.btn-soft .link { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body.btn-soft .link:hover { background: rgba(255,255,255,.22); }
body.btn-filled .link { background: var(--btn, var(--accent)); box-shadow: 0 6px 20px rgba(0,0,0,.28); }
body.btn-filled .link:hover { filter: brightness(1.18); }
body.btn-outline .link { background: transparent; border: 2px solid var(--btn, var(--accent)); }
body.btn-outline .link:hover { background: var(--btn, var(--accent)); }

.email { width: 100%; margin-top: 8px; position: relative; }
.email h3 { font-size: 1rem; margin: 0 0 10px; text-align: center; font-weight: 700; }
.email form { display: flex; gap: 8px; }
.email input[type=email] {
  flex: 1; min-width: 0; padding: 14px 16px; border-radius: var(--radius, 12px);
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.10);
  color: var(--text); font-size: 1rem; font-family: inherit;
}
.email input[type=email]::placeholder { color: rgba(255,255,255,.55); }
.email input[type=email]:focus { outline: none; border-color: var(--accent); background: rgba(255,255,255,.16); }
.email button {
  padding: 0 20px; border: 0; border-radius: var(--radius, 12px); background: var(--btn, var(--accent));
  color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer; font-family: inherit;
  transition: filter .15s ease;
}
.email button:hover { filter: brightness(1.08); }
.email button:disabled { opacity: .6; cursor: default; }
.email .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.email .msg { margin: 10px 0 0; text-align: center; font-size: .9rem; min-height: 1.2em; opacity: .9; }

.footer { margin-top: 16px; opacity: .5; font-size: .8rem; text-align: center; }

:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 380px) {
  .email form { flex-direction: column; }
  .email button { padding: 14px; }
}

/* full-bleed sections use 100vw; clip (not hidden) keeps sticky working */
html, body { overflow-x: clip; }

/* ============ inverted (paper) release panel ============ */
/* ══ INVERTED ALBUM PANEL — full-bleed paper slab between black sections ══ */


.album--light{
  --paper:#F6F3EE; --ink:#100E0C; --ink-2:#4A4642; --red:#AB1805;
  box-sizing:border-box;
  padding-block: clamp(2.75rem, 10vw, 4.5rem);
  background:var(--paper); color:var(--ink);
  border-block:5px solid var(--red); border-radius:0; /* the seam, both ends */
}
.album--light *{ color:inherit; }            /* no inherited white survives the flip */

/* type */
.album--light .album-title{ color:var(--ink); letter-spacing:-.015em; }
.album--light .album-sub,
.album--light .services-for{ color:var(--ink-2); opacity:1; } /* 8.4:1, never 62% */

/* art + hint chip — it sits on an unknown photo, so: solid paper, never a scrim */
.album--light .album-art{
  display:block; position:relative; width:100%; padding:0; border:0;
  background:none; cursor:pointer;
  box-shadow:0 0 0 1px rgba(16,14,12,.14), 0 20px 44px -26px rgba(16,14,12,.6);
}
.album--light .album-art img{ display:block; width:100%; height:auto; }
.album--light .album-art-hint{
  position:absolute; inset:auto 0 0 0; display:flex; justify-content:center;
  padding:.7rem; background:none;
}
.album--light .album-art-hint > span{
  background:var(--paper); color:var(--ink); padding:.5rem .85rem;
  font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.16em;
  box-shadow:inset 0 0 0 1px rgba(16,14,12,.14);
}

/* embed — the dark player reads as a deliberate ink block, not a hole in the page */
.album--light .album-embed{
  background:var(--ink); border-radius:12px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(16,14,12,.12);
}
.album--light .album-embed iframe{ display:block; width:100%; border:0; }

/* services — still borderless, still 56px; hover is an ink wash, not a box */
.album--light .services a{
  color:var(--ink); text-decoration:none;
  margin-inline:-.75rem; padding-inline:.75rem;
}
.album--light .services a:hover{ background:rgba(16,14,12,.06); }
.album--light .svc-name{ color:var(--ink); }

.album--light .services-back{
  background:none; border:0; color:var(--ink); font:inherit; cursor:pointer;
}
.album--light .services-back:hover{ color:var(--red); }

.album--light :focus-visible{
  outline:2px solid var(--red); outline-offset:3px; border-radius:2px;
}

@media (prefers-reduced-motion: no-preference){
  .album--light .album-art{ transition:box-shadow .3s ease, transform .3s ease; }
  .album--light .services a{ transition:background-color .18s ease; }
  .album--light .album-art:hover{ transform:translateY(-2px);
    box-shadow:0 0 0 1px rgba(16,14,12,.2), 0 26px 52px -26px rgba(16,14,12,.7); }
}
@media (prefers-reduced-motion: reduce){
  .album--light *, .album--light *::before, .album--light *::after{
    transition:none !important; animation:none !important; }
}

/* ============ reel: silent b-roll + youtube CTA ============ */
/* ── REEL ── full-bleed silent B-roll with a YouTube CTA riding on top ──── */
.reel{
  position: relative; isolation: isolate; overflow: hidden;
  width: 100vw; margin-inline: calc(50% - 50vw);
  block-size: 100svh; min-block-size: 480px;   /* svh: no jump when mobile chrome hides */
  background:                                /* designed field if <video> never paints */
    radial-gradient(115% 80% at 50% 6%, rgba(171,24,5,.50), transparent 62%),
    linear-gradient(#170604, #000 72%);
}
/* The footage is never allowed to be colourful: crushed to a low-key red duotone,
   which collapses its luminance range and strips any hue that could fight the CTA. */
.reel-video{
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
  object-fit: cover; background: inherit;    /* broken source falls back to the field */
  filter: grayscale(1) sepia(1) hue-rotate(-34deg) saturate(2.2)
          brightness(.5) contrast(1.15);
}
/* THE CRUX — legibility is layered, not hoped for: 1 eased plinth · 2 top seal into
   the page black · 3 grit that flattens moving detail · 4 the CTA's own plate. */
.reel-scrim{
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 76% at 50% 50%, rgba(0,0,0,.20) 0%, rgba(0,0,0,.62) 62%, rgba(0,0,0,.86) 100%),
    linear-gradient(to bottom, #000 0%, rgba(0,0,0,.45) 7%, rgba(0,0,0,0) 26%),
    linear-gradient(to top,   #000 0%, rgba(0,0,0,.45) 7%, rgba(0,0,0,0) 26%),
    repeating-linear-gradient(rgba(0,0,0,.26) 0 1px, rgba(0,0,0,0) 1px 3px);
}
/* 4 · contrast stops depending on the frame beneath. Worst case — a blown-white
   frame under the bar's lightest point (.80 alpha) — is still ~11:1 for the label. */
.reel-cta{
  position: absolute; inset: auto 0 0 0;
  display: flex; align-items: center; gap: .8rem;
  min-block-size: 56px; padding: .75rem clamp(1rem, 5vw, 1.4rem);
  text-decoration: none; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.94), rgba(0,0,0,.80));
  backdrop-filter: blur(18px) saturate(.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.reel-cta:focus-visible{ outline: 3px solid #fff; outline-offset: -3px; }
.reel-play{
  flex: 0 0 auto; inline-size: 46px; aspect-ratio: 1; border-radius: 50%;
  background: #AB1805; display: grid; place-items: center;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background-color .25s;
}
.reel-play::after{                           /* CSS-drawn triangle, no image */
  content: ""; inline-size: 14px; aspect-ratio: 1; background: #fff;
  margin-inline-start: 3px; clip-path: polygon(6% 0, 100% 50%, 6% 100%);
}
.reel-cta:hover .reel-play, .reel-cta:focus-visible .reel-play{
  background: #C81F08; transform: scale(1.08); box-shadow: 0 0 0 6px rgba(171,24,5,.32);
}
.reel-cta:active .reel-play{ transform: scale(.96); }
.reel-text{ display: flex; flex-direction: column; gap: .12rem; min-inline-size: 0; }
.reel-text strong{ font: 800 1.3rem/1.05 'Gothic A1', sans-serif; letter-spacing: -.01em; }
.reel-text small{
  font: 600 .86rem/1 'Gothic A1', sans-serif;
  text-transform: uppercase; letter-spacing: .16em;
  color: rgba(255,255,255,.82); /* louder than .album-sub: bg isn't guaranteed black */
}
.reel-cta::after{                            /* external-link chevron */
  content: ""; margin-inline-start: auto; flex: 0 0 auto;
  inline-size: 9px; block-size: 9px; transform: rotate(45deg);
  border-top: 2px solid rgba(255,255,255,.55);
  border-right: 2px solid rgba(255,255,255,.55);
  transition: transform .25s ease, border-color .25s ease;
}
.reel-cta:hover::after, .reel-cta:focus-visible::after{
  border-color: #fff; transform: translateX(3px) rotate(45deg);
}
/* No CSS can pause a looping video, so under either flag it simply never plays. */
@media (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce){
  .reel-video{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .reel-play, .reel-cta::after{ transition: none; }
  .reel-cta:hover .reel-play, .reel-cta:focus-visible .reel-play{ transform: none; }
}

/* the YouTube player floats dead centre over the b-roll */
.reel-embed{
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  inline-size: min(92%, 560px); aspect-ratio: 16 / 9;
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14),
              0 30px 70px -24px rgba(0,0,0,.95),
              0 0 90px -20px rgba(171,24,5,.45);
}
.reel-embed iframe{ inline-size: 100%; block-size: 100%; border: 0; display: block; }

/* ---------- scroll reveals: everything arrives, nothing pops ---------- */
html { scroll-behavior: smooth; }

.reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.16,.84,.34,1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* the reel's own contents settle after the section itself */
.reel.reveal .reel-embed {
  opacity: 0; transform: translate(-50%, -50%) scale(.94);
  transition: opacity .7s ease .18s, transform .8s cubic-bezier(.16,.84,.34,1) .18s;
}
.reel.reveal.in .reel-embed { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* mailing list staggers in behind its heading */
.email.reveal h3    { transition: opacity .7s ease .06s, transform .8s cubic-bezier(.16,.84,.34,1) .06s; }
.email.reveal form  { transition: opacity .7s ease .16s, transform .8s cubic-bezier(.16,.84,.34,1) .16s; }
.email.reveal h3,
.email.reveal form  { opacity: 0; transform: translateY(16px); }
.email.reveal.in h3,
.email.reveal.in form { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.in,
  .reel.reveal .reel-embed, .email.reveal h3, .email.reveal form {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .reel.reveal.in .reel-embed { transform: translate(-50%, -50%) !important; }
}

/* legal footer + signup consent */
.email-consent { margin: 10px 0 0; font-size: .74rem; line-height: 1.5; opacity: .58; text-align: center; }
.email-consent a { color: inherit; text-decoration: underline; }
.footer-legal { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-bottom: 8px; }
.footer-legal a { color: inherit; opacity: .75; text-decoration: none; font-size: .8rem; }
.footer-legal a:hover { opacity: 1; text-decoration: underline; }

/* ---------- click-to-load embeds ----------
   Nothing is requested from Spotify/YouTube until the visitor presses play,
   so no third-party cookie is set and no IP is shared before then. */
.embed-lazy { position: relative; width: 100%; }
.embed-lazy:not(.video) { height: var(--embed-h, 152px); }
.embed-lazy.video { aspect-ratio: 16 / 9; }

.embed-facade {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: grid; place-items: center;
  padding: 0; margin: 0; border: 0; cursor: pointer; overflow: hidden;
  border-radius: 14px; text-align: left;
  background: #141416; color: #fff; font: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  transition: box-shadow .25s ease, transform .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.embed-facade > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .38; filter: saturate(.85);
}
.embed-facade::after {          /* keeps the label legible over any artwork */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,.30), rgba(0,0,0,.58));
}
.embed-facade > * { position: relative; z-index: 1; }

.embed-play {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent, #e8401f); display: grid; place-items: center;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), filter .25s ease;
}
.embed-play::before {
  content: ""; width: 16px; height: 16px; margin-left: 3px; background: #fff;
  clip-path: polygon(8% 0, 100% 50%, 8% 100%);
}
.embed-facade:hover, .embed-facade:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
.embed-facade:hover .embed-play, .embed-facade:focus-visible .embed-play {
  transform: scale(1.08); filter: brightness(1.12);
}
.embed-facade:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* the real player, once the visitor has asked for it */
.embed-lazy iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 14px; display: block; }

/* paper panel: the facade needs to read on light too */
.album--light .embed-facade { background: #100e0c; }

@media (prefers-reduced-motion: reduce) {
  .embed-facade, .embed-play { transition: none; }
  .embed-facade:hover .embed-play { transform: none; }
}

/* monochrome marks (TIDAL) follow the panel: white on black, ink on paper */
.services a { color: var(--text, #fff); }
.album--light .services a, .album--light .svc-ico svg { color: #100e0c; }

/* the wordmark stands in for the typed artist name */
.name-logo { line-height: 0; margin: 10px 0 0; }
.name-logo img { width: min(78%, 340px); height: auto; display: block; margin: 0 auto; }