/* ═══════════════════════════════════════════════════════════════════
   GLAMMBOX — SHORTS, SITE-WIDE (2026-09-29 revamp)
   The 9:16 card + the in-page player used to live only in radio.css.
   Since Pat's 2026-09-28 23:10 order ("I saw all the new Shorts; we need
   to introduce them to the website") the same card runs on three pages:
   the Shorts wall (shorts.html), Claudine's rail (radio.html#claudine)
   and the rolling row on the landing page. One card, one player
   (assets/design/shorts.js), one stylesheet.
   ─────────────────────────────────────────────────────────────────── */

/* ── the card + the player (moved verbatim from pages/radio.css) ── */
.short-card .short-open{
  display:block;text-decoration:none;color:inherit;
  border-radius:var(--r-md);outline-offset:3px;
}
.short-frame{
  display:block;position:relative;aspect-ratio:9/16;width:100%;
  border-radius:var(--r-md);overflow:hidden;background:#101218;
  border:1px solid var(--gb-line);
  transition:border-color var(--d-sm) var(--e-out),transform var(--d-sm) var(--e-out);
}
.short-frame > img,
.short-frame > video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;margin:0;
  border-radius:inherit;
}
.short-frame > video{opacity:0;transition:opacity .28s var(--e-out)}
.short-card[data-short-state="playing"] .short-frame > video{opacity:1}
.short-scrim{
  position:absolute;inset:auto 0 0 0;height:42%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(5,6,9,.72));
}
.short-glyph{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:2.6rem;height:2.6rem;border-radius:50%;
  display:grid;place-items:center;color:var(--gb-bone);
  background:rgba(8,10,16,.52);border:1px solid rgba(239,235,227,.34);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background var(--d-sm) var(--e-out),transform var(--d-sm) var(--e-out);
}
.short-glyph svg{width:1.15rem;height:1.15rem}
.short-stamp{
  position:absolute;right:.45rem;bottom:.45rem;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.08em;
  color:var(--gb-bone);background:rgba(6,8,12,.66);
  padding:.14rem .38rem;border-radius:var(--r-sm);
}
.short-open:hover .short-frame,
.short-open:focus-visible .short-frame{border-color:var(--gb-ember);transform:translateY(-3px)}
.short-open:hover .short-glyph{background:rgba(232,95,44,.82);transform:translate(-50%,-50%) scale(1.06)}
.short-card figcaption{
  display:block;padding:.55rem .1rem 0;
}
.short-card figcaption strong{
  display:block;font-family:var(--f-display);font-weight:580;
  font-size:.84rem;line-height:1.2;color:var(--gb-bone);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.short-card figcaption em{
  display:block;font-style:normal;font-family:var(--f-mono);
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gb-mute);margin-top:.22rem;
}
@media (prefers-reduced-motion:reduce){
  .short-frame > video{display:none}
  .short-open:hover .short-frame{transform:none}
}

/* THE PLAYER — a 9:16 stage, sound on, because the tap asked for it */
.short-lb{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  margin:0;padding:0;border:0;background:transparent;overflow:hidden;
  opacity:0;transition:opacity .2s var(--e-out);
  z-index:calc(var(--z-chrome) + 40);
}
.short-lb[data-open="true"]{opacity:1}
.short-lb::backdrop{background:rgba(3,4,7,.88)}
.short-lb-veil{position:absolute;inset:0;background:rgba(3,4,7,.9)}
.short-lb-stage{
  position:relative;height:100%;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.75rem;padding:max(1rem,env(safe-area-inset-top)) 1rem 1.2rem;
}
.short-lb-frame{
  position:relative;aspect-ratio:9/16;
  height:min(84vh,calc((100vw - 2rem) * 16 / 9));
  width:auto;max-width:calc(100vw - 2rem);
  border-radius:var(--r-md);overflow:hidden;background:#000;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.short-lb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.short-lb-title{
  margin:0;max-width:min(38rem,90vw);text-align:center;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gb-bone-soft);
}
.short-lb-close{
  position:absolute;top:max(.7rem,env(safe-area-inset-top));right:.7rem;z-index:3;
  width:44px;height:44px;min-width:44px;min-height:44px;padding:0;
  display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(239,235,227,.3);border-radius:50%;
  background:rgba(8,10,16,.72);color:var(--gb-bone);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.short-lb-close svg{width:1.1rem;height:1.1rem}
.short-lb-close:hover,.short-lb-close:focus-visible{border-color:var(--gb-bone);background:rgba(8,10,16,.95)}
html.short-lb-open{overflow:hidden!important}
html.short-lb-open body{padding-right:var(--gb-sbw,0px)}

.short-card{margin:0}

/* ═══ THE WALL HERO — five columns of her Shorts, rolling ═══════════ */
.sw-hero{
  position:relative;min-height:100svh;overflow:hidden;isolation:isolate;
  display:grid;align-items:end;background:var(--gb-black);
}
.sw-cols{
  position:absolute;inset:-8vh -2vw;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(.5rem,1vw,1rem);
  z-index:0;transform:rotate(-4deg) scale(1.08);transform-origin:50% 40%;
}
.sw-col{position:relative;overflow:hidden;height:100%}
.sw-col-track{
  display:flex;flex-direction:column;gap:clamp(.5rem,1vw,1rem);
  animation:swRoll var(--sw-speed,64s) linear infinite;
  will-change:transform;
}
.sw-col[data-col="1"] .sw-col-track,
.sw-col[data-col="3"] .sw-col-track{animation-direction:reverse;--sw-speed:78s}
.sw-col[data-col="2"] .sw-col-track{--sw-speed:56s}
.sw-col[data-col="4"] .sw-col-track{--sw-speed:70s}
@keyframes swRoll{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
.sw-col-card figcaption{display:none}
.sw-col-card .short-glyph,.sw-col-card .short-stamp{display:none}
.sw-col-card .short-frame{border-color:rgba(239,235,227,.06)}
.sw-hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 70% at 20% 100%,rgba(7,8,10,.94) 0%,rgba(7,8,10,.62) 42%,rgba(7,8,10,0) 72%),
    linear-gradient(180deg,rgba(7,8,10,.55) 0%,rgba(7,8,10,0) 22%,rgba(7,8,10,0) 60%,rgba(7,8,10,.9) 100%);
}
.sw-hero-copy{
  position:relative;z-index:2;width:var(--shell);margin-inline:auto;
  padding:0 0 clamp(2.5rem,8vh,5.5rem);max-width:56rem;margin-left:max(4vw,calc((100vw - var(--shell)) / 2));
}
.sw-hero-copy h1{
  font-family:var(--f-display);font-weight:640;letter-spacing:var(--tr-mega,-.045em);
  font-size:clamp(3.2rem,9.5vw,8.6rem);line-height:.9;margin:.4rem 0 1rem;color:var(--gb-bone);
  text-shadow:0 4px 40px rgba(0,0,0,.55);
}
.sw-hero-copy h1 em{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--gb-ember-lift)}
.sw-hero-copy .gb-lede{max-width:34rem;color:var(--gb-bone-soft);text-shadow:0 2px 18px rgba(0,0,0,.6)}
.sw-hero-copy .plays{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.4rem}
.sw-count{
  display:inline-flex;align-items:baseline;gap:.5rem;margin-top:1.2rem;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gb-dim);
}
.sw-count b{font-family:var(--f-display);font-size:1.6rem;letter-spacing:-.02em;color:var(--gb-bone)}

/* ═══ CHIPS + THE GRID ═════════════════════════════════════════════ */
.sw-wall{padding:clamp(2.5rem,6vw,5rem) 0 clamp(3rem,7vw,6rem)}
.sw-wall-head{width:var(--shell);margin:0 auto 1.25rem;display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem}
.sw-wall-head h2{margin:0;font-family:var(--f-display);font-weight:620;letter-spacing:-.03em;font-size:clamp(1.8rem,4vw,3rem);line-height:1}
.sw-chips{
  width:var(--shell);margin:0 auto 1.6rem;display:flex;gap:.5rem;
  overflow-x:auto;scrollbar-width:none;padding:.2rem .1rem .5rem;
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);
}
.sw-chips::-webkit-scrollbar{display:none}
.sw-chip{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  padding:.55rem 1rem;border-radius:var(--r-pill);cursor:pointer;
  border:1px solid var(--gb-line-strong);background:rgba(239,235,227,.03);color:var(--gb-bone-soft);
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  transition:background var(--d-sm) var(--e-out),border-color var(--d-sm) var(--e-out),color var(--d-sm) var(--e-out);
}
.sw-chip i{font-style:normal;color:var(--gb-mute);font-size:.62rem}
.sw-chip:hover,.sw-chip:focus-visible{border-color:var(--gb-bone);color:var(--gb-bone)}
.sw-chip.is-on{background:var(--gb-bone);border-color:var(--gb-bone);color:var(--gb-black)}
.sw-chip.is-on i{color:rgba(7,8,10,.6)}
.sw-grid{
  width:var(--shell);margin:0 auto;display:grid;gap:clamp(.75rem,1.4vw,1.25rem);
  grid-template-columns:repeat(auto-fill,minmax(clamp(9.5rem,17vw,15rem),1fr));
}
.sw-grid .short-card{transition:opacity .35s var(--e-out),transform .35s var(--e-out)}
.sw-grid .short-card[hidden]{display:none}
.sw-grid .short-card.is-entering{animation:swIn .5s var(--e-out) both}
@keyframes swIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.sw-grid .short-card figcaption strong{font-size:.86rem}

/* the channel door under the wall */
.sw-door{width:var(--shell);margin:clamp(2rem,5vw,3.5rem) auto 0;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}

/* ═══ THE ROLLING ROW (landing page, under the genre plates) ═══════ */
.sw-marquee{position:relative;overflow:hidden;padding:.25rem 0 .5rem}
.sw-marquee-track{
  display:flex;gap:clamp(.6rem,1vw,1rem);width:max-content;
  animation:swMarquee var(--mq-speed,90s) linear infinite reverse;will-change:transform;
}
.sw-marquee:hover .sw-marquee-track,
.sw-marquee:focus-within .sw-marquee-track{animation-play-state:paused}
@keyframes swMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.sw-mq-card{flex:0 0 clamp(8.5rem,13vw,12rem);width:clamp(8.5rem,13vw,12rem)}
.sw-mq-card figcaption strong{font-size:.76rem}
.sw-mq-card figcaption em{font-size:.55rem}
/* touch: a native swipe rail that drifts on its own (shorts.js) — never a
   transform track a thumb cannot hold */
@media (hover:none),(pointer:coarse){
  .sw-marquee{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .sw-marquee::-webkit-scrollbar{display:none}
  .sw-marquee-track{animation:none}
  .sw-mq-card{scroll-snap-align:start}
  .sw-marquee .short-card[aria-hidden="true"]{display:none}
}

/* ═══ CLAUDINE'S RAIL (radio.html#claudine) ═══════════════════════ */
.cl-rail-wrap{position:relative}
.cl-rail{
  display:flex;gap:clamp(.75rem,1.2vw,1.1rem);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.25rem max(4vw,calc((100vw - var(--shell)) / 2)) 1rem;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
}
.cl-rail::-webkit-scrollbar{display:none}
.cl-rail > .short-card{flex:0 0 clamp(10.5rem,19vw,16.5rem);width:clamp(10.5rem,19vw,16.5rem);scroll-snap-align:start}
.cl-rail-nav{display:flex;gap:.5rem}
.cl-rail-nav button{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--gb-line-strong);background:rgba(239,235,227,.03);color:var(--gb-bone);
}
.cl-rail-nav button:hover,.cl-rail-nav button:focus-visible{border-color:var(--gb-ember);color:var(--gb-ember-lift)}
.cl-rail-nav svg{width:1rem;height:1rem}
.cl-rail-progress{width:var(--shell);margin:.2rem auto 0;height:2px;background:var(--gb-line);border-radius:2px;overflow:hidden}
.cl-rail-progress i{display:block;height:100%;width:var(--cl-p,18%);background:var(--gb-ember);transform-origin:left;transition:width .2s linear}

@media (max-width:768px){
  .sw-cols{grid-template-columns:repeat(3,minmax(0,1fr));inset:-6vh -18vw;transform:rotate(-5deg) scale(1.1)}
  .sw-col[data-col="3"],.sw-col[data-col="4"]{display:none}
  .sw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cl-rail > .short-card{flex-basis:44vw;width:44vw}
}
@media (prefers-reduced-motion:reduce){
  .sw-col-track,.sw-marquee-track{animation:none}
  .sw-grid .short-card.is-entering{animation:none}
}

/* ══ SCRUBBED HERO (revamp.js writes --sw-p, 0 -> 1 as the hero leaves):
   the tilted columns straighten and pull back, the copy lifts. ═══════ */
.rv-live .sw-hero .sw-cols{
  transform:rotate(calc(-4deg + var(--sw-p, 0) * 4deg)) scale(calc(1.08 - var(--sw-p, 0) * .18));
}
@media (max-width:768px){
  .rv-live .sw-hero .sw-cols{transform:rotate(calc(-5deg + var(--sw-p, 0) * 5deg)) scale(calc(1.1 - var(--sw-p, 0) * .18))}
}

/* ══ ROUND 2 (cold review r1) ══════════════════════════════════════ */
/* the title reads first: the wall behind it steps back */
.sw-cols{filter:brightness(.58) saturate(.92)}
.sw-hero::before{
  background:
    radial-gradient(90% 75% at 18% 88%,rgba(7,8,10,.96) 0%,rgba(7,8,10,.78) 38%,rgba(7,8,10,.2) 70%,rgba(7,8,10,0) 84%),
    linear-gradient(180deg,rgba(7,8,10,.6) 0%,rgba(7,8,10,0) 24%,rgba(7,8,10,0) 55%,rgba(7,8,10,.94) 100%);
}
@media (max-width:768px){
  .sw-hero::before{
    background:linear-gradient(180deg,rgba(7,8,10,.55) 0%,rgba(7,8,10,.15) 24%,rgba(7,8,10,.72) 50%,rgba(7,8,10,.97) 78%);
  }
}
/* a playing card needs no play glyph; the glyph shows on the poster only */
.sw-card .short-glyph{transition:opacity .25s var(--e-out),background var(--d-sm) var(--e-out),transform var(--d-sm) var(--e-out)}
.sw-card[data-short-state="playing"] .short-glyph{opacity:0}
.sw-card[data-short-state="playing"] .short-open:hover .short-glyph,
.sw-card[data-short-state="playing"] .short-open:focus-visible .short-glyph{opacity:1}
/* on a wide screen every chip is on screen at once */
@media (min-width:900px){
  .sw-chips{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none}
}
/* round 3: every chip on one line at 1440 */
@media (min-width:900px){
  .sw-chips{gap:.35rem}
  .sw-chip{padding:.5rem .72rem;font-size:.62rem;letter-spacing:.12em;gap:.35rem}
}

/* ══ ROUND 3 (cold review r3, phone) ══════════════════════════════ */
/* minmax(0,1fr): without it the implicit column floors at the split
   headline's min-content and the hero copy runs 40 px past a 390 screen */
.sw-hero{grid-template-columns:minmax(0,1fr)}
.sw-hero-copy{max-width:min(56rem,calc(100% - var(--gutter) * 2))}
.sw-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:10%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,8,10,0),var(--gb-black));
}
.short-card figcaption em{color:var(--gb-dim)}
@media (max-width:768px){
  .sw-hero-copy h1{font-size:clamp(2.6rem,12vw,3.4rem)}
  .sw-hero-copy .plays .play{flex:1 1 auto;justify-content:center}
}
/* the rolling row on the landing page gets its own quiet label */
.sw-mq-label{
  width:var(--shell);margin:clamp(1.4rem,3vw,2rem) auto .6rem;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gb-bone-soft);
}

/* ══ ROUND 5 (final cold reviews r8) ═══════════════════════════════ */
.short-card figcaption em{font-size:.66rem;color:var(--gb-bone-soft)}
.short-card figcaption strong{font-size:.9rem}
.sw-chip i{font-size:.66rem;color:var(--gb-dim)}
.sw-mq-label{color:var(--gb-bone);font-size:.74rem}
.sw-wall{padding-top:clamp(1.5rem,4vw,3rem)}
.sw-count{font-size:.8rem;color:var(--gb-bone-soft)}
@media (max-width:768px){ .sw-cols{filter:brightness(.72) saturate(.95)} }

/* ══ ROUND 6 (cold reviews r9) ═════════════════════════════════════ */
@media (min-width:769px){
  .sw-hero::before{
    background:
      linear-gradient(90deg,rgba(7,8,10,.93) 0%,rgba(7,8,10,.8) 30%,rgba(7,8,10,.35) 55%,rgba(7,8,10,0) 75%),
      linear-gradient(180deg,rgba(7,8,10,.6) 0%,rgba(7,8,10,0) 24%,rgba(7,8,10,0) 60%,rgba(7,8,10,.9) 100%);
  }
  .sw-hero-copy{padding-bottom:clamp(3.5rem,11vh,7rem)}
}
.sw-hero-copy .gb-lede{text-shadow:0 2px 16px rgba(0,0,0,.9)}

/* ══ ROUND 8 (cold reviews r11) ════════════════════════════════════ */
.sw-count{margin:.2rem 0 .4rem}
@media (max-width:768px){ .sw-cols{filter:brightness(.86) saturate(1)} }