/* Highlights · sizzle — layered on /highlights/style.css. Masonry rules are untouched
   (column pack, hero above), so the no-overlap guarantee carries over. */
.hl-sizzle {
  --paper: #f3efe8;
  --ease-out: cubic-bezier(.2, .9, .25, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
}
html:has(.hl-sizzle), .hl-sizzle {
  background:
    radial-gradient(1200px 520px at 15% -10%, rgba(232, 156, 74, 0.10), transparent 60%),
    radial-gradient(900px 480px at 110% 0%, rgba(120, 140, 255, 0.06), transparent 60%),
    #0b0c0f;
  background-attachment: fixed;
}
.hl-sizzle .hl-title h1 { letter-spacing: -0.025em; font-weight: 750; }

/* ---------- 1. knockout sticker labels ----------
   A paper-white sticker with *black* text, blended with `screen`: white stays white,
   black becomes transparent — so the letters are cut out of the sticker and show
   whatever is behind (the photo on the hero, the page glow in the header). */
.hl-sizzle .hl-week-head { align-items: center; }
.hl-sizzle .sz-label {
  display: inline-block;
  padding: 0.32em 0.7em 0.36em;
  border-radius: 7px;
  background: var(--paper);
  color: #000;
  font-weight: 900;
  letter-spacing: 0.06em;
  mix-blend-mode: screen;
  transform: rotate(-1.5deg);
}
.hl-sizzle .hl-week { isolation: isolate; }
.hl-sizzle .hl-hero { position: relative; isolation: isolate; }
.sz-sticker {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  max-width: calc(100% - 28px);
  padding: 0.28em 0.6em 0.34em;
  border-radius: 9px;
  background: var(--paper);
  color: #000;
  font-weight: 900;
  font-size: clamp(1rem, 4.2vw, 2.1rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-align: left;
  mix-blend-mode: screen;
  transform: rotate(-3deg);
  transform-origin: 0 100%;
  transition: transform 0.4s var(--ease-spring);
  pointer-events: none;
}
.hl-sizzle .hl-hero:hover .sz-sticker,
.hl-sizzle .hl-hero:focus-visible .sz-sticker { transform: rotate(-1deg) translateY(-2px); }
.hl-sizzle .hl-hero .hl-pill { left: auto; right: 12px; bottom: 12px; }

/* ---------- 2. fan-out deck ---------- */
.sz-deck-wrap {
  margin: 4px 0 calc(var(--gap) + 4px);
  padding: 22px 0 0;            /* headroom for lifted cards; nothing overlaps the hero */
}
.sz-deck {
  --spread: 24px;
  --rot: 5deg;
  --cw: 62px;
  position: relative;
  height: calc(var(--cw) * 4 / 3 + 10px);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.sz-card {
  --lift: 0;
  --fan: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--cw);
  aspect-ratio: 3 / 4;
  margin-left: calc(var(--cw) / -2);
  padding: 0;
  border: 3px solid var(--paper);
  border-radius: 7px;
  background: var(--panel-2);
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
  transform-origin: 50% 230%;
  transform:
    translateX(calc(var(--t) * var(--spread) * var(--fan)))
    translateY(calc(var(--lift) * -18px))
    rotate(calc(var(--t) * var(--rot) * var(--fan) + (1 - var(--fan)) * var(--t) * 1.2deg))
    scale(calc(1 + var(--lift) * 0.14));
  transition: transform 0.55s var(--ease-spring), box-shadow 0.3s;
  transition-delay: calc(var(--d) * 35ms);
}
.sz-card img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.sz-deck-wrap.is-fanned .sz-card { --fan: 1; }
.sz-deck.is-live .sz-card, .sz-card:focus-visible { transition-delay: 0ms; transition-duration: 0.28s; }
.sz-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sz-deck-hint {
  margin: 10px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Masonry tiles: slightly rounder prints; radius on the media so the morph keeps it. */
.hl-sizzle .hl-tile img, .hl-sizzle .hl-tile video { border-radius: inherit; }
.hl-sizzle .hl-tile { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset; }

/* ---------- 3. viewer ---------- */
.hl-sizzle .hl-lightbox { background: rgba(8, 9, 11, 0.94); }
.hl-sizzle .hl-lb-stage img, .hl-sizzle .hl-lb-stage video { border-radius: 14px; }

::view-transition-group(hl-photo) { animation-duration: 0.44s; animation-timing-function: var(--ease-out, cubic-bezier(.2, .9, .25, 1)); }
::view-transition-old(hl-photo),
::view-transition-new(hl-photo) { height: 100%; object-fit: cover; animation-duration: 0.3s; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.26s; }
html[data-sz-vt="next"]::view-transition-old(hl-stage) { animation: 0.28s cubic-bezier(.4, 0, .2, 1) both sz-out-l; }
html[data-sz-vt="next"]::view-transition-new(hl-stage) { animation: 0.34s cubic-bezier(.2, .9, .25, 1) both sz-in-r; }
html[data-sz-vt="prev"]::view-transition-old(hl-stage) { animation: 0.28s cubic-bezier(.4, 0, .2, 1) both sz-out-r; }
html[data-sz-vt="prev"]::view-transition-new(hl-stage) { animation: 0.34s cubic-bezier(.2, .9, .25, 1) both sz-in-l; }
@keyframes sz-out-l { to { opacity: 0; transform: translateX(-6%) scale(0.97); } }
@keyframes sz-out-r { to { opacity: 0; transform: translateX(6%) scale(0.97); } }
@keyframes sz-in-r { from { opacity: 0; transform: translateX(8%) scale(0.98); } }
@keyframes sz-in-l { from { opacity: 0; transform: translateX(-8%) scale(0.98); } }

@media (min-width: 640px) {
  .sz-deck { --spread: 40px; --rot: 4deg; --cw: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  .sz-deck-wrap { display: none; }        /* JS also skips building it */
  .sz-sticker, .sz-card { transition: none; }
  .hl-sizzle .hl-hero:hover .sz-sticker { transform: rotate(-3deg); }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}