/* coffeehouse — 7k-slot55.site — namespace .cf */

:root{
  --hall:#1d1611;
  --hall2:#241c16;
  --panel:#f5efe4;
  --panel2:#ece2d2;
  --roast:#6f4425;
  --cream:#e9d7b8;
  --cream2:#c7b291;
  --cherry:#a3242e;
  --ink:#241c15;
  --ink2:#5a4636;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;max-width:100%}

.cf{
  background:var(--hall);
  color:var(--cream);
  font-family:"Literata",Georgia,"Times New Roman",serif;
  font-size:17px;
  line-height:1.72;
  -webkit-text-size-adjust:100%;
  overflow-wrap:break-word;
}

.cfWrap{max-width:1000px;margin:0 auto;padding:0 20px}

.cf h1,.cf h2,.cf h3,.cf .cfWord,.cf .cfTag{
  font-family:"Ysabeau","Trebuchet MS",sans-serif;
  font-weight:700;
  letter-spacing:.2px;
}
.cf p{margin:0 0 18px}
.cf a{color:var(--cherry);text-decoration:underline;text-underline-offset:3px}

/* ---------- зал (hero) ---------- */
.cfHall{
  background:
    radial-gradient(1100px 420px at 50% -120px,rgba(111,68,37,.55),transparent 70%),
    linear-gradient(180deg,var(--hall2),var(--hall));
  border-bottom:1px solid rgba(233,215,184,.14);
  padding:30px 0 52px;
  text-align:center;
}
.cfBrand{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:26px}
.cfLogo{width:56px;height:47px;flex:0 0 auto}
.cfWord{font-size:27px;color:var(--cream);letter-spacing:.6px}

.cfTag{
  font-size:15px;font-weight:600;letter-spacing:3.4px;text-transform:uppercase;
  color:var(--cream2);margin:0 0 14px;
}
.cf h1{
  font-size:clamp(30px,5.6vw,50px);
  line-height:1.12;
  margin:0 auto 20px;
  max-width:18ch;
  color:#f7f1e6;
}
.cfLede{max-width:60ch;margin:0 auto 26px;color:var(--cream2);font-size:17px}

.cfActions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:0 0 14px}
.cf a.cfCta{
  display:inline-block;background:var(--cherry);color:#f9f3e8;
  font-family:"Ysabeau","Trebuchet MS",sans-serif;font-weight:700;font-size:18px;
  padding:14px 30px;border-radius:999px;text-decoration:none;
  border:2px solid var(--cherry);
}
.cf a.cfCta:hover{background:#8c1d26;border-color:#8c1d26;color:#f9f3e8}
.cf a.cfCta2{
  display:inline-block;background:transparent;color:var(--cream);
  font-family:"Ysabeau","Trebuchet MS",sans-serif;font-weight:600;font-size:18px;
  padding:14px 28px;border-radius:999px;text-decoration:none;
  border:2px solid rgba(233,215,184,.55);
}
.cf a.cfCta2:hover{border-color:var(--cream);color:#f7f1e6}

.cfFine{font-size:13.5px;color:var(--cream2);margin:0 0 26px;letter-spacing:.3px}

.cfStrip{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  max-width:760px;margin:0 auto;
}
.cfStrip li{
  border:1px solid rgba(233,215,184,.2);border-radius:3px;
  padding:12px 8px;font-size:13px;color:var(--cream2);line-height:1.4;
}
.cfStrip span{
  display:block;font-family:"Ysabeau","Trebuchet MS",sans-serif;font-weight:700;
  font-size:24px;color:var(--cream);margin-bottom:4px;
}

/* ---------- кофейное кольцо ---------- */
.cfRing{position:relative;height:96px}
.cfRing::before{
  content:"";position:absolute;left:50%;top:20px;width:56px;height:56px;margin-left:-32px;
  border-radius:50%;border:4px solid;
  border-color:rgba(111,68,37,.95) rgba(111,68,37,.8) rgba(111,68,37,.18) rgba(111,68,37,.55);
}
.cfRing::after{
  content:"";position:absolute;left:50%;top:28px;width:56px;height:56px;margin-left:-22px;
  border-radius:50%;border:2px solid;
  border-color:rgba(233,215,184,.10) rgba(233,215,184,.34) rgba(233,215,184,.28) rgba(233,215,184,.08);
}

/* ---------- страница меню ---------- */
.cfMenu{
  position:relative;
  background:var(--panel);
  color:var(--ink);
  padding:52px 34px 30px;
  border-radius:3px;
  box-shadow:0 20px 44px rgba(0,0,0,.42);
}
.cfMenu::after{
  content:"";position:absolute;left:14px;right:14px;bottom:8px;height:1px;
  background:repeating-linear-gradient(90deg,rgba(111,68,37,.35) 0 6px,transparent 6px 12px);
}
.cfNum,.cfPrice{
  position:absolute;top:-24px;
  display:flex;align-items:center;justify-content:center;
  background:var(--panel);
  font-family:"Ysabeau","Trebuchet MS",sans-serif;
}
.cfNum{
  left:22px;width:52px;height:52px;border-radius:50%;
  border:2px solid var(--roast);color:var(--roast);
  font-style:italic;font-weight:500;font-size:25px;
}
.cfPrice{
  right:22px;height:52px;min-width:64px;padding:0 15px;border-radius:999px;
  border:2px dashed var(--cherry);color:var(--cherry);
  font-weight:700;font-size:19px;white-space:nowrap;
}

.cfStand{margin:0 0 26px}
.cf .cfStand h2{
  font-size:clamp(23px,3.5vw,33px);line-height:1.2;margin:0;
  color:var(--ink);max-width:24ch;
}
.cfFeet{display:block;position:relative;height:11px;margin-top:16px;border-top:2px solid var(--roast)}
.cfFeet::before,.cfFeet::after{content:"";position:absolute;top:2px;width:9px;height:9px;background:var(--roast)}
.cfFeet::before{left:14px}
.cfFeet::after{right:14px}

.cf .cfMenu h3{
  font-size:21px;margin:28px 0 12px;color:var(--roast);
}
.cfMenu p{color:var(--ink)}

/* ---------- доска с меню (каталог) ---------- */
.cfBoard{
  list-style:none;margin:0 0 24px;padding:18px 18px 10px;
  background:var(--panel2);border-radius:2px;
  display:grid;grid-template-columns:1fr 1fr;gap:14px 36px;
}
.cfPos{min-width:0}
.cfPosName{
  display:block;font-family:"Ysabeau","Trebuchet MS",sans-serif;font-weight:600;
  font-size:19px;line-height:1.25;color:var(--ink);
}
.cfPosLine{display:flex;align-items:baseline;gap:5px;font-size:12.5px;color:var(--ink2);line-height:1.5}
.cfPosMeta{flex:0 1 auto;min-width:0}
.cfDots{flex:1 1 12px;min-width:12px;border-bottom:2px dotted rgba(111,68,37,.55);transform:translateY(-4px)}
.cfPosPrice{
  flex:0 0 auto;font-family:"Ysabeau","Trebuchet MS",sans-serif;font-weight:700;
  font-size:18px;color:var(--cherry);
}

/* ---------- таблицы ---------- */
.cfScroll{overflow-x:auto;margin:0 0 20px;-webkit-overflow-scrolling:touch}
.cfSteps,.cfPay{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15px}
.cfSteps caption,.cfPay caption{
  text-align:left;font-size:13px;letter-spacing:.4px;text-transform:uppercase;
  color:var(--ink2);padding-bottom:9px;
}
.cfSteps th,.cfPay th{
  text-align:left;font-family:"Literata",Georgia,serif;font-weight:600;font-size:13.5px;
  color:#f3ece0;background:var(--roast);padding:9px 11px;border:1px solid var(--roast);
}
.cfSteps td,.cfPay td{padding:9px 11px;border:1px solid rgba(111,68,37,.3);color:var(--ink)}
.cfSteps tbody tr:nth-child(even),.cfPay tbody tr:nth-child(even){background:rgba(111,68,37,.07)}
.cfPay td:first-child{font-weight:600}
.cfPay td:last-child{color:var(--cherry);font-weight:600;white-space:nowrap}

/* ---------- чашки клуба ---------- */
.cfCups{
  list-style:none;margin:0 0 24px;padding:20px 8px 6px;
  display:flex;align-items:flex-end;justify-content:center;flex-wrap:wrap;gap:26px 30px;
}
.cfStep{display:flex;flex-direction:column;align-items:center;text-align:center;width:104px}
.cfCup{
  position:relative;width:var(--d);height:var(--d);border-radius:50%;
  border:2px solid var(--roast);background:rgba(111,68,37,.09);
  display:flex;align-items:center;justify-content:center;margin-bottom:10px;
}
.cfCup::after{
  content:"";position:absolute;right:-13px;top:28%;width:20px;height:40%;
  border:2px solid var(--roast);border-left:0;border-radius:0 999px 999px 0;
}
.cfCup em{
  font-family:"Ysabeau","Trebuchet MS",sans-serif;font-style:normal;font-weight:700;
  font-size:17px;color:var(--cherry);
}
.cfStepName{
  font-family:"Ysabeau","Trebuchet MS",sans-serif;font-weight:600;font-size:16px;color:var(--ink);
}
.cfStepReq{font-size:12.5px;color:var(--ink2)}

/* ---------- акции ---------- */
.cfPromos{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cfPromos li{display:flex;gap:14px;align-items:flex-start;padding:14px 15px;background:var(--panel2);border-radius:2px}
.cfPromoNum{
  flex:0 0 auto;font-family:"Ysabeau","Trebuchet MS",sans-serif;font-weight:700;font-size:19px;
  color:var(--cherry);min-width:62px;
}
.cfPromoBody{font-size:14.5px;color:var(--ink2);line-height:1.55}
.cfPromoName{display:block;font-family:"Ysabeau","Trebuchet MS",sans-serif;font-weight:600;font-size:17px;color:var(--ink)}

/* ---------- отзыв-врезка ---------- */
.cfNote{
  margin:24px 0 6px;padding:16px 18px;
  background:var(--panel2);border-left:4px solid var(--cherry);border-radius:0 2px 2px 0;
}
.cfNote blockquote{margin:0}
.cfNote p{margin:0 0 8px;font-size:16px;font-style:italic;color:var(--ink)}
.cfNote figcaption{font-size:13px;letter-spacing:.4px;color:var(--ink2);text-transform:uppercase}

/* ---------- FAQ ---------- */
.cfMenu details{border-bottom:1px solid rgba(111,68,37,.28);padding:12px 0}
.cfMenu details:first-of-type{border-top:1px solid rgba(111,68,37,.28)}
.cfMenu summary{
  cursor:pointer;list-style:none;font-weight:600;font-size:17px;color:var(--ink);
  padding-right:30px;position:relative;
}
.cfMenu summary::-webkit-details-marker{display:none}
.cfMenu summary::after{
  content:"+";position:absolute;right:4px;top:-2px;
  font-family:"Ysabeau","Trebuchet MS",sans-serif;font-size:24px;color:var(--cherry);line-height:1;
}
.cfMenu details[open] summary::after{content:"–"}
.cfMenu details p{margin:10px 0 2px;font-size:16px;color:var(--ink2)}

/* ---------- авторская сноска ---------- */
.cfAuthor{padding-top:30px}
.cfAuthorTitle{
  font-family:"Ysabeau","Trebuchet MS",sans-serif;font-weight:700;font-size:20px;
  color:var(--roast);margin:0 0 12px;
}
.cfAuthor p{font-size:15.5px;color:var(--ink2)}
.cfAge{font-size:13.5px;letter-spacing:.3px;color:var(--ink2);margin:0}

/* ---------- подвал ---------- */
.cfFoot{
  margin-top:96px;padding:40px 0 46px;
  background:var(--hall2);border-top:1px solid rgba(233,215,184,.14);
  text-align:center;color:var(--cream2);font-size:14.5px;
}
.cfFoot p{max-width:74ch;margin:0 auto 18px}
.cfFoot a{color:var(--cream)}
.cfFootFine{font-size:13px;color:var(--cream2)}

/* ---------- 900 ---------- */
@media (max-width:900px){
  .cfStrip{grid-template-columns:repeat(2,1fr)}
  .cfBoard{grid-template-columns:1fr;gap:12px}
  .cfPromos{grid-template-columns:1fr}
}

/* ---------- 620 ---------- */
@media (max-width:620px){
  .cf{font-size:16px}
  .cfWrap{padding:0 12px}
  .cfHall{padding:22px 0 40px}
  .cf h1{max-width:100%}
  .cfActions{gap:10px}
  .cf a.cfCta,.cf a.cfCta2{font-size:16px;padding:12px 20px}
  .cfMenu{padding:46px 16px 26px}
  .cfNum{left:12px;width:44px;height:44px;top:-20px;font-size:21px}
  .cfPrice{right:12px;height:44px;top:-20px;min-width:52px;padding:0 11px;font-size:16px}
  .cf .cfStand h2{max-width:100%;padding-right:52px}
  .cfRing{height:78px}
  .cfCups{gap:22px 10px;padding:16px 0 4px}
  .cfStep{width:100px}
  .cfCup{width:calc(var(--d) * .62);height:calc(var(--d) * .62);margin-bottom:8px}
  .cfCup::after{right:-11px;width:16px}
  .cfCup em{font-size:13px}
  .cfStepName{font-size:15px}
  .cfSteps,.cfPay{font-size:13.5px}
  .cfSteps th,.cfSteps td{padding:7px 8px}
  .cfScroll{overflow-x:visible}
  .cfPay thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cfPay tbody tr{display:block;margin:0 0 10px;border:1px solid rgba(111,68,37,.35);background:var(--panel2)}
  .cfPay tbody tr:nth-child(even){background:var(--panel2)}
  .cfPay td{
    display:flex;justify-content:space-between;align-items:baseline;gap:12px;
    border:0;border-bottom:1px dotted rgba(111,68,37,.35);padding:7px 11px;font-size:14.5px;
  }
  .cfPay td::before{content:attr(data-l);color:var(--ink2);font-size:12.5px;letter-spacing:.3px}
  .cfPay td:first-child{background:rgba(111,68,37,.14);font-size:16px}
  .cfPay td:last-child{border-bottom:0}
  .cfFoot{margin-top:70px}
}