/* ============================================================
   MENSON BHP — screen-printed Port-au-Prince concert poster
   Palette sampled from real artwork:
   - fire orange  #FF6B1C  ← LIFESTYLE EP cover (the ONE accent)
   - warm near-black #0C0908
   - paper white  #F4EDE3
   Type: Anton (display) · Archivo (body)
   ============================================================ */

:root{
  --ink:   #0C0908;
  --ink-2: #14100D;
  --fire:  #FF6B1C;
  --paper: #F4EDE3;
  --paper-dim: rgba(244,237,227,.62);
  --line:  rgba(244,237,227,.14);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--ink);
  color:var(--paper);
  font-family:'Archivo', system-ui, sans-serif;
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }

/* ---------- shared bits ---------- */
.stamp{
  font-family:'Anton', Impact, sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:.9;
}
.kre{ font-weight:600; }
.eng{ font-size:.8em; color:var(--paper-dim); }

/* film grain — one fixed layer, transform-only cost */
.grain{
  position:fixed; inset:-40px; z-index:80; pointer-events:none;
  opacity:.09; mix-blend-mode:overlay; transform:translateZ(0);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px;
}

/* sticky BOOK pill — one thumb-tap anywhere */
.book-pill{
  position:fixed; right:14px; bottom:18px; z-index:90;
  font-family:'Anton',sans-serif; font-size:15px; letter-spacing:.08em;
  background:var(--fire); color:var(--ink);
  padding:13px 20px 12px;
  box-shadow:4px 4px 0 rgba(244,237,227,.9);
  transform:translateY(120px) rotate(-2deg);
  transition:transform .35s cubic-bezier(.2,.9,.3,1.2);
}
.book-pill.on{ transform:translateY(0) rotate(-2deg); }
.book-pill:active{ transform:translateY(2px) rotate(-2deg); }

/* ============================================================
   1 · HERO — pinned name scrub
   ============================================================ */
.hero{
  position:relative;
  height:100svh;
  overflow:hidden;
  background:var(--ink);
}
.hero__book{
  position:absolute; z-index:3;
  top:calc(14px + env(safe-area-inset-top)); right:14px;
  font-family:'Anton',sans-serif; font-size:13px; letter-spacing:.08em;
  background:var(--paper); color:var(--ink);
  padding:9px 14px 8px;
  transform:rotate(2deg);
  box-shadow:3px 3px 0 var(--fire);
}
.hero__media{ position:absolute; inset:0; }
.hero__img{
  width:100%; height:100%;
  object-fit:cover; object-position:40% 32%;
  /* duotone: ink + fire pulled from the EP artwork */
  filter:grayscale(1) contrast(1.12) brightness(.92);
  transform:scale(1.14);
  will-change:transform;
}
.hero__ink{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(12,9,8,.42) 0%, rgba(12,9,8,.05) 40%, rgba(12,9,8,.65) 88%),
    linear-gradient(0deg, rgba(255,107,28,.34), rgba(255,107,28,.34));
  mix-blend-mode:normal;
}
.hero__ink::after{
  content:""; position:absolute; inset:0;
  background:rgba(255,107,28,.55);
  mix-blend-mode:multiply;
}
.hero__halftone{
  position:absolute; inset:0; opacity:.5; mix-blend-mode:multiply;
  background-image:radial-gradient(circle, rgba(12,9,8,.7) 1px, transparent 1.7px);
  background-size:5px 5px;
}

.hero__stage{
  position:relative; z-index:2;
  height:100%;
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  text-align:center;
  padding:0 5vw;
}
.hero__name{ line-height:.82; }
.hero__row{
  display:flex; justify-content:center;
  font-family:'Anton',sans-serif;
  font-size:clamp(88px, 26.5vw, 420px);
  letter-spacing:-.015em;
  color:var(--paper);
  text-shadow:.035em .03em 0 var(--fire);
}
.hn{ display:inline-block; will-change:transform; }
.hero__bhp{
  display:inline-block;
  margin-top:2vh;
  font-size:clamp(20px, 5.4vw, 64px);
  letter-spacing:.5em; text-indent:.5em;
  color:var(--ink);
  background:var(--fire);
  padding:.32em .5em .22em .78em;
  transform:rotate(-2deg);
}
.hero__tag{ margin-top:4.5vh; }
.hero__tag .kre{ font-size:clamp(16px, 4.4vw, 26px); letter-spacing:.01em; }
.hero__tag .eng{ margin-top:.35em; }
.hero__proof{
  margin-top:2.2vh;
  font-size:11px; letter-spacing:.34em; text-indent:.34em;
  color:var(--paper-dim);
}
.hero__scroll{
  position:absolute; bottom:4svh; left:50%;
  transform:translateX(-50%);
  font-size:10px; letter-spacing:.3em; text-indent:.3em;
  color:var(--paper-dim);
}
.hero__caption{
  position:absolute; z-index:2;
  left:5vw; bottom:5svh;
  opacity:0;
  display:flex; flex-direction:column; gap:6px; align-items:flex-start;
}
.hero__caption .stamp{
  font-size:clamp(26px, 8vw, 64px);
  background:var(--paper); color:var(--ink);
  padding:.18em .35em .1em;
  transform:rotate(-1.5deg);
}
.hero__capsub{
  font-size:10px; letter-spacing:.3em; color:var(--paper);
}

/* ============================================================
   marquee — quiet secondary system
   ============================================================ */
.marquee{
  overflow:hidden;
  border-block:1px solid var(--line);
  background:var(--ink-2);
  padding:14px 0;
}
.marquee--tilt{ transform:rotate(-1.4deg) scale(1.02); }
.marquee__track{
  display:flex; width:max-content;
  animation:marq 26s linear infinite;
  will-change:transform;
}
.marquee__track span{
  font-family:'Anton',sans-serif;
  font-size:clamp(15px, 3.6vw, 24px);
  letter-spacing:.14em;
  color:transparent;
  -webkit-text-stroke:1px rgba(244,237,227,.55);
  white-space:nowrap;
}
@keyframes marq{ from{ transform:translateX(0); } to{ transform:translateX(-33.333%); } }

/* ============================================================
   2 · TRACKS — pinned horizontal rail (crate flipping)
   ============================================================ */
.tracks{ background:var(--ink); }
.tracks__pin{
  height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
  padding-block:max(3svh, 20px);
}
.tracks__head{ padding:0 5vw 3.5svh; }
.tracks__head .stamp{
  font-size:clamp(44px, 13vw, 130px);
  color:transparent;
  -webkit-text-stroke:2px var(--paper);
}
.tracks__head .eng{ margin-top:10px; }

.rail{
  display:flex; gap:5vw;
  padding:0 5vw;
  width:max-content;
  will-change:transform;
}
.card{
  position:relative;
  width:min(72vw, 420px);
  flex:none;
  -webkit-tap-highlight-color:transparent;
}
.card__imgwrap{
  display:block;
  height:min(54svh, 460px);
  overflow:hidden;
  background:var(--ink-2);
  /* torn-poster corners */
  clip-path:polygon(0 2%, 4% 0, 96% 1%, 100% 4%, 99% 96%, 95% 100%, 3% 99%, 0 95%);
}
.card__imgwrap img{
  width:100%; height:100%;
  object-fit:cover;
  filter:grayscale(.35) contrast(1.1) brightness(.94);
}
.card__imgwrap::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle, rgba(12,9,8,.5) 1px, transparent 1.6px);
  background-size:4px 4px;
  mix-blend-mode:multiply;
  opacity:.55;
}
.card__meta{
  display:block;
  margin-top:12px;
  font-size:10px; letter-spacing:.28em;
  color:var(--paper-dim);
}
.card__title{
  display:inline-block;
  margin-top:6px;
  font-family:'Anton',sans-serif;
  font-size:clamp(30px, 8.6vw, 58px);
  line-height:.95;
  color:var(--paper);
  text-shadow:3px 2px 0 var(--fire);
}
.card:active .card__title{ text-shadow:-3px 2px 0 var(--fire); }

/* ============================================================
   3 · SPOTLIGHT — LIFESTYLE EP + kinetic Kreyòl
   ============================================================ */
.spot{
  position:relative;
  background:
    radial-gradient(120% 70% at 50% 100%, rgba(255,107,28,.20), transparent 60%),
    var(--ink);
  padding:14svh 5vw 12svh;
  overflow:hidden;
}
.spot__inner{ max-width:560px; margin:0 auto; }
.spot__eyebrow{
  font-size:11px; letter-spacing:.32em;
  color:var(--fire);
  margin-bottom:4svh;
}
.spot__cover{
  position:relative;
  width:min(78vw, 400px);
  transform:rotate(-2.5deg);
  box-shadow:10px 12px 0 rgba(255,107,28,.9);
  will-change:transform;
}
.spot__cover img{ width:100%; }

.lyric{ margin:9svh 0 0; }
.lyric__line{
  font-family:'Anton',sans-serif;
  font-size:clamp(48px, 15vw, 120px);
  line-height:.92;
  color:var(--paper);
  display:flex; flex-wrap:wrap; gap:.12em .22em;
}
.lyric__line .w{
  display:inline-block;
  will-change:transform, opacity;
}
.lyric__line .w:nth-child(4){
  color:transparent;
  -webkit-text-stroke:2px var(--fire);
}
.lyric__cite{
  display:block; margin-top:14px;
  font-style:normal;
  font-size:11px; letter-spacing:.26em;
  color:var(--paper-dim);
}

.facade{
  position:relative;
  margin-top:9svh;
  aspect-ratio:16/9;
  overflow:hidden;
  clip-path:polygon(0 3%, 3% 0, 97% 1%, 100% 5%, 99% 96%, 96% 100%, 2% 99%, 0 94%);
  background:var(--ink-2);
  cursor:pointer;
}
.facade img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  filter:contrast(1.05) brightness(.9);
}
.facade iframe{
  position:absolute; inset:0;
  width:100%; height:100%; border:0;
}
.facade__play{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:76px; height:76px;
  border:0; cursor:pointer;
  background:var(--fire); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  box-shadow:4px 4px 0 rgba(244,237,227,.9);
}
.facade__play:active{ transform:translate(-50%,-46%); }
.facade__label{
  position:absolute; left:12px; bottom:10px;
  font-family:'Anton',sans-serif;
  font-size:14px; letter-spacing:.1em;
  color:var(--paper);
  background:rgba(12,9,8,.72);
  padding:6px 10px 4px;
}

/* ============================================================
   4 · THE ARTIST
   ============================================================ */
.artist{
  background:var(--ink);
  padding:12svh 5vw;
  border-top:1px solid var(--line);
}
.artist__head .stamp{
  font-size:clamp(44px, 13vw, 130px);
  color:transparent;
  -webkit-text-stroke:2px var(--paper);
  margin-bottom:6svh;
}
.ph{
  position:relative;
  margin:0 0 7svh;
  will-change:transform;
}
.ph img{
  width:100%;
  filter:contrast(1.06) saturate(.92) brightness(.96);
  clip-path:polygon(0 1.5%, 3% 0, 97% .5%, 100% 3%, 99.5% 97%, 96% 100%, 2% 99.5%, 0 96%);
}
.ph--booth{ width:min(86vw, 460px); transform:rotate(-1.2deg); }
.ph--grillz{ width:min(92vw, 560px); margin-left:auto; transform:rotate(1.4deg); }
.ph figcaption{
  position:absolute; left:-6px; bottom:18px;
  font-family:'Anton',sans-serif;
  font-size:13px; letter-spacing:.18em;
  background:var(--fire); color:var(--ink);
  padding:7px 12px 5px;
  transform:rotate(-2deg);
}
.artist__bio{ margin:0 0 7svh; max-width:34ch; }
.artist__bio .kre{
  font-family:'Anton',sans-serif; font-weight:400;
  font-size:clamp(24px, 6.6vw, 40px);
  line-height:1.04;
  text-transform:uppercase;
  margin-top:1em;
}
.artist__bio .kre:first-child{ margin-top:0; }
.artist__bio .eng{ margin-top:.4em; font-size:13px; }

/* ============================================================
   5 · BOOK MENSON — the accent moment
   ============================================================ */
.book{
  min-height:100svh;
  background:var(--fire);
  color:var(--ink);
  display:flex; align-items:center;
  padding:7svh 5vw;
  position:relative;
  overflow:hidden;
}
.book::after{ /* halftone on the ink field */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle, rgba(12,9,8,.28) 1px, transparent 1.8px);
  background-size:7px 7px;
  opacity:.5;
}
.book__inner{ position:relative; z-index:1; width:100%; }
.book__title{
  font-family:'Anton',sans-serif;
  font-size:clamp(80px, 24vw, 300px);
  line-height:.84;
  letter-spacing:-.01em;
  display:flex; flex-direction:column;
}
.book__title span:last-child{
  color:transparent;
  -webkit-text-stroke:3px var(--ink);
}
.book__kre{
  margin-top:4svh;
  font-size:clamp(17px, 4.6vw, 24px);
  font-weight:600;
  max-width:24ch;
}
.book__eng{
  margin-top:.5em;
  font-size:13px;
  color:rgba(12,9,8,.66);
}
.book__btn{
  display:block;
  margin-top:4.5svh;
  background:var(--ink); color:var(--paper);
  font-family:'Anton',sans-serif;
  font-size:clamp(22px, 6.4vw, 40px);
  letter-spacing:.04em;
  text-align:center;
  padding:.85em .6em .72em;
  box-shadow:6px 6px 0 var(--paper);
  transform:rotate(-1deg);
}
.book__btn:active{ transform:rotate(-1deg) translate(3px,3px); box-shadow:3px 3px 0 var(--paper); }
.book__ig{
  margin-top:3svh;
  font-size:12px; letter-spacing:.24em;
  color:rgba(12,9,8,.72);
}

/* ============================================================
   6 · FOOTER
   ============================================================ */
.foot{
  background:var(--ink);
  padding:7svh 5vw 12svh;
}
.foot__links{
  display:flex; flex-wrap:wrap; gap:16px 28px;
}
.foot__links a{
  font-family:'Anton',sans-serif;
  font-size:clamp(20px, 5.4vw, 30px);
  letter-spacing:.06em;
  color:var(--paper);
  text-shadow:2px 2px 0 rgba(255,107,28,0);
  transition:text-shadow .2s, color .2s;
}
.foot__links a:hover,
.foot__links a:active{ text-shadow:2px 2px 0 var(--fire); }
.foot__credit{
  margin-top:6svh;
  font-size:10px; letter-spacing:.28em;
  color:var(--paper-dim);
}

/* ============================================================
   larger screens — keep the poster energy
   ============================================================ */
@media (min-width:760px){
  .spot__inner{ max-width:820px; }
  .facade{ max-width:820px; }
  .artist{ display:grid; grid-template-columns:1fr 1fr; gap:0 6vw; align-items:start; }
  .artist__head{ grid-column:1 / -1; }
  .ph--booth{ grid-row:span 2; }
  .book__btn{ display:inline-block; padding:.85em 1.4em .72em; }
}

/* ============================================================
   reduced motion — full static fallback
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation:none; }
  .hero__img{ transform:none; }
  .book-pill{ transform:translateY(0) rotate(-2deg); transition:none; }
  .hero__caption{ display:none; }
  .tracks__pin{ height:auto; }
  .rail{
    width:auto;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:24px;
  }
  html.reduced .rail{ overflow-x:auto; }
}
/* JS adds .reduced when matchMedia matches — rail becomes native swipe */
html.reduced .tracks__pin{ height:auto; padding-block:8svh; }
html.reduced .rail{ width:auto; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:24px; }
html.reduced .hero{ height:auto; }
html.reduced .hero__stage{ height:auto; min-height:100svh; padding:16svh 5vw 14svh; }
html.reduced .hero__scroll{ position:static; margin-top:6svh; transform:none; }
html.reduced .hero__caption{ display:none; }