@import "tailwindcss";

:root {
  --ink: #05070b;
  --panel: #0b0f16;
  --paper: #f7f9fc;
  --muted: #aab2c0;
  --blue: #056bff;
  --red: #f00046;
  --line: rgba(255, 255, 255, 0.14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: Inter, Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  height: 88px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(22px, 4vw, 72px);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(5,7,11,.85), transparent);
}
.brand { width: 150px; overflow: hidden; }
.brand img { width: 100%; aspect-ratio: 3.72 / 1; object-fit: cover; }
nav { display: flex; gap: 32px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
nav a, .footer-links a { transition: color .2s ease; }
nav a:hover, .footer-links a:hover { color: var(--blue); }
.header-cta { justify-self: end; font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.header-cta span, .text-link span { color: var(--red); margin-left: 6px; }

.hero {
  min-height: 850px;
  height: 100svh;
  max-height: 1040px;
  position: relative;
  display: grid;
  grid-template-columns: 58% 42%;
  background:
    radial-gradient(circle at 28% 34%, rgba(5,107,255,.16), transparent 27%),
    linear-gradient(135deg, #04060a 0%, #090d15 62%, #16050a 100%);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .26;
  pointer-events: none;
  background-image: repeating-linear-gradient(120deg, transparent 0 5px, rgba(255,255,255,.018) 5px 6px);
}
.hero-copy {
  position: relative;
  z-index: 3;
  align-self: center;
  padding: 115px 6vw 92px;
  max-width: 900px;
}
.eyebrow {
  margin: 0 0 22px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .27em;
  text-transform: uppercase;
}
h1, h2, h3 {
  margin: 0;
  font-family: Impact, "Arial Narrow", sans-serif;
  font-weight: 900;
  font-stretch: condensed;
  text-transform: uppercase;
  line-height: .9;
}
h1 { font-size: clamp(66px, 8.6vw, 145px); letter-spacing: -.045em; max-width: 820px; }
h1 span { display: block; color: transparent; -webkit-text-stroke: 1.5px rgba(247,249,252,.75); }
.hero-lede { max-width: 590px; margin: 30px 0 0; color: #c9cfda; font-size: clamp(17px, 1.4vw, 22px); line-height: 1.65; }
.button-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.button { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; padding: 0 24px; border: 1px solid var(--line); font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.button-primary:hover { background: #1c79ff; }
.button-primary span { margin-left: 10px; }
.button-ghost { background: rgba(255,255,255,.03); }
.hero-portrait { position: relative; min-width: 0; }
.hero-portrait::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, var(--ink) 0%, transparent 28%), linear-gradient(0deg, var(--ink) 0%, transparent 28%); }
.hero-portrait > img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 30%; filter: contrast(1.08) saturate(.92); }
.portrait-stamp { position: absolute; z-index: 2; right: 4vw; bottom: 72px; width: clamp(130px, 17vw, 250px); mix-blend-mode: screen; }
.portrait-stamp img { width: 100%; aspect-ratio: 1.39; object-fit: cover; }
.hero-photo-credit { position:absolute; z-index:4; right:18px; top:105px; padding:7px 10px; border:1px solid rgba(255,255,255,.22); background:rgba(5,7,11,.58); color:rgba(255,255,255,.72); font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; backdrop-filter:blur(8px); }
.hero-rail { position: absolute; z-index: 5; bottom: 0; left: 0; width: 58%; min-height: 54px; display: flex; align-items: center; gap: 28px; padding: 0 6vw; background: var(--red); font-size: 10px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.hero-rail span:not(:last-child)::after { content: "/"; margin-left: 28px; opacity: .55; }

.release-banner { min-height: 68px; display: flex; align-items: center; justify-content: center; gap: 20px; padding: 16px 5vw; background: var(--paper); color: var(--ink); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }
.release-banner strong { font-weight: 900; }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 6px rgba(240,0,70,.12); }
.banner-rule { width: 1px; height: 22px; background: rgba(5,7,11,.2); }

.section { padding: clamp(88px, 10vw, 150px) clamp(24px, 6vw, 96px); }
.section-heading { display: grid; grid-template-columns: 1fr 2fr; align-items: end; margin-bottom: 55px; }
.section-heading h2, .story h2, .merch h2, .live h2 { font-size: clamp(50px, 6.4vw, 100px); letter-spacing: -.035em; }
.release-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 26px; }
.release-card { position: relative; min-height: 520px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.release-featured { display: grid; grid-template-columns: 52% 48%; }
.release-photo { min-height: 520px; overflow: hidden; }
.release-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: grayscale(.15) contrast(1.05); }
.release-copy { display: flex; flex-direction: column; justify-content: flex-end; padding: 42px; background: linear-gradient(145deg, #0d1420, #090b10); border-left: 3px solid var(--blue); }
.release-copy p, .square-overlay p { color: var(--red); font-size: 11px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.release-copy h3, .square-overlay h3 { font-size: clamp(42px, 4.4vw, 74px); }
.release-copy > span { margin: 20px 0 34px; color: var(--muted); line-height: 1.6; }
.release-copy a { font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.music-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.music-links a { min-height:46px; display:flex; align-items:center; justify-content:center; padding:10px 12px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.04); text-align:center; transition:border-color .2s ease, background .2s ease; }
.music-links a:hover { border-color:var(--blue); background:rgba(5,107,255,.16); }
.release-source { display:inline-flex; margin-top:24px; color:#96a0b0; font-size:10px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.release-source span { color:var(--red); margin-left:7px; }
.square-card img { width: 100%; height: 100%; object-fit: cover; }
.square-overlay { position: absolute; inset: auto 0 0; padding: 34px; background: linear-gradient(transparent, rgba(5,7,11,.96)); }
.square-overlay a { display:inline-block; margin-top:18px; font-size:10px; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }

.story { position: relative; display: grid; grid-template-columns: .85fr 1.15fr; gap: 7vw; align-items: center; background: var(--paper); color: var(--ink); overflow: hidden; }
.story::before { content:""; position:absolute; left:-8%; top:10%; width:34%; height:80%; background: var(--blue); transform: skewX(-12deg); opacity:.08; }
.story-mark { position: relative; max-width: 600px; }
.story-mark img { width: 100%; aspect-ratio: 1.29; object-fit: cover; }
.story-copy { position: relative; }
.story-copy > p:not(.eyebrow) { max-width: 720px; color: #3d4552; font-size: 17px; line-height: 1.85; }
.story-copy .identity-note { margin:28px 0 22px; padding:15px 18px; border-left:4px solid var(--red); background:#edf3ff; color:#0a1b35; font-size:15px; line-height:1.55; }
.story-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 45px; background: rgba(5,7,11,.14); }
.story-stats div { padding: 25px 20px; background: var(--paper); }
.story-stats strong { display:block; color: var(--blue); font-family: Impact, sans-serif; font-size: 42px; }
.story-stats span { display:block; margin-top:5px; font-size: 10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }

.events { background:#070a0f; border-top:1px solid var(--line); }
.events-heading { display:grid; grid-template-columns:1.15fr .85fr; gap:7vw; align-items:end; margin-bottom:52px; }
.events-heading h2 { font-size:clamp(54px, 7vw, 110px); letter-spacing:-.035em; }
.events-heading > p { max-width:580px; margin:0 0 8px; color:var(--muted); font-size:17px; line-height:1.8; }
.event-list { border-top:1px solid var(--line); }
.event-row { display:grid; grid-template-columns:110px 1.3fr .8fr auto; gap:32px; align-items:center; padding:28px 0; border-bottom:1px solid var(--line); }
.event-date { display:flex; align-items:baseline; gap:9px; }
.event-date strong { color:var(--paper); font-family:Impact, sans-serif; font-size:54px; line-height:1; }
.event-date span, .event-name > span, .events-kicker { color:var(--red); font-size:10px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
.event-name h3 { margin-top:8px; font-size:clamp(28px, 3vw, 45px); }
.event-row > p { color:var(--muted); font-size:13px; line-height:1.5; }
.event-row .button { min-width:155px; }
.ticket-status { color:#7f8998; font-size:11px; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }
.events-empty { display:grid; grid-template-columns:1.1fr 1fr auto; gap:44px; align-items:center; padding:clamp(34px, 5vw, 66px); border:1px solid rgba(5,107,255,.4); background:linear-gradient(135deg, rgba(5,107,255,.14), rgba(240,0,70,.07)); box-shadow:18px 18px 0 rgba(5,107,255,.07); }
.events-empty h3 { margin-top:14px; font-size:clamp(40px, 4.6vw, 72px); }
.events-empty p { margin:0; color:#c1c8d4; font-size:15px; line-height:1.75; }
.events-empty .button { white-space:nowrap; }
.fan-support { display:grid; grid-template-columns:auto 1fr auto; gap:28px; align-items:center; margin-top:48px; padding-top:24px; border-top:1px solid var(--line); }
.fan-support > span { color:var(--blue); font-size:10px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
.fan-support p { margin:0; color:var(--muted); font-size:13px; }
.fan-support a { font-size:11px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.fan-support a span { color:var(--red); margin-left:6px; }

.gallery { background:#05070b; border-top:1px solid var(--line); }
.gallery-heading { display:grid; grid-template-columns:1.35fr .65fr; gap:7vw; align-items:end; margin-bottom:52px; }
.gallery-heading h2 { font-size:clamp(50px, 6.4vw, 100px); letter-spacing:-.035em; }
.gallery-heading > p { max-width:560px; margin:0 0 8px; color:var(--muted); font-size:17px; line-height:1.75; }
.gallery-wall { columns:3 320px; column-gap:18px; }
.gallery-wall figure { position:relative; margin:0 0 18px; break-inside:avoid; overflow:hidden; border:1px solid var(--line); background:#0b0f16; }
.gallery-wall a { display:block; }
.gallery-wall img { width:100%; height:auto; transition:transform .45s ease, filter .45s ease; }
.gallery-wall figure:hover img { transform:scale(1.018); filter:contrast(1.05) saturate(1.06); }
.gallery-feature { border-color:rgba(5,107,255,.65)!important; box-shadow:0 0 0 1px rgba(5,107,255,.16), 0 24px 60px rgba(5,107,255,.12); }
.headline-wall { columns:4 260px; }
.gallery-chapter { display:flex; align-items:end; justify-content:space-between; gap:28px; margin:88px 0 28px; padding-top:36px; border-top:1px solid var(--line); }
.gallery-chapter .eyebrow { margin-bottom:12px; }
.gallery-chapter h3 { font-size:clamp(42px, 5vw, 78px); letter-spacing:-.03em; }
.gallery-chapter > p { margin:0 0 8px; color:#758092; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.quebec-wall { columns:3 320px; }
.gallery-credit { display:flex; justify-content:space-between; gap:24px; margin-top:24px; padding-top:20px; border-top:1px solid var(--line); color:#758092; font-size:10px; font-weight:800; letter-spacing:.11em; line-height:1.6; text-transform:uppercase; }
.gallery-credit a { color:#b9c2d0; }
.gallery-credit a:hover { color:var(--blue); }

.merch { background: linear-gradient(180deg, #080b10, #030406); }
.merch-intro { display:grid; grid-template-columns: 1.3fr .7fr; align-items:end; gap:5vw; margin-bottom:50px; }
.merch-intro > p { max-width:560px; color:var(--muted); line-height:1.8; }
.merch-showcase { display:grid; grid-template-columns:.82fr 1.18fr; gap:20px; }
.merch figure { position:relative; margin:0; overflow:hidden; background:#050505; border:1px solid var(--line); }
.merch figure img { width:100%; height:100%; min-height:540px; object-fit:cover; transition:transform .6s ease; }
.merch figure:hover img { transform:scale(1.025); }
.merch figcaption { position:absolute; inset:auto 0 0; display:flex; justify-content:space-between; align-items:center; padding:22px 24px; background:rgba(5,7,11,.88); backdrop-filter:blur(10px); font-size:11px; letter-spacing:.13em; text-transform:uppercase; }
.merch figcaption span { color:var(--muted); }
.merch figcaption strong { color:var(--blue); }
.text-link { display:inline-block; margin-top:28px; font-size:12px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }

.live { display:grid; grid-template-columns:1.2fr .8fr; gap:8vw; align-items:center; background: radial-gradient(circle at 12% 65%, rgba(5,107,255,.2), transparent 30%), #0b0f16; border-top:1px solid var(--line); }
.live-copy > p:not(.eyebrow) { max-width:620px; color:var(--muted); font-size:18px; line-height:1.8; }
.booking-card { padding:clamp(30px, 4vw, 58px); border:1px solid rgba(5,107,255,.45); background:linear-gradient(145deg, rgba(5,107,255,.13), rgba(240,0,70,.06)); box-shadow: 18px 18px 0 rgba(5,107,255,.08); }
.booking-card > span { color:var(--red); font-size:11px; font-weight:900; letter-spacing:.2em; text-transform:uppercase; }
.booking-card h3 { margin:24px 0 34px; font-size:clamp(44px, 4.5vw, 70px); }
.booking-card .button { width:100%; }
.booking-email { display:block; margin-top:22px; color:var(--muted); font-size:12px; text-align:center; letter-spacing:.12em; text-transform:uppercase; }
footer { min-height:230px; display:grid; grid-template-columns:180px 1fr 180px; align-items:center; gap:34px; padding:38px clamp(24px, 6vw, 96px); border-top:1px solid var(--line); background:#03050a; }
.footer-jdr { width:165px; }
.footer-jdr img { width:100%; aspect-ratio:3.72; object-fit:cover; }
.footer-credits { display:flex; justify-content:center; align-items:stretch; gap:18px; }
.footer-credits > a { min-width:230px; min-height:118px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:15px 24px; border:1px solid rgba(255,255,255,.13); background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015)); transition:border-color .2s ease, transform .2s ease; }
.footer-credits > a:hover { border-color:rgba(5,107,255,.72); transform:translateY(-2px); }
.footer-credits span { color:#7e899a; font-size:8px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
.management-logo-link img { width:145px; height:70px; margin-top:4px; object-fit:contain; }
.bam-credit strong { margin-top:9px; color:#fff; font-family:Impact,"Arial Narrow",sans-serif; font-size:31px; letter-spacing:.07em; }
.bam-credit small { margin-top:4px; color:#8b95a5; font-size:7px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
footer p { justify-self:end; color:#747e8f; font-size:9px; line-height:1.7; letter-spacing:.08em; text-align:right; text-transform:uppercase; }

@media (max-width: 900px) {
  .site-header { grid-template-columns:1fr auto; }
  nav { display:none; }
  .hero { height:auto; min-height:100svh; grid-template-columns:1fr; grid-template-rows:auto 52vh; }
  .hero-copy { padding:150px 24px 54px; }
  .hero-portrait { grid-row:2; }
  .hero-portrait::after { background:linear-gradient(180deg, var(--ink), transparent 28%), linear-gradient(0deg, var(--ink), transparent 15%); }
  .portrait-stamp { bottom:55px; }
  .hero-rail { width:100%; padding:0 24px; gap:14px; overflow:hidden; white-space:nowrap; }
  .hero-rail span:not(:last-child)::after { margin-left:14px; }
  .release-banner { flex-wrap:wrap; gap:10px 16px; text-align:center; }
  .section-heading, .story, .merch-intro, .live, .events-heading { grid-template-columns:1fr; }
  .gallery-heading { grid-template-columns:1fr; gap:24px; }
  .gallery-chapter { align-items:flex-start; flex-direction:column; gap:12px; }
  .section-heading { gap:20px; }
  .release-grid, .merch-showcase { grid-template-columns:1fr; }
  .release-featured { grid-template-columns:1fr; }
  .release-photo { min-height:430px; }
  .story-mark { max-width:430px; margin:auto; }
  .merch figure img { min-height:380px; }
  .gallery-credit { flex-direction:column; gap:8px; }
  .events-empty { grid-template-columns:1fr; gap:24px; }
  .events-empty .button { width:max-content; }
  .event-row { grid-template-columns:88px 1fr; gap:20px; }
  .event-row > p { grid-column:2; margin:0; }
  .event-row .button, .ticket-status { grid-column:2; justify-self:start; }
  .fan-support { grid-template-columns:1fr; gap:12px; }
  footer { grid-template-columns:1fr; text-align:center; }
  .footer-jdr { margin:auto; }
  .footer-credits { flex-direction:column; align-items:center; }
  .footer-credits > a { width:min(100%,360px); }
  footer p { justify-self:center; }
}

@media (max-width: 560px) {
  .brand { width:120px; }
  .header-cta { font-size:10px; }
  h1 { font-size:58px; }
  .section { padding:76px 22px; }
  .section-heading h2, .story h2, .merch h2, .live h2 { font-size:48px; }
  .button-row .button { width:100%; }
  .release-card { min-height:auto; }
  .release-copy { padding:30px 24px; }
  .square-card { aspect-ratio:1; }
  .story-stats { grid-template-columns:1fr; }
  .merch figure img { min-height:320px; }
  .product-shot, .collection-shot { aspect-ratio:1; }
  .gallery-wall { columns:1; }
  .events-empty { padding:30px 24px; box-shadow:9px 9px 0 rgba(5,107,255,.07); }
  .events-empty .button { width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition:none !important; }
}