/* MAXFLO — screen-printed Port-au-Prince concert poster / bootleg mixtape sleeve.
   Palette sampled from the artwork: warm ink black (night shots),
   ONE hot accent — neon-sign red from the Last One Standing visualizer + cap,
   aged paper cream from the LOS cover type. */

:root{
  --ink:#0e0b09;
  --ink-2:#161110;
  --accent:#ff3d2e;
  --paper:#e9dcbd;
  --paper-dim:rgba(233,220,189,.62);
  --paper-faint:rgba(233,220,189,.28);
  --hairline:rgba(233,220,189,.16);
}

*{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;
  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}
.disp,.hero-name,.sec-title,.card-title,.card-idx,.lline,.bio-l1,.book-title,.f-brand,.mq-track,.pill{
  font-family:'Anton',Impact,sans-serif;font-weight:400;text-transform:uppercase;
}

/* ---------- textures ---------- */
.grain{
  position:fixed;inset:-8%;z-index:80;pointer-events:none;opacity:.09;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
.halftone{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.28;
  background-image:radial-gradient(circle,rgba(10,7,6,.85) 1px,transparent 1.5px);
  background-size:4px 4px;
}
.tear{
  height:30px;background:var(--accent);position:relative;z-index:2;
}
.tear-down{
  margin-top:-1px;
  clip-path:polygon(0 0,100% 0,100% 34%,96% 70%,91% 30%,86% 78%,80% 40%,74% 90%,69% 45%,63% 74%,57% 30%,51% 84%,45% 38%,39% 70%,33% 26%,27% 80%,21% 42%,15% 88%,9% 34%,4% 66%,0 30%);
}
.tear-up{
  margin-bottom:-1px;
  clip-path:polygon(0 100%,100% 100%,100% 60%,95% 24%,90% 68%,84% 18%,78% 58%,72% 10%,66% 52%,60% 22%,54% 66%,48% 14%,42% 58%,36% 28%,30% 70%,24% 18%,18% 62%,12% 10%,6% 56%,2% 30%,0 64%);
}

/* ---------- small stamps ---------- */
.kick{
  font-size:11px;letter-spacing:.32em;font-weight:600;color:var(--accent);
  text-transform:uppercase;margin-bottom:14px;
}
.kick em{font-style:normal;color:var(--paper-dim);letter-spacing:.18em}
.kick-ink em{color:rgba(14,11,9,.55)}

/* ---------- sticky book pill ---------- */
.pill{
  position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:70;
  background:var(--accent);color:var(--ink);
  font-size:17px;letter-spacing:.08em;line-height:1;
  padding:13px 17px 12px;
  transform:rotate(-2deg) translateY(12px);
  box-shadow:4px 4px 0 var(--paper);
  opacity:0;pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;
}
.pill.show{opacity:1;pointer-events:auto;transform:rotate(-2deg) translateY(0)}
.pill:active{transform:rotate(-2deg) translate(2px,2px);box-shadow:2px 2px 0 var(--paper)}

/* ---------- 1 · HERO ---------- */
.hero{
  position:relative;height:100svh;min-height:560px;overflow:hidden;
  display:flex;align-items:flex-end;
}
.hero-media{position:absolute;inset:0}
.hero-media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:48% 38%;
}
.duo-wrap{position:absolute;inset:0}
.hero-gray{filter:grayscale(1) contrast(1.08) brightness(1.12)}
.duo-tint{position:absolute;inset:0;background:var(--accent);mix-blend-mode:multiply}
.hero-shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,11,9,.28) 0%,transparent 30%,transparent 55%,rgba(14,11,9,.82) 92%);
}
.hero-name{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-54%);
  display:flex;justify-content:center;z-index:3;
  font-size:clamp(90px,30.5vw,330px);line-height:.86;letter-spacing:0;
  color:var(--paper);
  text-shadow:0.02em 0.02em 0 rgba(14,11,9,.55);
  pointer-events:none;white-space:nowrap;
}
.hn{display:inline-block;will-change:transform}
.hero-foot{position:relative;z-index:4;padding:0 18px calc(30px + env(safe-area-inset-bottom));width:100%}
.stamp{
  display:inline-block;
  font-weight:600;font-size:13px;letter-spacing:.22em;color:var(--paper);
  border:2px solid var(--paper);padding:9px 13px 8px;
  transform:rotate(-1.6deg);
  box-shadow:3px 3px 0 rgba(14,11,9,.6);
  background:rgba(14,11,9,.35);
}
.proof{margin-top:12px;font-size:10.5px;letter-spacing:.3em;font-weight:600;color:var(--paper-dim)}
.cue{
  position:absolute;right:16px;bottom:calc(30px + env(safe-area-inset-bottom));z-index:4;
  font-size:10px;letter-spacing:.34em;font-weight:600;color:var(--accent);
  writing-mode:vertical-rl;
}

/* ---------- marquee (quiet) ---------- */
.marquee{
  overflow:hidden;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  padding:14px 0;background:var(--ink);
}
.mq-track{
  display:flex;width:max-content;white-space:nowrap;
  font-size:clamp(26px,8vw,72px);line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--paper-faint);
  animation:mq 36s linear infinite;
}
.mq-track b{font-weight:400;color:var(--accent);-webkit-text-stroke:0}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 2 · RAIL ---------- */
.rail-sec{position:relative;background:var(--ink);padding:64px 0 72px;min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.sec-head{padding:0 18px;position:relative}
.sec-title{font-size:clamp(44px,13vw,150px);line-height:.9;color:var(--paper)}
.sec-sub{margin-top:10px;font-size:13px;color:var(--paper-dim);max-width:34ch}
.rail-count{
  position:absolute;top:6px;right:16px;
  font-size:12px;letter-spacing:.2em;font-weight:600;color:var(--paper-dim);
}
.rail-count b{color:var(--accent);font-weight:600}
.rail{margin-top:34px}
/* default (no JS / reduced motion): native horizontal crate flip */
.rail{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail-sec.enhanced .rail{overflow:visible}
.rail-track{display:flex;gap:clamp(16px,4vw,44px);padding:0 18px;width:max-content;will-change:transform}
.card{
  position:relative;display:block;width:min(76vw,430px);
  scroll-snap-align:center;
  padding-bottom:8px;
}
.card-media{
  position:relative;display:block;border:2px solid rgba(233,220,189,.35);
  box-shadow:6px 6px 0 rgba(0,0,0,.55);
  overflow:hidden;background:var(--ink-2);
}
.card-media::after{
  content:"";position:absolute;inset:0;mix-blend-mode:multiply;opacity:.3;
  background-image:radial-gradient(circle,rgba(10,7,6,.9) 1px,transparent 1.5px);
  background-size:4px 4px;
}
.card-media img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:grayscale(.28) contrast(1.05)}
.card-idx{
  position:absolute;top:-24px;left:-6px;z-index:2;
  font-size:64px;line-height:1;color:transparent;
  -webkit-text-stroke:1.5px var(--accent);
}
.card-title{
  display:block;margin-top:-20px;position:relative;z-index:2;
  font-size:clamp(28px,7.4vw,54px);line-height:.95;color:var(--paper);
  text-shadow:0.07em 0.07em 0 var(--ink);
  padding-left:4px;
}
.card-meta{
  display:block;margin-top:8px;padding-left:6px;
  font-size:10.5px;letter-spacing:.26em;font-weight:600;color:var(--paper-dim);
}
.card:hover .card-title{color:var(--accent);text-shadow:0.07em 0.07em 0 var(--ink)}
.card:hover .card-media{transform:translate(-2px,-2px);box-shadow:8px 8px 0 rgba(0,0,0,.55)}
.card-media{transition:transform .2s ease,box-shadow .2s ease}

/* ---------- 3 · SPOTLIGHT ---------- */
.spot{position:relative;background:var(--ink-2);padding:84px 18px 90px;overflow:hidden}
.spot .kick{margin-bottom:26px}
.lyric{margin-bottom:40px}
.lline{
  font-size:clamp(34px,10.6vw,110px);line-height:.95;color:var(--paper);
  letter-spacing:.005em;
}
.lline-acc{color:var(--accent)}
.lword{display:inline-block;will-change:transform}
.lcredit{margin-top:16px;font-size:10.5px;letter-spacing:.3em;font-weight:600;color:var(--paper-dim)}
.yt-facade{
  position:relative;border:2px solid rgba(233,220,189,.35);
  box-shadow:8px 8px 0 rgba(0,0,0,.5);
  cursor:pointer;background:#000;
}
.yt-facade img{width:100%;aspect-ratio:16/9;object-fit:cover}
.yt-facade iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.yt-facade .play{
  position:absolute;inset:0;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;gap:14px;
  background:linear-gradient(180deg,transparent 40%,rgba(14,11,9,.72));
  border:0;cursor:pointer;color:var(--paper);
}
.play-tri{
  width:0;height:0;display:block;
  border-style:solid;border-width:16px 0 16px 26px;
  border-color:transparent transparent transparent var(--ink);
  background:none;position:relative;z-index:1;
}
.yt-facade .play::before{
  content:"";position:absolute;width:74px;height:74px;background:var(--accent);
  transform:rotate(-2deg);box-shadow:4px 4px 0 var(--ink);
  left:50%;top:50%;translate:-37px -37px;
}
.play-txt{
  position:absolute;bottom:14px;left:16px;
  font-family:'Archivo',sans-serif;font-size:11px;letter-spacing:.3em;font-weight:600;color:var(--paper);
}
.yt-facade:hover .play::before{transform:rotate(0deg)}
.spot-cover{
  margin:44px auto 0;width:min(68vw,340px);
  transform:rotate(-2.4deg);position:relative;
}
.spot-cover img{border:2px solid rgba(233,220,189,.3);box-shadow:8px 8px 0 rgba(0,0,0,.5)}
.spot-cover::before{
  content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%) rotate(2deg);
  width:84px;height:22px;background:rgba(233,220,189,.2);z-index:2;
}
.spot-cover figcaption{
  margin-top:14px;text-align:center;
  font-size:10px;letter-spacing:.3em;font-weight:600;color:var(--paper-dim);
}

/* ---------- 4 · ARTIST ---------- */
.artist{background:var(--paper);color:var(--ink);padding:78px 18px 90px;position:relative}
.bio-l1{font-size:clamp(36px,10.4vw,104px);line-height:.92;color:var(--ink)}
.bio-l2{margin-top:18px;font-size:clamp(19px,5vw,30px);line-height:1.25;color:#2b221c}
.bio-l2 b{color:var(--accent);font-weight:600}
.bio-l3{margin-top:10px;font-size:clamp(16px,4.4vw,24px);line-height:1.35;color:#2b221c;max-width:34ch}
.bio-l3 i{font-style:italic}
.bio-en{margin-top:14px;font-size:12px;letter-spacing:.06em;color:rgba(14,11,9,.55);max-width:44ch}
.phs{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:26px 16px}
.ph{position:relative;overflow:visible}
.ph img{
  width:100%;filter:grayscale(1) contrast(1.12);
  border:2px solid var(--ink);box-shadow:7px 7px 0 var(--ink);
  will-change:transform;
}
.ph figcaption{margin-top:10px;font-size:9.5px;letter-spacing:.3em;font-weight:600;color:rgba(14,11,9,.6)}
.ph-a{grid-column:1/-1;width:78%}
.ph-b{transform:rotate(1.6deg);margin-top:-12%}
.ph-b{justify-self:end;width:100%}
.ph-c{align-self:end;transform:rotate(-1.2deg)}
.ph-b{grid-column:2}
.ph-c{grid-column:1;margin-top:-34%}

/* ---------- 5 · BOOK ---------- */
.book{
  background:var(--accent);color:var(--ink);
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:90px 18px;position:relative;
}
.book-kick{font-size:11px;letter-spacing:.34em;font-weight:600;margin-bottom:18px;color:var(--ink)}
.book-title{display:flex;flex-direction:column;line-height:.84;font-size:clamp(96px,29vw,330px);color:var(--ink)}
.book-title span:first-child{font-size:1.36em;line-height:.8}
.book-title span:last-child{
  color:transparent;-webkit-text-stroke:3px var(--ink);
}
.book-line{margin-top:26px;font-size:clamp(17px,4.6vw,24px);font-weight:600;max-width:24ch}
.book-en{margin-top:6px;font-size:12px;color:rgba(14,11,9,.62);max-width:40ch}
.book-btn{
  margin-top:34px;display:block;text-align:center;
  background:var(--ink);color:var(--paper);
  font-family:'Anton',Impact,sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(22px,6.4vw,40px);letter-spacing:.04em;line-height:1;
  padding:24px 20px;
  box-shadow:6px 6px 0 var(--paper);
  transition:transform .15s ease,box-shadow .15s ease;
}
.book-btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--paper)}
.book-btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--paper)}
.book-note{margin-top:16px;text-align:center;font-size:12px;letter-spacing:.28em;font-weight:600;color:rgba(14,11,9,.7)}

/* ---------- 6 · FOOTER ---------- */
footer{padding:54px 18px calc(84px + env(safe-area-inset-bottom));background:var(--ink)}
.f-brand{font-size:44px;line-height:1;color:var(--paper)}
.f-links{margin-top:18px;display:flex;gap:26px}
.f-links a{
  font-size:11px;letter-spacing:.3em;font-weight:600;color:var(--paper-dim);
  border-bottom:2px solid var(--accent);padding-bottom:4px;
}
.f-links a:hover{color:var(--paper)}
.f-credit{margin-top:26px;font-size:9.5px;letter-spacing:.26em;color:var(--paper-faint)}

/* ---------- wider screens ---------- */
@media(min-width:760px){
  .hero-foot{padding-left:34px}
  .sec-head,.spot,.artist,.book,footer{padding-left:34px;padding-right:34px}
  .rail-track{padding:0 34px}
  .card{width:min(44vw,470px)}
  .spot{display:grid;grid-template-columns:1.25fr .75fr;gap:0 48px;align-items:start}
  .spot .kick{grid-column:1/-1}
  .lyric{grid-column:1/-1}
  .yt-facade{grid-column:1}
  .spot-cover{grid-column:2;margin-top:0}
  .phs{grid-template-columns:1fr 1fr 1fr;align-items:start}
  .ph-a{grid-column:1;width:100%}
  .ph-b{grid-column:2;margin-top:8%}
  .ph-c{grid-column:3;margin-top:0}
  .book-btn{display:inline-block;align-self:flex-start;padding:24px 44px}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .mq-track{animation:none}
  .pill{opacity:1;pointer-events:auto;transform:rotate(-2deg)}
  .duo-tint{opacity:.5}
  .hero-gray{opacity:0}
  *{scroll-behavior:auto!important}
}