/* Shared editorial rhythm for the two collection pieces. */
.collection-piece.medal-piece,.collection-piece.shirt-piece{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:48px;align-items:center;padding:64px 0;min-height:0;border-bottom:1px solid var(--line)}
.collection-piece .piece-copy{position:relative;grid-column:1;grid-row:1;align-self:center;padding:0 0 0 24px;border-left:2px solid #b88950;z-index:1;max-width:460px}
.collection-piece .piece-copy .eyebrow{font-size:12px;font-weight:600;letter-spacing:.16em;margin:0 0 18px;line-height:1.4}
.collection-piece .piece-copy h2{font-size:clamp(40px,4.5vw,62px);line-height:1.08;letter-spacing:-.025em;margin:0 0 22px;text-wrap:balance}
.collection-piece .piece-copy>p:not(.eyebrow){max-width:36ch;font-size:18px;line-height:1.6;margin:0}
.collection-piece .piece-copy>p.piece-condition{max-width:35ch;margin-top:28px;padding:18px 0 0;border-top:1px solid #c7b699;font-size:15px;line-height:1.6}
.medal-piece:before{inset:0 -5.55556%;background:url('./medal-botanical.webp') center/cover no-repeat;opacity:1;mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent)}
.medal-viewer{position:relative;min-width:0;grid-column:2;grid-row:1;align-self:center}
.rotation-cue{display:block;width:64px;height:36px;margin:8px auto 0;fill:none;stroke:var(--ink);stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;opacity:.7;pointer-events:none}
.rotation-cue .gesture-hand{transform-origin:center;transform-box:fill-box}
[data-preview="playing"] + .rotation-cue .gesture-hand{animation:drag-gesture 1800ms ease-in-out both}
@keyframes drag-gesture{0%,100%{transform:translateX(0)}30%{transform:translateX(6px)}70%{transform:translateX(-6px)}}
@media(prefers-reduced-motion:reduce){.rotation-cue .gesture-hand{animation:none!important}}
.medal-viewer:has(.failed) .rotation-cue,.shirt-viewer:has(.failed) .rotation-cue{display:none}
#medalla #stage{height:640px;position:relative;cursor:grab;touch-action:pan-y;outline-offset:-4px}
#medalla #stage:active{cursor:grabbing}
#medalla #stage:focus-visible{outline:2px solid var(--teal)}
#medalla canvas{display:block;width:100%;height:100%}
#medalla #fallback{position:absolute;inset:0;pointer-events:none}
#medalla #fallback img{width:100%;height:100%;object-fit:contain;display:block}
#medalla #stage.ready #fallback,#medalla #stage.ready #status{display:none}
#medalla #stage.failed canvas{visibility:hidden}
#medalla #status{position:absolute;bottom:12px;left:8%;right:8%;text-align:center;font-size:13px;background:var(--paper);padding:8px}
.medal-controls,.shirt-controls{position:relative;text-align:center;margin:12px auto 0;width:fit-content;max-width:100%;padding:8px;background:#f3eadbf2;border:1px solid #c7b699;border-radius:3px}
.medal-faces,.shirt-faces{display:flex;justify-content:center;gap:4px;border:0}
.medal-controls button,.shirt-controls button{font:inherit;font-size:14px;font-weight:600;color:var(--ink);border:1px solid transparent;background:transparent;padding:10px 14px;min-height:44px;border-radius:2px;cursor:pointer;transition:background-color .18s,color .18s}
.medal-faces button[aria-pressed=true],.shirt-faces button[aria-pressed=true]{color:#fff8ed;background:#4b2917;border-color:#4b2917}
.medal-controls button:hover:not(:disabled),.shirt-controls button:hover:not(:disabled){background:#e4d4bc;color:#4b2917}
.medal-controls button:disabled,.shirt-controls button:disabled{opacity:.5;cursor:default}
.medal-controls button:focus-visible,.shirt-controls button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
#medalla #hint,.shirt-controls [data-hint]{font-size:12px;color:#725d46;margin:8px 0 2px;line-height:1.5}
@media(max-width:899px){
 .collection-piece.medal-piece,.collection-piece.shirt-piece{grid-template-columns:1fr;gap:24px;padding:44px 0 36px}
 .collection-piece .piece-copy{grid-column:1;grid-row:auto;padding-left:18px;max-width:520px}
 .collection-piece .piece-copy h2{font-size:clamp(35px,7vw,48px);margin-bottom:16px}
 .collection-piece .piece-copy .eyebrow{font-size:11px;margin-bottom:12px}
 .collection-piece .piece-copy>p:not(.eyebrow){font-size:17px}
 .collection-piece .piece-copy>p.piece-condition{font-size:14px;margin-top:20px;padding-top:16px}
 .medal-viewer{grid-column:1;grid-row:auto;margin:0}
 .medal-piece:before{background-size:auto 630px;background-position:63% bottom;mask-image:linear-gradient(to bottom,transparent 26%,#000 50%,#000 90%,transparent)}
 #medalla #stage{height:500px}
}
@media(max-width:700px){.medal-piece:before{left:-20px;right:-20px}}
@media(max-width:360px){.medal-piece:before{left:-16px;right:-16px}#medalla #stage{height:460px}.medal-controls button,.shirt-controls button{padding:10px 11px}}

@media(min-width:900px){
 .medal-piece:before{background-image:linear-gradient(90deg,#f3eadb 0%,#f3eadbd9 32%,#f3eadb00 58%),url('./medal-botanical.webp')}
}