/* =====================================================================
   The legacy reel (partials/reel.html on /legacy) and the Home teaser
   (partials/reel-teaser.html). Load with css="reel" and js="reel".
   Every rule is under .reel or .reel-teaser (unique component names), so
   nothing leaks into other pages in the single-file preview.

   Frame anatomy
     figure.reel-frame          inline custom properties set the framing:
       --pos / --pos-m          object-position, desktop / phone
       --tx --ty / -m           trim: the img box grows by this much on each side
                                (crops scan borders and film rebates)
       --kb-o / -m              transform-origin of the move (img box percent)
       --kb-from / --kb-to / -m the one Ken Burns move (translate, then scale)
       --kb-dur                 move length (default 14s)
       --plate                  portrait plate ratio for pillarboxed frames
     .reel-shot                 thin black letterbox bars (top and bottom padding)
       .reel-field              pillarbox field (portrait plates only)
         .reel-plate            the graded picture: 2.39:1 desktop, 4:5 phone
           img.reel-img         grayscale, contrast, brightness
           ::before             gold, multiply: warms the highlights
           ::after              oxblood to crimson, screen: shadows sit on oxblood
           .reel-grain          film grain and a gentle vignette
   Motion: reel.js adds .is-live to [data-reel] when it can run, .is-started
   and .is-rolling to a shot in view; the move pauses when the shot leaves.
   prefers-reduced-motion: reduce holds every frame still at its settled framing.
   ===================================================================== */

.reel,.reel-teaser{
  --reel-bar-color:#000;                     /* the letterbox bars */
  --reel-bar:clamp(6px,1.1vw,16px);
  --reel-wide:2.39;
  --reel-gap:clamp(72px,8vw,128px);
  --reel-ease:cubic-bezier(.33,0,.35,1);
  --reel-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
}

/* ---------- Section ---------- */
.reel{padding-block:var(--section);background:var(--grad-night);border-top:1px solid var(--line)}
.reel__head .eyebrow + h2{margin-top:8px}
.reel__lede{margin-top:16px;max-width:var(--measure-lede);font:400 18px/28px var(--f-body);color:var(--text-1);text-wrap:pretty}
@media (min-width:1024px){.reel__lede{font-size:20px;line-height:32px}}

/* ---------- Chapter cards (typographic, full width) ---------- */
.reel-act{margin-top:clamp(72px,9vw,144px)}
.reel-act__card{display:grid;grid-template-columns:minmax(0,1fr);row-gap:0}
.reel-act__rule{display:block;height:1px;background:var(--gold)}
.reel-act__num{margin-top:20px;font:600 13px/18px var(--f-label);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.reel-act__title{margin-top:8px;font-family:var(--f-display);font-weight:400;font-size:34px;line-height:40px;text-transform:lowercase;
  font-variant-ligatures:none;font-feature-settings:"lnum" 1,"liga" 0,"dlig" 0,"calt" 0,"swsh" 0,"salt" 0;letter-spacing:.01em;color:var(--ivory);text-wrap:balance}
html.no-meritta .reel-act__title{text-transform:none}
.reel-act__years{margin-top:4px;font-size:20px;line-height:26px;color:var(--text-3)}
.reel-act__dek{margin-top:12px;max-width:36rem;font:italic 400 19px/28px var(--f-serif);color:var(--text-1);text-wrap:pretty}
.reel-act__body{margin-top:32px}
@media (min-width:768px){
  .reel-act__card{grid-template-columns:minmax(0,1fr) auto;column-gap:32px}
  .reel-act__rule,.reel-act__num{grid-column:1 / -1}
  .reel-act__title{grid-column:1;font-size:44px;line-height:50px}
  .reel-act__years{grid-column:2;grid-row:3;align-self:end;margin:0;padding-bottom:6px;font-size:26px;line-height:32px;text-align:right}
  .reel-act__dek{grid-column:1}
  .reel-act__body{margin-top:48px}
}
@media (min-width:1024px){
  .reel-act__title{font-size:56px;line-height:60px}
  .reel-act__dek{font-size:21px;line-height:31px}
}

/* ---------- Frames ---------- */
.reel-frame{margin:0;min-width:0}
.reel-shot{position:relative;padding-block:var(--reel-bar);background:var(--reel-bar-color);container-type:inline-size}
.reel-plate{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:var(--reel-wide);background:var(--night)}
.reel-img{
  --_tx:var(--tx,0%);--_ty:var(--ty,0%);
  --_kf:var(--kb-from,none);--_kt:var(--kb-to,none);
  position:absolute;z-index:0;left:calc(-1 * var(--_tx));top:calc(-1 * var(--_ty));
  width:calc(100% + 2 * var(--_tx));height:calc(100% + 2 * var(--_ty));max-width:none;
  object-fit:cover;object-position:var(--pos,50% 50%);
  transform-origin:var(--kb-o,50% 50%);transform:var(--_kt);
  filter:grayscale(1) contrast(1.08) brightness(.92);
  backface-visibility:hidden;
}
/* The grade: a duotone in the event palette, applied on top of every photograph */
.reel-plate::before,.reel-plate::after{content:"";position:absolute;inset:0;pointer-events:none}
.reel-plate::before{z-index:1;background:linear-gradient(160deg,var(--gold) 0%,#F1B953 100%);mix-blend-mode:multiply;opacity:.42}
.reel-plate::after{z-index:2;background:linear-gradient(190deg,var(--oxblood) 35%,var(--crimson) 150%);mix-blend-mode:screen;opacity:.64}
.reel-grain{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:var(--reel-grain),radial-gradient(130% 100% at 50% 45%,rgba(18,3,6,0) 58%,rgba(18,3,6,.5) 100%)}

/* Portrait plates, pillarboxed inside the 2.39:1 frame on desktop */
.reel-field{display:flex;justify-content:center;height:calc(100cqw / var(--reel-wide));background:var(--grad-night)}
.reel-field .reel-plate{height:100%;aspect-ratio:var(--plate,.8)}
.reel-frame--plate-right .reel-field{justify-content:flex-end}

/* Tilt frames (desktop): the img keeps its own ratio and the move travels down or up it */
@media (min-width:768px){
  .reel-frame--tilt .reel-img{top:0;height:auto;object-fit:fill}
}

/* Captions: place and date in tracked caps, one plain sentence, then the credit */
.reel-cap{margin-top:16px;max-width:46rem}
.reel-cap__when{font:600 12px/18px var(--f-label);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.reel-cap__tick{display:inline-block;width:4px;height:4px;margin:0 10px 0 11px;border-radius:50%;vertical-align:middle;background:var(--gold);transform:translateY(-1px)}
.reel-cap__when time{white-space:nowrap}
.reel-cap__line{margin-top:6px;font:400 16px/25px var(--f-body);color:var(--text-1);text-wrap:pretty}
.reel-cap__line i{font-style:italic}
.reel-cap__credit{margin-top:8px;font:400 13px/20px var(--f-body);color:var(--text-3);overflow-wrap:anywhere}
.reel-cap__credit i{font-style:italic}
@media (min-width:1024px){
  .reel-cap{margin-top:20px}
  .reel-cap__when{font-size:13px}
  .reel-cap__line{font-size:17px;line-height:27px}
}

/* ---------- Desktop sequence ---------- */
.reel-track{position:relative;display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--reel-gap)}
.reel-nav{display:none}

/* ---------- Phones: each act is a swipeable row of 4:5 frames ---------- */
@media (max-width:767px){
  .reel,.reel-teaser{--reel-bar:0px}
  .reel-shot{background:none}
  .reel-plate,.reel-field .reel-plate{aspect-ratio:.8;height:auto;width:100%}
  .reel-field{display:block;height:auto;background:none}
  .reel-img{
    --_tx:var(--tx-m,var(--tx,0%));--_ty:var(--ty-m,var(--ty,0%));
    --_kf:var(--kb-from-m,var(--kb-from,none));--_kt:var(--kb-to-m,var(--kb-to,none));
    object-position:var(--pos-m,var(--pos,50% 50%));transform-origin:var(--kb-o-m,var(--kb-o,50% 50%));
  }
  .reel-act__body.wrap{padding-inline:0}
  .reel-nav:not([hidden]){display:flex;align-items:center;gap:8px;padding-inline:var(--gutter);margin-bottom:16px}
  .reel-count{margin-right:auto;font:600 13px/18px var(--f-label);letter-spacing:.14em;font-variant-numeric:lining-nums tabular-nums;color:var(--text-2)}
  .reel-count span{color:var(--ivory)}
  .reel-track{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--gutter);padding-inline:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .reel-track::-webkit-scrollbar{display:none}
  .reel-track > .reel-frame{flex:0 0 84%;scroll-snap-align:start;scroll-snap-stop:always}
  .reel-track:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
}
@media (max-width:359px){.reel-track > .reel-frame{flex-basis:88%}}

/* Flat scroller buttons: 1px border, no fill until pressed */
.reel-btn{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;background:transparent;color:var(--ivory);
  border:1px solid var(--line-strong);border-radius:var(--r-ctl);cursor:pointer;transition:background-color 120ms linear,border-color 120ms linear}
.reel-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
@media (hover:hover){.reel-btn:not([aria-disabled="true"]):hover{border-color:var(--ivory);background:var(--card)}}
.reel-btn:not([aria-disabled="true"]):active{background:var(--oxblood)}
.reel-btn[aria-disabled="true"]{color:var(--text-3);border-color:var(--line);cursor:default}
.reel-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- Closing card: the 1964 portrait on the right, title type in the open field ---------- */
.reel-close{margin-top:clamp(96px,10vw,160px)}
.reel-close__type{display:grid;align-content:center;padding:0 0 24px}
.reel-close__rule{display:block;width:48px;height:1px;background:var(--gold)}
.reel-close__title{margin-top:16px;font-family:var(--f-display);font-weight:400;font-size:40px;line-height:44px;text-transform:lowercase;
  font-variant-ligatures:none;font-feature-settings:"lnum" 1,"liga" 0,"dlig" 0,"calt" 0,"swsh" 0,"salt" 0;letter-spacing:.01em;color:var(--ivory);text-wrap:balance}
.reel-close__title em{display:block;font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:.86em;letter-spacing:0;text-transform:none}
html.no-meritta .reel-close__title{text-transform:none}
.reel-close__next{display:grid;justify-items:start;gap:4px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line);max-width:46rem}
.reel-close__line .link-arrow{font:500 20px/28px var(--f-serif);letter-spacing:0;text-wrap:balance}
.reel-close__line + .reel-close__line .link-arrow{font:600 15px/20px var(--f-label);letter-spacing:.01em}
@media (min-width:768px){
  .reel-frame--close .reel-field{position:relative;align-items:stretch}
  .reel-close__type{position:absolute;left:0;top:0;bottom:0;width:calc(100% - 100cqw / var(--reel-wide) * var(--plate,.8));padding:0 6% 0 7%}
  .reel-close__title{font-size:clamp(40px,5.2cqw,72px);line-height:1.05}
  .reel-close__line .link-arrow{font-size:24px;line-height:32px}
}

/* ---------- Home teaser ---------- */
.reel-teaser{padding-bottom:var(--section)}
.reel-teaser__grid{display:grid;gap:24px}
.reel-teaser__h{font-size:30px;line-height:36px}
.reel-teaser__line{margin-top:12px;max-width:28rem;font:400 17px/27px var(--f-body);color:var(--text-1)}
.reel-teaser__copy .link-arrow{margin-top:8px}
.reel-cap--teaser{margin-top:12px}
@media (max-width:767px){.reel-frame--teaser .reel-plate{aspect-ratio:1.25}}
.reel-cap--teaser .reel-cap__credit{margin-top:4px}
@media (min-width:1024px){
  .reel-teaser__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end}
  .reel-frame--teaser{grid-column:1 / 9}
  .reel-teaser__copy{grid-column:9 / 13;padding-bottom:calc(var(--reel-bar) + 92px);padding-left:8px}
  .reel-teaser__h{font-size:40px;line-height:44px}
}

/* ---------- Motion: one slow move per frame, only while it is on screen ---------- */
@keyframes reel-kb{from{transform:var(--_kf)}to{transform:var(--_kt)}}
@media (prefers-reduced-motion:no-preference){
  .is-live .reel-img{transform:var(--_kf)}
  .is-live .reel-shot.is-started .reel-img{animation:reel-kb var(--kb-dur,14s) var(--reel-ease) forwards;animation-play-state:paused}
  .is-live .reel-shot.is-rolling .reel-img{animation-play-state:running;will-change:transform}
}
@media (prefers-reduced-motion:reduce){
  .reel-img{animation:none!important;transform:var(--_kt)!important}
  .reel-track{scroll-behavior:auto}
}

/* ---------- Forced colors and print ---------- */
@media (forced-colors:active){
  .reel-plate::before,.reel-plate::after,.reel-grain{display:none}
  .reel-act__rule,.reel-close__rule,.reel-cap__tick{background:CanvasText}
  .reel-btn{border-color:ButtonText}
}
@media print{
  .reel,.reel-teaser{background:none}
  .reel-nav,.reel-grain{display:none!important}
  .reel-img{animation:none!important;transform:var(--_kt)!important}
  .reel-frame{break-inside:avoid}
}