:root{--bg:#FFF8EC;--page:#F3E2C4;--surface:#FBEFD9;--card:#FFFDF8;--text:#2B2118;--muted:#7A6A5A;--line:rgba(43,33,24,.12);--on-accent:#fff;--title:Lalezar,Vazirmatn;--chip-bg:rgba(200,32,46,.08);--nav-bg:rgba(255,248,236,.95);--r:10px;--sheet:#FFF8EC}
html{background:#E9C99A}
/* a rustic family trattoria: warm plaster, terracotta and olive wood, a gingham tablecloth, cucina povera on the table */
.t-trattoria{background:radial-gradient(90% 50% at 50% 0,#FFF4DF,transparent 70%),#FFF8EC}
.t-trattoria .hero:not(.has-cover):not(.has-video){background:linear-gradient(90deg,#009246 0 33.3%,#fff 33.3% 66.6%,#CE2B37 66.6%) top/100% 6px no-repeat,linear-gradient(#FFF1D8,#F6DDB4)}
/* the trattoria inside along the bottom of the hero: a wood-fired oven, garlic, salami, prosciutto and peppers hanging, a table for two
   on a gingham cloth with a Chianti fiasco candle, pasta, wine and bread, the «Menù del giorno» chalkboard, green shutters and a lemon tree */
.t-trattoria .hero:not(.has-video){padding-bottom:0}
.t-trattoria .hero::after{content:'';position:relative;z-index:0;display:block;height:clamp(160px,48vw,230px);margin:12px -20px 0;background:url(/img/themes/trattoria-scene.svg) center bottom/100% 100% no-repeat}
.t-trattoria .hero-in{z-index:1}
.t-trattoria .hero .deco{display:none!important}
.t-trattoria .hero h1{font-weight:400;color:#C8202E;font-size:clamp(38px,11vw,56px)}
.t-trattoria .tag{font-style:italic;color:#009246}
.t-trattoria .logo{border-color:#C8202E}
.t-trattoria .cats a{border-color:#F1D9C7;color:#2B2118}
.t-trattoria .cats a.on{background:#009246;border-color:#009246}
.t-trattoria .cat h2{font-weight:400;color:#2F6B3A;font-size:28px;display:flex;align-items:center;gap:8px}
.t-trattoria .cat h2::before{content:'';width:34px;height:20px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 20'%3E%3Cpath d='M2 14 Q16 10 32 4' stroke='%236B5A2A' stroke-width='1.4' fill='none'/%3E%3Cg fill='%235E8C31'%3E%3Cellipse cx='9' cy='9' rx='5' ry='2' transform='rotate(-30 9 9)'/%3E%3Cellipse cx='12' cy='16' rx='5' ry='2' transform='rotate(20 12 16)'/%3E%3Cellipse cx='20' cy='6' rx='5' ry='2' transform='rotate(-35 20 6)'/%3E%3Cellipse cx='23' cy='12' rx='5' ry='2' transform='rotate(15 23 12)'/%3E%3C/g%3E%3Cellipse cx='29' cy='9' rx='2.6' ry='3.4' fill='%232E3A20'/%3E%3C/svg%3E") center/contain no-repeat}
.t-trattoria .cat h2::after{content:'';flex:1;height:4px;max-width:70px;background:linear-gradient(90deg,#009246 33%,#fff 33% 66%,#CE2B37 66%);border-radius:2px}
.t-trattoria .l-grid .item{background:var(--card);padding:8px;border-radius:var(--r);border:1px solid #EAD7B5;box-shadow:inset 0 0 0 3px #FFFDF8,inset 0 0 0 4px rgba(0,146,70,.15),0 10px 20px -14px rgba(60,30,10,.4)}
.t-trattoria .price{color:#C8202E}
.t-trattoria .bdg{background:#009246;color:#fff}

/* moving backdrop */
.t-trattoria::before{content:'';position:fixed;z-index:-1;pointer-events:none;top:0;bottom:0;left:max(0px,calc(50% - 320px));right:max(0px,calc(50% - 320px));background:url(/img/themes/bg-flour.svg) 0 0/280px 320px;opacity:.35;animation:trFall 30s linear infinite;}
@keyframes trFall{to{background-position:-40px 320px}}
/* a gingham tablecloth along the bottom of the screen, and now and then a Vespa putting across the middle of the menu */
.t-trattoria::after{content:'';position:fixed;z-index:-1;pointer-events:none;bottom:0;height:56px;left:max(0px,calc(50% - 320px));right:max(0px,calc(50% - 320px));background:url(/img/themes/bg-gingham.svg) 0 100%/64px 60px repeat-x;opacity:.85}
.t-trattoria main::after{content:'';position:fixed;z-index:3;pointer-events:none;top:46%;left:max(0px,calc(50% - 320px));width:120px;height:92px;background:url(/img/themes/bg-vespa.svg) center/contain no-repeat;opacity:0;animation:trVespa 17s linear 3s infinite}
@keyframes trVespa{0%{opacity:0;transform:translateX(-130px)}2%{opacity:1}45%{opacity:1;transform:translateX(calc(min(100vw,640px) + 10px))}46%,100%{opacity:0;transform:translateX(calc(min(100vw,640px) + 10px))}}
@media (prefers-reduced-motion:reduce){.t-trattoria::before{animation:none}.t-trattoria main::after{animation:none;display:none}}

/* the same motion inside the hero, behind the name */
.t-trattoria .hero::before{content:'';position:absolute;z-index:0;pointer-events:none;inset:0;background:url(/img/themes/bg-flour.svg) 0 0/280px 320px;opacity:.3;animation:trFall 30s linear infinite}
@media (prefers-reduced-motion:reduce){.t-trattoria .hero::before{animation:none}}