/* Wide-screen composition inspired by the supplied floating-card reference. */
.flow-toggle{display:none}
@media(min-width:1000px){
  .masthead{padding-top:29px;padding-bottom:21px}
  .playground{
    display:grid;grid-template-columns:minmax(355px,.92fr) minmax(0,1.08fr);
    grid-template-rows:auto auto auto 1fr;
    column-gap:clamp(30px,4vw,64px);max-width:1600px;
    margin:0 auto;padding:0 4.2vw;height:clamp(660px,calc(100svh - 175px),820px);min-height:660px;overflow:visible;
  }
  .intro{grid-column:1;grid-row:1;align-self:end;text-align:left;padding:40px 0 0;margin-bottom:44px}
  .intro-note{justify-content:flex-start;font-size:12px;margin-bottom:25px}
  .intro h1{font-size:clamp(76px,7.1vw,113px);line-height:.94;letter-spacing:-.06em;max-width:650px}
  .intro h1 em{display:block;line-height:1.08}
  .intro-copy{font-size:12px;letter-spacing:.09em;margin-top:24px}
  .gallery{grid-column:2;grid-row:1 / 5;height:clamp(660px,calc(100svh - 175px),820px);margin:0 -22px 0 -30px;align-self:start;touch-action:pan-x;overflow:hidden}
  .deck{overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 7%,#000 92%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 7%,#000 92%,transparent)}
  .film-card{top:50%;width:80%;max-width:490px;border-radius:10px;padding:8px 8px 0;box-shadow:0 26px 42px -15px #61442c4f,0 3px 5px #6b4e3315}
  .film-card img{height:auto;aspect-ratio:16/9;border-radius:5px}
  .film-card.vertical{width:43%;max-width:242px}
  .film-card.vertical img{height:auto;aspect-ratio:9/14}
  .card-foot{height:32px;font-size:10px;padding:0 4px}
  .card-play{width:59px;height:59px}
  .orbit-one{width:74%;height:85%;transform:translate(-50%,-50%) rotate(-20deg);border-color:#886b5216}
  .orbit-two{width:76%;height:68%;transform:translate(-50%,-50%) rotate(24deg);border-color:#886b520b}
  .star-one{font-size:30px;top:29%;left:1%}
  .star-two{font-size:45px;bottom:18%;right:0}
  .gallery-console{grid-column:1;grid-row:2;width:100%;max-width:460px;margin:0;gap:16px;justify-content:flex-start}
  .selected-film{width:280px;flex:1;max-width:285px}
  #open-selected{font-size:21px;min-height:34px}
  .round-button{width:44px;height:44px}
  .drag-hint{grid-column:1;grid-row:3;justify-content:flex-start;margin:24px 0 0;font-size:10px;gap:9px}
  .drag-hint svg{transform:rotate(90deg);width:23px}
  .collection-tools{grid-column:1;grid-row:4;align-self:start;display:grid;grid-template-columns:1fr auto;gap:2px 24px;width:100%;max-width:398px;margin:18px 0 0;padding:0}
  .position-dots{grid-column:1 / -1}
  .position-dots span{width:21px;height:32px}
  .index-toggle{justify-self:start;grid-row:2;padding:0}
  .flow-toggle{grid-row:2;justify-self:end;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;font-size:11px;padding:0;color:var(--muted)}
  .flow-toggle:hover{color:var(--accent)}
  .flow-toggle>span:first-child{font-size:13px;width:13px;text-align:center;line-height:1}
  .footer{margin-top:4px}
}
@media(min-width:1000px) and (max-width:1199px){
  .playground{grid-template-columns:minmax(335px,.9fr) minmax(0,1.1fr);column-gap:30px;padding-left:4.2vw;padding-right:3vw}
  .intro h1{font-size:78px}.intro-copy{font-size:11px}.intro{margin-bottom:35px}
  .gallery{margin-left:-15px;margin-right:0;height:660px}
  .gallery-console{gap:12px}#open-selected{font-size:18px}.collection-tools{max-width:355px}.position-dots span{width:20px}
  .film-card{width:82%}.film-card.vertical{width:46%}
}