@font-face{font-family:Baloo;src:url(/fonts/Baloo-ExtraBold.woff2) format('woff2');font-weight:800;font-display:swap}
:root{--bg:#FFF5F4;--page:#2A2A2E;--surface:#FDE3E6;--card:#FFFFFF;--text:#2B1D22;--muted:#7D5A64;--line:rgba(43,29,34,.12);--on-accent:#fff;--title:Baloo,Vazirmatn;--chip-bg:rgba(224,66,110,.12);--nav-bg:rgba(255,245,244,.95);--r:26px;--sheet:#FFF5F4}
html{background:#2A2A2E repeating-conic-gradient(#2A2A2E 0 25%,#F4F1EA 0 50%) 0 0/36px 36px}
/* a 1950s diner: the jukebox and records, red vinyl booths, a pink poodle skirt, a mint Cadillac outside, a checkered floor */
.t-retro{background:linear-gradient(#FFF5F4,#FFEFF1)}
.t-retro .hero:not(.has-cover):not(.has-video){background:radial-gradient(80% 60% at 50% 0,#FFE3EA,transparent 70%),#FFF5F4;padding-bottom:0}
/* the diner illustration shown in full under the name: the girl at the jukebox, the records, the booths and the car outside */
.t-retro .hero:not(.has-cover):not(.has-video)::after{content:'';display:block;position:relative;z-index:0;margin:16px -20px 0;aspect-ratio:414/560;background:url(/img/themes/retro-diner.webp) center 100%/100% auto no-repeat;-webkit-mask:linear-gradient(transparent,#000 6%,#000 88%,transparent);mask:linear-gradient(transparent,#000 6%,#000 88%,transparent)}
.t-retro .hero-in{z-index:1}
.t-retro .hero h1{font-weight:800;color:#E0426E;font-size:clamp(36px,11vw,54px);text-shadow:3px 3px 0 #5FC9C1}
.t-retro .logo{border:5px solid #5FC9C1;box-shadow:0 0 0 4px #E0426E}
.t-retro .cats a{border:0;background:#FDE3E6;color:#2B1D22;font-family:Baloo,Vazirmatn;font-weight:800}
.t-retro .cats a.on{background:#E0426E;color:#fff}
.t-retro .cat h2{font-weight:800;color:#C2234F;font-size:26px;display:flex;align-items:center;gap:10px}
.t-retro .cat h2::before{content:'';width:26px;height:26px;flex:none;border-radius:50%;background:radial-gradient(circle,#E0426E 0 4px,#111 4.5px 7px,#2A2A2A 7px 8px,#111 8px 10px,#2A2A2A 10px 11px,#111 11px 13px);animation:rtSpin 3s linear infinite}
@keyframes rtSpin{to{transform:rotate(360deg)}}
.t-retro .l-bubbles .ph{box-shadow:0 0 0 6px #fff,0 0 0 10px #5FC9C1,0 0 0 13px #E0426E}
.t-retro .item h3{font-family:Baloo,Vazirmatn;font-weight:800;font-size:17px}
.t-retro .price{color:#E0426E}
.t-retro .bdg{background:#5FC9C1;color:#1E2A2A}
.t-retro .sp{border-radius:26px;background:#fff;border:3px solid #5FC9C1}

/* moving backdrop */
.t-retro::before{content:'';position:fixed;z-index:-1;pointer-events:none;top:50%;left:50%;width:200vmax;height:200vmax;margin:-100vmax 0 0 -100vmax;background:repeating-radial-gradient(circle at 50% 50%,rgba(224,66,110,.06) 0 26px,transparent 26px 60px);animation:rtGroove 14s ease-in-out infinite alternate}@keyframes rtGroove{to{transform:scale(1.25)}}
/* nostalgia along the bottom of the screen: a checkered floor, a glowing jukebox, a spinning record, a milkshake, a cassette,
   a flickering OPEN sign and a diner stool, and now and then a classic car cruising across the middle of the menu */
.t-retro::after{content:'';position:fixed;z-index:-1;pointer-events:none;bottom:0;height:120px;left:max(0px,calc(50% - 320px));right:max(0px,calc(50% - 320px));background:url(/img/themes/retro-floor.svg) center bottom/100% 100% no-repeat}
.t-retro main::after{content:'';position:fixed;z-index:3;pointer-events:none;top:48%;left:max(0px,calc(50% - 320px));width:170px;height:72px;background:url(/img/themes/bg-classiccar.svg) center/contain no-repeat;opacity:0;animation:rtCar 16s linear 3s infinite}
@keyframes rtCar{0%{opacity:0;transform:translateX(calc(min(100vw,640px) + 10px))}2%{opacity:1}42%{opacity:1;transform:translateX(-180px)}43%,100%{opacity:0;transform:translateX(-180px)}}
@media (prefers-reduced-motion:reduce){.t-retro::before{animation:none}.t-retro main::after{animation:none;display:none}}

/* the same motion inside the hero, behind the name */
.t-retro .hero::before{content:none}
@media (prefers-reduced-motion:reduce){.t-retro .hero::before{animation:none}}