/* =========================================================
   LANGLIFY BLOG — PREMIUM EDITORIAL UI

   Блог партнёра (сайт, 06.10), перенесён в репозиторий 10.10
   (docs/knowledge/2026-10-10-blog-partnera.md). Светлая тема —
   его; поправлены только цвета мелкого текста до контраста 4,5:1.
   Своё у переноса: основа страницы ниже (у партнёра её давал
   /styles.css старой витрины), переключатель темы, тёмная тема,
   покой при reduce и обложки WebP — в конце файла.
   ========================================================= */

/* Основа страницы: раньше её давал /styles.css витрины партнёра.
   Шрифт — Inter из /fonts.css, своими файлами. Селекторы по тегу,
   как там: классы партнёра ниже должны их перекрывать. */
*{box-sizing:border-box}
body{font-family:Inter,system-ui,sans-serif}
a{text-decoration:none;color:inherit}
button{font:inherit;cursor:pointer}

:root {
  --blog-bg: #f4f5ef;
  --blog-ink: #10241a;
  --blog-text: #35483e;
  --blog-muted: #75837b;
  --blog-green: #16845d;
  --blog-green-dark: #123d2c;
  --blog-green-soft: #e1f0e8;
  --blog-line: rgba(18, 61, 44, .10);
  --blog-card: rgba(255,255,255,.88);
  --blog-shadow: 0 24px 70px rgba(25, 57, 42, .09);
}

/* ---------------------------------------------------------
   PAGE
   --------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

body.blog-page {
  margin: 0;
  min-height: 100vh;
  color: var(--blog-text);
  background:
    radial-gradient(
      circle at 5% 5%,
      rgba(55, 177, 125, .12),
      transparent 26rem
    ),
    radial-gradient(
      circle at 93% 15%,
      rgba(223, 177, 99, .10),
      transparent 25rem
    ),
    linear-gradient(
      180deg,
      #f7f7f2 0%,
      #f2f5ef 48%,
      #f7f6f0 100%
    );
}

body.blog-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  background-image:
    radial-gradient(
      rgba(25, 73, 52, .035) .8px,
      transparent .8px
    );
  background-size: 22px 22px;
  z-index: -1;
}

.blog-shell {
  width: min(1180px, calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.blog-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 14px 0;
  background: rgba(247, 247, 242, .75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(24, 70, 50, .07);
}

.blog-topbar-inner {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.blog-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #102219;
  text-decoration: none;
  font-size: 27px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -1.4px;
}

.blog-brand::before {
  content: "";
  width: 29px;
  height: 35px;
  flex: 0 0 auto;
  background:
    url("/logo-tail-l.webp")
    center / contain
    no-repeat;
}

.blog-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px;
  border: 1px solid rgba(23, 67, 48, .075);
  border-radius: 999px;
  background: rgba(255,255,255,.56);
}

.blog-nav a {
  position: relative;
  padding: 9px 13px;
  border-radius: 999px;
  color: #526159;
  text-decoration: none;
  font-size: 13px;
  line-height: 1;
  font-weight: 750;
  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}

.blog-nav a:hover {
  color: #123d2c;
  background: rgba(25, 137, 94, .09);
  transform: translateY(-1px);
}

.blog-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.blog-lang,
.blog-login,
.blog-register {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.blog-lang,
.blog-login {
  color: #183c2c;
  border: 1px solid rgba(22, 69, 49, .12);
  background: rgba(255,255,255,.7);
}

.blog-register {
  color: white;
  border: 1px solid #153c2d;
  background:
    linear-gradient(
      135deg,
      #194d38,
      #123426
    );
  box-shadow:
    0 9px 22px rgba(18, 61, 44, .15);
}

.blog-lang:hover,
.blog-login:hover,
.blog-register:hover {
  transform: translateY(-2px);
}

/* ---------------------------------------------------------
   BLOG HERO
   --------------------------------------------------------- */

.blog-hero {
  position: relative;
  max-width: none;
  margin-top: 48px;
  margin-bottom: 38px;
  padding: 76px 72px 74px;
  overflow: hidden;
  border-radius: 40px;
  border: 1px solid rgba(22, 87, 59, .08);
  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(255,255,255,.85),
      transparent 18rem
    ),
    linear-gradient(
      135deg,
      #e6f3eb 0%,
      #f8f6e9 58%,
      #f3e4cb 100%
    );
  box-shadow:
    0 32px 85px rgba(29, 69, 50, .09);
}

.blog-hero::before {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  right: -82px;
  top: -96px;
  border-radius: 50%;
  border: 65px solid rgba(30, 139, 96, .065);
}

.blog-hero::after {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  right: 120px;
  bottom: -135px;
  border-radius: 50%;
  background:
    rgba(216, 164, 87, .10);
}

.blog-kicker {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  padding: 9px 13px;
  border-radius: 999px;
  color: #147653;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(22, 132, 93, .10);
  box-shadow:
    0 8px 20px rgba(24, 67, 48, .04);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.blog-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1ba875;
  box-shadow:
    0 0 0 5px rgba(27, 168, 117, .10);
}

.blog-hero h1 {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0;
  color: #10241a;
  font-size: clamp(46px, 6.5vw, 78px);
  line-height: .97;
  letter-spacing: -.058em;
  font-weight: 850;
}

.blog-hero p {
  position: relative;
  z-index: 2;
  max-width: 690px;
  margin: 28px 0 0;
  color: #52645a; /* было #5b6d63: 4,4 к 1 на песочном краю */
  font-size: 18px;
  line-height: 1.72;
}

/* ---------------------------------------------------------
   BLOG GRID
   --------------------------------------------------------- */

.blog-grid {
  display: grid;
  grid-template-columns: 1.18fr .82fr;
  align-items: stretch;
  gap: 24px;
  padding: 0 0 105px;
}

.blog-card {
  position: relative;
  min-height: 500px;
  padding: 0 34px 34px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 32px;
  border: 1px solid rgba(20, 70, 49, .09);
  background: rgba(255,255,255,.88);
  box-shadow: var(--blog-shadow);
  transition:
    transform .3s cubic-bezier(.2,.8,.2,1),
    box-shadow .3s ease,
    border-color .3s ease;
}

.blog-card::before {
  content: "";
  position: relative;
  display: block;
  flex: 0 0 auto;
  height: 215px;
  margin: 0 -34px 30px;
  overflow: hidden;
  border-bottom:
    1px solid rgba(22, 78, 54, .06);
}

.blog-card:nth-child(1)::before {
  background:
    radial-gradient(
      circle at 28% 38%,
      rgba(255,255,255,.9) 0 8%,
      transparent 8.5%
    ),
    radial-gradient(
      circle at 70% 58%,
      rgba(20, 125, 87, .22) 0 14%,
      transparent 14.5%
    ),
    radial-gradient(
      circle at 50% 130%,
      rgba(247, 224, 174, .65) 0 35%,
      transparent 35.5%
    ),
    linear-gradient(
      135deg,
      #d9eee3,
      #bde1ce 48%,
      #edf4e7
    );
}

.blog-card:nth-child(2)::before {
  background:
    radial-gradient(
      circle at 76% 32%,
      rgba(255,255,255,.75) 0 12%,
      transparent 12.5%
    ),
    radial-gradient(
      circle at 33% 78%,
      rgba(255, 201, 111, .32) 0 17%,
      transparent 17.5%
    ),
    radial-gradient(
      circle at -5% 5%,
      rgba(24, 112, 79, .25) 0 23%,
      transparent 23.5%
    ),
    linear-gradient(
      145deg,
      #f4ead6,
      #e8d5ad 48%,
      #e5efe1
    );
}

.blog-card::after {
  content: "Aa";
  position: absolute;
  top: 63px;
  left: 34px;
  z-index: 2;
  color: rgba(18, 61, 44, .74);
  font-size: 72px;
  line-height: 1;
  letter-spacing: -.08em;
  font-weight: 850;
  font-family:
    Georgia,
    "Times New Roman",
    serif;
}

.blog-card:nth-child(2)::after {
  content: "9.0";
  color: rgba(85, 63, 29, .72);
}

.blog-card:hover {
  transform: translateY(-8px);
  border-color: rgba(22, 132, 93, .17);
  box-shadow:
    0 38px 85px rgba(25, 57, 42, .14);
}

.blog-card-tag {
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  color: #157653;
  background: #ecf6f0;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.blog-card h2 {
  margin: 18px 0 15px;
  color: #12271c;
  font-size: clamp(26px, 2.9vw, 35px);
  line-height: 1.08;
  letter-spacing: -.04em;
}

.blog-card p {
  margin: 0;
  color: #5f6e66; /* было #68786f: 4,6 к 1 — впритык к 4,5 */
  font-size: 15.5px;
  line-height: 1.72;
}

.blog-card-meta {
  width: fit-content;
  margin-top: auto;
  padding-top: 30px;
  color: #5a6861; /* было #8a9690: 3 к 1 */
  font-size: 12px;
  font-weight: 650;
}

.blog-card-link {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  margin-top: 15px;
  color: #147653;
  text-decoration: none;
  font-size: 14px;
  font-weight: 900;
  transition:
    transform .2s ease,
    color .2s ease;
}

.blog-card-link:hover {
  color: #0f593e;
  transform: translateX(4px);
}

/* ---------------------------------------------------------
   ARTICLE LAYOUT
   --------------------------------------------------------- */

.article-wrap {
  width: min(900px, calc(100% - 48px));
  margin: 0 auto;
  padding: 60px 0 110px;
}

.article-breadcrumbs {
  margin-bottom: 27px;
  color: #5a6861; /* было #8a9890: 2,8 к 1 */
  font-size: 13px;
  line-height: 1.5;
}

.article-breadcrumbs a {
  color: #527064;
  text-decoration: none;
}

.article-breadcrumbs a:hover {
  color: #15825b;
}

.article-meta {
  width: fit-content;
  margin-bottom: 17px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #157653;
  background: rgba(224, 241, 232, .88);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
}

.article-wrap > h1 {
  margin: 0;
  padding: 50px 52px 18px;
  border:
    1px solid rgba(20, 70, 49, .09);
  border-bottom: 0;
  border-radius: 34px 34px 0 0;
  color: #10241a;
  background:
    radial-gradient(
      circle at 90% 0,
      rgba(255,255,255,.8),
      transparent 18rem
    ),
    linear-gradient(
      135deg,
      #e4f2e9,
      #f7f1df
    );
  font-size: clamp(38px, 5.5vw, 61px);
  line-height: 1.02;
  letter-spacing: -.052em;
  box-shadow:
    0 -6px 35px rgba(32, 69, 51, .025);
}

.article-lead {
  margin: 0 0 30px;
  padding: 14px 52px 45px;
  border:
    1px solid rgba(20, 70, 49, .09);
  border-top: 0;
  border-radius: 0 0 34px 34px;
  color: #586b60;
  background:
    linear-gradient(
      135deg,
      #e4f2e9,
      #f7f1df
    );
  font-size: 19px;
  line-height: 1.75;
  box-shadow:
    0 27px 65px rgba(28, 63, 46, .07);
}

.article-content {
  margin-top: 30px;
  padding: 54px 58px 58px;
  border:
    1px solid rgba(20, 70, 49, .085);
  border-radius: 34px;
  color: #34483d;
  background: rgba(255,255,255,.90);
  box-shadow:
    0 28px 75px rgba(27, 60, 45, .07);
  font-size: 17.5px;
  line-height: 1.87;
}

.article-content > p:first-child {
  font-size: 18.5px;
  color: #43584d;
}

.article-content p {
  margin: 0 0 23px;
}

.article-content h2 {
  position: relative;
  margin: 58px 0 20px;
  padding-left: 19px;
  color: #12271c;
  font-size: 30px;
  line-height: 1.18;
  letter-spacing: -.035em;
}

.article-content h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: .31em;
  width: 6px;
  height: .88em;
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      #1aa16f,
      #7fc7a7
    );
}

.article-content h3 {
  margin: 36px 0 14px;
  color: #173326;
  font-size: 21px;
  line-height: 1.3;
}

.article-content ul,
.article-content ol {
  margin: 10px 0 29px;
  padding-left: 25px;
}

.article-content li {
  margin-bottom: 10px;
  padding-left: 4px;
}

.article-content strong {
  color: #10261b;
}

.article-content em {
  color: #406151;
}

/* ---------------------------------------------------------
   EXAMPLES & NOTES
   --------------------------------------------------------- */

.article-example,
.article-note {
  position: relative;
  margin: 30px 0;
  padding: 25px 28px;
  overflow: hidden;
  border-radius: 21px;
}

.article-example {
  border:
    1px solid rgba(24, 143, 98, .12);
  color: #264638;
  background:
    linear-gradient(
      135deg,
      rgba(225, 244, 235, .82),
      rgba(246, 249, 244, .90)
    );
}

.article-example::before {
  content: "“";
  position: absolute;
  right: 19px;
  top: -13px;
  color: rgba(22, 132, 93, .09);
  font-family:
    Georgia,
    serif;
  font-size: 100px;
  line-height: 1;
}

.article-note {
  border:
    1px solid rgba(184, 137, 61, .13);
  color: #4e493c;
  background:
    linear-gradient(
      135deg,
      #fbf6e8,
      #f5efe1
    );
}

/* ---------------------------------------------------------
   ARTICLE CTA
   --------------------------------------------------------- */

.article-cta {
  position: relative;
  margin-top: 63px;
  padding: 39px 40px;
  overflow: hidden;
  border-radius: 27px;
  color: white;
  background:
    radial-gradient(
      circle at 95% 10%,
      rgba(74, 183, 135, .35),
      transparent 17rem
    ),
    linear-gradient(
      135deg,
      #153f2d,
      #0d2c20
    );
  box-shadow:
    0 24px 55px rgba(13, 44, 32, .18);
}

.article-cta::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -80px;
  bottom: -105px;
  border:
    38px solid rgba(255,255,255,.055);
  border-radius: 50%;
}

.article-cta h2 {
  position: relative;
  z-index: 2;
  margin: 0 0 12px;
  padding: 0;
  color: white;
  font-size: 29px;
}

.article-cta h2::before {
  display: none;
}

.article-cta p {
  position: relative;
  z-index: 2;
  max-width: 590px;
  margin-bottom: 21px;
  color: rgba(255,255,255,.73);
}

.article-cta a {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  color: #153d2c;
  background: white;
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
  box-shadow:
    0 10px 23px rgba(0,0,0,.10);
  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.article-cta a:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 27px rgba(0,0,0,.14);
}

/* ---------------------------------------------------------
   RELATED
   --------------------------------------------------------- */

.related {
  margin-top: 50px;
  padding: 30px 0 0;
  border-top:
    1px solid rgba(20, 70, 49, .10);
  color: #5f6e66; /* было #687970: 4,57 к 1 — впритык к 4,5 */
}

.related > strong {
  color: #183326;
}

.related a {
  display: inline-block;
  margin-top: 3px;
  color: #147653;
  font-weight: 850;
  text-decoration: none;
}

.related a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

.blog-footer {
  margin-top: 20px;
  padding: 38px 0 46px;
  border-top:
    1px solid rgba(20, 70, 49, .09);
  background: rgba(248,248,243,.58);
}

.blog-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  color: #5a6861; /* было #849087: 3,1 к 1 */
  font-size: 12px;
}

.blog-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.blog-footer a {
  color: #5b6e63;
  text-decoration: none;
  transition: color .2s ease;
}

.blog-footer a:hover {
  color: #15825b;
}

/* ---------------------------------------------------------
   SELECTION
   --------------------------------------------------------- */

.blog-page ::selection {
  color: #0d291d;
  background: #c8ead9;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 980px) {

  .blog-nav {
    display: none;
  }

  .blog-grid {
    grid-template-columns: 1fr 1fr;
  }

  .blog-hero {
    padding:
      64px
      50px
      60px;
  }
}

@media (max-width: 760px) {

  .blog-shell,
  .article-wrap {
    width: min(
      calc(100% - 28px),
      900px
    );
  }

  .blog-topbar {
    padding: 9px 0;
  }

  .blog-topbar-inner {
    min-height: 50px;
  }

  .blog-brand {
    font-size: 24px;
  }

  .blog-brand::before {
    width: 25px;
    height: 31px;
  }

  .blog-login {
    display: none;
  }

  .blog-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-bottom: 70px;
  }

  .blog-hero {
    margin-top: 25px;
    margin-bottom: 24px;
    padding:
      48px
      27px
      46px;
    border-radius: 28px;
  }

  .blog-hero h1 {
    font-size: clamp(
      39px,
      12vw,
      57px
    );
  }

  .blog-hero p {
    font-size: 16px;
  }

  .blog-card {
    min-height: 450px;
    padding:
      0
      27px
      29px;
    border-radius: 26px;
  }

  .blog-card::before {
    height: 185px;
    margin:
      0
      -27px
      25px;
  }

  .blog-card::after {
    top: 53px;
    left: 27px;
    font-size: 62px;
  }

  .article-wrap {
    padding:
      36px
      0
      75px;
  }

  .article-wrap > h1 {
    padding:
      34px
      27px
      14px;
    border-radius:
      27px
      27px
      0
      0;
  }

  .article-lead {
    padding:
      10px
      27px
      32px;
    border-radius:
      0
      0
      27px
      27px;
    font-size: 17px;
  }

  .article-content {
    margin-top: 20px;
    padding:
      33px
      26px
      37px;
    border-radius: 27px;
    font-size: 16.5px;
  }

  .article-content h2 {
    margin-top: 46px;
    font-size: 26px;
  }

  .article-example,
  .article-note {
    padding:
      21px
      22px;
  }

  .article-cta {
    padding:
      31px
      26px;
    border-radius: 23px;
  }

  .blog-footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 480px) {

  .blog-register {
    display: none;
  }

  .blog-actions {
    gap: 5px;
  }

  .blog-lang {
    padding:
      0
      13px;
  }

  .blog-hero {
    padding:
      40px
      22px;
  }

  .blog-kicker {
    margin-bottom: 18px;
  }

  .blog-card h2 {
    font-size: 27px;
  }

  .article-wrap > h1 {
    font-size: 37px;
  }
}

/* ---------------------------------------------------------
   MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}


/* =========================================================
   LANGLIFY BLOG ENHANCEMENTS V3
   ========================================================= */


/* Reading progress */

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  height: 3px;
  pointer-events: none;
}

.reading-progress-bar {
  width: 0;
  height: 100%;
  background:
    linear-gradient(
      90deg,
      #22a875,
      #6bcaa1,
      #d6ae67
    );
  box-shadow:
    0 0 12px
    rgba(31, 164, 115, .3);
}


/* Latest articles */

.blog-section-head {
  padding-top: 8px;
  padding-bottom: 27px;
}

.blog-section-small {
  margin-bottom: 7px;
  color: #127650; /* было #16845d: 4,3 к 1 */
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.blog-section-head h2 {
  margin: 0;
  color: #12271c;
  font-size:
    clamp(32px, 4vw, 46px);
  line-height: 1.05;
  letter-spacing: -.045em;
}

.blog-section-head p {
  max-width: 550px;
  margin: 10px 0 0;
  color: #5a6861; /* было #748179: 3,7 к 1 */
  font-size: 15px;
  line-height: 1.65;
}


/* Hero topic chips */

.blog-topic-chips {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 30px;
}

.blog-topic-chips span {
  min-height: 34px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  border:
    1px solid
    rgba(27, 109, 77, .10);
  border-radius: 999px;
  color: #4e685b;
  background:
    rgba(255,255,255,.64);
  backdrop-filter:
    blur(10px);
  font-size: 11px;
  font-weight: 750;
}


/* Featured */

.featured-badge {
  position: absolute;
  z-index: 5;
  top: 18px;
  right: 18px;
  min-height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border:
    1px solid
    rgba(255,255,255,.65);
  border-radius: 999px;
  color: #174432;
  background:
    rgba(255,255,255,.84);
  backdrop-filter:
    blur(12px);
  box-shadow:
    0 8px 22px
    rgba(30,67,51,.10);
  font-size: 10px;
  font-weight: 900;
}


/* Back to blog */

.article-back {
  display: inline-flex;
  margin-bottom: 23px;
  color: #177b58;
  text-decoration: none;
  font-size: 13px;
  font-weight: 850;
  transition:
    transform .2s ease;
}

.article-back:hover {
  transform:
    translateX(-3px);
}


/* Contents */

.article-toc {
  margin: 30px 0 0;
  padding: 25px 28px;
  border:
    1px solid
    rgba(20,70,49,.09);
  border-radius: 25px;
  background:
    rgba(255,255,255,.80);
  box-shadow:
    0 17px 45px
    rgba(27,60,45,.05);
}

.article-toc-title {
  margin-bottom: 16px;
  color: #173528;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.article-toc-list {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0,1fr));
  gap: 4px 22px;
}

.article-toc-list a {
  position: relative;
  display: block;
  padding:
    8px
    10px
    8px
    17px;
  border-radius: 10px;
  color: #5f6e66; /* было #687970: 4,52 к 1 — впритык к 4,5 */
  text-decoration: none;
  font-size: 13px;
  line-height: 1.45;
  transition:
    color .2s ease,
    background .2s ease;
}

.article-toc-list a::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 15px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #9cb2a7;
}

.article-toc-list a:hover {
  color: #126a4a;
  background:
    rgba(24,132,93,.07);
}

.article-content h2 {
  scroll-margin-top: 105px;
}


/* Share */

.article-share {
  display: flex;
  justify-content:
    space-between;
  align-items: center;
  gap: 20px;
  margin-top: 45px;
  padding: 22px 24px;
  border:
    1px solid
    rgba(20,70,49,.09);
  border-radius: 20px;
  color: #30493c;
  background:
    linear-gradient(
      135deg,
      #f2f8f4,
      #faf8f1
    );
}

.article-share-button {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 17px;
  border:
    1px solid
    rgba(18,72,50,.12);
  border-radius: 999px;
  color: #194833;
  background: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  transition:
    transform .2s ease,
    color .2s ease,
    background .2s ease;
}

.article-share-button:hover {
  transform:
    translateY(-2px);
  color: #fff;
  background: #183f2f;
}

.article-share-button.copied {
  color: #fff;
  background: #18845e;
}


/* Mobile */

@media (max-width: 760px) {

  .article-toc-list {
    grid-template-columns: 1fr;
  }

  .article-share {
    align-items: stretch;
    flex-direction: column;
  }

  .article-share-button {
    width: 100%;
  }

  .blog-topic-chips {
    margin-top: 23px;
  }

  .blog-topic-chips span {
    min-height: 31px;
    padding: 0 11px;
    font-size: 10px;
  }
}


/* =========================================================
   LANGLIFY REAL BLOG COVERS V5
   ========================================================= */

/* Карточка 1. Обложки — WebP по размеру показа (10.10): карточка до
   682 CSS px, поэтому 720 px на обычном экране и 1344 — на плотном.
   Первая строка — для браузера без image-set(). */

.blog-card:nth-child(1)::before {
  background:
    linear-gradient(
      rgba(10,35,24,.02),
      rgba(10,35,24,.05)
    ),
    url("/blog/assets/speaking-confidence-v2.webp")
    center / cover
    no-repeat !important;
  background:
    linear-gradient(
      rgba(10,35,24,.02),
      rgba(10,35,24,.05)
    ),
    image-set(
      url("/blog/assets/speaking-confidence-v2-720.webp") 1x,
      url("/blog/assets/speaking-confidence-v2.webp") 2x
    )
    center / cover
    no-repeat !important;
}


/* Карточка 2 */

.blog-card:nth-child(2)::before {
  background:
    linear-gradient(
      rgba(10,35,24,.02),
      rgba(10,35,24,.05)
    ),
    url("/blog/assets/ielts-speaking.webp")
    center / cover
    no-repeat !important;
  background:
    linear-gradient(
      rgba(10,35,24,.02),
      rgba(10,35,24,.05)
    ),
    image-set(
      url("/blog/assets/ielts-speaking-720.webp") 1x,
      url("/blog/assets/ielts-speaking.webp") 2x
    )
    center / cover
    no-repeat !important;
}


/* Убираем старые Aa и 9.0 */

.blog-card::after {
  display: none !important;
}


/* Обложка внутри статьи */

.article-cover {
  position: relative;
  overflow: hidden;

  margin:
    28px
    0
    28px;

  border-radius: 30px;

  border:
    1px solid
    rgba(20,70,49,.09);

  background: #e8eee9;

  box-shadow:
    0 24px 65px
    rgba(25,60,44,.11);
}


.article-cover img {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio: 16 / 9;

  object-fit: cover;
  object-position: center;
}


/* Карточки */

.blog-card::before {
  height: 250px !important;

  transition:
    transform .5s
    cubic-bezier(.2,.8,.2,1),
    filter .4s ease;
}


.blog-card:hover::before {
  transform: scale(1.025);

  filter:
    saturate(1.04)
    contrast(1.02);
}


@media (max-width: 760px) {

  .blog-card::before {
    height: 205px !important;
  }

  .article-cover {
    border-radius: 23px;
  }
}


@media (max-width: 480px) {

  .blog-card::before {
    height: 185px !important;
  }

  .article-cover {
    border-radius: 19px;
  }
}


/* =========================================================
   ПЕРЕНОС В РЕПОЗИТОРИЙ (10.10): переключатель темы, фокус,
   покой при reduce, тёмная тема
   ========================================================= */

/* Переключатель темы — тот же, что на главной (луна в светлой,
   солнце в тёмной), в форме кнопок блога. Ключ общий: langlifyTheme. */

.blog-theme {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #183c2c;
  border: 1px solid rgba(22, 69, 49, .12);
  background: rgba(255,255,255,.7);
  transition:
    transform .2s ease,
    background .2s ease;
}

.blog-theme:hover {
  transform: translateY(-2px);
}

.theme-icon {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-moon {
  display: block;
}

.theme-sun {
  display: none;
}

html[data-theme="dark"] .theme-moon {
  display: none;
}

html[data-theme="dark"] .theme-sun {
  display: block;
}

/* Видимый фокус с клавиатуры: у партнёра его не было. */

.blog-page a:focus-visible,
.blog-page button:focus-visible {
  outline: 2px solid #127650;
  outline-offset: 3px;
}

/* Покой: без полосы чтения, подъёмов при наведении и плавной
   прокрутки. Ничего не движется и не мигает. */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto !important;
  }

  .blog-page *,
  .blog-page *::before,
  .blog-page *::after {
    transition: none !important;
    animation: none !important;
  }

  .reading-progress {
    display: none !important;
  }

  .blog-nav a:hover,
  .blog-lang:hover,
  .blog-login:hover,
  .blog-register:hover,
  .blog-theme:hover,
  .blog-card:hover,
  .blog-card:hover::before,
  .blog-card-link:hover,
  .article-back:hover,
  .article-cta a:hover,
  .article-share-button:hover {
    transform: none !important;
  }
}


/* ---------------------------------------------------------
   ТЁМНАЯ ТЕМА — палитра тёмной главной (фон #080b10, карточки
   #121519, линии #262b34, текст #f4f5f6 / #b3bbc8) с зелёным
   акцентом блога. Контраст текста ≥ 4,5:1 — замер в
   frontend/tests/browser/landing-blog.spec.js.
   --------------------------------------------------------- */

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="dark"] body.blog-page {
  color: #d3d9df;
  background:
    radial-gradient(
      circle at 5% 5%,
      rgba(55, 177, 125, .10),
      transparent 26rem
    ),
    radial-gradient(
      circle at 93% 15%,
      rgba(223, 177, 99, .06),
      transparent 25rem
    ),
    linear-gradient(
      180deg,
      #0a0e12 0%,
      #080b10 48%,
      #0a0d11 100%
    );
}

html[data-theme="dark"] body.blog-page::before {
  background-image:
    radial-gradient(
      rgba(255, 255, 255, .035) .8px,
      transparent .8px
    );
}

html[data-theme="dark"] .blog-topbar {
  background: rgba(8, 11, 16, .78);
  border-bottom-color: rgba(255, 255, 255, .06);
}

html[data-theme="dark"] .blog-brand {
  color: #ffffff;
}

html[data-theme="dark"] .blog-nav {
  border-color: rgba(255, 255, 255, .08);
  background: rgba(18, 21, 25, .72);
}

html[data-theme="dark"] .blog-nav a {
  color: #b3bbc8;
}

html[data-theme="dark"] .blog-nav a:hover {
  color: #f4f5f6;
  background: rgba(79, 208, 154, .12);
}

html[data-theme="dark"] .blog-lang,
html[data-theme="dark"] .blog-login,
html[data-theme="dark"] .blog-theme {
  color: #f4f5f6;
  border-color: #2b313b;
  background: rgba(18, 21, 25, .88);
}

html[data-theme="dark"] .blog-register {
  border-color: #2a7a58;
  background:
    linear-gradient(
      135deg,
      #1f6b4c,
      #17543b
    );
  box-shadow:
    0 9px 22px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] .blog-hero {
  border-color: rgba(79, 208, 154, .12);
  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(255, 255, 255, .05),
      transparent 18rem
    ),
    linear-gradient(
      135deg,
      #0f1d17 0%,
      #12161b 58%,
      #1c1810 100%
    );
  box-shadow:
    0 32px 85px rgba(0, 0, 0, .36);
}

html[data-theme="dark"] .blog-hero::before {
  border-color: rgba(79, 208, 154, .07);
}

html[data-theme="dark"] .blog-hero::after {
  background: rgba(216, 164, 87, .08);
}

html[data-theme="dark"] .blog-kicker {
  color: #6fd9ac;
  border-color: rgba(79, 208, 154, .18);
  background: rgba(18, 21, 25, .8);
  box-shadow: none;
}

html[data-theme="dark"] .blog-hero h1,
html[data-theme="dark"] .blog-section-head h2,
html[data-theme="dark"] .blog-card h2 {
  color: #f4f5f6;
}

html[data-theme="dark"] .blog-hero p,
html[data-theme="dark"] .blog-section-head p,
html[data-theme="dark"] .blog-card p {
  color: #b3bbc8;
}

html[data-theme="dark"] .blog-section-small,
html[data-theme="dark"] .blog-card-link,
html[data-theme="dark"] .article-back {
  color: #6fd9ac;
}

html[data-theme="dark"] .blog-card-link:hover {
  color: #96e8c4;
}

html[data-theme="dark"] .blog-topic-chips span {
  color: #c5ccd6;
  border-color: rgba(255, 255, 255, .10);
  background: rgba(18, 21, 25, .62);
}

html[data-theme="dark"] .blog-card {
  border-color: #262b34;
  background: #121519;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, .36);
}

html[data-theme="dark"] .blog-card:hover {
  border-color: rgba(79, 208, 154, .28);
  box-shadow:
    0 38px 85px rgba(0, 0, 0, .45);
}

html[data-theme="dark"] .blog-card::before {
  border-bottom-color: #262b34;
}

html[data-theme="dark"] .blog-card-tag,
html[data-theme="dark"] .article-meta {
  color: #6fd9ac;
  background: rgba(79, 208, 154, .12);
}

html[data-theme="dark"] .blog-card-meta {
  color: #a3acb8;
}

html[data-theme="dark"] .featured-badge {
  color: #f4f5f6;
  border-color: rgba(255, 255, 255, .14);
  background: rgba(18, 21, 25, .86);
}

html[data-theme="dark"] .article-breadcrumbs {
  color: #a3acb8;
}

html[data-theme="dark"] .article-breadcrumbs a {
  color: #c5ccd6;
}

html[data-theme="dark"] .article-breadcrumbs a:hover,
html[data-theme="dark"] .blog-footer a:hover {
  color: #6fd9ac;
}

html[data-theme="dark"] .article-cover {
  border-color: #262b34;
  background: #171b20;
  box-shadow:
    0 24px 65px rgba(0, 0, 0, .40);
}

html[data-theme="dark"] .article-wrap > h1,
html[data-theme="dark"] .article-lead {
  border-color: #262b34;
  background:
    linear-gradient(
      135deg,
      #10201a,
      #1a1812
    );
}

html[data-theme="dark"] .article-wrap > h1 {
  color: #f4f5f6;
  box-shadow: none;
}

html[data-theme="dark"] .article-lead {
  color: #c5ccd6;
  box-shadow:
    0 27px 65px rgba(0, 0, 0, .30);
}

html[data-theme="dark"] .article-toc {
  border-color: #262b34;
  background: #121519;
  box-shadow: none;
}

html[data-theme="dark"] .article-toc-title {
  color: #f4f5f6;
}

html[data-theme="dark"] .article-toc-list a {
  color: #b3bbc8;
}

html[data-theme="dark"] .article-toc-list a::before {
  background: #5b6573;
}

html[data-theme="dark"] .article-toc-list a:hover {
  color: #96e8c4;
  background: rgba(79, 208, 154, .10);
}

html[data-theme="dark"] .article-content {
  border-color: #262b34;
  color: #d3d9df;
  background: #121519;
  box-shadow:
    0 28px 75px rgba(0, 0, 0, .34);
}

html[data-theme="dark"] .article-content > p:first-child {
  color: #e1e5ea;
}

html[data-theme="dark"] .article-content h2 {
  color: #f4f5f6;
}

html[data-theme="dark"] .article-content h3 {
  color: #e8ecef;
}

html[data-theme="dark"] .article-content strong {
  color: #ffffff;
}

html[data-theme="dark"] .article-content em {
  color: #a9dcc4;
}

html[data-theme="dark"] .article-example {
  border-color: rgba(79, 208, 154, .18);
  color: #d5e8de;
  background:
    linear-gradient(
      135deg,
      #142a21,
      #171b20
    );
}

html[data-theme="dark"] .article-example::before {
  color: rgba(79, 208, 154, .14);
}

html[data-theme="dark"] .article-note {
  border-color: rgba(216, 164, 87, .22);
  color: #e6dcc6;
  background:
    linear-gradient(
      135deg,
      #1e1a11,
      #19170f
    );
}

html[data-theme="dark"] .article-cta {
  border: 1px solid rgba(79, 208, 154, .16);
  box-shadow:
    0 24px 55px rgba(0, 0, 0, .40);
}

html[data-theme="dark"] .article-share {
  border-color: #262b34;
  color: #d3d9df;
  background:
    linear-gradient(
      135deg,
      #14201b,
      #18181b
    );
}

html[data-theme="dark"] .article-share-button {
  color: #f4f5f6;
  border-color: #2f3640;
  background: #171b20;
}

html[data-theme="dark"] .article-share-button:hover {
  color: #ffffff;
  background: #1f6b4c;
}

html[data-theme="dark"] .article-share-button.copied {
  color: #ffffff;
  background: #18845e;
}

html[data-theme="dark"] .related {
  border-top-color: #262b34;
  color: #b3bbc8;
}

html[data-theme="dark"] .related > strong {
  color: #f4f5f6;
}

html[data-theme="dark"] .related a {
  color: #6fd9ac;
}

html[data-theme="dark"] .blog-footer {
  border-top-color: #262b34;
  background: rgba(8, 11, 16, .6);
}

html[data-theme="dark"] .blog-footer-inner {
  color: #a3acb8;
}

html[data-theme="dark"] .blog-footer a {
  color: #c5ccd6;
}

html[data-theme="dark"] .blog-page ::selection {
  color: #f4f5f6;
  background: #1f5a42;
}

html[data-theme="dark"] .blog-page a:focus-visible,
html[data-theme="dark"] .blog-page button:focus-visible {
  outline-color: #6fd9ac;
}

/* =========================================================
   12.10 · Меню блога на узком экране. До 980 px пункты меню
   прятались без замены. Теперь (до 1023 px, где строка уже тесна) они — в панели под кнопкой
   «Меню» (/menu.js), туда же «Поддержка» и вход, когда кнопки
   входа уходят из шапки. Язык остаётся в шапке, кнопка ≥ 44 px.
   Движение панели гасит общее правило reduce выше.
   ========================================================= */

.blog-menu-btn,
.blog-nav-extra,
.blog-nav-theme,
.theme-label-light,
html[data-theme="dark"] .theme-label-dark {
  display: none;
}

html[data-theme="dark"] .theme-label-light {
  display: inline;
}

.blog-lang-globe {
  margin-right: .3em;
}

.blog-lang,
.blog-login,
.blog-register {
  white-space: nowrap;
}

.blog-menu-btn {
  min-height: 44px;
  padding: 0 14px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  color: #183c2c;
  border: 1px solid rgba(22, 69, 49, .12);
  background: rgba(255,255,255,.7);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.blog-menu-btn .menu-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.blog-menu-btn .menu-icon-close,
.blog-menu-btn[aria-expanded="true"] .menu-icon-open {
  display: none;
}

.blog-menu-btn[aria-expanded="true"] .menu-icon-close {
  display: inline;
}

@keyframes ll-menu-drop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 1023px) {

  .blog-topbar-inner {
    position: relative;
  }

  .blog-menu-btn {
    display: inline-flex;
  }

  .blog-nav {
    display: none;
    position: absolute;
    top: calc(100% + 18px);
    right: 0;
    z-index: 1;
    width: min(360px, 100%);
    max-height: calc(100vh - 110px);
    max-height: calc(100dvh - 110px);
    overflow-y: auto;
    overscroll-behavior: contain;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px;
    border: 1px solid rgba(22, 69, 49, .12);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(18, 61, 44, .14);
  }

  .blog-topbar.menu-open .blog-nav {
    display: flex;
    animation: ll-menu-drop .16s ease-out;
  }

  .blog-nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 14px;
    color: #183c2c;
    font-size: 15px;
  }

  .blog-nav-extra {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .blog-nav-extra > a:first-child {
    flex: 1 0 100%;
  }

  .blog-nav-extra .blog-menu-register {
    display: none;
    flex: 1 1 auto;
    justify-content: center;
    font-weight: 800;
    white-space: nowrap;
  }

  .blog-nav-extra .blog-menu-register,
  .blog-nav-extra .blog-menu-register:hover {
    color: #fff;
    border: 1px solid #153c2d;
    background: linear-gradient(135deg, #194d38, #123426);
  }
}

@media (max-width: 760px) {

  .blog-nav {
    top: calc(100% + 12px);
  }

  /* «Войти» остаётся в шапке и на телефоне (12.10): у партнёра она
     пряталась с 760 px. */
  .blog-login {
    display: inline-flex;
  }
}

@media (max-width: 700px) {

  .blog-register {
    display: none;
  }

  .blog-nav-extra .blog-menu-register {
    display: flex;
  }
}

@media (max-width: 480px) {

  .blog-brand {
    font-size: 22px;
  }

  .blog-brand::before {
    width: 23px;
    height: 28px;
  }

  .blog-lang {
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
  }

  .blog-lang-globe {
    display: none;
  }

}

@media (max-width: 560px) {

  .blog-login,
  .blog-menu-btn {
    min-height: 44px;
    padding: 0 12px;
  }

  /* Тема на телефоне — строкой в меню, в шапке место для «Войти». */
  .blog-theme {
    display: none;
  }

  .blog-nav .blog-nav-theme {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #183c2c;
    font: inherit;
    font-size: 15px;
    font-weight: 750;
    text-align: left;
    cursor: pointer;
  }

  .blog-nav .blog-nav-theme:hover {
    background: rgba(25, 137, 94, .09);
  }

  html[data-theme="dark"] .blog-nav .blog-nav-theme {
    color: #f4f5f6;
  }

  html[data-theme="dark"] .blog-nav .blog-nav-theme:hover {
    background: rgba(79, 208, 154, .12);
  }
}

/* Узкий телефон: подпись «Меню» — только для читалок, на экране значок. */
@media (max-width: 379px) {

  .blog-topbar-inner {
    gap: 8px;
  }

  .blog-actions {
    gap: 4px;
  }

  .blog-brand {
    font-size: 20px;
  }

  .blog-brand::before {
    width: 21px;
    height: 26px;
  }

  .blog-menu-btn {
    width: 44px;
    padding: 0;
  }

  .blog-menu-btn span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

html[data-theme="dark"] .blog-menu-btn {
  color: #f4f5f6;
  border-color: #2b313b;
  background: rgba(18, 21, 25, .88);
}

@media (max-width: 1023px) {

  html[data-theme="dark"] .blog-nav {
    border-color: #2b313b;
    background: #121519;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .4);
  }

  html[data-theme="dark"] .blog-nav a {
    color: #f4f5f6;
  }

  html[data-theme="dark"] .blog-nav-extra .blog-menu-register,
  html[data-theme="dark"] .blog-nav-extra .blog-menu-register:hover {
    border-color: #2a7a58;
    background: linear-gradient(135deg, #1f6b4c, #17543b);
  }
}