/* ==========================================================================
   Vertical image stack (assets/vertical-stack.js). Sits beside the History article.
   Theme: cream paper, coal ink, the wordmark's BARBECUE orange (#FB8322) for the live dot.
   ========================================================================== */
.hy-article{
  display:grid;grid-template-columns:minmax(0,66ch) 380px;justify-content:center;gap:clamp(40px,5vw,72px);
  max-width:1200px;margin:0 auto;
}
.hy-article-text{min-width:0;}
.hy-article-aside{min-width:0;}

.vs{
  --vs-orange:#FB8322;
  position:sticky;top:24px;height:min(720px,calc(100svh - 48px));
  opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1);
  user-select:none;-webkit-user-select:none;
}
.vs.is-in{opacity:1;transform:none;}
.vs-stage{
  position:relative;height:100%;perspective:1200px;overflow:hidden;outline:none;touch-action:pan-y;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 11%,#000 89%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 11%,#000 89%,transparent 100%);
}
.vs-stage:focus-visible{outline:2px solid var(--coal,#030303);outline-offset:4px;}

.vs-card{
  position:absolute;left:50%;top:50%;width:280px;height:373px;margin:0;padding:0;list-style:none;
  transform:translate(-50%,-50%);transform-style:preserve-3d;
  transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .45s ease;cursor:pointer;will-change:transform,opacity;
}
.vs-card.is-current{cursor:grab;}
.vs-card.is-dragging{cursor:grabbing;transition:opacity .45s ease;translate:0 var(--vs-drag,0);}
.vs-card figure{
  position:relative;width:100%;height:100%;margin:0;border-radius:22px;overflow:hidden;background:var(--coal,#030303);
  box-shadow:0 10px 30px -10px rgba(3,3,3,.28);
}
.vs-card.is-current figure{box-shadow:0 25px 50px -12px rgba(3,3,3,.4),0 0 0 1px rgba(3,3,3,.06);}
.vs-card img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;-webkit-user-drag:none;user-select:none;pointer-events:none;}
/* soft top sheen + bottom shade for the year tag, as in the original */
.vs-card figure::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(253,249,238,.12),transparent 40%);pointer-events:none;}
.vs-card figure::after{content:"";position:absolute;inset:auto 0 0 0;height:34%;z-index:1;background:linear-gradient(0deg,rgba(3,3,3,.62),transparent);pointer-events:none;}
.vs-year{
  position:absolute;left:16px;bottom:14px;z-index:2;margin:0;
  font-family:var(--mono,"Space Mono",monospace);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#FDF9EE;
}

.vs-counter{position:absolute;left:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;width:44px;pointer-events:none;}
.vs-counter [data-vs-now]{font-family:var(--display,"Anton",sans-serif);font-size:30px;line-height:1;color:var(--coal,#030303);font-variant-numeric:tabular-nums;}
.vs-counter i{display:block;width:28px;height:1px;margin:8px 0;background:rgba(3,3,3,.25);}
.vs-counter [data-vs-total]{font-family:var(--mono,monospace);font-size:12px;color:rgba(3,3,3,.55);font-variant-numeric:tabular-nums;}

.vs-dots{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;z-index:6;}
.vs-dot{position:relative;width:8px;height:8px;padding:0;border:0;border-radius:99px;background:rgba(3,3,3,.28);cursor:pointer;transition:height .3s,background .3s;}
.vs-dot::before{content:"";position:absolute;inset:-8px -10px;}                 /* bigger hit area */
.vs-dot:hover{background:rgba(3,3,3,.5);}
.vs-dot.is-on{height:24px;background:var(--vs-orange);}
.vs-dot:focus-visible,.vs-step:focus-visible{outline:2px solid var(--coal,#030303);outline-offset:3px;}
.vs-step{width:24px;height:24px;padding:0;border:0;background:transparent;color:rgba(3,3,3,.55);font-size:10px;line-height:1;cursor:pointer;}
.vs-step:hover{color:var(--coal,#030303);}
.vs-step--up{margin-bottom:4px;}
.vs-step--down{margin-top:4px;}

.vs-hint{
  position:absolute;left:50%;bottom:4px;transform:translateX(-50%);margin:0;white-space:nowrap;
  font-family:var(--mono,monospace);font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(3,3,3,.55);
  pointer-events:none;
}
.vs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}

@media (max-width:999.98px){
  .hy-article{grid-template-columns:minmax(0,1fr);gap:28px;}
  .hy-article-aside{order:-1;}
  .vs{position:relative;top:auto;height:480px;max-width:380px;margin:8px auto 0;}
  .vs-hint{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .vs{opacity:1;transform:none;transition:none;}
  .vs-card{transition:none;}
}