/* ================= blog post ================= */
.bp-prog{position:fixed;left:0;top:0;height:3px;width:0;background:var(--acc);z-index:60}
.bp-top{padding-top:128px}
.bp-head{max-width:860px;margin:0 auto;text-align:center}
.bp-crumbs{display:flex;justify-content:center;gap:8px;font-size:14px;color:var(--soft)}
.bp-crumbs a{text-decoration:none;color:var(--ink)}
.bp-cat{display:inline-block;margin-top:22px;font-size:13px;font-weight:700;color:var(--acc)}
.bp-head h1{font-size:clamp(34px,4.6vw,60px);font-weight:600;letter-spacing:-.04em;line-height:1.05;margin-top:10px}
.bp-head .lede{color:var(--soft);font-size:19px;margin:18px auto 0;max-width:640px}
.bp-meta{display:flex;justify-content:center;align-items:center;gap:14px 28px;flex-wrap:wrap;margin-top:28px}
.bp-by{display:flex;align-items:center;gap:12px;text-align:left}
.bp-by .av{width:44px;height:44px;border-radius:50%;background:url(../../img/team-2.jpg) center top/cover;flex:none}
.bp-by b{display:block;font-size:15px}
.bp-by span{font-size:13.5px;color:var(--soft)}
.bp-share{display:flex;gap:8px}
.bp-share button{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--white);border-radius:999px;padding:8px 14px;font:600 13px var(--f);color:var(--ink);cursor:pointer}
.bp-share button:hover{border-color:var(--dark-2)}
.bp-share svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bp-hero{margin-top:clamp(28px,4vw,48px);border-radius:32px;aspect-ratio:21/9;background:var(--img-ship) center 60%/cover no-repeat}

.bp-body{display:grid;grid-template-columns:220px minmax(0,700px) 1fr;gap:clamp(24px,4vw,64px);padding-block:clamp(40px,5vw,72px) var(--sec)}
.bp-toc{position:sticky;top:104px;align-self:start;font-size:14px}
.bp-toc b{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);margin-bottom:10px}
.bp-toc a{display:block;padding:7px 0 7px 14px;border-left:2px solid #e6e4ef;color:var(--soft);text-decoration:none;line-height:1.35;transition:color .2s,border-color .2s}
.bp-toc a:hover{color:var(--ink)}
.bp-toc a.on{color:var(--ink);font-weight:600;border-color:var(--acc)}
.bp-art{font-size:18px;line-height:1.75;color:#2a2b31;min-width:0}
.bp-art>*+*{margin-top:22px}
.bp-art h2{font-size:clamp(24px,2.4vw,30px);line-height:1.2;color:var(--ink);margin-top:48px;scroll-margin-top:100px}
.bp-art h3{font-size:20px;color:var(--ink);margin-top:30px}
.bp-art p.first::first-letter{float:left;font-size:64px;line-height:.9;font-weight:700;padding:6px 10px 0 0;color:var(--ink)}
.bp-art ul{padding:0;list-style:none}
.bp-art li{position:relative;padding-left:22px;margin-top:10px}
.bp-art li::before{content:"";position:absolute;left:2px;top:12px;width:7px;height:7px;border-radius:2px;background:var(--acc);transform:rotate(45deg)}
.bp-art blockquote{margin:36px 0;padding:6px 0 6px 24px;border-left:3px solid var(--acc);font-size:24px;line-height:1.45;font-weight:500;color:var(--ink);letter-spacing:-.01em}
.bp-art blockquote cite{display:block;margin-top:12px;font-size:14px;font-style:normal;font-weight:500;color:var(--soft)}
.bp-tip{border-radius:20px;background:var(--tint);padding:20px 22px;font-size:16px}
.bp-tip b{display:block;color:var(--ink);margin-bottom:4px}
.bp-art figure{margin:36px 0}
.bp-art figure div{border-radius:22px;aspect-ratio:16/9;background:var(--img-cont) center/cover}
.bp-art figcaption{font-size:14px;color:var(--soft);margin-top:10px;text-align:center}
.bp-tbl{overflow-x:auto;border-radius:18px;border:1px solid #ebe9f3}
.bp-tbl table{width:100%;border-collapse:collapse;font-size:15.5px;min-width:520px;line-height:1.5}
.bp-tbl th,.bp-tbl td{text-align:left;padding:13px 16px;border-bottom:1px solid #f0eff5}
.bp-tbl th{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);background:#fbfbfe}
.bp-tbl tr:last-child td{border-bottom:0}
.bp-tbl td:first-child{font-weight:600;color:var(--ink)}
.bp-calc{border-radius:20px;background:#14171b;color:var(--white);padding:22px 24px;font-size:16px}
.bp-calc b{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#b9b6cc;margin-bottom:10px}
.bp-calc div{display:flex;justify-content:space-between;gap:12px;padding-block:8px;border-top:1px solid rgba(255,255,255,.12);font-variant-numeric:tabular-nums}
.bp-calc div:first-of-type{border-top:0}
.bp-calc div.total{font-weight:700;color:var(--white)}
.bp-calc span{color:#cfcbe6}

.bp-end{margin-top:48px;padding-top:28px;border-top:1px solid var(--line);display:grid;gap:22px}
.bp-tags{display:flex;flex-wrap:wrap;gap:8px}
.bp-tags a{font-size:13.5px;font-weight:600;padding:7px 13px;border-radius:999px;background:var(--tint);color:var(--ink);text-decoration:none}
.bp-tags a:hover{color:var(--acc)}
.bp-author{display:flex;gap:18px;align-items:center;border-radius:24px;border:1px solid #ebe9f3;padding:20px}
.bp-author .av{width:72px;height:72px;border-radius:20px;background:url(../../img/team-2.jpg) center top/cover;flex:none}
.bp-author small{display:block;font-size:13px;color:var(--soft)}
.bp-author b{display:block;font-size:18px}
.bp-author p{font-size:15px;color:var(--soft);margin-top:4px;line-height:1.55}
.bp-note{font-size:13px;color:var(--soft);min-height:18px}

.bp-rel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:clamp(20px,2.6vw,30px)}
.bp-rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}

@media (max-width:1100px){
  .bp-body{grid-template-columns:200px minmax(0,1fr)}
}
@media (max-width:820px){
  .bp-body{grid-template-columns:minmax(0,1fr)}
  .bp-toc{display:none}
  .bp-rel{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .bp-rel .post:nth-child(3){display:none}
}
@media (max-width:680px){
  .bp-top{padding-top:100px}
  .bp-hero{aspect-ratio:4/3;border-radius:24px}
  .bp-art{font-size:17px}
  .bp-art blockquote{font-size:20px}
  .bp-author{align-items:flex-start}
  .bp-rel{grid-template-columns:minmax(0,1fr)}
  .bp-rel .post:nth-child(3){display:grid}
}