@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{
  --paper:#fffdf8; --ink:#22313b; --muted:#5f6f78; --line:#e8e1d3;
  --teal:#0e6f6c; --teal-dark:#0a5250; --sand:#f6f0e2; --accent:#c26a45;
  --slot-bg:#fffbef; --slot-line:#d9b95c;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Manrope',-apple-system,'Segoe UI',sans-serif;font-size:16px;line-height:1.65;color:var(--ink);background:var(--paper)}
img{max-width:100%}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--teal-dark);text-decoration:underline}

/* ---------- header / nav ---------- */
header.site{background:var(--teal);color:#fff;position:relative;z-index:5}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding-top:14px;padding-bottom:14px}
.logo{font-weight:800;font-size:20px;color:#fff;letter-spacing:.2px;text-decoration:none}
.logo:hover{color:#ffe3bd;text-decoration:none}
.logo b{color:#ffd9a8;font-weight:800}
nav.main{width:100%}
nav.main summary{cursor:pointer;list-style:none;font-weight:600;padding:6px 0;display:block;color:#fff}
nav.main summary::-webkit-details-marker{display:none}
nav.main summary::after{content:" ☰ меню";}
nav.main[open] summary::after{content:" ✕ закрыть";}
nav.main ul{list-style:none;margin:0;padding:0 0 10px;display:flex;flex-wrap:wrap;gap:2px 20px}
nav.main a{color:#eaf7f5;font-size:15px}
nav.main a:hover{color:#ffd9a8}
nav.main a.active{color:#ffd9a8;font-weight:700}
@media(min-width:760px){
  nav.main{width:auto}
  nav.main summary{display:none}
  nav.main ul{padding:0}
}

/* ---------- hero ---------- */
.hero{background:linear-gradient(180deg,var(--sand),var(--paper));border-bottom:1px solid var(--line);padding:44px 0 36px}
.hero h1{margin:0 0 12px;font-size:34px;line-height:1.2;letter-spacing:-.4px}
.hero p{margin:0;max-width:680px;font-size:18px;color:var(--muted)}
.hero .kicker{display:inline-block;background:var(--teal);color:#fff;font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;padding:4px 10px;border-radius:99px;margin-bottom:14px}

/* ---------- cards ---------- */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin:18px 0 8px}
.card{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;transition:box-shadow .15s,transform .15s}
.card:hover{box-shadow:0 6px 22px rgba(34,49,59,.10);transform:translateY(-2px);text-decoration:none}
.card h3{margin:0 0 6px;font-size:17px;color:var(--ink)}
.card p{margin:0;font-size:14px;color:var(--muted)}
.card .tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--teal);background:var(--sand);border-radius:99px;padding:3px 9px;margin-bottom:10px}
.card.soon-card{opacity:.72;border-style:dashed}
.soon{display:inline-block;font-size:12px;font-weight:700;color:#8a7a4f;background:#f3ecd9;border-radius:99px;padding:2px 10px;vertical-align:middle;white-space:nowrap}

/* ---------- article ---------- */
main.article{padding:26px 0 10px}
.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:14px}
.breadcrumb a{color:var(--muted)}
h1.a-title{font-size:42px;line-height:1.15;margin:0 0 14px;letter-spacing:-.5px;font-weight:800}
.a-lead{font-size:19px;color:var(--muted);margin:0 0 20px;line-height:1.6}
.a-meta{font-size:13px;color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 0;margin:0 0 22px}
article h2{font-size:28px;margin:40px 0 14px;letter-spacing:-.3px;font-weight:750}
article h3{font-size:20px;margin:28px 0 10px;font-weight:700}
article p{margin:0 0 14px}
article ul,article ol{margin:0 0 16px;padding-left:22px}
article li{margin:6px 0}
article blockquote{margin:16px 0;padding:10px 16px;border-left:4px solid var(--teal);background:var(--sand);border-radius:0 10px 10px 0;color:var(--ink)}
table.t{width:100%;border-collapse:collapse;margin:14px 0 20px;font-size:15px}
table.t th{background:var(--sand);text-align:left}
table.t th,table.t td{border:none;padding:12px 14px;vertical-align:top;border-bottom:1px solid var(--line)}
table.t tbody tr:nth-child(even) td{background:#faf6ec}
table.t th{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);background:transparent!important}
.toc{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 22px;margin:0 0 28px;font-size:15px;box-shadow:0 2px 10px rgba(34,49,59,.04)}
.toc b{display:block;margin-bottom:8px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.toc b{display:block;margin-bottom:6px}
.toc ol{margin:0;padding-left:20px}
.faq details{border:1px solid var(--line);border-radius:10px;padding:10px 16px;margin:10px 0;background:#fff}
.faq summary{font-weight:700;cursor:pointer}
.faq details[open]{background:#fffdf4}
.readalso{margin:36px 0 10px;padding:16px 18px;background:var(--sand);border-radius:12px}
.readalso h3{margin:0 0 8px;font-size:16px}
.readalso ul{margin:0;padding-left:18px}

/* ---------- partner slots (placeholders) ---------- */
.slot{border:1px solid var(--line);background:#fffdf4;border-radius:16px;padding:20px 22px;margin:28px 0;box-shadow:0 2px 12px rgba(34,49,59,.05)}
.slot .slot-badge{display:inline-block;font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#9a927e;background:transparent;border:1px solid var(--line);border-radius:99px;padding:2px 10px;margin-bottom:10px}
.slot h3{margin:6px 0 6px;font-size:17px}
.slot p{margin:0 0 6px;font-size:14.5px;color:var(--muted)}
.slot .slot-note{font-size:12.5px;color:#8a7a4f}

/* ---------- footer ---------- */
footer.site{margin-top:48px;border-top:1px solid var(--line);background:var(--sand)}
footer.site .wrap{padding:22px 20px 30px;font-size:14px;color:var(--muted)}
footer.site ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 22px}
footer.site a{color:var(--muted)}
footer.site a:hover{color:var(--teal)}

/* ---------- hero with photo ---------- */
.hero{position:relative;background:#0a3d3a}
.hero .wrap{position:relative;z-index:2}
.hero::before{content:"";position:absolute;inset:0;background:url('../img/hero-sulak.jpg') center 30%/cover no-repeat;opacity:.92}
.hero .hero-inner{position:relative;z-index:2;padding:64px 0 72px;max-width:640px}
.hero h1{color:#fff;font-size:clamp(30px,4.6vw,48px);text-shadow:0 2px 24px rgba(0,0,0,.45)}
.hero p{color:#f0efe9;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.hero .kicker{background:rgba(255,255,255,.16);backdrop-filter:blur(4px)}
/* ---------- cards with photos ---------- */
.card{overflow:hidden;padding:0}
.card .card-img{display:block;height:170px;background-size:cover;background-position:center;border-radius:13px 13px 0 0}
.card .card-body{padding:16px 18px 18px}
.card h3{margin:0 0 6px}
.card .tag{margin:0 0 10px}
/* rubric page header image */
.rubric-hero{border-radius:16px;overflow:hidden;margin:8px 0 22px;box-shadow:0 4px 18px rgba(34,49,59,.10)}
.rubric-hero img{display:block;width:100%;height:300px;object-fit:cover}
/* article lead image */
.a-img{border-radius:16px;overflow:hidden;margin:0 0 20px;box-shadow:0 4px 18px rgba(34,49,59,.10)}
.a-img img{display:block;width:100%;max-height:420px;object-fit:cover}
figure.photo{margin:26px 0}
figure.photo img{width:100%;border-radius:16px;display:block;box-shadow:0 4px 18px rgba(34,49,59,.10)}
figure.photo figcaption{font-size:13px;color:var(--muted);margin-top:8px;text-align:center}


/* ===== Article/adaptive layer (Claude design) ===== */
```css
/* ==========================================================================
   Manrope Font
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   ARTICLE SECTION
   ========================================================================== */

.article {
  font-family: 'Manrope', sans-serif;
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
  color: #222;
  line-height: 1.65;
}

.article h1 {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 24px;
  color: #12233d;
}

.article h2 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  margin: 48px 0 20px;
  color: #12233d;
  padding-bottom: 10px;
  border-bottom: 2px solid #e2e6ea;
}

.article h3 {
  font-size: 22px;
  font-weight: 700;
  margin: 32px 0 16px;
  color: #1a2f52;
}

.article p {
  font-size: 17px;
  margin: 0 0 20px;
}

.article .lead {
  font-size: 19px;
  font-weight: 500;
  color: #3a4a5e;
  margin-bottom: 32px;
}

.article ul,
.article ol {
  font-size: 17px;
  margin: 0 0 20px;
  padding-left: 24px;
}

.article li {
  margin-bottom: 8px;
}

.article a {
  color: #0f6fbf;
  text-decoration: underline;
}

.article a:hover {
  color: #0a4f8a;
}

.article img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 24px 0;
}

.article blockquote {
  border-left: 4px solid #0f6fbf;
  background: #f4f8fb;
  margin: 24px 0;
  padding: 16px 20px;
  font-style: italic;
  color: #33475a;
  border-radius: 0 6px 6px 0;
}

/* ==========================================================================
   TABLES (zebra)
   ========================================================================== */

.article table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 15px;
  overflow-x: auto;
  display: block;
}

.article table thead {
  background: #12233d;
  color: #fff;
}

.article table th,
.article table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e2e6ea;
}

.article table tbody tr:nth-child(odd) {
  background: #f7f9fb;
}

.article table tbody tr:nth-child(even) {
  background: #ffffff;
}

.article table tbody tr:hover {
  background: #eef4fa;
}

/* ==========================================================================
   TABLE OF CONTENTS (Оглавление)
   ========================================================================== */

.toc {
  background: #f4f8fb;
  border: 1px solid #dde5ec;
  border-radius: 10px;
  padding: 24px 28px;
  margin: 32px 0 40px;
}

.toc-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 14px;
  color: #12233d;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.toc ol {
  margin: 0;
  padding-left: 22px;
  counter-reset: toc-counter;
}

.toc li {
  margin-bottom: 10px;
  font-size: 16px;
}

.toc a {
  color: #12233d;
  text-decoration: none;
  border-bottom: 1px dashed #9db4c9;
  transition: color .2s, border-color .2s;
}

.toc a:hover {
  color: #0f6fbf;
  border-color: #0f6fbf;
}

/* ==========================================================================
   FAQ (details/summary)
   ========================================================================== */

.faq {
  margin: 40px 0;
}

.faq details {
  border: 1px solid #dde5ec;
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 0;
  overflow: hidden;
  background: #fff;
  transition: box-shadow .2s;
}

.faq details[open] {
  box-shadow: 0 4px 14px rgba(18, 35, 61, 0.08);
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 17px;
  padding: 18px 20px;
  list-style: none;
  position: relative;
  color: #12233d;
  user-select: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: #0f6fbf;
  transition: transform .25s ease;
}

.faq details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq .faq-answer {
  padding: 0 20px 20px;
  font-size: 16px;
  color: #3a4a5e;
}

/* ==========================================================================
   AFFILIATE SLOTS (.slot)
   ========================================================================== */

.slot {
  border: 1px solid #d2dae2;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(18, 35, 61, 0.10);
  background: #ffffff;
  padding: 24px;
  margin: 36px 0;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.slot__icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
}

.slot__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}

.slot__content {
  flex: 1;
  min-width: 200px;
}

.slot__title {
  font-size: 18px;
  font-weight: 700;
  color: #12233d;
  margin-bottom: 6px;
}

.slot__desc {
  font-size: 15px;
  color: #55677c;
}

.slot__cta {
  display: inline-block;
  background: #0f6fbf;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s;
}

.slot__cta:hover {
  background: #0a4f8a;
}

.slot--highlight {
  border-color: #f0a30a;
  box-shadow: 0 6px 20px rgba(240, 163, 10, 0.20);
}

/* ==========================================================================
   FOOTER (dark)
   ========================================================================== */

.footer {
  background: #0d1b2e;
  color: #c4cdd8;
  font-family: 'Manrope', sans-serif;
  padding: 56px 20px 24px;
  margin-top: 60px;
}

.footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.footer__col h4 {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 18px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__col li {
  margin-bottom: 10px;
}

.footer__col a {
  color: #a9b6c4;
  text-decoration: none;
  font-size: 14px;
  transition: color .2s;
}

.footer__col a:hover {
  color: #ffffff;
}

.footer__logo {
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 12px;
  display: inline-block;
}

.footer__desc {
  font-size: 14px;
  color: #8fa0b3;
  line-height: 1.6;
}

.footer__socials {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.footer__socials a {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #16283f;
  border-radius: 50%;
  color: #c4cdd8;
  transition: background .2s, color .2s;
}

.footer__socials a:hover {
  background: #0f6fbf;
  color: #fff;
}

.footer__bottom {
  max-width: 1200px;
  margin: 40px auto 0;
  padding-top: 20px;
  border-top: 1px solid #1c2f47;
  font-size: 13px;
  color: #7488a0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.footer__bottom a {
  color: #7488a0;
  text-decoration: underline;
}

.footer__bottom a:hover {
  color: #c4cdd8;
}

/* ==========================================================================
   RESPONSIVE / MEDIA QUERIES (360px - 1440px)
   ========================================================================== */

@media (max-width: 1440px) {
  .article {
    max-width: 840px;
  }
}

@media (max-width: 1200px) {
  .footer__inner {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1024px) {
  .article {
    max-width: 100%;
    padding: 32px 24px;
  }

  .article h1 {
    font-size: 38px;
  }

  .article h2 {
    font-size: 26px;
  }

  .footer__inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .article {
    padding: 28px 18px;
  }

  .article h1 {
    font-size: 32px;
  }

  .article h2 {
    font-size: 24px;
  }

  .article .lead {
    font-size: 17px;
  }

  .article table {
    font-size: 14px;
  }

  .article table th,
  .article table td {
    padding: 10px 12px;
  }

  .toc {
    padding: 20px 20px;
  }

  .slot {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .slot__cta {
    width: 100%;
    text-align: center;
  }

  .footer__inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .article h1 {
    font-size: 28px;
    line-height: 1.25;
  }

  .article h2 {
    font-size: 22px;
  }

  .article h3 {
    font-size: 19px;
  }

  .article p,
  .article ul,
  .article ol {
    font-size: 15.5px;
  }

  .article .lead { font-size: 16px; }
  }


.hero-cta{display:inline-block;margin-top:22px;background:#fff;color:var(--teal-dark);font-weight:800;font-size:16px;padding:14px 28px;border-radius:99px;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.18);transition:transform .15s}
.hero-cta:hover{transform:translateY(-2px);color:var(--teal)}

/* ===== FIX LAYER: карточки/подчёркивания/обрезки (ревью 19:53) ===== */
main a.card, main a.card *{text-decoration:none!important}
main a.card:hover h3{text-decoration:underline}
main .card{display:flex;flex-direction:column}
main .card .card-body{display:flex;flex-direction:column;flex:1;padding:16px 20px 20px}
main .grid .card h3{margin:8px 0 8px!important;font-size:17px!important;line-height:23px!important;max-height:69px!important;overflow:hidden!important;display:block!important}
main .grid .card p{margin:0!important;font-size:14px!important;line-height:20px!important;max-height:60px!important;overflow:hidden!important;display:block!important}
main .grid .card p{margin:0;color:var(--muted)}
main .card .tag{margin:0 0 6px!important}
main .card-img{aspect-ratio:16/10;height:auto!important}
main .soon-card .card-body{opacity:.85}
/* ссылка в тексте статьи — спокойнее */
.article a{text-decoration:none;border-bottom:1px solid rgba(14,111,108,.35)}
.article a:hover{border-bottom-color:var(--teal)}
/* меню шапки на десктопе — горизонтально */
@media(min-width:760px){
  header.site .wrap{gap:24px}
  nav.main ul{align-items:center}
  nav.main a{font-size:15px;font-weight:600}
}

/* главная — не статья: сброс article-типографики для карточек */
main.home .card h3{font-size:17px!important;line-height:23px!important;max-height:69px!important;overflow:hidden!important;margin:8px 0!important}
main.home .card p{font-size:14px!important;line-height:20px!important;max-height:60px!important;overflow:hidden!important}
main.home h2{font-size:26px;letter-spacing:-.3px}

/* QC 20:11 — soon-бейдж inline, hero-отступ, скрыть дубли фото на soon-карточках */
main .soon{position:static;display:inline-block;vertical-align:middle;margin-left:6px}
main .card h3 .soon{margin-left:8px}
.hero .wrap{padding-bottom:26px}
main .soon-card .card-img{opacity:.82}