/* =========================================================
   100 BAND PLANS — "THE BLUEPRINT TABLE"
   His work spread across a blueprint drafting table. The
   plan draws itself, the plates POP IN one by one, and
   THE MARKET lands last in a platinum frame.
   ========================================================= */

:root{
  --bg:#05090c;
  --ink:#eaf4f8;
  --muted:rgba(234,244,248,.56);
  --subtle:rgba(234,244,248,.30);
  --cyan:#3fd8ff;
  --plat:#dbe6ee;
  --plat-hi:#ffffff;
  --line:rgba(63,216,255,.24);
  --f-disp:'Archivo', system-ui, sans-serif;
  --f-mono:'Space Mono', ui-monospace, monospace;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ background:var(--bg); }
body{ background:var(--bg); color:var(--ink); font-family:var(--f-disp); overflow-x:hidden; -webkit-font-smoothing:antialiased; min-height:100vh; }
.mono{ font-family:var(--f-mono); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- stage ---------- */
.stage{ position:relative; min-height:100vh; width:100%; padding:clamp(4rem,7vh,6rem) 4vw clamp(2.5rem,5vh,4rem); perspective:1700px; overflow:hidden; display:flex; flex-direction:column; }

/* ---------- scrolling master-plan texture (parallax, behind everything) ---------- */
.plan-scroll{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.plan-scroll svg{ display:block; width:100%; height:100%; }

/* ---------- blueprint backdrop (presented) ---------- */
.plan{ position:fixed; inset:-6% -4%; z-index:1; pointer-events:none; transform-style:preserve-3d;
  transform:translate3d(calc(var(--px,0)*-12px), calc(var(--py,0)*-12px), 0) rotateX(7deg) scale(1.03);
  animation:unfold 2s cubic-bezier(.16,1,.3,1) both; }
@keyframes unfold{
  0%{ opacity:0; transform:perspective(1300px) rotateX(74deg) scale(.66) translateY(20%); }
  50%{ opacity:1; transform:perspective(1300px) rotateX(30deg) scale(.92) translateY(6%); }
  100%{ opacity:1; transform:perspective(1300px) rotateX(7deg) scale(1.03) translateY(0); } }
.plan-svg{ position:absolute; inset:0; width:100%; height:100%; }
.pl-draw{ stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1.9s ease .3s forwards; }
.pl-draw:nth-child(4){ animation-delay:.45s; } .pl-draw:nth-child(n+5){ animation-delay:.6s; }
.pl-draw:nth-child(n+11){ animation-delay:.85s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.pl-txt{ opacity:0; animation:txtIn .7s ease 1.35s forwards; }
@keyframes txtIn{ to{ opacity:1; } }
.plan-glow{ position:absolute; inset:0; background:radial-gradient(58% 40% at 50% 2%, rgba(63,216,255,.12), transparent 60%), radial-gradient(95% 75% at 50% 44%, transparent 38%, rgba(5,9,12,.74) 100%); }

/* ---------- HUD ---------- */
.hud{ position:fixed; top:0; left:0; right:0; z-index:30; display:flex; justify-content:space-between; padding:1.15rem 1.5rem; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; pointer-events:none; }
.hud-l{ color:var(--cyan); font-weight:700; } .hud-l em{ color:var(--subtle); font-style:normal; } .hud-r{ color:var(--muted); }

/* ---------- reveal (fades) ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- title block ---------- */
.titleblock{ position:relative; z-index:12; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.55rem; }
.kicker{ font-size:clamp(.56rem,1.3vw,.7rem); letter-spacing:.34em; color:var(--cyan); font-weight:700; }
.wordmark{ font-family:var(--f-disp); font-weight:900; text-transform:uppercase; font-size:clamp(1.7rem,4.6vw,3.4rem); line-height:.9; letter-spacing:-.01em; color:var(--plat-hi); text-shadow:0 0 32px rgba(63,216,255,.22); }
.tb-meta{ display:flex; gap:.6rem; align-items:baseline; flex-wrap:wrap; justify-content:center; font-size:clamp(.56rem,1.3vw,.72rem); letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.tb-meta b{ color:var(--cyan); font-family:var(--f-disp); font-weight:900; font-size:1.5em; } .tb-meta .sep{ color:var(--subtle); }
.hero-stream{ display:none; } /* shown only <=820px — see mobile block below */

/* ---------- the table ---------- */
.table{ position:relative; z-index:10; flex:1 1 auto; width:100%; min-height:60vh; margin:1rem 0;
  transform:translate3d(calc(var(--px,0)*10px), calc(var(--py,0)*10px), 0); transition:transform .35s ease-out; }

.item{ position:absolute; left:var(--x); top:var(--y); width:var(--w,15vw); aspect-ratio:9/13;
  display:block; text-decoration:none; color:var(--ink); border-radius:7px; overflow:hidden;
  background:#0a1218; border:1px solid var(--line);
  opacity:0; transform:translate(-50%,-104%) rotate(calc(var(--r,0deg) * 1.6)) scale(.6);
  box-shadow:0 22px 46px rgba(0,0,0,.55), inset 0 0 0 3px rgba(5,9,12,.5);
  transition:transform .8s cubic-bezier(.34,1.5,.36,1), opacity .5s ease, box-shadow .4s, border-color .3s; }
.item.in{ opacity:1; transform:translate(-50%,-50%) rotate(var(--r,0)) scale(1); }
.item:hover{ transform:translate(-50%,-50%) rotate(0deg) scale(1.07); z-index:20; border-color:var(--cyan);
  box-shadow:0 36px 74px rgba(0,0,0,.72), 0 0 0 1px var(--cyan); }
.item .m-vid, .item .m-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.item::after{ content:""; position:absolute; inset:0; border:1px dashed rgba(63,216,255,.16); pointer-events:none; }
.m-cap{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:.7rem .6rem .55rem; text-align:left;
  font-size:.52rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
  background:linear-gradient(transparent, rgba(5,9,12,.94)); }
.m-play{ position:absolute; top:50%; left:50%; z-index:4; transform:translate(-50%,-50%) scale(.7); width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:rgba(5,9,12,.5); border:1px solid rgba(255,255,255,.7); color:#fff; font-size:.85rem; opacity:0; backdrop-filter:blur(3px); transition:opacity .3s, transform .3s; }
.item:hover .m-play{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* masking tape — pins each frame to the blueprint */
.item::before, .remix-big::before, .rcard::before{
  content:""; position:absolute; z-index:6; top:-9px; left:50%;
  width:44%; height:21px; transform:translateX(-50%) rotate(-2.5deg);
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 3px, transparent 3px 6px),
    linear-gradient(180deg, rgba(233,227,199,.35), rgba(205,198,167,.25));
  border-left:1px solid rgba(255,255,255,.16); border-right:1px solid rgba(0,0,0,.14);
  box-shadow:0 3px 6px rgba(0,0,0,.28); pointer-events:none; }
.item:nth-child(even)::before{ transform:translateX(-50%) rotate(3deg); }
.rcard::before{ top:-7px; height:16px; width:52%; }

/* ---------- CENTREPIECE: THE MARKET + plaque receipts ---------- */
.market-hero{ position:absolute; left:50%; top:40%; z-index:15;
  width:clamp(280px,32vw,470px); display:flex; flex-direction:column; align-items:center; gap:.8rem;
  opacity:0; transform:translate(-50%,-50%) scale(.92);
  transition:opacity .6s ease, transform .75s cubic-bezier(.34,1.56,.4,1); }
.market-hero.in{ opacity:1; transform:translate(-50%,-50%) scale(1); }

.mh-video{ position:relative; display:block; width:100%; aspect-ratio:16/9; text-decoration:none; color:var(--ink); }
.plat-edge{ position:absolute; inset:0; padding:11px; border-radius:9px;
  background:linear-gradient(135deg,#fff,#cbd8e1 18%,#8b9fac 40%,#f2f7fa 54%,#9fb2be 74%,#fff);
  box-shadow:0 34px 82px rgba(0,0,0,.72), 0 0 58px rgba(219,230,238,.4), inset 0 0 0 1px rgba(255,255,255,.7); }
.plat-edge video{ position:absolute; inset:11px; width:calc(100% - 22px); height:calc(100% - 22px); object-fit:cover; border-radius:3px; filter:brightness(1.07) saturate(1.05); }
.plat-tag{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); z-index:6;
  font-size:.66rem; font-weight:700; letter-spacing:.2em; padding:.4rem 1.15rem; color:#0b1519;
  background:linear-gradient(180deg,#fff,#c4d2dc); border-radius:2px; box-shadow:0 8px 22px rgba(0,0,0,.6), 0 0 22px rgba(219,230,238,.55); }
.mh-cap{ position:absolute; left:11px; right:11px; bottom:11px; z-index:6; display:flex; flex-direction:column; gap:.15rem;
  padding:1.1rem .8rem .55rem; text-align:left; background:linear-gradient(transparent, rgba(5,9,12,.92)); border-radius:0 0 3px 3px; }
.mh-cap b{ font-size:.9rem; letter-spacing:.03em; text-transform:uppercase; }
.mh-cap em{ font-style:normal; font-size:.52rem; letter-spacing:.08em; color:var(--muted); }
.m-play--lg{ width:58px; height:58px; font-size:1.05rem; }
.mh-video:hover .m-play--lg{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* receipts — the plaques + remix, fanned like cards */
.receipts{ display:flex; flex-direction:column; align-items:center; gap:.55rem; }
.rec-label{ font-size:.54rem; letter-spacing:.26em; color:var(--muted); text-transform:uppercase; }
.rcards{ display:flex; justify-content:center; align-items:flex-start; padding-top:.4rem; }
.rcard{ position:relative; display:block; width:clamp(92px,8.8vw,128px); aspect-ratio:3/4; margin:0 -14px;
  border-radius:5px; overflow:hidden; border:1px solid var(--line); background:#0a1218;
  opacity:0; transform:rotate(var(--rr,0)) scale(.4) translateY(16px);
  box-shadow:0 12px 26px rgba(0,0,0,.55); transition:transform .6s cubic-bezier(.34,1.56,.4,1), opacity .5s, box-shadow .3s, border-color .3s; }
.rcard.in{ opacity:1; transform:rotate(var(--rr,0)) scale(1) translateY(0); }
.rcard img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rcard--hero{ width:clamp(112px,10.5vw,156px); z-index:3; border-color:rgba(219,230,238,.6);
  box-shadow:0 20px 42px rgba(0,0,0,.66), 0 0 30px rgba(219,230,238,.32); }
.rcard:hover{ transform:rotate(0) translateY(-10px) scale(1.14); z-index:9; border-color:var(--plat); }
.rc-badge{ position:absolute; left:0; right:0; bottom:0; z-index:2; text-align:center; font-weight:700;
  font-size:.44rem; letter-spacing:.1em; padding:.3rem .15rem; color:#0b1519; }
.rc-badge--gold{ background:linear-gradient(180deg,#f6dc92,#c99a3a); }
.rc-badge--plat{ background:linear-gradient(180deg,#fff,#c4d2dc); }
.rc-badge--rmx{ background:linear-gradient(180deg,#eaf4f8,#9fb2be); }

/* ---------- the remix — bigger video frame in the spread ---------- */
.remix-big{ position:absolute; left:var(--x); top:var(--y); z-index:14;
  width:clamp(320px,29vw,470px); aspect-ratio:16/9; display:block; text-decoration:none; color:var(--ink);
  border-radius:7px; overflow:hidden; border:1px solid rgba(219,230,238,.4); background:#0a1218;
  opacity:0; transform:translate(-50%,-50%) rotate(var(--r,0)) scale(.5);
  box-shadow:0 22px 46px rgba(0,0,0,.62); transition:transform .65s cubic-bezier(.34,1.56,.4,1), opacity .5s, box-shadow .35s, border-color .3s; }
.remix-big.in{ opacity:1; transform:translate(-50%,-50%) rotate(var(--r,0)) scale(1); }
.remix-big:hover{ transform:translate(-50%,-50%) rotate(0) scale(1.05); z-index:20; border-color:var(--cyan); box-shadow:0 30px 60px rgba(0,0,0,.72), 0 0 0 1px var(--cyan); }
.remix-big video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.remix-big::after{ content:""; position:absolute; inset:0; border:1px dashed rgba(63,216,255,.16); pointer-events:none; }
.rmx-tag{ position:absolute; top:9px; left:9px; z-index:3; font-size:.5rem; font-weight:700; letter-spacing:.16em; padding:.26rem .55rem; color:#04121a; background:linear-gradient(180deg,#eaf4f8,#9fb2be); border-radius:2px; }
.rmx-cap{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:.7rem .6rem .5rem; text-align:left; font-size:.5rem; letter-spacing:.08em; color:var(--ink); background:linear-gradient(transparent, rgba(5,9,12,.94)); }
.remix-big .m-play{ font-size:.9rem; }

/* ---------- footer ---------- */
.footer{ position:relative; z-index:12; display:flex; flex-direction:column; align-items:center; gap:1.1rem; margin-top:auto; }
.editorial{ display:flex; gap:.55rem; align-items:center; flex-wrap:wrap; justify-content:center; font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.editorial .ed-key{ color:var(--subtle); } .editorial em{ font-style:normal; color:var(--cyan); border:1px solid var(--line); padding:.28rem .5rem; border-radius:3px; }
.cta-row{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
.cta{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; padding:.9rem 2rem; border:1px solid var(--plat); color:var(--plat-hi); border-radius:3px; text-decoration:none; transition:background .25s, transform .25s, box-shadow .25s; }
.cta:hover{ transform:translateY(-2px); background:rgba(219,230,238,.1); }
.cta--fill{ background:var(--cyan); border-color:var(--cyan); color:#04121a; font-weight:700; }
.cta--fill:hover{ background:#6fe3ff; box-shadow:0 10px 30px rgba(63,216,255,.35); }
.socials{ display:flex; gap:1.3rem; flex-wrap:wrap; justify-content:center; }
.socials a{ color:var(--muted); text-decoration:none; font-size:.62rem; letter-spacing:.22em; transition:color .2s; }
.socials a:hover{ color:var(--cyan); }
.colophon{ font-size:.54rem; letter-spacing:.24em; color:var(--subtle); }

/* ---------- in-site video lightbox ---------- */
.bp-lightbox{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:6vh 5vw;
  background:rgba(3,7,10,.93); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.bp-lightbox.open{ display:flex; }
.bp-lb-inner{ position:relative; width:min(1120px,92vw); }
.bp-lb-close{ position:absolute; top:-2.8rem; right:0; background:rgba(5,12,16,.6); border:1px solid var(--line); color:var(--ink);
  padding:.55rem 1.1rem; border-radius:3px; font-size:.62rem; letter-spacing:.2em; cursor:pointer; transition:border-color .2s, color .2s; }
.bp-lb-close:hover{ border-color:var(--cyan); color:var(--cyan); }
.bp-lb-frame{ position:relative; width:100%; aspect-ratio:16/9; border-radius:6px; overflow:hidden;
  border:2px solid rgba(63,216,255,.5); box-shadow:0 40px 96px rgba(0,0,0,.75), 0 0 60px rgba(63,216,255,.2); background:#000; }
.bp-lb-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- responsive: table becomes a stack ---------- */
@media (max-width:820px){
  /* flatten the 3D on mobile — position:fixed inside a perspective parent breaks hard on phones */
  .stage{ perspective:none; padding-top:4.5rem; }
  .plan{ transform:none; animation:none; inset:0; }
  .table{ position:static; display:flex; flex-direction:column; align-items:center; gap:1rem; min-height:0; transform:none; }

  /* first-viewport fix (2026-09-13): the pop-in reveal (js/main.js) holds every plate at
     opacity:0 for 1.75s-5.8s+ after load, so a phone screenshot taken during that window
     is genuinely blank even though the boxes already occupy their layout space. Skip the
     choreography on mobile — render every plate at its finished state immediately. */
  .item, .market-hero, .remix-big, .rcard{ opacity:1; transition:none; }

  .hero-stream{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.7rem; padding:.7rem 1.5rem;
    background:var(--cyan); color:#04121a; font-size:.68rem; font-weight:700; letter-spacing:.14em;
    text-transform:uppercase; text-decoration:none; border-radius:8px; box-shadow:0 6px 20px rgba(63,216,255,.3); }

  .market-hero{ position:relative; left:auto; top:auto; order:2; width:min(94vw,540px); transform:none; margin:0 auto; }
  .remix-big{ position:relative; order:3; left:auto; top:auto; width:min(94vw,540px); margin:.4rem auto 0;
    transform:translateY(0) rotate(0) scale(1); }
  .item{ position:relative; order:4; left:auto; top:auto; width:min(64vw,300px); transform:translateY(0) rotate(calc(var(--r,0deg) * .55)) scale(1); }
  /* bring the first collage photo (data-pop="1", the lead "TORONTO" plate) ahead of the two
     big 16:9 centrepiece frames so a real collage image lands inside the first viewport
     instead of after ~580px of market-hero + remix-big video frame */
  .item:first-of-type{ order:0; }
  .item:nth-child(odd){ align-self:flex-start; margin-left:6vw; }   /* zigzag down the blueprint */
  .item:nth-child(even){ align-self:flex-end; margin-right:6vw; }
  .item:hover, .remix-big:hover{ transform:scale(1.03); }
  .rcard{ margin:0 -8px; transform:rotate(var(--rr,0)) scale(1) translateY(0); }
  .hud-r{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .plan{ animation:none; transform:rotateX(5deg) scale(1.03); }
  .pl-draw{ animation:none; stroke-dashoffset:0; }
  .pl-txt{ animation:none; opacity:1; }
  .reveal, .item{ transition:none; opacity:1; transform:translate(-50%,-50%) rotate(var(--r,0)); }
  .market-hero{ transition:none; opacity:1; transform:translate(-50%,-50%); }
  .rcard{ transition:none; opacity:1; transform:rotate(var(--rr,0)); }
  .titleblock.reveal, .footer.reveal{ transform:none; }
}

/* STREAM DIRECT — Spotify + Apple Music side by side (explicit 2-col; auto-fit dropped to 1 in the ~600px stage) */
.dsp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; width:min(760px,90vw); margin:0 auto; }
.dsp-grid iframe{ width:100%; height:380px; border:0; border-radius:10px; display:block; background:transparent; }
@media (max-width:640px){ .dsp-grid{ grid-template-columns:1fr; width:100%; } }
/* FOLLOW CTA — swap href to a PUSH.fm pre-save/follow smart-link for true one-tap auto-follow */
.follow-cta{ display:inline-flex; align-items:center; gap:9px; margin-top:16px; padding:13px 30px; background:#3fd8ff; color:#04121a;
  font-family:'Space Mono',monospace; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  border-radius:9px; box-shadow:0 6px 24px rgba(63,216,255,.32); transition:transform .16s, box-shadow .16s; }
.follow-cta:hover{ transform:translateY(-2px); box-shadow:0 12px 34px rgba(63,216,255,.55); }

/* ---------- VIDEO LOG — official videos (opens in the lightbox via main.js) ---------- */
.vlog{ position:relative; z-index:2; margin:0 auto 3.5rem; padding:0 1.25rem; width:min(1040px,100%); box-sizing:border-box; text-align:center; }
.vl-k{ font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:rgba(63,216,255,.65); margin:0 0 12px; }
.vl-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.vl-card{ display:block; text-decoration:none; color:var(--ink); border:1px solid var(--line); border-radius:5px; background:#0a1218; overflow:hidden; position:relative; transition:border-color .25s, transform .25s, box-shadow .25s; }
.vl-card::after{ content:""; position:absolute; inset:0; border:1px dashed rgba(63,216,255,.16); pointer-events:none; }
.vl-card:hover, .vl-card:focus-visible{ border-color:var(--cyan); transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.6); }
.vl-thumb{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; }
.vl-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vl-card .m-play{ opacity:1; transform:translate(-50%,-50%) scale(.85); }
.vl-card:hover .m-play{ transform:translate(-50%,-50%) scale(1); }
.vl-cap{ display:block; padding:.55rem .6rem; text-align:left; font-size:.5rem; letter-spacing:.1em; color:var(--ink); }
.vl-cap b{ color:var(--cyan); font-weight:700; margin-right:.4rem; }
@media (max-width:820px){ .vl-row{ grid-template-columns:repeat(2,1fr); } .vl-card:first-child{ grid-column:1 / -1; } }

/* ---------- BOOKING RAIL — compose, print, then Gmail / Outlook / copy / mail app ---------- */
.book{ position:relative; z-index:2; margin:0 auto 3.5rem; padding:0 1.25rem; width:min(560px,100%); box-sizing:border-box; text-align:center; }
.rail{ display:grid; gap:14px; text-align:left; }
.rail-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.rail-f{ display:grid; gap:6px; }
.rail-f span{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.rail-f select, .rail-f input, .rail-f textarea{ width:100%; box-sizing:border-box; font:inherit; font-family:var(--f-disp); font-size:16px; padding:12px 14px; background:#0a1218; color:var(--ink); border:1px solid var(--line); border-radius:3px; }
.rail-f select:focus-visible, .rail-f input:focus-visible, .rail-f textarea:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.rail-err{ font-size:11px; letter-spacing:.08em; color:#ff8a7a; margin:0; }
.rail-err[hidden], .rail-out[hidden]{ display:none !important; }
.rail .cta{ cursor:pointer; text-align:center; font-size:.72rem; }
.rail-out{ margin-top:24px; padding:18px; background:rgba(4,11,15,.7); border:1px solid var(--cyan); border-radius:4px; text-align:left; display:grid; gap:12px; }
.rail-k{ margin:0; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); overflow-wrap:anywhere; }
.rail-subj{ margin:0; font-weight:800; overflow-wrap:anywhere; }
.rail-body{ margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font-family:var(--f-mono); font-size:13px; line-height:1.55; user-select:text; color:var(--ink); }
.rail-routes{ display:flex; flex-wrap:wrap; gap:10px; }
.rail-routes .cta{ padding:.75rem 1.1rem; min-height:44px; box-sizing:border-box; font-size:.64rem; }
.book-mail{ display:inline-block; margin-top:18px; font-size:.7rem; letter-spacing:.14em; color:var(--muted); text-decoration:none; }
.book-mail:hover{ color:var(--cyan); }
@media (max-width:640px){ .rail-2{ grid-template-columns:1fr; } .rail-routes .cta{ flex:1 1 auto; } }

/* ---------- plan timer: fixed drop countdown bar (js/countdown.js) ---------- */
.plan-timer{ position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:40; display:flex; align-items:center; gap:.9rem;
  padding:.7rem 1.2rem; background:rgba(5,9,12,.88); border:1px solid var(--cyan); border-radius:6px; color:var(--ink); text-decoration:none;
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; white-space:nowrap; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 10px 34px rgba(0,0,0,.6), 0 0 26px rgba(63,216,255,.22); }
.plan-timer .pt-label{ color:var(--cyan); font-weight:700; }
.plan-timer .pt-clock{ font-family:var(--f-disp); font-weight:900; font-size:1.35rem; letter-spacing:.04em; font-variant-numeric:tabular-nums; color:var(--plat-hi); }
.plan-timer .pt-clock:empty{ display:none; }
.plan-timer .pt-what{ color:var(--muted); }
.plan-timer:hover .pt-what{ color:var(--cyan); }
.plan-timer[data-phase="live"] .pt-label{ color:#ff3b3b; animation:ptBlink 1.2s steps(2) infinite; }
@keyframes ptBlink{ 50%{ opacity:.35; } }
body{ padding-bottom:76px; }
@media (max-width:820px){
  .plan-timer{ left:10px; right:10px; bottom:10px; transform:none; justify-content:center; flex-wrap:wrap; gap:.15rem .7rem; padding:.6rem .8rem; font-size:.55rem; }
  .plan-timer .pt-clock{ font-size:1.15rem; }
  .plan-timer .pt-what{ flex-basis:100%; text-align:center; }
  body{ padding-bottom:96px; }
}
@media (prefers-reduced-motion:reduce){ .plan-timer[data-phase="live"] .pt-label{ animation:none; } }

/* =========================================================
   MOBILE v2 (2026-10-14): the zigzag stack ran ~5,000px of tilted plates cut off at the
   screen edges, with the lead photo sitting behind the wordmark. On phones the table
   becomes a tidy 2-column plate grid; the newest drop leads full-width. Desktop untouched.
   ========================================================= */
@media (max-width:820px){
  .stage{ padding-left:14px; padding-right:14px; }
  .titleblock{ padding:2.4rem 0 1.6rem; gap:.75rem; }
  .wordmark{ font-size:clamp(2.2rem,11.2vw,4rem); }
  .tb-meta{ flex-direction:column; align-items:center; gap:.3rem; }
  .tb-meta > span:first-child{ display:flex; flex-direction:column; align-items:center; gap:.15rem; }
  .tb-meta b{ font-size:2.4em; line-height:1; }
  .tb-meta .sep{ display:none; }

  .table{ display:grid; grid-template-columns:1fr 1fr; gap:16px 12px; align-items:start; margin:.5rem 0 1rem; }
  .item, .item:first-of-type, .item:nth-child(odd), .item:nth-child(even){
    order:4; width:100%; margin:0; align-self:start; transform:rotate(calc(var(--r,0deg) * .28)); }
  .item[data-pop="18"]{ order:0; grid-column:1 / -1; width:min(100%,460px); justify-self:center; aspect-ratio:1; transform:rotate(-1deg); }
  /* .in (added by the pop-in JS) carries the desktop translate(-50%,-50%) and outranks the plain
     mobile selector, which dragged the platinum frame half a screen up-left on phones. */
  .market-hero, .market-hero.in{ order:1; grid-column:1 / -1; width:100%; transform:none; }
  .remix-big, .remix-big.in{ order:2; grid-column:1 / -1; width:100%; margin:0; transform:none; }
  .item.in{ transform:rotate(calc(var(--r,0deg) * .28)); }
  .item[data-pop="18"].in{ transform:rotate(-1deg); }
  .item .m-cap{ font-size:.5rem; letter-spacing:.16em; }
  .item:hover, .remix-big:hover{ transform:none; }

  /* the Apple Music artist embed renders as a blank grey card on phones; its link stays below the player */
  .dsp-grid iframe[title^="Apple"]{ display:none; }
}