/* характер: cafe — из design/characters.json */
:root{
  --bg:#f3f0e8;
  --surface:#fbfaf5;
  --paper:#e7e3d7;
  --rule:#ddd8c9;
  --rule-strong:#c5bfac;
  --ink:#17150f;
  --ink-2:#3b352a;
  --ink-3:#4d4638;
  --muted:#6f6857;
  --muted-2:#8a8270;
  --on-ink:#f3f0e8;
  --on-ink-muted:#c9c4b4;
  --line:#d3cebe;
  --line-2:#e9e5d9;
  --line-dot:#bab3a0;
  --brand:#9c2b21;
  --brand-ink:#f7f2e6;
  --accent:#9c2b21;
  --action:#17150f;
  --action-hover:#3b352a;
  --action-ink:#f3f0e8;
  --status:#3f7d4f;
  --pad-x:20px;
  --pad-x-d:44px;
  --r-btn:0;
  --r-img:0;
  --h1-m:46px;
  --h1-d:76px;
  --h1-lh:0.98;
  --h1-lh-d:0.98;
  --h1-ls:-.01em;
  --h1-tt:none;
  --h1-w:400;
  --h1-font:var(--display);
  --h2-m:30px;
  --h2-d:40px;
  --item-m:24px;
  --item-d:30px;
  --item-lh:1.2;
  --item-ls:0;
  --item-tt:none;
  --item-font:var(--display);
  --item-w:400;
  --price-w:400;
  --label-size:11px;
  --label-ls:.24em;
  --label-tt:uppercase;
  --lead-m:16px;
  --lead-d:16.5px;
  --display:'Prata', Georgia, 'Times New Roman', serif;
  --body:system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* =========================================================================
   core.css — общее для всех характеров: сброс, кнопки, ссылки, карта,
   липкая панель, анимация. Композиция каждого характера — в своём файле.
   Токены приходят из design/characters.json.
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:64px}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.6 var(--body);
  -webkit-font-smoothing:antialiased;
}
img,svg,iframe{display:block;max-width:100%}
/* height:auto обязателен: иначе атрибут height у <img> перебивает aspect-ratio
   и кадр растягивается. Правила с явной высотой перебивают это по специфичности. */
img{height:auto}
h1,h2,h3{margin:0}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
/* у figure браузерный отступ 40px по бокам — из-за него фото не занимали свою ячейку */
figure{margin:0}
ul{list-style:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:200;background:var(--bg);padding:10px 16px}

/* -------------------------------------------------------------- кнопки -- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:0 24px;border-radius:var(--r-btn);
  font:700 16px/1 var(--body);text-decoration:none;border:0;cursor:pointer;
  transition:background .15s ease,transform .1s ease;
}
.btn--action{background:var(--action);color:var(--action-ink)}
.btn--action:hover{background:var(--action-hover)}
.btn--invert{background:var(--bg);color:var(--ink)}
.btn--invert:hover{opacity:.9}
.btn:active{transform:translateY(1px)}
.btn--sm{min-height:46px;padding:0 20px;font-size:15px;display:inline-flex}
.wa{flex:0 0 auto}


/* Фирменный знак клиента. Если в content.json есть business.logo — в шапке
   и подвале выводится он вместо словесного знака. Высота фиксирована,
   ширина свободная: подходит и квадратной эмблеме, и вытянутому логотипу. */
.brand__logo{height:var(--logo-h,34px);width:auto;max-width:var(--logo-max,180px);object-fit:contain;flex:0 0 auto;mix-blend-mode:var(--logo-blend,normal)}
@media (min-width:880px){.brand__logo{height:var(--logo-h-d,42px);max-width:var(--logo-max-d,240px)}}

/* ------------------------------------------------------- мелкие детали -- */
.status{display:inline-flex;align-items:center;gap:9px}
.status i{width:7px;height:7px;border-radius:50%;background:var(--status);flex:0 0 auto}

.ulink{
  display:inline-block;font-size:14px;text-decoration:none;
  border-bottom:1px solid var(--line-dot);padding-bottom:3px;
}
.ulink:hover{border-bottom-color:var(--brand);color:var(--brand)}
.ulink--muted{color:var(--muted)}
.links{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px}

.note{margin-top:14px;font-size:13px;line-height:1.6;color:var(--muted-2)}

/* ---------------------------------------------------------------- карта -- */
.map{border:1px solid var(--line);border-radius:var(--r-img);overflow:hidden;background:var(--surface)}
.map iframe{width:100%;height:220px;border:0}

/* ------------------------------------------------------ липкая панель -- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  display:flex;align-items:center;gap:12px;padding:10px 16px;
  background:var(--bg);border-top:1px solid var(--line);
}
.sticky__txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.sticky__lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sticky__val{font:600 15px/1.2 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky .btn{margin-left:auto;flex:0 0 auto}

/* ------------------------------------------------------------ анимация -- */
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.rise{opacity:0}
.rise.in{animation:riseIn .6s ease both}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rise{opacity:1}
  html{scroll-behavior:auto}
}

@media (min-width:880px){
  html{scroll-padding-top:80px}
  .map iframe{height:380px}
  .sticky{display:none}
}

/* =========================================================================
   cafe — бумага и антиква. Бегущая строка, двойные линейки, карта-квиток
   в двойной рамке, разлинованная бумага, повёрнутый штамп.
   ========================================================================= */

/* ------------------------------------------------------- бегущая строка -- */
.marq{
  background:var(--brand);color:var(--brand-ink);
  overflow:hidden;padding:7px 0;
  font:700 10.5px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.22em;
}
.marq__t{display:flex;width:max-content;animation:marq 42s linear infinite}
.marq__t span{padding-right:2.4em;white-space:nowrap}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marq__t{animation:none}}

/* --------------------------------------------------------------- шапка -- */
.hdr{position:sticky;top:0;z-index:100;background:var(--bg);border-bottom:3px double var(--ink)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px var(--pad-x)}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;min-width:0}
/* название и приписка держат общую базовую линию внутри своей строки,
   а эмблема центруется относительно неё целиком */
.brand__txt{display:flex;align-items:baseline;gap:8px;min-width:0}
/* оптическая поправка: у строчки антиквы под базовой линией пустует выносной
   этаж, поэтому геометрический центр строки выше центра прописных. Сдвигаем
   текст вниз на половину этого зазора — тогда знак и название стоят вровень. */
.brand--logo .brand__txt{position:relative;top:.075em}
.brand__name{
  flex:0 1 auto;font:400 20px/1.1 var(--display);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.brand__est{
  flex:0 0 auto;font:700 9.5px/1 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.16em;color:var(--muted);
}
.burger{
  flex:0 0 auto;border:1px solid var(--ink);background:0;padding:8px 12px;cursor:pointer;
  font:700 10px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);
}
.nav{
  position:fixed;left:0;right:0;top:0;z-index:99;display:none;flex-direction:column;
  padding:60px var(--pad-x) 22px;background:var(--bg);border-bottom:3px double var(--ink);
}
body.nav-open .nav{display:flex}
.nav a{
  padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;
  font:700 11px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;
}
.nav__cta{
  margin-top:16px;border-bottom:0!important;background:var(--ink);color:var(--bg)!important;
  text-align:center;padding:16px!important;
}

/* --------------------------------------------- первый экран: три кадра -- */
.shots{padding:16px var(--pad-x) 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.shot{margin:0}
.shot--1{grid-column:1/-1}
.shot img{width:100%;aspect-ratio:3/4;object-fit:cover;border:1px solid var(--ink)}
.shot--1 img{aspect-ratio:16/10}
.shot figcaption{
  display:flex;align-items:baseline;gap:8px;padding:7px 2px 0;
  font:700 10px/1.4 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
.shot__lead{display:none}
.shot--1 .shot__lead{display:block;flex:1;border-bottom:1px dotted var(--line-dot);transform:translateY(-3px)}
.shot__note{color:var(--brand)}
.shot:not(.shot--1) figcaption{flex-direction:column;gap:0}

/* ------------------------------------------------------------ заголовок -- */
.lede{padding:30px var(--pad-x) 34px}
.lede__in{position:relative;border-top:3px double var(--ink);padding-top:20px}
.lede__t{font:var(--h1-w) var(--h1-m)/var(--h1-lh) var(--h1-font);letter-spacing:var(--h1-ls)}
.lede__p{margin-top:16px;font-size:16px;line-height:1.6;color:var(--ink-3);max-width:34ch}
/* На мобильном штамп вынесен из потока в правое поле строки, иначе он съедает
   треть ширины и статус рассыпается по слову в строку. Статус и приписка
   переносятся друг под друга. */
.lede__meta{
  position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:9px 14px;
  margin-top:22px;padding:16px 92px 0 0;min-height:90px;
  border-top:1px solid var(--line);font-size:14px;color:var(--ink-3);
}
.lede__price{
  font:700 12px/1 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.1em;color:var(--brand);white-space:nowrap;
}
.lede__act{margin-top:16px}
.lede__act .btn{letter-spacing:.04em;text-transform:uppercase;font-size:15.5px}
.lede__act .ulink{
  margin-top:14px;font:700 11px/1 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.12em;text-transform:uppercase;border-bottom-color:var(--ink);
}
/* штамп: на мобильном — в правом поле строки статуса, на десктопе — в углу блока */
.stamp{
  position:absolute;right:5px;top:16px; /* 5px — вынос углов повёрнутого круга */
  width:74px;height:74px;transform:rotate(-7deg);
  border:2px solid var(--brand);border-radius:50%;
  display:grid;place-items:center;text-align:center;background:var(--bg);color:var(--brand);
  font:700 8px/1.35 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em;
}

/* ---------------------------------------------------- карта и о заведении */
.menu{padding:0 var(--pad-x) 34px}
.menu__card{border:1px solid var(--ink);background:var(--surface);padding:4px}
.menu__inner{border:1px solid var(--line);padding:22px 18px}
.menu__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-bottom:12px;border-bottom:3px double var(--ink);
}
.menu__head h2{font:400 30px/1 var(--display)}
.menu__cur{
  font:700 9.5px/1.4 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:right;
}
.grp{margin-top:18px}
.grp__h{
  display:flex;align-items:center;gap:8px;margin-bottom:2px;
  font:700 11px/1 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brand);
}
.grp__n{
  flex:0 0 auto;width:18px;height:18px;border:1px solid var(--brand);border-radius:50%;
  display:grid;place-items:center;font-size:9px;
  letter-spacing:0; /* разрядка шапки сдвигает III из кружка и режет его о край */
}
.grp__l li{display:flex;align-items:baseline;gap:8px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.grp__name{font-size:15px}
.grp__lead{flex:1;border-bottom:1px dotted var(--line-dot);transform:translateY(-4px)}
.grp__price{font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
.menu__note{margin-top:18px;font-size:12.5px;line-height:1.6;color:var(--muted)}

/* разлинованная бумага */
.paper{
  margin-top:30px;padding:26px 20px;background:var(--paper);border:1px solid var(--ink);
  background-image:repeating-linear-gradient(180deg,transparent 0 27px,var(--rule) 27px 28px);
}
.paper__t{font:400 30px/1.05 var(--display);margin-bottom:14px}
.paper__p{font-size:16px;line-height:1.75;color:var(--ink-2)}
.facts{margin-top:22px}
.facts div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--rule-strong)}
.facts div:last-child{border-bottom:1px solid var(--rule-strong)}
.facts dt{font:700 10px/1.6 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.facts dd{font-size:14.5px;text-align:right}

/* часы */
.hbox{margin-top:24px;border:1px solid var(--ink)}
/* строка с двумя сменами не влезает в 375 px: разрешаем времени уйти под день,
   вместо того чтобы ломать название дня по слову в строку */
.hbox__r{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding:11px 14px;border-top:1px solid var(--line)}
.hbox__r:first-child{border-top:0}
.hbox__r.is-now{
  background:var(--ink);color:var(--bg);
  font:700 11px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;
}
.hbox__r.is-now .hbox__t{color:var(--bg);letter-spacing:.04em}
.hbox__r.is-off{background:var(--paper);color:var(--muted)}
.hbox__t{font-size:14.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.hbox__r.is-off .hbox__t{color:var(--muted)}
.hbox__note{
  margin-top:10px;font:10px/1.6 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}

/* -------------------------------------------------------------- отзывы -- */
.band{
  padding:26px var(--pad-x);
  border-top:3px double var(--ink);border-bottom:3px double var(--ink);
}
.band__score{display:flex;align-items:baseline;gap:10px}
.band__num{font:400 44px/1 var(--display);color:var(--brand)}
.band__of{font:700 10px/1.5 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.band__q{margin-top:16px}
.band blockquote{margin:0;font:400 19px/1.5 var(--display)}
.band__who{
  margin-top:10px;font:700 10px/1 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}

/* -------------------------------------------------------- адрес и карта -- */
.where{padding:30px var(--pad-x) 34px}
.where__t{font:400 30px/1.1 var(--display);margin-bottom:6px}
.where__p{font-size:14.5px;color:var(--ink-3);margin-bottom:16px}
.where .map{border:1px solid var(--ink);padding:4px;border-radius:0;background:0}
.where .map iframe{border:1px solid var(--line)}
.where .ulink{font:700 11px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;border-bottom-color:var(--ink)}
.where .ulink--muted{border-bottom-color:var(--line-dot)}

/* --------------------------------------------------- финальный призыв -- */
.final{padding:38px var(--pad-x);background:var(--ink);color:var(--bg)}
.final__t{font:400 34px/1.08 var(--display)}
.final__side p{margin:12px 0 22px;font-size:15px;line-height:1.6;color:var(--on-ink-muted)}
.final .btn{letter-spacing:.04em;text-transform:uppercase;font-size:15.5px}

/* --------------------------------------------------------------- подвал -- */
.ftr{padding:22px var(--pad-x) 96px;background:var(--ink);color:var(--on-ink-muted);display:flex;flex-direction:column;gap:12px}
.ftr__nav{display:flex;flex-wrap:wrap;gap:8px 18px}
.ftr__nav a{font:700 10.5px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.ftr__nav a:hover{color:var(--bg)}
.ftr small{font-size:11.5px}

.sticky{background:var(--bg);border-top:1px solid var(--ink)}
.sticky__lbl{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;font-size:9.5px}
.sticky .btn{letter-spacing:.06em;text-transform:uppercase;font-size:14px}

/* ========================================================== десктоп ==== */
@media (min-width:880px){
  .marq{padding:8px 0;font-size:11px;letter-spacing:.24em}

  .hdr__in{padding:12px var(--pad-x-d)}
  .brand__name{font-size:26px}
  .brand__est{font-size:10px;letter-spacing:.18em}
  .burger{display:none}
  .nav{position:static;display:flex;flex-direction:row;align-items:center;gap:26px;padding:0;background:0;border:0}
  .nav a{padding:0;border:0;font-size:11px}
  .nav a:hover{color:var(--brand)}
  .nav__cta{margin:0;padding:0 22px!important;min-height:44px;display:inline-flex;align-items:center;font-size:13px!important}

  .shots{padding:22px var(--pad-x-d) 0;grid-template-columns:1.35fr .82fr .83fr;gap:14px;align-items:start}
  .shot--1{grid-column:auto}
  .shot--1 img{aspect-ratio:4/3}
  .shot--2{padding-top:34px}
  .shot--3{padding-top:12px}
  .shot figcaption{font-size:10.5px;letter-spacing:.14em;padding-top:9px}
  .shot:not(.shot--1) figcaption{flex-direction:row;gap:10px}
  .shot__lead{display:block!important;flex:1;border-bottom:1px dotted var(--line-dot);transform:translateY(-3px)}

  .lede{padding:40px var(--pad-x-d) 52px}
  .lede__in{
    padding-top:28px;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start;
  }
  .lede__t{font-size:var(--h1-d);line-height:var(--h1-lh-d,var(--h1-lh))}
  .lede__side{padding-top:104px}
  .lede__p{margin:0;font-size:17.5px;line-height:1.7;max-width:none}
  /* на десктопе штамп возвращается в угол .lede__in, поле под него не нужно */
  .lede__meta{position:static;margin-top:26px;padding:18px 0 0;min-height:0;gap:22px;font-size:15px}
  .lede__act{display:flex;align-items:center;gap:22px;margin-top:22px}
  .lede__act .btn{display:inline-flex;min-height:54px;padding:0 30px}
  .lede__act .ulink{margin:0}
  .stamp{
    position:absolute;right:9px;top:-16px; /* 9px — вынос углов повёрнутого круга */
    width:112px;height:112px;
    transform:rotate(9deg);font-size:10px;line-height:1.45;letter-spacing:.1em;
  }

  .menu{padding:0 var(--pad-x-d) 56px;display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}
  .menu__card{padding:5px}
  .menu__inner{padding:34px 38px}
  .menu__head h2{font-size:40px}
  .menu__groups{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;margin-top:22px}
  .grp{margin-top:0;margin-bottom:24px}
  .grp__l li{padding:10px 0}
  .grp__name,.grp__price{font-size:15.5px}
  .menu__note{margin-top:20px;padding-top:14px;border-top:1px solid var(--line-2);font-size:13px}
  .menu__aside{margin:0}
  .paper{margin:0;padding:30px 32px;background-image:repeating-linear-gradient(180deg,transparent 0 29px,var(--rule) 29px 30px)}
  .paper__t{font-size:34px}
  .paper__p{font-size:16.5px;line-height:1.82}
  .facts dd{font-size:15px}
  .hbox__r{padding:12px 18px}
  .hbox__t{font-size:15px}
  .hbox__r.is-now .hbox__t{letter-spacing:.1em}

  .band{
    padding:34px var(--pad-x-d);display:grid;grid-template-columns:200px 1fr 1fr;gap:44px;align-items:start;
  }
  .band__score{flex-direction:column;align-items:flex-start;gap:6px}
  .band__num{font-size:56px}
  .band__q{margin:0}
  .band blockquote{font-size:21px}

  .where{padding:52px var(--pad-x-d);display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:start}
  .where__t{font-size:46px;margin-bottom:8px}
  .where__p{font-size:15.5px;margin-bottom:22px}
  .where .map iframe{height:340px}

  .final{
    padding:64px var(--pad-x-d);display:flex;align-items:flex-end;justify-content:space-between;gap:56px;flex-wrap:wrap;
  }
  .final__t{font-size:62px;line-height:1.04;max-width:12ch}
  .final__side{max-width:40ch}
  .final__side p{margin:0 0 22px;font-size:16.5px;line-height:1.7}
  .final .btn{display:inline-flex;min-height:54px;padding:0 30px}

  .ftr{padding:26px var(--pad-x-d);flex-direction:row;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
  .ftr__nav{gap:24px}
  .ftr__nav a{font-size:11px;letter-spacing:.14em}
  .ftr small{font-size:12px}
}