/* ══════════════════════════════════════════════
   Кофе 18+ — кофейня для взрослых, Екатеринбург
   Палитра: коробка шоколатье — какао, латунь, крем
   ══════════════════════════════════════════════ */

:root{
  --cacao:#1E120F;
  --cacao-2:#26170F;
  --espresso:#33201A;
  --line:rgba(199,154,75,.22);
  --line-soft:rgba(244,233,220,.10);
  --cream:#F4E9DC;
  --cream-dim:rgba(244,233,220,.60);
  --cream-faint:rgba(244,233,220,.38);
  --brass:#C79A4B;
  --pepper:#D8452F;
  --rose:#E3A894;

  --display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --body:'Golos Text',-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;

  --wrap:1180px;
  --pad:clamp(20px,4vw,40px);
  --seal:clamp(120px,19vw,190px);
  --gate-top:min(19vh,164px);
  --gap:clamp(72px,9vw,132px);
  --ease:cubic-bezier(.22,.68,.24,1);
}

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

html{scroll-behavior:smooth;scroll-padding-top:96px}

body{
  margin:0;
  background:var(--cacao);
  color:var(--cream);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* какао-пыль поверх всего */
body::after{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:60;
  opacity:.28;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

body.is-locked{overflow:hidden}

img,svg{max-width:100%}
a{color:inherit}

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

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad);
}

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

.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--brass);
  margin:0 0 20px;
  display:flex;
  align-items:center;
  gap:12px;
}
.eyebrow::before{
  content:'';
  width:26px;
  height:1px;
  background:var(--brass);
  flex:none;
}
.eyebrow--center{justify-content:center}
.eyebrow--center::after{
  content:'';
  width:26px;
  height:1px;
  background:var(--brass);
  flex:none;
}

.h2{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(2rem,4.4vw,3.5rem);
  line-height:1.06;
  letter-spacing:-.01em;
  margin:0 0 26px;
}
.h2 em{
  font-style:italic;
  color:var(--rose);
}

.small{
  font-size:15px;
  color:var(--cream-dim);
}

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

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 30px;
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:999px;
  border:1px solid var(--brass);
  cursor:pointer;
  transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.btn--solid{
  background:var(--brass);
  color:var(--cacao);
}
.btn--solid:hover{
  background:var(--cream);
  border-color:var(--cream);
  transform:translateY(-2px);
}
.btn--ghost{
  background:transparent;
  color:var(--cream);
  border-color:var(--line-soft);
}
.btn--ghost:hover{
  border-color:var(--brass);
  color:var(--brass);
  transform:translateY(-2px);
}

/* ══════════ ВХОД: сургучная печать ══════════ */

.gate{
  position:fixed;
  inset:0;
  z-index:100;
}
.gate__panel{
  position:absolute;
  top:0;
  bottom:0;
  width:50vw;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 42%,#2E1C15 0%,var(--cacao) 62%);
  transition:transform 1s var(--ease);
}
.gate__panel--l{left:0}
.gate__panel--r{right:0}
.gate__sealwrap{
  position:absolute;
  top:0;
  bottom:0;
  width:100vw;
}
.gate__panel--l .gate__sealwrap{left:0}
.gate__panel--r .gate__sealwrap{right:0}

.seal{
  position:absolute;
  left:50%;
  top:calc(var(--gate-top) + var(--seal) / 2);
  width:var(--seal);
  height:var(--seal);
  transform:translate(-50%,-50%);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-family:var(--display);
  font-size:calc(var(--seal) * .34);
  font-weight:400;
  letter-spacing:.02em;
  color:#F0DDBE;
  background:
    radial-gradient(70% 70% at 34% 26%,#8E2F22 0%,#6B1F16 46%,#4A130D 100%);
  box-shadow:
    inset 0 2px 6px rgba(255,220,180,.28),
    inset 0 -6px 14px rgba(0,0,0,.55),
    0 22px 50px rgba(0,0,0,.55);
  border:1px solid rgba(199,154,75,.4);
}
.seal span{
  font-size:.62em;
  color:var(--brass);
}

.gate__content{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  padding:var(--gate-top) var(--pad) var(--pad);
  overflow-y:auto;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.gate__spacer{
  flex:none;
  width:1px;
  height:var(--seal);
  margin-bottom:clamp(22px,4vw,42px);
}
.gate__title{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(2.3rem,6.4vw,4.4rem);
  line-height:1.02;
  margin:0 0 18px;
}
.gate__title em{font-style:italic;color:var(--rose)}
.gate__note{
  max-width:48ch;
  margin:0 0 34px;
  color:var(--cream-dim);
  font-size:15px;
  line-height:1.7;
}
.gate__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
}

/* раскол печати */
.gate.is-opening .gate__content{
  opacity:0;
  transform:translateY(14px);
}
.gate.is-opening .gate__panel--l{transform:translateX(-100%)}
.gate.is-opening .gate__panel--r{transform:translateX(100%)}
.gate.is-gone{display:none}

/* ══════════ ШАПКА ══════════ */

.head{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  padding:18px 0;
  transition:background .4s var(--ease),padding .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.head.is-stuck{
  background:rgba(30,18,15,.86);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
  padding:12px 0;
}
.head__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.brand{
  font-family:var(--display);
  font-size:24px;
  font-weight:400;
  letter-spacing:.02em;
  text-decoration:none;
  display:inline-flex;
  align-items:baseline;
  gap:7px;
}
.brand__plus{
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.06em;
  color:var(--cacao);
  background:var(--brass);
  border-radius:3px;
  padding:3px 6px;
  line-height:1;
}

.nav{
  display:flex;
  gap:clamp(18px,2.6vw,36px);
}
.nav a{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--cream-dim);
  transition:color .3s var(--ease);
}
.nav a:hover{color:var(--brass)}

.head__tel{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.06em;
  text-decoration:none;
  color:var(--cream);
  white-space:nowrap;
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.head__tel:hover{color:var(--brass);border-color:var(--brass)}

/* ══════════ ГЛАВНЫЙ ЭКРАН ══════════ */

.hero{
  position:relative;
  padding-top:clamp(140px,17vw,210px);
  padding-bottom:clamp(70px,9vw,120px);
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;
  top:-14%;
  right:-8%;
  width:min(720px,74vw);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(199,154,75,.16) 0%,rgba(199,154,75,0) 68%);
  pointer-events:none;
}
.hero__grid{
  position:relative;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(36px,6vw,88px);
  align-items:center;
}
.hero__title{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(2.7rem,7.6vw,6rem);
  line-height:.98;
  letter-spacing:-.02em;
  margin:0 0 28px;
}
.hero__title em{
  font-style:italic;
  color:var(--rose);
  display:block;
}
.hero__lead{
  max-width:52ch;
  margin:0 0 36px;
  color:var(--cream-dim);
  font-size:clamp(16px,1.5vw,18px);
}
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:52px;
}

.facts{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(24px,4vw,54px);
  margin:0;
  padding-top:26px;
  border-top:1px solid var(--line);
}
.facts__i dt{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cream-faint);
  margin-bottom:5px;
}
.facts__i dd{
  margin:0;
  font-family:var(--display);
  font-size:clamp(1.6rem,2.6vw,2.2rem);
  line-height:1;
  color:var(--brass);
}

/* рецептурная карточка */
.card{
  margin:0;
  padding:30px 30px 26px;
  background:linear-gradient(160deg,#2C1B14 0%,#221510 100%);
  border:1px solid var(--line);
  border-radius:3px;
  box-shadow:0 34px 70px rgba(0,0,0,.5);
  transform:rotate(-2.2deg);
  transition:transform .6s var(--ease);
}
.card:hover{transform:rotate(0deg) translateY(-6px)}
.card__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brass);
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
}
.card__mark{color:var(--pepper);font-size:13px}
.card__name{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(2rem,3.6vw,2.9rem);
  line-height:1.05;
  margin:22px 0 18px;
}
.card__name em{font-style:italic;color:var(--rose)}
.card__parts{
  list-style:none;
  margin:0 0 26px;
  padding:0;
  font-family:var(--mono);
  font-size:12px;
  line-height:2.1;
  color:var(--cream-dim);
}
.card__parts li::before{
  content:'—';
  color:var(--brass);
  margin-right:10px;
}
.card__foot{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--cream-faint);
}
.card__price{
  font-size:17px;
  letter-spacing:0;
  text-transform:none;
  color:var(--brass);
}

/* ══════════ БЕГУЩАЯ СТРОКА ══════════ */

.ticker{
  overflow:hidden;
  padding:22px 0;
  border-block:1px solid var(--line);
  background:var(--cacao-2);
}
.ticker__row{
  display:flex;
  width:max-content;
  animation:slide 46s linear infinite;
}
.ticker__set{
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(1.5rem,3vw,2.4rem);
  font-weight:300;
  white-space:nowrap;
  padding-right:.4em;
  color:var(--cream-dim);
}
.ticker__set i{
  font-style:normal;
  color:var(--brass);
  font-size:.42em;
  vertical-align:middle;
  margin:0 .5em;
}
@keyframes slide{to{transform:translateX(-50%)}}

/* ══════════ СЕКЦИИ ══════════ */

.section{padding:var(--gap) 0}
.section--raised{
  background:var(--cacao-2);
  border-block:1px solid var(--line-soft);
}

/* концепция */
.concept{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(32px,6vw,80px);
  align-items:start;
}
.concept__lead,
.atmo__lead{
  position:sticky;
  top:112px;
}
.concept__body p{
  margin:0 0 20px;
  font-size:clamp(16px,1.5vw,18px);
  color:var(--cream-dim);
}
.concept__body p:first-child{
  color:var(--cream);
  font-size:clamp(18px,1.9vw,21px);
}

/* ботаника */
.botanic{margin-top:clamp(54px,8vw,96px)}
.botanic__grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.bot{
  background:var(--cacao);
  padding:30px 14px 22px;
  text-align:center;
  transition:background .4s var(--ease);
}
.bot:hover{background:var(--espresso)}
.bot svg{
  width:38px;
  height:52px;
  display:block;
  margin:0 auto 16px;
  fill:none;
  stroke:var(--brass);
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.85;
}
.bot span{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--cream-faint);
}

/* ══════════ МЕНЮ ══════════ */

.menu__head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:44px;
}
.menu__note{
  margin:0;
  font-family:var(--mono);
  font-size:11px;
  line-height:2;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--cream-faint);
  text-align:right;
}

.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:46px;
  padding-bottom:26px;
  border-bottom:1px solid var(--line);
}
.tab{
  appearance:none;
  background:transparent;
  border:1px solid var(--line-soft);
  border-radius:999px;
  color:var(--cream-dim);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:10px 20px;
  cursor:pointer;
  transition:all .3s var(--ease);
}
.tab:hover{color:var(--cream);border-color:var(--brass)}
.tab.is-on{
  background:var(--brass);
  border-color:var(--brass);
  color:var(--cacao);
}

.panel{display:none}
.panel.is-on{
  display:block;
  animation:fadeUp .5s var(--ease) both;
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

.list{
  list-style:none;
  margin:0 0 8px;
  padding:0;
  columns:2;
  column-gap:clamp(36px,6vw,90px);
}
.row{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:0 10px;
  padding:13px 0;
  border-bottom:1px solid var(--line-soft);
  break-inside:avoid;
}
.row__l{display:contents}
.row__n{
  order:0;
  flex:0 1 auto;
  max-width:72%;
  font-size:16px;
  line-height:1.35;
}
.row__lead{
  order:1;
  flex:1 1 auto;
  min-width:16px;
  height:1px;
  transform:translateY(2px);
  background-image:radial-gradient(circle,var(--line) 1px,transparent 1px);
  background-size:6px 1px;
  background-repeat:repeat-x;
}
.row__p{
  order:2;
  flex:none;
  font-family:var(--mono);
  font-size:13px;
  color:var(--brass);
  white-space:nowrap;
}
.row__d{
  order:3;
  flex:1 0 100%;
  font-family:var(--mono);
  font-size:11px;
  line-height:1.6;
  letter-spacing:.03em;
  color:var(--cream-faint);
  margin-top:5px;
}
.list__cap{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cream-faint);
  margin:34px 0 14px;
}

/* ══════════ ПОДАРКИ ══════════ */

.gifts{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.8vw,22px);
  margin-top:44px;
}
.gift{
  position:relative;
  padding:30px 26px 32px;
  border:1px solid var(--line-soft);
  border-radius:3px;
  background:linear-gradient(170deg,rgba(51,32,26,.5),rgba(51,32,26,0));
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.gift:hover{
  border-color:var(--brass);
  transform:translateY(-5px);
}
.gift__tag{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--brass);
}
.gift h3{
  font-family:var(--display);
  font-weight:400;
  font-size:1.55rem;
  line-height:1.15;
  margin:14px 0 12px;
}
.gift p{
  margin:0;
  font-size:14px;
  line-height:1.66;
  color:var(--cream-dim);
}

/* ══════════ АТМОСФЕРА ══════════ */

.atmo{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(32px,6vw,80px);
  align-items:start;
}
.atmo__lead p{
  margin:0;
  color:var(--cream-dim);
  max-width:38ch;
}
.atmo__list{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--line-soft);
}
.atmo__list li{
  padding:20px 0;
  border-bottom:1px solid var(--line-soft);
  font-size:15px;
  color:var(--cream-dim);
  display:grid;
  grid-template-columns:minmax(150px,.42fr) 1fr;
  gap:20px;
  align-items:baseline;
}
.atmo__list b{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--cream);
}

/* ══════════ АДРЕСА ══════════ */

.places{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.place{
  display:block;
  padding:34px 26px 30px;
  background:var(--cacao);
  text-decoration:none;
  transition:background .4s var(--ease);
}
.place:hover{background:var(--espresso)}
.place__no{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--brass);
}
.place h3{
  font-family:var(--display);
  font-weight:400;
  font-size:1.6rem;
  line-height:1.15;
  margin:16px 0 10px;
}
.place__meta{
  margin:0 0 22px;
  font-family:var(--mono);
  font-size:11px;
  line-height:1.9;
  color:var(--cream-faint);
}
.place__go{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--cream-dim);
  border-bottom:1px solid var(--line);
  padding-bottom:3px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.place:hover .place__go{color:var(--brass);border-color:var(--brass)}

/* ══════════ ЗОВ ══════════ */

.cta{
  padding:var(--gap) 0;
  text-align:center;
  background:
    radial-gradient(80% 120% at 50% 0%,rgba(199,154,75,.13) 0%,transparent 62%),
    var(--cacao);
  border-top:1px solid var(--line-soft);
}
.cta__title{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(2rem,5.2vw,4rem);
  line-height:1.06;
  margin:0 0 34px;
}
.cta__title em{font-style:italic;color:var(--rose)}
.cta__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
}

/* ══════════ ПОДВАЛ ══════════ */

.foot{
  padding:clamp(48px,6vw,76px) 0 40px;
  border-top:1px solid var(--line);
  background:var(--cacao-2);
}
.foot__inner{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  gap:clamp(28px,5vw,60px);
}
.foot__brand p{
  margin:16px 0 0;
  font-size:14px;
  color:var(--cream-faint);
  max-width:34ch;
}
.foot__col h4{
  font-family:var(--mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brass);
  margin:0 0 16px;
}
.foot__col a,
.foot__col p{
  display:block;
  margin:0 0 8px;
  font-size:14px;
  color:var(--cream-dim);
  text-decoration:none;
  transition:color .3s var(--ease);
}
.foot__col a:hover{color:var(--brass)}
.foot__fine{
  grid-column:1 / -1;
  margin:clamp(34px,5vw,54px) 0 0;
  padding-top:24px;
  border-top:1px solid var(--line-soft);
  font-family:var(--mono);
  font-size:10px;
  line-height:1.9;
  letter-spacing:.04em;
  color:var(--cream-faint);
}

/* ══════════ ПОЯВЛЕНИЕ ══════════ */

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.reveal.is-in{
  opacity:1;
  transform:none;
}

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

@media (max-width:1020px){
  .hero__grid{grid-template-columns:1fr}
  .card{max-width:420px;transform:rotate(-1.4deg)}
  .concept,
  .atmo{grid-template-columns:1fr}
  .concept__lead,
  .atmo__lead{position:static}
  .gifts{grid-template-columns:repeat(2,1fr)}
  .places{grid-template-columns:repeat(2,1fr)}
  .botanic__grid{grid-template-columns:repeat(3,1fr)}
  .list{columns:1}
  .foot__inner{grid-template-columns:1fr 1fr}
}

@media (max-width:720px){
  body{font-size:16px}
  .nav{display:none}
  .head__tel{font-size:11px}
  .hero__title em{display:inline}
  .menu__note{text-align:left}
  .facts{gap:26px}
  .gifts{grid-template-columns:1fr}
  .places{grid-template-columns:1fr}
  .botanic__grid{grid-template-columns:repeat(2,1fr)}
  .atmo__list li{grid-template-columns:1fr;gap:8px}
  .foot__inner{grid-template-columns:1fr}
  .row__n{max-width:64%}
  .btn{padding:13px 24px;font-size:11px}
}

/* низкие экраны — печать не должна выдавливать кнопки */
@media (max-height:720px){
  :root{
    --seal:clamp(96px,15vh,130px);
    --gate-top:min(10vh,64px);
  }
}

/* ══════════ ПОКОЙ ══════════ */

@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}
  .ticker__row{animation:none}
}