/* Homepage extras: latest news, film frames marquee, on-set bento,
   festival diaries, sound lab and the Drive video feed. */

.hx-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.hx-head .lead{max-width:520px}
.hx-sec{padding:clamp(48px,5.5vw,84px) 0}

/* ---------- latest: a moving strip of news cards (same engine as Frames) ---------- */
#latest{overflow:hidden}
.mq.news{margin-top:clamp(28px,3vw,40px)}
.mq.news .mq-set{gap:16px;padding-right:16px}
.mq.news .mq-set a{height:clamp(340px,30vw,440px);aspect-ratio:4/5;border-radius:18px;border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.mq.news .mq-set img{filter:saturate(.9) brightness(.85)}
.mq.news .mq-set a.lt img{filter:saturate(.8) brightness(.55)}
.mq.news .mq-set a::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,6,9,0) 38%,rgba(6,6,9,.6) 66%,rgba(6,6,9,.95) 100%)}
.mq.news .nx{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:22px 22px 24px;display:flex;flex-direction:column;gap:6px;color:#f0ece4}
.mq.news .tg{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:rgba(240,236,228,.7)}
.mq.news b{font-family:var(--disp);font-weight:400;font-size:clamp(24px,2.2vw,32px);line-height:.95;text-transform:uppercase}
.mq.news em{font-style:normal;font-size:13px;line-height:1.45;color:rgba(240,236,228,.68)}
.mq.news .aw{align-self:flex-start;margin:0 0 4px;font-style:normal;font-size:9px;letter-spacing:.22em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:#f0ece4;color:#08080a}
@media (max-width:640px){
  .mq.news .mq-set{gap:12px;padding-right:12px}
  .mq.news .mq-set a{height:300px;border-radius:14px}
  .mq.news .nx{padding:16px 16px 18px}
}

/* ---------- frames marquee ---------- */
#frames{padding:clamp(48px,5.5vw,84px) 0;overflow:hidden}
.mq{position:relative;margin-top:clamp(28px,3vw,40px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq + .mq{margin-top:14px}
.mq-track{display:flex;width:max-content;animation:hx-mq var(--dur,90s) linear infinite}
.mq.rev .mq-track{animation-direction:reverse}
.mq:hover .mq-track{animation-play-state:paused}
.mq-set{display:flex;gap:14px;padding-right:14px}
.mq-set a{position:relative;flex:none;display:block;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#0d0d12}
.mq.land .mq-set a{height:clamp(150px,17vw,250px);aspect-ratio:16/9}
.mq.tall .mq-set a{height:clamp(220px,24vw,360px);aspect-ratio:3/4}
.mq-set img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.92);transition:filter .5s,transform 1s cubic-bezier(.16,1,.3,1)}
.mq-set a:hover img{filter:none;transform:scale(1.05)}
.mq-set figcaption{position:absolute;left:12px;bottom:10px;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(240,236,228,.85);text-shadow:0 1px 8px rgba(0,0,0,.8)}
@keyframes hx-mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}.mq{overflow-x:auto}}

/* ---------- on set bento ---------- */
.hx-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,15vw,230px);gap:14px;
  max-width:1400px;margin:0 auto;padding:clamp(22px,2.4vw,30px) clamp(20px,4vw,56px) 0}
.hx-bento .t{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#0d0d12}
.hx-bento .t video,.hx-bento .t img{width:100%;height:100%;object-fit:cover}
.hx-bento .big{grid-column:span 2;grid-row:span 2}
.hx-bento .tall{grid-row:span 2}
.hx-bento .cap{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;background:linear-gradient(transparent,rgba(5,5,8,.88));color:#e6e0d4;pointer-events:none}
@media(max-width:900px){.hx-bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(150px,40vw,260px)}}

/* ---------- festival diaries ---------- */
.hx-diary{columns:4 240px;column-gap:14px;margin-top:clamp(28px,3vw,40px)}
.hx-diary > *{break-inside:avoid;margin:0 0 14px;display:block;position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#0d0d12}
.hx-diary img,.hx-diary video{width:100%;height:auto;display:block}
.hx-diary video{aspect-ratio:1/1;object-fit:cover}
.hx-diary a img{transition:transform 1s cubic-bezier(.16,1,.3,1)}
.hx-diary a:hover img{transform:scale(1.04)}
.hx-diary figcaption{position:absolute;left:0;right:0;bottom:0;padding:32px 14px 12px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#e6e0d4;background:linear-gradient(transparent,rgba(5,5,8,.85));pointer-events:none}

/* ---------- sound lab ---------- */
.hx-sound{display:grid;grid-template-columns:1fr 1fr 2fr;gap:14px;margin-top:clamp(28px,3vw,40px);align-items:start}
.hx-sound .v{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#000;aspect-ratio:9/16}
.hx-sound .v.wide{aspect-ratio:16/9}
.hx-sound video{width:100%;height:100%;object-fit:cover}
.hx-sound .side{display:flex;flex-direction:column;gap:14px}
.hx-sound .note{border:1px solid var(--line);border-radius:16px;padding:clamp(20px,2.4vw,30px);background:linear-gradient(160deg,#0f0f16,#09090c)}
.hx-sound .note b{display:block;font-family:var(--disp);font-weight:400;font-size:clamp(24px,2.4vw,34px);line-height:1;text-transform:uppercase;margin-bottom:10px}
.hx-sound .note p{color:#a9a397;font-size:14px;line-height:1.6;margin:0 0 18px}
.hx-snd{position:absolute;right:12px;bottom:12px;z-index:2;padding:9px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.35);
  background:rgba(6,6,10,.7);backdrop-filter:blur(8px);color:#fff;font-size:10px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer}
.hx-snd:hover,.hx-snd[aria-pressed="true"]{background:#fff;color:#06060a}
.hx-sound .lbl{position:absolute;left:14px;top:12px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#e6e0d4;text-shadow:0 1px 8px #000}
@media(max-width:900px){.hx-sound{grid-template-columns:1fr 1fr}.hx-sound .side{grid-column:1/-1}}

/* ---------- drive feed ---------- */
.hx-drive{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px;margin-top:clamp(28px,3vw,40px)}
.hx-drive button{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--line);cursor:pointer;padding:0;
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.12),#09090c 60%);color:#f0ece4;text-align:left}
.hx-drive button img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.hx-drive button:hover img{transform:scale(1.05)}
.hx-drive button::after{content:"▶";position:absolute;top:50%;left:50%;width:56px;height:56px;margin:-28px 0 0 -28px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(6,6,10,.55);border:1px solid rgba(255,255,255,.45);backdrop-filter:blur(6px);font-size:17px;padding-left:4px}
.hx-drive button span{position:absolute;left:0;right:0;bottom:0;padding:36px 14px 12px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;background:linear-gradient(transparent,rgba(5,5,8,.9))}
#hx-player{position:fixed;inset:0;z-index:2147483450;display:none;align-items:center;justify-content:center;background:rgba(5,5,8,.94);backdrop-filter:blur(10px)}
#hx-player.open{display:flex}
#hx-player .box{width:min(92vw,calc(84vh * 16 / 9));aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;box-shadow:0 30px 90px rgba(0,0,0,.7)}
#hx-player iframe{width:100%;height:100%;border:0;display:block;background:#000}
#hx-player [hidden]{display:none!important}
#hx-player .note{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-size:12px;letter-spacing:.12em;color:#a9a397}
#hx-player .note a{color:#fff;text-decoration:underline}
#hx-player .x{position:absolute;top:10px;right:14px;background:none;border:0;color:#f0ece4;font-size:34px;cursor:pointer;padding:10px 16px;opacity:.75}
#hx-player .x:hover{opacity:1}

/* ---------- ARY+ strip in the streaming panel ---------- */
.hx-ary{position:relative;display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin:-8px 0 28px}
.hx-ary img{width:54px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.hx-ary span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#c9c3b8}
.hx-ary b{color:#fff;font-weight:600}

/* ---------- phones: denser layouts so the page isn't an endless column ---------- */
@media (max-width:640px){
  .hx-diary{columns:2;column-gap:10px}
  .hx-diary > *{margin-bottom:10px;border-radius:12px}
  .hx-diary figcaption{padding:26px 10px 9px;font-size:8.5px;letter-spacing:.16em}
  .hx-drive{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hx-drive button span{padding:28px 10px 9px;font-size:9px;letter-spacing:.16em}
  .hx-drive button::after{width:42px;height:42px;margin:-21px 0 0 -21px;font-size:13px}
  .hx-sound{gap:10px}
  .hx-sound .lbl{font-size:8.5px;letter-spacing:.18em;left:10px;right:10px;top:10px}
  .hx-snd{right:8px;bottom:8px;padding:7px 11px;font-size:9px}
  /* BTS reels: one swipeable row instead of a 2-up grid with an orphan tile */
  #reels .rail{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:44vw;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:6px}
  #reels .rail::-webkit-scrollbar{display:none}
  #reels .reel{scroll-snap-align:start}
  .hx-bento{gap:10px}
}

/* ---------- upcoming event: Janjaal @ World Culture Festival Karachi 2026 ---------- */
.ev-pill{display:inline-flex;align-items:center;gap:10px;max-width:100%;margin-bottom:18px;padding:8px 16px 8px 12px;border-radius:999px;
  background:rgba(120,14,14,.55);border:1px solid rgba(214,178,94,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#f0ece4;transition:background .3s,transform .3s}
#hero .ev-pill{display:flex;width:fit-content;margin:0 auto 18px}
.ev-pill:hover{background:rgba(150,20,20,.75);transform:translateY(-2px)}
.ev-pill i{flex:none;width:8px;height:8px;border-radius:50%;background:#d6b25e;box-shadow:0 0 0 0 rgba(214,178,94,.7);animation:evPulse 1.8s infinite}
.ev-pill b{color:#d6b25e;font-weight:700;white-space:nowrap}
.ev-pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.9}
.ev-pill em{font-style:normal;color:#d6b25e}
@keyframes evPulse{70%{box-shadow:0 0 0 9px rgba(214,178,94,0)}100%{box-shadow:0 0 0 0 rgba(214,178,94,0)}}

.ev{padding:clamp(64px,8vw,120px) 0;overflow:hidden;background:radial-gradient(120% 80% at 20% 30%,#3a0606 0%,#170303 45%,#080808 80%)}
.ev-glow{position:absolute;inset:-20% -10% auto auto;width:60vw;height:60vw;max-width:820px;max-height:820px;border-radius:50%;
  background:radial-gradient(circle,rgba(214,178,94,.14),transparent 65%);pointer-events:none}
.ev-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:center}
.ev-media{position:relative;display:flex;justify-content:center;padding-bottom:40px}
.ev-phone{position:relative;width:min(100%,360px);aspect-ratio:9/16;border-radius:28px;overflow:hidden;background:#000;
  box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 0 1px rgba(214,178,94,.35),0 0 80px rgba(160,20,20,.35)}
.ev-phone video{width:100%;height:100%;object-fit:cover}
.ev-live{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;
  background:rgba(0,0,0,.55);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#f0ece4}
.ev-live i{width:7px;height:7px;border-radius:50%;background:#e23b3b;animation:evPulse 1.8s infinite}
.ev-flyer{position:absolute;right:max(0px,calc(50% - 300px));bottom:0;width:clamp(120px,14vw,170px);transform:rotate(6deg);transition:transform .4s}
.ev-flyer:hover{transform:rotate(2deg) translateY(-6px)}
.ev-flyer a{display:block;border-radius:10px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.6);border:3px solid #f3ece0;background:#f3ece0}
.ev-flyer img{width:100%;height:auto}
.ev-flyer span{display:block;padding:6px 4px 4px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;text-align:center;color:#3a0606;font-weight:700}
.ev-info .h-lg{margin-top:14px}
.ev-info .serif-i{color:#d6b25e}
.ev-fest{margin-top:16px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#d6b25e}
.ev-info .lead{margin-top:16px;max-width:600px}
.ev-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:28px 0 0;border-radius:16px;overflow:hidden;
  background:rgba(214,178,94,.22);border:1px solid rgba(214,178,94,.22)}
.ev-facts div{background:rgba(12,4,4,.92);padding:14px 18px}
.ev-facts div.w{grid-column:span 2}
.ev-facts dt{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#d6b25e}
.ev-facts dd{margin:6px 0 0;font-size:clamp(15px,1.3vw,17px);color:#f0ece4}
.ev-count{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px;max-width:460px}
.ev-count div{text-align:center;padding:12px 4px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03)}
.ev-count b{display:block;font-family:var(--disp);font-size:clamp(30px,3.4vw,44px);line-height:1;color:#fff;font-weight:400}
.ev-count span{display:block;margin-top:4px;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut)}
.ev-count.on{display:block}
.ev-now{font-family:var(--disp);font-size:clamp(26px,3vw,38px);color:#d6b25e;letter-spacing:.04em}
.ev-note{margin-top:20px;font-size:14px;line-height:1.6;color:var(--mut)}
.ev-note b{color:#f0ece4}
.ev-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.ev .btn.solid.ev-reg{background:linear-gradient(100deg,#e3c47a,#b8892f);color:#1a0505}
.ev .btn.solid.ev-reg:hover{box-shadow:0 18px 54px rgba(214,178,94,.45)}
.ev-tags{margin-top:20px;font-size:12px;letter-spacing:.06em;color:rgba(214,178,94,.75)}
@media (max-width:900px){
  .ev-grid{grid-template-columns:1fr}
  .ev-media{order:2}
  .ev-phone{width:min(78vw,320px)}
  .ev-flyer{right:4%;width:clamp(96px,26vw,140px)}
}
@media (max-width:560px){
  .ev-pill span{display:none}
  .ev-facts{grid-template-columns:1fr}
  .ev-facts div.w{grid-column:auto}
  .ev-actions .btn{flex:1 1 100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.ev-pill i,.ev-live i{animation:none}}