@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-tight-500-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-tight-500-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-tight-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-tight-600-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-tight-600-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-tight-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/source-serif-4-400-i-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/source-serif-4-400-i-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/source-serif-4-400-i-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/source-serif-4-400-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/source-serif-4-400-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/source-serif-4-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Тематическое кафе: шаблон главной в манере Care of Chan (кремовый фон, кислотно-жёлтый гротеск поверх фото зала, редакционная колонка с антиквой) */
:root{
  --ground:#f0e4d8; --ink:#0d0c0a; --acid:#e8ff01; --olive:#b4c400; --night:#16130e; --paper:#f7efe4; --soft:#e6d8ca;
  --sans:'Inter Tight',"Helvetica Neue",Arial,sans-serif; --serif:'Source Serif 4',Georgia,"Times New Roman",serif;
  --m:14px; --text:clamp(18px,1.32vw,20px); --small:15px; --mid:clamp(22px,2.1vw,30px);
  --disp:clamp(40px,11.1vw,166px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:64px}
body{margin:0;background:var(--ground);color:var(--ink);font:400 var(--text)/1.42 var(--serif);letter-spacing:-.01em;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.book :focus-visible,.hero :focus-visible{outline-color:var(--acid)}
::selection{background:var(--acid);color:var(--ink)}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--acid);padding:8px 12px;font:600 var(--small)/1 var(--sans)}
.skip:focus{left:8px}

/* шапка поверх фото: ссылки капслоком слева и справа, знак по центру — как у референса */
.hdr{position:absolute;inset:0 0 auto;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px var(--m);color:var(--paper)}
.hdr nav{display:flex;gap:20px}
.hdr__r{justify-content:flex-end}
.hdr a,.bar a:not(.btn),.ftr a{font:600 var(--small)/1.2 var(--sans);text-transform:uppercase;text-decoration:none;letter-spacing:-.01em}
.hdr nav a{position:relative;padding:4px 0}
.hdr nav a::after,.bar__nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.hdr nav a:hover::after,.bar__nav a:hover::after{transform:scaleX(1)}
.mark{font:400 22px/1 var(--serif);letter-spacing:.06em;text-decoration:none;text-transform:uppercase;white-space:nowrap}
.mark small{font-size:1em;font-style:italic;text-transform:lowercase;letter-spacing:0}
.mark--sm{font-size:22px}
.burger{display:none;justify-self:end;border:0;background:var(--acid);color:var(--ink);font:600 var(--small)/1 var(--sans);text-transform:uppercase;padding:11px 14px;border-radius:4px;cursor:pointer}

.bar{position:fixed;inset:0 0 auto;z-index:30;display:flex;align-items:center;gap:24px;padding:9px var(--m);background:var(--ground);transform:translateY(-102%);transition:transform .4s var(--ease)}
.bar.is-on{transform:none}
.bar__nav{display:flex;gap:20px;margin-left:auto}
.bar__nav a{position:relative;padding:4px 0}

.panel{position:fixed;inset:0;z-index:60;background:var(--acid);color:var(--ink);padding:18px var(--m) 28px;display:flex;flex-direction:column;overflow:auto}
.panel[hidden]{display:none}
.panel__x{align-self:flex-end;border:0;background:var(--ink);color:var(--acid);font:600 var(--small)/1 var(--sans);text-transform:uppercase;padding:11px 14px;border-radius:4px;cursor:pointer}
.panel nav{display:flex;flex-direction:column;gap:6px;margin-top:28px}
.panel nav a{font:500 clamp(34px,10vw,56px)/1.05 var(--sans);text-transform:uppercase;text-decoration:none;letter-spacing:-.03em}
.panel__tel{margin-top:auto;font:600 22px/1.2 var(--sans)}

/* кнопки: плоская заливка, скругление 4px как у кнопки референса */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;border:0;border-radius:4px;background:var(--acid);color:var(--ink);font:600 19px/1 var(--sans);text-decoration:none;cursor:pointer;transition:transform .2s var(--ease),background .2s}
.btn:hover{background:#f4ff6a}
.btn:active{transform:scale(.97)}
.btn--sm{min-height:40px;padding:0 16px;font-size:var(--small);margin-left:8px}
.btn--big{min-height:60px;width:100%;font-size:19px}

/* первый экран */
.hero{position:relative;min-height:max(640px,100svh);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;color:var(--paper);background:var(--night)}
.hero__media,.story__media{position:absolute;inset:0;overflow:hidden}
.hero__media img,.story__media img{width:100%;height:100%;object-fit:cover}
.hero__media::after,.story__media::after{content:"";position:absolute;inset:0;background:rgba(10,8,5,.42)}
.hero__h,.story__h,.big{position:relative;margin:0;font:500 var(--disp)/.9 var(--sans);text-transform:uppercase;letter-spacing:-.045em}
.hero__h,.story__h{color:var(--acid);padding:0 var(--m)}
.ln{display:block;overflow:hidden;padding:.12em 0 .04em;margin-top:-.12em}
.ln>span{display:inline-block;white-space:nowrap}
.ln--fit>span{display:block;text-align-last:justify;text-align:justify}
.hero__h{margin-top:auto;margin-bottom:auto;padding-top:120px}
.hero__foot{position:relative;display:grid;grid-template-columns:2fr 2fr;gap:var(--m);align-items:end;padding:28px var(--m) 22px}
.hero__lead{margin:0;max-width:30ch;font-size:var(--mid);line-height:1.2}
.hero__act{display:flex;align-items:center;gap:22px;justify-content:flex-end}
.hero__tel{font:600 var(--text)/1 var(--sans);text-transform:uppercase;text-decoration:none;border-bottom:2px solid var(--acid);padding:6px 0}

/* редакционная колонка: x = 25% ширины, как у референса (360 из 1440) */
.col{margin-left:25%;width:min(50%,760px);padding-right:var(--m)}
.col p{margin:0 0 .9em}
.about{padding:110px 0 150px}
.about__line{margin:0 0 .75em!important}
.about__line:first-of-type{margin-top:1.8em!important}
.u{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.about a[href^="tel"],.place a[href^="tel"]{text-decoration:none;white-space:nowrap}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--m);width:min(58.4%,840px);margin:84px auto 104px;padding:0}
.pair figure{margin:0;overflow:hidden;background:var(--soft)}
.pair img{width:100%;aspect-ratio:3/5;object-fit:cover}
.note__who{font:600 var(--small)/1.3 var(--sans);margin-bottom:12px!important}
.note__txt{font-style:italic}

/* второй большой кадр с заголовком */
.story{position:relative;min-height:min(86vh,820px);display:flex;align-items:center;overflow:hidden;background:var(--night)}
.story__media img{transform-origin:center}
.hall{padding:110px 0 160px}
.collage{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--m);padding:70px var(--m) 0;align-items:start}
.collage figure{margin:0}
.collage img{width:100%;object-fit:cover;background:var(--soft)}
.collage figcaption{font:italic 400 var(--small)/1.35 var(--serif);margin-top:10px}
.c1{grid-column:1/7}.c1 img{aspect-ratio:3/2}
.c2{grid-column:8/11;margin-top:120px!important}.c2 img{aspect-ratio:4/5}
.c3{grid-column:2/5;margin-top:-40px!important}.c3 img{aspect-ratio:4/5}
.c4{grid-column:6/13;margin-top:80px!important}.c4 img{aspect-ratio:3/2}

/* меню */
.menu{padding:40px 0 170px}
.menu__head{display:grid;grid-template-columns:1fr 1fr;gap:var(--m);align-items:end;padding:0 var(--m)}
.big{color:var(--ink)}
.menu__lead{margin:0 0 .6em;max-width:30ch;font-size:var(--mid);line-height:1.2;justify-self:end}
.menu__grid{display:grid;grid-template-columns:1fr 2fr 1fr;gap:var(--m);padding:56px var(--m) 0;align-items:start}
.tabs{display:flex;flex-direction:column;align-items:flex-start;gap:2px;position:sticky;top:76px}
.tab{border:0;background:none;padding:5px 0;font:600 var(--small)/1.25 var(--sans);text-transform:uppercase;cursor:pointer;color:var(--ink);opacity:.48;transition:opacity .2s;text-align:left}
.tab:hover{opacity:1}
.tab[aria-selected="true"]{opacity:1;background:var(--acid);padding:5px 8px;margin-left:-8px;border-radius:3px}
.menu__list{padding:0 20px}
.dishes{list-style:none;margin:0;padding:0;columns:2;column-gap:40px}
.dish{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:baseline;break-inside:avoid;padding:9px 0}
.dish__n{line-height:1.25}
.dish__n[data-photo]{cursor:zoom-in;text-decoration:underline;text-decoration-color:rgba(13,12,10,.35);text-underline-offset:4px}
.dish__p{font:500 var(--small)/1 var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.add{width:34px;height:34px;border:0;border-radius:4px;background:var(--soft);font:500 22px/1 var(--sans);cursor:pointer;transition:background .2s,transform .2s;align-self:center}
.add:hover{background:var(--acid)}
.add:active{transform:scale(.9)}
.add.is-in{background:var(--ink);color:var(--acid)}
.menu__note{margin:28px 0 0;font-size:var(--small);color:#4a4239}
.menu__photo{margin:0;position:sticky;top:76px}
.menu__photo img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--soft)}
.menu__photo figcaption{font:italic 400 var(--small)/1.35 var(--serif);margin-top:10px}

/* бронь: тёмное поле, кислотный заголовок, кремовый «талон» */
.book{background:var(--night);color:var(--paper);padding:120px 0 150px}
.big--acid{color:var(--acid);padding:0 var(--m)}
.book__grid{display:grid;grid-template-columns:1fr 2fr 1fr;gap:var(--m);padding:70px var(--m) 0;align-items:start}
.form{grid-column:2;padding:0 20px}
.seg{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.seg label,.chips label{position:relative;cursor:pointer}
.seg input,.chips input{position:absolute;opacity:0;width:1px;height:1px}
.seg span{display:inline-block;padding:13px 18px;border-radius:4px;background:#2a251d;font:600 var(--small)/1 var(--sans);text-transform:uppercase;transition:background .2s,color .2s}
.seg input:checked+span{background:var(--acid);color:var(--ink)}
.seg input:focus-visible+span,.chips input:focus-visible+span{outline:3px solid var(--acid);outline-offset:2px}
.fs{border:0;margin:0 0 24px;padding:0;min-width:0}
.fs legend,.fld>span,.pre__h{display:block;padding:0;margin-bottom:10px;font:600 var(--small)/1.2 var(--sans);text-transform:uppercase;color:var(--paper)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span,.chips button{display:inline-block;padding:10px 13px;border:0;border-radius:4px;background:#2a251d;color:var(--paper);font:500 var(--small)/1.1 var(--sans);cursor:pointer;transition:background .2s,color .2s}
.chips span:hover,.chips button:hover{background:#3a3327}
.chips input:checked+span,.chips button[aria-pressed="true"]{background:var(--acid);color:var(--ink)}
.chips button:disabled{opacity:.3;cursor:not-allowed}
.chips--time{max-height:none}
.fs__hint{margin:10px 0 0;font-size:var(--small);color:#cfc3b4}
.row{display:flex;gap:24px;flex-wrap:wrap}
.row>*{flex:1 1 220px}
.fs--grow{flex:3 1 300px}
.step{display:inline-flex;align-items:center;gap:6px}
.step button{width:44px;height:44px;border:0;border-radius:4px;background:#2a251d;color:var(--paper);font:500 22px/1 var(--sans);cursor:pointer}
.step button:hover{background:var(--acid);color:var(--ink)}
.step output{min-width:40px;text-align:center;font:500 19px/1 var(--sans)}
.step__l{margin-right:10px;font:600 var(--small)/1.2 var(--sans);text-transform:uppercase}
.fld{display:block;margin:0 0 22px}
.fld input{display:block;width:100%;height:52px;padding:0 14px;border:0;border-radius:4px;background:var(--paper);color:var(--ink);font:400 var(--text)/1 var(--serif)}
.fld input::placeholder{color:#7d7366}
.fld input:focus{outline:3px solid var(--acid);outline-offset:1px}
.fld input.is-bad{outline:3px solid #ff6b4a}
.pre{margin:4px 0 22px}
.pre__list{list-style:none;margin:0;padding:0}
.pre__list li{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:7px 0}
.pre__list .pre__empty{display:block;color:#cfc3b4;font-style:italic}
.pre__list button{width:32px;height:32px;border:0;border-radius:4px;background:#2a251d;color:var(--paper);cursor:pointer;font:500 var(--text)/1 var(--sans)}
.pre__list .q{display:inline-flex;align-items:center;gap:6px;font:500 var(--small)/1 var(--sans)}
.form__msg{min-height:1.4em;margin:12px 0 0;font-size:var(--small);color:var(--acid)}
.ticket{grid-column:3;position:sticky;top:80px;background:var(--paper);color:var(--ink);padding:22px 20px 20px;border-radius:4px;transform-origin:50% 0}
.ticket__top{display:flex;justify-content:space-between;align-items:center}
.ticket__brand{font:400 22px/1 var(--serif);letter-spacing:.06em}
.ticket__brand small{font-size:1em;font-style:italic;letter-spacing:0}
.ticket__gear{width:44px;height:44px;color:var(--ink)}
.ticket__kind{margin:18px 0 14px;font:500 var(--mid)/1 var(--sans);text-transform:uppercase;letter-spacing:-.03em}
.ticket__dl{margin:0;display:grid;gap:0}
.ticket__dl div{display:grid;grid-template-columns:90px 1fr;gap:10px;padding:8px 10px;margin:0 -10px}
.ticket__dl div:nth-child(odd){background:var(--soft);border-radius:3px}
.ticket__dl dt{font:600 var(--small)/1.3 var(--sans);text-transform:uppercase}
.ticket__dl dd{margin:0;line-height:1.3}
.ticket__sum{margin:14px 0 0;font:500 var(--text)/1.3 var(--sans)}
.ticket__foot{margin:14px 0 0;font-style:italic;font-size:var(--small);color:#4a4239}
[data-only][hidden]{display:none!important}

/* адрес и окрестности */
.place{padding:130px 0 150px}
.place .big{padding:0 var(--m)}
.place__grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:var(--m);padding:60px var(--m) 0}
.place__col{grid-column:2/3;padding-right:20px}
.place__col p{margin:0 0 .9em}
.place__col--it{grid-column:3/5;font-style:italic;font-size:var(--mid);line-height:1.25;max-width:30ch}

/* подвал: кислотное поле, ссылки капслоком в три колонки и большой знак справа — как у референса */
.ftr{background:var(--acid);color:var(--ink);padding:20px var(--m) 18px}
.ftr__cols{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:var(--m);align-items:start}
.ftr__cols nav,.ftr__c{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.ftr a:hover{text-decoration:underline;text-underline-offset:3px}
.ftr__c span{font:600 var(--small)/1.2 var(--sans);text-transform:uppercase}
.ftr__fe{justify-self:end;position:relative;font:500 var(--disp)/.8 var(--sans);letter-spacing:-.06em;color:var(--olive);padding-top:26px}
.ftr__fe span{position:absolute;top:0;left:4px;font-size:var(--small);letter-spacing:0}
.ftr__cred{margin-top:8px!important;text-transform:none!important;font-weight:500!important}
.ftr__copy{margin:34px 0 0;font:600 var(--small)/1.3 var(--sans);text-transform:uppercase}

/* планшет */
@media (max-width:1100px){
  .menu__grid{grid-template-columns:1fr 1fr}
  .tabs{grid-column:1/-1;position:static;flex-direction:row;flex-wrap:wrap;gap:6px 18px}
  .tab[aria-selected="true"]{margin-left:0}
  .menu__list{padding:0}
  .dishes{columns:1}
  .book__grid{grid-template-columns:3fr 2fr}
  .form{grid-column:1;padding:0}
  .ticket{grid-column:2}
  .col{margin-left:12.5%;width:75%}
  .pair{width:calc(100% - 25%)}
  .place__col{grid-column:1/3}
  .place__col--it{grid-column:3/5}
}
/* телефон: своя композиция */
@media (max-width:760px){
  :root{--m:16px;--disp:clamp(36px,10.6vw,80px)}
  .hdr{grid-template-columns:1fr auto;padding:14px var(--m)}
  .hdr nav{display:none}
  .burger{display:inline-block}
  .mark{justify-self:start;font-size:19px}
  .bar__nav{display:none}
  .bar .btn{margin-left:auto}
  .hero{min-height:max(600px,92svh)}
  .hero__h{padding-top:90px}
  .hero__foot{grid-template-columns:1fr;gap:18px;padding-bottom:20px}
  .hero__act{justify-content:flex-start;flex-wrap:wrap}
  .col{margin:0;width:auto;padding:0 var(--m)}
  .about{padding:72px 0 96px}
  .pair{width:auto;margin:56px var(--m) 64px;gap:10px}
  .story{min-height:70vh}
  .hall{padding:72px 0 100px}
  .collage{grid-template-columns:1fr 1fr;gap:12px;padding-top:40px}
  .c1,.c4{grid-column:1/-1;margin-top:0!important}
  .c2,.c3{grid-column:auto;margin-top:0!important}
  .menu{padding:20px 0 100px}
  .menu__head{grid-template-columns:1fr}
  .menu__lead{justify-self:start}
  .menu__grid{grid-template-columns:1fr;padding-top:30px}
  .tabs{gap:6px}
  .tab{flex:none;padding:9px 11px;border-radius:3px;background:var(--soft);opacity:1}
  .tab[aria-selected="true"]{padding:9px 11px}
  .menu__photo{position:relative;top:0;order:-1;width:72%}
  .book{padding:80px 0 100px}
  .book__grid{grid-template-columns:1fr;padding-top:40px}
  .form,.ticket{grid-column:1}
  .ticket{position:relative;top:0;order:-1}
  .place{padding:90px 0 100px}
  .place__grid{grid-template-columns:1fr;padding-top:36px}
  .place__col,.place__col--it{grid-column:1;padding:0}
  .ftr__cols{grid-template-columns:1fr 1fr}
  .ftr__fe{grid-column:1/-1;justify-self:start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}