/* =====================================================================
   Filmstrip Carousel widget
   /application/css/filmstrip-carousel/filmstrip-carousel.css

   Desktop : morph-from-hero -> pinned split -> horizontal filmstrip
   Mobile  : normal flow + swipe carousel (overflow-x)
*/

.fsc-host-hidden{ display:none !important; }

.fsc{
  --fsc-paper:#ffffff;        /* opaque background for the sticky stage (page bg is white) */
  --fsc-hairline:#e2e2e2;     /* column divider, tick track, image placeholder */

  --fsc-left:34%;             /* desktop text column */
  --fsc-right:66%;            /* desktop image column */
  --fsc-top:0px;              /* sticky offset: set to your header height if it overlaps */

  --vpw:0px;                  /* set by JS: filmstrip viewport width */
  --morph:0;                  /* set by JS: 0 = hero, 1 = split */

  position:relative;
  color:inherit;              /* inherit theme text colour */
  line-height:1.6;
}
.fsc *{ box-sizing:border-box; }
.fsc img{ display:block; max-width:100%; }

.fsc__eyebrow{
  font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  font-size:.72rem; margin:0 0 .6rem; opacity:.85;
}

/* ── track / pinned stage ──────────────────────────────────────────── */
.fsc__track{ position:relative; }                         /* height set by JS on desktop */
.fsc__stage{
  position:sticky; top:var(--fsc-top); height:100vh; overflow:hidden;
  background:var(--fsc-paper);
}
.fsc__hero,.fsc__split{ position:absolute; inset:0; }     /* overlap inside the pinned stage */

/* ── HERO (initial full-width article; morphs out on scroll) ───────── */
.fsc__hero{
  display:grid; place-items:start center; padding:clamp(2.5rem,7vh,6rem) clamp(1.5rem,6vw,5rem) 0;
  opacity:calc(1 - var(--morph));
  transform:translateY(calc(var(--morph) * -6vh));
  pointer-events:none;
}
.fsc__hero-inner{ max-width:900px; width:100%; text-align:center; }
.fsc__hero-title{
  font-weight:800; letter-spacing:-.01em; line-height:1.02; text-transform:uppercase;
  font-size:clamp(2rem,5.2vw,4.4rem); margin:.2rem 0 1rem;
}
.fsc__hero-teaser{
  font-style:italic; font-size:clamp(1.05rem,1.6vw,1.4rem);
  max-width:46ch; margin:0 auto 1.6rem; opacity:.72;
}
.fsc__hero-lead{
  margin:1.4rem auto 0; max-width:1170px;
  transform:scale(calc(1 + var(--morph)*.18)) translateX(calc(var(--morph)*22vw));
}
.fsc__hero-lead img{ width:100%; min-height:44vh; object-fit:cover; border-radius:2px; }
.fsc__cue{
  margin-top:1.8rem; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  opacity:calc(.7 - var(--morph)*1.4);
}
.fsc__cue span{ display:inline-block; animation:fsc-bob 1.6s ease-in-out infinite; margin-left:.4rem; }
@keyframes fsc-bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }

/* ── SPLIT (pinned two-column: narrow text | wide filmstrip) ───────── */
.fsc__split{
  display:grid; grid-template-columns:var(--fsc-left) var(--fsc-right);
  opacity:var(--morph); pointer-events:none;
}
.fsc__stage.is-split .fsc__split{ pointer-events:auto; }
.fsc__left{
  padding:clamp(2rem,5vh,4rem) clamp(1.5rem,3vw,3rem);
  display:flex; flex-direction:column; border-right:1px solid var(--fsc-hairline);
  transform:translateX(calc((1 - var(--morph)) * -28px)); min-width:0;
}
.fsc__title{
  font-weight:800; text-transform:uppercase; letter-spacing:-.01em; line-height:1.05;
  font-size:clamp(1.4rem,2.1vw,2.1rem); margin:.3rem 0 1rem;
}
.fsc__teaser{ font-style:italic; margin:0 0 1.2rem; font-size:1.05rem; opacity:.72; }
.fsc__body{
  position:relative; overflow:hidden; flex:1 1 auto; min-height:0;
  -webkit-mask-image:linear-gradient(#000 62%,transparent 96%);   /* luminance mask, not a colour */
  mask-image:linear-gradient(#000 62%,transparent 96%);
}
.fsc__body p{ margin:0 0 1rem; }
.fsc__body::after{ content:"…"; position:absolute; left:0; bottom:0; font-size:1.3rem; opacity:.55; }
/* click-to-enlarge affordance: sits directly above the counter row */
.fsc__hint{
  flex:0 0 auto; display:flex; align-items:center; gap:.45rem;
  margin:1.2rem 0 .55rem; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  opacity:.55;
}
.fsc__hint-icon{ font-size:.95rem; line-height:1; }
.fsc__hint-text{ min-width:0; }        /* one flex item, so the gap above stays off the copy */
.fsc__hint-tap{ display:none; }              /* swapped in on touch devices below */

.fsc__meta{ flex:0 0 auto; display:flex; align-items:center; gap:1rem; margin-top:1.2rem; }
.fsc__hint + .fsc__meta{ margin-top:0; }     /* the hint already opened the gap */
/* .fsc__counter{ font-size:.8rem; letter-spacing:.08em; } */
.fsc__counter{ font-size:.8rem; letter-spacing:.08em; white-space:nowrap; flex:0 0 auto; }
.fsc__counter b{ font-size:1.05rem; }
.fsc__tot{ opacity:.5; }
/* 
.fsc__ticks{ display:flex; gap:6px; flex:1 1 auto; }
.fsc__tick{ height:2px; flex:1 1 auto; background:var(--fsc-hairline); transition:background .3s; }
.fsc__tick.is-active{ background:currentColor; }
*/

.fsc__ticks{ display:flex; gap:6px; flex:1 1 auto; min-width:0; overflow:hidden; }
.fsc__tick{ height:2px; flex:1 1 0; min-width:0; background:var(--fsc-hairline); transition:background .3s; }
.fsc__tick.is-active{ background:currentColor; }

/* 16+ slides: close the gaps so the ticks read as one continuous progress bar */
.fsc__ticks:has(> .fsc__tick:nth-child(16)){ gap:0; }

.fsc__standalone{ margin-bottom: 40px;}

/* right column = filmstrip viewport */
.fsc__right{ position:relative; overflow:hidden; display:flex; align-items:center; }
.fsc__viewport{ width:100%; height:100%; overflow:hidden; display:flex; align-items:center; }
.fsc__strip{ display:flex; width:max-content; height:100%; align-items:center; will-change:transform; }
.fsc__slide{
  flex:0 0 var(--vpw); width:var(--vpw); height:100%;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:clamp(1.5rem,4vh,3.5rem) clamp(1.5rem,3vw,3.5rem);
}
.fsc__frame{
  position:relative; width:100%; overflow:hidden; border-radius:2px; background:var(--fsc-hairline);
  /* button reset — the frame is a real <button> so enlarging is keyboard-reachable */
  display:block; margin:0; padding:0; border:0; font:inherit; color:inherit;
  -webkit-appearance:none; appearance:none; cursor:zoom-in;
}
.fsc__frame img{ width:100%; height:100%; object-fit:contain; transition:transform .45s ease; }
.fsc__frame:hover img,
.fsc__frame:focus-visible img{ transform:scale(1.02); }
.fsc__frame:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }
/* expand badge: revealed on hover, always on for touch (no hover to reveal it) */
.fsc__frame::after{
  content:"\2922"; position:absolute; right:.6rem; bottom:.6rem;
  display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; font-size:.95rem; line-height:1;
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.fsc__frame:hover::after,
.fsc__frame:focus-visible::after{ opacity:1; }
@media (hover:none){
  .fsc__hint-click{ display:none; }
  .fsc__hint-tap{ display:inline; }
  .fsc__frame{ cursor:pointer; }
  .fsc__frame::after{ opacity:.8; }
}
.fsc__caption{ margin-top:1rem; font-size:.9rem; text-align:center; max-width:46ch; opacity:.72; }

/* ── "In This Issue" slide (moved in from the host by JS) ──────────── */
.fsc__slide--issue{ }                                     /* inherits .fsc__slide sizing */
.fsc__issue-bottom{ display:none; }                       /* desktop: In This Issue rides in the strip */
.fsc__issue{ width:100%; max-width:44ch; margin:0 auto; max-height:100%; overflow:auto; }
/* neutralise the host's Foundation grid sizing on the moved node */
.fsc__issue .cell,
.fsc__issue [class*="large-"],
.fsc__issue [class*="small-"]{ flex:none; max-width:none; width:auto; margin:0; padding:0; }
.fsc__issue h3,.fsc__issue h5{ text-transform:uppercase; letter-spacing:.04em; }
.fsc__issue h5{ font-size:.85rem; opacity:.85; margin:1.4rem 0 .5rem; }
.fsc__issue ul{ list-style:none; padding:0; margin:0; }
.fsc__issue li{ line-height:1.3; margin:0 0 .7rem; }

/* ── LIGHTBOX (full-size viewer; opened by JS from a .fsc__frame) ──── */
.fsc-scroll-locked{ overflow:hidden !important; }   /* on <html> while the viewer is open */

/* JS moves this node to <body> (see the note there), so it sits OUTSIDE .fsc
   and cannot rely on the ".fsc *" reset — it restates what it needs. */
.fsc__lightbox,.fsc__lightbox *{ box-sizing:border-box; }
.fsc__lightbox{
  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem,4vw,3.5rem);
  background:rgba(10,10,10,.94); color:#fff;
  opacity:0; transition:opacity .25s ease;
}
.fsc__lightbox.is-open{ opacity:1; }
.fsc__lightbox[hidden]{ display:none; }             /* beats the display:flex above */

.fsc__lightbox-figure{
  position:relative;
  margin:0; display:flex; flex-direction:column; align-items:center; gap:1rem;
  max-width:100%; max-height:100%;
}
/* shown while the full-size render is still downloading over the strip render */
.fsc__lightbox-figure::after{
  content:""; position:absolute; left:50%; top:50%; width:1.75rem; height:1.75rem;
  margin:-.875rem 0 0 -.875rem; border-radius:50%;
  border:2px solid rgba(255,255,255,.25); border-top-color:rgba(255,255,255,.9);
  opacity:0; transition:opacity .2s ease; pointer-events:none;
}
.fsc__lightbox.is-loading .fsc__lightbox-figure::after{ opacity:1; animation:fsc-spin .8s linear infinite; }
@keyframes fsc-spin{ to{ transform:rotate(360deg); } }
.fsc__lightbox-img{
  display:block; max-width:100%; max-height:calc(100vh - 11rem);
  width:auto; height:auto; object-fit:contain; border-radius:2px;
}
.fsc__lightbox-caption{
  display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:.9rem;
  max-width:70ch; text-align:center; font-size:.9rem; line-height:1.5;
}
.fsc__lightbox-counter{ font-size:.8rem; letter-spacing:.08em; opacity:.6; }
.fsc__lightbox-counter b{ font-size:1.05rem; }
.fsc__lightbox-text{ opacity:.85; }

.fsc__lightbox-close,
.fsc__lightbox-nav{
  position:absolute; display:grid; place-items:center;
  border:0; border-radius:50%; background:rgba(255,255,255,.1); color:#fff;
  font:inherit; line-height:1; cursor:pointer; transition:background .2s ease;
}
.fsc__lightbox-close:hover,
.fsc__lightbox-nav:hover{ background:rgba(255,255,255,.24); }
.fsc__lightbox-close:focus-visible,
.fsc__lightbox-nav:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.fsc__lightbox-close[hidden],
.fsc__lightbox-nav[hidden]{ display:none; }
.fsc__lightbox-close{
  top:clamp(.75rem,2vw,1.5rem); right:clamp(.75rem,2vw,1.5rem);
  width:2.75rem; height:2.75rem; font-size:1.7rem;
}
.fsc__lightbox-nav{ top:50%; transform:translateY(-50%); width:3rem; height:3rem; font-size:2.2rem; }
.fsc__lightbox-nav--prev{ left:clamp(.5rem,2vw,1.75rem); }
.fsc__lightbox-nav--next{ right:clamp(.5rem,2vw,1.75rem); }

/* ── MOBILE : unpin everything, images become a swipe carousel ─────── */
@media (max-width:899px){
  .fsc__track{ height:auto !important; }
  .fsc__stage{ position:static; height:auto; overflow:visible; }
  .fsc__hero,.fsc__split{ position:static; inset:auto; }

  .fsc__hero{ opacity:1; transform:none; display:block; padding:clamp(1.5rem,6vw,3rem) clamp(1.5rem,6vw,3rem) .5rem; pointer-events:auto; }
  .fsc__hero-inner{ text-align:left; max-width:none; }
  .fsc__hero-teaser{ margin-left:0; }
  .fsc__hero-lead,.fsc__cue{ display:none; }             /* images live in the carousel below */

  .fsc__split{ opacity:1; display:block; pointer-events:auto; }
  .fsc__left{ display:block; border-right:none; transform:none; padding:0 clamp(1.5rem,6vw,3rem) 1.5rem; }
  .fsc__left > .fsc__eyebrow,
  .fsc__left > .fsc__title,
  .fsc__left > .fsc__da-default,
  .fsc__left > .fsc__teaser,
  .fsc__left > .fsc__meta{ display:none; }               /* already shown in the hero */
  .fsc__body{ max-height:none; -webkit-mask-image:none; mask-image:none; }
  .fsc__body::after{ display:none; }

  .fsc__right{ display:block; }
  .fsc__viewport{
    display:block; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    padding:0 clamp(1.5rem,6vw,3rem) 1.5rem;
  }
  .fsc__strip{ transform:none !important; width:max-content; gap:1rem; height:auto; align-items:stretch; }
  .fsc__slide{ flex:0 0 84vw; width:84vw; height:auto; scroll-snap-align:center; padding:0; }
  .fsc__frame{ height:auto; aspect-ratio:4/3; }
  .fsc__caption{ text-align:left; margin-top:.6rem; max-width:none; }
  .fsc__slide--issue{ display:none; }                    /* In This Issue moves out of the carousel */
  .fsc__issue-bottom{ display:block; padding:1.5rem clamp(1.5rem,6vw,3rem) 2.5rem; border-top:1px solid var(--fsc-hairline); }
  .fsc__issue{ max-width:none; max-height:none; overflow:visible; margin:0; }

  .fsc__hint{ margin:1.2rem 0 0; }                       /* sits above the swipe strip here */
  .fsc__lightbox{ padding:1rem; }
  .fsc__lightbox-img{ max-height:calc(100vh - 9rem); }
  .fsc__lightbox-nav{ width:2.5rem; height:2.5rem; font-size:1.8rem; }
}

/* ── Reduced motion : same unpinned swipe layout regardless of width ─ */
@media (prefers-reduced-motion:reduce){
  .fsc__track{ height:auto !important; }
  .fsc__stage{ position:static !important; height:auto !important; overflow:visible; }
  .fsc__hero,.fsc__split{ position:static; inset:auto; }
  .fsc__hero{ opacity:1; transform:none; display:block; padding:clamp(1.5rem,6vw,3rem); pointer-events:auto; }
  .fsc__hero-inner{ text-align:left; }
  .fsc__hero-lead,.fsc__cue{ display:none; }
  .fsc__split{ opacity:1; display:block; }
  .fsc__left{ display:block; border-right:none; transform:none; padding:0 clamp(1.5rem,6vw,3rem) 1.5rem; }
  .fsc__left > .fsc__eyebrow,
  .fsc__left > .fsc__title,
  .fsc__left > .fsc__da-default,
  .fsc__left > .fsc__teaser,
  .fsc__left > .fsc__meta{ display:none; }
  .fsc__body{ max-height:none; -webkit-mask-image:none; mask-image:none; }
  .fsc__body::after{ display:none; }
  .fsc__right{ display:block; }
  .fsc__viewport{ display:block; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; padding:0 clamp(1.5rem,6vw,3rem) 1.5rem; }
  .fsc__strip{ transform:none !important; width:max-content; gap:1rem; height:auto; align-items:stretch; }
  .fsc__slide{ flex:0 0 60vw; width:60vw; height:auto; scroll-snap-align:center; padding:0; }
  .fsc__frame{ height:auto; aspect-ratio:3/2; }
  .fsc__caption{ text-align:left; margin-top:.6rem; max-width:none; }
  .fsc__slide--issue{ display:none; }                    /* In This Issue moves out of the carousel */
  .fsc__issue-bottom{ display:block; padding:1.5rem clamp(1.5rem,6vw,3rem) 2.5rem; border-top:1px solid var(--fsc-hairline); }
  .fsc__issue{ max-width:none; max-height:none; overflow:visible; margin:0; }
}

/* ── Reduced motion : enlarge affordances stay put ─────────────────── */
@media (prefers-reduced-motion:reduce){
  .fsc__frame img,.fsc__frame::after,.fsc__lightbox{ transition:none; }
  .fsc__lightbox.is-loading .fsc__lightbox-figure::after{ animation:none; }
  .fsc__frame:hover img,.fsc__frame:focus-visible img{ transform:none; }
}