/* =========================================================
   BLOCCRICH MONSTA — Shared Design System
   Pure black + off-white bone + orange accent
   Editorial serif + mono, gritty overlays
   ========================================================= */

:root{
  --ink: #0a0a0a;
  --ink-2: rgba(20, 18, 16, 0.72);   /* semi-transparent so smoke bleeds through */
  --ink-2-solid: #141210;
  --ink-3: #1e1b17;
  --bone: #f4f1ea;
  --bone-2: #ded9cd;
  --bone-3: #948e80;
  --orange: #ff5a1f;
  --orange-2: #ff7a3d;
  --line: rgba(244,241,234,0.12);
  --line-strong: rgba(244,241,234,0.28);

  --display: 'Genos', 'Fraunces', Georgia, serif;
  --serif: 'Fraunces', 'Playfair Display', Georgia, serif;
  --sans: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --pad: clamp(20px, 4vw, 56px);
  --maxw: 1440px;
}

*{ box-sizing: border-box; }

html{
  background: #050505; /* fallback only — actual backdrop is the fixed brick-wall + smoke layers */
}
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior: smooth; }
}

/* -------- Scroll progress indicator -------- */
.scroll-progress{
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--orange), var(--orange-2));
  z-index: 200;
  pointer-events: none;
  transition: width .1s linear;
}
html, body{
  margin: 0;
  padding: 0;
  color: var(--bone);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  cursor: default; /* standard cursor everywhere */
}
body{
  /* Left transparent on purpose: an opaque body background paints on top of
     the fixed, negative-z-index brick-wall/smoke layers in the stacking
     order, hiding them completely regardless of their z-index value. */
  background: transparent;
}
/* Ensure sections don't cover the smokey canvas — give them transparent bg by default,
   opt-in solid via .solid or explicit inline background */
section{ background: transparent; }

/* -------- Brick wall backdrop --------
   Sits behind the smoke canvas (z-index -2 vs canvas's -1). Pure CSS running-bond
   brick pattern, kept dark/desaturated so it reads as a night-time textured wall
   rather than a loud graphic — the smoke canvas dims it further on top.
*/
.scene-bg{
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-color: #05070a;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.2) 55%, rgba(0,0,0,0.6) 100%),
    radial-gradient(ellipse 900px 700px at 50% 40%, transparent 40%, rgba(0,0,0,0.55) 100%),
    url("hero/rain-alley.jpg");
  background-size: 200px 200px, 100% 100%, 100% 100%, cover;
  background-position: 0 0, 0 0, 0 0, center 38%;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-blend-mode: overlay, normal, normal, normal;
}

/* Film grain overlay across the whole site — layered on top for grit */
body::before{
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96  0 0 0 0 0.94  0 0 0 0 0.90  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Canvas handles its own vignette — no CSS overlay needed */

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

/* -------- Type --------
   Genos Bold does the display heavy lifting — tall, condensed, luxury-industrial.
   Fraunces italic keeps the editorial luxury for accents like ".BloccRich" scripts.
*/
h1, h2, h3, h4{
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 0.85;
  margin: 0;
  text-wrap: balance;
  text-transform: uppercase;
}
h1{ font-size: clamp(72px, 14vw, 260px); }
h2{ font-size: clamp(52px, 9vw, 150px); }
h3{ font-size: clamp(32px, 4.4vw, 72px); }
h4{ font-size: clamp(20px, 1.8vw, 30px); font-weight: 700; letter-spacing: 0.01em; }

/* Serif italic is for luxury accent phrases — kept lowercase, tight tracking */
.italic{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.02em;
  font-size: 0.85em; /* Fraunces reads bigger than Genos at same px, correct it */
}

.mono{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}

.eyebrow{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-3);
}

.orange{ color: var(--orange); }
.dim{ color: var(--bone-3); }

p{ text-wrap: pretty; }

/* -------- Layout -------- */
.wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

section{ position: relative; }

.divider{
  border-top: 1px solid var(--line);
}

/* -------- Nav -------- */
.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  padding: 18px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(to bottom, rgba(10,10,10,0.85), rgba(10,10,10,0.55) 70%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.nav.nav-hidden{ transform: translateY(-100%); }
@keyframes nav-pop{
  0%{ transform: translateY(0) scale(0.97); }
  55%{ transform: translateY(0) scale(1.015); }
  100%{ transform: translateY(0) scale(1); }
}
.nav.nav-pop{ animation: nav-pop .45s cubic-bezier(.34,1.56,.64,1); }
.nav-brand{
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1;
}
.nav-brand b{ font-weight: 800; color: var(--orange); }
.nav-brand .italic{ font-size: 16px; margin-left: 6px; color: var(--bone-3); }
.nav-brand{ display: flex; align-items: center; }
.nav-brand .nav-logo{ height: 46px; width: auto; display: block; transition: filter .2s ease; }
.nav-brand:hover .nav-logo{ filter: drop-shadow(0 0 10px rgba(255,90,31,0.5)); }
@media (max-width: 900px){
  .nav-brand .nav-logo{ height: 36px; }
}
@media (max-width: 640px){
  .eyebrow{
    font-size: 9px;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }
}
.nav-links{
  display: flex;
  gap: 4px;
  align-items: center;
}
.nav-links a{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--bone-2);
  transition: color .2s, background .2s;
}
.nav-links a:hover{ color: var(--bone); background: rgba(244,241,234,0.06); }
.nav-links a.active{ color: var(--orange); }
.nav-cta{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 10px 16px;
  border: 1px solid var(--orange);
  color: var(--orange);
  border-radius: 999px;
  transition: background .2s, color .2s;
}
.nav-cta:hover{ background: var(--orange); color: var(--ink); }

.mobile-toggle{ display: none; background: none; border: 0; color: var(--bone); font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; padding: 8px 12px; }

@media (max-width: 900px){
  .nav-links{ display: none; }
  .nav-cta{ display: none; }
  .mobile-toggle{ display: block; }
  .nav-links.open{
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 60px; left: 0; right: 0;
    background: var(--ink);
    padding: 20px var(--pad);
    border-top: 1px solid var(--line);
    gap: 12px;
    align-items: flex-start;
  }
}

/* -------- Buttons / Links with orange arrow -------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 14px 22px;
  border: 1px solid var(--line-strong);
  color: var(--bone);
  border-radius: 999px;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.btn:hover{ background: var(--bone); color: var(--ink); border-color: var(--bone); transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }

.step-chip{
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: border-color .2s, background .2s, transform .2s;
}
.step-chip:hover{
  border-color: var(--orange);
  background: rgba(255,90,31,0.08);
  transform: translateX(4px);
}
.step-chip .n{ font-family: var(--mono); color: var(--orange); font-size: 12px; flex-shrink: 0; }
.step-chip .t{ font-size: 13px; color: var(--bone-2); }
.btn:hover .arrow path{ stroke: var(--ink); }
.btn.primary{
  background: var(--orange);
  color: var(--ink);
  border-color: var(--orange);
}
.btn.primary:hover{ background: var(--orange-2); border-color: var(--orange-2); color: var(--ink); }
.btn.primary .arrow path{ stroke: var(--ink); }

.arrow{
  width: 14px; height: 14px;
  flex-shrink: 0;
  transition: transform .25s ease;
}
.arrow path{ stroke: var(--orange); stroke-width: 1.6; fill: none; }
.link:hover .arrow{ transform: translate(3px, -3px); }
.btn:hover .arrow{ transform: translate(3px, -3px); }

.link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.link:hover{ border-color: var(--orange); }
button.link{
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 0 0 2px;
  font: inherit;
  cursor: pointer;
}
button.link:hover{ border-color: var(--orange); }

/* -------- Hero / big display --------
   Uses cqi (container-query inline size) when available so the type scales
   to its column, not the whole viewport. Falls back to vw on older browsers.
*/
.mega{
  font-family: var(--display);
  font-size: clamp(72px, 14vw, 220px);
  line-height: 0.82;
  letter-spacing: -0.01em;
  font-weight: 800;
  text-transform: uppercase;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
}
.mega .it{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.04em;
  font-size: 0.72em; /* balance Fraunces vs Genos */
}
.mega .of{ color: var(--bone-3); }

/* -------- Full-bleed video hero (homepage intro) -------- */
.hero-video-hero{
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  padding: 0;
}
.hero-video-wrap{ position: absolute; inset: 0; z-index: 0; }
.hero-video-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  filter: contrast(1.08) saturate(0.92) brightness(0.82);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.hero-video-bg.is-active{ opacity: 1; }
.hero-video-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(5,5,5,0.1) 0%, rgba(5,5,5,0.35) 45%, rgba(5,5,5,0.92) 100%),
    linear-gradient(90deg, rgba(5,5,5,0.85) 0%, rgba(5,5,5,0.35) 48%, rgba(5,5,5,0.05) 78%);
}
.hero-video-content{
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 160px var(--pad) 90px;
}
.hero-video-content .mega-fit{
  max-width: 720px;
}
@media (max-width: 900px){
  .hero-video-hero{
    align-items: flex-end;
  }
  .hero-video-content{
    padding: 140px var(--pad) 60px;
  }
  .hero-video-overlay{
    background:
      linear-gradient(180deg, rgba(5,5,5,0.2) 0%, rgba(5,5,5,0.55) 45%, rgba(5,5,5,0.95) 100%);
  }
  .hero-video-bg{
    /* Source video is 16:9; on a narrow/tall mobile viewport the cover-crop
       only shows a thin vertical slice of it. His face sits right-of-center
       in frame, so shift the crop window right to keep it in view. */
    object-position: 78% 20%;
  }
}

/* When mega is inside a container, prefer container-relative sizing */
@supports (font-size: 1cqi){
  .mega-fit{
    container-type: inline-size;
  }
  .mega-fit .mega{
    font-size: clamp(64px, 22cqi, 220px);
  }
}

/* -------- Mobile: collapse inline two-column section grids --------
   These sections set grid-template-columns inline for their desktop split
   (e.g. 1.1fr 0.9fr). An inline style beats any external rule of any
   specificity except !important, so the override below needs it to take
   effect on small screens — otherwise columns squeeze in half instead of
   stacking, which is what was forcing the hero headline to break mid-word.
*/
@media (max-width: 900px){
  .split-hero{
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .split-hero [style*="position: sticky"]{
    position: static !important;
  }
  .btn-row-2{
    grid-template-columns: 1fr !important;
  }
  .timeline-grid{
    grid-template-columns: 84px 1fr !important;
    gap: 20px !important;
  }
  .hero-cta{
    flex-direction: column;
    align-items: stretch;
  }
  .hero-cta .btn{
    width: 100%;
    justify-content: center;
    padding: 17px 24px;
  }
}
@media (max-width: 560px){
  /* Break Blocc/Rich onto their own lines so each word only ever has
     to fit its own full line width — removes the word-break risk
     entirely and lets the type run bigger and bolder on phones. */
  .mega .it.of{
    display: block;
  }
  .mega-fit .mega{
    font-size: clamp(58px, 19vw, 220px);
  }
}

/* -------- Cards / catalog -------- */
.release-card{
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  transition: transform .3s ease, border-color .3s;
}
.release-card:hover{ transform: translateY(-4px); border-color: var(--line-strong); }
.release-card .cover{
  aspect-ratio: 1 / 1;
  background: var(--ink-3);
  position: relative;
  overflow: hidden;
}
.release-card .cover img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
}
.release-card:hover .cover img{ transform: scale(1.04); }
.release-card .cover .ribbon{
  position: absolute;
  top: 16px; left: -38px;
  width: 160px;
  padding: 6px 0;
  background: var(--orange);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  transform: rotate(-45deg);
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
.release-card .meta{ padding: 18px 20px; }
.release-card .meta .title{
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.release-card .meta .sub{ font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone-3); }
.release-card .platforms{
  display: flex; gap: 12px;
  padding: 0 20px 18px;
  flex-wrap: wrap;
}
.release-card .platforms a{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-3);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.release-card .platforms a:hover{ color: var(--orange); border-color: var(--orange); }

/* -------- Marquee ticker -------- */
.marquee{
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
  background: rgba(5,5,5,0.65);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.marquee-track{
  display: inline-flex;
  gap: 60px;
  white-space: nowrap;
  animation: scroll 40s linear infinite;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(36px, 5.5vw, 80px);
  color: var(--bone-3);
  line-height: 1;
}
.marquee-track span{ display: inline-flex; align-items: center; gap: 60px; }
.marquee-track .dot{ width: 10px; height: 10px; background: var(--orange); border-radius: 50%; display: inline-block; }
@keyframes scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* -------- Stats -------- */
.stat-row{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat{
  padding: 40px 28px;
  border-right: 1px solid var(--line);
}
.stat:last-child{ border-right: 0; }
.stat .num{
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(56px, 6vw, 100px);
  line-height: 0.9;
  letter-spacing: 0.005em;
  color: var(--bone);
  text-transform: uppercase;
}
.stat .label{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-3);
  margin-top: 12px;
}
@media (max-width: 720px){
  .stat-row{ grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2){ border-right: 0; }
  .stat:nth-child(-n+2){ border-bottom: 1px solid var(--line); }
}

/* -------- Reveal on scroll -------- */
.js .reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s ease, transform 1s ease;
}
.js .reveal.in{ opacity: 1; transform: none; }

/* -------- Footer -------- */
.footer{
  padding: 80px var(--pad) 40px;
  border-top: 1px solid var(--line);
  margin-top: 120px;
  background: rgba(5,5,5,0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.footer-grid{
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 60px;
}
.footer h4{ font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-3); font-weight: 500; margin-bottom: 20px; }
.footer ul{ list-style: none; padding: 0; margin: 0; }
.footer li{ margin-bottom: 10px; font-size: 14px; }
.footer li a{ color: var(--bone-2); transition: color .2s; }
.footer li a:hover{ color: var(--orange); }
.footer-brand{
  font-family: var(--display);
  font-weight: 800;
  font-size: 72px;
  line-height: 0.85;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.footer-brand .it{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--orange);
  text-transform: none;
  letter-spacing: -0.03em;
  font-size: 0.75em;
}
.footer-legal{
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: 30px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-3);
}
@media (max-width: 900px){
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-grid > div{ min-width: 0; }
  .footer-legal{ flex-direction: column; gap: 12px; }
}
@media (max-width: 640px){
  .footer{ padding: 60px var(--pad) 32px; }
  .footer-grid{
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .footer-brand{ font-size: 52px; }
  .footer h4{ margin-bottom: 14px; }
  .footer li{ margin-bottom: 8px; }
}

/* -------- Page header (non-home) -------- */
.page-hero{
  padding: 160px var(--pad) 80px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.page-hero .eyebrow{ margin-bottom: 20px; display: block; }
.page-hero h1{ font-size: clamp(64px, 10vw, 180px); }

/* -------- Image placeholder / slot styling -------- */
.img-slot{
  background:
    linear-gradient(135deg, transparent 48%, rgba(244,241,234,0.06) 48%, rgba(244,241,234,0.06) 52%, transparent 52%),
    var(--ink-2);
  background-size: 12px 12px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bone-3);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  padding: 20px;
  position: relative;
}
.img-slot::after{
  content: attr(data-label);
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.img-slot::before{
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px dashed var(--line);
  pointer-events: none;
}
.img-slot.has-image{ background: none; padding: 0; border: 1px solid var(--line); }
.img-slot.has-image::before, .img-slot.has-image::after{ display: none; }
.img-slot.has-image img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* -------- Form -------- */
.form-field{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.form-field label{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-3);
}
.form-field input,
.form-field textarea,
.form-field select{
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  color: var(--bone);
  padding: 12px 0;
  font-family: var(--sans);
  font-size: 16px;
  outline: none;
  transition: border-color .2s;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus{ border-color: var(--orange); }
.form-field textarea{ resize: vertical; min-height: 120px; }

/* -------- Contact/inquiry form card (shared: contact.html, shows.html) -------- */
.contact-card{
  background: var(--ink-2);
  border: 1px solid var(--line);
  padding: 40px;
  border-radius: 4px;
  position: relative;
}
.contact-card .num-tag{
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--bone-3);
}
.contact-card h3{ font-size: 44px; margin-bottom: 8px; }
.contact-card .subtitle{ color: var(--bone-3); font-size: 15px; margin-bottom: 24px; }
.contact-card .email{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--orange);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--orange);
  margin-bottom: 30px;
}

/* -------- Utility -------- */
.grid-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.grid-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 900px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
}
.spacer-sm{ height: 40px; }
.spacer-md{ height: 80px; }
.spacer-lg{ height: 140px; }

/* =========================================================
   SNEAK-PEEK PLAYER
   Editorial catalog list with per-track play + shop link.
   ========================================================= */
.player{
  border: 1px solid var(--line-strong);
  background: rgba(10,10,10,0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.player-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  gap: 20px;
  flex-wrap: wrap;
}
.player-head .now-playing{
  display: flex; align-items: center; gap: 14px;
  min-width: 0;
}
.player-head .np-cover{
  width: 44px; height: 44px;
  background: var(--ink-3);
  border: 1px solid var(--line);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10px; color: var(--bone-3);
}
.player-head .np-text{ min-width: 0; }
.player-head .np-title{
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--bone);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 340px;
}
.player-head .np-sub{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-3);
  margin-top: 4px;
}
.player-head .np-badge{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  padding: 6px 10px;
  border: 1px solid var(--orange);
  border-radius: 999px;
}

.player-progress{
  height: 3px;
  background: rgba(244,241,234,0.08);
  position: relative;
  cursor: pointer;
}
.player-progress .fill{
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: var(--orange);
  width: 0%;
  transition: width 0.15s linear;
}
.player-progress .fill::after{
  content: '';
  position: absolute;
  right: -4px; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  background: var(--orange);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255,90,31,0.7);
}

.player-list{
  max-height: 520px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.player-list::-webkit-scrollbar{ width: 6px; }
.player-list::-webkit-scrollbar-thumb{ background: var(--line-strong); border-radius: 3px; }

.track{
  display: grid;
  grid-template-columns: 40px 44px 40px 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  transition: background 0.2s;
}
.track:last-child{ border-bottom: 0; }
.track:hover{ background: rgba(244,241,234,0.03); }
.track.playing{ background: rgba(255,90,31,0.06); }
.track.playing .track-title{ color: var(--orange); }

.track-num{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--bone-3);
  text-align: center;
}
.track.playing .track-num{ color: var(--orange); }

.track-play{
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--bone);
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
  padding: 0;
}
.track-play:hover{ background: var(--orange); border-color: var(--orange); color: var(--ink); transform: scale(1.05); }
.track.playing .track-play{ background: var(--orange); border-color: var(--orange); color: var(--ink); }
.track-play svg{ width: 12px; height: 12px; }

.track-info{ min-width: 0; }
.track-title{
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--bone);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.track-sub{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-3);
  margin-top: 6px;
}

.track-duration{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--bone-3);
  letter-spacing: 0.05em;
}

.track-shop, .track-dl{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-3);
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.track-shop:hover, .track-dl:hover{
  color: var(--orange);
  border-color: var(--orange);
}
.track-dl svg, .track-shop svg{ width: 10px; height: 10px; }
.track-dl svg path, .track-shop svg path{ stroke: currentColor; fill: none; stroke-width: 1.6; }

@media (max-width: 900px){
  .track{ grid-template-columns: 44px 40px 1fr auto; gap: 12px; padding: 12px 16px; }
  .track-play{ grid-row: span 2; }
  .track-num, .track-duration{ display: none; }
  .track-shop, .track-dl{ display: none; }
  .track-info{ grid-column: 3; }
  .player-head{ padding: 16px; }
  .player-head .np-title{ max-width: 200px; font-size: 17px; }
}

/* Player footer with sneak-peek disclaimer */
.player-foot{
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-3);
}
.player-foot .full-shop{
  color: var(--orange);
  border-bottom: 1px solid var(--orange);
  padding-bottom: 2px;
}

/* Halftone dot behind portraits */
.halftone{
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--orange) 1px, transparent 1.5px);
  background-size: 8px 8px;
  opacity: 0.15;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* -------- Cinematic image grade --------
   Teal-black shadows / warm-orange highlights — matches the cover art's
   own color language so real photos and CSS chrome read as one system.
*/
.cine-img{
  position: relative;
  overflow: hidden;
  background: var(--ink-3);
}
.cine-img img,
.cine-img video{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.12) saturate(0.9) brightness(0.92);
}
.cine-img::after{
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(160deg, rgba(20,60,70,0.35) 0%, transparent 45%, transparent 60%, rgba(255,90,31,0.22) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.cine-img::before{
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 90px 10px rgba(0,0,0,0.65);
  pointer-events: none;
  z-index: 2;
}

/* -------- Track / now-playing cover art -------- */
.track-cover{
  width: 44px; height: 44px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 3px;
}
.track-cover img{ border-radius: 2px; }
.player-head .np-cover{
  overflow: hidden;
  font-size: 16px;
}
.player-head .np-cover img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* -------- Interactive tilt on image cards -------- */
.cine-img{
  transition: transform .2s ease-out, box-shadow .2s ease-out;
  transform: translateY(var(--py, 0px)) perspective(900px) rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg)) scale(var(--tiltS, 1));
  will-change: transform;
}
.cine-img:hover{ box-shadow: 0 20px 50px -12px rgba(0,0,0,0.6); }

/* Parallax depth on background dot layers behind portraits */
.halftone{ transform: translateY(var(--py, 0px)); will-change: transform; }

/* Parallax drift on headings/text (home page) — same mechanism as image depth */
.parallax-text{ transform: translateY(var(--py, 0px)); will-change: transform; }
/* .reveal.in sets transform:none (specificity 0,0,3,0) which otherwise beats
   the rule above — this matches/exceeds it so parallax keeps working once
   an element has revealed. */
.js .reveal.in.parallax-text{ transform: translateY(var(--py, 0px)); }

/* -------- 3D tilt-in reveal (cards/image blocks) -------- */
.reveal-3d{
  opacity: 0;
  transform: perspective(1000px) rotateX(10deg) translateY(50px) scale(0.95);
  transition: opacity 0.9s cubic-bezier(.16,.84,.44,1), transform 0.9s cubic-bezier(.16,.84,.44,1);
}
.js .reveal-3d.in{
  opacity: 1;
  transform: perspective(1000px) rotateX(0deg) translateY(0) scale(1);
}

/* -------- Pulse glow (presave / hot CTAs) -------- */
@keyframes pulse-glow{
  0%,100%{ box-shadow: 0 0 0 0 rgba(255,90,31,0.5); }
  50%{ box-shadow: 0 0 0 12px rgba(255,90,31,0); }
}
.btn-pulse{ animation: pulse-glow 2.2s ease-out infinite; }

@keyframes badge-pulse{
  0%,100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: .55; transform: scale(1.15); }
}
.badge-pulse{ display: inline-block; animation: badge-pulse 1.4s ease-in-out infinite; }

/* -------- Countdown -------- */
.countdown{
  display: flex;
  gap: 20px;
  margin-top: 32px;
}
.countdown .unit{ text-align: left; }
.countdown .unit .n{
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.countdown .unit .l{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-3);
  margin-top: 8px;
}

/* -------- Press coverage list -------- */
.press-row{
  display: grid;
  grid-template-columns: 160px 1fr 20px;
  gap: 24px;
  align-items: center;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
  transition: padding-left .2s ease, color .2s ease;
}
.press-row:first-child{ border-top: 1px solid var(--line); }
.press-row .press-pub{ font-size: 10px; letter-spacing: 0.16em; }
.press-row .press-title{
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.15;
  color: var(--bone);
}
.press-row .arrow path{ stroke: var(--bone-3); }
.press-row:hover{ padding-left: 14px; color: var(--orange); }
.press-row:hover .press-title{ color: var(--orange); }
.press-row:hover .arrow{ transform: translate(3px, -3px); }
.press-row:hover .arrow path{ stroke: var(--orange); }
@media (max-width: 900px){
  .press-row{ grid-template-columns: 1fr 20px; }
  .press-row .press-pub{ grid-column: 1 / -1; }
}

/* Form submission error state (shares .submit-note markup) */
.submit-note.error{ color: #ff6b6b !important; }

/* Tape strip */
.tape{
  position: absolute;
  background: rgba(244,241,234,0.08);
  border-top: 1px solid rgba(244,241,234,0.15);
  border-bottom: 1px solid rgba(244,241,234,0.15);
  pointer-events: none;
}