/* fazz. · shared article styles */
.art-hero{padding:140px 0 0}
.art-head{max-width:820px;margin:0 auto;text-align:center}
.art-head h1{font-family:var(--display);font-weight:700;font-size:clamp(32px,4.4vw,54px);letter-spacing:-.025em;line-height:1.06;margin:18px 0;text-wrap:balance}
.art-standfirst{font-size:19.5px;line-height:1.65;color:var(--mid);max-width:62ch;margin:0 auto 26px;text-wrap:pretty}
.art-byline{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--mid);font-size:14.5px;flex-wrap:wrap}
.art-byline .author{display:flex;align-items:center;gap:9px;color:var(--ink);font-weight:600}
.art-byline .ava{width:34px;height:34px;border-radius:9999px;background:var(--violet-pale);overflow:hidden;flex:0 0 34px}
.art-byline .ava img{width:100%;height:100%;border-radius:9999px;object-fit:cover;display:block}
.art-byline .ava.init{display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:12.5px;color:var(--violet);background:color-mix(in oklab,var(--violet) 14%,#fff);letter-spacing:.02em}
.art-byline .sep{width:4px;height:4px;border-radius:50%;background:var(--border)}
.art-body{max-width:740px;margin:0 auto}
.art-body p{font-size:18px;line-height:1.8;color:var(--ink-soft);margin-bottom:26px;text-wrap:pretty}
.art-body h2{font-family:var(--display);font-weight:700;font-size:clamp(24px,2.9vw,31px);letter-spacing:-.02em;margin:52px 0 18px;line-height:1.18;text-wrap:balance}
.art-body h3{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.01em;margin:34px 0 12px}
.art-body strong{color:var(--ink);font-weight:600}
.art-body a{color:var(--violet);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.art-body a:hover{color:var(--ink)}
.art-body blockquote{font-family:var(--display);font-weight:700;font-size:clamp(21px,2.5vw,26px);line-height:1.35;letter-spacing:-.01em;padding:8px 0 8px 28px;border-left:4px solid var(--violet);margin:36px 0;color:var(--ink)}
.art-body ul,.art-body ol{margin:0 0 26px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.art-body li{font-size:17px;line-height:1.65;padding-left:26px;position:relative;color:var(--ink-soft);text-wrap:pretty}
.art-body ul li::before{content:'';position:absolute;left:0;top:10px;width:8px;height:8px;border-radius:2px;background:var(--violet)}
.art-body ol{counter-reset:n}
.art-body ol li{counter-increment:n}
.art-body ol li::before{content:counter(n);position:absolute;left:0;top:1px;font-family:var(--display);font-weight:700;font-size:13px;color:var(--violet)}
/* key takeaways */
.art-key{background:var(--violet-pale,color-mix(in oklab,var(--violet) 7%,#fff));border:1px solid color-mix(in oklab,var(--violet) 22%,#fff);border-radius:var(--r-lg);padding:26px 30px;margin:0 0 38px}
.art-key .l{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);font-weight:700}
.art-key ul{margin:16px 0 0;gap:10px}
.art-key li{font-size:16px;color:var(--ink)}
/* table of contents */
.art-toc{border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:24px 28px;margin:0 0 40px;background:#fff}
.art-toc .l{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:700;margin-bottom:14px;display:block}
.art-toc ol{gap:9px;margin:0}
.art-toc li{font-size:15.5px;padding-left:24px}
.art-toc a{color:var(--ink-soft);text-decoration:none}
.art-toc a:hover{color:var(--violet)}
/* data table built from real portfolio data */
.art-table{margin:32px 0;overflow-x:auto;border:1px solid var(--border-soft);border-radius:var(--r-lg);background:#fff}
.art-table table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.art-table th{text-align:left;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:15px 18px;border-bottom:1px solid var(--border-soft);white-space:nowrap}
.art-table td{padding:14px 18px;border-bottom:1px solid var(--border-soft);color:var(--ink-soft);vertical-align:top}
.art-table tr:last-child td{border-bottom:0}
.art-table td b{color:var(--ink);font-weight:600}
.art-table caption{caption-side:bottom;text-align:left;font-size:13px;color:var(--faint);padding:14px 18px;line-height:1.5}
/* bar chart from data */
.art-chart{margin:32px 0;border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:26px 28px;background:#fff}
.art-chart .ct{font-family:var(--display);font-weight:700;font-size:17px;margin-bottom:4px}
.art-chart .cs{font-size:13.5px;color:var(--faint);margin-bottom:22px}
.art-chart .row{display:grid;grid-template-columns:minmax(96px,148px) 1fr auto;gap:14px;align-items:center;margin-bottom:12px;font-size:14.5px}
.art-chart .row:last-child{margin-bottom:0}
.art-chart .bar{height:11px;border-radius:100px;background:var(--violet);min-width:3px}
.art-chart .bar.alt{background:color-mix(in oklab,var(--violet) 38%,#fff)}
.art-chart .v{font-family:var(--display);font-weight:700;font-size:14px;color:var(--ink)}
.art-chart .lab{color:var(--ink-soft)}
/* callout: where the client's own number goes */
.art-note{border-left:4px solid var(--border);background:var(--paper-2,#f7f6fa);border-radius:0 var(--r-md) var(--r-md) 0;padding:20px 24px;margin:30px 0;font-size:16px;line-height:1.65;color:var(--ink-soft)}
.art-note b{display:block;font-family:var(--display);font-weight:700;color:var(--ink);margin-bottom:6px;font-size:15px}
/* author bio */
.art-author{display:flex;gap:20px;align-items:flex-start;border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:26px 28px;margin:44px 0 0;background:#fff}
.art-author .pic{width:74px;height:74px;border-radius:9999px;overflow:hidden;flex:0 0 74px;background:var(--violet-pale)}
.art-author .pic img{width:100%;height:100%;object-fit:cover;border-radius:9999px;display:block}
.art-author .pic.init{display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:26px;color:var(--violet);background:color-mix(in oklab,var(--violet) 14%,#fff);letter-spacing:.02em}
.art-author .l{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:700}
.art-author h4{font-family:var(--display);font-weight:700;font-size:19px;margin:6px 0 8px}
.art-author p{font-size:15px;line-height:1.65;color:var(--mid);margin:0}
.art-tags{display:flex;gap:8px;flex-wrap:wrap;margin:40px 0}
.art-share{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);padding:22px 0;margin-bottom:10px}
.art-share span{font-size:14px;color:var(--faint);font-weight:600}
.art-share .links{display:flex;gap:10px}
.art-share .links a{width:40px;height:40px;border-radius:10px;background:var(--paper-2);display:grid;place-items:center;transition:.15s}
.art-share .links a:hover{background:var(--violet)}
.art-share .links a:hover svg{fill:#fff}
.art-share svg{width:16px;height:16px;fill:var(--mid)}
.art-cover{max-width:1000px;margin:48px auto 0;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:16/8}
.art-cover .ph{width:100%;height:100%}
@media (max-width:900px){.art-hero{padding:120px 0 0}.art-cover{margin-top:32px}}
@media (max-width:560px){
 .art-share{flex-wrap:wrap;gap:14px}
 .art-head h1{font-size:27px;line-height:1.12}
 .art-standfirst{font-size:17px}
 .art-body p{font-size:16.5px;line-height:1.75}
 .art-body h2{font-size:22px;margin:40px 0 14px}
 .art-body blockquote{font-size:20px;padding-left:20px}
 .art-key,.art-toc,.art-chart{padding:20px 20px}
 .art-author{flex-direction:column;gap:16px;padding:22px 20px}
 .art-chart .row{grid-template-columns:1fr;gap:5px}
 .art-chart .bar{height:9px}
}
/* shown only when the visitor has switched the interface to English */
.art-ro-note{display:none}
html[lang="en"] .art-ro-note{display:block;max-width:740px;margin:0 auto 30px;padding:14px 18px;border:1px dashed var(--border);border-radius:var(--r-md);font-size:15px;line-height:1.6;color:var(--mid);background:var(--paper-2,#f7f6fa)}
html[lang="en"] .art-ro-note a{color:var(--violet)}