/* TasteAE IG Reel — film-strip light box. Flexbox only. */
.tasteae-reel{
  --reel-paper:#F6F4EF; --reel-oat:#D8B778; --reel-light:#F4E9D4; --reel-film:#1b130c;
  --reel-frame:clamp(168px,19vw,300px);
  position:relative; overflow:hidden; color:var(--reel-paper);
  padding:clamp(80px,11vw,160px) 0 clamp(64px,8vw,120px);
  background:
    radial-gradient(70% 46% at 50% 62%, rgba(244,233,212,.16), transparent 70%),
    #0a0a09;
}
.tasteae-reel .tasteae-copy-phrase{display:inline-block}
.tasteae-reel__head{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 clamp(20px,4vw,64px);margin-bottom:clamp(40px,6vw,80px)}
.tasteae-reel__eyebrow{font-family:"Inter Tight",sans-serif;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--reel-oat);margin:0 0 20px}
.tasteae-reel__title{font-family:"Noto Serif TC",serif;font-weight:700;font-size:clamp(32px,4.4vw,68px);line-height:1.22;letter-spacing:.02em;margin:0}
.tasteae-reel__lede{margin:20px 0 0;max-width:30em;color:rgba(246,244,239,.62);font-size:16px;line-height:1.75}

/* the light table behind the film */
.tasteae-reel__strip{
  position:relative; padding:30px 0; margin:0 0 clamp(14px,2vw,24px);
  background:var(--reel-film);
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 30px 80px -30px rgba(244,233,212,.25);
}
/* sprocket holes let the light table show through */
.tasteae-reel__strip::before,.tasteae-reel__strip::after{
  content:""; position:absolute; left:0; right:0; height:12px; pointer-events:none;
  background:repeating-linear-gradient(90deg, transparent 0 14px, var(--reel-light) 14px 26px, transparent 26px 40px);
  opacity:.82; border-radius:2px;
}
.tasteae-reel__strip::before{top:9px}
.tasteae-reel__strip::after{bottom:9px}

.tasteae-reel__track{display:flex;width:max-content;will-change:transform}
.tasteae-reel__strip{touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.tasteae-reel__strip.is-dragging{cursor:grabbing}
.tasteae-reel__frame img{-webkit-user-drag:none;pointer-events:none}

/* the exposure line: frames develop as they cross it */
.tasteae-reel__table{position:relative}
.tasteae-reel__gate{position:absolute;z-index:2;top:-22px;bottom:-22px;left:50%;width:2px;margin-left:-1px;pointer-events:none;
  background:linear-gradient(transparent,rgba(255,248,232,.95) 12%,rgba(255,248,232,.95) 88%,transparent);
  box-shadow:0 0 18px 4px rgba(255,236,200,.35),0 0 60px 18px rgba(255,236,200,.12);mix-blend-mode:screen}
.tasteae-reel__gate span{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-family:"Inter Tight",sans-serif;font-size:9px;letter-spacing:.36em;text-transform:uppercase;color:#ffe9c4;white-space:nowrap;opacity:.8}

.tasteae-reel__frame{
  position:relative; flex:0 0 var(--reel-frame); width:var(--reel-frame); margin:0 6px;
  display:flex; flex-direction:column; color:inherit; text-decoration:none; outline:none;
}
.tasteae-reel__img{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:#000}
.tasteae-reel__img img{
  display:block;width:100%;height:100%;object-fit:cover;
  /* undeveloped: a dim print under the darkroom's red safelight (no inversion, faces stay faces) */
  filter:grayscale(1) brightness(.62) contrast(1.15);
  transform:scale(1.02);
  transition:filter 1.1s cubic-bezier(.2,.7,.2,1), transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.tasteae-reel__img::after{
  content:""; position:absolute; inset:0; background:#b8321f; mix-blend-mode:multiply; opacity:.85;
  transition:opacity 1.1s cubic-bezier(.2,.7,.2,1);
}
.tasteae-reel__meta{
  position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; align-items:flex-end; gap:8px;
  padding:28px 12px 10px; font-size:13px; line-height:1.4;
  background:linear-gradient(transparent, rgba(0,0,0,.72));
  opacity:0; transform:translateY(8px); transition:opacity .6s .25s, transform .6s .25s;
}
.tasteae-reel__meta b{font-weight:500;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tasteae-reel__meta time{font-family:"Inter Tight",sans-serif;font-size:11px;letter-spacing:.12em;color:rgba(246,244,239,.7);flex:0 0 auto}
/* edge print */
.tasteae-reel__no{position:absolute;top:-24px;left:4px;font-family:"Inter Tight",sans-serif;font-size:9px;letter-spacing:.24em;color:#e08a3c;opacity:.8}

/* developing: the image rises out of the safelight in black & white, then the colour comes in */
.tasteae-reel__img img{transition:filter .5s ease, transform 1.4s cubic-bezier(.2,.7,.2,1)}
.tasteae-reel__img::after{transition:opacity .5s ease}
.tasteae-reel__frame.is-developed .tasteae-reel__img img{filter:none;transform:scale(1.06);animation:tasteae-reel-develop 1.8s cubic-bezier(.3,.6,.2,1) both}
.tasteae-reel__frame.is-developed .tasteae-reel__img::after{opacity:0;animation:tasteae-reel-safelight 1.8s ease-out both}
@keyframes tasteae-reel-develop{
  0%{filter:grayscale(1) brightness(.62) contrast(1.15)}
  45%{filter:grayscale(1) brightness(1.05) contrast(1.2)}
  100%{filter:none}
}
@keyframes tasteae-reel-safelight{0%{opacity:.85}35%{opacity:.18}100%{opacity:0}}
.tasteae-reel__frame:hover .tasteae-reel__img img,
.tasteae-reel__frame:focus-visible .tasteae-reel__img img{filter:none;transform:scale(1.06)}
.tasteae-reel__frame:hover .tasteae-reel__img::after,
.tasteae-reel__frame:focus-visible .tasteae-reel__img::after{opacity:0}
.tasteae-reel__frame:hover .tasteae-reel__meta,
.tasteae-reel__frame:focus-visible .tasteae-reel__meta,
.tasteae-reel__frame.is-fresh .tasteae-reel__meta{opacity:1;transform:none}
.tasteae-reel__frame:focus-visible .tasteae-reel__img{box-shadow:0 0 0 2px var(--reel-oat)}

.tasteae-reel__foot{display:flex;justify-content:center;margin-top:clamp(36px,5vw,64px);padding:0 20px}
.tasteae-reel__cta{display:inline-flex;gap:8px;color:var(--reel-paper);text-decoration:none;font-size:15px;letter-spacing:.06em;border-bottom:1px solid var(--reel-oat);padding-bottom:6px}

@media (max-width:767px){
  .tasteae-reel{--reel-frame:clamp(150px,44vw,200px)}
}
/* ---------- tally ---------- */
.tasteae-reel__tally{margin:22px 0 0;text-align:center;font-family:"Inter Tight",sans-serif;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:rgba(246,244,239,.5)}
.tasteae-reel__tally b{display:inline-block;font-weight:500;font-size:15px;letter-spacing:.08em;color:#ffe9c4}
.tasteae-reel__tally.is-tick b{animation:tasteae-reel-tick .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes tasteae-reel-tick{0%{transform:translateY(-6px);opacity:.3}100%{transform:none;opacity:1}}

/* ---------- pinned: the section holds while the strips run past the line ---------- */
.tasteae-reel__pin{display:contents}
.tasteae-reel.is-pinned{
  height:calc(100vh + var(--reel-travel,1400px)); height:calc(100svh + var(--reel-travel,1400px));
  padding:0; overflow:visible; overflow-x:clip;
  /* frames sized by height too, so head + two strips + tally fit one screen */
  --reel-frame:clamp(140px,min(17vw,21vh),260px);
}
.tasteae-reel.is-pinned .tasteae-reel__pin{
  position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding:64px 0 var(--reel-safe-bottom,0px);
}
.tasteae-reel.is-pinned .tasteae-reel__head{margin-bottom:36px}
.tasteae-reel.is-pinned .tasteae-reel__title{font-size:clamp(30px,min(4vw,6vh),56px)}
.tasteae-reel.is-pinned .tasteae-reel__lede{margin-top:12px}
.tasteae-reel.is-pinned .tasteae-reel__eyebrow{margin-bottom:14px}
.tasteae-reel.is-pinned .tasteae-reel__strip{padding:26px 0;margin-bottom:12px}
.tasteae-reel.is-pinned .tasteae-reel__foot{margin-top:16px}
.tasteae-reel.is-pinned .tasteae-reel__tally{margin-top:12px}
@media (max-width:767px){
  .tasteae-reel.is-pinned{--reel-frame:clamp(132px,37vw,170px)}
  .tasteae-reel.is-pinned .tasteae-reel__pin{padding-top:56px}
  .tasteae-reel.is-pinned .tasteae-reel__title{font-size:clamp(26px,7.4vw,34px)}
  .tasteae-reel.is-pinned .tasteae-reel__lede{font-size:14px;margin-top:10px}
  .tasteae-reel.is-pinned .tasteae-reel__eyebrow{margin-bottom:12px}
  .tasteae-reel.is-pinned .tasteae-reel__strip{padding:26px 0;margin-bottom:12px}
  .tasteae-reel.is-pinned .tasteae-reel__foot{margin-top:14px}
  .tasteae-reel.is-pinned .tasteae-reel__tally{margin-top:10px}
}

/* ---------- viewer ---------- */
.tasteae-reel-lock{overflow:hidden}
.tasteae-reel-viewer{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.tasteae-reel-viewer[hidden]{display:none}
.tasteae-reel-viewer__backdrop{position:absolute;inset:0;background:rgba(6,5,4,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .32s}
.tasteae-reel-viewer.is-open .tasteae-reel-viewer__backdrop{opacity:1}
.tasteae-reel-viewer__print{position:relative;margin:0;width:min(520px,100%);display:flex;flex-direction:column;gap:14px;padding:14px 14px 18px;background:#f4efe4;color:#141412;border-radius:3px;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.8);opacity:0;transform:translateY(24px) rotate(-1.2deg);transition:opacity .32s,transform .5s cubic-bezier(.2,1.2,.3,1)}
.tasteae-reel-viewer.is-open .tasteae-reel-viewer__print{opacity:1;transform:rotate(-.6deg)}
.tasteae-reel-viewer__print.is-in .tasteae-reel-viewer__photo img{animation:tasteae-reel-develop 1.4s cubic-bezier(.3,.6,.2,1) both}
.tasteae-reel-viewer__photo{aspect-ratio:1/1;overflow:hidden;background:#000}
.tasteae-reel-viewer__photo img{display:block;width:100%;height:100%;object-fit:cover}
.tasteae-reel-viewer__cap{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.tasteae-reel-viewer__who{display:flex;align-items:baseline;gap:10px;min-width:0}
.tasteae-reel-viewer__who b{font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tasteae-reel-viewer__who time,.tasteae-reel-viewer__count{font-family:"Inter Tight",sans-serif;font-size:12px;letter-spacing:.12em;color:#6b685f;flex:0 0 auto}
.tasteae-reel-viewer__actions{display:flex;align-items:center;gap:10px}
.tasteae-reel-viewer__nav,.tasteae-reel-viewer__close{flex:0 0 auto;width:44px;height:44px;border-radius:999px;border:1px solid rgba(20,20,18,.2);background:transparent;color:inherit;font:inherit;font-size:18px;cursor:pointer}
.tasteae-reel-viewer__go{flex:1 1 auto;display:flex;align-items:center;justify-content:center;height:44px;border-radius:999px;background:#141412;color:#f6f4ef;text-decoration:none;font-size:14px;letter-spacing:.06em}
.tasteae-reel-viewer__close{position:absolute;top:-56px;right:0;border-color:rgba(246,244,239,.3);color:#f6f4ef;font-size:22px}

/* without motion the strips become plain swipeable rows */
@media (prefers-reduced-motion:reduce){
  .tasteae-reel__strip{overflow-x:auto;scroll-snap-type:x mandatory}
  .tasteae-reel__frame{scroll-snap-align:center}
  .tasteae-reel__img img,.tasteae-reel__img::after,.tasteae-reel__meta{transition:none;animation:none!important}
  .tasteae-reel__gate{display:none}
  .tasteae-reel__tally{display:none}
  .tasteae-reel__strip{cursor:auto}
  .tasteae-reel-viewer__print,.tasteae-reel-viewer__backdrop{transition:none}
  .tasteae-reel-viewer__print.is-in .tasteae-reel-viewer__photo img{animation:none}
}