/* ==========================================================================
   Articles — single.php, scope .artx on body.cds-artx
   News, guides and other posts as a reading page. The head is one band: title,
   lede and facts beside the featured image, so the copy starts on the first
   screen. Then one text column of about 80 characters with numbered sections
   and a sticky rail (contents + the live pages of the story), the byline, the
   previous / next post, related posts and the comments. Layers on the child
   style.css tokens and overrides the parent's blog .entry-content typography
   for posts only.
   ========================================================================== */

/* One width drives the shell breadcrumb and the page, so both share a left
   edge. A short article has no rail and narrows to the column: single.php says
   so on <article>, which opens right under the breadcrumb, so the width is
   settled before anything below it is parsed and nothing moves sideways.
   --artx-bar is the height the folded contents bar takes under the top bar. */
body.cds-artx{--artx-col:720px;--artx-rail:232px;--artx-gap:36px;--artx-fig:420px;--artx-bar:0px;--artx-w:calc(var(--artx-col) + var(--artx-gap) + var(--artx-rail))}
body.cds-artx:has(.artx-solo){--artx-w:var(--artx-col)}
body.cds-artx .cds-bc-wrap{max-width:calc(var(--artx-w) + 2 * var(--pad))}

.artx{padding:clamp(16px,2vw,24px) 0 40px}
.artx-wrap{max-width:calc(var(--artx-w) + 2 * var(--pad));margin:0 auto;padding-inline:var(--pad)}

/* ---- head: category (phones) · H1 · lede · facts | featured image ----------
   Stacked, the image closes the head. From 1200px a railed article sets the
   text and the image side by side, closed by a rule that starts in the brand
   gradient. */
.artx-head{position:relative;margin-bottom:22px}
.artx-head:not(.has-fig){padding-bottom:20px;border-bottom:1px solid var(--line)}
.artx-head:not(.has-fig)::after{content:"";position:absolute;left:0;bottom:-1px;width:88px;height:2px;border-radius:2px;background:var(--grad)}
.artx-head-main{min-width:0}
.artx-cat{display:inline-block;padding:4px 0;font:600 12px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-text);text-decoration:none}
.artx-cat:hover{text-decoration:underline;text-underline-offset:3px}
.artx-head h1{margin:6px 0 0;max-width:760px;font-family:var(--font-display);font-weight:800;font-size:clamp(28px,3.4vw,40px);line-height:1.1;letter-spacing:-.028em;color:var(--heading);text-wrap:balance}
/* the shell breadcrumb already names the category, so the line above the
   title is only for phones, where the breadcrumb is hidden (760px down) */
@media (min-width:761px){
	.artx-cat{display:none}
	.artx-head h1{margin-top:0}
}
.artx-lede{margin:12px 0 0;max-width:60ch;font-size:19px;line-height:1.5;color:var(--text-2)}
/* the row is as tall as the Copy link button, so showing it moves nothing */
.artx-meta{display:flex;align-items:center;gap:10px;margin-top:16px;min-height:32px}
.artx-av{flex:none;width:28px;height:28px;border-radius:50%}
/* separators sit in the gap and are clipped at a wrapped line's start */
.artx-facts{flex:0 1 auto;min-width:0;display:flex;flex-wrap:wrap;gap:3px 0;margin:0;padding:0;overflow:hidden;list-style:none;font-size:13.5px;line-height:1.4;color:var(--muted)}
.artx-facts li{position:relative;padding-right:19px;white-space:nowrap}
.artx-facts li:last-child{padding-right:6px}
.artx-facts li::before{content:"\00B7";position:absolute;left:-12px;color:var(--dim)}
.artx-facts b{font-weight:600;color:var(--text)}
.artx-copy{position:relative;flex:none;display:inline-flex;align-items:center;min-height:32px;padding:0 13px;border:1px solid var(--line-2);border-radius:999px;background:transparent;font:600 12.5px/1 var(--font-body);color:var(--muted);cursor:pointer;transition:color .15s,border-color .15s}
.artx-copy::after{content:"";position:absolute;inset:-8px -4px}
.artx-copy[hidden]{display:none}
.artx-copy:hover{color:var(--text);border-color:var(--cyan)}
.artx-copy:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.artx-copy.is-done{color:var(--cyan-text);border-color:var(--cyan)}
.artx-copy.is-failed{color:var(--gold-text);border-color:var(--gold)}

.artx-fig{margin:20px 0 0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.artx-fig img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

@media (min-width:1200px){
	.artx-railed .artx-head.has-fig{display:grid;grid-template-columns:minmax(0,1fr) var(--artx-fig);column-gap:var(--artx-gap);align-items:center;padding-bottom:22px;border-bottom:1px solid var(--line)}
	.artx-railed .artx-head.has-fig::after{content:"";position:absolute;left:0;bottom:-1px;width:88px;height:2px;border-radius:2px;background:var(--grad)}
	.artx-railed .artx-head.has-fig .artx-fig{margin:0}
	.artx-railed .artx-head.has-fig h1{max-width:none}
}

/* ---- column + rail --------------------------------------------------------- */
.artx-grid{max-width:var(--artx-col)}
.artx-grid.has-rail{display:grid;grid-template-columns:minmax(0,1fr) var(--artx-rail);column-gap:var(--artx-gap);align-items:start;max-width:none}
.artx-grid.has-rail>*{grid-column:1}
.artx-grid.has-rail>.artx-rail{grid-column:2;grid-row:1 / span 2;position:sticky;top:calc(var(--top-h) + 24px);max-height:calc(100vh - var(--top-h) - 48px);overflow:auto;scrollbar-width:thin}
.admin-bar .artx-grid.has-rail>.artx-rail{top:calc(var(--top-h) + 56px);max-height:calc(100vh - var(--top-h) - 80px)}

.artx-toc summary{display:flex;align-items:center;gap:8px;margin-bottom:10px;list-style:none;font:600 11.5px/1 var(--font-body);letter-spacing:.13em;text-transform:uppercase;color:var(--dim);pointer-events:none}
.artx-toc summary::-webkit-details-marker{display:none}
.artx-toc-l{display:inline-flex;align-items:center;gap:8px}
.artx-toc-n{padding:3px 6px;border-radius:6px;background:var(--surface-2);font:500 11px/1 var(--font-mono);letter-spacing:0;color:var(--muted)}
.artx-toc-now{display:none}
.artx-chev{display:none;width:16px;height:16px;flex:none;transition:transform .2s var(--ease)}
.artx-toc[open] .artx-chev{transform:rotate(180deg)}
/* the entries carry the same two-digit numbers as the section headings */
.artx-toc-list{counter-reset:artx;margin:0;padding:0;list-style:none;border-left:1px solid var(--line)}
.artx-toc-list li{counter-increment:artx}
.artx-toc-list a{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:8px;margin-left:-1px;padding:6px 0 6px 12px;border-left:2px solid transparent;font-size:13.5px;line-height:1.4;color:var(--muted);text-decoration:none;transition:color .15s,border-color .15s}
.artx-toc-list a::before{content:counter(artx,decimal-leading-zero);font:500 11px/1.72 var(--font-mono);color:var(--dim);transition:color .15s}
.artx-toc-list a:hover{color:var(--text)}
.artx-toc-list a.is-active{color:var(--text);border-left-color:var(--cyan)}
.artx-toc-list a.is-active::before{color:var(--cyan-text)}

/* the story's live pages: the main one as a card, the others as a list */
.artx-live{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.artx-live-h{margin:0 0 10px;font:600 11.5px/1 var(--font-body);letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.artx-live-main{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);text-decoration:none;transition:border-color .15s}
.artx-live-main:hover{border-color:var(--cyan)}
.artx-live-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--grad-soft);color:var(--cyan-text)}
.artx-live-ic svg{width:18px;height:18px}
.artx-live-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.artx-live-tx b{font-size:14px;font-weight:600;line-height:1.3;color:var(--heading)}
.artx-live-tx span{font-size:12.5px;line-height:1.4;color:var(--muted)}
.artx-live-go{display:none;flex:none;width:16px;height:16px;color:var(--dim);transition:color .15s,transform .15s var(--ease)}
.artx-live-main:hover .artx-live-go{color:var(--cyan-text);transform:translateX(2px)}
.artx-live ul{margin:8px 0 0;padding:0;list-style:none}
.artx-live li a{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:13.5px;line-height:1.4;color:var(--muted);text-decoration:none;transition:color .15s}
.artx-live li a:hover{color:var(--text)}
.artx-live li svg{flex:none;width:16px;height:16px;color:var(--cyan-text)}
/* printed again after the byline: for the folded layout, and for an article
   without a rail (which shows it at every width) */
.artx-live-end{display:none;margin-top:22px;padding-top:0;border-top:0}
.artx-live-end.artx-live-solo{display:block}
.artx-live-end .artx-live-main{padding:13px 14px}
.artx-live-end .artx-live-go{display:block}
.artx-live-end ul{display:flex;flex-wrap:wrap;gap:0 24px;margin-top:6px}
.artx-live-end li a{min-height:40px}
/* the rail scrolls and clips: its focus ring is drawn inside the link */
.artx-rail a:focus-visible{outline-offset:-2px}

/* ---- body copy (overrides the parent's blog .entry-content) ---------------
   Heading rules reach direct children and core heading blocks only, and never
   a heading that carries its own inline style: the label headings inside
   article cards and charts keep the look they were written with. */
.artx .artx-body{min-width:0;font-size:18px;line-height:1.6}
.artx .artx-body>*+*{margin-top:.8em}
.artx .artx-body li{color:inherit}
.artx .artx-body :is(h2,h3,h4):not([style]):is(.artx-body>*,.wp-block-heading){font-family:var(--font-display);color:var(--heading);text-wrap:pretty;scroll-margin-top:calc(var(--top-h) + 24px + var(--artx-bar))}
.admin-bar .artx .artx-body :is(h2,h3,h4):not([style]):is(.artx-body>*,.wp-block-heading){scroll-margin-top:calc(var(--top-h) + 56px + var(--artx-bar))}
.artx .artx-body h2:not([style]):is(.artx-body>*,.wp-block-heading){margin-top:1.5em;font-size:1.5em;font-weight:700;line-height:1.2;letter-spacing:-.022em}
.artx .artx-body h3:not([style]):is(.artx-body>*,.wp-block-heading){margin-top:1.4em;font-size:1.11em;font-weight:600;line-height:1.3;letter-spacing:-.012em;color:var(--text)}
.artx .artx-body h4:not([style]):is(.artx-body>*,.wp-block-heading){margin-top:1.3em;font-size:max(16px,.94em);font-weight:600;line-height:1.4;letter-spacing:-.005em;color:var(--text)}
/* a section: a rule above, then its number (set by single.php) and the heading */
.artx .artx-body h2[data-artx-n]:not([style]){margin-top:1.45em;padding-top:.78em;border-top:1px solid var(--line);font-size:28px}
.artx .artx-body h2[data-artx-n]:not([style])::before{content:attr(data-artx-n);margin-right:.75em;font:600 13px/1 var(--font-mono);letter-spacing:.04em;color:var(--cyan-text);vertical-align:.5em}
.artx .artx-body>:first-child,.artx .artx-body>:is(h2,h3,h4):first-child{margin-top:0}
.artx .artx-body>h2[data-artx-n]:first-child{padding-top:0;border-top:0}
.artx .artx-body>:is(h2,h3,h4):not([style])+*{margin-top:.5em}
.artx .artx-body>h2:not([style])+h3:not([style]){margin-top:.8em}
.artx .artx-body strong{font-weight:600}
.artx .artx-body :is(ul,ol):not([style]){padding-left:1.25em}
.artx .artx-body li+li{margin-top:.35em}
.artx .artx-body li::marker{color:var(--cyan-text)}
/* links in running text: the words keep the text colour, the underline carries
   the accent, so a paragraph with several links still reads as a paragraph */
body.cds-artx .artx .artx-body :is(p,li,td,th,blockquote,figcaption) a:not([class]){color:var(--text);text-decoration-color:var(--cyan);text-underline-offset:3px;transition:color .15s}
body.cds-artx .artx .artx-body :is(p,li,td,th,blockquote,figcaption) a:not([class]):hover{color:var(--cyan-text)}
/* older posts write the link colour inline (the house cyan): same treatment */
body.cds-artx .artx .artx-body :is(p,li,td,th,blockquote,figcaption) a:not([class])[style*="color:#4FC7EA" i]{color:var(--text) !important}
body.cds-artx .artx .artx-body :is(p,li,td,th,blockquote,figcaption) a:not([class])[style*="color:#4FC7EA" i]:hover{color:var(--cyan-text) !important}
.artx .artx-body blockquote:not([style]){margin-inline:0;padding:16px 20px;border-left:3px solid var(--cyan);border-radius:0 12px 12px 0;background:var(--surface);font-size:1em;color:var(--text-2)}
.artx .artx-body blockquote:not([style]) cite{display:block;margin-top:8px;font-size:13.5px;font-style:normal;color:var(--dim)}
.artx .artx-body :not(pre)>code{padding:.12em .4em;border-radius:6px;background:var(--surface-2);font-size:.88em;color:var(--text)}
.artx .artx-body figcaption{margin-top:8px;font-size:12.5px;line-height:1.5;text-align:left;color:var(--dim)}
.artx .artx-body hr{margin:1.6em 0}
/* wide / full-width blocks stay in the reading column instead of running under the rail */
.artx .artx-body :is(.alignwide,.alignfull){width:auto;max-width:100%;margin-inline:0}

/* hand-written cards (boxes with an inline style, written before the theme had
   article components): the same outer rhythm as the copy around them, and the
   copy's leading inside instead of their own looser one */
.artx .artx-body>:is(div,blockquote)[style*="border-radius"]{margin-block:1.15em !important}
.artx .artx-body>:is(h2,h3,h4):not([style])+:is(div,blockquote)[style*="border-radius"]{margin-top:.7em !important}
.artx .artx-body>div[style*="border-radius"] :is([style*="line-height:1.9"],[style*="line-height:1.85"]){line-height:1.6 !important}

/* tables. Three kinds reach an article: a core table block, a hand-written
   table inside its own scroll box, and a bare table. Headers read as sentence
   case and may wrap, so a table only scrolls sideways when its cells need it.
   The first two get the same frame. */
.artx .artx-body th{font-family:var(--font-body);letter-spacing:0;text-transform:none;white-space:normal}
.artx .artx-body :is(td,th){font-variant-numeric:tabular-nums}
.artx .artx-body :is(div,figure):has(>table){max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--bg-2)}
.artx .artx-body>div:has(>table)[style]{margin-block:1.15em !important}
.artx .artx-body :is(div,figure)>table{display:table;font-size:15px;line-height:1.45}
.artx .artx-body :is(div,figure)>table tr:last-child>td{border-bottom:0 !important}
.artx .artx-body th:not([style]){padding:11px 16px 11px 0;font-size:13px;font-weight:600;line-height:1.35;color:var(--text)}
.artx .artx-body .wp-block-table{margin-inline:0}
.artx .artx-body .wp-block-table table{width:100%;border:0;border-collapse:collapse;line-height:1.5}
.artx .artx-body .wp-block-table thead{border:0}
.artx .artx-body .wp-block-table th{padding:11px 16px;border:0;border-bottom:1px solid var(--line-2);background:var(--surface-2);text-align:left}
.artx .artx-body .wp-block-table td{padding:11px 16px;border:0;border-bottom:1px solid var(--line);vertical-align:top}
/* a scroll box that holds more than it shows fades at the edge that hides it,
   and says so underneath (article.js sets the state and adds the line) */
.artx .artx-body [data-artx-x="start"]{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent)}
.artx .artx-body [data-artx-x="mid"]{-webkit-mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
.artx .artx-body [data-artx-x="end"]{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent)}
.artx .artx-body .artx-swipe{display:none;margin:6px 0 0 !important;font:500 12px/1.4 var(--font-body);letter-spacing:.01em;text-align:right;color:var(--dim)}
.artx .artx-body [data-artx-x]+.artx-swipe{display:block}
.artx .artx-body [data-artx-x="end"]+.artx-swipe{visibility:hidden}

/* ---- byline (closes the copy): one quiet line, no card -------------------- */
.artx-by{display:flex;align-items:center;gap:12px;margin-top:30px;padding-top:16px;border-top:1px solid var(--line)}
.artx-by-av{flex:none;width:36px;height:36px;border-radius:50%}
.artx-by-main{min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
.artx-by p{margin:0 !important}
.artx-by-name{font-size:14.5px;line-height:1.4;color:var(--muted)}
.artx-by-name b{font-weight:700;color:var(--heading)}
.artx-by-bio{flex-basis:100%;font-size:14.5px;line-height:1.55;color:var(--text-2)}
.artx-by-note{font-size:13px;line-height:1.55;color:var(--dim)}
.artx-by-note a{color:var(--muted);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.artx-by-note a:hover{color:var(--cyan-text)}

/* ---- previous / next in the category --------------------------------------- */
.artx-series{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:26px}
.artx-series-a{display:flex;flex-direction:column;gap:7px;padding:13px 16px 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);text-decoration:none;transition:border-color .15s}
.artx-series-a:hover{border-color:var(--line-2)}
.artx-series-a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.artx-series-next{grid-column:2;align-items:flex-end;text-align:right}
.artx-series-k{display:inline-flex;align-items:center;gap:6px;font:600 11.5px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.artx-series-i{width:14px;height:14px}
.artx-series-prev .artx-series-i{transform:rotate(180deg)}
.artx-series-next .artx-series-k{flex-direction:row-reverse}
.artx-series-t{font:700 15.5px/1.35 var(--font-display);letter-spacing:-.01em;color:var(--heading);text-wrap:balance}
.artx-series-a:hover .artx-series-t{color:var(--cyan-text)}

/* ---- related reading / latest from the blog (page width) ------------------- */
.artx-related{margin-top:30px}
.artx-related-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.artx-related h2{margin:0;font:700 20px/1.25 var(--font-display);letter-spacing:-.015em;color:var(--heading)}
.artx-related-all{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;white-space:nowrap;color:var(--muted);text-decoration:none;transition:color .15s}
.artx-related-all:hover{color:var(--cyan-text)}
.artx-related-all svg{width:14px;height:14px}
.artx-rel-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.artx-rel a{display:flex;flex-direction:column;height:100%;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;text-decoration:none;transition:border-color .15s,transform .15s var(--ease)}
.artx-rel a:hover{border-color:var(--line-2);transform:translateY(-2px)}
.artx-rel a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.artx-rel-img{display:block;aspect-ratio:16/9;background:var(--surface-2)}
.artx-rel-img img{display:block;width:100%;height:100%;object-fit:cover}
.artx-rel-txt{display:flex;flex-direction:column;gap:7px;padding:13px 15px 15px}
.artx-rel-cat{font:600 11px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-text)}
.artx-rel-title{font:700 16px/1.35 var(--font-display);letter-spacing:-.01em;color:var(--heading)}
.artx-rel a:hover .artx-rel-title{color:var(--cyan-text)}
.artx-rel-date{font-size:12.5px;line-height:1.3;color:var(--dim)}

/* ---- comments (parent comments.php) --------------------------------------- */
.artx .comments-area{margin:20px 0 0;padding:4px 18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.artx .comments-area>h2{margin:14px 0 12px;font:700 19px/1.3 var(--font-display);color:var(--heading)}
/* the empty form folds into a "Leave a comment" toggle (comment_form_before/after) */
.artx .artx-cmt>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;cursor:pointer;list-style:none;font-size:16px;font-weight:700;color:var(--heading)}
.artx .artx-cmt>summary::-webkit-details-marker{display:none}
.artx .artx-cmt>summary:hover{color:var(--cyan-text)}
.artx .artx-cmt>summary:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:8px}
.artx .artx-cmt>summary svg{flex:0 0 18px;fill:none;stroke:var(--dim);stroke-width:2.2;stroke-linecap:round;transition:transform .2s}
.artx .artx-cmt[open]>summary svg{transform:rotate(45deg);stroke:var(--cyan-text)}
.artx .artx-cmt>.comment-respond{max-width:var(--artx-col);margin:0 0 16px}
/* the toggle already says "Leave a comment": the form's own title stays for screen readers only */
.artx .artx-cmt>.comment-respond>.comment-reply-title:not(:has(#cancel-comment-reply-link:not([style*="none"]))){position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.artx .comment-reply-title{margin:0 0 12px;font:700 19px/1.3 var(--font-display);color:var(--heading)}
.artx .comment-reply-title small{margin-left:10px;font-size:13px;font-weight:600}
.artx .comment-list{list-style:none;max-width:var(--artx-col);margin:0 0 6px;padding:0}
.artx .comment-list li{padding:14px 0;border-bottom:1px solid var(--line)}
.artx .comment-list .children{list-style:none;margin:10px 0 0;padding-left:20px;border-left:1px solid var(--line)}
.artx .comment-list .children li:last-child{border-bottom:0;padding-bottom:0}
.artx .comment-author{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--heading)}
.artx .comment-author img{width:32px;height:32px;border-radius:50%}
.artx .comment-author .says{display:none}
.artx .comment-metadata{margin:2px 0 6px 42px;font-size:12px}
.artx .comment-metadata a{color:var(--dim)}
.artx .comment-content{margin-left:42px;font-size:15px;line-height:1.6;color:var(--text-2)}
.artx .comment-content p{margin:0 0 .6em}
.artx .comment-awaiting-moderation{display:block;margin:4px 0 0 42px;font-size:12.5px;color:var(--gold,#F5C451)}
.artx .reply{margin:4px 0 0 42px}
.artx .reply a{font-size:12.5px;font-weight:600;color:var(--cyan-text)}
.artx .comment-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:0}
.artx .comment-form p{display:flex;flex-direction:column;gap:6px;margin:0}
.artx .comment-form :is(.comment-notes,.logged-in-as,.comment-form-comment,.comment-form-url,.comment-form-cookies-consent,.form-submit){grid-column:1 / -1}
.artx .comment-form :is(.comment-notes,.logged-in-as){font-size:13px;line-height:1.5;color:var(--dim)}
.artx .comment-form label{font-size:13px;font-weight:600;color:var(--muted)}
.artx .comment-form textarea{height:120px;min-height:96px;resize:vertical}
.artx .comment-form .comment-form-cookies-consent{flex-direction:row;align-items:center;gap:10px}
.artx .comment-form .comment-form-cookies-consent input{width:auto;flex:none}
.artx .comment-form .comment-form-cookies-consent label{font-weight:500}
.artx .comment-form .form-submit{align-items:flex-start}
.artx .comment-form .form-submit .submit{display:inline-flex;align-items:center;width:auto;min-height:44px;padding:0 20px;font-size:14px;font-weight:700}

/* #comments, #respond and #comment-N links land below the fixed top bar */
.artx :is(.comments-area,.artx-cmt,.comment-respond,.comment-list li){scroll-margin-top:calc(var(--top-h) + 16px)}
.admin-bar .artx :is(.comments-area,.artx-cmt,.comment-respond,.comment-list li){scroll-margin-top:calc(var(--top-h) + 48px)}
/* #respond sits under the "Leave a comment" line: land with that line in view too */
.artx .artx-cmt>.comment-respond{scroll-margin-top:calc(var(--top-h) + 70px)}
.admin-bar .artx .artx-cmt>.comment-respond{scroll-margin-top:calc(var(--top-h) + 102px)}

/* ---- reading progress: a hairline on the top bar's lower edge (article.js) -- */
.artx-progress{position:fixed;top:calc(var(--top-h) - 2px);left:0;right:0;z-index:71;height:2px;pointer-events:none}
.artx-progress i{display:block;height:100%;background:var(--grad);transform:scaleX(0);transform-origin:0 50%}
.admin-bar .artx-progress{top:calc(var(--top-h) + 30px)}

/* ---- wide screens: a wider column at larger type (same line length), a wider
   rail and image, never a wider gap ------------------------------------------ */
@media (min-width:1600px){
	body.cds-artx{--artx-col:760px;--artx-rail:264px;--artx-fig:460px}
	.artx .artx-body{font-size:19px}
	.artx .artx-body h2[data-artx-n]:not([style]){font-size:29px}
	.artx-head h1{font-size:44px}
	.artx-lede{font-size:20px}
}

/* ---- rail folds: the contents list becomes a bar above the copy that stays
   under the top bar and names the section being read; its list opens over the
   copy. The rail's live pages are hidden and the copy printed after the byline
   is shown instead. ------------------------------------------------------------ */
@media (max-width:1199px){
	body.cds-artx{--artx-w:var(--artx-col);--artx-bar:54px}
	.artx-grid.has-rail{display:block;max-width:var(--artx-col)}
	.artx-grid.has-rail>.artx-rail{top:calc(var(--top-h) + 8px);z-index:30;max-height:none;overflow:visible;margin:0 0 20px}
	.admin-bar .artx-grid.has-rail>.artx-rail{top:calc(var(--top-h) + 40px);max-height:none}
	.artx-toc{position:relative;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);transition:box-shadow .2s}
	.artx-rail.is-stuck .artx-toc,.artx-toc[open]{box-shadow:var(--shadow)}
	/* held under the top bar, the copy scrolls out of sight behind the bar instead of showing above it */
	.artx-rail.is-stuck::before{content:"";position:absolute;z-index:-1;inset:-8px -6px -14px;background:linear-gradient(to bottom,var(--bg) calc(100% - 14px),transparent);pointer-events:none}
	.artx-toc summary{min-height:46px;margin:0;padding:0 14px 0 16px;font-size:12px;cursor:pointer;pointer-events:auto}
	.artx-toc summary .artx-chev{display:block;margin-left:auto;color:var(--muted)}
	.artx-toc.has-now .artx-toc-l{display:none}
	.artx-toc.has-now .artx-toc-now{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 14px/1.3 var(--font-body);letter-spacing:0;text-transform:none;color:var(--text)}
	.artx-toc-now b{margin-right:10px;font:600 12px/1 var(--font-mono);color:var(--cyan-text)}
	.artx-toc .artx-toc-list{position:absolute;left:-1px;right:-1px;top:calc(100% + 6px);max-height:min(62vh,440px);overflow:auto;overscroll-behavior:contain;padding:6px 0;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);scrollbar-width:thin}
	.artx-toc-list a{align-items:center;min-height:44px;margin:0;padding:6px 16px 6px 14px;font-size:14px}
	.artx-toc-list a::before{line-height:1}
	.artx-rail>.artx-live{display:none}
	.artx-live-end{display:block}
	.artx-rel-list{gap:12px}
}
@media (max-width:782px){
	.admin-bar .artx-progress{top:calc(var(--top-h) + 44px)}
	.admin-bar .artx-grid.has-rail>.artx-rail{top:calc(var(--top-h) + 54px)}
}

/* ---- phones ---------------------------------------------------------------- */
@media (max-width:760px){
	.artx{padding-top:14px}
	.artx-head{margin-bottom:18px}
	.artx-head:not(.has-fig){padding-bottom:18px}
	.artx-head h1{font-size:28px;line-height:1.14}
	/* a 44px tap target on a 20px line */
	.artx-cat{padding-block:16px;margin-block:-12px}
	.artx-facts{font-size:13px}
	.artx-fig{margin:18px calc(var(--pad) * -1) 0;border-inline:0;border-radius:0}
	.artx .artx-body :is(div,figure)>table{font-size:14px}
	.artx .artx-body .wp-block-table :is(th,td){padding-inline:12px}
	/* a wide table keeps its first column in view while the rest scrolls */
	.artx .artx-body :is(div,figure)>table :is(th,td):first-child:not([colspan]){position:sticky;left:0;z-index:1;background:var(--bg-2);box-shadow:1px 0 0 var(--line)}
	.artx .artx-body :is(div,figure):has(>table)[data-artx-x="mid"]{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent)}
	.artx .artx-body :is(div,figure):has(>table)[data-artx-x="end"]{-webkit-mask-image:none;mask-image:none}
	.artx-by{align-items:flex-start;margin-top:24px}
	.artx-series{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:22px}
	.artx-series-next{grid-column:auto}
	.artx-related{margin-top:26px}
	/* related posts become compact rows: thumbnail left, title right */
	.artx-rel-list{grid-template-columns:minmax(0,1fr);gap:10px}
	.artx-rel a{flex-direction:row;align-items:stretch}
	.artx-rel a:hover{transform:none}
	.artx-rel-img{flex:none;width:112px;aspect-ratio:auto;min-height:72px}
	.artx-rel-txt{justify-content:center;gap:5px;padding:10px 12px;min-width:0}
	.artx-rel-title{font-size:14.5px}
	.artx .comments-area{padding-inline:14px}
	.artx .comment-form{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
	.artx-lede{font-size:17px}
	.artx .artx-body{font-size:16px}
	.artx .artx-body h2[data-artx-n]:not([style]){font-size:23px}
	.artx .artx-body h2[data-artx-n]:not([style])::before{font-size:12px;vertical-align:.4em}
}
@media (max-width:560px){
	/* Copy link moves up beside the category, so the facts get the whole row
	   and an "Updated" date fits on two lines instead of four */
	.artx-cat{max-width:calc(100% - 116px)}
	.artx-copy{position:absolute;top:-2px;right:0}
	/* the button's tap area reaches 8px under it: keep the title clear of it */
	.artx-head h1{margin-top:12px}
	.artx-live-end li a{min-height:44px}
	/* hand-written article cards: a big stat keeps to one line, and a row of
	   small tiles stacks instead of wrapping unevenly. The cards carry these
	   values inline, so the fix has to match on them. */
	.artx .artx-body [style*="font-size:3em"]{font-size:clamp(34px,10.4vw,3em) !important;white-space:nowrap}
	.artx .artx-body [style*="flex:1 1 200px"]{flex-basis:100% !important}
	/* house charts are drawn on a 760-unit canvas with 14-unit labels: squeezed
	   into a phone column the labels fall to about 6px. Keep the chart at a
	   readable size and let its card scroll sideways, like a wide table. */
	.artx .artx-body [class*="cdc-"]:has(>svg[viewBox^="0 0 760 "]){max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
	.artx .artx-body [class*="cdc-"]>svg[viewBox^="0 0 760 "]{width:600px;min-width:600px;max-width:none}
}
@media (prefers-reduced-motion:reduce){.artx *,.artx-progress i{transition:none !important}}