/* ═══════════════════════════════════════════════════════════════════════
   Articles, author profiles and the Writing list (inc/articles.php,
   inc/authors.php). Added 31 October 2026.

   Loaded after main.css, only where these pages render. It uses main.css's
   tokens and adds no colour, radius or spacing of its own. Selectors are
   scoped under .prose or .rail where main.css already styles the same
   elements there, so neither file has to know the order the other loads in.
   ═══════════════════════════════════════════════════════════════════════ */

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* a jump to a section lands below the sticky header, not under it */
.prose [id]{scroll-margin-top:calc(var(--nav-h) + var(--s5))}

/* ── who wrote and reviewed it, in the page head ──────────────────────── */
.byline{display:flex;flex-wrap:wrap;gap:var(--s5) var(--s8);margin-top:var(--s6)}
.person{display:flex;align-items:center;gap:var(--s3);font-size:15px;line-height:1.4;color:var(--ink-body)}
.person__role{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute-deep);margin-bottom:3px}
.person b{font-weight:600;color:var(--navy)}
a.person:hover b{color:var(--bronze-deep);text-decoration:underline;text-underline-offset:3px}
.portrait{flex:none;width:52px;height:52px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:18px;color:var(--bronze-deep);overflow:hidden}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait--md{width:88px;height:88px;font-size:28px}
.portrait--lg{width:136px;height:136px;font-size:44px}
.artmeta{margin-top:var(--s5);font-size:13px;color:var(--ink-mute-deep);letter-spacing:.03em}
.artmeta span{opacity:.5;padding:0 8px}

/* ── summarise with AI ────────────────────────────────────────────────── */
.askai{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line)}
.askai__label{font-size:13px;color:var(--ink-mute-deep);margin-right:var(--s2)}
.askai a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:7px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);color:var(--navy);transition:border-color .18s var(--ease),color .18s var(--ease)}
.askai a:hover{border-color:var(--bronze-deep);color:var(--bronze-deep)}
.askai svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:1.6;opacity:.6}
/* at the foot of the article, after the FAQs */
.prose .askai{margin-top:var(--s8)}
.prose .askai a{text-decoration:none}

/* ── key takeaways ────────────────────────────────────────────────────── */
.prose .takeaways{margin:var(--s7) 0;padding:var(--s6) var(--s7);background:#fff;border:1px solid var(--line);border-top:3px solid var(--bronze-deep);border-radius:var(--r)}
/* first in the article, the section's own padding is the space above it */
.prose > .takeaways:first-child,.prose > .toc-m:first-child{margin-top:0}
.prose .takeaways h2{font-size:1.25rem;font-weight:500;margin:0 0 var(--s4)}
.prose .takeaways ul{margin-top:0}
@media(max-width:560px){.prose .takeaways,.prose .brief{padding:var(--s5)}}

/* ── contents: right column on desktop, fold-out on a phone ───────────── */
.rail .toc ol{display:grid;max-height:calc(100vh - var(--nav-h) - 300px);overflow:auto}
.rail .toc li a{padding:7px 0 7px 14px;font-size:14px;line-height:1.45;border-bottom:0;border-left:2px solid var(--line-soft);transition:color .18s var(--ease),border-color .18s var(--ease)}
.rail .toc li a:hover{padding-left:14px;color:var(--navy)}
.rail .toc li a.is-current{color:var(--navy);font-weight:600;border-left-color:var(--bronze-deep)}
.rail .toc li.sub a,.rail .toc li.sub a:hover{padding-left:28px;font-size:13.5px}
.prose .toc-m{display:none;margin:var(--s6) 0;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.toc-m summary{cursor:pointer;list-style:none;padding:var(--s4) var(--s5);font-size:14px;font-weight:600;color:var(--navy)}
.toc-m summary::-webkit-details-marker{display:none}
.toc-m summary::after{content:"+";float:right;color:var(--bronze-deep)}
.toc-m[open] summary::after{content:"\2212"}
.prose .toc-m ol{margin:0;padding:0 var(--s5) var(--s4);gap:0}
.prose .toc-m li{padding-left:0}
.prose .toc-m li::before{content:none}
.prose .toc-m a{display:block;padding:6px 0;font-size:15px;line-height:1.5;color:var(--ink-body);text-decoration:none}
@media(max-width:1024px){.prose .toc-m{display:block}.rail .toc{display:none}}

/* ── about the author ─────────────────────────────────────────────────── */
.prose .authorbox{margin-top:var(--s8);padding:var(--s6);background:var(--tint);border-radius:var(--r);display:grid;grid-template-columns:auto 1fr;gap:var(--s5);align-items:start}
.prose .authorbox p{font-size:15.5px;line-height:1.7}
.prose .authorbox .authorbox__name{font-family:var(--serif);font-size:1.25rem;font-weight:500;line-height:1.3;color:var(--navy)}
.prose .authorbox .authorbox__role{font-size:13px;color:var(--ink-mute-deep);margin-top:2px}
.authorbox__bio{margin-top:var(--s3)}
.authorbox__links{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;margin-top:var(--s4);font-size:14px}
.prose .authorbox__links a{text-decoration:none;font-weight:600}
@media(max-width:560px){.prose .authorbox{grid-template-columns:1fr}}

/* profile links as icons */
.ico{display:inline-flex;width:32px;height:32px;border:1px solid var(--line);border-radius:var(--r);align-items:center;justify-content:center;background:var(--paper);color:var(--ink-body);transition:border-color .18s var(--ease),color .18s var(--ease)}
.prose .ico{color:var(--ink-body)}
.ico:hover,.prose .ico:hover{color:var(--bronze-deep);border-color:var(--bronze-deep)}
.ico svg{width:14px;height:14px;fill:currentColor}

/* ── practice links at the foot of a long guide ───────────────────────── */
.prose .foot-practice h2{font-family:var(--sans);font-size:11px;font-weight:600;line-height:1.4;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-mute);margin-top:var(--s8)}
.prose .foot-practice .related{margin-top:var(--s4);padding-top:0;border-top:0}
.prose .foot-practice .related a{text-decoration:none;color:var(--ink-body)}

/* ── article lists: the Writing index, profiles, more from Writing ────── */
.post-row h3{font-size:1.4rem;font-weight:500;line-height:1.3;transition:color .2s var(--ease)}
.prose .post-row h3{margin-top:0}
a.post-row:hover h2,a.post-row:hover h3{color:var(--bronze-deep)}
.post-row .post-row__by{font-size:13px;line-height:1.5;color:var(--ink-mute-deep);margin-top:var(--s2)}
.prose a.post-row{color:inherit;text-decoration:none}
.prose .posts{margin-top:var(--s5)}
.more{border-top:1px solid var(--line);padding:var(--s8) 0 var(--s9)}
.more h2{font-size:clamp(1.5rem,2.4vw,1.9rem)}
.more .posts{margin-top:var(--s6)}

/* ── profile page ─────────────────────────────────────────────────────── */
.profile-head{display:grid;grid-template-columns:auto 1fr;gap:var(--s6);align-items:center}
@media(max-width:560px){.profile-head{grid-template-columns:1fr;gap:var(--s5)}}
.profile-head .phead__forum{margin-top:var(--s3)}
.profile-links{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.prose .facts{margin:var(--s7) 0 0;border-top:1px solid var(--line)}
.facts div{display:grid;grid-template-columns:200px 1fr;gap:var(--s5);padding:var(--s4) 0;border-bottom:1px solid var(--line-soft)}
@media(max-width:560px){.facts div{grid-template-columns:1fr;gap:var(--s1)}}
.facts dt{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);padding-top:4px}
.facts dd{margin:0;font-size:16px;line-height:1.6;color:var(--ink-body)}
.prose .facts dd a{color:var(--bronze-deep);text-decoration:underline;text-underline-offset:3px}

/* FAQ by Rank Math in an article: questions and answers in full, ruled like the practice pages' FAQs */
.prose .rank-math-block{margin-top:var(--s5);border-top:1px solid var(--line)}
.prose .rank-math-list-item{padding:var(--s5) 0;border-bottom:1px solid var(--line-soft)}
.prose .rank-math-list-item > * + *{margin-top:var(--s3)}
.prose .rank-math-question{margin-top:0;font-family:var(--serif);font-size:18px;font-weight:500;line-height:1.4;color:var(--navy)}
.prose .rank-math-answer p{font-size:16px;line-height:1.75}
.prose .rank-math-answer > * + *{margin-top:var(--s3)}