/* gallery — the expanding-slices image band, one component with a VARIANT
 * axis (`data-variant` on the section root: accordion | spotlight). Both
 * variants share the same skeleton: a flex strip of full-bleed <details>
 * slices, each carrying a cover photo (or a looping video) as its own
 * backdrop with a vertical title spine, one slice always open (JS owns the
 * coordination; without it the native disclosures still open and close).
 * Ink over the photos stays on a fixed near-white-on-dark overlay recipe —
 * never the page ink vars, which are tone-dependent and would fight a surface
 * that is 100% photography. The recipe is the --sk-gallery-scrim /
 * --sk-gallery-over-ink[-muted] trio declared on the section root; EVERY
 * surface in this sheet reads it, so the two variants cannot drift and no
 * surface can quietly reach for --sk-ink / --sk-btn-ink again.
 *
 * accordion — a collapsed slice is a narrow vertical with the photo dimmed
 * and the title always visible; the OPEN slice grows via a single animatable
 * handle (flex-grow 0 → 1) to fill whatever the collapsed slices leave,
 * un-dims its photo, and slides an opaque text box over its LEFT edge
 * (title + summary), leaving the media clean on the right.
 *
 * spotlight — a carousel: collapsed slices are equal thin shares, grayscale
 * until hovered (colour returns, the title slides in from the right); the
 * OPEN slice grows to a wide centred spotlight (flex-basis 80dvw), full
 * colour DARKENED, its copy centred over the media. The section script
 * clamps a sliding WINDOW (.sk-gallery-hidden / the zero-width
 * .sk-gallery-buffer) so at most four collapsed neighbours show.
 *
 * gradient — the "latest cards" deck: everything runs FULL COLOUR on the
 * page tone (no dark band — the scrim recipe survives only as the open
 * card's copy gradient). The open card takes the track and the slices
 * taper toward slivers on BOTH sides (nearest widest — flex-basis tiers
 * by sibling distance, pure CSS: `+` forward, `:has()` behind).
 * Collapsed cards show artwork only (the spine reveals on hover).
 *
 * One markup source (the repeater stamps the accordion's registers); the
 * spotlight retunes its spine/title REGISTER through the derived type-scale
 * vars (--sk-text-h4-size / --sk-text-h1-size) — size carries the register
 * (SITE-KIT.md §3), the stamped step keeps the voice.
 *
 * Variant rules ride `.sk-gallery:where([data-variant=…])` so the axis adds
 * NO specificity — the shared phone/reduced-motion blocks at the sheet's end
 * override them by source order, exactly as in a single-variant sheet. */

.sk-gallery {
  padding-block: 0;

  /* THE OVERLAY RECIPE — fixed near-white on a dark scrim, stated once here
   * and read by every surface in this section. Deliberately NOT the page ink
   * vars: `--sk-ink` and `--sk-btn-ink` are TONE-DEPENDENT (base.css swaps
   * them to --kit-background on the inverted and accent tones, so their value
   * flips with the theme), and every surface here is a photograph or a scrim
   * laid over one — ink that follows the theme fights a surface that is 100%
   * photography. Reaching for them broke exactly that way under a dark theme:
   * `--sk-ink` resolved to the near-white --kit-foreground, so the copy box
   * painted LIGHT beneath white text, and `--sk-btn-ink` resolved to the
   * near-black --kit-background, driving the spine dark over dark photos. */
  --sk-gallery-scrim: #14141a;
  --sk-gallery-over-ink: rgb(255 255 255 / 0.97);
  --sk-gallery-over-ink-muted: rgb(255 255 255 / 0.82);
}

.sk-gallery-row {
  display: flex;
  gap: var(--brand-space-2, 0.65rem);
  align-items: stretch;
  padding: var(--brand-space-2, 0.65rem);
  height: var(--sk-gallery-h, clamp(24rem, 46vw, 34rem));
}

/* ── a slice (shared) ─────────────────────────────────────────────────────── */
.sk-gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--sk-media-radius);
  min-width: 0;
  /* dark base under the media so overlay ink is legible while a photo loads,
   * if it fails, or over a bright frame */
  background: var(--sk-gallery-scrim);
  cursor: pointer;
}
.sk-gallery-item[open] {
  cursor: default;
}
/* strip the native disclosure triangle */
.sk-gallery-item summary {
  list-style: none;
}
.sk-gallery-item summary::-webkit-details-marker {
  display: none;
}

/* ── the head (shared): the backdrop media + the vertical title spine ────── */
.sk-gallery-head {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  overflow: hidden;
  cursor: inherit;
}

/* keyboard focus ring on the whole slice (the summary fills it) */
.sk-gallery-head:focus-visible {
  outline: 2px solid var(--sk-gallery-over-ink);
  outline-offset: -3px;
}

.sk-gallery-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    filter 480ms ease,
    transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sk-gallery-spine {
  position: relative;
  z-index: 1;
  max-height: 100%;
  padding-inline-start: var(--brand-space-3, 1rem);
  writing-mode: vertical-rl;
  white-space: nowrap;
  pointer-events: none;
  /* The spine sits DIRECTLY on a photo with no scrim of its own, so it takes
   * the overlay ink plus a shadow to hold against a bright frame. The alpha
   * stays var-driven: the accordion lifts it to 1 on hover, and the spotlight
   * rests brighter because its collapsed slice is grayscale, not dimmed. */
  color: rgb(255 255 255 / var(--sk-gallery-spine-opacity, 0.82));
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.5);
}

/* ── the open panel (shared Forma) ────────────────────────────────────────── */
.sk-gallery-panel {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  pointer-events: none;
}
.sk-gallery-item[open] .sk-gallery-panel {
  pointer-events: auto;
}
/* Keep the panel in layout even while the slice is CLOSED, so the open
 * transition (the accordion's width reveal, the spotlight's fade) animates
 * from a live start state — a closed <details> otherwise drops its
 * non-summary content from rendering and the transition would just snap.
 * The two-class specificity beats the older UA details-closed hiding rule
 * (display:none on the non-summary children). */
.sk-gallery-item .sk-gallery-panel {
  display: flex;
}
/* Modern Chrome instead wraps the closed content in ::details-content and
 * locks it to block-size:0 + content-visibility:hidden, which also freezes
 * the container's size and snaps the reveal. Keep that region always live —
 * the variants hide their copy themselves (width-clip / opacity), so [open]
 * can drive a real animation. */
.sk-gallery-item::details-content {
  content-visibility: visible;
  block-size: auto;
}

.sk-gallery-title {
  margin: 0;
}
.sk-gallery-summary {
  margin: 0;
}

/* ══ variant: accordion ═══════════════════════════════════════════════════ */

.sk-gallery:where([data-variant="accordion"]) {
  /* The FIXED width of the open copy box — stable (viewport-, not
   * panel-relative) so the text inside never reflows as the slice expands. */
  --sk-gallery-copy-w: clamp(16rem, 24vw, 26rem);
}

/* the ONE animatable handle: collapsed slices hold their basis and don't
 * grow; the open slice grows to fill the remaining track */
.sk-gallery:where([data-variant="accordion"]) .sk-gallery-item {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: var(--sk-gallery-collapsed, clamp(4rem, 9vw, 7rem));
  transition: flex-grow 560ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sk-gallery:where([data-variant="accordion"]) .sk-gallery-item[open] {
  flex-grow: 1;
}

/* dimmed while collapsed; brightens as the slice opens */
.sk-gallery:where([data-variant="accordion"]) .sk-gallery-media {
  filter: brightness(0.6) saturate(0.92);
  transform: scale(1.03);
  transition:
    filter 560ms ease,
    transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sk-gallery:where([data-variant="accordion"]) .sk-gallery-item[open] .sk-gallery-media {
  filter: brightness(0.95) saturate(1);
  transform: scale(1);
}

/* the spine is always visible; hover lifts it — an affordance */
.sk-gallery:where([data-variant="accordion"]) .sk-gallery-spine {
  transform: rotate(180deg) translate(0, var(--sk-gallery-spine-lift, 0));
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.sk-gallery:where([data-variant="accordion"]) .sk-gallery-item:not([open]):hover .sk-gallery-spine,
.sk-gallery:where([data-variant="accordion"])
  .sk-gallery-item:not([open])
  .sk-gallery-head:focus-visible
  .sk-gallery-spine {
  --sk-gallery-spine-lift: 0.25rem;
  --sk-gallery-spine-opacity: 1;
}
/* the open slice hands the stage to its text box */
.sk-gallery:where([data-variant="accordion"]) .sk-gallery-item[open] .sk-gallery-spine {
  opacity: 0;
}

/* the open panel: an opaque text box on the LEFT, media clean on the right */
.sk-gallery:where([data-variant="accordion"]) .sk-gallery-panel {
  align-items: stretch;
}
/* The copy REVEALS by clipping, never by reflowing: the container animates
 * its width 0 → the copy's fixed width while hiding the overflow, so the
 * text inside keeps its exact size and position the whole time and is
 * simply uncovered left-to-right. The copy carries the SAME fixed width as
 * the open container, so it never re-wraps or shifts as the slice expands. */
.sk-gallery:where([data-variant="accordion"]) .sk-gallery-copy-container {
  flex: none;
  overflow: hidden;
  width: 0;
  transition: width 480ms cubic-bezier(0.22, 1, 0.36, 1) 120ms;
}
.sk-gallery:where([data-variant="accordion"]) .sk-gallery-item[open] .sk-gallery-copy-container {
  width: var(--sk-gallery-copy-w);
}
.sk-gallery:where([data-variant="accordion"]) .sk-gallery-copy {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--brand-space-2, 0.65rem);
  width: var(--sk-gallery-copy-w);
  height: 100%;
  padding: var(--brand-space-5, 3rem) var(--brand-space-4, 1.5rem);
  background: var(--sk-gallery-scrim);
  color: var(--sk-gallery-over-ink);
}
.sk-gallery:where([data-variant="accordion"]) .sk-gallery-summary {
  max-width: 42ch;
  color: var(--sk-gallery-over-ink-muted);
}

/* ══ variant: spotlight ═══════════════════════════════════════════════════ */

.sk-gallery:where([data-variant="spotlight"]) .sk-gallery-row {
  overflow: hidden;
}

/* collapsed default: an equal-share thin slice. The open slice grows to the
 * spotlight ratio; two equal neighbours per side keep it centred. */
.sk-gallery:where([data-variant="spotlight"]) .sk-gallery-item {
  flex: 1 1 0;
  transition:
    flex-basis 560ms cubic-bezier(0.22, 1, 0.36, 1),
    flex-grow 560ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sk-gallery:where([data-variant="spotlight"]) .sk-gallery-item[open] {
  flex-basis: 80dvw;
}
/* Just OUTSIDE the window, one slice per side stays in layout at zero width
 * (script-set) — the buffer. It costs nothing visually but keeps the slice
 * RENDERED, so when the window slides onto it, its flex-grow animates 0 → 1
 * (a real grow-in) instead of snapping from display:none. */
.sk-gallery:where([data-variant="spotlight"]) .sk-gallery-item.sk-gallery-buffer {
  flex-grow: 0;
}
/* Further out still: fully removed until the buffer promotes it in. */
.sk-gallery:where([data-variant="spotlight"]) .sk-gallery-item.sk-gallery-hidden {
  display: none;
}

/* collapsed + idle: grayscale; hover/focus returns colour; open runs full
 * colour DARKENED so the centred text stays legible */
.sk-gallery:where([data-variant="spotlight"]) .sk-gallery-media {
  filter: grayscale(1) brightness(0.85);
}
.sk-gallery:where([data-variant="spotlight"])
  .sk-gallery-item:not([open])
  .sk-gallery-head:hover
  .sk-gallery-media,
.sk-gallery:where([data-variant="spotlight"])
  .sk-gallery-item:not([open])
  .sk-gallery-head:focus-visible
  .sk-gallery-media {
  filter: grayscale(0) brightness(0.92);
}
.sk-gallery:where([data-variant="spotlight"]) .sk-gallery-item[open] .sk-gallery-media {
  filter: grayscale(0) brightness(0.55);
}

/* the spine: hidden at rest, nudged to the RIGHT; hover slides it left in */
.sk-gallery:where([data-variant="spotlight"]) .sk-gallery-spine {
  /* the spotlight's spine speaks the h4 register (the derived scale) */
  font-size: var(--sk-text-h4-size);
  transform: translateX(1.25rem) rotate(180deg);
  opacity: 0;
  /* brighter at rest than the accordion's: this spine reveals on hover, over
   * a slice that has just returned to full colour */
  --sk-gallery-spine-opacity: 0.96;
  transition:
    opacity 300ms ease,
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sk-gallery:where([data-variant="spotlight"])
  .sk-gallery-item:not([open])
  .sk-gallery-head:hover
  .sk-gallery-spine,
.sk-gallery:where([data-variant="spotlight"])
  .sk-gallery-item:not([open])
  .sk-gallery-head:focus-visible
  .sk-gallery-spine {
  opacity: 1;
  transform: translateX(0) rotate(180deg);
}

/* the open panel: title + summary CENTRED over the darkened media */
.sk-gallery:where([data-variant="spotlight"]) .sk-gallery-panel {
  align-items: center;
  justify-content: center;
  padding: var(--brand-space-4, 1.5rem);
  opacity: 0;
  transition: opacity 360ms ease 140ms;
}
.sk-gallery:where([data-variant="spotlight"]) .sk-gallery-item[open] .sk-gallery-panel {
  opacity: 1;
}
/* the accordion's width-clip container is a pass-through here */
.sk-gallery:where([data-variant="spotlight"]) .sk-gallery-copy-container {
  display: contents;
}
.sk-gallery:where([data-variant="spotlight"]) .sk-gallery-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--brand-space-2, 0.65rem);
  /* A FIXED width (viewport-, never slice-relative), the accordion's
   * width-clip lesson: while a slice collapses the copy must keep its
   * exact lines, not re-wrap narrower with every frame — so it holds this
   * width, refuses to shrink, and the slice's own overflow:hidden clips
   * it as the walls come in. */
  flex: none;
  width: min(32ch, 78dvw);
  text-align: center;
  color: var(--sk-gallery-over-ink);
  /* a deeper shadow than the spine's — this copy has no scrim behind it at
   * all, only the open slice's darkened media */
  text-shadow: 0 2px 28px rgb(0 0 0 / 0.55);
}
.sk-gallery:where([data-variant="spotlight"]) .sk-gallery-title {
  /* the spotlight's heading speaks the h1 register (the derived scale) */
  font-size: var(--sk-text-h1-size);
}
.sk-gallery:where([data-variant="spotlight"]) .sk-gallery-summary {
  color: var(--sk-gallery-over-ink-muted);
}

/* ══ variant: gradient ═══════════════════════════════════════════════════════ */

/* The deck: every collapsed slice rests at the sliver width; the tiers
 * below widen the few NEAREST the open card — after it via `+`, before it
 * via the `:has()` mirror (sibling combinators only reach forward) — so
 * the row tapers toward the open card from both sides wherever it sits in
 * the deck. The width rides a custom property so the tiers state only a
 * VALUE — the one flex declaration stays here, and the phone block's
 * `flex: none` (source order, equal specificity) retires the whole scheme
 * at once. */
.sk-gallery:where([data-variant="gradient"]) .sk-gallery-item {
  --sk-gallery-strip: clamp(1.75rem, 3vw, 3rem);
  flex: 0 1 var(--sk-gallery-strip);
  transition:
    flex-grow 560ms cubic-bezier(0.22, 1, 0.36, 1),
    flex-basis 560ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sk-gallery:where([data-variant="gradient"]) .sk-gallery-item[open] {
  flex-grow: 1;
}
.sk-gallery:where([data-variant="gradient"]) .sk-gallery-item[open] + .sk-gallery-item {
  --sk-gallery-strip: clamp(8rem, 15vw, 14rem);
  --sk-gallery-spine-reveal: 1;
}
.sk-gallery:where([data-variant="gradient"])
  .sk-gallery-item[open]
  + .sk-gallery-item
  + .sk-gallery-item {
  --sk-gallery-strip: clamp(4.5rem, 8vw, 7rem);
  --sk-gallery-spine-reveal: 1;
}
.sk-gallery:where([data-variant="gradient"])
  .sk-gallery-item[open]
  + .sk-gallery-item
  + .sk-gallery-item
  + .sk-gallery-item {
  --sk-gallery-strip: clamp(2.75rem, 5vw, 4.5rem);
}
/* …and the mirror — the same three tiers BEFORE the open card. Only one
 * slice is ever open, so no item can match a rule from each direction. */
.sk-gallery:where([data-variant="gradient"]) .sk-gallery-item:has(+ .sk-gallery-item[open]) {
  --sk-gallery-strip: clamp(8rem, 15vw, 14rem);
  --sk-gallery-spine-reveal: 1;
}
.sk-gallery:where([data-variant="gradient"])
  .sk-gallery-item:has(+ .sk-gallery-item + .sk-gallery-item[open]) {
  --sk-gallery-strip: clamp(4.5rem, 8vw, 7rem);
  --sk-gallery-spine-reveal: 1;
}
.sk-gallery:where([data-variant="gradient"])
  .sk-gallery-item:has(+ .sk-gallery-item + .sk-gallery-item + .sk-gallery-item[open]) {
  --sk-gallery-strip: clamp(2.75rem, 5vw, 4.5rem);
}

/* full colour throughout — a resting sliver dims only a touch so the open
 * card reads brightest; no grayscale, no heavy dim */
.sk-gallery:where([data-variant="gradient"]) .sk-gallery-media {
  filter: brightness(0.88);
}
.sk-gallery:where([data-variant="gradient"]) .sk-gallery-item:hover .sk-gallery-media,
.sk-gallery:where([data-variant="gradient"]) .sk-gallery-item[open] .sk-gallery-media {
  filter: brightness(1);
}

/* a sliver carries no visible title — the artwork is the tease (the name
 * still reads to AT from the summary element); hover/focus fades the spine
 * in as the affordance, but ONLY on the two wide tiers: the narrow breaks
 * stay text-free (--sk-gallery-spine-reveal defaults to 0 and the tier
 * rules above lift it), a vertical title in a 3rem sliver is clipped
 * noise, not a label */
.sk-gallery:where([data-variant="gradient"]) .sk-gallery-spine {
  transform: rotate(180deg);
  opacity: 0;
  --sk-gallery-spine-opacity: 0.96;
  transition: opacity 300ms ease;
}
.sk-gallery:where([data-variant="gradient"]) .sk-gallery-item:not([open]):hover .sk-gallery-spine,
.sk-gallery:where([data-variant="gradient"])
  .sk-gallery-item:not([open])
  .sk-gallery-head:focus-visible
  .sk-gallery-spine {
  opacity: var(--sk-gallery-spine-reveal, 0);
}

/* the open panel: copy bottom-left over the scrim gradient — the media
 * keeps full colour and the gradient pays the contrast exactly where the
 * text is. The scrim lives on the PANEL (inset: 0), not the copy: the copy
 * below holds a fixed width, so a copy-borne scrim would end in a hard
 * vertical edge partway across the card */
.sk-gallery:where([data-variant="gradient"]) .sk-gallery-panel {
  align-items: flex-end;
  background: linear-gradient(to top, rgb(0 0 0 / 0.62), rgb(0 0 0 / 0) 45%);
  opacity: 0;
  transition: opacity 360ms ease 140ms;
}
.sk-gallery:where([data-variant="gradient"]) .sk-gallery-item[open] .sk-gallery-panel {
  opacity: 1;
}
/* the accordion's width-clip container is a pass-through here */
.sk-gallery:where([data-variant="gradient"]) .sk-gallery-copy-container {
  display: contents;
}
.sk-gallery:where([data-variant="gradient"]) .sk-gallery-copy {
  display: flex;
  flex-direction: column;
  gap: var(--brand-space-1, 0.4rem);
  /* FIXED width, same reason as the spotlight's: the collapsing slice
   * clips the copy instead of re-wrapping it */
  flex: none;
  width: clamp(16rem, 44vw, 40rem);
  padding: var(--brand-space-5, 3rem) var(--brand-space-4, 1.5rem) var(--brand-space-4, 1.5rem);
  color: var(--sk-gallery-over-ink);
}
.sk-gallery:where([data-variant="gradient"]) .sk-gallery-summary {
  max-width: 52ch;
  color: var(--sk-gallery-over-ink-muted);
}

/* ── phones: the horizontal row becomes a vertical, height-based accordion.
 *    The spotlight's carousel window is not applied (touch has no hover to
 *    reveal spines) so every slice shows ─────────────────────────────────── */
@media (max-width: 640px) {
  .sk-gallery-row {
    flex-direction: column;
    height: auto;
  }
  .sk-gallery .sk-gallery-item,
  .sk-gallery .sk-gallery-item[open] {
    flex: none;
    height: var(--sk-gallery-collapsed-h, 5rem);
    transition: height 460ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .sk-gallery .sk-gallery-item[open] {
    height: var(--sk-gallery-open-h, 22rem);
  }
  /* Horizontal now, so the placement the rotation used to imply has to be
   * stated outright. The vertical spine read `padding-inline-start` as the gap
   * from the slice's BOTTOM edge (inline runs top→bottom, then the 180° flip
   * lands it there); horizontal, that same declaration would read as a stray
   * left indent, so drop it and let the box's own edges do the aligning. */
  .sk-gallery .sk-gallery-spine {
    writing-mode: horizontal-tb;
    transform: none;
    padding-inline-start: 0;
  }
  /* A stacked band is full-width and only 5rem tall, so its title sits
   * CENTRED in it. Bottom-anchoring belongs to the vertical spine, which runs
   * the whole slice height and needs a foot to stand on; here it would hand
   * the optical gap above and below to heading-2's leading instead of stating
   * a position, which reads as "nearly centred, but a hair low". */
  .sk-gallery .sk-gallery-head {
    justify-content: center;
  }
  /* …and on the INLINE axis the accordion goes left. Horizontal centring was
   * the vertical spine's posture too: it hung in a slice a few rem wide, with
   * no left edge to speak of. Turned horizontal the title spans the whole
   * band, so it takes the band's left edge on the same inline rhythm as the
   * open slice's copy box (which pads by --brand-space-4) — that is what makes
   * a collapsed title and an open one line up. The spotlight stays centred on
   * both axes, matching its own copy centred over the media. */
  .sk-gallery:where([data-variant="accordion"], [data-variant="gradient"]) .sk-gallery-head {
    align-items: flex-start;
  }
  .sk-gallery:where([data-variant="accordion"], [data-variant="gradient"]) .sk-gallery-spine {
    padding-inline-start: var(--brand-space-4, 1.5rem);
  }
  .sk-gallery:where([data-variant="accordion"]) {
    --sk-gallery-copy-w: min(28rem, 82vw);
  }
  .sk-gallery:where([data-variant="spotlight"]) .sk-gallery-row {
    overflow: visible;
  }
  .sk-gallery:where([data-variant="spotlight"]) .sk-gallery-item.sk-gallery-hidden {
    display: flex;
  }
  /* no hover on touch — the spine shows and the photo carries colour */
  .sk-gallery:where([data-variant="spotlight"]) .sk-gallery-spine {
    opacity: 1;
  }
  .sk-gallery:where([data-variant="spotlight"]) .sk-gallery-media {
    filter: grayscale(0) brightness(0.8);
  }
  .sk-gallery:where([data-variant="spotlight"]) .sk-gallery-item[open] .sk-gallery-media {
    filter: grayscale(0) brightness(0.55);
  }
  /* no hover on touch — a stacked gradient band is full-width, so every
   * title shows outright and the sliver gate lifts */
  .sk-gallery:where([data-variant="gradient"]) .sk-gallery-item {
    --sk-gallery-spine-reveal: 1;
  }
  .sk-gallery:where([data-variant="gradient"]) .sk-gallery-spine {
    opacity: 1;
  }
}

/* ── reduced motion: land in the final state, no travel. TRANSITIONS need
 *    no rule here — base.css's !important floor already collapses every
 *    [data-sk] descendant's to 0.01ms. Only the accordion's RESTING
 *    transform (the media's scale(1.03) pre-zoom) is a state, not a
 *    motion, so it takes its own undo. ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sk-gallery .sk-gallery-media {
    transform: none;
  }
}