/* SoraStride Media — front end.
   Built to the "Media Gallery" design: 1104px content column (1152 incl.
   24px gutters), 64px section rhythm, Fraunces display + Inter text.
   Every rule is scoped under .ssm and resets what themes (Storefront in
   particular) apply to buttons, lists, headings and images, so the layout
   renders the same inside any theme. */

.ssm{
  --ssm-ink:#201322; --ssm-muted:#584B59; --ssm-plum:#602C5F; --ssm-plum-hover:#4A1F49;
  --ssm-gold:#C18D3B; --ssm-page:#FEF6EA; --ssm-band:#F5E7D0; --ssm-dark:#321231;
  --ssm-line:rgba(32,19,34,.12); --ssm-cream:#FEF6EA;
  --ssm-serif:"Fraunces","Iowan Old Style",Georgia,serif;
  --ssm-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ssm-max:1152px; --ssm-gut:24px; --ssm-y:64px; --ssm-r:12px; --ssm-r-sm:10px;
  font-family:var(--ssm-sans); color:var(--ssm-ink); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.ssm *, .ssm *::before, .ssm *::after{ box-sizing:border-box }
.ssm h1, .ssm h2, .ssm h3, .ssm p, .ssm ul, .ssm li, .ssm figure{ margin:0; padding:0 }
.ssm ul{ list-style:none }
.ssm img{ display:block; max-width:100%; border-radius:0; box-shadow:none }
.ssm button{ font:inherit; letter-spacing:inherit; text-transform:none; margin:0; box-shadow:none }
.ssm a{ text-decoration:none }
.ssm a:focus-visible, .ssm button:focus-visible{ outline:2px solid var(--ssm-gold); outline-offset:3px }

body:has(.ssm-bleed){ overflow-x:clip }
.ssm-bleed{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); position:relative }
.ssm-page-main{ display:block }

.ssm-wrap{ max-width:var(--ssm-max); margin:0 auto; padding:0 var(--ssm-gut) }
.ssm-sec{ padding:var(--ssm-y) 0; background:var(--ssm-page) }

/* ── type ── */
.ssm .ssm-kicker{
  font-family:var(--ssm-sans); font-size:12px; line-height:16px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ssm-gold);
}
.ssm .ssm-h1{
  font-family:var(--ssm-serif); font-weight:600; font-size:48px; line-height:1.25;
  letter-spacing:-.01em; color:var(--ssm-ink); margin-top:16px; text-wrap:balance;
}
.ssm .ssm-h2{
  font-family:var(--ssm-serif); font-weight:600; font-size:30px; line-height:1.2;
  letter-spacing:-.005em; color:var(--ssm-ink); margin-top:12px;
}
.ssm .ssm-h3{
  font-family:var(--ssm-serif); font-weight:600; font-size:24px; line-height:1.25; color:var(--ssm-ink);
}
.ssm .ssm-lede{ font-size:18px; line-height:1.625; color:var(--ssm-muted); margin-top:21px }

/* ── buttons & links ── */
.ssm .ssm-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:29px }
.ssm .ssm-btn{
  display:inline-flex; align-items:center; height:40px; padding:0 20px; border:0; border-radius:999px;
  background:var(--ssm-plum); color:var(--ssm-cream); font-family:var(--ssm-sans); font-size:14px; font-weight:500;
  line-height:1; cursor:pointer; transition:background .2s ease, transform .2s ease;
}
.ssm .ssm-btn:hover{ background:var(--ssm-plum-hover); color:var(--ssm-cream); transform:translateY(-1px) }
.ssm .ssm-link{ color:var(--ssm-plum); font-size:14px; font-weight:500; display:inline-flex; align-items:center; gap:4px; transition:color .2s }
.ssm .ssm-link:hover{ color:var(--ssm-plum-hover) }
.ssm .ssm-link:hover .ssm-arrow{ transform:translateX(3px) }
.ssm .ssm-arrow{ display:inline-block; transition:transform .2s ease }

/* ── play buttons & pills ── */
.ssm .ssm-play{
  display:grid; place-items:center; border:0; padding:0; border-radius:50%; cursor:pointer;
  background:rgba(254,246,234,.92); color:var(--ssm-ink);
  box-shadow:0 8px 24px -8px rgba(32,19,34,.45); transition:transform .25s ease, background .25s ease;
}
.ssm .ssm-play svg{ margin-left:2px }
.ssm .ssm-play--lg{ width:64px; height:64px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2 }
.ssm .ssm-play--lg:hover{ transform:translate(-50%,-50%) scale(1.07); background:#fff }
.ssm .ssm-play--sm{ width:40px; height:40px; position:absolute; left:12px; bottom:12px; z-index:2; pointer-events:none }
.ssm .ssm-pill{
  position:absolute; left:16px; bottom:16px; z-index:2; padding:4px 10px; border-radius:999px;
  background:rgba(32,19,34,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:#fff; font-size:12px; line-height:16px; font-weight:600;
}

/* ── 1 · featured film ── */
.ssm-featured__grid{ display:grid; grid-template-columns:620fr 428fr; gap:56px; align-items:center }
.ssm .ssm-film{
  position:relative; aspect-ratio:16/10; border-radius:var(--ssm-r); overflow:hidden; background:#2a1a28;
}
.ssm .ssm-film__poster{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1) }
.ssm .ssm-film:hover .ssm-film__poster{ transform:scale(1.02) }
.ssm .ssm-film iframe, .ssm .ssm-film video{ position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; z-index:3 }
.ssm .ssm-film.is-playing .ssm-pill, .ssm .ssm-film.is-playing .ssm-play{ display:none }
.ssm .ssm-featured__copy{ padding-top:4px }

/* ── 2 · gallery ── */
.ssm-gal.ssm-gal--band{ background:var(--ssm-band) }
.ssm .ssm-gal__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:32px }
.ssm .ssm-chips{ display:flex; gap:8px; flex-wrap:wrap }
.ssm .ssm-chip{
  height:32px; padding:0 16px; border-radius:999px; cursor:pointer;
  border:1px solid var(--ssm-line); background:var(--ssm-page); color:var(--ssm-ink);
  font-family:var(--ssm-sans); font-size:14px; font-weight:500; line-height:30px;
  transition:background .2s, color .2s, border-color .2s;
}
.ssm .ssm-chip:hover{ border-color:var(--ssm-plum); color:var(--ssm-plum); background:var(--ssm-page) }
.ssm .ssm-chip.is-active{ background:var(--ssm-plum); border-color:var(--ssm-plum); color:#fff }

/* cards layout (the design) */
.ssm .ssm-grid{ display:grid; grid-template-columns:repeat(var(--ssm-cols,3),minmax(0,1fr)); gap:40px 20px }
.ssm .ssm-card[hidden]{ display:none }
.ssm .ssm-card__media{
  all:unset; box-sizing:border-box; display:block; width:100%; position:relative; cursor:zoom-in;
  aspect-ratio:var(--ssm-shape,4/5); border-radius:var(--ssm-r-sm); overflow:hidden; background:#e8d8bf;
}
.ssm .is-video .ssm-card__media, .ssm .is-youtube .ssm-card__media{ cursor:pointer }
.ssm .ssm-card__media img, .ssm .ssm-card__media video{
  width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.ssm .ssm-card__media:hover img, .ssm .ssm-card__media:hover video{ transform:scale(1.04) }
.ssm .ssm-card__media:hover .ssm-play--sm{ transform:scale(1.08) }
.ssm .ssm-card__media:focus-visible{ outline:2px solid var(--ssm-gold); outline-offset:3px }
.ssm .ssm-card__body{ margin-top:14px }
.ssm .ssm-card__title{ font-family:var(--ssm-serif); font-size:18px; line-height:1.35; font-weight:500; color:var(--ssm-ink) }
.ssm .ssm-card__meta{ font-size:14px; line-height:20px; color:var(--ssm-muted); margin-top:2px }
.ssm .ssm-card__overlay{
  position:absolute; left:0; right:0; bottom:0; z-index:1; padding:48px 16px 14px; color:#fff;
  font-family:var(--ssm-serif); font-size:16px; line-height:1.35;
  background:linear-gradient(180deg,rgba(32,19,34,0),rgba(32,19,34,.72)); opacity:0; transition:opacity .25s;
}
.ssm .ssm-card__media:hover .ssm-card__overlay, .ssm .ssm-card__media:focus-visible .ssm-card__overlay{ opacity:1 }
.ssm .is-video .ssm-card__overlay, .ssm .is-youtube .ssm-card__overlay{ padding-left:64px }

/* justified layout: tiles keep their real shape, rows fill the width */
.ssm .ssm-gal--justified .ssm-grid{ display:flex; flex-wrap:wrap; gap:12px }
.ssm .ssm-gal--justified .ssm-grid::after{ content:""; flex-grow:999999 }
.ssm .ssm-gal--justified .ssm-card{ flex-grow:calc(var(--ar) * 100); flex-basis:calc(var(--ar) * 260px); min-width:0 }
.ssm .ssm-gal--justified .ssm-card__media{ aspect-ratio:var(--ar) }

/* masonry layout */
.ssm .ssm-gal--masonry .ssm-grid{ display:block; columns:var(--ssm-cols,3); column-gap:20px }
.ssm .ssm-gal--masonry .ssm-card{ break-inside:avoid; margin-bottom:28px }
.ssm .ssm-gal--masonry .ssm-card__media{ aspect-ratio:var(--ar) }

.ssm .ssm-more-wrap{ text-align:center; margin-top:48px }
.ssm .ssm-more-wrap[hidden]{ display:none }
.ssm .ssm-more{
  height:40px; padding:0 22px; border-radius:999px; border:1px solid var(--ssm-ink); background:transparent; color:var(--ssm-ink);
  font-family:var(--ssm-sans); font-size:14px; font-weight:500; cursor:pointer; transition:background .2s, color .2s;
}
.ssm .ssm-more:hover{ background:var(--ssm-ink); color:var(--ssm-cream) }

/* ── 3 · YouTube + Instagram ── */
.ssm-social__grid{ display:grid; grid-template-columns:626fr 438fr; gap:40px; align-items:start }
.ssm-social__grid.is-single{ grid-template-columns:1fr }
.ssm .ssm-rowhead{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:26px }
.ssm .ssm-link--sm{ font-size:14px; white-space:nowrap }
.ssm .ssm-yt__grid{ display:grid; grid-template-columns:repeat(var(--ssm-yt-cols,2),minmax(0,1fr)); gap:32px 20px }
.ssm .ssm-ytcard__media{
  all:unset; box-sizing:border-box; display:block; width:100%; position:relative; cursor:pointer;
  aspect-ratio:16/9; border-radius:var(--ssm-r-sm); overflow:hidden; background:#e8d8bf;
}
.ssm .ssm-ytcard__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1) }
.ssm .ssm-ytcard__media:hover img{ transform:scale(1.04) }
.ssm .ssm-ytcard__media:focus-visible{ outline:2px solid var(--ssm-gold); outline-offset:3px }
.ssm .ssm-dur{
  position:absolute; right:8px; bottom:8px; padding:2px 6px; border-radius:4px;
  background:rgba(32,19,34,.82); color:#fff; font-size:12px; line-height:16px; font-weight:600; font-variant-numeric:tabular-nums;
}
.ssm .ssm-ytcard__title{ font-family:var(--ssm-serif); font-size:16px; line-height:1.4; font-weight:600; color:var(--ssm-ink); margin-top:14px }
.ssm .ssm-ytcard__meta{ font-size:14px; line-height:20px; color:var(--ssm-muted); margin-top:2px }
.ssm .ssm-ig__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px }
.ssm .ssm-ig__tile{ display:block; aspect-ratio:1; border-radius:6px; overflow:hidden; background:#e8d8bf; position:relative }
.ssm .ssm-ig__tile img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .3s }
.ssm .ssm-ig__tile:hover img{ transform:scale(1.06); filter:brightness(.9) }

/* ── 4 · closing band ── */
.ssm-band{ background:var(--ssm-dark); padding:var(--ssm-y) 0; text-align:center }
.ssm .ssm-band__title{
  font-family:var(--ssm-serif); font-weight:600; font-size:36px; line-height:1.22; color:var(--ssm-cream);
  max-width:420px; margin:0 auto; text-wrap:balance;
}
.ssm .ssm-band__text{ font-size:14px; line-height:20px; color:rgba(254,246,234,.72); margin-top:16px }

.ssm .ssm-note{ padding:16px; border:1px dashed var(--ssm-line); font-size:14px; color:var(--ssm-muted) }

/* ── responsive ── */
@media (max-width:1024px){
  .ssm{ --ssm-y:56px }
  .ssm .ssm-h1{ font-size:40px }
  .ssm-featured__grid{ gap:40px }
  .ssm-social__grid{ grid-template-columns:1fr; gap:56px }
}
@media (max-width:860px){
  .ssm-featured__grid{ grid-template-columns:1fr; gap:32px }
  .ssm .ssm-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .ssm .ssm-gal--masonry .ssm-grid{ columns:2 }
}
@media (max-width:560px){
  .ssm{ --ssm-y:48px; --ssm-gut:20px }
  .ssm .ssm-h1{ font-size:34px }
  .ssm .ssm-h2{ font-size:26px }
  .ssm .ssm-h3{ font-size:22px }
  .ssm .ssm-lede{ font-size:17px }
  .ssm .ssm-play--lg{ width:56px; height:56px }
  .ssm .ssm-grid{ grid-template-columns:1fr; gap:32px }
  .ssm .ssm-gal--justified .ssm-card{ flex-basis:calc(var(--ar) * 140px) }
  .ssm .ssm-gal--masonry .ssm-grid{ columns:1 }
  .ssm .ssm-yt__grid{ grid-template-columns:1fr }
  .ssm .ssm-band__title{ font-size:28px }
}
@media (prefers-reduced-motion:reduce){ .ssm *, .ssm-lb *{ transition:none !important } }

/* ── viewer ── */
html.ssm-lb-open, html.ssm-lb-open body{ overflow:hidden }
.ssm-lb{
  position:fixed; inset:0; z-index:100000; background:rgba(26,10,24,.97); color:#fff;
  display:grid; grid-template-columns:88px minmax(0,1fr) 88px; grid-template-rows:auto minmax(0,1fr) auto;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
.ssm-lb[hidden]{ display:none }
.ssm-lb__top{ grid-column:1/-1; display:flex; align-items:center; gap:16px; padding:16px 20px }
.ssm-lb__count{ margin-right:auto; font-size:13px; color:#D9C5D2; font-variant-numeric:tabular-nums }
.ssm-lb__ext{ font-size:13px; font-weight:600; color:#E3A93F; text-decoration:none }
.ssm-lb__ext:hover{ text-decoration:underline }
.ssm-lb__ext[hidden]{ display:none }
.ssm-lb__btn{
  appearance:none; border:0; margin:0; padding:0; width:44px; height:44px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.08); color:#fff; display:grid; place-items:center; font-size:18px; line-height:1;
  transition:background .2s;
}
.ssm-lb__btn:hover{ background:rgba(255,255,255,.18); color:#fff }
.ssm-lb__btn:focus-visible{ outline:2px solid #E3A93F; outline-offset:2px }
.ssm-lb__btn[hidden]{ visibility:hidden }
.ssm-lb__nav{ align-self:center; justify-self:center; width:52px; height:52px; font-size:26px }
.ssm-lb__stage{ grid-row:2; grid-column:2; min-width:0; min-height:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .25s ease; touch-action:pan-y }
.ssm-lb__stage.is-in{ opacity:1 }
.ssm-lb__stage img, .ssm-lb__stage video{ max-width:100%; max-height:100%; object-fit:contain; border-radius:6px; user-select:none; -webkit-user-drag:none }
.ssm-lb__frame{ width:min(100%, calc((100vh - 190px) * 16 / 9)); aspect-ratio:16/9; border-radius:6px; overflow:hidden; background:#000 }
.ssm-lb__frame iframe{ width:100%; height:100%; border:0; display:block }
.ssm-lb__cap{ grid-column:1/-1; text-align:center; padding:16px 24px 24px; min-height:84px }
.ssm-lb__title{ margin:0; font-family:"Fraunces",Georgia,serif; font-size:20px; line-height:1.3; font-weight:500; color:#FEF6EA }
.ssm-lb__meta{ margin:4px 0 0; font-size:13px; color:#CDB9C7 }
@media (max-width:640px){
  .ssm-lb{ grid-template-columns:0 minmax(0,1fr) 0 }
  .ssm-lb__nav{ position:fixed; bottom:20px; background:rgba(255,255,255,.14) }
  .ssm-lb__prev{ left:20px } .ssm-lb__next{ right:20px }
  .ssm-lb__cap{ padding:12px 84px 24px }
}