@font-face{font-family:"Golos Text";src:url("/blog/fonts/golos-400.db35cfded6.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0020-007E, U+00A0-00FF, U+0400-045F, U+2010-2015, U+2018-201E, U+2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2116, U+2122, U+2190-2193, U+2212}
@font-face{font-family:"Golos Text";src:url("/blog/fonts/golos-500.e8bf79cd7e.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0020-007E, U+00A0-00FF, U+0400-045F, U+2010-2015, U+2018-201E, U+2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2116, U+2122, U+2190-2193, U+2212}
@font-face{font-family:"Golos Text";src:url("/blog/fonts/golos-600.c4f7ccae40.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0020-007E, U+00A0-00FF, U+0400-045F, U+2010-2015, U+2018-201E, U+2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2116, U+2122, U+2190-2193, U+2212}
@font-face{font-family:"Playfair Display";src:url("/blog/fonts/playfair-400.5b4b899a5b.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0020-007E, U+00A0-00FF, U+0400-045F, U+2010-2015, U+2018-201E, U+2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2116, U+2122, U+2190-2193, U+2212}
@font-face{font-family:"Playfair Display";src:url("/blog/fonts/playfair-500.e0d3ae68bd.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0020-007E, U+00A0-00FF, U+0400-045F, U+2010-2015, U+2018-201E, U+2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2116, U+2122, U+2190-2193, U+2212}
@font-face{font-family:"Playfair Display";src:url("/blog/fonts/playfair-italic-400.634bd6aa2a.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0020-007E, U+00A0-00FF, U+0400-045F, U+2010-2015, U+2018-201E, U+2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2116, U+2122, U+2190-2193, U+2212}
@font-face{font-family:"JetBrains Mono";src:url("/blog/fonts/jetbrains-mono-400.d7947fa1a9.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0020-007E, U+00A0-00FF, U+0400-045F, U+2010-2015, U+2018-201E, U+2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2116, U+2122, U+2190-2193, U+2212}
@font-face{font-family:"Philosopher";src:url("/blog/fonts/philosopher-italic-brand.d1ce462474.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0020, U+041F, U+0417, U+041E, U+0412, U+0401, U+041C, U+043F, U+043E, U+0437, U+0432, U+0451, U+043C}

      .blog {
        --l-ink: #14110F; --l-paper: #FFFFFF; --l-warm: #F5F2EE; --l-warm-2: #FBF9F7;
        --l-coral: #E8503A; --l-coral-deep: #C4402B; --l-green: #1F7A4C; --l-green-light: #4FBF87;
        --l-line: #EAE6E1; --l-line-2: #EFEBE6; --l-line-3: #DED8D1; --l-line-dark: #3A342F; --l-line-footer: #2A251F;
        --l-text: #4A443E; --l-text-2: #3A342F; --l-muted: #6E655D; --l-on-dark: #CFC8C1; --l-on-dark-2: #B8AFA6; --l-on-dark-3: #9A9188;
        --l-f-display: "Pozovem Ruble", "Playfair Display", Georgia, serif;
        --l-f-brand: "Philosopher", "Playfair Display", Georgia, serif;
        --l-f-body: "Golos Text", "Inter", system-ui, sans-serif;
        --l-f-mono: "JetBrains Mono", ui-monospace, monospace;
        --l-pad: clamp(16px, 4vw, 48px); --l-container: 1280px;
        --l-h2: clamp(28px, 3.4vw, 48px);
      }
      .blog ::selection { background: var(--l-coral); color: #fff; }
      .blog .wrap { max-width: var(--l-container); margin: 0 auto; padding: 0 var(--l-pad); }
  
      .blog .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent; font-family: var(--l-f-body); font-size: 15px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; background: transparent; color: var(--l-ink); text-decoration: none; transition: background .2s, color .2s, border-color .2s, transform .15s; box-sizing: border-box; }
      .blog .btn:focus-visible, .blog button:focus-visible, .blog a:focus-visible { outline: 2px solid var(--l-coral); outline-offset: 3px; }
      .blog .btn-primary, .blog .btn-telegram { background: var(--l-ink); color: #fff; border-color: var(--l-ink); }
      .blog .btn-secondary { border-color: var(--l-line-3); color: var(--l-ink); background: transparent; }
      .blog .btn-accent { background: var(--l-coral); color: #fff; border-color: var(--l-coral); }
      .blog .btn-outline { background: transparent; color: var(--l-ink); border: 1.5px solid var(--l-ink); }
      .blog .btn-lg { height: 48px; padding: 0 28px; font-size: 16px; }
      .blog .btn-ghost { color: var(--l-text-2); padding: 0 6px; }
      .blog .btn-sm { height: 36px; padding: 0 14px; font-size: 13px; }
      .blog .btn-arrow { display: none; }
      @media (hover: hover) {
        .blog .btn-primary:hover, .blog .btn-telegram:hover { background: var(--l-coral); border-color: var(--l-coral); color: #fff; }
        .blog .btn-secondary:hover { border-color: var(--l-ink); }
        .blog .btn-accent:hover { background: var(--l-coral-deep); border-color: var(--l-coral-deep); }
        .blog .btn-outline:hover { background: var(--l-ink); color: #fff; }
        .blog .btn-ghost:hover { color: var(--l-coral); }
      }
  
      .blog .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(255,255,255,0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--l-line-2); }
      .blog .nav-inner { max-width: var(--l-container); margin: 0 auto; padding: 10px var(--l-pad); display: flex; align-items: center; gap: 24px; min-height: 64px; box-sizing: border-box; }
      @media (min-width: 900px) { .blog .nav-inner { padding: 14px var(--l-pad); min-height: 73px; } }
      .blog .brand { font-family: var(--l-f-brand); font-style: italic; font-weight: 400; font-size: 23px; letter-spacing: 0; color: var(--l-ink); display: inline-flex; align-items: baseline; gap: 5px; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; line-height: 1; }
      .blog .brand .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--l-green); display: inline-block; margin: 0; }
      @media (min-width: 900px) { .blog .brand { font-size: 26px; gap: 6px; } .blog .brand .dot { width: 7px; height: 7px; } }
      .blog .nav-links { display: none; gap: clamp(10px, 1.6vw, 26px); align-items: center; margin-left: auto; white-space: nowrap; }
      .blog .nav-links button, .blog .nav-links a { background: none; border: 0; color: var(--l-text-2); font-family: var(--l-f-body); font-size: 14px; padding: 0; cursor: pointer; transition: color .15s; text-decoration: none; }
      .blog .nav-links button:hover, .blog .nav-links a:hover { color: var(--l-coral); }
      .blog .nav-links button.is-active, .blog .nav-links a.is-active { color: var(--l-ink); border-bottom: 1px solid var(--l-coral); padding-bottom: 2px; }
      .blog .nav-cta { display: flex; gap: 10px; align-items: center; margin-left: auto; }
      @media (min-width: 900px) { .blog .nav-links { display: flex; } .blog .nav-cta { margin-left: 0; } }
      .blog .nav-cta .btn { height: 44px; padding: 0 20px; border-radius: 999px; font-family: var(--l-f-body); font-size: 15px; font-weight: 500; box-shadow: none; transform: none; }
      .blog .nav-cta .btn-primary { background: var(--l-ink); color: #fff; border-color: var(--l-ink); }
      .blog .nav-cta .btn-ghost { background: none; border-color: transparent; color: var(--l-text-2); padding: 0 6px; }
      @media (hover: hover) { .blog .nav-cta .btn-primary:hover { background: var(--l-coral); border-color: var(--l-coral); } .blog .nav-cta .btn-ghost:hover { color: var(--l-coral); } }
      .blog .nav-cta-label-short { display: none; }
      @media (max-width: 899.98px) {
        .blog .nav-cta .btn { height: 36px; padding: 0 14px; font-size: 13px; }
        .blog .nav-cta.has-menu .btn-ghost { display: none; }
        .blog .has-short .nav-cta-label { display: none; }
        .blog .has-short .nav-cta-label-short { display: inline; }
      }
      .blog .nav-burger { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--l-line); background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; padding: 0; }
      .blog .nav-burger span { display: block; width: 16px; height: 1.5px; background: var(--l-ink); border-radius: 1px; }
      @media (min-width: 900px) { .blog .nav-burger { display: none; } }

      .blog .nav-drawer { position: fixed; inset: 0; z-index: 60; visibility: hidden; }
      .blog .nav-drawer.is-open { visibility: visible; }
      .blog .nav-drawer-scrim { position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(20,17,15,0.3); border: 0; padding: 0; opacity: 0; transition: opacity .25s ease; cursor: pointer; }
      .blog .nav-drawer.is-open .nav-drawer-scrim { opacity: 1; }
      .blog .nav-drawer-panel { position: absolute; inset: 0; background: #fff; display: flex; flex-direction: column; padding: 0 16px 24px; transform: translateY(-8px); opacity: 0; transition: transform .28s ease, opacity .22s ease; overflow-y: auto; box-sizing: border-box; }
      .blog .nav-drawer.is-open .nav-drawer-panel { transform: none; opacity: 1; }
      .blog .nav-drawer-head { display: flex; align-items: center; justify-content: space-between; min-height: 64px; margin: 0 -16px 20px; padding: 10px 16px; border-bottom: 1px solid var(--l-line-2); }
      .blog .nav-drawer-close { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--l-ink); color: #fff; font-size: 17px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
      .blog .nav-drawer-links { display: flex; flex-direction: column; }
      .blog .nav-drawer-links button, .blog .nav-drawer-links a { text-decoration: none; background: none; border: 0; border-bottom: 1px solid var(--l-line-2); text-align: left; font-family: var(--l-f-display); font-size: 28px; font-weight: 400; color: var(--l-ink); padding: 14px 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
      .blog .nav-drawer-links > :last-child { border-bottom: 0; }
      .blog .nav-drawer-links .is-active .nav-drawer-idx { color: var(--l-coral-deep); }
      .blog .nav-drawer-idx { font-family: var(--l-f-mono); font-size: 11px; color: var(--l-muted); }
      .blog .nav-drawer-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
      .blog .nav-drawer-cta .btn { width: 100%; height: 44px; border-radius: 999px; font-size: 15px; }
      .blog .nav-drawer-cta .btn-primary { background: var(--l-ink); color: #fff; border-color: var(--l-ink); }
      .blog .nav-drawer-cta .btn-secondary { background: transparent; color: var(--l-ink); border: 1px solid var(--l-line-3); }
      .blog .nav-drawer-channels { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--l-line-2); display: flex; flex-direction: column; gap: 10px; }
      .blog .nav-drawer-channels span { font-family: var(--l-f-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--l-muted); }
      .blog .nav-drawer-channels div { display: flex; gap: 8px; flex-wrap: wrap; }
      .blog .nav-drawer-channels a { border: 1px solid var(--l-line); font-family: var(--l-f-body); font-size: 14px; height: 40px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; color: var(--l-ink); text-decoration: none; }
      @media (min-width: 900px) { .blog .nav-drawer, .blog .nav-drawer.is-open { display: none; } }
      @media (prefers-reduced-motion: reduce) { .blog .nav-drawer-panel, .blog .nav-drawer-scrim { transition: none; } }
  
      .blog .footer { background: var(--l-ink); color: var(--l-on-dark); padding: 30px 0 22px; margin: 0; border: 0; }
      @media (min-width: 900px) { .blog .footer { padding: clamp(48px, 6vw, 80px) 0 32px; } }
      .blog .footer-card { display: flex; flex-direction: column; gap: 26px; }
      @media (min-width: 900px) { .blog .footer-card { gap: 48px; } }
      .blog .footer-inner { display: flex; gap: 24px; flex-wrap: wrap; padding: 0; border: 0; }
      @media (min-width: 900px) { .blog .footer-inner { gap: clamp(28px, 5vw, 72px); } }
      .blog .footer-col { display: flex; flex-direction: column; gap: 9px; min-width: 130px; }
      .blog .footer-col:first-child { flex: 1 1 100%; gap: 8px; }
      @media (min-width: 900px) { .blog .footer-col { flex: 0 1 180px; gap: 12px; } .blog .footer-col:first-child { flex: 1 1 280px; gap: 12px; } }
      .blog .footer-brand { font-family: var(--l-f-brand); font-style: italic; font-weight: 400; font-size: 26px; color: var(--l-warm-2); display: inline-flex; align-items: baseline; gap: 5px; line-height: 1; margin: 0; }
      @media (min-width: 900px) { .blog .footer-brand { font-size: 28px; gap: 6px; } }
      .blog .footer-brand .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--l-green-light); display: inline-block; }
      .blog .footer-tag { font-family: var(--l-f-display); font-style: italic; font-size: 16px; color: var(--l-on-dark-2); max-width: none; line-height: 1.3; }
      @media (min-width: 900px) { .blog .footer-tag { font-size: 18px; } }
      .blog .footer h5 { font-family: var(--l-f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--l-on-dark-3); font-weight: 400; margin: 0 0 2px; }
      @media (min-width: 900px) { .blog .footer h5 { font-size: 11px; } }
      .blog .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
      @media (min-width: 900px) { .blog .footer-col ul { gap: 12px; } }
      .blog .footer-col a, .blog .footer-col button { color: var(--l-on-dark); font-family: var(--l-f-body); font-size: 14px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; text-decoration: none; transition: color .15s; }
      @media (min-width: 900px) { .blog .footer-col a, .blog .footer-col button { font-size: 15px; } }
      .blog .footer-col a:hover, .blog .footer-col button:hover { color: #fff; }
      .blog .footer-soon { font-family: var(--l-f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--l-on-dark-3); }
      .blog .footer-bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--l-line-footer); padding-top: 16px; margin: 0; font-family: var(--l-f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--l-on-dark-3); }
      @media (min-width: 900px) { .blog .footer-bottom { padding-top: 22px; font-size: 11px; } }
      .blog .footer-col.footer-contacts { flex: 1 1 100%; }
      .blog .footer-col.footer-contacts li, .blog .footer-col.footer-contacts a { font-family: var(--l-f-body); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
      .blog .footer-col.footer-contacts li { color: var(--l-on-dark-2); }
      @media (min-width: 900px) { .blog .footer-col.footer-contacts ul { display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto); justify-content: start; column-gap: clamp(28px, 5vw, 72px); } }
      .blog .footer-pay { display: inline-flex; align-items: center; gap: 18px; flex-wrap: wrap; }
      .blog .footer-pay-logo { display: inline-flex; align-items: center; }
      .blog .footer-pay-logo img { display: block; height: 20px; width: auto; filter: brightness(0) invert(1); opacity: .55; }
  

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body.blog{margin:0;background:var(--l-paper);color:var(--l-ink);font:400 17px/1.65 var(--l-f-body);-webkit-font-smoothing:antialiased;padding-top:64px;overflow-x:hidden}
@media (min-width:900px){body.blog{padding-top:73px}}
.blog *,.blog *::before,.blog *::after{box-sizing:border-box}
.blog img{max-width:100%}
.blog a.brand,.blog .nav-cta a.btn,.blog .nav-drawer-cta a.btn{text-decoration:none}
.blog main.wrap{display:block;padding-bottom:72px}

.blog .crumbs{font-size:13px;color:var(--l-muted);margin:22px 0 0;line-height:1.5}
.blog .crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 6px}
.blog .crumbs li+li::before{content:"/";margin-right:6px}
.blog .crumbs a{color:var(--l-muted);text-decoration:none}
.blog .crumbs a:hover{color:var(--l-coral-deep)}

.blog .head{max-width:760px;margin:28px auto 0}
.blog .kicker{font:600 12px/1.4 var(--l-f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--l-coral-deep)}
.blog h1{font:500 clamp(32px,5.4vw,56px)/1.06 "Playfair Display",Georgia,serif;letter-spacing:-.01em;margin:14px 0 18px;overflow-wrap:break-word}
.blog .lead{font-size:19px;color:var(--l-text);margin:0}
.blog .by{font-size:14px;color:var(--l-muted);margin-top:18px}

.blog .cover{max-width:1040px;margin:34px auto 0;border-radius:22px;overflow:hidden;aspect-ratio:16/10;background:var(--l-warm)}
@media (min-width:760px){.blog .cover{aspect-ratio:2/1}}
.blog .cover img{width:100%;height:100%;object-fit:cover;display:block}

.blog .grid{display:grid;grid-template-columns:minmax(0,720px);gap:32px;justify-content:center;margin:40px auto 0}
@media (min-width:1001px){.blog .grid{grid-template-columns:240px minmax(0,720px);gap:56px;margin-top:48px}}
.blog .toc{align-self:start;font-size:14px;line-height:1.45;background:var(--l-warm-2);border:1px solid var(--l-line);border-radius:16px;padding:16px 18px}
@media (min-width:1001px){.blog .toc{position:sticky;top:97px;max-height:calc(100vh - 120px);overflow:auto}.blog .toc summary{pointer-events:none}.blog .toc summary::after{display:none}}
.blog .toc summary{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--l-muted);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.blog .toc summary::-webkit-details-marker{display:none}
.blog .toc summary::after{content:"+";font-size:18px;line-height:1;color:var(--l-muted)}
.blog .toc[open] summary::after{content:"–"}
.blog .toc ol{margin:10px 0 0;padding-left:20px}
.blog .toc li{margin:0 0 8px}
.blog .toc a{color:var(--l-ink);text-decoration:none}
.blog .toc a:hover{color:var(--l-coral-deep)}

.blog article{min-width:0}
.blog article h2{font:500 clamp(26px,3.4vw,32px)/1.15 "Playfair Display",Georgia,serif;margin:52px 0 16px;scroll-margin-top:84px}
@media (min-width:900px){.blog article h2{scroll-margin-top:97px}}
.blog article h2:first-child{margin-top:0}
.blog article h3{font:600 19px/1.35 var(--l-f-body);margin:28px 0 10px}
.blog article p{margin:0 0 16px;color:var(--l-text)}
.blog article strong{color:var(--l-ink);font-weight:600}
.blog article a{color:var(--l-coral-deep);text-underline-offset:2px}
.blog article ol,.blog article ul{padding-left:22px;color:var(--l-text);margin:0 0 18px}
.blog article li{margin-bottom:10px}
.blog .tip{background:var(--l-warm);border-left:3px solid var(--l-coral);border-radius:0 14px 14px 0;padding:16px 20px;margin:22px 0;color:var(--l-text)}
.blog .cta{background:var(--l-ink);color:#fff;border-radius:20px;padding:24px;margin:30px 0;display:flex;gap:18px 20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
@media (min-width:600px){.blog .cta{padding:26px 28px}}
.blog .cta p{color:#fff;margin:0;font:italic 400 21px/1.3 "Playfair Display",Georgia,serif;max-width:430px}
.blog .cta .btn,.blog .final .btn{background:#fff;color:var(--l-ink);border-color:#fff;text-decoration:none;font-weight:600}
@media (hover:hover){.blog .cta .btn:hover,.blog .final .btn:hover{background:var(--l-coral);border-color:var(--l-coral);color:#fff}}

.blog .sample{position:relative;display:flex;gap:14px;border:1px solid var(--l-line);border-radius:16px;padding:16px 14px 16px 16px;margin:0 0 12px;background:#fff}
@media (min-width:600px){.blog .sample{gap:16px;padding:18px 16px 18px 20px}}
.blog .sample .num{flex:0 0 32px;height:32px;border-radius:50%;background:var(--l-warm);font:500 15px/1 "Playfair Display",Georgia,serif;display:flex;align-items:center;justify-content:center;margin-top:2px}
.blog .sample .txt{flex:1;min-width:0}
.blog .sample .txt p{margin:0;color:var(--l-ink)}
.blog .sample .lab{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--l-coral-deep);font-weight:600;margin-bottom:4px}
.blog .copy{position:relative;flex:0 0 36px;width:36px;height:36px;border:0;background:transparent;color:var(--l-muted);border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
@media (hover:hover){.blog .copy:hover{background:var(--l-warm);color:var(--l-ink)}}
.blog .copy.is-copied{color:var(--l-green)}
.blog .copy.is-copied::after{content:"Скопировано";position:absolute;right:0;top:-30px;background:var(--l-ink);color:#fff;font:500 12px/1 var(--l-f-body);padding:7px 10px;border-radius:8px;white-space:nowrap;pointer-events:none}
.blog .ph{background:#FDEDE9;color:var(--l-coral-deep);border-radius:5px;padding:0 4px;font-size:.92em}
.blog .faq{border-bottom:1px solid var(--l-line)}
.blog .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:16px 0;color:var(--l-ink);font-weight:500;line-height:1.4}
.blog .faq summary::-webkit-details-marker{display:none}
.blog .faq[open] summary{font-weight:600}
.blog .faq-plus{flex:0 0 auto;width:20px;height:20px;position:relative;margin-top:1px}
.blog .faq-plus::before,.blog .faq-plus::after{content:"";position:absolute;left:50%;top:50%;background:var(--l-muted);transition:transform .25s,opacity .2s,background .2s}
.blog .faq-plus::before{width:12px;height:1.5px;transform:translate(-50%,-50%)}
.blog .faq-plus::after{width:1.5px;height:12px;transform:translate(-50%,-50%)}
.blog .faq[open]:not(.is-closing) .faq-plus::before{background:var(--l-coral)}
.blog .faq[open]:not(.is-closing) .faq-plus::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.blog .faq-panel{overflow:hidden}
.blog .faq-inner>:first-child{margin-top:0}
.blog .faq-inner>:last-child{margin-bottom:16px}
.blog .faq p{margin:0 0 10px}
.blog .faq ul{margin:0 0 10px;padding-left:20px}
.blog .faq li{margin:4px 0}
@media (prefers-reduced-motion:reduce){.blog .faq-plus::before,.blog .faq-plus::after{transition:none}}

.blog .fig{margin:28px 0}
.blog .fig picture{display:block}
.blog .fig img{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:14px;border:1px solid var(--l-line);background:var(--l-warm)}
.blog .fig figcaption{margin:10px auto 0;max-width:600px;font-size:14px;line-height:1.45;color:var(--l-muted);text-align:center}

.blog .palettes{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:22px 0}
@media (min-width:600px){.blog .palettes{grid-template-columns:repeat(2,minmax(0,1fr))}.blog .palettes.is-single{grid-template-columns:minmax(0,1fr)}}
.blog .palette{border:1px solid var(--l-line);border-radius:16px;padding:16px 18px 14px;background:#fff}
.blog .palette-name{font-weight:600;color:var(--l-ink);font-size:16px;line-height:1.35;margin-bottom:12px}
.blog .palette .swatches{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 8px}
.blog .palette .swatches li{display:flex;flex-direction:column;align-items:center;gap:6px;width:52px;margin:0}
.blog .palette .sw{display:block;width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(20,17,15,.1)}
.blog .palette code{font:400 11px/1 var(--l-f-mono);color:var(--l-muted);letter-spacing:.01em}

.blog .table-wrap{margin:22px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--l-line);border-radius:14px;background:#fff}
.blog .table-wrap:focus-visible{outline:2px solid var(--l-coral);outline-offset:2px}
.blog .table-wrap table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.blog .table-wrap th,.blog .table-wrap td{padding:10px 14px;min-width:132px;text-align:left;vertical-align:top;border-bottom:1px solid var(--l-line);color:var(--l-text)}
.blog .table-wrap th+th,.blog .table-wrap td+td{border-left:1px solid var(--l-line)}
.blog .table-wrap th{font-weight:600;color:var(--l-ink);background:var(--l-warm-2)}
.blog .table-wrap tbody tr:last-child td{border-bottom:0}

.blog .related{max-width:1040px;margin:64px auto 0}
.blog .related h2,.blog .final h2{font:500 clamp(26px,3.2vw,30px)/1.15 "Playfair Display",Georgia,serif;margin:0 0 18px}
.blog .rels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (min-width:760px){.blog .rels{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
.blog .rel{text-decoration:none;color:var(--l-ink);display:block}
.blog .rel img{width:100%;aspect-ratio:3/5;object-fit:cover;object-position:top;border-radius:14px;border:1px solid var(--l-line);display:block;background:var(--l-warm)}
.blog .rel b{display:block;font:500 18px/1.2 "Playfair Display",Georgia,serif;margin-top:8px}
.blog .rel small{color:var(--l-muted);font-size:13px}
@media (hover:hover){.blog .rel:hover b{color:var(--l-coral-deep)}}

.blog .final{max-width:1040px;margin:56px auto 0;background:var(--l-ink);color:#fff;border-radius:24px;padding:32px 24px;text-align:center}
@media (min-width:760px){.blog .final{padding:48px}}
.blog .final h2{color:#fff;margin-bottom:10px}
.blog .final p{color:var(--l-on-dark);margin:0 auto 22px;max-width:520px}

.blog .index-head{max-width:760px;margin:28px 0 0}
.blog .posts{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin:36px 0 0}
@media (min-width:760px){.blog .posts{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}}
@media (min-width:1100px){.blog .posts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.blog .post{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--l-ink)}
.blog .post .pic{border-radius:18px;overflow:hidden;aspect-ratio:16/10;background:var(--l-warm)}
.blog .post .pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
@media (hover:hover){.blog .post:hover .pic img{transform:scale(1.03)}.blog .post:hover h2{color:var(--l-coral-deep)}}
.blog .post h2{font:500 24px/1.18 "Playfair Display",Georgia,serif;margin:4px 0 0}
.blog .post p{margin:0;color:var(--l-text);font-size:16px;line-height:1.55}
.blog .post .date{font-size:13px;color:var(--l-muted)}
.blog .empty{margin:36px 0 0;padding:28px;border:1px dashed var(--l-line-3);border-radius:18px;color:var(--l-text);max-width:760px}