/* ============================================================
   VENUS BLEEDS — dark editorial theme
   mobile-first. near-black / bone / blood.
   ============================================================ */

@font-face {
  font-family: "Alte Haas Grotesk";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/AlteHaasGroteskBold.ttf") format("truetype");
}

:root {
  --black: #0a0908;
  --ink: #141210;
  --ink-2: #1d1a17;
  --bone: #e8e3da;
  --bone-dim: #b3aca0;
  --blood: #d30909;   /* the logo red */
  --blood-bright: #e0453f; /* for small text on near-black — passes AA contrast */
  --blood-deep: #7e0a13;
  --line: rgba(232, 227, 218, 0.12);
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --display: "Alte Haas Grotesk", "Arial Narrow", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--blood); color: var(--bone); }

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

a { color: inherit; text-decoration: none; }

button {
  font-family: var(--sans);
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
}

/* keyboard focus — visible on the dark theme */
:focus-visible {
  outline: 2px solid var(--blood-bright);
  outline-offset: 3px;
}

/* ---- grain overlay ---- */
.grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 50; /* texture over base content, BELOW overlays/modals/cart */
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 0.9s steps(4) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1%); }
  50% { transform: translate(1%, -2%); }
  75% { transform: translate(-1%, 2%); }
  100% { transform: translate(2%, -1%); }
}

/* persistent cart button — fixed top-right, always reachable */
.cart-fab {
  position: fixed;
  top: 18px; right: 18px;
  z-index: 120;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--bone);
  padding: 8px 10px;
  background: transparent;
  border: none;
  transition: color 0.2s;
}
.cart-fab:hover { color: var(--blood-bright); }

/* ---- the logo ----
   one vector symbol (#vbLogo in index.html), drawn by .logo-mark. Only the
   footer uses it: the hero is the typed wordmark. */
.logo-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.logo-mark {
  display: block;
  width: 100%;
  height: auto;
  fill: var(--blood);
  overflow: visible;
}

/* ---- hero: scroll-melt wordmark that cries at rest ----
   .hero-scroll height below is the scroll stage; .hero-sticky pins the viewport.
   Scroll progress (0→1) stretches each letter down at its own
   rate while the liquid filter intensifies — handled in app.js.
   At rest the tears (canvas UNDER the wordmark) do the crying. */
.hero-scroll {
  position: relative;
  height: 280vh; /* scroll stage: melt resolves with ~20% of scroll left as a hold before release */
}
.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(80% 50% at 50% 40%, rgba(211, 9, 9, 0.08), transparent 70%),
    var(--black);
}

/* the crying canvas: fills its stage. over the shape it cries from by
   default (the statement); under it in the hero (.cry-stage--under) so a
   melting letter covers its own tears. */
.cry-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.cry-stage--under { z-index: 0; }
.cry-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.logo-warp {
  position: relative;
  z-index: 1;
  width: min(92vw, 1240px); /* bigger wordmark — fills the screen, still clears the edges at rest */
  height: auto;
  overflow: visible; /* stretched letters spill past the box and off-screen */
  display: block;
  transform: translateY(-9%); /* sit higher so the longer drip has room below */
  filter: drop-shadow(0 0 40px rgba(211, 9, 9, 0.25));
}
.logo-letter {
  font-family: var(--display);
  font-weight: 700;
  font-size: 340px;
  fill: var(--blood);
}

.hero-ui {
  position: absolute;
  bottom: 112px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: opacity 0.2s linear;
}

.hero-cta-row { display: flex; gap: 28px; margin-top: 24px; flex-wrap: wrap; justify-content: center; }

/* hero nav: no boxes — text with an underline that wipes in on hover */
.hero-cta-row .btn,
.hero-cta-row .btn.solid {
  border: none;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 4px 2px;
  position: relative;
  color: var(--bone);
}
.hero-cta-row .btn.solid { color: var(--blood-bright); }
.hero-cta-row .btn::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.32s var(--ease);
}
.hero-cta-row .btn:hover,
.hero-cta-row .btn.solid:hover { background: none; color: var(--bone); }
.hero-cta-row .btn.solid:hover { color: var(--blood-bright); }
.hero-cta-row .btn:hover::after { transform: scaleX(1); }

.hero-scroll-hint {
  margin-top: 26px;
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: lowercase;
  color: var(--bone-dim);
  animation: hint-bob 2.6s ease-in-out infinite;
}
@keyframes hint-bob {
  0%, 100% { transform: translateY(0); opacity: 0.65; }
  50% { transform: translateY(6px); opacity: 1; }
}

/* ---- flow: the page below the hero ---- */
.flow { position: relative; }

/* first section gets extra top breathing room: a beat of black
   after the hero, before music fades up */
#music { padding-top: 130px; }
.media-section--first { border-top: none; }
#shop { border-top: 1px solid var(--line); }

/* ---- blood thread: one tear runs down the left edge with you ----
   height + progress set by app.js (transform only, cheap). */
.blood-thread {
  position: absolute;
  top: 0; left: 15px;
  width: 2px;
  z-index: 5;
  pointer-events: none;
}
.blood-thread__line {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(126, 10, 19, 0.9), var(--blood) 55%);
  transform-origin: top center;
  transform: scaleY(0);
}
.blood-thread__tip {
  position: absolute;
  left: 50%; top: -2px;
  width: 7px; height: 10px;
  margin-left: -3.5px;
  border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
  background: var(--blood);
  box-shadow: 0 0 10px rgba(211, 9, 9, 0.55);
  transform: translateY(0);
  will-change: transform;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  border: 1px solid var(--line);
  color: var(--bone);
  background: rgba(10, 9, 8, 0.4);
  backdrop-filter: blur(4px);
  transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.btn:hover { border-color: var(--blood); color: var(--bone); background: rgba(211, 9, 9, 0.12); }
.btn:active { transform: scale(0.98); }
.btn.solid { background: var(--blood); border-color: var(--blood); color: #fff; }
.btn.solid:hover { background: var(--blood-deep); }

/* ---- sections ---- */
.section { padding: 84px 20px; max-width: 1200px; margin: 0 auto; }

.section-head { margin-bottom: 40px; }
.section-label {
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--blood-bright);
  text-transform: lowercase;
  margin-bottom: 10px;
}
.section-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(38px, 7.5vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  overflow-wrap: break-word;
  max-width: 14ch; /* long titles wrap instead of clipping off-screen */
}
.section-sub {
  margin-top: 12px;
  color: var(--bone-dim);
  font-size: 13px;
  letter-spacing: 0.06em;
  max-width: 520px;
}

/* ---- product modal ---- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10, 9, 8, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.overlay.open { opacity: 1; pointer-events: auto; }

.product-modal {
  position: fixed;
  z-index: 210;
  inset: auto 0 0 0;
  max-height: 92svh;
  background: var(--ink);
  border-top: 1px solid var(--line);
  transform: translateY(102%);
  /* closed = hidden and click through. Without this the closed modal sat
     invisible (opacity 0) over the middle of the screen on desktop and ate
     every click there, so product cards stopped opening. visibility waits
     for the close animation to finish before hiding. */
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.45s var(--ease), visibility 0s linear 0.45s;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.product-modal.open {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.45s var(--ease), visibility 0s;
}

.pm-close {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  padding: 14px 18px;
  background: linear-gradient(to bottom, var(--ink) 60%, transparent);
}
.pm-close button {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--bone-dim);
}
.pm-close button:hover { color: var(--blood); }

.pm-body { padding: 0 20px calc(36px + env(safe-area-inset-bottom)); }

.pm-gallery {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin-bottom: 22px;
  scrollbar-width: none;
}
.pm-gallery::-webkit-scrollbar { display: none; }
.pm-gallery img {
  width: 82%;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  scroll-snap-align: center;
  background: var(--ink-2);
}

.pm-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.pm-price {
  margin-top: 8px;
  color: var(--bone-dim);
  font-size: 14px;
}
.pm-price span { color: var(--blood); }

.pm-sizes { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 6px; }
.size-pill {
  padding: 12px 18px;
  font-size: 12px;
  letter-spacing: 0.1em;
  border: 1px solid var(--line);
  color: var(--bone-dim);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.size-pill:hover { border-color: var(--bone-dim); color: var(--bone); }
.size-pill.selected { border-color: var(--blood); color: var(--bone); background: rgba(211, 9, 9, 0.12); }

.pm-size-hint { font-size: 12px; color: var(--blood-bright); letter-spacing: 0.08em; min-height: 16px; }

.pm-add {
  width: 100%;
  margin-top: 18px;
  padding: 16px;
  background: var(--blood);
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: lowercase;
  transition: background 0.25s;
}
.pm-add:hover { background: var(--blood-deep); }
.pm-add:active { transform: scale(0.99); }

.pm-desc {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--bone-dim);
  font-size: 13px;
  line-height: 1.75;
}
.pm-story {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--blood-bright);
  margin-bottom: 10px;
  line-height: 1.6;
}
.pm-sizes-label {
  margin-top: 22px;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: lowercase;
  color: var(--bone-dim);
}
.pm-sizes-label + .pm-sizes { margin-top: 8px; }
.pm-details {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  color: var(--bone-dim);
  font-size: 12px;
  line-height: 1.7;
}
.pm-details li { padding: 6px 0; border-top: 1px solid var(--line); }
.pm-details li::before { content: "·  "; color: var(--blood-bright); }
.pm-ship {
  margin-top: 18px;
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: var(--bone-dim);
}

/* ---- cart drawer ---- */
.cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 220;
  width: min(420px, 92vw);
  background: var(--ink);
  border-left: 1px solid var(--line);
  transform: translateX(103%);
  /* closed = hidden, so its buttons are out of the tab order too */
  visibility: hidden;
  transition: transform 0.45s var(--ease), visibility 0s linear 0.45s;
  display: flex;
  flex-direction: column;
}
.cart-drawer.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.45s var(--ease), visibility 0s;
}

.cd-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--line);
}
.cd-head h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.cd-head button { font-size: 12px; letter-spacing: 0.2em; color: var(--bone-dim); }
.cd-head button:hover { color: var(--blood); }

.cd-items { flex: 1; overflow-y: auto; padding: 8px 20px; }

.cd-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--bone-dim);
}
.cd-empty .big {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--bone);
  text-transform: lowercase;
}
.cd-empty .small { font-size: 12px; letter-spacing: 0.1em; }

.cd-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.cd-item img { width: 72px; height: 72px; object-fit: cover; background: var(--ink-2); }
.cd-item-name { font-size: 12px; text-transform: lowercase; line-height: 1.4; }
.cd-item-meta { font-size: 11px; color: var(--bone-dim); margin-top: 4px; }
.cd-qty { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.cd-qty button {
  width: 32px; height: 32px;
  border: 1px solid var(--line);
  color: var(--bone-dim);
  font-size: 14px;
  line-height: 1;
  transition: border-color 0.2s, color 0.2s;
}
.cd-qty button:hover { border-color: var(--blood); color: var(--bone); }
.cd-qty span { font-size: 12px; min-width: 16px; text-align: center; }
.cd-item-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.cd-item-price { font-size: 12px; color: var(--bone); }
.cd-remove { font-size: 10px; letter-spacing: 0.12em; color: var(--bone-dim); }
.cd-remove:hover { color: var(--blood); }

.cd-foot { padding: 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
/* Netlify's free plan badge is a fixed iframe in the bottom right corner with the
   highest z-index, so it sat on top of the right half of the checkout button.
   While the badge is on the page, lift the checkout area above it (no badge = no change). */
body:has(> #nl-badge-frame) .cd-foot { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
.cd-total {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.cd-note { font-size: 10px; color: var(--bone-dim); letter-spacing: 0.06em; margin-bottom: 14px; }
.cd-checkout {
  width: 100%;
  padding: 16px;
  background: var(--blood);
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: lowercase;
  transition: background 0.25s;
}
.cd-checkout:hover { background: var(--blood-deep); }
.cd-checkout:active { transform: scale(0.99); }
.cd-checkout:disabled { background: var(--ink-2); color: var(--bone-dim); cursor: not-allowed; }

/* ---- checkout notice ---- */
.notice {
  position: fixed;
  z-index: 300;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 20px);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-left: 2px solid var(--blood);
  padding: 14px 20px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--bone);
  max-width: min(420px, 88vw);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s, transform 0.35s var(--ease);
}
.notice.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- music / podcast ---- */
.media-section { border-top: 1px solid var(--line); }

.embed-wrap {
  border: 1px solid var(--line);
  background: var(--ink);
  padding: 10px;
}
.embed-wrap iframe { width: 100%; border: 0; display: block; border-radius: 12px; }

/* responsive 16:9 youtube */
.video-wrap { position: relative; padding-top: 56.25%; height: 0; }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* discography / covers grid */
.covers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 22px;
}
.cover-card { display: block; cursor: pointer; }
.cover-art {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--ink);
  border: 1px solid transparent;
  transition: border-color 0.3s;
}
.cover-card:hover .cover-art { border-color: var(--blood); }
.cover-art img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.cover-card:hover .cover-art img { transform: scale(1.04); }
.cover-meta { display: flex; justify-content: space-between; gap: 10px; padding: 10px 2px 0; }
.cover-title { font-size: 12px; letter-spacing: 0.06em; text-transform: lowercase; color: var(--bone); }
.cover-type { font-size: 11px; color: var(--bone-dim); white-space: nowrap; text-transform: lowercase; }
@media (min-width: 760px) {
  .covers-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
}

/* ---- latest release art next to the music title ---- */
.section-head--art { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: end; }
.release-art {
  display: block;
  width: min(62vw, 300px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--ink);
  border: 1px solid transparent;
  transition: border-color 0.3s;
}
.release-art:hover { border-color: var(--blood); }
.release-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease); }
.release-art:hover img { transform: scale(1.03); }
.release-art[hidden] { display: none; }
@media (min-width: 760px) {
  .section-head--art { grid-template-columns: 300px 1fr; gap: 40px; }
}

/* ---- video list under the player ---- */
.video-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 2px; }
.video-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-family: var(--sans);
  color: var(--bone-dim);
  transition: color 0.2s;
}
.video-item:hover, .video-item.is-current { color: var(--bone); }
.video-item.is-current .video-item__title::before { content: "▶ "; color: var(--blood-bright); font-size: 9px; vertical-align: 2px; }
.video-item__title { font-size: 13px; letter-spacing: 0.06em; text-transform: lowercase; }
.video-item__meta { font-size: 11px; letter-spacing: 0.08em; text-transform: lowercase; white-space: nowrap; color: var(--bone-dim); }
@media (min-width: 760px) {
  .video-list { grid-template-columns: 1fr 1fr; column-gap: 40px; }
}

/* ---- podcast cover beside the quote ---- */
.podcast-intro { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; margin-bottom: 36px; }
.podcast-art {
  display: block;
  width: min(48vw, 220px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--ink);
  border: 1px solid transparent;
  transition: border-color 0.3s;
}
.podcast-art:hover { border-color: var(--blood); }
.podcast-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.podcast-art[hidden] { display: none; }
.podcast-intro .quote { margin-bottom: 0; }
@media (min-width: 760px) {
  .podcast-intro { grid-template-columns: 220px 1fr; gap: 40px; }
}

.link-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.listen { margin-top: 36px; }
.listen .section-label { margin-bottom: 0; }
.listen-row { margin-top: 14px; gap: 10px; }
.listen-row .btn { padding: 12px 18px; }

.quote {
  font-family: var(--sans);  /* match the merch description copy */
  font-size: clamp(15px, 2vw, 19px);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--bone);
  max-width: 600px;
  margin: 0 0 36px;
}
.quote span { color: var(--blood-bright); white-space: nowrap; }

/* ---- footer ---- */
.footer { padding: 56px 20px 110px; max-width: 1200px; margin: 0 auto; }
.footer-mark {
  display: block;
  width: 118px;                 /* the hand drawn logo, small */
  margin-bottom: 36px;
  user-select: none;
  transition: opacity 0.3s;
}
.footer-mark .logo-mark { fill: var(--blood); }
.footer-mark:hover { opacity: 0.8; }
.footer-row {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--bone-dim);
}
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a:hover { color: var(--blood-bright); }

/* ---- melt-in reveal on scroll ---- */
.reveal {
  opacity: 0;
  transform: translateY(34px) scaleY(1.35);
  transform-origin: top center;
  filter: blur(10px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease);
}
.reveal.in { opacity: 1; transform: none; filter: none; }


/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain, .hero-scroll-hint { animation: none; }
  .reveal { transition: none; opacity: 1; transform: none; filter: none; }
  .hero-scroll { height: auto; }
  .hero-sticky { position: relative; }
  .logo-warp { transform: translateY(-9%); }
  .blood-thread__line { transform: scaleY(1); }
  .blood-thread__tip { display: none; }
}

/* ---- desktop ---- */
@media (min-width: 760px) {
  body { font-size: 16px; }
  .blood-thread { left: 26px; }
  .hero-ui { bottom: 96px; }
  .section { padding: 110px 40px; }
  .product-modal {
    inset: 50% auto auto 50%;
    transform: translate(-50%, -46%);
    opacity: 0;
    width: min(960px, 92vw);
    max-height: 86vh;
    border: 1px solid var(--line);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0s linear 0.35s;
  }
  .product-modal.open {
    transform: translate(-50%, -50%);
    opacity: 1;
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0s;
  }
  .pm-body {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 36px;
    padding: 0 36px 40px;
  }
  .pm-gallery { flex-direction: column; overflow: visible; }
  .pm-gallery img { width: 100%; }
  .pm-right { position: sticky; top: 60px; align-self: start; }
  .footer { padding: 80px 40px 60px; }
  .footer-row { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ============================================================
   MERCH RAIL — horizontal drag carousel (lookbook)
   scoped under .merch-rail.
   ============================================================ */
.merch-rail {
  --rail-pad: 20px;
  --card-gap: 14px;
  margin-inline: calc(var(--rail-pad) * -1);
  position: relative;
}
.merch-rail__viewport {
  display: flex;
  gap: var(--card-gap);
  padding-inline: var(--rail-pad);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rail-pad);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  padding-bottom: 6px;
  cursor: grab;
  touch-action: pan-y;
  outline: none;
}
.merch-rail__viewport::-webkit-scrollbar { height: 6px; }
.merch-rail__viewport::-webkit-scrollbar-track { background: transparent; }
.merch-rail__viewport::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.merch-rail__viewport:hover::-webkit-scrollbar-thumb { background: var(--bone-dim); }
.merch-rail__viewport.is-dragging,
.merch-rail__viewport.is-wheeling {
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.merch-rail__viewport.is-dragging { cursor: grabbing; }
.merch-rail__viewport.is-dragging .merch-card { pointer-events: none; }

.merch-card {
  flex: 0 0 auto;
  width: 78vw;
  max-width: 420px;
  scroll-snap-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  outline: none;
}
.merch-card__img {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink);
  border: 1px solid transparent;
  transition: border-color 0.35s var(--ease);
}
.merch-card:hover .merch-card__img { border-color: var(--line); }
.merch-card__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  transition: opacity 0.5s var(--ease), transform 0.7s var(--ease);
}
.merch-card__img img.alt { opacity: 0; }
.merch-card:hover .merch-card__img img.alt  { opacity: 1; }
.merch-card:hover .merch-card__img img.main { opacity: 0; }
.merch-card:hover .merch-card__img img      { transform: scale(1.04); }
.merch-card__index {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--bone);
  mix-blend-mode: difference;
}
.merch-card__info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 14px 2px 0;
}
.merch-card__name {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--bone);
  line-height: 1.4;
}
.merch-card__price { font-size: 12px; color: var(--bone-dim); white-space: nowrap; }
.merch-card:focus-visible .merch-card__img { outline: none; border-color: var(--blood-bright); }

.merch-rail__foot {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 26px;
  padding-inline: var(--rail-pad);
}
.merch-rail__hint {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  color: var(--bone-dim);
  animation: merch-nudge 2.6s var(--ease) infinite;
}
.merch-rail__hint-line { display: block; width: 22px; height: 1px; background: var(--line); }
.merch-rail__hint-text {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
@keyframes merch-nudge {
  0%, 70%, 100% { transform: translateX(0); }
  82%           { transform: translateX(6px); }
}
.merch-rail.is-engaged .merch-rail__hint { opacity: 0; animation: none; transition: opacity 0.5s var(--ease); }
.merch-rail__progress { position: relative; flex: 1 1 auto; height: 2px; background: var(--line); overflow: hidden; }
.merch-rail__progress-fill {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 30%;
  background: var(--blood);
  transform-origin: left center;
  will-change: width, transform;
}
.merch-rail.reveal { transform: translateY(26px); filter: none; }

@media (min-width: 760px) {
  .merch-rail { --rail-pad: 40px; --card-gap: 20px; }
  .merch-card { width: clamp(320px, 38vw, 460px); }
  .merch-card__index { top: 16px; left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .merch-rail__viewport { scroll-behavior: auto; }
  .merch-rail__hint { animation: none; }
  .merch-card__img img { transition: none; }
}

/* ============================================================
   BURN STATEMENT — one line at a fixed size that turns from bone
   to blood and cries as you scroll. Sticky scroll stage; the text
   and its tears are drawn on the canvas by app.js (same engine as
   the hero). The h2 stays in the DOM, visually hidden, for search
   engines + screen readers. Reduced motion = static red line.
   ============================================================ */
.burn-scroll {
  position: relative;
  height: 200vh;          /* scroll length the bleed plays over */
}
.burn-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(120% 100% at 50% 50%, #160504 0%, #0c0403 48%, var(--black) 100%);
}
.burn-glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 90vmax; height: 90vmax;
  transform: translate(-50%, -50%) scale(0.55);
  background: radial-gradient(closest-side,
    rgba(255,150,70,0.30) 0%,
    rgba(211,9,9,0.42) 28%,
    rgba(126,10,19,0.18) 52%,
    transparent 72%);
  opacity: 0;
  filter: blur(24px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
  will-change: opacity, transform;
}
.burn-text {
  position: relative;
  z-index: 2;
  margin: 0;
  white-space: nowrap;     /* one line on desktop; wraps on small screens (see query) */
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  /* FIXED, readable size — no scroll zoom */
  font-size: clamp(20px, 4vw, 46px);
  line-height: 1.06;
  text-align: center;
  max-width: min(94vw, 1100px);
  color: var(--bone);
}
/* once the canvas has taken over drawing the line, hide the h2
   visually but keep it readable by assistive tech */
.burn-sticky.is-canvas .burn-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
/* small screens: wrap to keep it legible */
@media (max-width: 560px) {
  .burn-text {
    white-space: normal;
    max-width: 90vw;
    font-size: clamp(22px, 8.5vw, 34px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .burn-scroll { height: auto; }
  .burn-sticky { position: relative; height: 56vh; }
  .burn-sticky .cry-stage { display: none; }
  .burn-text {
    color: var(--blood);
    text-shadow: 0 0 24px rgba(211,9,9,0.5), 0 0 60px rgba(126,10,19,0.35);
  }
  .burn-glow { opacity: 0.6; transform: translate(-50%,-50%) scale(1.1); }
}