/* ============================================================================
   Тимур Гильманов · визуальная система 2026
   Собрана по брендбуку. Один файл на весь сайт: человек должен узнавать
   один дом, а не пять вывесок.

   Что здесь считается законом:
     · цвета — хлеб, соль, вода: крем, глина, земля, лён;
     · пропорция на экране — семь частей фона, две текста, одна глины;
     · всё плоское: ни теней, ни градиентов, ни свечений, ни обводок;
     · единственная фигура — круг: полный там, где тепло и ответ,
       кольцо там, где боль и вопрос;
     · громко на экране говорит одна строка, остальные обычным голосом;
     · шёпот — курсив Lora, и только он;
     · левый край ровный, воздуха много, спешки нет.
   ========================================================================= */

/* --------------------------------------------------------------- материалы */
:root{
  --cream:#FDF8F2;      /* светлая стена, воздух */
  --linen:#E8DDD0;      /* плашки, чередование, фон цитат */
  --clay:#B7613F;       /* обожжённая земля: знак и акцентная строка */
  --clay-dark:#9C4F31;  /* та же глина, прижатая: только для наведения */
  --clay-light:#D9825B; /* глина на тёмном */
  --earth:#2C1810;      /* тёмно-коричневый вместо чёрного */
  --sage:#7D8A6B;       /* второй цвет, холоднее глины: не больше десятой части */
  --muted:#7A6A60;      /* земля, разбавленная кремом: второстепенный текст */
  --line:#E3D7C8;       /* волосяная линия */

  --wrap:1140px;
  --pad:clamp(22px,5vw,64px);
  --air:clamp(72px,10vw,132px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  font-family:'Montserrat',-apple-system,'Segoe UI',system-ui,sans-serif;
  font-weight:500;
  font-size:17px;
  line-height:1.65;
  color:var(--earth);
  background:var(--cream);
  font-feature-settings:"liga" 1;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2.5px solid var(--clay);outline-offset:4px}
::selection{background:var(--clay);color:var(--cream)}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);
      position:relative;z-index:1}
section{padding:var(--air) 0;position:relative;overflow:hidden}

/* ------------------------------------------------------------------ голос */
h1,h2,h3,h4{font-weight:800;letter-spacing:-.02em;line-height:1.08}

h1{font-size:clamp(34px,5.4vw,62px)}
h2{font-size:clamp(26px,3.6vw,42px);line-height:1.12}
h3{font-size:clamp(18px,1.6vw,21px);font-weight:600;letter-spacing:-.01em;line-height:1.3}
h4{font-size:15px;font-weight:600;letter-spacing:.02em}

p+p,h1+p,h2+p,h3+p{margin-top:1.1em}

/* Громкость: акцентная строка одна на экран, она окрашена глиной.
   Двух громких строк на одном макете не бывает. */
.accent{color:var(--clay)}

.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--clay);margin-bottom:20px;
}

.lead{
  font-size:clamp(18px,1.8vw,21px);
  color:var(--muted);
  max-width:34em;
  margin-top:24px;
}

.big{font-size:clamp(20px,2.4vw,27px);font-weight:600;line-height:1.35;max-width:26em}
.small{font-size:15px;color:var(--muted)}
.tiny{font-size:13.5px;color:var(--muted);letter-spacing:.01em}

/* Шёпот. Единственное место, где живёт второй шрифт. */
.quote,blockquote{
  font-family:'Lora',Georgia,serif;
  font-style:italic;font-weight:400;
  font-size:clamp(21px,2.7vw,31px);
  line-height:1.42;
  max-width:24em;
  color:var(--earth);
}
.quote cite,blockquote cite{
  display:block;margin-top:18px;
  font-family:'Montserrat',sans-serif;font-style:normal;font-weight:600;
  font-size:14px;color:var(--muted);letter-spacing:.02em;
}

/* Перечисления: отдельными строками с красной строки, без маркеров. */
ul,ol{list-style:none}
ul li,ol li{padding-left:1.4em;text-indent:-1.4em;margin-top:.7em}
ul li::before{content:"—";color:var(--clay);margin-right:.7em}
ol{counter-reset:n}
ol li{counter-increment:n}
ol li::before{content:counter(n) ".";color:var(--clay);margin-right:.6em;font-weight:600}
ul.bare li,ol.bare li{padding-left:0;text-indent:0}
ul.bare li::before,ol.bare li::before{content:none}

b,strong{font-weight:600}
em{font-family:'Lora',Georgia,serif;font-style:italic}

/* ------------------------------------------------------------------ знак */
/* Кольцо это пустой сосуд, полный круг — наполненный. Между ними весь метод.
   Знак никогда не стоит за головой: он поднимается из-за плеча, как очаг. */
.sign{
  position:absolute;border-radius:50%;
  background:var(--clay);
  z-index:0;pointer-events:none;
}
.sign-ring{
  background:none;
  border:solid var(--clay);
  border-width:calc(var(--d,420px) * .08);
}
.sign-lg{--d:clamp(320px,46vw,620px);width:var(--d);height:var(--d)}
.sign-md{--d:clamp(200px,26vw,360px);width:var(--d);height:var(--d)}
.dark .sign,.dark.sign{background:var(--clay-light)}
.dark .sign-ring{background:none;border-color:var(--clay-light)}

/* --------------------------------------------------------------- кнопки */
.btn{
  display:inline-block;
  padding:16px 34px;border-radius:999px;
  font-family:inherit;font-weight:600;font-size:16px;line-height:1.2;
  border:1.5px solid transparent;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
  text-align:center;
}
.btn-clay{background:var(--clay);color:var(--cream)}
.btn-clay:hover{background:var(--clay-dark)}
.btn-earth{background:var(--earth);color:var(--cream)}
.btn-earth:hover{background:#432618}
.btn-ghost{border-color:var(--earth);color:var(--earth)}
.btn-ghost:hover{background:var(--earth);color:var(--cream)}
.btn-cream{background:var(--cream);color:var(--earth)}
.btn-cream:hover{background:var(--linen)}
.dark .btn-ghost{border-color:var(--cream);color:var(--cream)}
.dark .btn-ghost:hover{background:var(--cream);color:var(--earth)}
.dark .btn-clay{background:var(--clay-light);color:var(--earth)}
.dark .btn-clay:hover{background:#E59872}

.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;align-items:center}
.under{margin-top:16px;font-size:14px;color:var(--muted)}
.dark .under{color:#C3AFA1}

/* ------------------------------------------------------------- плоскости */
.linen{background:var(--linen)}
.dark{background:var(--earth);color:var(--cream)}
.dark .eyebrow,.dark .accent{color:var(--clay-light)}
.dark .lead,.dark .small,.dark .tiny{color:#C3AFA1}
.dark .quote,.dark blockquote{color:var(--cream)}
.dark ul li::before,.dark ol li::before{color:var(--clay-light)}

.plate{background:var(--linen);padding:clamp(26px,3.4vw,46px)}
.dark .plate{background:#3C2317}
.plate-clay{background:var(--clay);color:var(--cream)}
.plate-clay .eyebrow{color:var(--cream);opacity:.75}

.rule{height:1.5px;background:var(--line);border:0;margin:0}
.dark .rule{background:#4A2E1E}

/* -------------------------------------------------------------- решётки */
.cols{display:grid;gap:clamp(26px,4vw,64px)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,80px);align-items:center}
.split-wide{grid-template-columns:1.25fr .75fr}

.card{background:var(--linen);padding:clamp(24px,2.8vw,38px);display:flex;flex-direction:column;height:100%}
.card h3{margin-bottom:12px}
.card p{color:var(--muted);font-size:16px}
.card .price{margin-top:auto;padding-top:22px;font-size:20px;font-weight:800;color:var(--clay)}
.card .go{margin-top:14px;font-weight:600;font-size:15px;color:var(--clay)}
.card .go:hover{color:var(--clay-dark)}
.card-clay{background:var(--clay);color:var(--cream)}
.card-clay p{color:#F4DCD0}
.card-clay .price,.card-clay .go{color:var(--cream)}
.card-earth{background:var(--earth);color:var(--cream)}
.card-earth p{color:#C3AFA1}
.card-earth .price,.card-earth .go{color:var(--clay-light)}

/* шаги и списки-перечисления */
.steps{display:grid;gap:2px;margin-top:44px}
.step{display:grid;grid-template-columns:64px 1fr;gap:clamp(16px,2vw,30px);
      padding:clamp(20px,2.4vw,30px) 0;border-top:1.5px solid var(--line);align-items:start}
.step:last-child{border-bottom:1.5px solid var(--line)}
.step .n{font-size:15px;font-weight:800;color:var(--clay);letter-spacing:.04em;padding-top:.25em}
.step h3{margin-bottom:8px}
.step p{color:var(--muted);font-size:16px;max-width:46em}
.dark .step{border-color:#4A2E1E}
.dark .step p{color:#C3AFA1}

/* вопросы и ответы */
.qa{border-top:1.5px solid var(--line)}
.qa details{border-bottom:1.5px solid var(--line)}
.qa summary{
  padding:24px 40px 24px 0;cursor:pointer;list-style:none;position:relative;
  font-weight:600;font-size:clamp(17px,1.5vw,19px);
}
.qa summary::-webkit-details-marker{display:none}
/* Круг вместо стрелки: единственная фигура системы */
.qa summary::after{
  content:"";position:absolute;right:4px;top:50%;width:11px;height:11px;
  margin-top:-5.5px;border-radius:50%;background:var(--clay);
  transition:background .2s ease;
}
.qa details[open] summary::after{background:none;border:2.5px solid var(--clay)}
.qa summary:hover{color:var(--clay)}
.qa .a{padding:0 0 26px;color:var(--muted);max-width:44em}

/* --------------------------------------------------------------- шапка */
header{background:var(--cream);border-bottom:1.5px solid var(--line);position:sticky;top:0;z-index:60}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:74px;gap:20px}
/* Подпись системы: маленький круг глины и имя. Логотипа нет — бренд это человек. */
.logo{display:inline-flex;align-items:center;gap:11px;font-weight:600;font-size:16px;letter-spacing:.01em;white-space:nowrap}
.logo::before{content:"";width:13px;height:13px;border-radius:50%;background:var(--clay);flex:none}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2vw,28px);font-size:15px;font-weight:500}
.nav-links a:not(.btn):hover{color:var(--clay)}
.nav .btn{padding:11px 22px;font-size:14.5px}
.burger{display:none;background:none;border:0;cursor:pointer;color:var(--earth);
        font-size:26px;line-height:1;padding:8px}

/* --------------------------------------------------------------- первый экран */
.hero{padding-top:clamp(56px,7vw,104px)}
.hero h1{max-width:15em}
.hero .lead{margin-top:26px}
.figure{position:relative;z-index:1}
.figure img{width:100%;object-fit:cover}
.portrait{aspect-ratio:4/5}
.landscape{aspect-ratio:4/3}

/* Знак из-за плеча: сдвинут вниз и вправо, срезан краем экрана. */
.hero-sign{right:calc(var(--d) * -.24);top:calc(var(--d) * -.06)}
.sign-tr{right:calc(var(--d) * -.35);top:calc(var(--d) * -.22)}
.sign-br{right:calc(var(--d) * -.32);bottom:calc(var(--d) * -.4)}
.sign-hi{top:calc(var(--d) * -.34)}

/* --------------------------------------------------------------- подвал */
footer{background:var(--earth);color:var(--cream);padding:var(--air) 0 46px}
footer a{color:#C3AFA1}
footer a:hover{color:var(--clay-light)}
.foot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,60px)}
.foot-grid h4{margin-bottom:16px;color:var(--cream)}
.foot-grid div>a{display:block;margin-bottom:9px;font-size:15px}
.foot-bottom{margin-top:52px;padding-top:26px;border-top:1.5px solid #4A2E1E;
             font-size:13.5px;color:#9C8577}

/* --------------------------------------------------------------- появление */
.rise{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.rise.show{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rise{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* --------------------------------------------------------------- узкий экран */
@media (max-width:980px){
  .split,.split-wide{grid-template-columns:1fr}
  .cols-3{grid-template-columns:1fr 1fr}
  .hero .figure{order:-1;max-width:460px}
}
/* Знак на узком экране.
   На широком текст занимает половину полосы, и знак спокойно стоит справа.
   На узком текст идёт во всю ширину — значит, знаку остаются только поля
   секции. Уводим его за край так, чтобы видимая дуга по высоте была примерно
   равна отступу секции: тогда она не встречается со строками.
   Это важнее, чем кажется: акцентная строка написана той же глиной, что и
   знак, и внутри него она просто исчезает. */
@media (max-width:980px){
  .sign-lg{--d:min(40vw,300px)}
  .sign-md{--d:min(28vw,200px)}
  .hero-sign,.sign-tr,.sign-hi{right:calc(var(--d) * -.55);top:calc(var(--d) * -.6);bottom:auto}
  .sign-br{right:calc(var(--d) * -.55);bottom:calc(var(--d) * -.6);top:auto}
}
@media (max-width:760px){
  .sign-lg{--d:min(46vw,200px)}
  .sign-md{--d:min(32vw,150px)}
  /* Уводим чуть дальше: дуга должна быть заведомо ниже отступа, а не вровень */
  .hero-sign,.sign-tr,.sign-hi{right:calc(var(--d) * -.58);top:calc(var(--d) * -.65)}
  .sign-br{right:calc(var(--d) * -.58);bottom:calc(var(--d) * -.65)}

  body{font-size:16px}
  .cols-2,.cols-3{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .burger{display:block}
  .nav-links{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--cream);border-bottom:1.5px solid var(--line);
    padding:10px var(--pad) 24px;
  }
  .nav-links.open{display:flex}
  .nav-links a:not(.btn){padding:13px 0;width:100%;border-bottom:1px solid var(--line)}
  .nav-links .btn{margin-top:16px}
  .step{grid-template-columns:1fr;gap:6px}
  .step .n{padding-top:0}
  .btns .btn{width:100%}
}