/* Single post layout */

.wst-progress{position:fixed;inset-block-start:0;inset-inline:0;height:0.25rem;background:transparent;z-index:60;pointer-events:none}
body.admin-bar .wst-progress{inset-block-start:2rem}
@media screen and (max-width:48.875rem){body.admin-bar .wst-progress{inset-block-start:2.79rem}}
.wst-progress__bar{display:block;height:100%;background:linear-gradient(90deg,#c01560,#f2559a);transform:scaleX(0);transform-origin:right center;transition:transform 80ms linear}

.wst-page-hero--post h1{max-width:24ch}
.wst-postmeta{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center;font-size:0.875rem;color:var(--on-dark-muted);margin:0}

.wst-section--post{padding-block:clamp(2.5rem,5vw,4rem)}

.wst-article-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,4vw,3.5rem)}
@media (min-width:64rem){.wst-article-grid{grid-template-columns:minmax(0,1fr) 19.5rem}}

.wst-article{min-width:0}
.wst-article .wst-prose{max-width:none}
.wst-article__shot{margin:0 0 clamp(1.75rem,3vw,2.5rem);border-radius:var(--r-lg);overflow:hidden;border:0.0625rem solid var(--line);background:var(--bg-soft)}
.wst-article__shot img{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover}

.wst-toc--inline{display:block}
@media (min-width:64rem){.wst-toc--inline{display:none}}

.wst-side{min-width:0}
.wst-side__inner{display:flex;flex-direction:column;gap:var(--s-6)}
@media (min-width:64rem){.wst-side__inner{position:sticky;top:6rem}}
.wst-side__label{font-family:ui-monospace,Menlo,monospace;font-size:0.6875rem;letter-spacing:0.12em;color:var(--brand-ink);margin:0 0 var(--s-4);text-transform:uppercase}

.wst-side-toc,.wst-side-block,.wst-side-cta{background:var(--surface);border:0.0625rem solid var(--line);border-radius:var(--r-lg);padding:var(--s-5)}
.wst-side-toc{display:none}
@media (min-width:64rem){.wst-side-toc{display:block;max-height:60vh;overflow-y:auto}}
.wst-side-toc ol{list-style:none;margin:0;padding:0;counter-reset:wsttoc}
.wst-side-toc li{counter-increment:wsttoc;margin-bottom:0.125rem}
.wst-side-toc a{display:flex;gap:0.5rem;align-items:baseline;padding:0.5rem 0.625rem;border-radius:var(--r-sm,0.5rem);font-size:0.875rem;line-height:1.5;color:var(--muted);text-decoration:none;border-inline-start:0.1875rem solid transparent}
.wst-side-toc a::before{content:counter(wsttoc);font-family:ui-monospace,Menlo,monospace;font-size:0.6875rem;color:var(--muted-2);flex-shrink:0}
.wst-side-toc a:hover{background:var(--bg-soft);color:var(--ink)}
.wst-side-toc a[aria-current]{background:var(--bg-soft);color:var(--brand-ink);border-inline-start-color:var(--brand-solid);font-weight:700}

.wst-side-posts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-4)}
.wst-side-posts a{display:flex;gap:0.75rem;align-items:center;text-decoration:none;color:var(--ink)}
.wst-side-posts__shot{flex-shrink:0;width:4rem;height:3rem;border-radius:0.625rem;overflow:hidden;background:var(--bg-soft);border:0.0625rem solid var(--line)}
.wst-side-posts__shot img{width:100%;height:100%;object-fit:cover;display:block}
.wst-side-posts__title{font-size:0.875rem;font-weight:700;line-height:1.45}
.wst-side-posts a:hover .wst-side-posts__title{color:var(--brand-ink)}

.wst-side-cta{background:var(--dark);border-color:var(--dark);color:#fff;text-align:center}
.wst-side-cta__title{font-weight:800;font-size:1.0625rem;margin:0 0 var(--s-2);color:#fff}
.wst-side-cta__text{font-size:0.875rem;color:var(--on-dark-lead);margin:0 0 var(--s-4);line-height:1.6}
.wst-side-cta .wst-btn{width:100%;justify-content:center}

/* share */
.wst-share{margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:var(--s-6);border-top:0.0625rem solid var(--line)}
.wst-share__label{display:block;font-family:ui-monospace,Menlo,monospace;font-size:0.6875rem;letter-spacing:0.12em;color:var(--muted-2);margin-bottom:var(--s-4);text-transform:uppercase}
.wst-share__row{display:flex;flex-wrap:wrap;gap:0.625rem}
.wst-share__btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.625rem 1rem;border-radius:var(--r-pill);border:0.0625rem solid var(--line-strong);background:var(--surface);color:var(--ink);font-size:0.875rem;font-weight:700;font-family:inherit;cursor:pointer;text-decoration:none;transition:border-color var(--t),color var(--t),background var(--t)}
.wst-share__btn svg{width:1.125rem;height:1.125rem;flex-shrink:0}
.wst-share__btn:hover{border-color:var(--brand-solid);color:var(--brand-ink)}
.wst-share__btn--wa:hover{border-color:#128c7e;color:#0d6d62}
.wst-share__btn--fb:hover{border-color:#1257a5;color:#1257a5}
.wst-share__btn[data-done]{border-color:var(--brand-solid);color:var(--brand-ink);background:var(--bg-soft)}

/* author */
.wst-author{display:flex;gap:var(--s-5);align-items:flex-start;margin-top:var(--s-7);padding:var(--s-6);border-radius:var(--r-lg);background:var(--bg-soft);border:0.0625rem solid var(--line)}
.wst-author__mark{flex-shrink:0;width:3.5rem;height:3.5rem;border-radius:1.125rem;background:var(--dark);color:#fff;display:flex;align-items:center;justify-content:center}
.wst-author__mark svg{width:1.75rem;height:1.75rem}
.wst-author__body{min-width:0}
.wst-author__name{margin:0 0 0.375rem;font-weight:800;font-size:1.0625rem;color:var(--ink)}
.wst-author__bio{margin:0 0 var(--s-3);font-size:0.9375rem;color:var(--muted);line-height:1.7}
.wst-author__links{margin:0;display:flex;flex-wrap:wrap;gap:1rem;font-size:0.875rem;font-weight:700}
.wst-author__links a{color:var(--brand-ink)}

/* in-article CTA */
.wst-article__cta{margin-top:var(--s-7);padding:clamp(1.5rem,3vw,2rem);border-radius:var(--r-lg);background:var(--dark);color:#fff;text-align:center}
.wst-article__cta-title{margin:0 0 var(--s-2);font-weight:800;font-size:clamp(1.125rem,2vw,1.375rem);color:#fff}
.wst-article__cta-text{margin:0 0 var(--s-5);color:var(--on-dark-lead);font-size:0.9375rem;line-height:1.7;max-width:52ch;margin-inline:auto}

/* prev / next */
.wst-postnav{display:grid;gap:var(--s-4);margin-top:var(--s-7)}
@media (min-width:37.5rem){.wst-postnav{grid-template-columns:1fr 1fr}}
.wst-postnav__item{display:flex;flex-direction:column;gap:0.375rem;padding:var(--s-5);border-radius:var(--r-lg);border:0.0625rem solid var(--line);background:var(--surface);text-decoration:none;transition:border-color var(--t),transform var(--t)}
.wst-postnav__item:hover{border-color:var(--brand-solid);transform:translateY(-2px)}
.wst-postnav__item--next{text-align:start}
@media (min-width:37.5rem){.wst-postnav__item--next{text-align:end}}
.wst-postnav__dir{font-family:ui-monospace,Menlo,monospace;font-size:0.6875rem;letter-spacing:0.1em;color:var(--brand-ink);text-transform:uppercase}
.wst-postnav__title{font-weight:700;font-size:0.9375rem;color:var(--ink);line-height:1.5}

/* print */
@media print{
.wst-progress,.wst-side,.wst-share,.wst-postnav,.wst-article__cta,.wst-header,.wst-footer,.wst-drawer,.wst-cookies,.wst-a11y,.wst-a11y-toggle,.wst-breadcrumbs{display:none !important}
.wst-page-hero{background:none !important;color:#000 !important;padding-block:0 !important}
.wst-page-hero h1,.wst-postmeta{color:#000 !important}
.wst-article-grid{display:block}
.wst-prose{max-width:none;font-size:11pt;color:#000}
.wst-prose a{color:#000;text-decoration:underline}
.wst-prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444;word-break:break-all}
.wst-prose thead th{background:#eee !important;color:#000 !important}
.wst-table-wrap{overflow:visible;page-break-inside:avoid}
.wst-prose h2,.wst-prose h3{page-break-after:avoid}
.wst-author{page-break-inside:avoid}
body{background:#fff}
}

.wst-tldr--top{margin-block:0 clamp(1.75rem,3vw,2.5rem);border-color:var(--line-strong);background:var(--surface);box-shadow:0 0.75rem 2rem -1.25rem rgba(21,17,25,0.22)}
.wst-tldr--top p:last-child,.wst-tldr--top ul:last-child{margin-bottom:0}

.wst-hero-cta{display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:var(--s-6)}
.wst-btn--onlight{background:transparent;border:0.125rem solid rgba(255,255,255,0.55);color:#fff}
.wst-btn--onlight:hover{border-color:#fff;background:rgba(255,255,255,0.1);color:#fff}
.wst-lead-section{background:var(--bg-soft);border-top:0.0625rem solid var(--line)}
.wst-lead-grid{display:grid;gap:clamp(2rem,4vw,3.5rem)}
@media (min-width:56rem){.wst-lead-grid{grid-template-columns:0.9fr 1.1fr;align-items:start}}
.wst-lead-grid h2{margin-top:0}
.wst-lead-grid>div>p{color:var(--muted);font-size:var(--fs-lead);line-height:1.7;max-width:44ch}
