/* ==================================================================
   THE GREAT ESCAPE — escapeme.net
   Чёрный, тёмно-зелёный, охра, бумага. Антиква в заголовках.
   Максимум воздуха, минимум слов.
   ================================================================== */

:root{
  --black:      #0B0B0B;
  --black-soft: #121312;
  --green:      #1F3A2E;
  --green-deep: #16281F;
  --ochre:      #8A6A2F;
  --ochre-lit:  #B08C46;
  --paper:      #E8E2D6;
  --paper-dim:  #9C9689;
  --line:       rgba(232,226,214,.14);
  --line-soft:  rgba(232,226,214,.07);

  --serif: Georgia, "Iowan Old Style", "Times New Roman", "Droid Serif", serif;
  --sans:  "Helvetica Neue", Helvetica, Arial, "Inter", system-ui, sans-serif;

  --gutter: 22px;
  --measure: 34rem;
  --hero-image: none;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

body{
  margin:0;
  background:var(--black);
  color:var(--paper);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.62;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

a{ color:var(--paper); text-decoration:none; border-bottom:1px solid var(--ochre); padding-bottom:1px; }
a:hover{ color:var(--ochre-lit); border-color:var(--ochre-lit); }

::selection{ background:var(--ochre); color:var(--black); }

:focus-visible{ outline:2px solid var(--ochre-lit); outline-offset:3px; }

/* --- Бумажная фактура: лёгкий шум поверх всего --------------------- */
body::after{
  content:"";
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Раскладка ----------------------------------------------------- */
.wrap{
  width:100%; max-width:1040px; margin:0 auto;
  padding-left:calc(var(--gutter) + env(safe-area-inset-left));
  padding-right:calc(var(--gutter) + env(safe-area-inset-right));
}
.narrow{ max-width:var(--measure); }

section{ padding:72px 0; border-top:1px solid var(--line-soft); }
section:first-of-type{ border-top:0; }

@media (min-width:760px){
  body{ font-size:17px; }
  :root{ --gutter:40px; }
  section{ padding:110px 0; }
}

/* --- Типографика --------------------------------------------------- */
h1,h2,h3{ font-family:var(--serif); font-weight:400; letter-spacing:.01em; margin:0; }

.label{
  font-family:var(--sans);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ochre-lit); margin:0 0 18px;
}

h2{ font-size:clamp(1.7rem,5.2vw,2.6rem); line-height:1.15; margin:0 0 28px; }
h3{ font-size:1.12rem; line-height:1.3; margin:0 0 6px; }

p{ margin:0 0 1.15em; max-width:var(--measure); }
p:last-child{ margin-bottom:0; }

.lede{ font-family:var(--serif); font-size:clamp(1.15rem,3.4vw,1.45rem); line-height:1.5; }
.dim{ color:var(--paper-dim); }
.small{ font-size:.86rem; line-height:1.55; }

/* --- Шапка --------------------------------------------------------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px calc(var(--gutter) + env(safe-area-inset-right))
          14px calc(var(--gutter) + env(safe-area-inset-left));
  padding-top:calc(14px + env(safe-area-inset-top));
  background:linear-gradient(to bottom, rgba(11,11,11,.92), rgba(11,11,11,0));
  transition:background .3s ease;
}
.topbar.solid{ background:rgba(11,11,11,.96); border-bottom:1px solid var(--line-soft); }

.topbar__mark{
  display:none; white-space:nowrap;
  font-family:var(--serif); font-size:.82rem; letter-spacing:.18em;
  text-transform:uppercase; border:0; color:var(--paper);
  opacity:0; transform:translateY(-4px); transition:opacity .3s, transform .3s;
}
@media (min-width:620px){ .topbar__mark{ display:block; } }
.topbar.solid .topbar__mark{ opacity:1; transform:none; }

.topbar__right{ display:flex; align-items:center; gap:14px; margin-left:auto; }

/* кнопка в шапке появляется вместе с фоном — в hero она лишняя */
.topbar__cta{
  white-space:nowrap;
  opacity:0; pointer-events:none; transform:translateY(-4px);
  transition:opacity .3s, transform .3s;
}
.topbar.solid .topbar__cta{ opacity:1; pointer-events:auto; transform:none; }

.lang{ display:flex; gap:2px; font-size:11px; letter-spacing:.14em; }
.lang button{
  background:none; border:0; padding:4px 6px; cursor:pointer;
  color:var(--paper-dim); font:inherit; letter-spacing:inherit;
  font-family:var(--sans); text-transform:uppercase;
}
.lang button[aria-pressed="true"]{ color:var(--ochre-lit); }
.lang span{ color:var(--line); }

/* --- Кнопки -------------------------------------------------------- */
.btn{
  display:inline-block; border:1px solid var(--ochre); border-radius:0;
  padding:13px 26px; background:transparent; color:var(--paper);
  font-family:var(--sans); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; cursor:pointer; text-align:center;
  transition:background .25s ease, color .25s ease;
}
.btn:hover{ background:var(--ochre); color:var(--black); border-color:var(--ochre); }
.btn--solid{ background:var(--ochre); color:var(--black); }
.btn--solid:hover{ background:var(--ochre-lit); border-color:var(--ochre-lit); }
.btn--sm{ padding:9px 16px; font-size:11px; letter-spacing:.15em; }

/* --- Hero ---------------------------------------------------------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding:calc(120px + env(safe-area-inset-top)) 0 76px;
  border-top:0; overflow:hidden;
}
/* телефон боком: не растягиваем hero на весь экран, иначе текст не влезает */
@media (orientation:landscape) and (max-height:520px){
  .hero{ min-height:auto; padding:96px 0 56px; }
  .hero .scroll-cue{ display:none; }
}
.hero__bg{ position:absolute; inset:0; z-index:0; background:var(--black); }
.hero__bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 45%;
}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 30% 10%, rgba(31,58,46,.22), transparent 60%),
    linear-gradient(to bottom, rgba(11,11,11,.62) 0%, rgba(11,11,11,.50) 32%, rgba(11,11,11,.82) 74%, var(--black) 100%);
}
.hero .wrap{ position:relative; z-index:1; }

.hero__name{
  font-family:var(--serif);
  text-shadow:0 2px 40px rgba(0,0,0,.55);
  font-size:clamp(2.1rem,10.5vw,5.4rem);
  line-height:1.02; letter-spacing:.045em; text-transform:uppercase;
  margin:0;
}
.hero__kbo{
  font-family:var(--sans); font-size:10px; letter-spacing:.55em;
  text-transform:uppercase; color:var(--ochre-lit);
  margin:16px 0 0; padding-left:.3em;
}
.hero__rule{ width:56px; height:1px; background:var(--ochre); margin:34px 0; border:0; }
.hero__manifest{
  font-family:var(--serif); font-size:clamp(1.05rem,4.2vw,1.5rem);
  line-height:1.45; max-width:26rem; margin:0 0 34px;
  text-shadow:0 1px 24px rgba(0,0,0,.7);
}
.hero__meta{
  font-size:.8rem; letter-spacing:.06em; color:var(--paper-dim);
  margin:26px 0 0; max-width:26rem; text-shadow:0 1px 18px rgba(0,0,0,.85);
}

.scroll-cue{
  position:absolute; left:50%; transform:translateX(-50%);
  z-index:1; font-size:9px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--paper-dim); border:0;
}

/* --- Манифест ------------------------------------------------------ */
.manifesto p{ font-family:var(--serif); font-size:clamp(1.05rem,3.2vw,1.28rem); line-height:1.55; }

/* --- Chapter I ----------------------------------------------------- */
.chapter{ background:linear-gradient(to bottom, var(--black), var(--green-deep) 70%, var(--black)); }

.card{
  border:1px solid var(--line);
  background:rgba(31,58,46,.22);
  padding:30px var(--gutter);
}
@media (min-width:760px){ .card{ padding:44px; } }

.card__top{ display:flex; flex-wrap:wrap; gap:8px 20px; align-items:baseline; margin-bottom:6px; }
.card__title{ font-family:var(--serif); font-size:clamp(1.5rem,4.6vw,2.1rem); line-height:1.15; }
.card__place{ font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ochre-lit); }

.facts{ margin:28px 0 0; padding:0; list-style:none; border-top:1px solid var(--line-soft); }
.facts li{
  display:flex; flex-wrap:wrap; gap:2px 16px;
  padding:12px 0; border-bottom:1px solid var(--line-soft);
}
.facts dt,.facts .k{
  flex:0 0 auto; min-width:9.5rem;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--paper-dim);
  padding-top:4px;
}
.facts .v{ flex:1 1 16rem; margin:0; }

.pending{ color:var(--ochre-lit); font-style:italic; font-family:var(--serif); }

.incl{ display:grid; gap:26px; margin-top:34px; }
@media (min-width:760px){ .incl{ grid-template-columns:1fr 1fr; gap:40px; } }
.incl ul{ margin:12px 0 0; padding:0; list-style:none; }
.incl li{ padding:7px 0 7px 18px; position:relative; border-bottom:1px solid var(--line-soft); font-size:.94rem; }
.incl li::before{ content:""; position:absolute; left:0; top:16px; width:6px; height:1px; background:var(--ochre); }

.seats{
  margin-top:34px; padding:15px 18px; border:1px solid var(--line);
  font-size:.9rem;
}
.seats b{
  font-family:var(--serif); font-size:1.35rem; font-weight:400;
  color:var(--ochre-lit); margin-right:.35em;
}

.card__cta{ margin-top:30px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* --- Неделя -------------------------------------------------------- */
.rituals{ margin:0; padding:0; list-style:none; border-top:1px solid var(--line-soft); }
.rituals li{ padding:20px 0; border-bottom:1px solid var(--line-soft); }
@media (min-width:760px){
  .rituals li{ display:grid; grid-template-columns:15rem 1fr; gap:30px; align-items:baseline; }
}
.rituals h3{ font-family:var(--serif); font-size:1.15rem; margin:0; }
.rituals .when{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ochre); display:block; margin-top:5px; }
.rituals p{ margin:6px 0 0; color:var(--paper-dim); }
@media (min-width:760px){ .rituals p{ margin:0; } }

/* --- Две колонки (тренер / стол) ----------------------------------- */
.cols{ display:grid; gap:44px; }
@media (min-width:760px){ .cols{ grid-template-columns:1fr 1fr; gap:60px; } }

/* --- Membership ---------------------------------------------------- */
.membership{ background:var(--black-soft); }
.terms{ margin:0; padding:0; }
.terms > div{ padding:22px 0; border-bottom:1px solid var(--line-soft); }
.terms > div:first-child{ border-top:1px solid var(--line-soft); }
.terms dt{ font-family:var(--serif); font-size:1.15rem; margin-bottom:5px; }
.terms dd{ margin:0; color:var(--paper-dim); max-width:var(--measure); }

/* --- FAQ ----------------------------------------------------------- */
.faq{ border-top:1px solid var(--line-soft); }
.faq details{ border-bottom:1px solid var(--line-soft); }
.faq summary{
  cursor:pointer; list-style:none; padding:19px 34px 19px 0; position:relative;
  font-family:var(--serif); font-size:1.05rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%);
  color:var(--ochre); font-family:var(--sans); font-size:1.1rem;
}
.faq details[open] summary::after{ content:"–"; }
.faq p{ margin:0 0 20px; color:var(--paper-dim); }

/* --- Форма --------------------------------------------------------- */
.apply{ background:linear-gradient(to bottom, var(--black), var(--green-deep)); }

form{ margin-top:8px; }
.field{ margin-bottom:22px; }
.field label{
  display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper-dim); margin-bottom:8px;
}
.field .req{ color:var(--ochre); }

input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%; background:rgba(232,226,214,.04);
  border:0; border-bottom:1px solid var(--line);
  color:var(--paper); font-family:var(--sans); font-size:16px;
  padding:12px 12px; border-radius:0; -webkit-appearance:none; appearance:none;
}
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238A6A2F'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
  padding-right:34px;
}
select option{ background:var(--black); color:var(--paper); }
textarea{ resize:vertical; min-height:96px; }
input:focus,select:focus,textarea:focus{ border-bottom-color:var(--ochre); background:rgba(232,226,214,.07); outline:none; }
input::placeholder,textarea::placeholder{ color:rgba(156,150,137,.5); }

.field-row{ display:grid; gap:22px; }
@media (min-width:640px){ .field-row{ grid-template-columns:1fr 1fr; } }

.consent{ display:flex; gap:12px; align-items:flex-start; margin:28px 0; }
.consent input{ margin-top:5px; width:16px; height:16px; accent-color:var(--ochre); flex:0 0 auto; }
.consent label{ font-size:.84rem; color:var(--paper-dim); text-transform:none; letter-spacing:0; margin:0; line-height:1.5; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-note{ margin-top:18px; font-size:.84rem; color:var(--paper-dim); }
.form-status{ margin-top:18px; font-family:var(--serif); font-size:1.05rem; display:none; }
.form-status.on{ display:block; }
.form-status.ok{ color:var(--ochre-lit); }
.form-status.err{ color:#C97B5A; }

/* --- Футер --------------------------------------------------------- */
footer{
  border-top:1px solid var(--line-soft); padding:52px 0 44px;
  font-size:.85rem; color:var(--paper-dim);
}
footer .rows{ display:grid; gap:26px; }
@media (min-width:760px){ footer .rows{ grid-template-columns:1fr auto; align-items:end; } }
footer .mark{ font-family:var(--serif); letter-spacing:.16em; text-transform:uppercase; color:var(--paper); font-size:.9rem; }
footer .kbo{ font-size:10px; letter-spacing:.4em; color:var(--ochre); margin-top:8px; }
footer nav{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 20px; }
footer a{ border-bottom-color:var(--line); }

/* --- Служебное ----------------------------------------------------- */
.hidden{ display:none !important; }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* --- Внутренние страницы (privacy) --------------------------------- */
.doc{ padding:120px 0 80px; }
.doc h1{ font-size:clamp(1.8rem,5vw,2.6rem); margin-bottom:8px; }
.doc h2{ font-size:1.25rem; margin:40px 0 12px; }
.doc p,.doc li{ color:var(--paper-dim); max-width:var(--measure); }
.doc ul{ padding-left:20px; }
.doc li{ margin-bottom:8px; }

/* ==================================================================
   ДОБАВЛЕНО: фото-полосы, секция «отцы и сыновья», мобильный проход
   ================================================================== */

/* --- Полноширинные фото между секциями ----------------------------- */
.band{
  position:relative; margin:0; overflow:hidden;
  height:46svh; min-height:260px; max-height:520px;
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
.band--short{ height:34svh; min-height:200px; max-height:380px; }
.band img{ width:100%; height:100%; object-fit:cover; object-position:center 55%; }
.band::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(11,11,11,.55) 0%, rgba(11,11,11,.10) 40%, rgba(11,11,11,.80) 100%);
}
.band figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:0 calc(var(--gutter) + env(safe-area-inset-left)) 24px;
  font-family:var(--serif); font-size:clamp(1.05rem,3.6vw,1.5rem);
  color:var(--paper); text-shadow:0 1px 24px rgba(0,0,0,.7);
}
@media (min-width:760px){
  .band{ height:52vh; }
  .band figcaption{ padding-bottom:34px; max-width:1040px; margin:0 auto; left:0; right:0; }
}

/* --- Отцы и сыновья ------------------------------------------------ */
.sons{ background:var(--black-soft); }
.sons .lede{ margin-bottom:1.1em; }
.plain{ margin:12px 0 0; padding:0; list-style:none; }
.plain li{
  position:relative; padding:10px 0 10px 18px;
  border-bottom:1px solid var(--line-soft);
  color:var(--paper-dim); font-size:.94rem;
}
.plain li::before{ content:""; position:absolute; left:0; top:19px; width:6px; height:1px; background:var(--ochre); }

/* --- Мелочи, добавленные вместе с новой вёрсткой -------------------- */
.h-sm{ font-size:clamp(1.4rem,4vw,1.9rem); }
.intro{ margin-bottom:34px; }
.card__title{ margin:0; }
.incl .label{ margin-bottom:0; }
.footer-contact{ margin-top:18px; }
.btn--wide{ min-width:200px; }

/* ==================================================================
   МОБИЛЬНЫЙ ПРОХОД
   ================================================================== */

/* Никакой серой вспышки по тапу — вместо неё явное нажатое состояние */
a,button,summary,label,input,select,textarea{ -webkit-tap-highlight-color:transparent; }
.btn:active{ background:var(--ochre-lit); color:var(--black); border-color:var(--ochre-lit); }
.faq summary:active{ color:var(--ochre-lit); }
.lang button:active{ color:var(--paper); }

/* Пальцем в мелкое не попасть: 44px — минимум по гайдлайнам Apple */
.lang button{ min-width:44px; min-height:44px; }
.btn{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
.faq summary{ min-height:44px; display:flex; align-items:center; }
.consent input{ min-width:22px; min-height:22px; }
.consent label{ padding:6px 0; }
footer nav a{ padding:6px 0; }

/* Длинные слова и ссылки не должны разрывать вёрстку */
body{ overflow-wrap:break-word; }
h1,h2,h3,.hero__name{ overflow-wrap:normal; hyphens:none; }

/* Резинка прокрутки не должна показывать белое за краем страницы */
html{ background:var(--black); overscroll-behavior-y:none; }

/* Ландшафтный телефон: полосы ниже, чтобы не занимать весь экран */
@media (orientation:landscape) and (max-height:520px){
  .band{ height:70svh; min-height:180px; }
  .band--short{ height:60svh; min-height:150px; }
  section{ padding:56px 0; }
}

/* Совсем узкие экраны (iPhone SE, 320px) */
@media (max-width:360px){
  :root{ --gutter:18px; }
  .hero__name{ font-size:2rem; letter-spacing:.03em; }
  .btn{ padding:13px 20px; letter-spacing:.12em; }
  .card{ padding:24px 18px; }
  .facts .k{ min-width:0; }
}

/* Планшет в портрете: карточка не должна расползаться на всю ширину */
@media (min-width:760px) and (max-width:1000px){
  .incl{ grid-template-columns:1fr; gap:28px; }
}

/* Крупный системный шрифт / зум: ничего не должно обрезаться */
@media (min-width:760px){
  .rituals li{ align-items:start; }
}

/* Печать — на случай, если кто-то решит распечатать программу */
@media print{
  .topbar,.scroll-cue,.band,.hero__bg,form{ display:none !important; }
  body{ background:#fff; color:#000; }
  body::after{ display:none; }
  section{ padding:18px 0; border-color:#ccc; }
  a{ color:#000; border:0; }
}

/* --- Правки по итогам аудита тач-целей ----------------------------- */
.scroll-cue{
  padding:14px 22px; bottom:12px;
  display:inline-flex; align-items:center; min-height:44px;
}
footer nav a{ display:inline-block; padding:11px 0; }
.footer-contact a{ display:inline-block; padding:5px 0; }
.consent input{ font-size:16px; }

/* Ссылка внутри текста согласия: расширяем область нажатия,
   не сдвигая при этом сам текст */
.consent a{ padding:9px 3px; margin:-9px -3px; }
.consent input{ min-width:24px; min-height:24px; }
@media (min-width:620px){
  .topbar__mark{ display:inline-flex; align-items:center; min-height:44px; }
}