/* Archive series. Base rules are the no-JS layout (a heading and grid per series); .is-ready switches to planets. */
.hps-archive { --ring-ease: cubic-bezier(.2,.7,0,1); position: relative; }
.hps-archive__stage { display: flex; flex-direction: column; gap: 64px; }
.hps-ring__counter,.hps-ring__photo,.hps-archive__back,.hps-archive__controls,.hps-archive__backdrop { display: none; }
.hps-ring__name { margin: 0 0 24px; }
.hps-ring__open { display: flex; align-items: baseline; gap: 16px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-transform: uppercase; text-align: left; cursor: default; }
.hps-ring__count { font-size: var(--hps-type-small-size); font-weight: var(--hps-font-weight-regular); letter-spacing: .08em; color: var(--hps-color-text-secondary); }
.hps-ring__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 32px 24px; width: 100%; }
.hps-ring__figure { margin: 0; }
.hps-ring__thumb { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; }
.hps-ring__thumb img { display: block; width: 100%; aspect-ratio: 2/3; object-fit: contain; }
.hps-ring__caption { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 12px; text-align: center; }
.hps-ring__title { font-size: var(--hps-type-heading-size); font-weight: var(--hps-font-weight-bold); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
a.hps-ring__title:hover { text-decoration: underline; }
.hps-ring__series,.hps-ring__price { font-size: var(--hps-type-price-size); letter-spacing: .08em; color: var(--hps-color-text-secondary); }
.hps-ring__price del { opacity: .6; }

/* The stage bleeds edge to edge; JS sets its height to one row per planet. */
.site-main:has(> .hps-archive.is-ready) { width: 100%; max-width: none; padding: 0; }
.hps-archive.is-ready .hps-archive__stage { display: block; position: relative; z-index: 1; overflow-x: clip; width: 100%; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: pointer; }
.hps-archive.is-zoomed .hps-archive__stage { cursor: grab; }
.hps-archive.is-ready .hps-archive__stage.is-dragging { cursor: grabbing; }
/* An open ring owns the screen: the page stops scrolling and a backdrop covers the other planets. */
html.hps-archive-open { overflow: hidden; }
.hps-archive.is-ready .hps-archive__backdrop { display: block; position: absolute; left: 0; right: 0; top: var(--zoom-y, 0); height: var(--zoom-h, 0); background: var(--paper); opacity: var(--zoom-z, 0); pointer-events: none; }

/* Every ring shares the stage's coordinates; JS sets its box, orbit and opacity each frame. */
.hps-archive.is-ready .hps-ring { position: absolute; inset: 0; pointer-events: none; }
.hps-archive.is-zoomed .hps-ring:not([inert]) { z-index: 2; }
.hps-archive.is-zoomed .hps-ring:not([inert]) :is(.hps-ring__item,.hps-ring__photo,.hps-ring__feature) { pointer-events: auto; }
.hps-archive.is-ready .hps-ring__list { display: block; position: absolute; inset: 0; }
.hps-archive.is-ready .hps-ring__item { position: absolute; left: 0; top: 0; width: var(--thumb); will-change: transform, opacity; }
.hps-archive.is-ready .hps-ring__item.is-away { visibility: hidden; }
.hps-archive.is-ready .hps-ring__item .hps-ring__caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; }
.hps-archive.is-ready .hps-ring__thumb { cursor: inherit; }
.hps-archive.is-ready .hps-ring__thumb img { -webkit-user-drag: none; pointer-events: none; transition: transform 300ms var(--ring-ease); }
@media (hover: hover) { .hps-archive.is-zoomed .hps-ring__thumb:hover img { transform: scale(1.08); } }

/* Planet label under each ring, fading out as the ring opens. */
.hps-archive.is-ready .hps-ring__name { position: absolute; left: var(--label-x); top: var(--label-y); translate: -50% 0; margin: 0; opacity: calc(1 - var(--ring-z, 0)); z-index: 60; white-space: nowrap; }
.hps-archive.is-ready .hps-ring__open { flex-direction: column; align-items: center; gap: 6px; font-size: var(--hps-type-caption-size); letter-spacing: .12em; text-align: center; cursor: pointer; pointer-events: auto; }
.hps-archive.is-ready .hps-ring__open:hover > :first-child { text-decoration: underline; text-underline-offset: 4px; }

/* The planet: the active photo, with its counter above and caption below. */
.hps-archive.is-ready .hps-ring__photo { display: block; position: absolute; left: var(--photo-x); top: var(--photo-y); width: var(--photo-w); height: var(--photo-h); z-index: 50; }
.hps-ring__photo > :is(a,div) { display: block; width: 100%; height: 100%; }
.hps-ring__photo img,.hps-ring__flyer img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Inside the caption block, under the price. */
.hps-archive.is-ready .hps-ring__counter { display: block; margin: 10px 0 0; text-align: center; font-size: var(--hps-type-price-size); letter-spacing: .12em; font-variant-numeric: tabular-nums; color: var(--hps-color-text-secondary); }
.hps-archive.is-ready .hps-ring__feature { position: absolute; left: var(--label-x); top: calc(var(--photo-y) + var(--photo-h)); width: max(var(--photo-w), 220px); translate: -50% 0; z-index: 50; opacity: var(--ring-z, 0); }
.hps-ring__feature .hps-ring__caption { padding-top: 16px; }
.hps-ring__feature .hps-ring__title { font-size: var(--hps-type-heading-size); }
.hps-ring__feature.is-changing > * { animation: hps-ring-in 420ms var(--ring-ease); }
@keyframes hps-ring-in { from { opacity: 0; translate: 0 6px; } }

/* Photos travelling between the orbit and the center. */
.hps-ring__flyer { position: absolute; left: 0; top: 0; z-index: 120; pointer-events: none; will-change: transform; }

/* Back to the overview, and previous/next on the screen edges. */
.hps-archive.is-ready .hps-archive__back { display: block; position: absolute; left: var(--hps-shell-gutter); top: calc(var(--zoom-y, 0px) + 16px); z-index: 130; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font-size: var(--hps-type-small-size); font-weight: var(--hps-font-weight-bold); letter-spacing: .12em; text-transform: uppercase; opacity: 0; pointer-events: none; transition: opacity 300ms var(--ring-ease); }
.hps-archive.is-zoomed .hps-archive__back { opacity: 1; pointer-events: auto; }
.hps-archive__back:hover { text-decoration: underline; text-underline-offset: 4px; }
.hps-archive.is-ready .hps-archive__controls { display: flex; justify-content: space-between; align-items: center; position: absolute; left: 0; right: 0; top: calc(var(--zoom-y, 0px) + var(--zoom-h, 0px) / 2); translate: 0 -50%; padding-inline: var(--hps-shell-gutter); z-index: 130; pointer-events: none; opacity: 0; transition: opacity 300ms var(--ring-ease); }
.hps-archive.is-zoomed .hps-archive__controls { opacity: 1; }
.hps-archive:not(.is-zoomed) .hps-archive__step { pointer-events: none; }
.hps-archive__step { min-width: 56px; min-height: 56px; border: 0; background: none; color: inherit; font-size: var(--hps-icon-large); pointer-events: auto; cursor: pointer; }
.hps-archive__step:hover { color: var(--hps-color-text-secondary); }

@media (max-width: 767px) {
    .hps-ring__feature .hps-ring__title { font-size: var(--hps-type-heading-size); }
    .hps-ring__list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 12px; }
    /* Phones move by swiping and auto-advance, so the arrows would only cover photos. */
    .hps-archive.is-ready .hps-archive__controls { display: none; }
    /* The back control shrinks to an icon on a paper disc that stays legible over photos. */
    .hps-archive.is-ready .hps-archive__back { display: grid; place-items: center; left: 12px; top: calc(var(--zoom-y, 0px) + 12px); width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--paper) 88%, transparent); font-size: var(--hps-type-body-size); }
    .hps-archive__back-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (prefers-reduced-motion: reduce) {
    .hps-ring__feature.is-changing > * { animation: none; }
    .hps-archive.is-ready .hps-ring__thumb img,.hps-archive.is-ready .hps-archive__back { transition: none; }
}