@font-face{font-family:"Rozha One";src:url(../fonts/rozha.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans";src:url(../fonts/noto-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans";src:url(../fonts/noto-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root{
  --pom:#7A1F2B; --pom-d:#58141E; --cream:#F8F1E2; --pita:#EFE2C4; --paper:#FFFBF0; --ink:#2A1A16; --pist:#A9C47F;
  /* type scale, ratio 1.25 on 17px */
  --t0:1.0625rem; --t1:1.328rem; --t2:1.66rem; --t3:2.075rem; --t4:2.594rem; --t5:3.24rem; --t6:4.05rem;
  /* spacing, 4/8 scale */
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:64px; --s8:96px;
  --display:"Rozha One","Bodoni 72",Georgia,serif;
  --body:"Noto Sans",system-ui,"Segoe UI",sans-serif;
  --edge:18px;
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;scroll-behavior:smooth;scroll-padding-top:16px;scroll-padding-bottom:96px;-webkit-text-size-adjust:100%}
body{margin:0;font:400 var(--t0)/1.6 var(--body);background:var(--cream);color:var(--ink);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.1;margin:0;letter-spacing:0}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.top :focus-visible,.hero :focus-visible,.family :focus-visible,.visit :focus-visible,.foot :focus-visible,.dock :focus-visible,.slip--b :focus-visible,.slip--d :focus-visible{outline-color:var(--cream)}
.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--s3)}
.skip{position:absolute;left:var(--s3);top:-100px;z-index:100;background:var(--cream);color:var(--ink);padding:12px 16px;font-weight:700;border:3px solid var(--ink)}
.skip:focus{top:var(--s3)}

/* Buttons: pistachio is only ever the Call button */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--s4);font:700 var(--t0)/1.2 var(--body);text-decoration:none;white-space:nowrap;border:2px solid transparent;border-radius:999px;cursor:pointer;transition:transform .15s,box-shadow .15s,background-color .15s}
.btn-call{background:var(--pist);color:var(--ink);border-color:var(--pist);box-shadow:0 4px 0 rgba(0,0,0,.3)}
.btn-call:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(0,0,0,.3)}
.btn-ghost,.btn-dock{background:transparent;color:var(--cream);border-color:var(--cream)}
.btn-ghost:hover{background:var(--cream);color:var(--pom)}

/* Header */
.top{background:var(--pom);color:var(--cream);position:relative;z-index:5}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:72px}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;min-height:44px;white-space:nowrap}
.brand-name{font:400 1.45rem/1 var(--display)}
.nav,.top-call{display:none}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s2);text-decoration:none;font-weight:700}
.nav a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
@media(min-width:720px){.top-call{display:inline-flex}}
@media(min-width:960px){.nav{display:flex;gap:var(--s2);margin-left:auto;margin-right:var(--s3)}}

/* Hero: the spit */
.hero{position:relative;background:var(--pom);color:var(--cream);padding:var(--s3) 0 calc(var(--s7) + var(--edge))}
.hero::after,.family::before{content:"";position:absolute;left:0;right:0;height:var(--edge);background:var(--cream);-webkit-mask:url(../images/torn-bottom.svg) 0 0/240px var(--edge) repeat-x;mask:url(../images/torn-bottom.svg) 0 0/240px var(--edge) repeat-x}
.hero::after{bottom:0;background:var(--cream);-webkit-mask:url(../images/torn-top.svg) 0 0/240px var(--edge) repeat-x;mask:url(../images/torn-top.svg) 0 0/240px var(--edge) repeat-x}
.hero-in{display:grid;gap:var(--s3) var(--s3);grid-template-columns:38% 1fr;grid-template-areas:"spit kick" "spit title" "lede lede" "act act";align-items:center}
.hero-copy{display:contents}
.hero-copy .kick{grid-area:kick;align-self:end}
.hero-copy h1{grid-area:title;align-self:start}
.hero-copy .lede{grid-area:lede}
.hero-copy .actions{grid-area:act}
.spit{grid-area:spit;position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--s2)}
.spit svg{width:100%;height:auto;display:block;overflow:visible}
.lede{margin-top:var(--s2)}
.spit-pause{min-height:44px;padding:0 var(--s3);border-radius:999px;border:2px solid var(--cream);background:var(--pom-d);color:var(--cream);font:700 .875rem/1 var(--body);cursor:pointer}
.js .spit-pause{display:inline-flex;align-items:center}
.spit-pause[hidden]{display:none}
.kick{font-weight:700;font-size:.875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cream)}
h1{font-size:clamp(2rem,9.4vw,4.05rem);line-height:1.02}
.lede{font-size:var(--t1);line-height:1.45;max-width:30ch}
.actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s2)}
@keyframes drift{to{transform:translateX(-150px)}}
.drift{animation:drift 16s linear infinite}
html:not(.js) .drift{animation-iteration-count:6}
.spit.is-paused .drift{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.drift{animation:none}.spit-pause{display:none!important}}
@media(min-width:900px){
  .hero{padding:var(--s6) 0 calc(var(--s8) + var(--edge))}
  .hero-in{grid-template-columns:minmax(260px,5fr) 7fr;grid-template-areas:none;gap:var(--s7)}
  .spit{grid-area:auto}
  .hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4)}
  .hero-copy .kick,.hero-copy h1,.hero-copy .lede,.hero-copy .actions{grid-area:auto}
  .spit svg{height:min(580px,72vh);width:auto;margin-inline:auto}
  h1{font-size:clamp(3.24rem,7.6vw,5.6rem)}
}

/* Counter */
.counter{background:var(--cream);padding:var(--s6) 0 var(--s7)}
.counter-in{display:grid;gap:var(--s5);align-items:center}
.counter-pic{margin:0;position:relative}
.counter-pic img{width:100%;height:auto;border-radius:6px;box-shadow:12px 12px 0 var(--pom)}
.counter-copy{display:grid;gap:var(--s3);padding-top:var(--s3)}
h2{font-size:var(--t3);color:var(--pom);text-wrap:balance}
.counter-copy p{max-width:44ch}
@media(min-width:900px){.counter-in{grid-template-columns:7fr 5fr;gap:var(--s7)}.counter-copy{padding-top:0}h2{font-size:var(--t4)}}

/* Menu strips: torn pita */
.menu{background:var(--cream);padding:var(--s6) 0 var(--s8)}
.menu .wrap{margin-bottom:var(--s5)}
.slips{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4);max-width:1180px;margin-inline:auto;padding-inline:var(--s3)}
.slip{display:grid;grid-template-columns:116px 1fr;align-items:stretch;background:var(--pita);color:var(--ink);padding-bottom:var(--edge);-webkit-mask:linear-gradient(#000 0 0) 0 0/100% calc(100% - var(--edge)) no-repeat,url(../images/torn-bottom.svg) 0 100%/240px var(--edge) repeat-x;mask:linear-gradient(#000 0 0) 0 0/100% calc(100% - var(--edge)) no-repeat,url(../images/torn-bottom.svg) 0 100%/240px var(--edge) repeat-x}
.slip img{width:100%;height:100%;min-height:116px;object-fit:cover}
.slip-t{padding:var(--s3);display:grid;gap:var(--s2);align-content:center}
.slip h3{font-size:var(--t1);color:var(--pom)}
.slip p{font-size:1rem;line-height:1.5}
.slip--b,.slip--d{background:var(--pom);color:var(--cream)}
.slip--b h3,.slip--d h3{color:var(--cream)}
.slip--e{grid-template-columns:1fr}
.slip--b{margin-left:var(--s4)}
.slip--c{margin-right:var(--s3)}
.slip--d{margin-left:var(--s5)}
.slip--e{margin-right:var(--s6)}
@media(min-width:760px){
  .slips{gap:var(--s5)}
  .slip{grid-template-columns:minmax(220px,38%) 1fr}
  .slip img{min-height:220px;max-height:300px}
  .slip-t{padding:var(--s4) var(--s5);gap:var(--s3)}
  .slip h3{font-size:var(--t3)}
  .slip p{font-size:var(--t0);max-width:40ch}
  .slip--a{width:100%}
  .slip--b{width:88%;margin-left:auto;grid-template-columns:1fr minmax(220px,38%)}
  .slip--b img{grid-column:2;grid-row:1}
  .slip--b .slip-t{grid-column:1;grid-row:1}
  .slip--c{width:94%;margin-right:auto}
  .slip--d{width:82%;margin-left:auto;grid-template-columns:1fr minmax(220px,38%)}
  .slip--d img{grid-column:2;grid-row:1}
  .slip--d .slip-t{grid-column:1;grid-row:1}
  .slip--e{width:68%;margin-right:auto;margin-left:0;grid-template-columns:1fr}
  .slip--e .slip-t{padding:var(--s5)}
}

/* Family meals: six plates fill */
.family{position:relative;background:var(--pom);color:var(--cream);padding:calc(var(--s7) + var(--edge)) 0 calc(var(--s7) + var(--edge))}
.family::before{top:-1px;background:var(--cream);-webkit-mask:url(../images/torn-bottom.svg) 0 0/240px var(--edge) repeat-x;mask:url(../images/torn-bottom.svg) 0 0/240px var(--edge) repeat-x}
.family::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:var(--edge);background:var(--pita);-webkit-mask:url(../images/torn-top.svg) 0 0/240px var(--edge) repeat-x;mask:url(../images/torn-top.svg) 0 0/240px var(--edge) repeat-x}
.family h2{color:var(--cream)}
.family-in{display:grid;gap:var(--s5)}
.family-copy{display:grid;gap:var(--s3);justify-items:start}
.family-copy p{max-width:40ch;font-size:var(--t1);line-height:1.45}
.family-pic{margin:0}
.family-pic img{width:100%;border-radius:6px;border:3px solid var(--cream)}
.table{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);padding:var(--s4);background:var(--pom-d);border-radius:6px}
.plate{width:100%;height:auto;display:block;overflow:visible}
.plate .food{transform-box:fill-box;transform-origin:center}
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    @keyframes fillup{from{transform:scale(.35)}to{transform:scale(1)}}
    .plate .food{animation:fillup linear both;animation-timeline:view();animation-range:entry calc(var(--i)*7%) entry calc(55% + var(--i)*7%)}
  }
}
@media(min-width:900px){
  .family-in{grid-template-columns:5fr 7fr;align-items:center;gap:var(--s6)}
  .family-pic{grid-column:2;grid-row:1}
  .family-copy{grid-column:1;grid-row:1}
  .table{grid-column:1/-1;grid-row:2;grid-template-columns:repeat(6,1fr)}
  h2{font-size:var(--t4)}
}

/* Reviews */
.reviews{background:var(--pita);padding:var(--s7) 0 calc(var(--s7) + var(--edge))}
.panels{display:grid;gap:var(--s4);margin-top:var(--s5)}
.panel{margin:0;background:var(--paper);border-left:10px solid var(--pom);padding:var(--s4);box-shadow:0 4px 0 rgba(42,26,22,.15);display:flex;flex-direction:column;gap:var(--s3);justify-content:space-between}
.panel blockquote{margin:0}
.panel p{font-size:var(--t0);line-height:1.6}
.panel--lg p{font-size:var(--t1);line-height:1.5}
.panel figcaption{font-weight:700;font-size:.875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pom)}
@media(min-width:900px){
  .panels{grid-template-columns:repeat(12,1fr)}
  .panel--lg{grid-column:1/8;grid-row:1/3;padding:var(--s6)}
  .panel:nth-of-type(2){grid-column:8/13;grid-row:1}
  .panel:nth-of-type(3){grid-column:8/13;grid-row:2}
  .panel--lg p{font-size:var(--t2)}
}

/* Visit */
.visit{background:var(--pom-d);color:var(--cream);padding:var(--s7) 0 var(--s7);position:relative}
.visit h2{color:var(--cream)}
.visit-in{display:grid;gap:var(--s5);align-items:end}
.visit-copy{display:grid;gap:var(--s3);justify-items:start}
address{font-style:normal;display:grid;gap:2px;font-size:var(--t1);line-height:1.4}
.arch{margin:0}
.arch img{width:100%;height:340px;object-fit:cover;border-radius:999px 999px 0 0;border:3px solid var(--cream)}
@media(min-width:900px){.visit-in{grid-template-columns:6fr 5fr;gap:var(--s7)}.arch img{height:460px}}

.foot{background:var(--pom-d);color:var(--cream);border-top:2px solid rgba(248,241,226,.35);padding:var(--s4) 0 calc(var(--s4) + 96px);font-size:.9375rem}
@media(min-width:720px){.foot{padding-bottom:var(--s5)}}

/* Sticky phone bar */
.dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;gap:var(--s2);padding:var(--s2) var(--s3);background:var(--pom-d);border-top:2px solid var(--cream)}
.dock .btn{flex:1;min-height:52px;padding:0 var(--s2);box-shadow:none}
@media(min-width:720px){.dock{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}.btn-call:hover{transform:none}}

/* 404 */
.nf{background:var(--pom);color:var(--cream);min-height:70vh;display:flex;align-items:center}
.nf-in{width:100%;max-width:1180px;margin-inline:auto;padding:var(--s7) var(--s3);display:flex;flex-direction:column;gap:var(--s4);align-items:flex-start}
.nf h1{font-size:clamp(2.6rem,8vw,4.05rem);max-width:14ch}
.nf p{font-size:var(--t1);max-width:32ch}
@media(max-width:359px){
  .slip{grid-template-columns:84px 1fr}
  .slip-t{padding:12px;min-width:0}
  .slip h3{font-size:1.2rem}
  .dock{padding-inline:8px}
  .dock .btn{font-size:.9375rem;padding:0 6px}
}