/* Quiet, tactile movement. The original art and category identities stay intact. */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--scroll-progress:0}
body{overflow-x:clip;background-image:url('/assets/background-stars.svg');background-size:1280px 1100px;background-position:center top;background-repeat:repeat}
@media(max-width:760px){body{background-size:760px 653px}}
body:before{content:'';position:fixed;inset:0 0 auto;height:3px;background:#d9aa5d;transform:scaleX(var(--scroll-progress));transform-origin:left;z-index:50;pointer-events:none}
.header{position:relative;z-index:10;box-shadow:0 12px 36px #4a152510}
.header nav a,.footer-links a{position:relative}
.header nav a:after,.footer-links a:after{content:'';position:absolute;left:0;bottom:-5px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out)}
.header nav a:hover:after,.footer-links a:hover:after{transform:scaleX(1)}
.hero{position:relative;min-height:490px;padding-block:74px 70px;gap:44px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.hero:before{content:'';position:absolute;inset:10px 0 -30px 35%;background:radial-gradient(ellipse at center,#e7c6a328,transparent 68%);z-index:-1;pointer-events:none}
.hero-text{position:relative}
.hero-eyebrow{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:1.3px;color:#93733e;margin:0 0 24px;line-height:1.7}
.hero-eyebrow:before{content:'✦';font-size:22px;color:#bd9047}
.hero h1{font-size:clamp(60px,6.2vw,86px);margin-bottom:20px}
.hero-text>h2{font-size:clamp(24px,2.5vw,34px);line-height:1.65;margin-bottom:28px}
.hero .primary{border-radius:100px;min-height:56px;gap:28px;padding:17px 25px;box-shadow:0 8px 22px #681f3512;position:relative;overflow:hidden}
.primary,.buy,.store-button,.social-links a{transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),background .3s,color .3s}
.primary:hover{box-shadow:0 12px 25px #681f352b;transform:translateY(-3px)}
.primary span,.buy span{transition:transform .4s var(--ease-out)}
.primary:hover span,.buy:hover span{transform:translate(3px,-3px)}
.primary:active,.buy:active,.store-button:active{transform:scale(.97)}
.category-showcase{position:relative;max-width:690px;padding:35px 0;isolation:isolate}
.category-showcase:before{content:'';position:absolute;inset:1% 12%;border:1px solid #c99b4b33;border-radius:50%;transform:rotate(-16deg);pointer-events:none;z-index:-1}
.category-showcase:after{content:'✦';position:absolute;right:13%;top:0;color:#c79b50;font-size:30px;pointer-events:none}
.category-grid{gap:10px;padding:24px 0;perspective:1000px;align-items:center}
.category-grid .category-card{flex:1 1 0;width:0;min-width:0;margin:0!important;padding:18px 9px 13px;border-radius:65px 65px 20px 20px;background:#fffcf7;box-shadow:0 15px 34px #5830220d;gap:17px;transform:perspective(700px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out),border-color .4s}
.category-grid .category-card:nth-child(2){margin-top:42px!important}
.category-grid .category-card:nth-child(3){margin-top:-22px!important}
.category-grid .category-card:nth-child(4){margin-top:30px!important}
.category-grid .category-card:hover{z-index:7;transform:perspective(700px) translateY(-9px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));box-shadow:0 23px 40px rgba(var(--category-color),.18);border-color:rgba(var(--category-color),.4)}
.category-grid .category-illustration{padding:0;border:0;overflow:visible}
.category-illustration:before{inset:0;background:rgba(var(--category-color),.055)}
.category-grid .category-illustration img{animation:art-drift 6s ease-in-out infinite;animation-play-state:paused;transform-origin:50% 65%}
.category-card:nth-child(2) img{animation-delay:-1.5s}.category-card:nth-child(3) img{animation-delay:-3s}.category-card:nth-child(4) img{animation-delay:-4.5s}
.in-view .category-illustration img{animation-play-state:running}
.category-grid .category-label{font-family:MedashenWordmark,Arial,sans-serif;font-weight:400;font-size:clamp(10px,1.1vw,14px);gap:2px;justify-content:center;white-space:nowrap;letter-spacing:0}
.category-grid .category-arrow{display:none}
.collection{padding-block:30px 65px}
.collection-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:980px;margin:0 auto 28px;padding-top:25px;border-top:1px solid #681f351a}
.collection-heading h2{font-family:MedashenWordmark,Arial,sans-serif;font-weight:400;color:#681f35;font-size:29px;line-height:1.5;margin:0}
.collection-heading>span{color:#9e8252;font-size:12px;white-space:nowrap;letter-spacing:2px}
#product-grid{max-width:980px;gap:28px}
.product{animation:none}
.product .art{height:225px;border-radius:24px;background:radial-gradient(circle at var(--light-x,50%) var(--light-y,40%),#fffcf6a6,transparent 70%),#f0e7df;border-color:#e4d8cd;transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out)}
.product[data-id=heads] .art{background:radial-gradient(circle at var(--light-x,50%) var(--light-y,40%),#ffffff80,transparent 70%),#eee8ed}
.product[data-id=kings] .art{background:radial-gradient(circle at var(--light-x,50%) var(--light-y,40%),#fffcf680,transparent 70%),#eee6d7}
.product .art:after{content:'✦';position:absolute;right:17px;top:14px;color:#a68a5866;font-size:19px;transition:transform .7s var(--ease-out)}
.product:hover .art{box-shadow:0 20px 32px #58302214}
.product:hover .art:after{transform:rotate(90deg)}
.product .art img{transition:transform .7s var(--ease-out)}
.product-info{padding:19px 3px 0}.product h3{font-size:26px}
.product-bottom{padding-top:15px}.buy{border-radius:100px;padding:11px 16px;gap:18px}
.together{border:1px solid #e7d5cb;border-radius:28px;background:#f0e4dd;position:relative;padding:32px 40px;margin-bottom:30px;isolation:isolate}
.together:before{content:'';position:absolute;width:310px;height:310px;right:-70px;top:-100px;border:1px solid #b18a4b33;border-radius:50%;z-index:-1}
.together:after{content:'✦';position:absolute;right:48%;bottom:20px;color:#b79050;font-size:24px}
.together h2{font-size:35px}.together-art{height:240px}
.together-art img{height:240px;animation:together-drift 8s ease-in-out infinite;animation-play-state:paused}
.together.in-view img{animation-play-state:running}
.app-banner{position:relative;overflow:hidden;isolation:isolate;border-radius:28px;padding:40px;margin-bottom:64px;background:#681f35}
.app-banner:before{content:'';position:absolute;width:430px;height:430px;border:1px solid #f0cf8e30;border-radius:50%;left:-150px;top:-260px;z-index:-1}
.app-banner:after{content:'✦';position:absolute;right:38%;bottom:-32px;color:#eac37e1c;font-size:145px;z-index:-1}
.app-banner h2{font-family:MedashenWordmark,Arial,sans-serif;font-size:26px;max-width:400px}
.store-button:hover{box-shadow:0 8px 20px #30141a1f;transform:translateY(-4px)}
.reveal-ready{opacity:0;transform:translateY(25px);transition:opacity .8s var(--ease-out) var(--reveal-delay,0ms),transform .8s var(--ease-out) var(--reveal-delay,0ms)}
.reveal-ready.is-visible{opacity:1;transform:none}
.hero-text.in-view>.hero-eyebrow,.hero-text.in-view>h1,.hero-text.in-view>h2,.hero-text.in-view>.primary{animation:soft-enter .9s var(--ease-out) backwards}
.hero-text.in-view>h1{animation-delay:.07s}.hero-text.in-view>h2{animation-delay:.14s}.hero-text.in-view>.primary{animation-delay:.21s}
.motion-control{position:fixed;right:20px;bottom:20px;z-index:20;width:44px;height:44px;border:1px solid #681f3526;border-radius:50%;color:#681f35;background:#fffcf4ed;box-shadow:0 5px 20px #3813210d;display:grid;place-items:center;backdrop-filter:blur(12px);transition:background .3s}
.motion-control:hover{background:#eee2d7}.motion-control svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.motion-control:disabled{opacity:.5;cursor:default}
@keyframes art-drift{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(2deg)}}
@keyframes together-drift{0%,100%{transform:perspective(900px) rotateX(2deg) rotateY(-5deg) rotateZ(-2deg) scale(1.15)}50%{transform:perspective(900px) rotateX(-2deg) rotateY(5deg) rotateZ(2deg) scale(1.15) translateY(-4px)}}
@keyframes soft-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(min-width:1500px){.hero{min-height:570px}}
@media(max-width:1050px) and (min-width:761px){.hero{gap:25px;padding-block:55px;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}.hero h1{font-size:57px}.hero-text>h2{font-size:26px}.category-grid{gap:7px}.category-grid .category-card{padding-inline:6px}.category-grid .category-label{font-size:10px}}
@media(max-width:760px){.hero{grid-template-columns:1fr;padding-block:42px 30px;gap:30px}.hero-eyebrow{justify-content:center;font-size:10px;margin-bottom:20px}.hero h1{font-size:clamp(50px,12vw,76px);margin-bottom:14px}.hero-text>h2{font-size:26px;max-width:450px;margin-bottom:24px}.category-showcase{max-width:540px;padding:15px 0}.category-grid{gap:8px;padding-block:18px}.category-grid .category-card{padding:14px 7px 12px;border-radius:50px 50px 17px 17px;gap:14px}.category-grid .category-label{font-size:clamp(10px,2.3vw,14px)}.category-grid .category-card:nth-child(2){margin-top:25px!important}.category-grid .category-card:nth-child(3){margin-top:-12px!important}.category-grid .category-card:nth-child(4){margin-top:20px!important}.category-showcase:after{font-size:24px}.collection{padding-block:20px 40px}.collection-heading{margin-bottom:22px;padding-top:20px;gap:10px}.collection-heading h2{font-size:24px}.collection-heading>span{font-size:10px;letter-spacing:1px}#product-grid{gap:26px 16px}.product .art{height:180px;border-radius:20px}.product h3{font-size:23px}.buy{padding:10px 13px;gap:14px}.together{padding:25px;border-radius:24px;gap:10px}.together h2{font-size:26px}.together-art,.together-art img{height:190px}.app-banner{padding:28px;border-radius:24px;gap:24px;margin-bottom:40px}.app-banner h2{font-size:24px}.app-banner .store-buttons{flex-direction:row}.app-banner .store-button{min-height:55px}.motion-control{right:12px;bottom:12px}footer{padding-bottom:70px}}
@media(max-width:400px){.hero{padding-top:34px;gap:24px}.hero-text>h2{font-size:23px}.category-grid{gap:5px}.category-grid .category-card{padding:11px 4px 10px;gap:12px}.category-grid .category-label{font-size:9px}.category-showcase:before{inset:0 8%}.collection-heading h2{font-size:21px}.collection-heading>span{font-size:9px}.product .art{height:155px;border-radius:17px}.product h3{font-size:21px}.together{grid-template-columns:1fr;padding:25px 20px 15px}.together h2{font-size:26px}.together-art,.together-art img{height:185px}.together:after{right:15px;bottom:15px}.app-banner{padding:25px 20px}.app-banner .store-button{padding:10px 9px;gap:6px}.app-banner .store-button strong{font-size:14px}}
html[data-motion=off] *,html[data-motion=off] *:before,html[data-motion=off] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-motion=off]{scroll-behavior:auto}
html[data-motion=off] .reveal-ready{opacity:1;transform:none}
html[data-motion=off] [data-tilt],html[data-motion=off] .category-card:hover{transform:none}
.page-hidden *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal-ready{opacity:1;transform:none}*,*:before,*:after{animation:none!important;transition:none!important}}

@media(max-width:760px){.product h3{min-height:65px}}

/* Keep the intact illustration comfortably sized within its original panel. */
.together .together-art{overflow:visible}
.together .together-art img{width:320px;height:320px;max-width:none;flex-shrink:0}
@media(max-width:760px){.together .together-art img{width:250px;height:250px}}
@media(max-width:400px){.together .together-art img{width:240px;height:240px}}

/* Enlarge the four cards visually without changing either grid column or hero height. */
@media(min-width:761px){.category-grid .category-card{scale:1.22}}
/* Category cards as a fanned hand of playing cards, dealt from a stack when the hero first appears. */
.category-grid .category-card{--i:0;--fan-rot:0deg;--fan-y:0px;aspect-ratio:5/7;justify-content:center;border-radius:14px;border:1px solid rgba(var(--category-color),.3);background:#fffcf7;box-shadow:0 14px 30px #3a141f1f,0 2px 5px #3a141f14;rotate:var(--fan-rot);translate:0 var(--fan-y);transform-origin:50% 115%;padding:26px 12px 18px}
.category-grid .category-card:before{content:'';position:absolute;inset:6px;border:1px solid rgba(var(--category-color),.22);border-radius:9px;pointer-events:none}
.category-grid .category-card:nth-child(n){margin-top:0!important}
.category-grid .category-card+.category-card{margin-left:-5%!important}
.category-grid .category-card:nth-child(1){--i:0;--fan-rot:-11deg;--fan-y:22px;z-index:1}
.category-grid .category-card:nth-child(2){--i:1;--fan-rot:-4deg;--fan-y:3px;z-index:2}
.category-grid .category-card:nth-child(3){--i:2;--fan-rot:4deg;--fan-y:3px;z-index:3}
.category-grid .category-card:nth-child(4){--i:3;--fan-rot:11deg;--fan-y:22px;z-index:4}
.category-grid .category-card:hover{z-index:7}
.card-corner{position:absolute;z-index:1;font-size:clamp(12px,1.3vw,17px);line-height:1;color:rgb(var(--category-color));pointer-events:none}
.card-corner.top{top:11px;left:11px}
.card-corner.bottom{bottom:11px;right:11px;rotate:180deg}
.category-grid .category-label{margin-top:6px}
@keyframes deck-in{from{opacity:0;transform:translateY(16px)}}
@keyframes deal{from{translate:calc((1.5 - var(--i)) * 95%) -14px;rotate:calc((var(--i) - 1.5) * 1.5deg)}}
@keyframes deck-fallback{to{opacity:1}}
/* If the visibility observer never fires, show the cards anyway after a moment. */
html[data-motion=on] .category-showcase:not(.is-visible) .category-grid{opacity:0;animation:deck-fallback 0s 2.5s forwards}
html[data-motion=on] .category-showcase.is-visible .category-grid{animation:deck-in .35s ease-out both}
html[data-motion=on] .category-showcase.is-visible .category-card{animation:deal .7s cubic-bezier(.2,.75,.2,1) backwards;animation-delay:calc(.45s + var(--i) * .16s)}
@media(max-width:760px){.category-grid .category-card{border-radius:11px;padding:16px 6px 12px}.category-grid .category-card:before{inset:4px;border-radius:8px}.card-corner{font-size:11px}.card-corner.top{top:8px;left:8px}.card-corner.bottom{bottom:8px;right:8px}.category-grid .category-card:nth-child(1),.category-grid .category-card:nth-child(4){--fan-y:14px}}
/* Tapping a card flips it to a question from the app. */
.category-grid .category-card{cursor:pointer;transform-style:preserve-3d;transform:perspective(700px) rotateX(var(--tilt-x,0deg)) rotateY(calc(var(--tilt-y,0deg) + var(--flip,0deg)));transition:transform .7s var(--ease-out),box-shadow .55s var(--ease-out),border-color .4s}
.category-grid .category-card:hover{transform:perspective(700px) translateY(-9px) rotateX(var(--tilt-x,0deg)) rotateY(calc(var(--tilt-y,0deg) + var(--flip,0deg)))}
.category-grid .category-card.flipped{--flip:180deg;z-index:8}
.category-grid .category-card>*{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.category-grid .category-card .card-back{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9%;padding:14% 10%;border-radius:inherit;background:#fff;color:#681f35;border:1px solid #681f3533;text-align:center;transform:rotateY(180deg) translateZ(1px)}
.card-back-label{font-family:MedashenWordmark,Arial,sans-serif;font-size:clamp(9px,.8vw,11px);letter-spacing:.06em;opacity:.7}
.card-question{font-size:clamp(10px,1.05vw,14px);line-height:1.35;font-weight:600}
.card-back-suit{font-size:clamp(13px,1.3vw,18px)}
html[data-theme=dark] .category-grid .category-card .card-back{background:#681f35;color:#fff;border-color:#ffffff26}
html[data-motion=off] .category-grid .category-card.flipped .card-back{transform:none}
html[data-motion=off] .category-grid .category-card.flipped>:not(.card-back){visibility:hidden}
@media(max-width:760px){.category-grid .category-card .card-back{padding:10% 7%;gap:6%}.card-back-label{font-size:7px}.card-question{font-size:clamp(8.5px,2.5vw,11px);line-height:1.3}.card-back-suit{font-size:11px}}
.category-grid .category-card .category-illustration{width:84%;align-self:center}
@media(min-width:761px){.category-grid .category-card{scale:1.08}.category-grid{padding-inline:5%}}
@media(max-width:760px){.category-grid{padding-inline:4%}.category-grid .category-card:nth-child(1){--fan-rot:-8deg}.category-grid .category-card:nth-child(4){--fan-rot:8deg}.hero{overflow-x:clip}}
.card-question{font-family:MedashenWordmark,Arial,sans-serif;font-weight:400;letter-spacing:0}
/* Phrases floating around the card fan. */
.category-showcase{padding-block:62px}
.card-whisper{position:absolute;z-index:0;font-family:MedashenWordmark,Arial,sans-serif;font-size:13px;line-height:1.3;color:#9b7a45;white-space:nowrap;pointer-events:none;rotate:var(--w-rot);animation:whisper-float 6s ease-in-out infinite;animation-delay:var(--w-delay)}
.card-whisper:before{content:'✦ ';color:#c79b50;font-size:.85em}
.whisper-1{top:6px;left:4%;--w-rot:-5deg;--w-delay:0s}
.whisper-2{top:40px;right:1%;--w-rot:4deg;--w-delay:-1.5s}
.whisper-3{bottom:10px;left:8%;--w-rot:3deg;--w-delay:-3s}
.whisper-4{bottom:22px;right:4%;--w-rot:-4deg;--w-delay:-4.5s}
@keyframes whisper-float{50%{translate:0 -5px}}
html[data-theme=dark] .category-showcase .card-whisper{color:#d2a87e}
html[data-motion=off] .card-whisper{animation:none}
@media(max-width:760px){.category-showcase{padding-block:46px}.card-whisper{font-size:11px}.whisper-1{top:2px;left:0}.whisper-2{top:16px;right:0}.whisper-3{bottom:4px;left:2%}.whisper-4{bottom:16px;right:0}}
/* Tablets and phones in landscape: room for the phrases below the fan, larger question text. */
@media(max-width:1023px){.category-showcase{padding-bottom:84px}.whisper-3{bottom:10px}.whisper-4{bottom:30px}}
@media(min-width:761px) and (max-width:1023px){.card-question{font-size:clamp(11px,1.45vw,13px)}.card-back-label{font-size:10px}}
@media(max-width:760px){.category-showcase{padding-bottom:74px}.whisper-3{bottom:4px}.whisper-4{bottom:24px}.card-question{font-size:clamp(9px,2.8vw,12px)}}
@media(max-width:1023px){.category-showcase{padding-bottom:96px}.whisper-3{bottom:44px}.whisper-4{bottom:4px}}
@media(max-width:760px){.category-showcase{padding-bottom:86px}.whisper-3{bottom:40px}.whisper-4{bottom:2px}}
@media(max-width:400px){.category-showcase{padding-top:82px}.whisper-1{top:2px;left:0}.whisper-2{top:40px;right:0}}
/* Smaller phrases; the big corner star would sit on them, so it is dropped. */
.card-whisper{font-size:11px}
.category-showcase:after{display:none}
.category-grid .category-card .category-illustration{width:78%}
.category-grid .category-label{margin-bottom:12px}
@media(max-width:760px){.card-whisper{font-size:9.5px}.category-grid .category-label{margin-bottom:8px}}
@media(max-width:760px){.category-grid .category-label{margin-bottom:16px}.category-grid .category-card .category-illustration{width:74%}}
.category-grid .category-card .card-back{overflow:hidden}.card-question{max-width:100%}
/* On phones and tablet portrait a flipped card grows in place so its question is easy to read. */
@media(max-width:1023px){
.category-grid .category-card.flipped{z-index:20;--fan-rot:0deg;--fan-y:-6px;scale:1.35;box-shadow:0 24px 50px #2a0b1440}
.category-grid .category-card.flipped{transform-origin:50% 50%}
.category-grid .category-card.flipped:nth-child(1){translate:22% -6px}
.category-grid .category-card.flipped:nth-child(4){translate:-22% -6px}
}
@media(max-width:760px){.category-grid .category-card.flipped{scale:1.6}}
@media(max-width:1023px){.category-grid .category-card{transition:transform .7s var(--ease-out),scale .45s var(--ease-out),rotate .45s var(--ease-out),translate .45s var(--ease-out),box-shadow .55s var(--ease-out)}}
/* "Together" card: the dancers stay inside their own column and never cover the heading. */
.together{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:24px;overflow:hidden}
.together .together-art{width:100%;height:auto;min-height:0;aspect-ratio:1;max-height:320px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.together .together-art img{width:84%;height:84%;max-width:84%;object-fit:contain;margin:0}
@media(max-width:600px){.together{grid-template-columns:1fr;gap:4px;padding:22px 18px 12px}.together h2{text-align:center}.together .together-art{max-height:240px;justify-self:center;max-width:260px}}
/* Flip: Safari draws the drifting artwork on its own layer, which ignores the parent's
   backface-visibility, so it showed through the question. Swap faces with visibility at
   the half-turn instead, and stop the drift while a card is flipped. */
.category-grid .category-card>*{transition:visibility 0s linear .22s}
.category-grid .category-card .card-back{visibility:hidden}
.category-grid .category-card.flipped>:not(.card-back){visibility:hidden}
.category-grid .category-card.flipped .card-back{visibility:visible}
.category-grid .category-illustration img{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.category-grid .category-card.flipped .category-illustration img{animation-play-state:paused}
/* A faster turn, and no shadow animation (shadows repaint every frame and made the flip stutter on phones). */
.category-grid .category-card{transition:transform .45s var(--ease-out),scale .35s var(--ease-out),rotate .35s var(--ease-out),translate .35s var(--ease-out);will-change:transform}