/* ═══════════════════════════════════════════════════════════
   Brodsky Coffee — лендинг
   Гамма и знак взяты из фирменного стиля кофейни:
   оранжевый фасада и крышек стаканов, чёрный вордмарк на белом.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* цвет */
  --orange:      #ee5f1e;   /* фасад и крышки стаканов */
  --orange-deep: #c7420a;
  --orange-soft: #fdece3;
  --ink:         #16130f;   /* вордмарк */
  --ink-70:      #4a443d;
  --ink-45:      #7b736a;
  --paper:       #ffffff;   /* белый стакан */
  --warm:        #f4ede5;   /* ротанг, крафт-держатель */
  --warm-deep:   #e6dad0;
  --brick:       #8a4a32;

  /* шрифт */
  --display: "Oswald", "Arial Narrow", sans-serif;
  --body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* сетка */
  --rail-w: 64px;
  --gut:    clamp(20px, 5vw, 76px);
  --maxw:   1320px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-left:var(--rail-w);
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }

a{ color:inherit; }

::selection{ background:var(--orange); color:#fff; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:12px 20px; font-size:14px;
}
.skip:focus{ left:var(--rail-w); }

:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
  border-radius:2px;
}

/* ── общая типографика ─────────────────────────────────── */

.h2{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(34px, 5.2vw, 68px);
  line-height:0.94;
  letter-spacing:-0.01em;
  text-transform:uppercase;
  margin:0 0 22px;
}
.h2--light{ color:#fff; }

.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--orange);
  margin:0 0 14px;
}
.eyebrow--light{ color:rgba(255,255,255,.82); }

.link{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1.5px solid var(--orange);
  padding-bottom:1px;
  transition:color .18s, border-color .18s;
}
.link:hover{ color:var(--orange); }

/* ── кнопки ────────────────────────────────────────────── */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  font-family:var(--body);
  font-size:13px; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase;
  text-decoration:none;
  padding:15px 26px;
  border:1.5px solid transparent;
  border-radius:2px;
  cursor:pointer;
  transition:background .18s, color .18s, border-color .18s, transform .18s;
}
.btn--solid{ background:var(--orange); color:#fff; }
.btn--solid:hover{ background:var(--orange-deep); }
.btn--line{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--line:hover{ background:var(--ink); color:#fff; }
.btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn--ghost:hover{ background:#fff; color:var(--orange); border-color:#fff; }
.btn:active{ transform:translateY(1px); }

/* ═══ ЛЕНТА-ШКАЛА ДНЯ ═══════════════════════════════════
   Оранжевая полоса на белом — обёртка стакана Brodsky.
   Работает как шкала 08:00 → 21:00, залитая до текущего часа.
   ═══════════════════════════════════════════════════════ */

.rail{
  position:fixed; inset:0 auto 0 0;
  width:var(--rail-w);
  z-index:90;
  background:var(--paper);
  border-right:1px solid var(--warm-deep);
  display:flex; flex-direction:column;
  padding:22px 0 18px;
}

.rail__track{
  position:relative;
  flex:1;
  width:14px;
  margin:0 auto;
  background:var(--warm);
  border-radius:1px;
}

.rail__fill{
  position:absolute; inset:0 0 auto 0;
  height:0%;
  background:var(--orange);
  border-radius:1px;
  transition:height 1.2s cubic-bezier(.2,.7,.3,1);
}

/* маркер «сейчас» — где день находится прямо сейчас */
.rail__now{
  position:absolute; left:50%; top:0;
  width:24px; height:3px;
  background:var(--ink);
  transform:translate(-50%,-1.5px);
  opacity:0;
  transition:top 1.2s cubic-bezier(.2,.7,.3,1), opacity .4s;
}
.rail__now.is-live{ opacity:1; }

.rail__ticks{ list-style:none; margin:0; padding:0; }
.rail__ticks li{
  position:absolute;
  left:calc(50% + 12px);
  transform:translateY(-50%);
  font-family:var(--mono);
  font-size:9px;
  line-height:1;
  color:var(--ink-45);
  white-space:nowrap;
}
.rail__ticks li::before{
  content:"";
  position:absolute;
  left:-9px; top:50%;
  width:5px; height:1px;
  background:var(--ink-45);
  opacity:.55;
}

.rail__mark{
  font-family:var(--display);
  font-weight:700;
  font-size:12px;
  letter-spacing:0.28em;
  color:var(--ink-45);
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  margin:16px auto 0;
  text-transform:uppercase;
}

/* ── шапка ─────────────────────────────────────────────── */

.head{
  position:sticky; top:0; z-index:80;
  display:flex; align-items:center; gap:28px;
  padding:16px var(--gut);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--warm-deep);
}

.head__logo{
  display:flex; align-items:baseline; gap:9px;
  text-decoration:none; flex-shrink:0;
}
.head__logo img{ height:17px; width:auto; }
.head__logo-sub{
  font-family:var(--display);
  font-size:11px; font-weight:500;
  letter-spacing:0.34em;
  text-transform:uppercase;
  color:var(--ink-45);
}

.head__nav{ display:flex; gap:26px; margin-left:auto; }
.head__nav a{
  font-size:13px; font-weight:600;
  text-decoration:none;
  color:var(--ink-70);
  padding-bottom:2px;
  border-bottom:1.5px solid transparent;
  transition:color .18s, border-color .18s;
}
.head__nav a:hover{ color:var(--ink); border-bottom-color:var(--orange); }

.head__cta{ padding:11px 20px; font-size:12px; }
.head__cta .btn__short{ display:none; }

/* ── HERO ──────────────────────────────────────────────── */

.hero{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(48px,7vw,96px) var(--gut) clamp(40px,5vw,72px);
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(32px,5vw,72px);
  align-items:center;
}

.hero__h1{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(50px, 9.2vw, 122px);
  line-height:0.84;
  letter-spacing:-0.02em;
  text-transform:uppercase;
  margin:0 0 26px;
}
.hero__h1 .r{ display:block; }
.hero__h1 em{
  font-style:normal;
  color:var(--orange);
}

.hero__lede{
  font-size:clamp(16px,1.35vw,18px);
  line-height:1.62;
  color:var(--ink-70);
  max-width:46ch;
  margin:0 0 26px;
}

.status{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono);
  font-size:12px; font-weight:500;
  letter-spacing:0.03em;
  padding:9px 15px;
  background:var(--warm);
  border-radius:2px;
  margin-bottom:26px;
}
.status__dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--ink-45);
  flex-shrink:0;
}
.status.is-open  .status__dot{ background:var(--orange); animation:pulse 2.4s ease-in-out infinite; }
.status.is-shut  .status__dot{ background:var(--ink-45); }
.status.is-open  { background:var(--orange-soft); }

@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(238,95,30,.5); }
  60%    { box-shadow:0 0 0 7px rgba(238,95,30,0); }
}

.hero__acts{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:40px; }

.facts{
  display:flex; flex-wrap:wrap; gap:0;
  margin:0;
  border-top:1px solid var(--warm-deep);
}
.facts__i{
  padding:18px 30px 0 0;
  margin-right:30px;
  border-right:1px solid var(--warm-deep);
}
.facts__i:last-child{ border-right:0; margin-right:0; padding-right:0; }
.facts dt{
  font-family:var(--mono);
  font-size:10px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-45);
  margin-bottom:5px;
}
.facts dd{
  margin:0;
  font-family:var(--display);
  font-weight:600;
  font-size:30px;
  line-height:1;
}
.facts__u{ font-size:15px; color:var(--ink-45); margin-left:2px; }

.hero__shot{ margin:0; position:relative; }
.hero__shot img{
  width:100%;
  border-radius:2px;
  aspect-ratio:3/4;
  object-fit:cover;
}
.hero__shot figcaption{
  font-family:var(--mono);
  font-size:10px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-45);
  margin-top:10px;
}

/* ── бегущая строка ────────────────────────────────────── */

.ticker{
  background:var(--orange);
  overflow:hidden;
  padding:15px 0;
}
.ticker__row{
  display:flex;
  width:max-content;
  animation:slide 34s linear infinite;
}
.ticker__seq{
  font-family:var(--display);
  font-weight:600;
  font-size:19px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:#fff;
  white-space:nowrap;
  padding-right:22px;
}
.ticker__seq b{ color:rgba(255,255,255,.5); margin:0 12px; font-weight:400; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ── о кофейне ─────────────────────────────────────────── */

.about{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(64px,8vw,120px) var(--gut);
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(32px,6vw,84px);
  align-items:center;
}
.about__shot{ margin:0; }
.about__shot img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:2px;
}
.about__text p{
  font-size:clamp(15.5px,1.25vw,17px);
  line-height:1.68;
  color:var(--ink-70);
  max-width:48ch;
  margin:0 0 16px;
}

.badge{
  display:inline-flex; align-items:center; gap:10px;
  margin:22px 0 0;
  padding:11px 17px;
  background:var(--warm);
  border-left:3px solid var(--orange);
  font-size:13px;
  font-weight:600;
  color:var(--ink-70);
}
.badge__mark{ color:var(--orange); font-size:15px; }

/* ── меню ──────────────────────────────────────────────── */

.menu{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(56px,7vw,104px) var(--gut);
  border-top:1px solid var(--warm-deep);
}
.menu__head{ max-width:640px; margin-bottom:38px; }
.menu__note{
  font-size:15.5px; line-height:1.62; color:var(--ink-70);
  margin:0; max-width:44ch;
}

.tabs{
  display:flex; flex-wrap:wrap; gap:0;
  border-bottom:1px solid var(--warm-deep);
  margin-bottom:40px;
}
.tab{
  display:flex; flex-direction:column; gap:3px;
  background:none; border:0;
  border-bottom:2.5px solid transparent;
  padding:0 30px 16px 0;
  margin-right:30px;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
  color:var(--ink-45);
  transition:color .18s, border-color .18s;
}
.tab:last-child{ margin-right:0; }
.tab__time{
  font-family:var(--mono);
  font-size:10px; letter-spacing:0.12em; text-transform:uppercase;
}
.tab__name{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(21px,2.2vw,30px);
  line-height:1;
  text-transform:uppercase;
}
.tab:hover{ color:var(--ink-70); }
.tab.is-on{ color:var(--ink); border-bottom-color:var(--orange); }
.tab.is-on .tab__time{ color:var(--orange); }

.pane[hidden]{ display:none; }
.pane__cols{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,4.5vw,64px);
}

.dishes__h{
  font-family:var(--mono);
  font-size:11px; font-weight:700;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--orange);
  margin:0 0 14px;
  padding-bottom:9px;
  border-bottom:1px solid var(--warm-deep);
}
.dishes__h:not(:first-child){ margin-top:38px; }

.dishes__list{ list-style:none; margin:0 0 4px; padding:0; }

.dish{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:baseline;
  gap:0 8px;
  padding:11px 0;
  border-bottom:1px solid var(--warm);
}
.dish:last-child{ border-bottom:0; }
.dish__name{
  font-size:15.5px;
  font-weight:600;
  line-height:1.3;
}
.dish__lead{
  border-bottom:1.5px dotted #cbbfb2;
  transform:translateY(-3px);
  min-width:14px;
}
.dish__price{
  font-family:var(--mono);
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
}
.dish__meta{
  grid-column:1 / -1;
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-45);
  line-height:1.45;
  margin-top:3px;
}
.dish--star .dish__name{ color:var(--orange); }
.dish--star{ background:var(--orange-soft); margin:0 -14px; padding:12px 14px; }

.dishes__shot{ margin:34px 0 0; }
.dishes__shot img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:2px;
}

.menu__foot{ margin:38px 0 0; font-size:14px; font-weight:600; }

/* ── с собой ───────────────────────────────────────────── */

.togo{
  background:var(--orange);
  color:#fff;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(28px,5vw,72px);
  align-items:center;
  padding:clamp(48px,6vw,88px) var(--gut);
}
.togo__shot{ margin:0; }
.togo__shot img{
  width:100%;
  max-width:520px;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:2px;
}
.togo__body{ max-width:560px; }
.togo__text{
  font-size:clamp(16px,1.3vw,18px);
  line-height:1.62;
  color:rgba(255,255,255,.92);
  margin:0 0 22px;
}
.togo__list{
  list-style:none; margin:0 0 30px; padding:0;
  border-top:1px solid rgba(255,255,255,.3);
}
.togo__list li{
  padding:12px 0 12px 24px;
  border-bottom:1px solid rgba(255,255,255,.3);
  font-size:15px;
  color:rgba(255,255,255,.95);
  position:relative;
}
.togo__list li::before{
  content:"—";
  position:absolute; left:0;
  color:rgba(255,255,255,.6);
}

/* ── галерея ───────────────────────────────────────────── */

.gal{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(64px,8vw,116px) var(--gut);
}
.gal__head{ margin-bottom:36px; }
.gal__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.gal__i{ margin:0; overflow:hidden; border-radius:2px; }
.gal__i img{
  width:100%; height:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.gal__i:hover img{ transform:scale(1.04); }
.gal__i--tall{ grid-row:span 2; }
.gal__i--tall img{ aspect-ratio:3/5.1; }
.gal__i--wide{ grid-column:span 2; }
.gal__i--wide img{ aspect-ratio:16/9; }

/* ── как найти ─────────────────────────────────────────── */

.where{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gut) clamp(64px,8vw,116px);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(32px,5vw,72px);
  align-items:start;
}
/* колонка с адресами теперь вдвое длиннее — фото едет следом, а не висит сверху */
.where__shot{ margin:0; position:sticky; top:96px; }
.where__shot img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:2px;
}
.where__shot figcaption{
  font-family:var(--mono);
  font-size:11px; line-height:1.5;
  color:var(--ink-45);
  margin-top:11px;
}

.info{ margin:0 0 30px; }
.info__row{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:16px;
  padding:16px 0;
  border-top:1px solid var(--warm-deep);
}
.info__row:last-child{ border-bottom:1px solid var(--warm-deep); }
.info dt{
  font-family:var(--mono);
  font-size:10px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-45);
  padding-top:3px;
}
.info dd{ margin:0; font-size:15px; line-height:1.55; }
.info__links{ display:flex; flex-wrap:wrap; gap:18px; }

.hours{ border-collapse:collapse; font-family:var(--mono); font-size:13.5px; }
.hours th{
  text-align:left; font-weight:500; color:var(--ink-70);
  padding:2px 22px 2px 0;
}
.hours td{ padding:2px 0; font-weight:700; }
.hours tr.is-today th, .hours tr.is-today td{ color:var(--orange); }

/* карточка точки: их две, разделяем нумерацией и воздухом */
.spot{ counter-increment:spot; margin-top:38px; }
.spot:first-of-type{ margin-top:30px; }
.spot__h{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(24px,2.6vw,34px);
  line-height:1.05;
  text-transform:uppercase;
  margin:0;
}
.spot__h::before{
  content:counter(spot,decimal-leading-zero);
  font-family:var(--mono);
  font-size:11px; font-weight:700;
  letter-spacing:0.14em;
  color:var(--orange);
  display:block;
  margin-bottom:8px;
}
.spot__sub{
  font-family:var(--mono);
  font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-45);
  margin:9px 0 0;
}
.spot .info{ margin:18px 0 22px; }

.where__body{ counter-reset:spot; }
.info--common{ margin:36px 0 0; }

.dishes__note{
  font-size:13.5px; line-height:1.6;
  color:var(--ink-70);
  margin:22px 0 0;
  padding-left:14px;
  border-left:2px solid var(--orange);
}

/* ── подвал ────────────────────────────────────────────── */

.foot{
  background:var(--ink);
  color:#fff;
  padding:clamp(44px,5vw,68px) var(--gut) 34px;
}
.foot__mark{
  width:clamp(200px, 34vw, 420px);
  margin-bottom:34px;
  opacity:.95;
}
.foot__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:22px;
  padding-top:26px;
  border-top:1px solid rgba(255,255,255,.16);
}
.foot__line{
  margin:0;
  font-family:var(--mono);
  font-size:12.5px;
  line-height:1.75;
  color:rgba(255,255,255,.75);
}
.foot__line a{ color:#fff; text-decoration:none; border-bottom:1px solid var(--orange); }
.foot__line a:hover{ color:var(--orange); }
.foot__fine{
  margin:30px 0 0;
  font-size:11.5px;
  color:rgba(255,255,255,.42);
  max-width:60ch;
}

/* ── появление по скроллу ──────────────────────────────── */

.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ═══ АДАПТИВ ══════════════════════════════════════════ */

@media (max-width:1080px){
  .hero{ grid-template-columns:1fr; }
  /* фото ведёт, но кадрируем в полосу — иначе заголовок уезжает за экран */
  .hero__shot{ order:-1; }
  .hero__shot img{ aspect-ratio:3/2; }
  .about{ grid-template-columns:1fr; }
  .about__shot{ max-width:420px; }
  .togo{ grid-template-columns:1fr; }
  .togo__shot{ max-width:400px; }
  .where{ grid-template-columns:1fr; }
  .where__shot{ position:static; }
  .gal__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gal__i--tall{ grid-row:span 1; }
  .gal__i--tall img{ aspect-ratio:3/4; }
  .gal__i--wide{ grid-column:span 2; }
}

@media (max-width:860px){
  :root{ --rail-w:0px; }
  .rail{ display:none; }
  .head__nav{ display:none; }
  .head__cta{ margin-left:auto; }
  .head__cta .btn__label{ display:none; }
  .head__cta .btn__short{ display:inline; }
  .pane__cols{ grid-template-columns:1fr; }
  .dishes__h:not(:first-child){ margin-top:32px; }
}

@media (max-width:560px){
  .hero__h1{ font-size:clamp(40px,13vw,62px); }
  .facts__i{ padding-right:20px; margin-right:20px; }
  .facts dd{ font-size:25px; }
  .tab{ padding-right:20px; margin-right:20px; }
  .info__row{ grid-template-columns:1fr; gap:6px; }
  .gal__grid{ grid-template-columns:1fr; }
  .gal__i--wide{ grid-column:span 1; }
  .ticker__seq{ font-size:16px; }
  .btn{ width:100%; }
  .head__cta{ width:auto; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}