/* =====================================================================
   piece.css — a work's page (site/pieces/<slug>.html)
   Stage (3D + photos) · wall label + options · the two paintings ·
   more works · lightbox · size guide sheet.
   ===================================================================== */

/* ---------------------------------------------------------------- top: stage + panel */
.piece-top { display: block; }
.piece-stage { position: relative; }

.stage {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: calc(100svh - var(--header-h) - 120px);
  min-height: 360px;
  width: 100%;
  background: var(--bone);
  overflow: hidden;
  isolation: isolate;
}
.stage .viewer.stage__viewer {
  position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto;
  opacity: 0; transition: opacity 0.7s var(--ease);
}
.stage.is-ready .stage__viewer { opacity: 1; }
.stage .stage__viewer.is-swapping { opacity: 0; transition-duration: 0.2s; }
.stage .stage__viewer.is-swapped-in { transition-duration: 0.4s; }
.stage[data-view='photo'] .stage__viewer { opacity: 0; pointer-events: none; transition-duration: 0.45s; }

/* Printful photos have a white background: multiply melts it into the bone well. */
.stage__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; mix-blend-mode: multiply;
  padding: clamp(0.5rem, 3vw, 2.5rem);
  opacity: 0; transition: opacity 0.5s var(--ease);
  z-index: 1;
}
.stage__photo.is-on, .stage__photo--static { opacity: 1; }
.no-js .stage__viewer { display: none; }

.stage-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 64px; padding: var(--s-3) var(--gutter) 0;
}
.stage-views { display: flex; gap: var(--s-2); }
.view-thumb {
  position: relative; width: 52px; height: 65px; padding: 0;
  background: var(--bone); border: 1px solid transparent; border-radius: var(--radius);
  display: grid; place-items: center; overflow: hidden;
  transition: border-color 0.25s var(--ease);
}
.view-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 3px; }
.view-thumb:hover { border-color: var(--line-strong); }
.view-thumb[aria-pressed='true'] { border-color: var(--ink); }
.view-thumb--3d > span[aria-hidden] { font-family: var(--font-display); font-size: var(--fs-md); font-style: italic; }
.stage-hint {
  margin-left: auto; font-size: var(--fs-sm); color: var(--muted);
  transition: opacity 0.6s var(--ease);
}
.stage-hint.is-gone { opacity: 0; }

/* ---------------------------------------------------------------- panel: wall label + options */
.piece-panel { padding: var(--s-6) var(--gutter) 0; }
.piece-label__title {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: var(--fs-2xl); line-height: 1.04; letter-spacing: -0.01em;
}
.piece-label__artist { margin-top: var(--s-4); font-weight: 500; }
.piece-label__artist a { text-underline-offset: 0.22em; }
.piece-label__meta { font-size: var(--fs-sm); color: var(--muted); }
.piece-label__story {
  margin-top: var(--s-5); max-width: 30ch;
  font-size: var(--fs-md); line-height: 1.45; color: var(--ink-2);
}
.piece-price { margin-top: var(--s-6); font-size: var(--fs-lg); line-height: 1; }

.piece-form { margin-top: var(--s-5); display: grid; gap: var(--s-5); }
.piece-form .chips > legend { margin-bottom: var(--s-3); }
.piece-form .chip > span { min-width: 56px; }
/* Sizes: one even row (S–3XL or S–4XL), never a lone size on a second line. */
.piece-form .chips[data-group='size'] {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 6px; max-width: 28rem;
}
.piece-form .chips[data-group='size'] .chip { display: flex; }
.piece-form .chips[data-group='size'] .chip > span { width: 100%; min-width: 0; padding: 0 2px; }
.piece-size-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: calc(var(--s-4) * -1); }
.piece-guide-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0;
  background: none; border: 0; font-size: var(--fs-sm); color: var(--fg);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--line-strong);
}
.piece-guide-btn:hover { text-decoration-color: currentColor; }
.piece-size-foot .field__error { margin: 0; }
.piece-add { margin-top: var(--s-1); }
.piece-lead { margin-top: calc(var(--s-4) * -1); }

.piece-info { margin-top: var(--s-6); }
.piece-details__name { font-weight: 500; color: var(--fg); }
.piece-details__list { display: grid; gap: var(--s-1); }
.piece-details__list li { padding-left: 1em; position: relative; }
.piece-details__list li::before { content: '–'; position: absolute; left: 0; color: var(--muted); }

/* ---------------------------------------------------------------- desktop: stage fills the left */
@media (min-width: 1000px) {
  .piece-top {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(340px, 1fr);
    gap: clamp(2.5rem, 5vw, 6rem);
    max-width: var(--max); margin-inline: auto;
    padding: var(--s-4) var(--gutter) 0;
    align-items: start;
  }
  .piece-stage { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
  .stage { aspect-ratio: auto; height: calc(100svh - var(--header-h) - 64px - var(--s-6)); max-height: none; min-height: 520px; }
  .stage-bar { padding-inline: 0; }
  .piece-panel { padding: clamp(1.5rem, 9vh, 6rem) 0 var(--s-6); max-width: 30rem; }
}

/* ---------------------------------------------------------------- the two paintings */
.piece-pair { padding-block: var(--section) 0; }
.pair { display: grid; gap: var(--s-7); }
@media (min-width: 900px) {
  .pair { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: end; }
}
.pair__item { margin: 0; }
.pair__open {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.pair__media {
  display: block;
  box-shadow: 0 1px 1px rgba(18, 18, 17, 0.06), 0 22px 40px -26px rgba(18, 18, 17, 0.45);
}
.pair__media img { transition: transform 1.2s var(--ease), opacity 0.6s var(--ease); }
.pair__open:hover .pair__media img { transform: scale(1.025); }
.pair__cap { margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--muted); }

/* ---------------------------------------------------------------- more works */
.more { padding-top: var(--section); }
.more__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.more__title { font-size: var(--fs-xl); line-height: 1.15; }
.more__all { font-size: var(--fs-sm); white-space: nowrap; }
.more__row {
  margin: var(--s-6) calc(var(--gutter) * -1) 0; padding: 0 var(--gutter);
  display: grid; grid-auto-flow: column; grid-auto-columns: 74%; gap: var(--s-4);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.more__row::-webkit-scrollbar { display: none; }
.more__item { scroll-snap-align: start; }
.more__card { display: block; text-decoration: none; }
.more__card .media img { transition: transform 1.2s var(--ease), opacity 0.6s var(--ease); }
.more__card:hover .media img { transform: scale(1.03); }
.more__card .wall-label { margin-top: var(--s-3); }
.more__card:hover .wall-label__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
@media (min-width: 640px) { .more__row { grid-auto-columns: 44%; } }
@media (min-width: 1000px) {
  .more__row { margin-inline: 0; padding: 0; grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; gap: var(--s-5); }
}

/* ---------------------------------------------------------------- lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 85; background: #0f0f0e; color: var(--ivory);
  opacity: 0; transition: opacity 0.32s var(--ease);
}
.lightbox.is-open { opacity: 1; }
.lightbox :focus-visible { outline-color: var(--oat); }
.lightbox__stage {
  position: absolute; inset: 0 0 76px; display: grid; place-items: center; overflow: hidden;
  touch-action: none; cursor: zoom-in; user-select: none; -webkit-user-select: none;
}
.lightbox.is-zoomed .lightbox__stage { cursor: grab; }
.lightbox.is-zoomed .lightbox__stage:active { cursor: grabbing; }
.lightbox__img {
  max-width: calc(100% - 2 * var(--gutter)); max-height: calc(100% - var(--s-9));
  width: auto; height: auto; transform-origin: center; will-change: transform;
  transition: opacity 0.3s var(--ease);
  -webkit-user-drag: none;
}
.lightbox.is-open .lightbox__img { animation: lb-in 0.5s var(--ease) both; }
@keyframes lb-in { from { transform: scale(0.97); opacity: 0; } }
.lightbox__img.is-animating { transition: transform 0.42s var(--ease), opacity 0.3s var(--ease); }
.lightbox__img.is-swapping { opacity: 0; }
.lightbox__bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 76px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: 0 var(--gutter) env(safe-area-inset-bottom);
}
.lightbox__cap { font-size: var(--fs-sm); color: #b9b2a5; }
.lightbox__title { font-family: var(--font-display); font-style: italic; font-size: var(--fs-md); color: var(--ivory); margin-right: var(--s-2); }
.lightbox__nav { display: flex; gap: var(--s-4); }
.lightbox__btn {
  min-height: 44px; padding: 0 var(--s-1); background: none; border: 0; color: #b9b2a5;
  font-size: var(--fs-sm); font-weight: 500;
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
  background-position: 0 calc(100% - 10px); background-size: 0 1px; transition: background-size 0.35s var(--ease), color 0.2s;
}
.lightbox__btn:hover, .lightbox__btn[aria-pressed='true'] { color: var(--ivory); background-size: 100% 1px; }
.lightbox__close { position: absolute; top: max(var(--s-3), env(safe-area-inset-top)); right: var(--s-3); color: var(--ivory); }
.lightbox__hint {
  position: absolute; left: 50%; top: max(var(--s-5), env(safe-area-inset-top)); transform: translateX(-50%);
  font-size: var(--fs-sm); color: #b9b2a5; pointer-events: none; transition: opacity 0.6s var(--ease);
}
.lightbox__hint.is-gone { opacity: 0; }

/* ---------------------------------------------------------------- size guide (inside the shell sheet) */
.piece-page .sheet { max-height: 92svh; overflow-y: auto; overscroll-behavior: contain; }
.sg__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-3); }
.sg__garment { font-weight: 500; color: var(--fg); }
.sg__units { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); }
.sg__units button { min-width: 44px; min-height: 36px; background: none; border: 0; font-size: var(--fs-sm); color: var(--muted); }
.sg__units button[aria-pressed='true'] { background: var(--ink); color: var(--ivory); }
.sg__table th[scope='row'] { color: var(--fg); font-weight: 500; }
.sg__table tr.is-current td, .sg__table tr.is-current th { background: var(--bone); }
.sg__table td, .sg__table th { padding-left: var(--s-2); }
.sg__table th:first-child, .sg__table td:first-child { padding-left: 0; }
.sg__note { font-weight: 400; color: var(--faint); }
.sg__foot { margin-top: var(--s-4); }
.sg > p + p { margin-top: var(--s-2); }
.more__card .media { display: block; }

/* desktop: keep "Add to bag" above the fold on a 900px-tall screen */
@media (min-width: 1000px) {
  .piece-panel { padding-top: clamp(1rem, 4vh, 3rem); }
  .piece-label__artist { margin-top: var(--s-3); }
  .piece-label__story { margin-top: var(--s-4); }
  .piece-price { margin-top: var(--s-5); }
  .piece-form { gap: var(--s-4); }
  .piece-form .chips > legend { margin-bottom: var(--s-2); }
  .piece-form .chip > span { min-height: 40px; }
  .piece-size-foot { margin-top: calc(var(--s-3) * -1); }
}
/* beat ul[role='list'] { padding: 0 } from base.css */
.more ul.more__row { padding-inline: var(--gutter); }
@media (min-width: 1000px) { .more ul.more__row { padding-inline: 0; } }