/*
Theme Name: Checkout Yesterday
Theme URI: https://checkoutyesterday.com
Author: Devon Sprague
Description: A nostalgic, mobile-first daily price game. Use with Checkout Yesterday Game.
Version: 0.6.2
Requires PHP: 8.0
License: GPL-3.0-or-later
*/
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Lobster&display=swap');
@font-face{font-family:DM;src:url('assets/fonts/DMSans-SemiBold.woff2') format('woff2');font-display:swap}
:root{--ink:#263e3b;--red:#bd352e;--mint:#acd7ca;--cream:#fff3d9;--yellow:#f7cd64;--pink:#efb7af}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background-color:var(--mint);background-image:radial-gradient(#25423912 .7px,transparent .7px);background-size:5px 5px;font:17px/1.5 DM,Arial,sans-serif}button,input{font:inherit}button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--red);outline-offset:5px}
.site-header{display:flex;align-items:center;justify-content:space-between;max-width:1280px;margin:auto;padding:14px 40px;position:relative;gap:20px}.brand{display:block}.brand-image{display:block;width:205px;height:auto;mix-blend-mode:multiply}.header-note{text-align:center;color:var(--red);font-size:10px;letter-spacing:2px;border-block:3px double var(--red);padding:8px 14px;transform:rotate(-3deg)}.header-note::before{content:'✦';margin-right:10px}.header-note::after{content:'✦';margin-left:10px}
#main{position:relative;border-top:7px solid var(--ink);box-shadow:0 -3px 0 #e9f6e9,0 -5px 0 #66867e;background:var(--cream)}#main::before{content:'';display:block;height:18px;background:repeating-conic-gradient(var(--ink) 0% 25%,var(--cream) 0% 50%) 0 0/36px 36px;border-bottom:1px solid var(--ink)}.site-footer{background:var(--mint);border-top:7px double var(--ink);padding:25px 20px;display:flex;gap:24px;align-items:center;justify-content:center;font-size:11px;letter-spacing:1px}.site-footer a{text-underline-offset:4px}.content,.notice{max-width:800px;margin:auto;padding:55px 24px}.content h1{font-family:Georgia,serif;color:var(--red)}
@media(max-width:600px){.site-header{padding:14px 18px;gap:15px}.brand-image{width:157px}.header-note{font-size:8px;letter-spacing:1px;padding:7px 5px;max-width:133px}.header-note::before,.header-note::after{display:none}.site-footer{font-size:9px;gap:15px;padding:20px 12px}}

/* Roadside diner: painted signs, mint plaster, neon and red vinyl. */

:root{--red:#c92f2c;--mint:#91cbbf;--cream:#fff0cc;--yellow:#ffd25d;--ink:#203c37;--pink:#f4b9ac}
body{background-color:var(--mint);background-image:radial-gradient(ellipse at 20% 0,#d8ead14d,transparent 65%),radial-gradient(#203c371b .65px,transparent .8px);background-size:auto,4px 4px}body .site-header{padding-block:16px;min-height:130px}body .brand-image{width:220px;filter:drop-shadow(1px 2px 0 #fff0cc)}body .header-note{color:#fff0dd;background:#982523;border:3px solid #f8c6aa;border-radius:12px;padding:13px 22px;box-shadow:0 0 0 2px #9b2b29,0 0 0 4px #ecb9a1,0 5px 0 #203c3744,inset 0 0 18px #ff6e3c55;text-shadow:0 0 4px #ffdad1,0 0 12px #ff8574;letter-spacing:1.4px;transform:rotate(-3deg)}body #main{background-color:var(--mint);background-image:radial-gradient(ellipse at 50% 0,#e5efcf60,transparent 75%),repeating-linear-gradient(0deg,#203c3704 0 1px,transparent 1px 4px);box-shadow:0 -2px 0 #fff8e2,0 -5px 0 #68827a}body #main::before{height:27px;background-size:28px 28px;border-bottom:5px solid #c92f2c}body #cy-game{overflow:hidden}body .hero{gap:62px;padding:54px 12px 65px;align-items:center}body .hero-copy{background:var(--cream);border:3px solid var(--red);outline:1px solid var(--ink);border-radius:8px;padding:36px 32px 31px;box-shadow:inset 0 0 0 5px var(--cream),inset 0 0 0 7px #c92f2c80,7px 9px 0 #203c373b;transform:rotate(-1.5deg)}body .hero-copy::before,body .hero-copy::after{content:'✦';position:absolute;color:var(--red);font-size:26px;line-height:1;top:12px}body .hero-copy::before{left:13px}body .hero-copy::after{right:13px}body .welcome-script{font-family:'Lobster',Georgia,serif;font-style:normal;font-weight:400;font-size:29px;margin:0 0 22px;transform:rotate(-4deg)}body .hero .eyebrow{font-size:8px;letter-spacing:1.65px}body #cy-game .hero h1{font-family:'Alfa Slab One',Georgia,serif;font-weight:400;font-size:clamp(48px,5.2vw,68px);line-height:1.04;letter-spacing:-2.5px;margin:24px 0 26px;text-shadow:2px 2px 0 var(--cream),4px 4px 0 #91cbbf}body #cy-game .hero h1 em{font-family:'Lobster',Georgia,serif;font-weight:400!important;font-style:normal;font-size:1.35em;line-height:1.2;letter-spacing:-2px;text-shadow:2px 2px 0 var(--cream),4px 4px 0 #d69a64;transform:rotate(-5deg)}body .hero-description{font-size:14px;line-height:1.8;margin-bottom:23px}body .hero .primary{background:linear-gradient(#e14b3e,#bf2427);border:3px solid #213d36;border-radius:32px;padding:12px 25px;box-shadow:inset 0 2px 0 #ffb19a,0 3px 0 #d5e0c6,0 6px 0 #203c37,0 10px 12px #203c3726;font-size:25px;width:290px}body .hero .primary:hover{background:linear-gradient(#ee594b,#c92f2c);box-shadow:inset 0 2px 0 #ffb19a,0 3px 0 #d5e0c6,0 7px 0 #203c37,0 11px 14px #203c3726}body .play-note{font-size:9px;margin-top:18px}body .time-machine{border:11px solid var(--red);outline:2px solid var(--ink);box-shadow:inset 0 0 0 3px #fff0cc,inset 0 0 0 6px #627e70,inset 0 0 0 9px #ecf5dc,7px 3px 0 #ecf5dc,10px 4px 0 #829a89,13px 7px 0 #203c37,17px 16px 17px #203c3735;min-height:542px;padding-top:38px;transform:rotate(2deg)}body .era-label{border:3px double var(--cream);font-size:10px;letter-spacing:2px;box-shadow:3px 3px 0 #203c3740}body .trip-script{font:400 29px/1.1 'Lobster',Georgia,serif;margin-top:16px}body .era-year{font-family:'Alfa Slab One',Georgia,serif;font-weight:400;font-size:100px;letter-spacing:-4px;margin-top:5px;text-shadow:2px 2px var(--cream),5px 5px var(--ink)}body .sunburst{background:repeating-conic-gradient(from -10deg at 50% 70%,#fff0cc70 0deg 15deg,transparent 15deg 30deg)}body .round-sticker{background:var(--yellow);top:189px;right:15px;box-shadow:3px 4px 0 #203c3755;transform:rotate(14deg)}body .sign-bottom{background:linear-gradient(#e54f3d,#bc2729);font-size:10px;padding:12px 4px;border-top:5px double var(--cream)}body .memory-collage{height:254px;max-width:390px;overflow:hidden;mask-image:linear-gradient(transparent,#000 7%,#000 90%,transparent);margin-top:6px}body .memory-collage .memory-card{display:block;top:0;width:110px;height:143px;animation:memory-parade 24s linear infinite;will-change:transform;box-shadow:4px 7px 0 #203c3745;background-image:linear-gradient(135deg,#ffffff38,transparent 60%)}body .memory-collage .memory-card svg{height:100px}body .memory-collage .gas-card{left:4%;--tilt:-13deg;animation-delay:-2s}body .memory-collage .movie-card{left:auto;right:5%;--tilt:12deg;animation-delay:-5s}body .memory-collage .music-card{left:34%;--tilt:-6deg;animation-delay:-8s}body .memory-collage .grocery-card{left:3%;right:auto;--tilt:9deg;animation-delay:-11s;background-color:var(--cream)}body .memory-collage .car-card{left:auto;right:4%;--tilt:-9deg;animation-delay:-14s;background-color:var(--pink)}body .memory-collage .phone-card{left:33%;--tilt:11deg;animation-delay:-17s;background-color:var(--yellow)}body .memory-collage .sneaker-card{left:3%;--tilt:-11deg;animation-delay:-20s;background-color:var(--cream)}body .memory-collage .burger-card{left:auto;right:4%;--tilt:8deg;animation-delay:-23s;background-color:var(--pink)}body .memory-collage .grocery-card>span{font-size:6px}body .memory-collage .grocery-card b{font-size:8px}body .mini-milk{height:88px;width:55px;margin:9px auto;font-size:15px;padding-top:9px}
@keyframes memory-parade{0%{transform:translateY(280px) rotate(calc(var(--tilt) - 7deg));opacity:0}5%{opacity:1}75%{opacity:1}86%,100%{transform:translateY(-175px) rotate(calc(var(--tilt) + 8deg));opacity:0}}body .diner-strip{background:var(--cream);color:var(--red);border-block:5px double var(--red);outline:0;padding:18px 16px;gap:25px;font-size:10px;letter-spacing:1.5px}body .diner-strip b{color:var(--red)}body .site-footer{position:relative;color:var(--cream);border-top:10px solid transparent;border-image:linear-gradient(#f5f8df,#6d817b 25%,#eaf0d6 45%,#a0b3a3 65%,#3b514c) 10;background-color:#b3292a;background-image:repeating-linear-gradient(90deg,transparent 0 79px,#721d2440 80px,#f5846733 82px,transparent 84px),linear-gradient(#d34438,#ae2528);padding:30px 20px;text-shadow:0 1px 1px #651c1c;font-size:11px}body .play,body .results{background-color:var(--cream);border:3px solid var(--red);box-shadow:0 0 0 2px #fff4d5,0 0 0 4px #203c37,8px 9px 0 #203c3740}body .play::before,body .results::before{font-size:11px}body .play h1,body .results h1{font-family:'Alfa Slab One',Georgia,serif!important;letter-spacing:-1px!important;line-height:1.2!important}body .choice{background:linear-gradient(#fff8e7,#f1deb3);box-shadow:inset 0 2px 0 #fff,3px 4px 0 var(--ink);border-radius:12px}body .choice.correct{background:#c5e5cf}body .choice.incorrect{background:#f3c2b8}body .receipt-brand{font-family:'Lobster',Georgia,serif;font-weight:400;font-size:32px}
@media(min-width:701px) and (max-width:1050px){body .hero{gap:30px;padding-inline:0}body .hero-copy{padding:32px 24px}body .hero-description{font-size:13px}body #cy-game .hero h1{font-size:50px}body .time-machine{min-height:520px}body .era-year{font-size:83px}body .memory-collage .memory-card{width:96px}body .round-sticker{top:170px}}
@media(max-width:700px){body .site-header{min-height:107px;padding:12px 20px}body .brand-image{width:170px}body .header-note{font-size:8px;padding:9px 8px;border-width:2px;max-width:137px;letter-spacing:1px}body #main::before{height:22px}body .hero{padding:32px 0 39px;gap:34px}body .hero-copy{padding:28px 19px 27px;max-width:440px;width:100%;margin:auto;transform:rotate(-1deg)}body .welcome-script{font-size:26px;margin-bottom:20px}body .hero .eyebrow{font-size:7px;letter-spacing:1.2px}body #cy-game .hero h1{font-size:54px;letter-spacing:-2px;margin:19px 0 22px}body .hero h1>span{display:inline}body #cy-game .hero h1 em{font-size:1.25em}body .hero-description{font-size:13px;line-height:1.75}body .hero .primary{width:270px;font-size:23px;padding:12px 20px}body .play-note{font-size:8px}body .time-machine{min-height:485px;width:calc(100% - 22px);max-width:365px;border-width:8px;padding-top:28px;border-radius:110px 110px 14px 14px}body .trip-script{font-size:26px}body .era-year{font-size:83px}body .era-label{font-size:8px}body .memory-collage{height:235px;margin-top:5px}body .memory-collage .memory-card{width:96px;height:131px}body .memory-collage .memory-card svg{height:90px}body .round-sticker{top:159px;right:10px}body .sign-bottom{font-size:8px}body .mini-milk{height:79px;width:48px;margin:6px auto;font-size:13px}body .memory-collage .grocery-card>span{font-size:5px}body .memory-collage .grocery-card b{font-size:7px}body .diner-strip{font-size:8px;gap:12px;letter-spacing:1px}body .site-footer{padding:25px 15px;font-size:9px}body .play,body .results{margin:30px auto 38px}body .play h1{font-size:28px!important}}
@media(max-width:360px){body .site-header{padding-inline:15px;gap:12px}body .brand-image{width:147px}body .header-note{font-size:7px;max-width:118px}body #cy-game .hero h1{font-size:46px}body .hero-copy{padding-inline:14px}body .hero-description{font-size:12px}body .hero .primary{width:100%}body .era-year{font-size:75px}body .memory-collage .memory-card{width:84px}body .memory-collage .music-card,body .memory-collage .phone-card{left:31%}}
@media(prefers-reduced-motion:reduce){body .memory-collage .memory-card{animation:none;will-change:auto;transform:rotate(var(--tilt))}body .memory-collage .gas-card{top:10px}body .memory-collage .movie-card{top:20px}body .memory-collage .music-card{top:85px}body .memory-collage .grocery-card{display:none}body .memory-collage .car-card,body .memory-collage .phone-card,body .memory-collage .sneaker-card,body .memory-collage .burger-card{display:none}}

/* Preserve the transparent logo’s original bright colors. */
body .brand-image{mix-blend-mode:normal;filter:drop-shadow(1px 2px 0 #fff0cc)}