* { box-sizing: border-box; }
body { font: 400 1rem/1.6 "Libre Franklin", "Helvetica Neue", Arial, sans-serif; }
a { color: inherit; text-underline-offset: 5px; }
button { color: inherit; font: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--brand-type); outline-offset: 5px; }
[hidden] { display: none !important; }
.shop-header { position: relative; z-index: 10; display: flex; align-items: center; width: max-content; gap: 24px; margin: 16px clamp(20px,4vw,64px) 0; }
main { max-width: 1600px; margin: 0 auto; padding: 48px clamp(20px,4vw,64px) 88px; }

/* The lettering the brand already speaks: Papyrus, stroked, in the live palette ink. */
.papyrus { font-family: Papyrus, fantasy; -webkit-text-stroke: .04em currentColor; }

/* ---- catalogue ---- */
.catalogue { padding-top: 32px; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(0, min(288px, 100%))); gap: 48px 32px; }
.product-card a { display: block; text-decoration: none; }
.catalogue-image { display: block; width: 100%; max-width: 256px; margin-inline: auto; height: auto; aspect-ratio: 1; object-fit: contain; transform-origin: 50% 65%; transition: transform 320ms cubic-bezier(.22,1,.36,1); }
.catalogue-name { display: block; margin: -8px auto 0; width: max-content; padding: 4px 10px 6px; color: var(--shop-ink, var(--burst-red)); font: 26px/1 Papyrus, fantasy; -webkit-text-stroke: .04em currentColor; transform: rotate(-4deg); transition: transform 320ms cubic-bezier(.22,1,.36,1); }
@media (hover: hover) and (pointer: fine) {
  .product-card a:hover .catalogue-image { transform: translateY(-4px) rotate(-5deg) scale(1.06); }
  .product-card a:hover .catalogue-name { transform: rotate(-1deg) translateY(2px); }
}

/* ---- product ---- */
.product { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(300px,1fr); gap: clamp(32px,5vw,80px); align-items: center; }
.gallery, .product-copy { min-width: 0; }
.gallery { position: relative; }   /* the speech bubble is positioned against the gallery, outside the faded stage */
.cap-turn { display: block; position: relative; width: 100%; height: min(60svh,680px); padding: 0; border: 0; background: none; cursor: pointer; overflow: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; touch-action: manipulation;   /* clip to the masked box so far-off hands never widen the page */
  /* Headroom above and below for hands coming from twelve and six; the box grows, the layout does not. */
  box-sizing: content-box; padding: 11% 0; margin: -11% 0;   /* the box comes out roughly square */
  /* Every edge fades to nothing, so the hands materialise on the way in and dissolve on the way out. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
  mask-composite: intersect; }
.face { position: absolute; left: 0; right: 0; top: 11%; height: min(60svh,680px); display: block; width: 100%; object-fit: contain; transform-origin: 50% 58%; will-change: transform, opacity; }
/* Back cutout is taller (921px vs 824px): shrink it so both faces sit at the same visual size and centre. */
.face-back { --fit: translateY(2.15%) scale(.895); transform: var(--fit); }
.face-front { --fit: none; }
.cap-turn[data-view="front"] .face-back, .cap-turn[data-view="back"] .face-front { opacity: 0; }
/* The hands that turn it over: Michelangelo's, public domain. Parked off-stage until a flick. */
.hand { position: absolute; top: 50%; width: 62%; height: auto; pointer-events: none; opacity: 0; will-change: transform; filter: drop-shadow(0 18px 22px #00000066); }
/* the parked originals are templates; live clones are appended per poke and removed when done */
/* Parked just off each edge; a poke brings them in to the cap and back out. */
.hand-god { right: -70%; transform: translateY(-45%); }
.hand-adam { left: -40%; width: 34%; transform: translateY(-30%); }
.hand-live { transform-origin: 50% 50%; }
/* ---- wear, tear, and the Virgin ---- */
/* Damage 0..1 drives the cap's condition: colour drains, contrast goes brittle. */
.cap-turn { --dmg: 0; }
.face { filter: saturate(calc(1 - var(--dmg) * .55)) contrast(calc(1 + var(--dmg) * .35)) sepia(calc(var(--dmg) * .35)); }
/* Broken: the real faces are gone; the two halves are clones animated by shop.js. */
.cap-turn[data-broken] .face { opacity: 0 !important; }
.shard { position: absolute; left: 0; right: 0; top: 11%; height: min(60svh,680px); width: 100%; object-fit: contain; pointer-events: none; transform-origin: 50% 58%; animation: shard-fall 1100ms cubic-bezier(.5, 0, .8, .4) both; }
@keyframes shard-fall {
  0%   { transform: var(--fit, translate(0,0)) translate(0, 0) rotate(0deg); opacity: 1; }
  25%  { transform: var(--fit, translate(0,0)) translate(calc(var(--d) * 6%), 3%) rotate(calc(var(--d) * 6deg)); opacity: 1; }
  100% { transform: var(--fit, translate(0,0)) translate(calc(var(--d) * 22%), 70%) rotate(calc(var(--d) * 32deg)); opacity: 0; }
}
/* Mary rises from below, hands clasped, and says her piece. */
.mary { position: absolute; left: 50%; bottom: -4%; height: 78%; width: auto; transform: translate(-50%, 110%); opacity: 0; pointer-events: none; filter: drop-shadow(0 24px 30px #00000088); will-change: transform; transition: transform 1400ms cubic-bezier(.22, 1, .36, 1), opacity 600ms; }
.mary.up { transform: translate(-50%, 0); opacity: 1; }
.mary.down { transform: translate(-50%, 110%); opacity: 0; transition: transform 900ms cubic-bezier(.4, 0, 1, 1), opacity 700ms 200ms; }
/* the replacement cap arrives */
.face.reborn { animation: reborn 700ms cubic-bezier(.22,1,.36,1) both; }
@keyframes reborn { from { opacity: 0; transform: var(--fit, translate(0,0)) scale(.94); } to { opacity: 1; transform: var(--fit, translate(0,0)) scale(1); } }
/* Her line, in the same ink cloud as the Shop: palette ink, paper lettering, soft edge. Three short lines fit the cloud's shape. */
.mary-says { position: absolute; left: 52%; top: 1%; z-index: 2; margin: 0; width: 230px; padding: 46px 30px 48px; box-sizing: border-box; color: var(--shop-paper, var(--brand-paper)); font: 22px/1.08 Papyrus, fantasy; -webkit-text-stroke: .06em currentColor; text-align: center; white-space: nowrap; transform: rotate(4deg); isolation: isolate; }
.mary-says::before { content: ""; position: absolute; inset: -10% -14%; z-index: -1; background: var(--shop-ink, var(--burst-red)); -webkit-mask: url("shop-stamp.svg") center / 100% 100% no-repeat; mask: url("shop-stamp.svg") center / 100% 100% no-repeat; }
.mary-says.show { animation: says-in 380ms cubic-bezier(.34,1.4,.64,1) both; }
@keyframes says-in { from { opacity: 0; transform: rotate(4deg) scale(.6); } to { opacity: 1; transform: rotate(4deg) scale(1); } }
.gallery-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; padding-right: 6px; }
.turn-hint { margin: 0; padding: 10px 8px; min-height: 44px; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; color: var(--shop-ink, var(--burst-red)); font: 24px/1 Papyrus, fantasy; -webkit-text-stroke: .04em currentColor; transform: rotate(-3deg); transition: transform 200ms cubic-bezier(.22,1,.36,1); }
.turn-hint:hover { transform: rotate(-1deg) translateX(3px); }
.turn-hint:hover .turn-arrow { animation: none; transform: translateX(5px); }
.turn-arrow { display: inline-block; margin-right: 2px; transition: transform 300ms cubic-bezier(.22,1,.36,1); animation: hint-spin 5s ease-in-out infinite; }
@keyframes hint-spin { 0%, 70%, 100% { transform: translateX(0); } 76%, 88% { transform: translateX(6px); } 82% { transform: translateX(0); } }

/* ---- foil card ---- */
.foil {
  --mx: 50%; --my: 45%; --rx: 0deg; --ry: 0deg;
  position: relative; isolation: isolate; overflow: hidden;
  width: 100%; margin: 0 0 48px; padding: 30px 32px 28px; text-align: center;
  border-radius: 10px;
  color: #17161a;
  transform: rotate(-2.5deg) perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 260ms ease-out;
  box-shadow: 0 1px 0 #ffffff70 inset, 0 -1px 0 #00000030 inset, 0 18px 40px -18px #000000cc, 0 2px 6px #00000060;
  background:
    /* brushed hairlines */
    repeating-linear-gradient(112deg, #ffffff00 0 2px, #ffffff2e 2px 3px, #00000018 3px 4px),
    /* silver bands */
    linear-gradient(118deg, #a9acb6 0%, #e4e6eb 14%, #8c9099 28%, #f2f3f6 42%, #9599a3 56%, #d8dae0 70%, #7f838d 84%, #cfd1d7 100%);
  background-size: 100% 100%, 260% 100%;
  background-position: 0 0, calc(var(--mx) * 1.6) 0;
}
/* Oil-slick rainbow, sliding with the pointer and drifting on its own. */
.foil::before {
  content: ""; position: absolute; inset: -30%; z-index: 0; pointer-events: none;
  background: conic-gradient(from 200deg at var(--mx) var(--my),
    #ff5c7a, #ffb457, #f6ff7a, #7dffb0, #6cd6ff, #9b7bff, #ff6cf2, #ff5c7a);
  filter: blur(22px) saturate(1.3);
  opacity: .55; mix-blend-mode: soft-light;
  animation: foil-drift 9s ease-in-out infinite alternate;
}
/* Hard specular streak where the light catches. */
.foil-shine {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 80% at var(--mx) var(--my), #ffffffcc, #ffffff00 60%),
    linear-gradient(115deg, #ffffff00 38%, #ffffffb0 49%, #ffffff00 60%);
  background-size: 100% 100%, 300% 100%;
  background-position: 0 0, calc(var(--mx) * 1.8) 0;
  mix-blend-mode: overlay;
  opacity: .9;
}
/* Paper grain gives the foil a printed feel rather than a screen gradient. */
.foil::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: var(--brand-grain); opacity: .5; mix-blend-mode: multiply;
}
.foil.held::before { animation-play-state: paused; }
@keyframes foil-drift { from { transform: rotate(-4deg) translateX(-6%); } to { transform: rotate(6deg) translateX(6%); } }
.foil h1 {
  /* Papyrus carries its glyphs high in the em box; drop them to the optical centre. */
  position: relative; top: .25em; z-index: 3; margin: 0;
  font: 400 clamp(3rem, 2.4rem + 3vw, 5.5rem)/.92 Papyrus, fantasy;
  letter-spacing: -.01em; white-space: nowrap;
  -webkit-text-stroke: .065em currentColor;
  /* Pressed into the metal: the glyphs are a translucent dark floor, so the foil shows through. */
  color: #00000099;
}
/* Light lip below the cut, dark shadow inside its top edge: both are copies of the text sitting behind it. */
.foil h1::before, .foil h1::after { content: attr(data-text); position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.foil h1::before { color: #ffffffb3; transform: translateY(.03em); }
.foil h1::after { color: #00000073; transform: translateY(-.02em); filter: blur(.6px); }

/* The four words, as stitched on the back: two columns, "spiritual" circled, centred under the card. */
.fourfold {
  display: grid; grid-template-columns: max-content max-content; gap: 20px 60px; justify-content: center;
  list-style: none; margin: 0 0 40px; padding: 0;
  color: var(--shop-ink, var(--burst-red)); font: 28px/1.2 Papyrus, fantasy; -webkit-text-stroke: .04em currentColor;
}
.fourfold li { position: relative; justify-self: center; padding: 4px 8px; text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .14em; }
.fourfold li:nth-child(1) { transform: rotate(-2deg); }
.fourfold li:nth-child(2) { transform: rotate(1.5deg); }
.fourfold li:nth-child(4) { transform: rotate(-1.5deg); }
.fourfold li.circled { padding: 4px 14px; text-decoration: none; transform: rotate(-3deg); }
.fourfold li.circled::before { content: ""; position: absolute; inset: -2px -4px; border: .08em solid currentColor; border-radius: 50%; }
.description { max-width: 42ch; margin: 0 auto 36px; padding: 0; text-align: center; }
.description p { margin: 0 0 16px; }
.description .spec { font-size: .9rem; opacity: .78; }
/* ---- ordering ---- */
.purchase { display: flex; align-items: center; gap: 12px; margin: 0; }
#product-price { font-size: 28px; margin: 0 0 8px; }
/* A small cart, present but inert. Shakes its head and explains when tried. */
.buy { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: inherit; text-decoration: none; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: opacity 160ms, transform 220ms cubic-bezier(.22,1,.36,1); }
.buy.live { border: 1px solid currentColor; }
.buy.live:hover { background: var(--brand-type); color: var(--brand-paper); }
.buy[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.buy[aria-disabled="true"]:hover { opacity: 1; transform: rotate(-8deg) translateY(-2px); }
.cart { display: block; }
.buy.shake { animation: buy-shake 460ms cubic-bezier(.36,.07,.19,.97); }
@keyframes buy-shake { 10%, 90% { transform: translateX(-2px) rotate(-3deg); } 20%, 80% { transform: translateX(4px) rotate(3deg); } 30%, 50%, 70% { transform: translateX(-7px) rotate(-6deg); } 40%, 60% { transform: translateX(7px) rotate(6deg); } }
.buy-note { margin: 0; color: var(--shop-ink, var(--burst-red)); font: 20px/1 Papyrus, fantasy; -webkit-text-stroke: .04em currentColor; transform: rotate(-2deg); white-space: nowrap; }
.buy-note.show { animation: note-in 420ms cubic-bezier(.22,1,.36,1) both; }
@keyframes note-in { from { opacity: 0; transform: rotate(-2deg) translateY(6px) scale(.94); } to { opacity: 1; transform: rotate(-2deg); } }
/* Pressed into the foil: dark ink sunk below a light rim, low contrast, tucked in the corner. */
.foil-stamp { position: absolute; right: 22px; top: 13px; z-index: 3;
  color: #00000066; font: 13px/1 Papyrus, fantasy; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  text-shadow: 0 1px 0 #ffffffb3, 0 -1px 0 #00000059;
  transform: rotate(-2deg); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .catalogue-image, .catalogue-name, .foil { transition: none; }
  .product-card a:hover .catalogue-image, .product-card a:hover .catalogue-name { transform: none; }
  .foil::before, .turn-arrow { animation: none; }
  .buy, .turn-hint, .turn-arrow { transition: none; }
  .turn-hint:hover { transform: rotate(-3deg); }
  .buy[aria-disabled="true"]:hover { transform: none; }
  .buy.shake, .buy-note.show, .mary-says.show, .shard, .face.reborn { animation: none; }
  .mary { transition: none; }
}
@media (max-width: 760px) {
  main { padding-top: 24px; padding-bottom: 40px; }
  .product { grid-template-columns: 1fr; gap: 28px; }
  .cap-turn { height: auto; aspect-ratio: 1 / 1.12; padding: 0; margin: 0; }
  .face, .shard { top: 8%; height: 84%; }
  .mary-says { font-size: 16px; left: 46%; top: 0; width: 170px; padding: 34px 20px 36px; }
  .gallery-footer { margin-top: 0; padding: 0 4px; }
  .turn-hint { font-size: 21px; }
  .buy { width: 44px; height: 44px; } .cart { width: 28px; height: 28px; }
  .buy-note { font-size: 17px; }
  .foil { padding: 26px 20px 18px; margin-bottom: 26px; }
  .foil h1 { font-size: clamp(2.2rem, 11.5vw, 3.4rem); white-space: normal; }
  .foil-stamp { right: 14px; top: 9px; font-size: 10px; }
  .fourfold { font-size: 21px; gap: 10px 28px; margin-bottom: 24px; }
  .description { max-width: 36ch; margin-bottom: 0; font-size: 15px; }
  .description p { margin-bottom: 10px; }
  .description .spec { font-size: 13px; }
}
@media (max-width: 760px) {
  .product-grid { justify-content: center; }
}
@media (max-width: 600px) {
  .shop-header { top: 12px; gap: 12px; margin-top: 12px; }
  .turn-hint { font-size: 21px; }
}