/* UX-185: prototype reading geometry, brand Paper surfaces. */
.article-page{--reading-width:680px;--head-width:880px;--body-size:19px;--prose-leading:1.72;padding-bottom:clamp(var(--s-9),8vw,120px)}
.article-head{padding:clamp(var(--s-8),7vw,96px) 0 var(--s-7);display:grid;gap:var(--s-5);max-width:var(--head-width);margin:0 auto;text-align:center;justify-items:center}
.article-head h1{font:400 clamp(46px,6vw,88px)/1 var(--font-display);letter-spacing:-.02em;hyphens:auto;overflow-wrap:anywhere}
.article-dek{font:italic 400 clamp(22px,2vw,28px)/1.35 var(--font-display);color:var(--ink-2);max-width:620px;hyphens:auto;overflow-wrap:anywhere}
.article-crumbs{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s-2);list-style:none;padding:0;margin:0;font:500 12px/1.3 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.article-crumbs li{display:flex;align-items:center;gap:var(--s-2);max-width:100%}
.article-crumbs a{display:inline-flex;align-items:center;min-height:44px;padding-inline:var(--s-2);color:var(--ink-3);text-decoration:none;overflow-wrap:anywhere}
.article-crumbs a:hover{text-decoration:underline;color:var(--ink)}
.article-meta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 14px;font:500 12px/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.article-meta>span,.article-meta>time{white-space:nowrap}
.article-meta .cat{color:var(--clay-600)}
.article-meta .article-twin{display:inline-flex;align-items:center;min-height:44px;min-width:24px;font:400 14px/1.4 var(--font-ui);text-transform:none;letter-spacing:normal;color:var(--ink-3);text-decoration:underline;overflow-wrap:anywhere}
.article-byline{font-size:15px;color:var(--ink-2)}
.article-hero{max-width:var(--head-width);margin:var(--s-6) auto var(--s-9)}
.article-hero picture,.article-hero img{display:block;width:100%;height:auto;border-radius:var(--r-6)}
.article-prose{max-width:var(--reading-width);margin:0 auto;font-size:var(--body-size);line-height:var(--prose-leading);color:var(--ink-2);overflow-wrap:break-word}
.article-prose>*+*{margin-top:1.1em}
.article-prose h2{font:400 clamp(32px,3vw,42px)/1.1 var(--font-display);color:var(--ink);margin-top:1.8em}
.article-prose h3{font:600 20px/1.3 var(--font-ui);color:var(--ink);margin-top:1.6em}
.article-prose strong{color:var(--ink);font-weight:600}
.article-prose ul,.article-prose ol{padding-left:1.2em}
.article-prose li+li{margin-top:.4em}
.article-prose li>a:only-child{display:inline-flex;align-items:center;min-height:44px}
.article-prose img{display:block;max-width:100%;height:auto;border-radius:var(--r-3)}
.article-prose blockquote:not(.pull-quote){border-inline-start:2px solid var(--hairline);padding-inline-start:var(--s-5);margin-inline:0}
.article-prose .pull-quote{margin:1.8em -8%;padding:0;font:italic 400 clamp(30px,3.4vw,44px)/1.2 var(--font-display);color:var(--ink);text-align:center;hyphens:auto;overflow-wrap:anywhere}
.pull-quote::before{content:"";display:block;width:40px;height:2px;background:var(--clay-400);margin:0 auto var(--s-5)}
.pull-quote p+p{margin-top:1.1em}
.article-prose .in-fazon{padding:var(--s-6) 28px;border-radius:var(--r-4);border:1px solid var(--hairline);background:var(--paper-2);font-size:17px;margin-block:1.8em}
.in-fazon-label{font:500 11px/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--clay-600);margin-bottom:var(--s-3)}
.in-fazon>*+*:not(:nth-child(2)){margin-top:1.1em}
.table-box{max-width:100%;overflow-x:auto;overflow-y:hidden;border:1px solid var(--hairline);border-radius:var(--r-3)}
.table-box:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.table-box table{min-width:100%;border-collapse:collapse;font-size:17px}
.table-box th,.table-box td{padding:var(--s-3) var(--s-4);text-align:start;border-bottom:1px solid var(--hairline)}
.table-box th{white-space:nowrap;background:var(--paper-2);font:500 12px/1.4 var(--font-mono)}
.table-box tr:last-child td{border-bottom:0}
.table-box .align-center{text-align:center}.table-box .align-right{text-align:right}.table-box .align-left{text-align:left}
.article-prose pre{max-width:100%;overflow-x:auto;padding:var(--s-4);background:var(--paper-2);border-radius:var(--r-3);font-size:14px}
.article-prose code{font-family:var(--font-mono)}
.article-end-cta{max-width:var(--reading-width);margin:72px auto 0;padding:clamp(var(--s-7),5vw,56px);border:1px solid var(--hairline);border-radius:var(--r-6);background:var(--paper-2);display:grid;gap:18px}
.article-end-cta h2{font:400 clamp(32px,3.4vw,46px)/1.05 var(--font-display)}
.article-related{padding-top:clamp(var(--s-9),8vw,120px)}
.article-related>h2{font:400 clamp(36px,4vw,56px)/1.04 var(--font-display);margin-bottom:28px}
@media(max-width:820px){.article-prose .pull-quote{margin-inline:0}}
@media(max-width:620px){
 .article-head{text-align:start;justify-items:start}
 .article-head h1{font-size:clamp(40px,6vw,88px)}
 .article-crumbs,.article-meta{justify-content:flex-start}
 .article-crumbs a{padding-inline:var(--s-2)}
 .article-hero{margin-bottom:var(--s-7)}
 .article-hero picture,.article-hero img{border-radius:var(--r-4)}
 .article-prose .pull-quote{font-size:clamp(26px,3.4vw,44px)}
 .article-prose .in-fazon{padding:var(--s-5) var(--s-4)}
 .article-prose blockquote:not(.pull-quote){padding-inline-start:var(--s-4)}
 .table-box th,.table-box td{padding:10px var(--s-3)}
 .article-end-cta{margin-top:var(--s-8);padding:var(--s-6) var(--s-5)}
 .article-end-cta .btn{width:100%}
}

@media(max-width:912px){.article-page{padding-inline:var(--s-4)}}