@font-face{font-family:"Epilogue";src:url(../fonts/epilogue-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Noto Sans Georgian";src:url(../fonts/noto-georgian-900.woff2) format("woff2");font-weight:900;font-display:swap;unicode-range:U+10A0-10FF}

:root{
  --red:#A8101C; --red-deep:#8A0C16;
  --paper:#F3F2EF; --white:#FBFBFA;
  --counter:#E4E2DE;
  --sand:#D4C2A4;
  --ink:#1B1412;
  --pad:clamp(20px,3.4vw,48px);
  --gap:clamp(96px,12vw,176px);
  --settle:cubic-bezier(.22,1,.36,1);
  --step-small:clamp(.875rem,.84rem + .12vw,.9375rem);
  --step-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --step-lead:clamp(1.3125rem,1.15rem + .7vw,1.75rem);
  --step-head:clamp(2.5rem,1.2rem + 5vw,5.5rem);
  --nav-h:72px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
html[data-motion="off"]{scroll-behavior:auto}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--step-body)/1.5 "Epilogue",system-ui,sans-serif;font-optical-sizing:auto;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,figure,blockquote,ul,dl,dd{margin:0;padding:0}
ul{list-style:none}
a{color:inherit;text-underline-offset:.18em}
button{font:inherit;color:inherit}
::selection{background:var(--red);color:var(--white)}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}
h2{font-size:var(--step-head);font-weight:900;letter-spacing:-.04em;line-height:.95;text-wrap:balance}
h3{font-size:var(--step-lead);font-weight:900;letter-spacing:-.02em;line-height:1.15}
.lead{font-size:var(--step-lead);line-height:1.3;font-weight:500;letter-spacing:-.01em}
figcaption{font-size:var(--step-small);margin-top:10px;line-height:1.35}

.skip{position:fixed;left:12px;top:-60px;z-index:60;background:var(--ink);color:var(--white);padding:10px 16px}
.skip:focus{top:12px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px 10px;border-radius:999px;font-weight:500;text-decoration:none;white-space:nowrap;border:0;font-size:var(--step-body);transition:transform 160ms ease-out,background-color 200ms ease,color 200ms ease}
.btn:active{transform:scale(.97)}
.btn--red{background:var(--red);color:var(--white)}
.btn--paper{background:var(--white);color:var(--ink)}
.btn--line{background:var(--counter);color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .btn--red:hover{background:var(--red-deep)}
  .btn--paper:hover{background:var(--sand)}
  .btn--line:hover{background:var(--sand)}
}

/* Nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:40;height:var(--nav-h);display:flex;align-items:center;gap:clamp(14px,2.4vw,32px);padding:0 var(--pad);color:var(--white);transition:background-color 240ms ease,color 240ms ease}
.nav.is-solid{background:var(--paper);color:var(--ink)}
.nav__name{font-weight:900;font-size:1.375rem;letter-spacing:-.03em;text-decoration:none;margin-right:auto}
.nav__links{display:flex;gap:clamp(14px,2vw,28px)}
.nav__links a,.nav__motion{text-decoration:none;font-size:var(--step-small);font-weight:500;min-height:44px;display:inline-flex;align-items:center}
.nav__links a{text-underline-offset:.3em}
.nav__motion{background:none;border:0;cursor:pointer;padding:0}
@media (hover:hover) and (pointer:fine){.nav__links a:hover,.nav__motion:hover{text-decoration:underline}}
.nav__call-short{display:none}

/* Hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;color:var(--white);background:#2A201C;overflow:hidden}
.hero__pic{position:absolute;inset:0}
.hero__pic img{width:100%;height:100%;object-fit:cover;object-position:50% 0;animation:settle 1300ms var(--settle) both}
/* Scrim from the awning's and pavement's own dark colour, top and bottom. */
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(32,22,18,.62) 0,rgba(32,22,18,0) 15%,rgba(32,22,18,0) 42%,rgba(32,22,18,.82) 74%,rgba(32,22,18,.94) 100%)} /* taste-skill-ignore: scrim over the photo */
.hero__body{position:relative;z-index:2;padding:0 var(--pad) clamp(18px,3vh,32px)}
.hero__name{font-size:min(calc((100vw - 2*var(--pad))/5.62),44vh);font-weight:900;letter-spacing:-.05em;line-height:.86;white-space:nowrap;overflow:hidden;margin:0 0 clamp(14px,2.4vh,26px) -.03em;padding-top:.06em}
.hero__name span{display:block;animation:rise-mask 1100ms var(--settle) 120ms both}
.hero__row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;flex-wrap:wrap}
.hero__text{max-width:46rem;flex:1 1 30rem}
.hero__line{font-size:var(--step-lead);line-height:1.25;font-weight:500;letter-spacing:-.01em}
.hero__facts{margin-top:8px}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap}
@keyframes settle{from{transform:scale(1.04)}to{transform:none}}
@keyframes rise-mask{from{transform:translateY(102%)}to{transform:none}}

/* The word: red */
.word{background:var(--red);color:var(--white);padding:var(--gap) var(--pad);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px) clamp(32px,6vw,96px);align-items:end}
.word__ka{grid-column:1/-1;font-family:"Noto Sans Georgian","Epilogue",sans-serif;font-weight:900;font-size:calc((100vw - 2*var(--pad))/6.04);line-height:1;letter-spacing:-.02em;white-space:nowrap}
.word__pic img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 40%}
.word__text{display:grid;gap:clamp(18px,2.4vw,28px);justify-items:start;max-width:40rem}

/* Shaurma: paper */
.shaurma{padding:var(--gap) var(--pad) 0}
.shaurma__head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px clamp(32px,6vw,96px);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.shaurma__copy{display:grid;gap:14px}
.band{display:grid;grid-template-columns:3fr 6fr 3.4fr;gap:clamp(12px,1.6vw,24px);align-items:start}
.band img{width:100%;object-fit:cover}
.band__a img{aspect-ratio:3/4}
.band__b img{aspect-ratio:4/3}
.band__c{margin-top:clamp(40px,8vw,120px)}
.band__c img{aspect-ratio:900/779}

/* Rail */
.case{padding:var(--gap) 0}
.case__head{display:flex;align-items:flex-end;justify-content:flex-start;gap:20px clamp(32px,5vw,72px);padding:0 var(--pad);margin-bottom:clamp(28px,3.4vw,48px)}
.case__ctl{display:flex;align-items:center;gap:12px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.arrow{width:48px;height:48px;border-radius:50%;border:0;background:var(--counter);display:grid;place-items:center;cursor:pointer;transition:transform 160ms ease-out,background-color 200ms ease}
.arrow:active{transform:scale(.95)}
.arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4}
@media (hover:hover) and (pointer:fine){.arrow:hover{background:var(--sand)}}
.rail{display:flex;gap:clamp(12px,1.6vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad) 8px;scroll-padding:0 var(--pad);scrollbar-width:thin;scrollbar-color:var(--red) transparent;overscroll-behavior-x:contain}
.plate{flex:0 0 clamp(270px,31vw,470px);scroll-snap-align:start;display:grid;gap:8px;align-content:start}
.plate img{width:100%;aspect-ratio:1/1;object-fit:cover;margin-bottom:8px}
.plate__price{font-weight:900;font-size:var(--step-lead);letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* The list */
.list{background:var(--counter);padding:var(--gap) var(--pad);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.list__side{display:grid;gap:clamp(18px,2vw,26px);align-self:stretch;align-content:start}
.list__side h2{font-size:clamp(2.5rem,1rem + 3.6vw,4.25rem)}
.list__side .lead{font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);font-weight:400;line-height:1.4;letter-spacing:0;max-width:30rem}
.ticket{max-width:400px;position:sticky;top:calc(var(--nav-h) + 12px)}
.ticket__paper{background:var(--white);padding:22px 22px 16px;display:grid;gap:10px}
.ticket__tear{display:block;width:100%;height:10px;fill:var(--white)}
.ticket__shop{font-weight:900;text-align:center;text-transform:uppercase;font-size:1.0625rem;letter-spacing:.01em}
.ticket__addr{text-align:center;font-size:var(--step-small);line-height:1.35;margin-top:-6px}
.ticket__empty{padding:12px 0;text-align:center;font-weight:500}
.ticket__lines{display:grid;gap:4px;max-height:min(26vh,230px);overflow-y:auto;overscroll-behavior:auto}
.ticket__lines li{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;font-size:var(--step-small);animation:print 220ms var(--settle)}
.qty{display:inline-flex;align-items:center;gap:2px;font-variant-numeric:tabular-nums}
.qty button{width:32px;height:32px;border:0;border-radius:50%;background:var(--counter);cursor:pointer;display:grid;place-items:center;line-height:1;transition:transform 160ms ease-out}
.qty button:active{transform:scale(.95)}
.qty span{min-width:1.3em;text-align:center}
.amt{font-variant-numeric:tabular-nums;font-weight:500;min-width:3.6em;text-align:right}
.ticket__sums{display:grid;gap:2px;font-size:var(--step-small);padding-top:8px}
.ticket__sums div{display:flex;justify-content:space-between;gap:12px}
.ticket__sums dd{font-variant-numeric:tabular-nums}
.ticket__sums .is-total{font-weight:900;font-size:var(--step-body);margin-top:4px}
.ticket__note{font-size:var(--step-small);text-align:center;line-height:1.35}
.ticket .btn{width:100%;white-space:normal}
.ticket__clear{background:none;border:0;text-decoration:underline;text-underline-offset:.2em;min-height:44px;cursor:pointer;font-size:var(--step-small)}
@keyframes print{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.group{display:grid;gap:2px;margin-bottom:clamp(32px,4vw,52px)}
.group h3{margin-bottom:12px;font-size:clamp(1.5rem,1.2rem + 1vw,2.125rem)}
.item{display:grid;grid-template-columns:1fr auto;gap:2px 20px;width:100%;text-align:left;background:transparent;border:0;padding:12px 14px;margin:0 -14px;width:calc(100% + 28px);cursor:pointer;min-height:48px;transition:background-color 160ms ease,transform 160ms ease-out}
.item:active{transform:scale(.99)}
.item__name{font-weight:500;font-size:var(--step-body);line-height:1.25}
.item__price{font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap}
.item__desc{grid-column:1/-1;font-size:var(--step-small);line-height:1.35}
.item[data-n]{background:var(--white)}
.item[data-n] .item__name::after{content:"  × " attr(data-count);font-weight:900;color:var(--red)}
@media (hover:hover) and (pointer:fine){.item:hover{background:var(--paper)}}
.list__fine{font-size:var(--step-small);max-width:40rem}

/* Sand */
.sand{background:var(--sand);padding:var(--gap) var(--pad);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,3vw,44px) clamp(12px,1.6vw,24px);align-items:start}
.sand__h{grid-column:1/-1;font-size:calc((100vw - 2*var(--pad))/6.9);line-height:.95;letter-spacing:-.05em;white-space:nowrap}
.sand__big{grid-column:1/6;grid-row:2/4}
.sand__big img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 45%}
.sand__lead{grid-column:7/-1;grid-row:2}
.sand__lead p{font-size:clamp(1.5rem,1rem + 1.5vw,2.25rem);line-height:1.2;font-weight:500;letter-spacing:-.02em}
cite{display:block;font-style:normal;font-size:var(--step-small);margin-top:10px;font-weight:500}
.sand__small{grid-column:6/9;grid-row:3;align-self:end}
.sand__small img{width:100%;aspect-ratio:3/4;object-fit:cover}
.sand__quotes{grid-column:9/-1;grid-row:3;display:grid;gap:32px;align-self:end}
.sand__quotes p{font-size:var(--step-lead);line-height:1.25;font-weight:500;letter-spacing:-.01em}

/* Visit: ink */
.visit{background:var(--ink);color:var(--white);padding:var(--gap) var(--pad)}
.visit__addr{font-size:calc((100vw - 2*var(--pad))/7.36);line-height:.9;letter-spacing:-.05em;margin-left:-.03em}
.visit__addr span{display:block;white-space:nowrap}
.visit__status{font-size:var(--step-lead);font-weight:500;margin:clamp(20px,3vw,36px) 0 clamp(40px,5vw,72px)}
.visit__grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,3fr) minmax(0,5fr);gap:32px clamp(24px,3.4vw,56px);align-items:start}
.visit__col{display:grid;gap:10px}
.visit__col h3:not(:first-child){margin-top:20px}
.visit__pic img{width:100%;aspect-ratio:8/5;object-fit:cover}
.visit__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(36px,4vw,56px)}

/* Footer */
.foot{background:var(--red);color:var(--white);padding:clamp(48px,6vw,80px) var(--pad) clamp(24px,3vw,36px);overflow:hidden}
.foot__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;font-weight:500}
.foot__name{font-size:calc((100vw - 2*var(--pad))/5.62);font-weight:900;letter-spacing:-.05em;line-height:.9;white-space:nowrap;margin:clamp(32px,5vw,64px) 0 clamp(16px,2vw,24px) -.03em}
.foot__note{font-size:var(--step-small);max-width:65ch}

/* Phone bar */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:35;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:var(--paper);display:none;flex-direction:column;gap:6px;transition:transform 240ms var(--settle)}
.bar.is-away{transform:translateY(110%)}
.bar__row{display:grid;grid-template-columns:1fr 1.1fr 1.1fr;gap:6px}
.bar__row .btn{padding:12px 6px 10px;font-size:1rem}
.bar__sum{display:flex;align-items:center;justify-content:center;font-weight:500;padding:6px;min-height:44px;text-decoration:none;background:var(--ink);color:var(--white)}
.bar__sum[hidden]{display:none}

/* Entrances */
.js .rise{opacity:0;transform:translateY(22px);transition:opacity 800ms var(--settle),transform 800ms var(--settle)}
.js .rise.in{opacity:1;transform:none}

html[data-motion="off"] .rise{opacity:1;transform:none;transition:none}
html[data-motion="off"] .hero__pic img,html[data-motion="off"] .hero__name span,html[data-motion="off"] .ticket__lines li{animation:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rise{opacity:1;transform:none;transition:none}
  .hero__pic img,.hero__name span,.ticket__lines li{animation:none}
}

@media (max-width:980px){
  .nav__links{display:none}
  .list{grid-template-columns:1fr}
  .ticket{position:static}
  .list__menu{order:0}
  .ticket{max-width:none}
  .visit__grid{grid-template-columns:1fr 1fr}
  .visit__pic{grid-column:1/-1}
}
@media (max-width:700px){
  :root{--nav-h:64px}
  body{padding-bottom:0}
  .bar{display:flex}
  .nav__call-long{display:none}
  .nav__call-short{display:inline}
  .nav .btn{padding:10px 18px 8px;min-height:44px}
  .hero__pic img{object-position:50% 0}
  .hero::after{background:linear-gradient(180deg,rgba(32,22,18,.6) 0,rgba(32,22,18,0) 12%,rgba(32,22,18,0) 42%,rgba(32,22,18,.86) 66%,rgba(32,22,18,.96) 100%)} /* taste-skill-ignore: scrim over the photo */
  .hero__body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .hero__cta .btn--red{display:none}
  .hero__cta{display:none}
  .word{grid-template-columns:1fr;align-items:start}
  .shaurma__head{grid-template-columns:1fr}
  .band{grid-template-columns:1fr 1fr}
  .band__b{grid-column:1/-1;grid-row:1}
  .band__c{margin-top:0}
  .band__a img,.band__c img{aspect-ratio:900/779}
  .band__a img{object-position:50% 40%}
  .case__head{flex-direction:column;align-items:flex-start}
  .plate{flex-basis:78vw}
  .sand{grid-template-columns:repeat(6,minmax(0,1fr))}
  .sand__big{grid-column:1/-1;grid-row:auto}
  .sand__lead{grid-column:1/-1;grid-row:auto}
  .sand__small{grid-column:1/4;grid-row:auto;align-self:start}
  .sand__quotes{grid-column:1/-1;grid-row:auto}
  .sand__small{grid-column:1/5}
  .visit__grid{grid-template-columns:1fr}
  .visit__cta .btn{flex:1 1 100%}
  .foot{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
  .foot__cols{grid-template-columns:1fr 1fr}
  .foot__cols p:last-child{grid-column:1/-1}
}
