/* ============================================================
   ARTICLE READING TEMPLATE (blog archive, insights, guides).
   Applied by scripts/article_template.py. Loaded after site.css
   on article pages only. Colours come from the theme tokens.
   ============================================================ */

/* --- header: light, lp-hero style, one illustration --- */
.ar-hero{padding:26px 0 64px; border-bottom:1px solid var(--line);
  background:radial-gradient(60% 70% at 85% 30%, var(--accent-soft), transparent 70%)}
.ar-hero .crumbs{padding-top:0; overflow-wrap:anywhere}
.ar-hero-in{display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:56px; align-items:center; margin-top:34px}
.ar-hero .eyebrow{flex-wrap:wrap}
.ar-hero h1{font-size:clamp(34px,4.3vw,54px); font-weight:800; letter-spacing:-.04em; line-height:1.05;
  margin:18px 0 0; max-width:22ch; overflow-wrap:break-word; view-transition-name:pg-title}
.ar-hero .defn{margin-top:20px; font-size:19px; line-height:1.62; color:var(--muted); max-width:60ch}
.ar-hero .defn b{color:var(--ink); font-weight:600}
.ar-hero .factstrip{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; border:0; border-radius:0;
  background:none; overflow:visible; view-transition-name:pg-facts}
.ar-hero .fact{display:flex; align-items:baseline; gap:7px; padding:7px 13px; border:1px solid var(--line);
  border-radius:999px; background:var(--surface)}
.ar-hero .fact:last-child{border-right:1px solid var(--line)}
.ar-hero .fact .k{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.ar-hero .fact .v{font-family:var(--body); font-weight:600; font-size:14px; letter-spacing:0; margin:0; color:var(--ink)}
.ar-hero .lp-cta{margin-top:28px}
.ar-hero-art .art{margin:0; box-shadow:var(--shadow-lift); border-radius:var(--r-l)}
@media (max-width:960px){
  .ar-hero{padding-bottom:44px}
  .ar-hero-in{grid-template-columns:minmax(0,1fr); gap:30px; margin-top:24px}
  .ar-hero-art{max-width:560px}
}
@media (max-width:600px){
  .ar-hero h1{font-size:clamp(30px,8.4vw,38px)}
  .ar-hero .defn{font-size:17.5px}
  .ar-hero{padding-bottom:32px}
  .ar-hero-art{display:none}
  .ar-hero .factstrip{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0;
    border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface); overflow:hidden}
  .ar-hero .fact,.ar-hero .fact:last-child{flex-direction:column; gap:3px; padding:11px 14px; border:0; border-radius:0;
    border-bottom:1px solid var(--line); background:none}
  .ar-hero .fact:nth-child(odd){border-right:1px solid var(--line)}
  .ar-hero .fact .v{font-size:14.5px}
}

/* --- layout: one reading column, sticky contents on the right --- */
.ar-layout{display:grid; grid-template-columns:minmax(0,760px) 236px; gap:72px; justify-content:center;
  align-items:start; padding:64px 0 24px}
.ar-body{min-width:0}
.ar-body > section{padding:0 0 56px; scroll-margin-top:96px}
.ar-body h2[id],.ar-body h3[id]{scroll-margin-top:96px}
.ar-toc{position:sticky; top:96px; max-height:calc(100vh - 120px); overflow:auto; padding-bottom:8px}
/* same look as the site .rail, own class so the highlighter below handles
   heading ids that start with a digit */
.ar-toc .rail-h{font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:14px}
.ar-toc ul{list-style:none; padding:0; margin:0 0 26px; display:flex; flex-direction:column; gap:2px; border-left:1px solid var(--line)}
.ar-toc ul a{display:block; padding:8px 0 8px 16px; margin-left:-1px; border-left:2px solid transparent;
  font-size:14px; line-height:1.4; color:var(--muted); text-decoration:none; transition:color .2s, border-color .2s}
.ar-toc ul a:hover{color:var(--ink)}
.ar-toc ul a.on{color:var(--accent-deep); border-left-color:var(--accent); font-weight:600}
.ar-toc-m{display:none}
@media (max-width:1100px){.ar-layout{grid-template-columns:minmax(0,720px) 210px; gap:48px}}
@media (max-width:1000px){
  .ar-layout{grid-template-columns:minmax(0,1fr); max-width:720px; margin:0 auto; padding-top:36px}
  .ar-toc{display:none}
  .ar-toc-m{display:block; margin:0 0 34px; border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface)}
  .ar-toc-m summary{cursor:pointer; padding:14px 18px; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--accent-deep); list-style:none; display:flex; align-items:center; gap:10px}
  .ar-toc-m summary::-webkit-details-marker{display:none}
  .ar-toc-m summary::after{content:"+"; margin-left:auto; font-size:16px}
  .ar-toc-m[open] summary::after{content:"\2212"}
  .ar-toc-m ul{list-style:none; margin:0; padding:2px 18px 14px; display:flex; flex-direction:column; gap:2px}
  .ar-toc-m a{display:block; padding:7px 0; color:var(--ink-2); text-decoration:none; font-size:15.5px; line-height:1.4}
  .ar-toc-m a:hover{color:var(--accent-deep)}
}

/* --- typography inside the reading column --- */
.ar-body h2{font-size:clamp(27px,2.9vw,36px); letter-spacing:-.032em; line-height:1.12}
.ar-body > section > .eyebrow{margin-bottom:12px}
.ar-body .prose{font-size:18.5px}
.ar-body .prose > * + *{margin-top:22px}
.ar-body .prose p{font-size:18.5px; line-height:1.78; color:var(--ink-2); max-width:68ch}
.ar-body .prose h2{margin-top:58px; max-width:30ch}
.ar-body .prose h3{font-size:clamp(21px,2.1vw,25px); letter-spacing:-.022em; line-height:1.25; margin-top:42px}
.ar-body .prose h4{font-size:19.5px; letter-spacing:-.015em; line-height:1.3; margin-top:32px}
.ar-body .prose h2 + *,.ar-body .prose h3 + *,.ar-body .prose h4 + *{margin-top:14px}
.ar-body .prose ul,.ar-body .prose ol{padding-left:0; list-style:none; display:flex; flex-direction:column; gap:12px; max-width:66ch}
.ar-body .prose li{position:relative; padding-left:30px; font-size:18px; line-height:1.7; color:var(--ink-2)}
.ar-body .prose ul > li::before{content:""; position:absolute; left:8px; top:.72em; width:8px; height:8px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
.ar-body .prose ol{counter-reset:ar-ol}
.ar-body .prose ol > li{counter-increment:ar-ol}
.ar-body .prose ol > li::before{content:counter(ar-ol); position:absolute; left:0; top:.2em; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-deep);
  font-family:var(--mono); font-size:11.5px; font-weight:700}
.ar-body .prose li ul,.ar-body .prose li ol{margin-top:10px}
.ar-body .prose li p{font-size:inherit}
.ar-body .prose a{color:var(--accent-deep); text-decoration-thickness:1px; text-underline-offset:3px}
.ar-body .prose a:hover{text-decoration-thickness:2px}
.ar-body .prose b,.ar-body .prose strong{font-weight:650; color:var(--ink)}
.ar-body .prose blockquote{margin:30px 0; padding:20px 26px; border-left:4px solid var(--accent); border-radius:0 var(--r-m) var(--r-m) 0;
  background:var(--surface-2); font-size:19.5px; line-height:1.65; color:var(--ink)}
.ar-body .prose blockquote p{color:inherit; font-size:inherit}
.ar-body .prose img{max-width:100%; height:auto; border-radius:var(--r-m)}
.ar-body .prose hr{border:0; border-top:1px solid var(--line); margin:40px 0}
.ar-body .prose code{font-family:var(--mono); font-size:.86em; padding:2px 6px; border-radius:6px; background:var(--surface-2); border:1px solid var(--line)}
.ar-body .prose pre{overflow-x:auto; padding:18px; border-radius:var(--r-m); background:var(--surface-2); border:1px solid var(--line); font-size:14px}

/* tables: scroll inside their own box, never the page */
.ar-body .prose table{width:100%; border-collapse:separate; border-spacing:0; font-size:16px; line-height:1.5;
  border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; background:var(--surface)}
.ar-body .prose div:has(> table){margin-top:28px; max-width:100%; overflow-x:auto; border-radius:var(--r-m)}
.ar-body .prose th,.ar-body .prose td{padding:12px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); color:var(--ink-2)}
.ar-body .prose tr > * + *{border-left:1px solid var(--line)}
.ar-body .prose thead th,.ar-body .prose tr:first-child th{background:var(--surface-2); font-family:var(--mono); font-size:11.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink); font-weight:600}
.ar-body .prose tbody tr:last-child > *{border-bottom:0}
.ar-body .prose tbody tr:hover > td{background:color-mix(in srgb,var(--accent-soft) 45%,transparent)}
.ar-body .prose td p,.ar-body .prose th p{font-size:inherit; line-height:inherit}

@media (max-width:600px){
  .ar-body .prose,.ar-body .prose p{font-size:17.5px; line-height:1.74}
  .ar-body .prose li{font-size:17px}
  .ar-body .prose h2{margin-top:46px}
  .ar-body .prose table{font-size:14.5px}
  .ar-body .prose th,.ar-body .prose td{padding:10px 12px}
}

/* --- call-to-action cards --- */
.ar-cta{border:1px solid var(--line); border-radius:var(--r-l); background:var(--surface); box-shadow:var(--shadow)}
.ar-cta-mid{display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center; margin:44px 0;
  padding:22px 24px; border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
  background:linear-gradient(120deg, var(--accent-soft), var(--surface) 62%)}
.ar-cta-mid .ar-cta-h{font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-.02em; color:var(--ink); line-height:1.25}
.ar-cta-mid-copy p + p{margin-top:5px; font-size:15.5px; line-height:1.55; color:var(--muted)}
.ar-cta-mid .btn{white-space:nowrap}
@media (max-width:760px){.ar-cta-mid{grid-template-columns:auto 1fr} .ar-cta-mid .btn{grid-column:1 / -1; justify-content:center}}
.ar-end{padding-top:8px !important}
.ar-cta-end{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:36px; align-items:center; padding:40px;
  background:radial-gradient(70% 90% at 100% 0%, var(--accent-soft), var(--surface) 70%)}
.ar-cta-end h2{margin-top:14px; font-size:clamp(26px,2.8vw,34px); max-width:20ch}
.ar-cta-end p{margin-top:14px; font-size:17.5px; line-height:1.6; color:var(--muted); max-width:46ch}
.ar-cta-btns{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}
.ar-cta-btns .btn{font-size:16px; padding:14px 22px}
.ar-cta-art .art{margin:0; border-radius:var(--r-m)}
@media (max-width:760px){
  .ar-cta-end{grid-template-columns:minmax(0,1fr); padding:28px 22px; gap:26px}
  .ar-cta-art{order:-1}
  .ar-cta-btns .btn{width:100%; justify-content:center}
}

/* --- related articles --- */
.ar-rel-h{margin-top:38px; font-size:21px; letter-spacing:-.02em}
.ar-rel{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:20px}
.ar-more .ar-rel{margin-top:26px}
.ar-card{display:flex; flex-direction:column; gap:8px; padding:22px; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  transition:transform .3s, border-color .3s, box-shadow .3s}
.ar-card:hover{transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow)}
.ar-card .ar-ic{margin-bottom:6px}
.ar-card-t{font-family:var(--display); font-weight:700; font-size:18px; line-height:1.3; letter-spacing:-.015em; color:var(--ink)}
.ar-card-m{font-family:var(--mono); font-size:12px; color:var(--muted)}
.ar-card .lp-more{font-size:14.5px}
@media (max-width:600px){
  .ar-rel{grid-template-columns:minmax(0,1fr); gap:12px}
  .ar-card{display:grid; grid-template-columns:40px minmax(0,1fr); column-gap:14px; row-gap:5px; padding:18px}
  .ar-card .ar-ic{grid-row:1 / span 4; width:40px; height:40px; border-radius:11px; margin:0}
  .ar-card-t{font-size:17px}
  .ar-card .lp-more{padding-top:4px}
}
.ar-ic{flex:none; width:44px; height:44px; border-radius:13px; background:var(--accent-soft); display:grid; place-items:center}
.ar-ic svg{width:22px; height:22px; fill:none; stroke:var(--accent-deep); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.ar-body .engpick{gap:16px}
.ar-body .engpick a{border-radius:var(--r-l); padding:20px}

/* --- insights index: post list as a card grid --- */
.ar-index .postlist{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.ar-index .post{display:flex; flex-direction:column; border-radius:var(--r-l); padding:22px}
.ar-index .post h3{font-size:19px; line-height:1.28; max-width:none}
.ar-index .post p{font-size:15px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.ar-index .post .go{margin-top:auto; padding-top:12px}
.ar-index #all .postlist{grid-template-columns:minmax(0,1fr)}
.ar-index #all .post{padding:28px; background:linear-gradient(120deg, var(--accent-soft), var(--surface) 55%)}
.ar-index #all .post h3{font-size:24px}
.ar-filter{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
.ar-filter button{font-family:var(--mono); font-size:12px; padding:7px 13px; border-radius:999px; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); color:var(--ink-2); transition:background .2s, border-color .2s, color .2s}
.ar-filter button:hover{border-color:var(--accent)}
.ar-filter button[aria-pressed="true"]{background:var(--accent-deep); border-color:var(--accent-deep); color:var(--surface)}
@media (max-width:600px){.ar-index .postlist{grid-template-columns:minmax(0,1fr)}}

/* --- illustration helpers (on top of the shared .art classes) --- */
.art .ar-flow{fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-dasharray:4 6; animation:ar-flow 1.2s linear infinite}
@keyframes ar-flow{to{stroke-dashoffset:-20}}
.art .ar-tick-on{fill:none; stroke:var(--on-accent); stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.art .ar-cursor{animation:ar-cursor 8s ease-in-out infinite}
@keyframes ar-cursor{0%,100%{transform:translate(0,0)} 30%{transform:translate(-80px,-6px)} 55%{transform:translate(-4px,-40px)} 80%{transform:translate(20px,4px)}}
@media (prefers-reduced-motion:reduce){.art .ar-flow,.art .ar-cursor,.ar-card,.ar-filter button{animation:none !important; transition:none !important}}
.ar-body > section > * + .prose,.ar-body > section > .prose + *{margin-top:24px}
.ar-body > section > .eyebrow + h2 + .prose,.ar-body > section > h2 + .prose{margin-top:20px}
.ar-body .lede{font-size:19px; line-height:1.65; margin-top:16px; max-width:64ch}
@media (max-width:600px){.ar-body .lede{font-size:17.5px}}
.ar-index .post[hidden]{display:none}