/* blog */

/* text language */
.bb{--font-text:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--font-display:"Unbounded","Onest",system-ui,sans-serif;font-family:var(--font-text);line-height:1.55;padding-block-end:clamp(48px,6vw,96px)}
.bb[dir=ltr] .arr{transform:none}
.bb[dir=ltr] .bb-flip{transform:scaleX(-1)}
.bb-crumbs:empty{display:none}
.bb :is(h1,h2,h3){overflow-wrap:break-word;hyphens:auto}
.bb .bb-card__title{hyphens:manual}

/* hero */
.bb-hero{display:grid;gap:16px;padding-block:clamp(20px,3vw,40px) clamp(28px,3.5vw,48px)}
.bb-hero h1{font-size:var(--fs-h1);letter-spacing:-.04em;line-height:.98}
.bb-hero .lead{margin:0}

/* cards */
.bb-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.bb-cards>li{display:flex;min-width:0}
.bb-card{display:flex;flex-direction:column;width:100%;min-width:0;overflow:hidden;border-radius:var(--r-lg);background:var(--tile);transition:background-color .15s}
.bb-card:hover{background:var(--tile-2)}
.bb-card__img{display:block;aspect-ratio:16/9;background:var(--tile-2)}
.bb-card__img img{width:100%;height:100%;object-fit:cover}
.bb-card__text{display:flex;flex:1;flex-direction:column;gap:10px;padding:clamp(18px,2vw,24px)}
.bb-card__top{display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--text-3);font-size:var(--fs-micro);font-weight:500;letter-spacing:.01em}
.bb-card__top span+span::before{content:"";display:inline-block;width:4px;height:4px;margin-inline-end:14px;border-radius:50%;background:var(--text-3);vertical-align:middle}
.bb-card__title{font:700 19px/1.3 var(--font-text);letter-spacing:-.01em}
.bb-card__title a{text-decoration:none}
.bb-card__title a::after{content:"";position:absolute;inset:0}
.bb-card{position:relative}
.bb-card__title a:focus-visible{outline:0}
.bb-card:has(.bb-card__title a:focus-visible){outline:2px solid var(--lilac);outline-offset:3px}
.bb-card__excerpt{color:var(--text-2);font-size:15px;line-height:1.5}
.bb-card__by{display:flex;flex-wrap:wrap;gap:4px 12px;margin-block-start:auto;padding-block-start:6px;color:var(--text-3);font-size:var(--fs-small)}
.bb-card__by a{position:relative;z-index:1;color:var(--text-2);text-decoration:none}
.bb-card__by a:hover{color:#fff;text-decoration:underline}
.bb-card--wide{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);margin-block-end:16px}
.bb-card--wide .bb-card__img{align-self:center;overflow:hidden;margin:10px;margin-inline-end:0;border-radius:var(--r-tile)}
.bb-card--wide .bb-card__text{justify-content:center;gap:14px;padding:clamp(24px,3.4vw,48px)}
.bb-card--wide .bb-card__title{font:600 clamp(24px,2.6vw,36px)/1.12 var(--font-display);letter-spacing:-.03em}
.bb-card--wide .bb-card__excerpt{font-size:var(--fs-lead)}
@media (max-width:1023px){.bb-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:899px){
  .bb-card--wide{grid-template-columns:1fr}
  .bb-card--wide .bb-card__img{margin:0;border-radius:0}
}
@media (max-width:639px){.bb-cards{grid-template-columns:1fr}}

/* pager */
.bb-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-block-start:clamp(28px,3vw,40px)}
.bb-pager ol{display:flex;flex-wrap:wrap;gap:8px}
.bb-pager .pill{min-width:44px;min-height:44px;justify-content:center}
.bb-pager__step .ico{color:var(--text-2)}

/* sections */
.bb-sec{padding-block-start:clamp(40px,5vw,72px)}
.bb-sec__h{margin-block-end:clamp(20px,2.4vw,32px);font-size:clamp(26px,3vw,40px);letter-spacing:-.035em}

/* post */
.bb-post__head{display:grid;gap:16px;max-width:900px;padding-block:clamp(16px,2.4vw,32px) clamp(24px,3vw,40px)}
.bb-post__cat{color:var(--pink-ink);font-size:var(--fs-small);font-weight:600;letter-spacing:.01em}
.bb-post__head h1{font-size:clamp(32px,4vw,54px);letter-spacing:-.04em;line-height:1.04}
.bb-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;color:var(--text-3);font-size:var(--fs-small)}
.bb-meta__author{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);color:#fff;font-weight:600;text-decoration:none}
.bb-meta__author:hover span{text-decoration:underline}
.bb-meta__facts{display:flex;flex-wrap:wrap;gap:4px 16px}
.bb-meta__facts>*+*::before{content:"";display:inline-block;width:4px;height:4px;margin-inline-end:16px;border-radius:50%;background:var(--text-3);vertical-align:middle}
.bb-cover{overflow:hidden;max-width:72ch;margin-block-end:8px;border-radius:var(--r-lg);background:var(--tile)}
.bb-cover img{width:100%}
.bb-post__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
.bb-body{max-width:72ch;min-width:0;font-size:17px;line-height:1.7}
.bb-body>*+*{margin-block-start:16px}
.bb-body h2{margin-block-start:48px;font-size:clamp(23px,2.2vw,28px);scroll-margin-top:calc(var(--header-h) + 16px)}
.bb-body h3{margin-block-start:30px;font-size:19.5px}
.bb-body .bb-lead{color:var(--text);font-size:var(--fs-lead);line-height:1.55}
.bb-body blockquote{padding-inline-start:18px;border-inline-start:3px solid var(--purple);color:var(--text)}
@media (min-width:900px){
  .bb-post__grid{grid-template-columns:minmax(0,1fr) minmax(220px,280px);column-gap:clamp(32px,4vw,64px)}
  .bb-post__grid>*{grid-column:1}
  .bb-toc{grid-column:2;grid-row:1 / span 4;position:sticky;top:calc(var(--header-h) + 16px)}
}

/* toc */
.bb-toc{border-radius:var(--r-tile);background:var(--tile)}
.bb-toc summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding-block:12px;padding-inline:18px 16px;font-weight:700;list-style:none;cursor:pointer}
.bb-toc summary::-webkit-details-marker{display:none}
.bb-toc summary::after{content:"";width:8px;height:8px;flex:none;border-inline-end:2px solid var(--text-2);border-block-end:2px solid var(--text-2);transform:rotate(45deg);transition:transform .2s var(--ease)}
.bb-toc[open] summary::after{transform:rotate(-135deg)}
.bb-toc ol{display:grid;gap:2px;padding:0 10px 12px;counter-reset:toc}
.bb-toc li{counter-increment:toc}
.bb-toc a{display:flex;gap:10px;padding:8px;border-radius:10px;color:var(--text-2);font-size:15px;line-height:1.35;text-decoration:none}
.bb-toc a::before{content:counter(toc);flex:none;min-width:1.2em;color:var(--text-3);font-variant-numeric:tabular-nums}
.bb-toc a:hover{background:var(--tile-2);color:#fff}

/* tables: cards under 600px (data-label from the server) */
.bb-body table{margin-block:24px;font-size:15.5px}
.bb-body thead th{color:var(--text-3);font-size:13.5px;font-weight:500}
.bb-body tbody th{color:#fff}
.bb-body :is(td,th){padding:12px 14px}
.bb-body tbody tr:nth-child(odd){background:rgba(255,255,255,.025)}
@media (max-width:599px){
  .bb-body table,.bb-body tbody,.bb-body tr,.bb-body td,.bb-body tbody th{display:block;width:100%}
  .bb-body thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
  .bb-body tbody tr{margin-block-end:10px;padding:14px 16px;border-radius:var(--r-tile);background:var(--tile)}
  .bb-body tbody tr:nth-child(odd){background:var(--tile)}
  .bb-body tbody th{padding:0 0 8px;border:0;font-size:16px}
  .bb-body td{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px;padding:8px 0;border-block-end:1px solid var(--line)}
  .bb-body td:last-child{border-block-end:0}
  .bb-body td[data-label]::before{content:attr(data-label);color:var(--text-3);font-size:13.5px}
}

/* tip */
.bb-tip{margin-block:28px;padding:clamp(18px,2vw,24px);border:1px solid transparent;border-radius:var(--r-tile);background:linear-gradient(var(--tile),var(--tile)) padding-box,var(--grad-brand) border-box;color:var(--text-2)}
.bb-tip--note{background:linear-gradient(var(--tile),var(--tile)) padding-box,linear-gradient(var(--tile-3),var(--tile-3)) border-box}
.bb-tip__h{display:flex;align-items:center;gap:10px;margin-block-end:8px;color:#fff;font-weight:700}
.bb-tip__h .ico{display:grid;place-items:center;width:30px;height:30px;padding:6px;border-radius:9px;background:var(--grad-select);color:#fff}
.bb-tip--note .bb-tip__h .ico{background:var(--tile-3)}
.bb-tip__body>*+*{margin-block-start:10px}
.bb-body .bb-tip{margin-block-start:28px}

/* steps */
.bb-steps{display:grid;gap:12px;margin-block:24px;padding:0;list-style:none}
.bb-body .bb-steps{padding-inline-start:0;list-style:none}
.bb-step{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;align-items:start;padding:18px 20px;border-radius:var(--r-tile);background:var(--tile)}
.bb-step__n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--grad-select);color:#fff;font:700 17px/1 var(--font-text)}
.bb-step__body{display:grid;gap:6px;min-width:0}
.bb-body .bb-step h3{margin:0;color:#fff;font:700 17.5px/1.35 var(--font-text)}
.bb-step p{color:var(--text-2);font-size:16px;line-height:1.6}

/* shot */
.bb-shot{display:grid;justify-items:center;gap:12px;margin-block:32px;padding:clamp(20px,3vw,32px);border-radius:var(--r-lg);background:var(--tile)}
.bb-shot img{width:min(300px,70vw);border-radius:0}
.bb-shot figcaption{max-width:52ch;color:var(--text-3);font-size:14.5px;line-height:1.5;text-align:center}

/* faq */
.bb-faq{margin-block-start:48px}
.bb-faq h2{margin-block-end:18px}
.bb-faq .qa__a{max-width:none}
.bb-body .bb-faq .qa summary{color:#fff}

/* author */
.bb-author{display:grid;grid-template-columns:64px minmax(0,1fr);gap:18px;align-items:start;max-width:72ch;margin-block-start:16px;padding:clamp(20px,2.4vw,28px);border-radius:var(--r-lg);background:var(--tile)}
.bb-author__text{display:grid;gap:4px;min-width:0}
.bb-author__label{color:var(--text-3);font-size:var(--fs-micro);font-weight:500;letter-spacing:.01em}
.bb-author__name{font-weight:700;font-size:18px}
.bb-author__name a{text-decoration:none}
.bb-author__name a:hover{text-decoration:underline}
.bb-author__role{color:var(--pink-ink);font-size:var(--fs-small);font-weight:500}
.bb-author__bio{margin-block-start:6px;color:var(--text-2);font-size:15.5px}

/* person */
.bb-person{grid-template-columns:112px minmax(0,1fr);gap:clamp(18px,3vw,32px);align-items:center}
.bb-person__text{display:grid;gap:10px;min-width:0}
.bb-person h1{font-size:clamp(34px,4.6vw,60px)}
.bb-person__role{color:var(--pink-ink);font-weight:600}
.bb-person__bio{max-width:62ch;color:var(--text-2);font-size:var(--fs-lead);line-height:1.5}
@media (max-width:599px){.bb-person{grid-template-columns:1fr;align-items:start}}

/* avatar */
.bb-ava{display:inline-grid;place-items:center;flex:none;overflow:hidden;border-radius:50%;background:var(--tile-2);color:#fff;font-family:var(--font-text);font-weight:700;letter-spacing:-.02em}
.bb-ava img{width:100%;height:100%;object-fit:cover}
.bb-ava--s{width:32px;height:32px;font-size:12px}
.bb-ava--m{width:64px;height:64px;font-size:22px}
.bb-ava--l{width:112px;height:112px;font-size:38px}
.bb-ava--pink{background:linear-gradient(135deg,#FF3CAC 0%,#784BA0 100%)}
.bb-ava--blue{background:linear-gradient(135deg,#784BA0 0%,#2B86C5 100%)}
.bb-ava--graphite{background:var(--tile-2)}

/* cta */
.bb-cta{margin-block-start:clamp(48px,6vw,88px)}
.bb-cta__in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:center;padding:clamp(24px,3.6vw,48px);border:1px solid transparent;border-radius:var(--r-lg);background:linear-gradient(var(--tile),var(--tile)) padding-box,var(--grad-brand) border-box}
.bb-cta__text{display:grid;gap:12px}
.bb-cta h2{font-size:clamp(26px,3vw,40px);letter-spacing:-.035em;hyphens:manual}
.bb-cta p{color:var(--text-2);font-size:var(--fs-lead);line-height:1.5}
.bb-cta .blp-dl{margin:0}
@media (max-width:899px){.bb-cta__in{grid-template-columns:1fr}}