/* Статьи РИДЖ. Тёплый графит + травертин, акцент — приглушённая терракота,
   ровно как в основном style.css (см. DESIGN.md раздел 12.08.2026). Акцент
   только в мелких деталях: подчёркивания ссылок, маркеры FAQ, кнопка CTA.
   Крупный текст — нейтральный ink/paper, без терракоты. Переменные читаются
   из :root сайта с фоллбэками на случай отдельной загрузки файла. */
.article-page{
  --a-ink:        var(--ink, #211E1C);
  --a-ink-soft:   var(--ink-soft, #2B2723);
  --a-paper:      var(--paper, #F1ECE3);
  --a-paper-soft: var(--paper-soft, #E7DFCF);
  --a-accent:     var(--accent, #8F4B2B);
  --a-accent-dark:var(--accent-dark, #7F4526);
  --a-line:       var(--paper-line, rgba(33,30,28,0.14));
  --a-text:       var(--text-on-light, #262220);
  --a-text-soft:  var(--text-on-light-soft, rgba(38,34,32,0.72));
  --a-max: 760px;
  margin:0; background:var(--a-paper); color:var(--a-text);
  font-family:"Jost","Helvetica Neue",Arial,sans-serif;
  font-size:18px; line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
.article-page *{ box-sizing:border-box; }

.a-top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 24px; height:76px;
  background:var(--a-ink); color:var(--a-paper);
  position:sticky; top:0; z-index:10;
}
.a-logo{
  display:flex; flex-direction:column; line-height:1.05; text-decoration:none; color:var(--a-paper);
  font-family:"Unbounded",Georgia,serif; font-weight:600; font-size:17px; letter-spacing:.04em;
}
.a-logo span{
  font-family:"Jost",sans-serif; font-weight:500; font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--a-accent-dark); color:#D2955F; margin-top:3px;
}
.a-back{ font-size:14px; color:rgba(241,236,227,.68); text-decoration:none; font-family:"Jost",sans-serif; }
.a-back:hover{ color:var(--a-paper); }

.a-wrap{ max-width:var(--a-max); margin:0 auto; padding:52px 24px 84px; }
.a-crumbs{ font-size:13px; color:var(--a-text-soft); margin-bottom:28px; }
.a-crumbs a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--a-line); }
.a-crumbs a:hover{ color:var(--a-accent); border-color:var(--a-accent); }
.a-crumbs span{ margin:0 8px; opacity:.5; }

.article-page h1{
  font-family:"Unbounded",Georgia,serif; font-weight:500; color:var(--a-ink);
  font-size:clamp(28px, 4.2vw, 44px); line-height:1.18; margin:0 0 16px; letter-spacing:-.005em;
}
.a-meta{ font-size:14px; color:var(--a-text-soft); margin:0 0 32px; }

/* прямой ответ первым экраном — цитируют ИИ-поисковики и сниппеты */
.a-answer{
  font-size:19px; line-height:1.62; margin:0 0 38px; padding:24px 28px;
  border-left:3px solid var(--a-accent); background:var(--a-paper-soft);
}

.article-page h2{
  font-family:"Unbounded",Georgia,serif; font-weight:500; color:var(--a-ink);
  font-size:clamp(21px,2.6vw,28px); line-height:1.3; margin:48px 0 18px;
}
.article-page h3{
  font-family:"Unbounded",Georgia,serif; font-weight:500;
  font-size:clamp(16px,2vw,19px); margin:30px 0 12px; color:var(--a-ink);
}
.a-wrap p{ margin:0 0 18px; }
.a-wrap a{ color:var(--a-accent-dark); text-decoration:underline; text-decoration-color:var(--a-line); text-underline-offset:2px; }
.a-wrap a:hover{ color:var(--a-accent); }
.a-wrap ul, .a-wrap ol{ margin:0 0 20px; padding-left:22px; }
.a-wrap li{ margin-bottom:9px; }
.a-wrap strong{ font-weight:600; color:var(--a-ink); }

/* таблицы шире экрана прокручиваются внутри себя, страница не едет вбок */
.a-tablewrap{ overflow-x:auto; margin:0 0 26px; -webkit-overflow-scrolling:touch; border:1px solid var(--a-line); }
.a-wrap table{ border-collapse:collapse; width:100%; min-width:420px; font-size:15px; background:var(--a-paper-soft); }
.a-wrap th, .a-wrap td{ padding:12px 16px; border-bottom:1px solid var(--a-line); text-align:left; }
.a-wrap th{ font-weight:600; white-space:nowrap; color:var(--a-ink); font-family:"Jost",sans-serif; letter-spacing:.02em; }
.a-wrap tr:last-child td{ border-bottom:none; }

.a-faq{ border-bottom:1px solid var(--a-line); padding:17px 0; }
.a-faq summary{ cursor:pointer; font-weight:500; list-style:none; padding-right:30px; position:relative; color:var(--a-ink); }
.a-faq summary::-webkit-details-marker{ display:none; }
.a-faq summary::after{ content:"+"; position:absolute; right:4px; top:0; color:var(--a-accent); font-size:22px; line-height:1.1; }
.a-faq[open] summary::after{ content:"–"; }
.a-faq div{ padding-top:12px; color:var(--a-text-soft); }

.a-related{ margin:52px 0 0; padding-top:10px; }
.a-related h2{ margin-top:0; }
.a-related ul{ list-style:none; padding:0; }
.a-related li{ margin-bottom:12px; border-bottom:1px solid var(--a-line); padding-bottom:12px; }
.a-related a{ text-decoration:none; font-weight:500; }
.a-related a:hover{ text-decoration:underline; }

.a-cta{ margin:56px 0 0; padding:32px 28px; background:var(--a-ink); color:var(--a-paper); }
.a-cta h2{ margin-top:0; color:var(--a-paper); }
.a-cta p{ color:rgba(241,236,227,.76); }
.a-form{ display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
.a-form input[type=text], .a-form input[type=tel]{
  flex:1 1 220px; min-width:0; padding:14px 16px; font:inherit; font-size:16px;
  border:1px solid rgba(241,236,227,.24); background:rgba(241,236,227,.06); color:var(--a-paper);
}
.a-form input::placeholder{ color:rgba(241,236,227,.5); }
.a-form input[name=company]{ position:absolute; left:-9999px; width:1px; height:1px; }
.a-form button{
  flex:0 0 auto; padding:14px 28px; font:inherit; font-size:13px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
  border:none; background:var(--a-accent); color:var(--a-paper);
}
.a-form button:hover{ background:var(--a-accent-dark); }
.a-status{ flex:1 1 100%; font-size:14px; color:rgba(241,236,227,.68); min-height:20px; }

.a-foot{ padding:30px 24px 46px; text-align:center; background:var(--a-ink); }
.a-foot a{ color:rgba(241,236,227,.6); font-size:14px; text-decoration:none; font-family:"Jost",sans-serif; }
.a-foot a:hover{ color:var(--a-paper); }

/* список статей на /statyi/ */
.a-list{ list-style:none; padding:0; margin:28px 0 0; }
.a-list li{ border-bottom:1px solid var(--a-line); padding:22px 0; }
.a-list a{ font-family:"Unbounded",Georgia,serif; font-weight:500; font-size:19px; text-decoration:none; display:block; margin-bottom:9px; color:var(--a-ink); }
.a-list a:hover{ color:var(--a-accent-dark); }
.a-list p{ color:var(--a-text-soft); font-size:16px; margin:0; }

@media (max-width:520px){
  .article-page{ font-size:17px; }
  .a-wrap{ padding:36px 18px 64px; }
  .a-answer{ font-size:17px; padding:20px 20px; }
  .a-cta{ padding:26px 20px; }
}