/* =====================================================================
   v3: collectible passes, feed wall
   ===================================================================== */

/* ---- hero: watermark + MAINSTREAM. CAM viewfinder ---- */
.hero-bg{background:radial-gradient(55% 50% at 50% 40%,#151716 0%,#0b0b0c 60%,var(--ink) 100%)}
.hero-bg::after{display:none}
.hero-water{position:absolute;inset:auto 0 18% 0;z-index:-1;pointer-events:none;opacity:.05;font-family:var(--display);font-weight:900;font-size:clamp(60px,11vw,170px);letter-spacing:-.04em;line-height:.9;white-space:nowrap;color:#fff;overflow:hidden}
.hw-row{animation:hw 60s linear infinite}
.hw-row.r{animation-direction:reverse;-webkit-text-stroke:1.5px #fff;color:transparent}
@keyframes hw{to{transform:translateX(-33%)}}
.cam{position:absolute;inset:84px clamp(12px,2.4vw,34px) 16px;pointer-events:none;z-index:0}
.cam .c{position:absolute;width:26px;height:26px;border:0 solid #ffffff55}
.cam .tl{left:0;top:0;border-top-width:1.5px;border-left-width:1.5px}.cam .tr{right:0;top:0;border-top-width:1.5px;border-right-width:1.5px}
.cam .bl{left:0;bottom:0;border-bottom-width:1.5px;border-left-width:1.5px}.cam .br{right:0;bottom:0;border-bottom-width:1.5px;border-right-width:1.5px}
.cam-l,.cam-r{position:absolute;top:14px;display:flex;flex-direction:column;gap:2px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:#ffffffb0}
.cam-l{left:16px}.cam-r{right:16px;text-align:right}
.cam-l b{font-family:var(--display);font-weight:900;font-size:12px;letter-spacing:.02em;color:#fff}
.cam-l span{display:flex;align-items:center;gap:6px}
.rec{display:inline-block;width:8px;height:8px;border-radius:50%;background:#fff;animation:rec 1.1s steps(2) infinite}
@keyframes rec{50%{opacity:0}}
.cam-cross{position:absolute;left:50%;top:44%;width:18px;height:18px;transform:translate(-50%,-50%);opacity:.3}
.cam-cross::before,.cam-cross::after{content:"";position:absolute;background:#fff}
.cam-cross::before{left:50%;top:0;bottom:0;width:1px}.cam-cross::after{top:50%;left:0;right:0;height:1px}
.hero-top{margin-top:40px}
@media (max-width:700px){.cam-r span:last-child{display:none}.hero-top{margin-top:34px}}

/* ---- collectible passes ---- */
.track{align-items:flex-start;padding-top:14px;padding-bottom:30px}
.tix{--w:clamp(200px,calc((100svh - 340px) * .56),290px);flex:none;width:var(--w);perspective:900px;cursor:pointer;text-align:left;position:relative;display:block}
.tix:nth-child(even){margin-top:28px}
.tix-in{position:relative;border-radius:16px;background:var(--paper);color:var(--ink);transform-style:preserve-3d;
  transition:transform .5s var(--ease),filter .4s,opacity .4s;filter:drop-shadow(0 18px 22px #0005);
  -webkit-mask:radial-gradient(circle 13px at 0 var(--perf,71%),#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 13px at 100% var(--perf,71%),#0000 97%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 13px at 0 var(--perf,71%),#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 13px at 100% var(--perf,71%),#0000 97%,#000) right/51% 100% no-repeat}
.tix-art{position:relative;aspect-ratio:3/3.7;overflow:hidden;border-radius:16px 16px 0 0;background:#111;container-type:inline-size}
.tix-art>img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .8s var(--ease)}
.tix:hover .tix-art>img{transform:scale(1.08)}
.tix-art .pz{position:absolute;inset:0}
.tix-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0006 0%,#0000 22%,#0000 60%,#0008);pointer-events:none}
.tix-no{position:absolute;left:12px;top:12px;z-index:3;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.12em;color:#fff;background:#0009;backdrop-filter:blur(6px);padding:5px 8px;border-radius:99px}
.tix-mark{position:absolute;right:12px;top:9px;z-index:3;color:#fff;filter:drop-shadow(0 2px 6px #0008)}
.tix-mark .mark{width:32px;height:19px}
.tix-role{position:absolute;left:12px;bottom:12px;z-index:3;display:flex;gap:5px;flex-wrap:wrap}
.tix-holo{position:absolute;inset:0;z-index:4;pointer-events:none;mix-blend-mode:color-dodge;opacity:0;transition:opacity .4s;
  background:linear-gradient(115deg,#0000 22%,#ffffff40 40%,#c9c9c9 50%,#ffffff40 60%,#0000 78%);background-size:250% 250%;background-position:var(--hx,50%) var(--hy,50%)}
.tix-glare{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,30%),#ffffff4d,#0000 40%)}
.tix:hover .tix-holo{opacity:.45}.tix:hover .tix-glare{opacity:1}
.tix-perf{height:0;border-top:2px dashed #00000030;margin:0 20px}
.tix-stub{padding:13px 16px 14px 18px;display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:end;position:relative}
.tix-stub h3{grid-column:1/-1;font-family:var(--display);font-weight:900;font-size:clamp(15px,1.3vw,18px);line-height:1.02;letter-spacing:-.02em;text-transform:uppercase}
.tix-when{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute-2);line-height:1.5}
.tix-bar{width:70px;height:26px;display:block}
.tix-accent{position:absolute;left:0;top:0;bottom:0;width:5px;background:#09090a}
.tix.dim{pointer-events:none}
.tix.dim .tix-in{opacity:.16;filter:grayscale(1)}
@media (max-width:900px){.tix{scroll-snap-align:start;--w:66vw;max-width:280px}.tix:nth-child(even){margin-top:0}}
.modal-poster .frame.tixframe{aspect-ratio:auto;width:min(100%,340px);overflow:visible;box-shadow:none;border-radius:0}
.modal-poster .frame.tixframe .tix{--w:100%;width:100%;cursor:default}
@media (max-width:860px){.modal-poster .frame.tixframe{width:min(62vw,250px)}}

/* ---- feed wall ---- */
.feed{position:relative;min-height:min(100svh,980px);display:flex;align-items:center;overflow:hidden;background:#050506;padding:120px 0;isolation:isolate}
.feed-wall{position:absolute;inset:-25% -10%;z-index:-2;perspective:1400px}
.fw-inner{position:absolute;inset:0;display:flex;gap:18px;justify-content:center;transform:rotateX(22deg) rotateZ(-12deg) translateX(20%);transform-style:preserve-3d}
.fw-col{display:flex;flex-direction:column;gap:18px;width:clamp(130px,12.5vw,196px);flex:none;animation:fwUp var(--d,50s) linear infinite}
.fw-col.dn{animation-name:fwDn}
.feed-wall:hover .fw-col{animation-play-state:paused}
@keyframes fwUp{to{transform:translateY(-50%)}}
@keyframes fwDn{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.fw-card{position:relative;display:block;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#111;text-decoration:none;color:#fff;box-shadow:0 20px 40px -20px #000;transition:transform .4s var(--ease),filter .4s;filter:saturate(.8) brightness(.72)}
.fw-card:hover{transform:scale(1.06);filter:none;z-index:2}
.fw-card img{width:100%;height:100%;object-fit:cover}
.fw-card .v{position:absolute;left:8px;bottom:8px;display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;font-weight:600;text-shadow:0 1px 4px #000}
.fw-card .v::before{content:"▶";font-size:9px}
.fw-card .cap{position:absolute;left:8px;right:8px;top:8px;font-family:var(--display);font-weight:800;font-size:11px;line-height:1.15;text-shadow:0 1px 6px #000;opacity:0;transform:translateY(-6px);transition:.3s}
.fw-card:hover .cap{opacity:1;transform:none}
.feed-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#050506 0%,#050506e8 32%,#05050680 56%,#05050600 80%),linear-gradient(0deg,#050506 0%,#0000 16%,#0000 84%,#050506 100%)}
.feed-copy{position:relative;pointer-events:none}
.feed-copy a{pointer-events:auto}
.feed-big{font-family:var(--display);font-weight:900;line-height:.82;letter-spacing:-.06em;margin-bottom:26px}
.feed-big #viewsBig{display:inline-block;font-size:clamp(110px,19vw,300px);background:linear-gradient(180deg,#fff 40%,#8d8d93 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em}
.feed-sub{display:block;font-size:clamp(28px,4vw,60px);letter-spacing:-.035em;margin-top:.1em}
.feed .lede{max-width:460px}
.feed-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
@media (max-width:760px){
  .fw-inner{transform:rotateX(20deg) rotateZ(-10deg)}
  .feed-shade{background:linear-gradient(0deg,#050506 10%,#050506e6 48%,#05050660 78%,#050506aa 100%)}
  .feed{align-items:flex-end;min-height:900px}
}

.fw-col{align-self:flex-start;height:max-content}
.fw-card{flex:none}
.m-only{display:none}
@media (max-width:700px){.d-only{display:none}.m-only{display:inline}}

/* monochrome role tags */
.tag.produced{background:#fff;border-color:#fff;color:#09090a}
.tag.partner{background:#09090a;border-color:#09090a;color:#fff}
.tag.coverage{background:#09090acc;border-color:#ffffff99;color:#fff}
.tag.collab{background:#fff;border-color:#09090a;color:#09090a;border-style:dashed}
.tag.upcoming{background:#09090a;border-color:#fff;color:#fff}
.modal .tag.produced{border-color:#09090a}
.modal .tag.coverage{background:#e6e3dc;color:#09090a;border-color:#09090a}

/* ---- sound toggle ---- */
.snd{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 14px;border:1.5px solid var(--line);border-radius:99px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#c9c9cd;transition:color .3s,border-color .3s,background .3s}
.snd:hover{color:#fff;border-color:#fff}
.snd.on{background:#fff;color:#09090a;border-color:#fff}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.eq i{width:2.5px;height:3px;background:currentColor;border-radius:1px;transform-origin:bottom}
.snd.on .eq i{height:14px;animation:eq .9s ease-in-out infinite}
.snd.on .eq i:nth-child(2){animation-delay:-.35s}.snd.on .eq i:nth-child(3){animation-delay:-.6s}.snd.on .eq i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
@media (max-width:960px){.snd{width:44px;padding:0;justify-content:center}.snd-t{display:none}}

/* ---- now playing line (official YouTube player, video hidden) ---- */
.np{position:fixed;right:16px;bottom:16px;z-index:95;display:flex;align-items:center;gap:12px;height:52px;padding:0 6px 0 18px;background:rgba(9,9,10,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:99px;color:#fff;overflow:hidden;
  transform:translateY(160%);opacity:0;pointer-events:none;transition:transform .6s var(--ease),opacity .4s}
.np.show{transform:none;opacity:1;pointer-events:auto}
.np-v{position:absolute;left:0;top:0;width:200px;height:113px;opacity:0;pointer-events:none;z-index:-1}
.np-v iframe{width:100%;height:100%;display:block;border:0}
.np .eq i{height:14px;animation:eq .9s ease-in-out infinite}
.np .eq i:nth-child(2){animation-delay:-.35s}.np .eq i:nth-child(3){animation-delay:-.6s}.np .eq i:nth-child(4){animation-delay:-.15s}
.np-m{display:flex;align-items:baseline;gap:10px;min-width:0;white-space:nowrap}
.np-m b{font-family:var(--display);font-weight:900;font-size:15px;letter-spacing:-.01em}
.np-m a{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#cfcfd3;text-decoration:none}
.np-m a:hover{color:#fff}
.np-x{width:40px;height:40px;border-radius:50%;font-size:20px;line-height:1;flex:none;display:flex;align-items:center;justify-content:center;transition:background .3s,color .3s}
.np-x:hover{background:#fff;color:#09090a}
@media (max-width:600px){.np{right:10px;bottom:10px;max-width:calc(100vw - 20px)}.np-m{gap:8px}.np-m b{font-size:14px;overflow:hidden;text-overflow:ellipsis}}
body.menu-open .np,body.locked .np{opacity:0;pointer-events:none}

/* ---- mobile flow pass (2026-10-08) ---- */
/* sound button reads as an equaliser even when off */
.eq i:nth-child(1){height:5px}.eq i:nth-child(2){height:11px}.eq i:nth-child(3){height:7px}.eq i:nth-child(4){height:13px}
.snd:not(.on) .eq{opacity:.75}
@media (max-width:700px){
  /* headings that were clipping at the right edge */
  .bb-title .b{font-size:15vw}
  .cta h2{font-size:12.2vw}
  /* decorative shapes stay behind the copy instead of on top of it */
  .sq-shapes{opacity:.26}
  /* tabs: one swipeable row instead of wrapping */
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:none;font-size:25px;margin-right:8px;min-height:48px}
  /* nothing under 11px */
  .tag,.tix-no,.tix-when,.spec dt,.modal-facts dt,.cnt span,.bento figcaption,.bq cite,.svc .n,.stat span,.rows .n small,.pz-top,.pz-foot,.modal-credit,.eyebrow{font-size:11px}
  /* comfortable tap targets (44px+) */
  .filters button{min-height:44px;padding:0 16px}
  .rows li{min-height:56px;align-items:center}
  .rows a{display:flex;align-items:center;min-height:44px}
  .foot-top li a{display:inline-flex;align-items:center;min-height:44px;line-height:1.2}
  .menu-foot a{display:inline-flex;align-items:center;min-height:44px}
  .foot-bot button{min-height:44px}
  .np-m a{padding:10px 0}
  .brand{min-height:44px}
  /* footer: tidy two-column block under the hashtag */
  .foot-top{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px;margin-bottom:36px}
  .foot-hash{grid-column:1/-1}
  .foot-bot{flex-direction:column;gap:6px}
}
@media (max-width:600px){.np-m{overflow:hidden;flex:1}.np-m a{overflow:hidden;text-overflow:ellipsis;min-width:0}.np-m b{flex:none}}
.snd.loading{color:#fff;border-color:#ffffff88}.snd.loading .eq i{height:14px;animation:eq .5s ease-in-out infinite;opacity:.6}.snd[data-state="failed"]{color:#fff;border-color:#fff}