/* Fit pass (founder, 11 Nov 2026: "you can't even see the guy's face … all the pendants and crosses are going so down that
   you can't see the bottom … the All Father's skull, you can't see all of it"). Loaded after paper.css.
   Rule: on a computer screen every band fits inside one screen, every person shows from the head to the piece,
   and no piece touches the edge of its tile. Phones keep the iPhone pass in studio.css. */

/* 1) Pieces never run off the bottom of their tile: the chain still hangs from the top edge, the piece ends above the floor */
.col[data-col="crosses"] .card-stage img, .col[data-col="pendants"] .card-stage img { height: 90%; align-self: start; }
.col[data-col="crosses"] .card-sheen, .col[data-col="pendants"] .card-sheen { height: 90%; }

@media (min-width: 861px) {
  /* 2) Hero: the model is sized by the hero's height, not the window's width, so his head always shows on wide screens.
        (On screens narrower than 3:2 this gives exactly the old size.) */
  .hero-model { top: auto; bottom: calc(var(--hh) * 0.06); width: auto; height: calc(var(--hh) * 0.8); }

  /* 4) "On the floor": the whole still life shows (skull and chain), melting into the wall on both sides */
  .museum { height: clamp(420px, calc(100svh - var(--head) - 28px), min(46vw, 760px)); background: linear-gradient(rgba(0, 24, 90, 0.38), transparent 50%), linear-gradient(90deg, #0852b2, #013b91 70%, #00358a); }
  .museum-img {
    inset: 0 auto 0 clamp(0px, calc((100vw - 1500px) * 0.22), 160px); width: auto; height: 100%; aspect-ratio: 3 / 2;
    object-fit: cover; object-position: 50% 50%; transform: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 78%, transparent);
  }
}

@media (min-width: 1241px) {
  /* 3) Studio bands: one screen each. --H is the band's height, --ar the photo's own shape (so the whole person shows),
        --T the tallest a tile picture may be so that every row fits. */
  #shop .col.has-strip {
    --rows: 1; --sar: 1; --pad: clamp(24px, 3vw, 48px);
    --H: clamp(var(--hmin), calc(100svh - var(--head) - 28px), var(--hmax));
    --T: calc((var(--H) - 2 * var(--pad) - 72px - (var(--rows) - 1) * 14px) / var(--rows) - 84px);
    min-height: 0; height: var(--H);
    grid-template-columns: min(42%, calc(var(--H) * var(--ar))) minmax(0, 1fr);
  }
  #shop .col[data-col="pendants"] { --cols: 2; --ar: 0.8; --sar: 0.82; --hmin: 460px; --hmax: clamp(480px, 36vw, 700px); }
  #shop .col[data-col="rings"] { --cols: 4; --ar: 1.5; --hmin: 400px; --hmax: clamp(420px, 28vw, 560px); }
  #shop .col[data-col="bracelets"] { --cols: 4; --rows: 2; --ar: 1.5; --hmin: 600px; --hmax: clamp(600px, 46vw, 900px); }
  #shop .col[data-col="chains"] { --cols: 3; --ar: 0.6667; --sar: 1.15; --hmin: 420px; --hmax: clamp(440px, 30vw, 580px); }
  #shop .col.has-strip .col-body {
    box-sizing: content-box; width: auto; align-self: center; justify-self: center;
    padding: var(--pad) var(--gut) var(--pad) clamp(24px, 3vw, 48px);
    width: min(100% - var(--gut) - clamp(24px, 3vw, 48px), calc(var(--cols) * var(--T) * var(--sar) + (var(--cols) - 1) * 14px));
  }
  #shop .col.has-strip .grid { gap: 14px; }
}

/* 5) Neck pieces in the piece sheet (founder, 11 Nov 2026: "the blue background is two different colors ... towards the edges
      ... clicked on it again ... now it's zoomed in ... when you go to a higher length chain, it just like becomes weird").
      Every pendant / cross / chain On him and Styled photo is 4:5, so the photo frame is exactly 4:5: the whole photo,
      edge to edge, never cropped, no painted side bands, the same on every open and every chain length.
      Guard: research/picture-audit/sheet_frames.py */
.sheet.tall :is(.s-worn, .s-styled) img.pic { object-fit: cover; object-position: 50% 0; -webkit-mask-image: none; mask-image: none; }
@media (min-width: 761px) {
  .sheet.tall .sheet-in { grid-template-columns: calc(min(640px, 100svh - 48px) * 0.8) minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .sheet.tall .sheet-stage, .sheet.tall.two-opts .sheet-stage { height: 125vw; }
}