/* /shop/shop.css (v1.19.0-shop): the shop page, a port of the kept shop look (grid, cards, type, colours) onto the site's
   tokens. Light on phones (RS176): no animation, no filter, no backdrop-filter, no will-change; content-visibility on cards. */
.shop{--panel:#12131c;--line:#2a2f45;--plate:#d9d4cc}
.shop-in{max-width:1200px;margin:0 auto;padding:0 20px}
.shop h1,.shop h2,.shop h3{font-family:var(--cond);font-weight:900;text-transform:uppercase;letter-spacing:.02em;color:var(--paper);text-wrap:balance}
.s-intro{padding:26px 0 6px}
.s-intro h1{margin:0 0 12px;font-size:clamp(48px,14vw,96px);line-height:.88}
.s-intro p{margin:0 0 6px;max-width:64ch;font-size:16px;line-height:1.5;color:var(--fog)}
.s-intro .lede{color:var(--paper);font-size:18px}
.shop-follow{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;color:var(--gold);font:800 13px var(--mono);text-decoration-thickness:2px;text-underline-offset:4px}
.tag{display:inline-block;font:900 12px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;padding:5px 7px;background:#2a2410;color:var(--gold)}
.tag.cheeky{background:var(--ink);box-shadow:inset 0 0 0 1px var(--gold);color:var(--paper)}
.hero{display:grid;gap:0 32px;margin:18px 0 8px;grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "name" "sub" "shot" "color" "sws" "cta"}
.h-tag{grid-area:tag;margin:0 0 8px}.h-name{grid-area:name;margin:0;font-size:clamp(48px,13vw,84px);line-height:.88}
.h-sub{grid-area:sub;margin:8px 0 14px;color:var(--fog)}
.h-color{grid-area:color;margin:16px 0 10px;font:900 13px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--fog)}
.h-color .cname{color:var(--paper)}
.sws{grid-area:sws;display:flex;gap:10px;flex-wrap:wrap}
.sw{width:44px;height:44px;border-radius:50%;border:2px solid var(--line);padding:0;cursor:pointer}
.sw[aria-pressed=true]{border-color:var(--gold);box-shadow:0 0 0 3px var(--ink),0 0 0 5px var(--gold)}
.sw-black{background:#0b0b0e}.sw-navy{background:#1c2440}.sw-charcoal{background:#3b3d44}.sw-white{background:#f3f3ef}.sw-bone{background:#e4dac7}.sw-gold{background:#d8a21c}
.h-shot{grid-area:shot;margin:0}
.frame{position:relative;overflow:hidden;background:var(--plate);aspect-ratio:3/4}
.frame img{display:block;width:100%;height:100%;object-fit:cover}
.frame img[hidden]{display:none}
.how{margin:8px 0 0;font-size:13px;color:var(--fog)}
.mock{position:absolute;left:10px;top:10px;z-index:1;padding:4px 7px;font:700 11px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;background:rgba(8,9,15,.86);color:var(--paper);border:1px solid var(--gold)}
.h-cta{grid-area:cta;margin-top:20px}
.soon{display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;padding:0 18px;font:900 16px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--fog);background:transparent;border:1px dashed var(--fog)}
.price{margin:8px 0 0;font:900 22px/1 var(--cond);color:var(--gold)}
.pnote{margin:8px 0 0;font-size:13px;color:var(--fog)}
.drop{padding:30px 0 6px;border-top:1px solid var(--rule-ink);margin-top:30px}
.drop h2{margin:0 0 8px;font-size:clamp(34px,9vw,60px);line-height:.92}
.drop .lede{margin:0 0 18px;max-width:70ch;color:var(--fog)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.card{display:flex;flex-direction:column;min-width:0;background:var(--panel);border:1px solid var(--line);content-visibility:auto;contain-intrinsic-size:auto 420px}
.card .shot{order:-1;position:relative;overflow:hidden;background:var(--plate);aspect-ratio:4/5}
.card.wide .shot{aspect-ratio:auto}
.card .shot img{display:block;width:100%;height:100%;object-fit:cover}
.card.wide .shot img{height:auto}
.c-head{padding:10px 10px 0}
.c-tags{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 6px}
.card h3{margin:0;font-size:18px;line-height:1}
.c-sub{margin:6px 0 0;font-size:12px;line-height:1.35;color:var(--fog)}
.c-cta{margin-top:auto;padding:10px}
.card .soon{min-height:44px;font-size:14px}
.fine{margin-top:34px;padding:24px 0 8px;border-top:1px solid var(--rule-ink)}
.fine p{margin:0 0 8px;max-width:80ch;font-size:13px;line-height:1.5;color:var(--fog)}
.fine .last{margin-top:14px;font:900 14px/1.2 var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--paper)}
@media (min-width:600px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.card h3{font-size:20px}.c-sub{font-size:13px}.c-head{padding:12px 14px 0}.c-cta{padding:12px 14px 14px}}
@media (min-width:820px){.hero{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto auto auto auto auto auto 1fr;grid-template-areas:"shot tag" "shot name" "shot sub" "shot color" "shot sws" "shot cta" "shot ."}.h-name{font-size:clamp(56px,6vw,92px)}.h-tag{margin-top:6px}}
@media (min-width:1024px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.shop *{transition:none}}
/* dir-a: the kept page, straight (rounded panels, 1 column on phones) */
.dir-a .card,.dir-a .frame,.dir-a .card .shot{border-radius:14px}.dir-a .card .shot{border-radius:14px 14px 0 0}.dir-a .frame{border-radius:16px}
.dir-a .soon{border-radius:12px;border-style:solid;background:var(--panel)}
@media (max-width:599px){.dir-a .grid{grid-template-columns:1fr}.dir-a .card .soon{min-height:50px}}
/* dir-b: arcade marquee (the site's square house style, a gold token-meter rule, neon rim on the flagship) */
.dir-b .frame{box-shadow:0 0 0 1px var(--gold),0 0 28px rgba(242,183,5,.22)}
.dir-b .h-name{color:var(--gold)}
.dir-b .drop h2{background:linear-gradient(var(--gold),var(--gold)) 0 100%/72px 3px no-repeat;padding-bottom:10px}
.dir-b .card{border-color:var(--steel)}
.dir-b .s-intro h1{background:linear-gradient(90deg,var(--gold) 0 64%,var(--steel) 64%) 0 100%/min(100%,420px) 4px no-repeat;padding-bottom:12px}
/* dir-c: drop board (picture and name side by side on phones, tight 2-up cards) */
@media (max-width:819px){.dir-c .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"tag tag" "name name" "shot sub" "shot color" "shot sws" "cta cta";gap:0 14px}.dir-c .sw{width:36px;height:36px}.dir-c .h-sub{margin-top:14px}}
.dir-c .card{border:0;border-top:3px solid var(--gold)}