/* MARIVO site, v2. Colours and fonts from the Visual Identity guide.
   Look: clean and modern. Soft rounded cards, no outlines, no hard shadows.
   Sections are "sheets" that slide over each other with big rounded tops. */
@font-face{font-family:"Anton";src:url("../fonts/Anton-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Quicksand";src:url("../fonts/Quicksand-VariableFont_wght.ttf") format("truetype");font-weight:300 700;font-display:swap}

:root{
  --paper:#F7F7F6; --ink:#000012; --white:#fff; --soft:#f1f0eb; --line:#dddbd3; --muted:#55556a;
  --pink:#EA5297; --blue:#00B6ED; --green:#75B94E; --orange:#F28A3D; --yellow:#FFCE3A;
  --purple:#352665; --red:#D63E43;
  --display:"Anton","Arial Narrow",Impact,sans-serif;
  --body:"Quicksand","Trebuchet MS",system-ui,sans-serif;
  --gutter:clamp(18px,4vw,48px);
  --max:1180px;
  --rx:clamp(28px,5vw,56px);
  --pad:clamp(72px,10vw,140px);
  --shadow:0 1px 2px rgba(0,0,18,.04),0 22px 44px -26px rgba(0,0,18,.28);
  --ease:cubic-bezier(.2,.8,.2,1);
  --step-w:min(86vw,640px);
}
*,*::before,*::after{box-sizing:border-box}
/* no scroll-behavior:smooth here: it makes the animation library measure the page from the wrong place. The script glides menu links instead. */
html{scroll-padding-top:88px;-webkit-text-size-adjust:100%}
html.is-loading{overflow:hidden}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--purple);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.55;font-weight:500;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 7px var(--paper);border-radius:8px}
.skip{position:absolute;left:-999px;top:8px;background:var(--yellow);color:var(--ink);padding:10px 16px;border-radius:10px;z-index:1100;font-weight:700}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

/* the "keep scrolling" cue: a small pill with a die that tumbles. It never blocks a tap, and it only shows when the page is still. */
.cue{position:fixed;z-index:55;right:14px;bottom:calc(12px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:9px;padding:7px 15px 7px 7px;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:700;font-size:.9rem;line-height:1;white-space:nowrap;pointer-events:none;opacity:0;translate:0 18px;transition:opacity .35s,translate .5s var(--ease)}
.cue.is-on{opacity:1;translate:0 0}
.cue__die{display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:1.5px;width:28px;height:28px;padding:5px;border-radius:8px;background:#F6F0DF}
.cue__die i{border-radius:50%;background:var(--red);opacity:0}
.cue__die i:nth-child(1),.cue__die i:nth-child(5),.cue__die i:nth-child(9){opacity:1}
.cue.is-on .cue__die{animation:cueRoll 2.6s var(--ease) infinite}
.cue.is-on .cue__arrow{animation:cueDown 1.3s ease-in-out infinite}
@keyframes cueRoll{0%,52%{rotate:0deg;translate:0 0}68%{rotate:95deg;translate:0 -6px}84%,100%{rotate:180deg;translate:0 0}}
@keyframes cueDown{50%{translate:0 3px}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 30px;border-radius:999px;border:1.5px solid transparent;font:700 1rem/1 var(--body);text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .2s,color .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px -16px rgba(0,0,18,.55)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:disabled{opacity:.3;pointer-events:none}
.btn--yellow{background:var(--yellow);color:var(--ink)}
.btn--ink{background:var(--ink);color:var(--paper)}
.btn--white{background:var(--white);color:var(--ink)}
.btn--ghost{background:transparent;border-color:currentColor;color:inherit}
.btn--sm{height:44px;padding:0 22px;font-size:.94rem}
.btn--lg{height:64px;padding:0 38px;font-size:1.1rem}

/* the wedding car */
.car{display:block;width:100%;height:auto;overflow:visible}
.car__wheel,.car__cans{transform-box:fill-box;transform-origin:center}
.car__cans{transform-origin:100% 0}
.is-driving .car__wheel{animation:spin .5s linear infinite}
.is-driving .car__body{animation:carbob .42s ease-in-out infinite}
.is-driving .car__cans{animation:cans .28s ease-in-out infinite alternate}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes carbob{50%{transform:translateY(-2px)}}
@keyframes cans{from{transform:rotate(-7deg)}to{transform:rotate(9deg)}}

/* loader: dice land, then the car drives across the board */
.loader{position:fixed;inset:0;z-index:1000;background:var(--purple);color:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;animation:loaderFailsafe .01s 9s forwards}
html:not(.js) .loader,.loader.is-done{display:none}
@keyframes loaderFailsafe{to{visibility:hidden;pointer-events:none}}
.loader__scene{position:relative;width:min(68vw,340px);aspect-ratio:1}
.loader__board{position:absolute;inset:0;width:100%;height:100%;border-radius:4%;transform:perspective(900px) rotateX(48deg);opacity:0}
.loader__dice{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px}
.loader__dice .die{width:84px;height:84px;padding:14px;gap:4px;border-radius:20px;background:#F6F0DF}
.loader__dice .die i{background:var(--red)}
.loader__car{position:absolute;left:50%;top:50%;width:50%;margin:-15% 0 0 -25%;opacity:0}
.loader__pct{margin:0;font:400 clamp(3.4rem,13vw,5.4rem)/1 var(--display);color:var(--yellow);font-variant-numeric:tabular-nums}
.loader__text{margin:0;font-weight:700;font-size:1.05rem;letter-spacing:.02em}

/* nav: a floating pill */
.nav{position:fixed;top:12px;left:0;right:0;z-index:60;width:min(calc(100% - 24px),var(--max));margin-inline:auto;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 18px;border-radius:999px;background:var(--paper);box-shadow:0 10px 30px -14px rgba(0,0,18,.35);transition:transform .5s var(--ease)}
.nav.is-hidden{transform:translateY(-160%)}
.nav__logo{flex:none;display:block}
.nav__logo img{height:40px;width:auto}
/* the logo gives a little jelly wobble when you point at it */
.nav__logo img,.footer__logo{transform-origin:50% 80%}
.nav__logo:hover img,.nav__logo:focus-visible img,.footer a:hover .footer__logo,.footer a:focus-visible .footer__logo{animation:logoJelly .7s var(--ease)}
@keyframes logoJelly{0%{transform:scale(1) rotate(0)}25%{transform:scale(1.14,.88) rotate(-5deg)}50%{transform:scale(.92,1.1) rotate(4deg)}75%{transform:scale(1.05,.97) rotate(-2deg)}100%{transform:scale(1) rotate(0)}}
.nav > nav{margin-inline:auto}
.nav__links{display:flex;gap:2px;margin:0;padding:0;list-style:none}
.nav__links a{display:block;padding:9px 14px;border-radius:999px;font-weight:700;font-size:.94rem;text-decoration:none;transition:background-color .2s}
.nav__links a:hover{background:rgba(0,0,18,.07)}
.nav__buy{flex:none}
.nav__toggle{display:none;flex:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--ink);cursor:pointer;place-items:center}
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{display:block;width:18px;height:2px;background:var(--paper);border-radius:2px;position:relative;content:""}
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{transition:rotate .35s var(--ease),top .35s var(--ease),background-color .2s}
.nav__toggle span::before{position:absolute;top:-6px}.nav__toggle span::after{position:absolute;top:6px}
.nav__toggle[aria-expanded="true"]{background:var(--pink)}
.nav__toggle[aria-expanded="true"] span{background:transparent}
.nav__toggle[aria-expanded="true"] span::before{top:0;rotate:45deg;background:var(--ink)}
.nav__toggle[aria-expanded="true"] span::after{top:0;rotate:-45deg;background:var(--ink)}
.nav__links-buy{display:none}

/* opening: the headline beside the real board. On scroll the board turns flat and rotates one side at a time.
   Without animation (no script, or "reduce motion") this is a plain column: headline, board, the five captions. */
.tour{position:relative;z-index:1;overflow:clip;isolation:isolate;background:var(--purple);color:var(--paper)}
.hero__glow{position:absolute;inset:0;z-index:-1;background:radial-gradient(55% 48% at 80% 14%,rgba(234,82,151,.4),transparent 70%),radial-gradient(46% 44% at 8% 72%,rgba(0,182,237,.3),transparent 70%)}
.tour__stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:32px;padding:clamp(96px,14vh,130px) var(--gutter) calc(64px + var(--rx))}
.hero__inner{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2vh,22px);max-width:640px;text-align:center}
.hero__tag{margin:0;font-weight:700;font-size:clamp(.72rem,1.6vw,.86rem);letter-spacing:.16em;text-transform:uppercase;color:var(--yellow)}
.tour h1{margin:0;font:400 clamp(2.9rem,min(11vw,11.5vh),7.2rem)/.94 var(--display);text-transform:uppercase}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-block:.05em .09em;margin-block:-.05em -.09em}
.w > span{display:inline-block}
.ido{color:var(--yellow)}
.hero__lede{margin:0;max-width:34ch;font-size:clamp(1rem,2.1vw,1.3rem);line-height:1.4;color:rgba(247,247,246,.9)}
.hero__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.facts{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0;margin:0;padding:0;list-style:none;font-weight:700;font-size:clamp(.8rem,1.6vw,.95rem);color:rgba(247,247,246,.8)}
.facts li + li::before{content:"·";margin-inline:10px;color:var(--yellow)}

.board{position:relative;z-index:2;width:min(88vw,520px);aspect-ratio:1;perspective:1500px}
.board__tilt{width:100%;height:100%;will-change:transform}
.board__img{width:100%;height:100%;border-radius:3%;box-shadow:0 50px 80px -34px rgba(0,0,0,.7)}
.board__piece{display:none;position:absolute;z-index:2;left:0;bottom:-2%;width:17%;height:auto;filter:drop-shadow(0 8px 8px rgba(0,0,0,.4))}

.tour__caps{position:relative;z-index:3;list-style:none;margin:0;padding:0;display:grid;gap:12px;width:min(100%,560px)}
.cap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 14px;align-items:center;padding:18px 22px;border-radius:26px;background:var(--paper);color:var(--ink);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.cap__n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--c);font:400 1.4rem/1 var(--display)}
.cap__t{margin:0;font:400 clamp(1.3rem,3.4vw,1.9rem)/1.05 var(--display);text-transform:uppercase;text-wrap:balance}
.cap p{grid-column:1 / -1;margin:0;font-weight:600;line-height:1.4}
.cap__chips{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.cap__chips li{padding:4px 12px;border-radius:999px;background:color-mix(in srgb,var(--c) 26%,white);font-weight:700;font-size:.84rem;line-height:1.4}
.tour__hint{display:none;margin:0;font-weight:700;font-size:.9rem;letter-spacing:.04em;color:rgba(247,247,246,.75)}
.tour__hint::after{content:"";display:block;width:2px;height:22px;margin:8px auto 0;border-radius:2px;background:var(--yellow);animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{translate:0 8px;opacity:.4}}

.float{position:absolute;height:auto;pointer-events:none;rotate:var(--r,0deg);animation:bob 6s ease-in-out infinite;will-change:transform}
@keyframes bob{50%{translate:0 -12px}}
.tour .float{display:none;z-index:1;filter:drop-shadow(0 18px 18px rgba(0,0,0,.35))}

/* animated mode */
.tour.is-tour{height:460svh}
.is-tour .tour__stage{display:block;position:sticky;top:0;height:100svh;min-height:560px;padding:0}
.is-tour .float{display:block}
.is-tour .hero__inner{position:absolute;left:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));top:50%;translate:0 -46%;width:min(46vw,560px);align-items:flex-start;text-align:left}
.is-tour .hero__cta,.is-tour .facts{justify-content:flex-start}
.is-tour .board{--bs:min(50vh,80vw);position:absolute;left:50%;top:50%;width:var(--bs);margin:calc(var(--bs) / -2 - 12vh) 0 0 calc(var(--bs) / -2)}
.is-tour .board__piece{display:block;animation:hop .55s ease-in-out infinite}
@keyframes hop{50%{translate:0 -9px}}
.is-tour .tour__caps{position:absolute;left:50%;bottom:calc(var(--rx) + clamp(10px,2vh,22px));display:block;width:min(92vw,560px);translate:-50% 0}
.is-tour .cap{position:absolute;left:0;right:0;bottom:0;visibility:hidden}
.is-tour .tour__hint{display:block;position:absolute;z-index:3;left:0;right:0;bottom:calc(var(--rx) + 10px);text-align:center}
.float--dice{width:clamp(70px,8vw,120px);right:7%;top:17%;--r:10deg;animation-delay:-1s}
.float--note{width:clamp(110px,13vw,200px);right:26%;bottom:9%;--r:-8deg;animation-delay:-3s}
.float--card-a{width:clamp(50px,5.4vw,84px);right:4%;bottom:20%;--r:14deg;animation-delay:-2s}
.float--card-b{width:clamp(50px,5.4vw,84px);left:47%;top:15%;--r:-12deg;animation-delay:-4s}

/* background patterns: adire-style tiles, brand flowers, confetti. Faint, and they drift slowly on scroll. */
.pat{position:absolute;inset:-14% 0;z-index:0;pointer-events:none;background-repeat:repeat;opacity:.05;will-change:transform}
.pat--adire{background-image:url("../img/pattern-adire.svg");background-size:190px}
.pat--petals{background-image:url("../img/pattern-petals.svg");background-size:230px}
.pat--confetti{background-image:url("../img/pattern-confetti.svg");background-size:210px}
.hero .pat,.sheet--ink .pat{filter:invert(1);opacity:.06}
.play .pat{opacity:.07}
.buy .pat{opacity:.08}
.sheet > .wrap,.sheet > .play__pin,.sheet > .ticker{position:relative;z-index:1}

/* sheets */
.sheet{position:relative;z-index:2;overflow:clip;border-radius:var(--rx) var(--rx) 0 0;margin-top:calc(var(--rx) * -1);padding-block:var(--pad) calc(var(--pad) + var(--rx))}
.sheet--paper{background:var(--paper)}
.sheet--ink{background:var(--ink);color:var(--paper)}
.sheet--pink{background:var(--pink)}
.sheet--yellow{background:var(--yellow)}
.sheet--blue{background:var(--blue)}
.sheet--green{background:var(--green)}
.sheet--purple{background:var(--purple);color:var(--paper)}
.sheet--yellow .pat,.sheet--blue .pat,.sheet--green .pat{opacity:.07}
.sheet--purple .pat{filter:invert(1);opacity:.06}

/* quick facts */
.facts-bar{position:relative;z-index:2;background:var(--ink);color:var(--paper);padding-block:clamp(22px,3.2vw,36px) calc(clamp(22px,3.2vw,36px) + var(--rx))}
.facts-bar__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-block:0;list-style:none}
.facts-bar__list li{display:flex;flex-direction:column;gap:2px}
.facts-bar__list b{font:400 clamp(1.9rem,4.6vw,3.2rem)/1 var(--display)}
.facts-bar__list li:nth-child(1) b{color:var(--yellow)}.facts-bar__list li:nth-child(2) b{color:var(--pink)}.facts-bar__list li:nth-child(3) b{color:var(--blue)}.facts-bar__list li:nth-child(4) b{color:var(--green)}
.facts-bar__list span{font-weight:700;font-size:clamp(.86rem,1.6vw,1rem)}
.h2{margin:0 0 18px;font:400 clamp(2.4rem,7vw,5rem)/.96 var(--display);text-transform:uppercase;text-wrap:balance}
.h2--center{text-align:center}
.h2--xl{font-size:clamp(2.7rem,9vw,7rem);max-width:14ch;margin-inline:auto}
.h3{margin:clamp(48px,7vw,88px) 0 18px;font:400 clamp(1.5rem,3.4vw,2.3rem)/1.05 var(--display);text-transform:uppercase;text-wrap:balance}
.lede{margin:0 0 14px;max-width:46ch;font-size:clamp(1.08rem,1.9vw,1.32rem);line-height:1.5}
.lede--center{margin-inline:auto;text-align:center}

/* about */
.about__intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
.about__art{width:100%;height:auto;justify-self:center}

/* how do you win: tap a card to turn it over and collect it */
.win__bar{display:flex;align-items:center;gap:14px;max-width:520px;margin:22px auto 0}
.win__track{flex:1;height:12px;border-radius:999px;background:rgba(247,247,246,.22);overflow:hidden}
.win__fill{display:block;width:0;height:100%;border-radius:999px;background:var(--yellow);transition:width .6s var(--ease)}
.win__count{margin:0;font-weight:700;white-space:nowrap}
.keys{list-style:none;margin:clamp(26px,4vw,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.key{display:block;width:100%;aspect-ratio:5 / 7.4;padding:0;border:0;border-radius:22px;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer;perspective:900px}
.key__flip{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s var(--ease)}
.key:hover .key__flip{transform:translateY(-6px)}
.key.is-on .key__flip,html:not(.js) .key__flip{transform:rotateY(180deg)}
.key__face{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;border-radius:22px;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 28px 46px -26px rgba(0,0,0,.75)}
.key__face--back img{width:100%;height:100%;object-fit:cover}
.key__tap{position:absolute;left:50%;bottom:9%;translate:-50% 0;padding:6px 14px;border-radius:999px;background:var(--paper);color:var(--ink);font-weight:700;font-size:.82rem;white-space:nowrap}
.key__face--front{transform:rotateY(180deg);gap:4px;padding:10px 10px 14px;background:var(--white)}
.key__art{display:grid;place-items:center;aspect-ratio:1 / .8;overflow:hidden;border-radius:14px;background:var(--tint,var(--soft))}
.key__art img{width:78%;height:78%;object-fit:contain}
.key__art--fill img{width:100%;height:100%;object-fit:cover}
.key__art--heart svg{width:44%}
.key__face--front .key__art{flex:1 1 auto;min-height:0;aspect-ratio:auto}
.key__face--front b{margin:8px 4px 0;font:400 clamp(1rem,1.7vw,1.3rem)/1.1 var(--display);text-transform:uppercase}
.key__why{margin:0 4px;font-size:clamp(.78rem,1.15vw,.94rem);line-height:1.35;color:var(--muted)}
.swipe-hint{display:none;margin:0;text-align:center;font-weight:700;font-size:.95rem;color:var(--paper)} .win__done{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:30px}
.win__shout{margin:0;font:400 clamp(1.8rem,5vw,3rem)/1 var(--display);text-transform:uppercase;color:var(--yellow)}
.burst{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none}
.burst i,.confetti i{position:absolute;left:50%;top:50%;width:10px;height:16px;border-radius:3px;background:var(--c)}

/* a line of type that slides as you scroll */
.ticker{margin-top:clamp(40px,7vw,90px);overflow:hidden;white-space:nowrap}
.ticker__row{display:inline-block;font:400 clamp(2.1rem,6.4vw,4.8rem)/1.15 var(--display);text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px rgba(0,0,18,.3);will-change:transform}
.ticker__row i{display:inline-block;width:.4em;height:.4em;margin:0 .32em .14em;border-radius:50%;background:var(--pink);vertical-align:middle}

/* how to play: one short sentence per step, and the board shows that step.
   Without animation this is a plain numbered list under a picture of the board. */
.play{background:#00B6ED;color:var(--ink);overflow:clip;padding-bottom:0}
.play__pin{position:relative;z-index:1;display:flex;flex-direction:column;gap:clamp(14px,2.4vh,26px)}
.play__top{padding-inline:var(--gutter);text-align:center}
.play__top .h2{margin-bottom:8px}
.play__note{display:inline-block;margin:0;padding:8px 18px;border-radius:999px;background:rgba(0,0,18,.12);font-weight:700;font-size:clamp(.8rem,1.6vw,.95rem)}
.play__grid{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:22px;padding-inline:var(--gutter)}
.scene{position:relative;width:min(100%,520px);aspect-ratio:1}
.scene > *{display:none}
.scene > .scene__board{display:block;width:100%;height:100%;border-radius:3%;box-shadow:0 44px 70px -36px rgba(0,0,18,.65)}
.beats{list-style:none;margin:0;padding:0;display:grid;gap:12px;width:min(100%,560px)}
.beat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;align-items:center;padding:18px 22px;border-radius:24px;background:var(--white);box-shadow:var(--shadow)}
.beat__n{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--ink);color:var(--paper);font:400 1.3rem/1 var(--display)}
.beat__t{margin:0;font:400 clamp(1.5rem,3.6vw,2.2rem)/1 var(--display);text-transform:uppercase;text-wrap:balance}
.beat p{grid-column:1 / -1;margin:0;font-weight:600;font-size:clamp(1rem,1.9vw,1.15rem);line-height:1.4}
.play__progress{display:none}

/* animated mode: the section holds still and scrolling plays the game */
.is-play .play__run{height:676svh}
.is-play .play__pin{position:sticky;top:0;height:100svh;min-height:500px;padding-block:clamp(12px,2.6vh,30px)}
.is-play .play__top .h2{font-size:clamp(1.7rem,4.6vh,3rem);margin-bottom:6px}
.is-play .play__grid{flex:1;min-height:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(20px,4vw,64px);width:100%;max-width:var(--max);margin-inline:auto}
.is-play .scene{width:min(100%,60vh);justify-self:end}
.is-play .scene > *{display:block}
.is-play .beats{position:relative;display:block;width:100%;max-width:470px;height:min(100%,320px);justify-self:start}
.is-play .beat{position:absolute;left:0;right:0;top:50%;translate:0 -50%;visibility:hidden;padding:0;border-radius:0;background:none;box-shadow:none}
.is-play .beat__n{width:52px;height:52px;font-size:1.6rem}
.is-play .beat__t{font-size:clamp(2rem,4.2vw,3.5rem)}
.is-play .beat p{margin-top:6px;font-size:clamp(1.05rem,1.7vw,1.35rem)}
.is-play .play__progress{display:flex;flex-direction:column;align-items:center;gap:8px}
.dots{display:flex;gap:6px}
.dot-btn{position:relative;width:10px;height:10px;padding:0;border:0;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 2.5px var(--ink);cursor:pointer;transition:width .4s var(--ease),background-color .3s}
.dot-btn::after{content:"";position:absolute;inset:-9px -3px}
.dot-btn.is-done{background:var(--ink)}
.dot-btn.is-active{width:28px;background:var(--ink)}
.play__count{margin:0;font-weight:700;font-size:.88rem}

/* Back / Next, the dots, and the line that says how to move through the steps */
.play__controls,.play__how,.play__skip{display:none}
.is-play .play__controls{display:flex;align-items:center;justify-content:center;gap:clamp(12px,3vw,30px);padding-inline:var(--gutter)}
.play__mid{display:flex;flex-direction:column;align-items:center;gap:7px}
.is-play .play__controls .btn{min-width:92px}
.is-play .play__how{display:block;margin:-4px 0 0;text-align:center;font-weight:700;font-size:.88rem}
/* Next gives a small pulse so the eye finds it */
.is-play #step-next{animation:nextPulse 2.8s ease-in-out infinite}
@keyframes nextPulse{0%,70%,100%{scale:1}80%{scale:1.08}90%{scale:.98}}
/* Skip sits in the top corner, away from where thumbs rest, so it is not tapped by mistake */
.play__top{position:relative}
.is-play .play__skip{display:block;position:absolute;top:0;right:var(--gutter);padding:8px 2px;font-weight:700;font-size:.84rem;text-underline-offset:3px}

/* things on the board */
.scene__arrow{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible;pointer-events:none}
.scene__arrow path{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.scene__arrow .scene__arrowhead{fill:var(--ink);stroke:none;stroke-dasharray:none}
.glow{position:absolute;z-index:2;left:var(--x);top:var(--y);width:15%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;box-shadow:0 0 0 4px var(--yellow),0 0 0 8px var(--ink),0 0 34px 12px rgba(255,206,58,.75);opacity:0;animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{50%{scale:1.14}}
.pile{position:absolute;z-index:2;width:11%;height:auto;translate:-50% -50%;border-radius:9%;box-shadow:0 10px 16px -6px rgba(0,0,18,.6)}
.pile--bless{left:33.8%;top:70.2%}
.pile--wahala{left:65.6%;top:30%}
.scene__piece{position:absolute;z-index:3;left:7.5%;top:92.5%;width:15%;height:auto;margin:-12.5% 0 0 -7.5%;filter:drop-shadow(0 8px 8px rgba(0,0,18,.45))}
.scene__dim{position:absolute;inset:0;z-index:4;border-radius:3%;background:rgba(0,0,18,.66);opacity:0}
.scene__notes,.scene__dice,.scene__draw,.scene__ido{position:absolute;inset:0;z-index:5;opacity:0;pointer-events:none}
.scene__notes img{position:absolute;left:27%;top:42%;width:46%;height:auto;margin-top:-12%;border-radius:3%;box-shadow:0 14px 22px -8px rgba(0,0,0,.6)}
.scene b{padding:.42em 1em;border-radius:999px;background:var(--yellow);color:var(--ink);font:400 clamp(.9rem,2.6vh,1.5rem)/1.15 var(--display);text-transform:uppercase;white-space:nowrap}
.scene__notes b{position:absolute;left:50%;top:70%;translate:-50% 0}
.is-play .scene__dice,.is-play .scene__draw{display:flex;flex-wrap:wrap;align-content:center;align-items:center;justify-content:center;gap:5% 4%}
.scene__dice .die{width:19%;height:auto;aspect-ratio:1;padding:3%;gap:4%;border-radius:18%;background:#F6F0DF;box-shadow:0 12px 20px -8px rgba(0,0,18,.6)}
.scene__dice .die i{background:var(--red)}
.scene__dice b,.scene__draw b{flex-basis:auto}
.scene__dice::after,.scene__draw::after{content:"";flex-basis:100%;order:1}
.scene__dice b,.scene__draw b{order:2}
.scene__draw img{width:30%;height:auto;border-radius:9%;box-shadow:0 20px 30px -10px rgba(0,0,0,.7)}
.scene__tray{position:absolute;z-index:6;left:50%;top:50%;width:86%;translate:-50% -50%;padding:3%;border-radius:999px;background:var(--paper);box-shadow:0 20px 34px -14px rgba(0,0,18,.6);opacity:0}
.is-play .scene__tray{display:flex;gap:2.5%}
.slot{flex:1;aspect-ratio:1;overflow:hidden;border-radius:50%;opacity:.3;filter:grayscale(1)}
.slot .key__art{width:100%;height:100%;aspect-ratio:auto;border-radius:0}
.slot:nth-child(1) .key__art{background:#fde3ee}.slot:nth-child(2) .key__art{background:#d9f3fc}.slot:nth-child(4) .key__art{background:#fde8d6}.slot:nth-child(5) .key__art{background:#fff3cc}
.scene__ido{z-index:7}
.is-play .scene__ido{display:grid;place-items:center}
.scene__ido b{padding:0;border-radius:0;background:none;color:var(--yellow);font-size:clamp(3rem,15vh,7.5rem);line-height:1;rotate:-6deg;text-shadow:0 12px 34px rgba(0,0,0,.6)}
.confetti{position:absolute;inset:0}
.die{display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:2px;width:48px;height:48px;padding:8px;border-radius:13px;background:var(--white)}
.die i{border-radius:50%;background:var(--ink);opacity:0}
.die i.on{opacity:1}

/* under the play-through: the extra rules, a checklist, and a place for the video */
.play__after{position:relative;z-index:1;padding-block:clamp(36px,6vw,72px) calc(var(--pad) + var(--rx))}
.play__after .h3{margin:0 0 14px}
.know{padding:clamp(22px,4vw,40px);border-radius:30px;background:var(--white);box-shadow:var(--shadow)}
.know__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px}
.know__list li{position:relative;padding-left:32px;font-weight:600;line-height:1.4}
.know__list li::before{content:"";position:absolute;left:0;top:.14em;width:20px;height:20px;border-radius:50%;background:var(--pink)}
.ready{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start;gap:16px;margin-top:16px}
.ready__card{padding:clamp(22px,4vw,40px);border-radius:30px;background:var(--white);box-shadow:var(--shadow)}
.ready__list{margin:0 0 20px;padding-left:1.3em;display:grid;gap:8px;font-weight:700;font-size:1.08rem}
.ready__video video{display:block;width:100%;max-width:290px;height:auto;aspect-ratio:9 / 16;margin:10px auto 0;border-radius:20px;background:#000}
.ready__video .h3{margin:0}
.ready__video{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:clamp(22px,4vw,40px);border-radius:30px;background:var(--ink);color:var(--paper)}
.ready__video p{margin:0;color:rgba(247,247,246,.82)}
.ready__play{display:grid;place-items:center;width:58px;height:58px;margin-bottom:auto;border-radius:50%;background:var(--yellow)}
.ready__play::after{content:"";margin-left:5px;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--ink)}

/* in the box: each thing moves the way you use it. The picture, the number and the words each have their own row, so nothing overlaps. */
.box__list{list-style:none;margin:clamp(24px,4vw,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.box__item{display:grid;grid-template-rows:auto auto 1fr;justify-items:center;gap:8px;padding:16px 14px 20px;border-radius:26px;background:var(--white);text-align:center}
.box__art{position:relative;width:100%;height:clamp(104px,12vw,140px)}
.box__art img{position:absolute;left:50%;top:50%;width:auto;height:auto;max-width:76%;max-height:84%}
.box__art--board img{margin:-38% 0 0 -38%;width:76%;max-height:none;border-radius:4%;animation:boxBoard 7s ease-in-out infinite}
@keyframes boxBoard{0%,100%{transform:perspective(500px) rotateX(46deg) rotateZ(-14deg)}50%{transform:perspective(500px) rotateX(46deg) rotateZ(14deg)}}
.box__art--notes img{width:64%;margin:-17% 0 0 -32%;transform-origin:50% 160%}
.box__art--cards img{width:27%;margin:-21% 0 0 -13.5%;border-radius:9%;transform-origin:50% 130%}
.box__art--fan img:nth-child(1){animation:fanLeft 3.6s ease-in-out infinite}
.box__art--fan img:nth-child(3){animation:fanRight 3.6s ease-in-out infinite}
@keyframes fanLeft{0%,100%{rotate:-3deg}50%{rotate:-22deg}}
@keyframes fanRight{0%,100%{rotate:3deg}50%{rotate:22deg}}
.box__art--piece img{width:58%;margin:-29% 0 0 -29%;transform-origin:50% 100%;animation:boxDance 1.3s ease-in-out infinite}
@keyframes boxDance{0%,100%{rotate:-6deg}50%{rotate:6deg;translate:0 -6px}}
.box__art--dice img{width:66%;margin:-23% 0 0 -33%;animation:boxRoll 3.4s cubic-bezier(.3,.7,.3,1) infinite}
@keyframes boxRoll{0%,58%{rotate:0deg;translate:0 0}74%{rotate:190deg;translate:0 -16px}90%,100%{rotate:360deg;translate:0 0}}
.box__count{margin:0;display:flex;flex-direction:column;align-items:center;gap:2px}
.count{font:400 clamp(2.4rem,5vw,3.8rem)/1 var(--display);font-variant-numeric:tabular-nums}
.box__count span{font-weight:700;font-size:clamp(1rem,1.7vw,1.2rem);line-height:1.2}
.box__use{margin:0;font-size:.94rem;line-height:1.35;color:var(--muted)}

/* glossary */
.chip{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--yellow);color:var(--ink);font:700 .7rem/1.5 var(--body);letter-spacing:.06em;text-transform:uppercase;vertical-align:middle}
.search{display:block;width:min(100%,460px);margin:22px auto 0}
.search input{width:100%;height:56px;padding:0 24px;border-radius:999px;border:2px solid rgba(247,247,246,.55);background:rgba(247,247,246,.08);color:var(--paper);font:600 1.05rem/1 var(--body)}
.search input::placeholder{color:rgba(247,247,246,.75)}
.search input:focus{outline:none;border-color:var(--yellow);background:rgba(247,247,246,.14)}
.terms{margin:clamp(24px,4vw,44px) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.term{padding:18px 22px 20px;border-radius:22px;background:rgba(247,247,246,.07)}
.term dt{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px;font:400 1.3rem/1.15 var(--display);text-transform:uppercase}
.term dd{margin:0;font-size:.98rem;line-height:1.5;color:rgba(247,247,246,.8)}
.terms__empty{margin:26px 0 0;text-align:center;font-weight:700;font-size:1.1rem}

/* faq */
.faq__list{max-width:780px;margin:clamp(20px,3vw,36px) auto 0;display:flex;flex-direction:column;gap:12px}
.qa{background:var(--white);border-radius:22px;box-shadow:var(--shadow)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;border-radius:22px;font-weight:700;font-size:clamp(1.05rem,1.9vw,1.2rem);line-height:1.3}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:34px;height:34px;border-radius:50%;background:var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M17 10v14M10 17h14' stroke='%23000012' stroke-width='2.400' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .4s var(--ease),background-color .3s}
.qa[open] summary::after{transform:rotate(45deg);background-color:var(--yellow)}
.qa p{margin:0;padding:0 24px 22px;max-width:60ch;font-size:1.08rem}
.qa a{font-weight:700;text-underline-offset:3px}
.qa[open] p{animation:answer .4s var(--ease)}
@keyframes answer{from{opacity:0;translate:0 -8px}}
.term{transition:translate .4s var(--ease),rotate .4s var(--ease),background-color .3s}
.term:hover{translate:0 -4px;rotate:-1deg;background:rgba(247,247,246,.12)}

/* the rulebook: a little book that opens as you reach it */
.download{display:flex;align-items:center;gap:clamp(28px,6vw,90px)}
/* the left margin is the room the cover needs when it swings open */
.book{position:relative;flex:none;width:clamp(170px,21vw,270px);margin-left:clamp(96px,12vw,150px);aspect-ratio:1;perspective:1400px;rotate:-5deg}
.book__pages,.book__cover{position:absolute;inset:0;border-radius:6px 16px 16px 6px}
.book__pages{display:flex;flex-direction:column;justify-content:center;gap:6%;padding:10% 10% 10% 16%;background:#FFF9EC;color:var(--ink);font-weight:700;font-size:clamp(.78rem,1.5vw,1.02rem);line-height:1.1;border-left:6px solid var(--line)}
.book__pages b{font:400 1.5em/1 var(--display);text-transform:uppercase}
.book__pages span{padding-bottom:5%;border-bottom:2px dashed var(--line)}
.book__cover{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10%;background:var(--paper);border-left:10px solid var(--pink);transform-origin:left center;backface-visibility:visible}
.book__cover img{width:62%;height:auto}
.book__cover span{font-weight:700;font-size:clamp(.9rem,1.8vw,1.25rem);letter-spacing:.14em;text-transform:uppercase}
.download .h2{margin-bottom:12px}
.download__label{margin:18px 0 8px;font-weight:700;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase}
.download__inside{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.book-btns{display:flex;flex-wrap:wrap;gap:10px}
.download__inside li{padding:7px 16px;border-radius:999px;background:var(--paper);font-weight:700;font-size:.95rem}

/* buy */
/* every "Buy now" button gives a small shake every few seconds. It rests while you point at it. */
.shake{animation:nudgeBuy 6s ease-in-out infinite}
.nav .shake{animation-delay:-2s}
.shake:hover,.shake:focus-visible{animation:none}
@keyframes nudgeBuy{0%,84%,100%{rotate:0deg}87%{rotate:-4deg}90%{rotate:4deg}93%{rotate:-3deg}96%{rotate:2deg}}
.buy{overflow:hidden;text-align:center}
.buy__inner{position:relative;z-index:2}
.buy__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
.buy__float--a{width:clamp(70px,10vw,140px);left:5%;top:18%;--r:-12deg}
.buy__float--b{width:clamp(90px,13vw,190px);right:4%;bottom:16%;--r:6deg;animation-delay:-3s}

/* contact: a letter you fill in, after the "Letter of Intent" space on the board. Flat colour, no shadows. */
.sheet--orange{background:var(--orange)}
.sheet--orange .pat{opacity:.08}
.contact__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:start}
.contact__list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.contact__list li{display:grid;gap:2px;padding:14px 20px;border-radius:16px;background:var(--paper);overflow-wrap:anywhere}
.contact__list li:nth-child(odd){rotate:-1.2deg}
.contact__list li:nth-child(even){rotate:1deg}
.contact__list b{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase}
.contact__list a,.contact__list span{font-weight:700;font-size:1.1rem;text-underline-offset:3px}

.letter{--sheet:#FFF9EC;position:relative;display:flex;flex-direction:column;gap:clamp(14px,2vw,20px);padding:clamp(40px,5vw,60px) clamp(20px,4.5vw,52px) clamp(24px,4vw,44px);border-radius:12px;background:var(--sheet);rotate:-1.6deg;transition:rotate .5s var(--ease)}
.letter:focus-within{rotate:0deg}
/* the striped edge of an airmail letter, in the brand pink and blue */
.letter::before{content:"";position:absolute;inset:0 0 auto 0;height:14px;border-radius:12px 12px 0 0;background:repeating-linear-gradient(135deg,var(--pink) 0 16px,var(--sheet) 16px 32px,var(--blue) 32px 48px,var(--sheet) 48px 64px)}
.letter__stamp{position:absolute;top:-22px;right:clamp(14px,4vw,44px);display:grid;justify-items:center;gap:4px;width:84px;padding:10px 6px 8px;border:5px dotted var(--sheet);background:var(--pink);rotate:8deg}
.letter__stamp svg{width:38px}
.letter__stamp i{font:400 .82rem/1 var(--display);letter-spacing:.08em;color:var(--ink)}
.letter__hello{margin:0;padding-right:96px;font:400 clamp(1.8rem,4vw,2.6rem)/1 var(--display);text-transform:uppercase}
.blank{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;font-weight:700;font-size:clamp(1.08rem,2.1vw,1.3rem)}
.blank label{flex:none}
.blank input{flex:1 1 200px;min-width:0;padding:4px 4px 6px;border:0;border-bottom:2.5px dashed var(--ink);border-radius:0;background:transparent;color:var(--ink);font:inherit;font-weight:600}
.blank--tall{flex-direction:column;align-items:stretch;gap:10px}
.blank textarea{width:100%;min-height:104px;padding:12px 14px;border:2.5px dashed var(--ink);border-radius:14px;background:transparent;color:var(--ink);font:inherit;font-weight:600;resize:vertical}
.blank input::placeholder,.blank textarea::placeholder{color:#5a5a6e;opacity:1}
.blank input:focus,.blank textarea:focus{outline:none;box-shadow:none;border-style:solid;background:rgba(255,206,58,.45)}
.blank [aria-invalid="true"]{border-color:#B0242A;background:rgba(214,62,67,.12)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-btn{padding:9px 16px;border:2px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font:700 .95rem/1.2 var(--body);cursor:pointer;transition:background-color .2s,color .2s,transform .3s var(--ease)}
.chip-btn:hover{transform:translateY(-2px) rotate(-2deg)}
.chip-btn[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.letter__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.form__status{margin:0;flex:1 1 220px;font-weight:700}
.form__status[data-state="error"]{color:#B0242A}

/* footer */
.footer{padding-block:clamp(44px,6vw,72px) 36px}
.footer__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px}
.footer__logo{height:46px;width:auto}
.footer__links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px}
.footer__links a{font-weight:700;text-decoration:none}
.footer__links a:hover{text-decoration:underline}
.footer__legal{margin:0;flex-basis:100%;font-size:.9rem;color:rgba(247,247,246,.6)}

@media (max-width:1000px){
  .nav{padding-left:16px}
  .nav > nav{margin:0;order:3}
  .nav__buy{margin-left:auto}
  .nav__toggle{display:grid}
  .nav__links{display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);flex-direction:column;gap:2px;padding:14px;border-radius:30px;background:var(--ink)}
  .nav__links[data-open="true"]{display:flex}
  .nav__links a{display:flex;align-items:center;gap:14px;padding:11px 14px;border-radius:18px;color:var(--paper);font:400 clamp(1.5rem,6.4vw,2rem)/1.1 var(--display);text-transform:uppercase;letter-spacing:.01em;transition:background-color .2s,padding-left .35s var(--ease)}
  .nav__links a::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;background:var(--dot,var(--yellow));transition:scale .35s var(--ease)}
  .nav__links a:hover,.nav__links a:focus-visible{background:rgba(247,247,246,.1);padding-left:22px}
  .nav__links a:hover::before,.nav__links a:focus-visible::before{scale:1.5}
  .nav__links li:nth-child(1){--dot:var(--yellow)}.nav__links li:nth-child(2){--dot:var(--pink)}.nav__links li:nth-child(3){--dot:var(--blue)}.nav__links li:nth-child(4){--dot:var(--green)}.nav__links li:nth-child(5){--dot:var(--orange)}.nav__links li:nth-child(6){--dot:var(--pink)}.nav__links li:nth-child(7){--dot:var(--blue)}
  .nav__links-buy{display:block;margin-top:8px}
  .nav__links .nav__links-buy a{justify-content:center;background:var(--yellow);color:var(--ink);border-radius:999px;padding:15px}
  .nav__links .nav__links-buy a::before{display:none}
  .nav__links .nav__links-buy a:hover,.nav__links .nav__links-buy a:focus-visible{background:var(--yellow);padding-left:15px}
  .terms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact__grid{grid-template-columns:minmax(0,1fr)}
  .letter{rotate:-1deg}
}
@media (max-width:899px){
  .is-tour .hero__inner{left:0;right:0;top:clamp(78px,11vh,104px);translate:none;width:auto;padding-inline:var(--gutter);align-items:center;text-align:center}
  .is-tour .hero__cta,.is-tour .facts{justify-content:center}
  .is-tour .board{--bs:min(42vh,80vw);margin-top:calc(var(--bs) / -2 - 14vh)}
  .is-tour .tour__hint{display:none}
  /* leave a strip at the bottom of the screen for the keep-scrolling cue */
  .is-tour .tour__caps{bottom:72px}
  .cue{font-size:.84rem}
  .cap{padding:14px 18px;border-radius:22px}
  .cap__n{width:36px;height:36px;font-size:1.15rem}
  .cap__chips li{font-size:.78rem;padding:3px 10px}
  .float--dice{right:3%;top:auto;bottom:30%}
  .float--note{right:auto;left:2%;bottom:5%}
  .float--card-a{right:5%;bottom:6%}
  .float--card-b{display:none!important}
  .download{flex-direction:column;align-items:flex-start}
  .book{margin-left:clamp(120px,36vw,170px)}
  .box__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .box__item:first-child{grid-column:1 / -1}
  .box__item:first-child .box__art{height:150px}
  .box__item:first-child .box__art img{width:150px;margin:-75px 0 0 -75px}
}
@media (max-width:899px){
  .is-play .play__grid{grid-template-columns:minmax(0,1fr);align-content:center;justify-items:center;gap:12px}
  .is-play .scene{width:min(84vw,40vh);justify-self:center}
  .is-play .beats{max-width:none;height:auto;min-height:clamp(132px,22vh,180px);justify-self:stretch}
  .is-play .beat{top:0;translate:none;display:block;text-align:center}
  .is-play .beat__n{display:none}
  .is-play .beat__t{font-size:clamp(1.6rem,7vw,2.3rem)}
  .is-play .beat p{font-size:clamp(.98rem,3.9vw,1.12rem)}
  .is-play .play__controls .btn{min-width:76px;padding:0 16px}
  .is-play .play__top .h2{padding-inline:70px}
  .keys{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding:12px var(--gutter) 30px}
  .keys::-webkit-scrollbar{display:none}
  .keys li{flex:0 0 min(64vw,250px);scroll-snap-align:center}
  .swipe-hint{display:block}
  .key{aspect-ratio:5 / 7.9}
  .know__list,.ready{grid-template-columns:minmax(0,1fr)}
  .facts-bar__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .about__intro{grid-template-columns:minmax(0,1fr)}
  .about__art{order:-1;max-width:420px}
}
@media (max-width:560px){
  .nav__buy{display:none}
  .nav__toggle{margin-left:auto}
  .facts{display:grid;grid-template-columns:auto auto;gap:4px 22px}
  .facts li + li::before{display:none}
  .hero__cta .btn{height:52px;padding:0 24px}
  .terms{grid-template-columns:minmax(0,1fr)}
  .buy__cta .btn{width:100%}
  .buy__float--a{top:3%;left:3%;width:58px}.buy__float--b{bottom:auto;top:1%;right:3%;width:70px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .key__art--venues img:nth-child(n+2){display:none}
  .loader{display:none}
}