/* Studio Objects + weekly artwork preview.
   The palette and type inherit Himma's shop variables. No featured carousel. */
.shop-page #studio-shop .discovery-shelf,
.shop-page #studio-shop .raffle-shelf{
  overflow:visible!important;
  padding-inline:0!important;
  min-width:0;
}

.hd{display:grid;gap:clamp(.7rem,1.2vw,.95rem);min-width:0}
.hd-section{display:grid;gap:1.15rem;min-width:0}
.hd-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(12rem,.72fr);align-items:end;gap:.85rem 2rem}
.hd-heading h2{margin:0;font-family:"EB Garamond",serif;font-size:clamp(2.4rem,4.7vw,4rem);letter-spacing:-.035em;line-height:1.02;font-weight:500;color:var(--mat-ink)}
.hd-kicker{display:block;margin:0 0 .35rem;font:500 .63rem/1.4 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--mat-edge)}
.hd-lead{justify-self:end;max-width:32ch;margin:0;font:.85rem/1.55 var(--ui);color:var(--mat-muted)}

.hd-tabs{display:flex;align-items:center;gap:.5rem;min-width:0;overflow-x:auto;padding:.12rem .08rem .38rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hd-tabs::-webkit-scrollbar{display:none}
.hd-tab{flex:none;min-height:43px;padding:.72rem 1rem;border:1px solid var(--mat-line-soft);border-radius:999px;background:color-mix(in srgb,var(--mat-page) 85%,transparent);color:var(--mat-ink);font:600 .79rem/1.1 var(--ui);white-space:nowrap;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease}
.hd-tab:hover{border-color:var(--mat-edge)}
.hd-tab[aria-selected="true"]{background:var(--mat-ink);border-color:var(--mat-ink);color:var(--mat-page)}
.hd-tab:focus-visible,.hd-finance-toggle:focus-visible,.hr-history-button:focus-visible,.hr-history-close:focus-visible{outline:2px solid var(--mat-edge);outline-offset:3px}

.hd-object-panel{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);min-height:clamp(300px,36vw,405px);overflow:hidden;border:1px solid var(--mat-line-soft);border-radius:24px;background:var(--mat-page);min-width:0}
.hd-object-art{min-height:290px;min-width:0;display:grid;place-items:center;background:color-mix(in srgb,var(--mat-page-alt) 85%,var(--mat-page));padding:clamp(1.25rem,3vw,2.2rem)}
.hd-object-art img{display:block;max-width:100%;max-height:340px;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 13px 18px rgba(0,0,0,.14))}
.hd-object-info{display:grid;gap:.65rem;align-content:center;padding:clamp(1.45rem,4vw,3.1rem)}
.hd-object-state{font:500 .65rem/1.3 var(--ui);text-transform:uppercase;letter-spacing:.14em;color:var(--mat-edge)}
.hd-object-info h3{margin:0;font-family:"EB Garamond",serif;font-weight:500;line-height:1.05;letter-spacing:-.02em;color:var(--mat-ink);font-size:clamp(1.85rem,3.4vw,2.8rem)}
.hd-object-info p{margin:0;font:.86rem/1.62 var(--ui);color:var(--mat-muted);max-width:44ch}
.hd-object-link{justify-self:start;margin-top:.6rem;border-bottom:1px solid currentColor;padding-bottom:.25rem;font:600 .77rem/1.3 var(--ui);color:var(--mat-edge);text-decoration:none}
.hd-object-link:hover{color:var(--mat-ink)}

/* Makers note: one quiet line under the object card, detail behind "Why" */
.hd-makers{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:.4rem .7rem;margin-top:-.35rem;padding:.2rem .3rem;color:var(--mat-muted)}
.hd-makers .ico{color:var(--mat-edge)}
.hd-makers b{font:500 .8rem/1.4 var(--ui);color:var(--mat-muted)}
.hd-makers-toggle{justify-self:start;border:0;background:none;padding:.35rem 0;color:var(--mat-edge);font:600 .76rem/1.3 var(--ui);cursor:pointer}
.hd-makers-toggle:hover{color:var(--mat-ink)}
.hd-makers-toggle:focus-visible{outline:2px solid var(--mat-edge);outline-offset:3px}
.hd-makers-note{grid-column:2/-1;margin:0;max-width:62ch;font:.76rem/1.55 var(--ui);color:var(--mat-muted)}
.hd-makers-note[hidden]{display:none}
@media(max-width:640px){
  .hd-makers{grid-template-columns:auto minmax(0,1fr);margin-top:0}
  .hd-makers-toggle{grid-column:2;justify-self:start;padding:0}
}

.hd-finance{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:.75rem 1rem;
  align-items:center;
  padding:clamp(.8rem,1.7vw,1.05rem);
  border:1px solid color-mix(in srgb,#ffb3c7 72%,var(--mat-line-soft));
  border-radius:18px;
  background:color-mix(in srgb,#ffb3c7 42%,var(--mat-page));
  box-shadow:0 10px 24px -22px rgba(11,11,11,.32);
}
.hd-finance-mark{
  flex:none;
  width:42px;
  height:35px;
  display:grid;
  place-items:center;
  border:1px solid #0b0b0b;
  border-radius:8px;
  background:#0b0b0b;
  color:#ffb3c7;
  font:750 .71rem/1 var(--ui);
}
.hd-finance-copy{display:grid;gap:.18rem}
.hd-finance-copy b{font:650 .94rem/1.35 var(--ui);color:#0b0b0b}
.hd-finance-copy>span{font:.77rem/1.45 var(--ui);color:color-mix(in srgb,#0b0b0b 70%,transparent)}
.hd-finance-toggle{
  border:0;
  background:none;
  color:#0b0b0b;
  font:650 .78rem/1.3 var(--ui);
  cursor:pointer;
}
.hd-finance-note{grid-column:2/-1;margin:0;color:color-mix(in srgb,#0b0b0b 72%,transparent);font:.75rem/1.55 var(--ui)}
.hd-finance-note[hidden]{display:none}

.hr{display:grid;gap:clamp(1.15rem,2.5vw,1.8rem);min-width:0}
.hr-head{display:block}
.hr-head h2{margin:0;color:var(--mat-ink);font-family:"EB Garamond",serif;font-size:clamp(2.6rem,5vw,4.7rem);letter-spacing:-.04em;font-weight:500;line-height:1.04}
.hr-current{display:block;min-width:0;overflow:hidden;border:1px solid var(--mat-line-soft);border-radius:25px;background:var(--mat-page);color:var(--mat-ink)}
.hr-current-media{display:block;margin:0;padding:0;width:100%;aspect-ratio:16 / 10;overflow:hidden;background:var(--mat-page-alt)}
.hr-current-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center}
.hr-current-copy{display:grid;gap:.7rem;align-content:start;padding:clamp(1.3rem,3.5vw,2.8rem)}
.hr-current-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.65rem 1.15rem;margin-bottom:.15rem}
.hr-current-meta-label{font:500 .68rem/1.4 var(--ui);letter-spacing:.06em;color:var(--mat-muted)}
.hr-status{display:inline-flex;align-items:center;border:1px solid var(--mat-line);border-radius:999px;padding:.4rem .72rem;color:var(--mat-edge);font:600 .6rem/1.2 var(--ui);letter-spacing:.12em;text-transform:uppercase}
.hr-current-copy h3{margin:0;color:var(--mat-ink);font-family:"EB Garamond",serif;font-size:clamp(2rem,4.2vw,3.3rem);line-height:1.03;letter-spacing:-.02em;font-weight:500}
.hr-current-copy>p:not(.hr-price){margin:0;color:var(--mat-muted);font:.89rem/1.65 var(--ui);max-width:70ch}
.hr-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:.65rem;margin:.45rem 0 0;font-family:var(--ui)}
.hr-price b{font-size:1.45rem;line-height:1.2;color:var(--mat-ink)}
.hr-price>span{font-size:.74rem;color:var(--mat-muted)}
.hr-current-actions{display:flex;align-items:center;margin-top:.55rem;padding-top:1.1rem;border-top:1px solid var(--mat-line-soft)}
.hr-history-button{border:1px solid var(--mat-line);border-radius:999px;background:var(--mat-ink);color:var(--mat-page);padding:.83rem 1.15rem;font:600 .78rem/1.2 var(--ui);cursor:pointer;transition:opacity .2s ease}
.hr-history-button:hover{opacity:.85}

.hr-history{padding:clamp(1.3rem,2.8vw,2rem);border:1px solid var(--mat-line-soft);border-radius:23px;background:var(--mat-page)}
.hr-history[hidden]{display:none}
.hr-history-head{display:flex;gap:1rem;align-items:end;justify-content:space-between;padding-bottom:1rem;border-bottom:1px solid var(--mat-line-soft)}
.hr-history-head h3{margin:0;font-family:"EB Garamond",serif;font-weight:500;font-size:clamp(1.6rem,3vw,2.2rem)}
.hr-history-close{border:0;background:none;color:var(--mat-edge);font:600 .78rem/1 var(--ui);cursor:pointer}
.hr-history-empty{display:grid;gap:.4rem;padding:1.35rem 0 .2rem}
.hr-history-empty strong{font:600 .89rem/1.3 var(--ui)}
.hr-history-empty p{margin:0;font:.77rem/1.6 var(--ui);color:var(--mat-muted);max-width:60ch}
.hr-detail{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem 2rem;padding:1.1rem 1.3rem;border:1px solid var(--mat-line-soft);border-radius:20px;background:var(--mat-page)}
.hr-detail strong{display:block;margin-bottom:.3rem;font:600 .86rem/1.4 var(--ui)}
.hr-detail p{margin:0;font:.75rem/1.55 var(--ui);color:var(--mat-muted);max-width:76ch}
.hr-detail a{font:600 .75rem/1.4 var(--ui);color:var(--mat-edge)}
.hr-rules{padding-top:.9rem;border-top:1px solid var(--mat-line-soft)}
.hr-rules summary{cursor:pointer;font:600 .78rem/1.4 var(--ui);color:var(--mat-ink)}
.hr-rules div{display:grid;gap:.6rem;padding-top:1rem;max-width:85ch;font:.76rem/1.65 var(--ui);color:var(--mat-muted)}
.hr-rules p{margin:0}

@media(max-width:760px){
  .hd-heading{grid-template-columns:1fr;gap:.5rem}
  .hd-lead{justify-self:start}
  .hd-tab{min-height:42px;font-size:.76rem;padding:.65rem .88rem}
  .hd-object-panel{grid-template-columns:1fr}
  .hd-object-art{min-height:245px;max-height:300px}
  .hd-object-art img{max-height:245px}
  .hd-object-info{padding:1.35rem 1.25rem 1.6rem}
  .hd-finance{grid-template-columns:auto minmax(0,1fr)}
  .hd-finance-toggle{grid-column:2;justify-self:start}
  .hd-finance-note{grid-column:1/-1}
  .hr-current{border-radius:21px}
  .hr-current-media{aspect-ratio:4 / 3}
  .hr-current-copy{padding:1.3rem 1.2rem 1.55rem}
  .hr-detail{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .hd-tab,.hr-history-button{transition:none!important}
}
/* Dedicated weekly draw product-page routes */
.hr-current-media>a{display:block;width:100%;height:100%}
.hr-current-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.35rem}
.hr-history-button{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none!important;min-height:42px}
.hr-history-link{font:600 .79rem/1.5 var(--ui);text-decoration:none!important;border-bottom:1px solid var(--mat-line);padding-block:.4rem}
.hr-shop-note{margin:0;color:var(--mat-muted);font:.72rem/1.5 var(--ui)}


/* Klarna spacing compression: keep the finance strip visually attached to
   Studio Objects and pull the following shelf much closer. */
.shop-page #studio-shop .discovery-shelf{margin-bottom:-2.5rem!important}
@media(max-width:760px){
  .shop-page #studio-shop .discovery-shelf{margin-bottom:-1.8rem!important}
  .hd-finance{grid-template-columns:auto minmax(0,1fr);gap:.65rem .8rem}
  .hd-finance-toggle{grid-column:2;justify-self:start;padding:0}
  .hd-finance-note{grid-column:1/-1}
}
:root[data-theme="dark"] .hd-finance{
  background:color-mix(in srgb,#ffb3c7 72%,#141414);
  border-color:color-mix(in srgb,#ffb3c7 82%,#2a2a2a);
}


/* WEEKLY ARTWORK DRAW · lit stage · 2026-10-07
   Replaces the earlier card-in-card treatment. The section itself is the
   stage: one radiant light behind the artwork, the site's own type
   (EB Garamond headings, --ui labels), and a single purchase bar.
   Everything is scoped to .raffle-shelf; no other section is affected. */
.shop-page #studio-shop .raffle-shelf{
  --wd-top:#0B3C8C; --wd-mid:#1460C8; --wd-deep:#06235E;
  --wd-core:#F4FCFF; --wd-aqua:#9BE9F5; --wd-azure:#4FB8F2; --wd-turq:#2FD1C8; --wd-gold:#F1D79A;
  --wd-on:#FFFFFF; --wd-on-2:rgba(236,247,255,.84); --wd-on-3:rgba(236,247,255,.64); --wd-hair:rgba(255,255,255,.2);
  --wd-cta-bg:#FFFFFF; --wd-cta-fg:#0E1B33; --wd-pill:rgba(255,255,255,.12);
  position:relative;
  margin-block:clamp(2rem,4vw,4rem)!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
}
.raffle-shelf .wd{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:18px;
  padding:clamp(3rem,7vw,5rem) clamp(1.1rem,5vw,3.5rem) clamp(1.8rem,4vw,2.6rem);
  text-align:center;color:var(--wd-on);
  background:linear-gradient(180deg,var(--wd-top) 0%,var(--wd-mid) 46%,var(--wd-deep) 100%);
  box-shadow:0 40px 80px -56px rgba(14,27,51,.7);
}
.raffle-shelf .wd>*{position:relative;z-index:1}
/* the light: one radiant source, colour turning slowly round a bright centre */
.raffle-shelf .wd-light{
  position:absolute;z-index:0;pointer-events:none;aspect-ratio:1;border-radius:50%;
  width:min(130%,900px);left:50%;top:clamp(12rem,26vw,17rem);transform:translateX(-50%);
}
.raffle-shelf .wd-light::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  /* five colours, 72° apart; reading anti-clockwise (the direction it turns):
     yellow → red → white → black → green. Yellow keeps the original gold's place. */
  background:conic-gradient(from 0deg,var(--wd-azure) 0%,#F7FBFF 12%,var(--wd-turq) 22%,#E4473C 32%,var(--wd-aqua) 42%,#F5D547 52%,var(--wd-azure) 62%,#2DAE66 72%,var(--wd-aqua) 82%,#0E1220 92%,var(--wd-azure) 100%);
  filter:blur(56px);opacity:.75;
}
.raffle-shelf .wd-light::after{
  content:"";position:absolute;inset:18%;border-radius:50%;
  background:radial-gradient(circle,var(--wd-core) 0%,color-mix(in srgb,var(--wd-aqua) 70%,transparent) 32%,transparent 70%);
  filter:blur(22px);opacity:.9;
}
.raffle-shelf .wd-current{
  position:absolute;inset:-8%;border-radius:50%;
  background:repeating-radial-gradient(circle,transparent 0 38px,rgba(255,255,255,.05) 40px 41px,transparent 44px 70px);
  -webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%);
}
.raffle-shelf .wd-grain{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.08;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.raffle-shelf .wd-inner{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:.9rem;min-width:0}
/* keep every child inside the card: the photo's natural width must never size the column (iOS Safari) */
.raffle-shelf .wd-inner>*{max-width:100%;min-width:0}

/* type: the shop's own kicker, h2 and lead styles, reversed onto the stage */
.raffle-shelf .wd-eyebrow{display:inline-flex;align-items:center;gap:.6rem;margin:0;color:var(--wd-on-2)!important}
/* the shop tab and this eyebrow share the ticket icon; the lit glow of the old dot sits behind it
   as a soft light, so the gold line itself stays sharp (no blur filter on the icon) */
.raffle-shelf .wd-eyebrow .ico{width:1rem;height:1rem;color:var(--wd-gold);border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--wd-gold) 30%,transparent),transparent)}
.raffle-shelf .wd-title{
  margin:0;max-width:11ch;
  font-family:"EB Garamond",serif;font-weight:500;
  font-size:clamp(2.9rem,7.6vw,5.4rem);line-height:.98;letter-spacing:-.035em;
  color:var(--wd-on);text-wrap:balance;
}
.raffle-shelf .wd-dek{margin:.2rem 0 0;font-family:"EB Garamond",serif;font-weight:500;font-size:clamp(1.35rem,2.6vw,1.75rem);line-height:1.15;letter-spacing:-.01em;color:var(--wd-on)}
.raffle-shelf .wd-lead{margin:0;max-width:46ch;font:.85rem/1.6 var(--ui);color:var(--wd-on-2)}
.raffle-shelf .wd-status{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:.3rem;
  padding:.4rem .78rem;border-radius:999px;border:1px solid var(--wd-hair);
  background:var(--wd-pill);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font:600 .6rem/1.2 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--wd-on);
}
.raffle-shelf .wd-status i{width:6px;height:6px;border-radius:50%;background:var(--wd-turq);box-shadow:0 0 0 3px color-mix(in srgb,var(--wd-turq) 28%,transparent)}

/* the artwork as an object: large, lit from behind, softly reflected */
.raffle-shelf .wd-art{position:relative;margin:clamp(1.4rem,3.5vw,2.4rem) 0 clamp(2.6rem,5vw,3.6rem);width:min(100%,400px);aspect-ratio:4/5}
.raffle-shelf .wd-art>a{display:block;width:100%;height:100%;min-width:0;border-radius:14px}
.raffle-shelf .wd-art img{
  display:block;width:100%;height:100%;max-width:100%;
  object-fit:cover;object-position:50% 60%;border-radius:14px;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 50px 90px -40px rgba(0,10,40,.85),0 0 0 1px rgba(255,255,255,.14);
  -webkit-box-reflect:below 12px linear-gradient(transparent 80%,rgba(255,255,255,.14));
}
.raffle-shelf .wd-art figcaption{position:absolute;left:0;right:0;bottom:-2.6rem;font:500 .6rem/1.4 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--wd-on-3)}

/* purchase bar */
.raffle-shelf .wd-buy{width:min(100%,680px);display:grid;gap:1.5rem;text-align:left}
.raffle-shelf .wd-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border-top:1px solid var(--wd-hair)}
.raffle-shelf .wd-facts>div{display:grid;gap:.25rem;align-content:start;min-width:0;padding:1rem 1rem 0 0}
.raffle-shelf .wd-facts>div+div{padding-left:1rem;border-left:1px solid var(--wd-hair)}
.raffle-shelf .wd-facts dt{font-family:"EB Garamond",serif;font-weight:500;font-size:1.6rem;line-height:1.05;letter-spacing:-.01em;color:var(--wd-on);font-variant-numeric:lining-nums tabular-nums}
.raffle-shelf .wd-facts dd{margin:0;font:.7rem/1.5 var(--ui);color:var(--wd-on-3)}
.raffle-shelf .wd-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.6rem}
.raffle-shelf .wd-cta{
  display:inline-flex;align-items:center;gap:.6rem;min-height:46px;padding:0 1.3rem;border-radius:999px;
  background:var(--wd-cta-bg);color:var(--wd-cta-fg)!important;text-decoration:none!important;
  font:600 .8rem/1 var(--ui);box-shadow:0 14px 30px -16px rgba(0,10,40,.8);transition:transform .2s ease;
}
.raffle-shelf .wd-cta:hover{transform:translateY(-1px)}
.raffle-shelf .wd-prev{font:600 .79rem/1.5 var(--ui);color:var(--wd-on)!important;text-decoration:none!important;border-bottom:1px solid var(--wd-hair);padding-block:.3rem}
.raffle-shelf .wd-prev:hover{border-bottom-color:var(--wd-on)}
.raffle-shelf .wd-cta:focus-visible,.raffle-shelf .wd-prev:focus-visible,.raffle-shelf .wd-art>a:focus-visible{outline:2px solid var(--wd-gold);outline-offset:3px}
.raffle-shelf .wd-legal{margin:.2rem 0 0;max-width:62ch;font:.66rem/1.55 var(--ui);color:var(--wd-on-3)}

@media(max-width:760px){
  .shop-page #studio-shop .raffle-shelf{margin-block:1.5rem!important}
  .raffle-shelf .wd{border-radius:16px}
  .raffle-shelf .wd-art{width:min(100%,320px)}
  .raffle-shelf .wd-facts{grid-template-columns:1fr}
  .raffle-shelf .wd-facts>div,.raffle-shelf .wd-facts>div+div{padding:.9rem 0;border-left:0;border-bottom:1px solid var(--wd-hair)}
  .raffle-shelf .wd-actions{flex-direction:column;align-items:stretch}
  .raffle-shelf .wd-cta{justify-content:center}
  .raffle-shelf .wd-prev{align-self:center}
}
@media(prefers-reduced-motion:no-preference){
  .raffle-shelf .wd-light::before{animation:himmaDrawLight 40s linear infinite}
}
@media(prefers-reduced-motion:reduce){
  .raffle-shelf .wd-cta{transition:none}
}
@keyframes himmaDrawLight{to{transform:rotate(-360deg)}}

/* The category pill takes the same priority signal as Archive, in bright
   ocean blue, but only while the page is at the Weekly Draw shelf; at rest
   and on hover it reads like every other tab. */
.shop-page .cat[href="#raffle"].is-active,
.shop-page .cat[href="#raffle"][aria-current="true"]{
  background:#43C7FF!important;
  border-color:#43C7FF!important;
  color:#03152C!important;
}
:root[data-theme="dark"] .shop-page .cat[href="#raffle"].is-active,
:root[data-theme="dark"] .shop-page .cat[href="#raffle"][aria-current="true"]{
  background:#43C7FF!important;
  border-color:#43C7FF!important;
  color:#03152C!important;
}

/* WEEKLY ARTWORK DRAW · depth · 2026-10-10
   A quiet 3D reading of the lit stage: the artwork stands on a receding floor
   of light, casts a contact shadow, and turns a few degrees toward the
   pointer (or settles as the section scrolls on touch). The light and floor
   sit at different distances, so they drift less than the work. Variables are
   written by shop-discovery.js; at rest and under reduced motion they stay 0
   and the stage is still. Scoped to .raffle-shelf. */
.raffle-shelf .wd{--wd-tx:0;--wd-ty:0;--wd-scroll:0}
.raffle-shelf .wd-light{
  transform:translateX(-50%) translate3d(calc(var(--wd-tx)*-26px),calc(var(--wd-ty)*-18px + var(--wd-scroll)*34px),0);
}
.raffle-shelf .wd-art{perspective:1100px;perspective-origin:50% 35%}
/* the floor: a faint lattice laid flat and receding into the light */
.raffle-shelf .wd-floor{
  position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:97%;width:300%;height:110%;
  transform-origin:50% 0;
  transform:translateX(-50%) translateX(calc(var(--wd-tx)*-12px)) rotateX(76deg);
  background:
    repeating-linear-gradient(90deg,rgba(236,247,255,.42) 0 1px,transparent 1px 40px),
    repeating-linear-gradient(0deg,rgba(236,247,255,.34) 0 1px,transparent 1px 40px),
    radial-gradient(ellipse 30% 46% at 50% 0%,rgba(244,252,255,.38),transparent 72%);
  -webkit-mask:radial-gradient(ellipse 44% 58% at 50% 0%,#000 0%,rgba(0,0,0,.55) 40%,transparent 76%);
  mask:radial-gradient(ellipse 44% 58% at 50% 0%,#000 0%,rgba(0,0,0,.55) 40%,transparent 76%);
  opacity:.7;
}
/* contact shadow where the work meets the floor; it slides against the tilt */
.raffle-shelf .wd-contact{
  position:absolute;z-index:-1;pointer-events:none;
  left:8%;right:8%;top:calc(100% - 22px);height:44px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,12,44,.62) 0%,rgba(0,12,44,.28) 45%,transparent 72%);
  filter:blur(8px);
  transform:translateX(calc(var(--wd-tx)*-14px)) scaleX(calc(1 - var(--wd-ty)*.06));
}
.raffle-shelf .wd-art>a{
  position:relative;
  transform:
    rotateX(calc(var(--wd-scroll)*5deg - var(--wd-ty)*7deg))
    rotateY(calc(var(--wd-tx)*10deg));
}
/* a soft sheen that follows the light across the surface */
.raffle-shelf .wd-glare{
  position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:radial-gradient(circle at calc(50% + var(--wd-tx)*-45%) calc(30% + var(--wd-ty)*-35%),rgba(255,255,255,.22),transparent 55%);
  mix-blend-mode:soft-light;opacity:.55;transition:opacity .9s ease;
}
.raffle-shelf .wd.is-tilting .wd-glare{opacity:1}
.raffle-shelf .wd-art img{
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,0 0 0 1px rgba(255,255,255,.14),
    calc(var(--wd-tx)*-18px) calc(40px + var(--wd-ty)*-10px) 80px -38px rgba(0,10,40,.9);
}
.raffle-shelf .wd-art figcaption{transform:translateZ(0)}
@media(max-width:760px){
  .raffle-shelf .wd-floor{width:380%;top:97%}
  .raffle-shelf .wd-art>a{transform:rotateX(calc(var(--wd-scroll)*6deg))}
}
@media(prefers-reduced-motion:reduce){
  .raffle-shelf .wd-glare{transition:none}
}