/* BeanMood · Option B for the About page: colour-blocked sections and sticker outlines, from the mascot sheets.
   taste-skill-ignore: the offset sticker shadows are the brand's sticker look, asked for by the client */
:root{
 --bg:#fff4e2;--surface:#ffe9c4;--ink:#2a1709;--muted:#5e4130;--accent:#c53030;
 --mustard:#f5c518;--mustard-soft:#ffe58a;--sky:#a9dcef;--blush:#f9c3b4;--espresso:#3b1e08;--latte:#ffe1a8;--blush-bg:#f9c3b4;
 --line:2.5px solid #3b1e08;--pop:5px 5px 0 #3b1e08;--pop-sm:3px 3px 0 #3b1e08;
}
/* buttons: the roll-and-plus button, as a chunky sticker */
.btn{border:var(--line);border-radius:999px;padding:0 6px 0 20px;box-shadow:var(--pop-sm);font-weight:800;transition:transform .12s var(--ease-out),box-shadow .12s var(--ease-out),background-color .2s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--espresso)}
.btn:active{transform:translate(3px,3px);box-shadow:none}
.plus{border-radius:999px;background:var(--mustard);color:var(--espresso);border:2px solid var(--espresso)}
.nav.is-band{background:var(--espresso)}
.nav.is-band .btn{background:var(--mustard);color:var(--espresso)}
.nav-links a,.nav-right>a:first-child{font-weight:700}
.wordmark{font-weight:800}

/* hero: a mustard field, the place page a white sticker on it */
.hero{background:var(--mustard)}
.hero h1{font-weight:800}
.doc{border:3px solid var(--espresso);border-radius:28px 28px 0 0;box-shadow:8px 8px 0 var(--espresso)}
.doc .acts span{border-radius:999px;border:2px solid var(--espresso)}
.crew-say{background:#fff;border:var(--line);box-shadow:var(--pop-sm);font-weight:800}
.crew-say::before{background:#fff;border-left:2.5px solid var(--espresso);border-bottom:2.5px solid var(--espresso)}
.hero+*{padding-top:calc(var(--section-gap) * .6)}

/* the quiz replay on sky */
#how{background:var(--sky);padding-block:calc(var(--section-gap) / 2);margin-top:0}
.hero{padding-bottom:calc(var(--section-gap) / 2)}
.replay-stage h2{font-weight:800}
.tour__lines button{color:#3f5a66;font-weight:700}
.tour__lines button.is-current{color:var(--espresso)}
.w{border:3px solid var(--espresso);border-radius:24px;box-shadow:8px 8px 0 var(--espresso)}
.w .row{border-radius:12px}
.w .fit{background:var(--mustard);color:var(--espresso);border:2px solid var(--espresso);font-weight:800}
.replay__said{color:var(--espresso)}

/* meet the crew: two big stickers */
.crew h2{font-weight:800}
.crew-card{border:3px solid var(--espresso);box-shadow:8px 8px 0 var(--espresso);background:var(--mustard)}
.sniff-card{background:var(--sky)}
.crew-card h3{font-weight:900}
.poses button{border:2px solid var(--espresso);box-shadow:2px 2px 0 var(--espresso);font-weight:800}
.poses button:active{transform:translate(2px,2px);box-shadow:none}
.poses button[aria-pressed="true"]{background:var(--accent);color:#fff}
.crew-ctl button[aria-pressed="true"]{box-shadow:inset 0 0 0 3px var(--espresso),0 0 0 3px #fff,0 0 0 5px var(--espresso)}

/* the statement and the rules */
.statement{font-weight:700}
#rules{background:var(--blush)}
.giant h2{color:var(--accent);-webkit-text-stroke:0}
.bars details{background:#fff;border:var(--line);border-radius:16px;box-shadow:var(--pop-sm)}
.bars details summary{border-radius:13px}
.bars details[open] summary{border-radius:13px 13px 0 0}
.bars{gap:12px}
.bars summary{font-weight:800}
.bars summary:hover{background:var(--mustard-soft)}
.bars details[open] summary{background:var(--mustard)}

/* the weight trade: espresso into collar red */
.weight.is-dark{background:var(--accent);color:#fff}

/* footer */
.foot-band{background:var(--espresso);color:#f3e3c8}
.foot-band h3{color:var(--mustard)}
.foot-band .legal{color:#f3e3c8}
.foot-band a,.foot-band .linkbtn{color:#fff}

/* the roll's second label shows only while it rolls in */
.btn .roll span+span{visibility:hidden}
.btn:hover .roll span+span,.btn:focus-visible .roll span+span{visibility:visible}

/* what's in the app, and the cities, as stickers */
.feat-card{border:3px solid var(--espresso);box-shadow:6px 6px 0 var(--espresso)}
.f-find{background:var(--sky)}.f-match{background:var(--mustard)}.f-collect{background:var(--blush)}
.feat-link{display:inline-flex;align-items:center;height:40px;padding:0 16px;border:2px solid var(--espresso);border-radius:999px;background:#fff;color:var(--espresso);text-decoration:none;font-weight:800;box-shadow:2px 2px 0 var(--espresso);transition:transform .12s,box-shadow .12s}
.feat-link:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--espresso)}
.feat-link:active{transform:translate(2px,2px);box-shadow:none}
#cities{background:var(--mustard)}