/* ————————————————————————————————————————————————————
   Templacity Journal — post sections (production)
   Loaded on every single-post view (and the lab page).
   Component CSS for the section catalogue. Tokens already
   declared globally in assets/css/theme.css; we redeclare a
   handful here only where the design used a different value.
   ———————————————————————————————————————————————————— */

* , *::before, *::after { box-sizing: border-box; }
.article-body img,
.article-body svg { display: block; max-width: 100%; }
.article-body button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }

.article-body .wrap        { max-width: 1320px; margin: 0 auto; padding: 0 var(--wrap-pad, 48px); }
.article-body .wrap-narrow { max-width: 760px;  margin: 0 auto; padding: 0 var(--wrap-pad, 48px); }
.article-body .wrap-mid    { max-width: 1080px; margin: 0 auto; padding: 0 var(--wrap-pad, 48px); }
@media (max-width:720px){ .article-body .wrap, .article-body .wrap-narrow, .article-body .wrap-mid { padding: 0 var(--wrap-pad-sm, 24px); } }

/* —— Buttons —— */
.article-body .btn{ display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:var(--paper-soft); border-radius:var(--radius); padding:13px 22px; font-size:14px; font-weight:500; transition:transform .18s ease,background .18s ease; }
.article-body .btn:hover{ background:var(--ink-hover); transform:translateY(-2px); }
.article-body .btn .arrow{ transition:transform .18s ease; }
.article-body .btn:hover .arrow{ transform:translateX(3px); }
.article-body .btn-ghost{ display:inline-flex; align-items:center; gap:10px; background:transparent; color:var(--ink); border:1px solid rgba(39,38,34,.4); border-radius:var(--radius); padding:12px 22px; font-size:14px; font-weight:500; transition:border-color .18s ease,transform .18s ease; }
.article-body .btn-ghost:hover{ border-color:rgba(39,38,34,1); transform:translateY(-1px); }
.article-body .btn-text{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); font-size:14px; padding:6px 0; position:relative; }
.article-body .btn-text::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:.5px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.article-body .btn-text:hover::after{ transform:scaleX(1); }

/* —— Eyebrow / muted —— */
.article-body .lab-eyebrow{ font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); }
.article-body .lab-muted{ color:var(--ink-muted); }
.article-body .italic-serif{ font-family:var(--font-serif); font-style:italic; }
.article-body .tabular{ font-variant-numeric:tabular-nums; }

/* —— Generic spacing —— */
.article-body .lab-section{ padding: 64px 0; }
.article-body .section-lg{ padding: 96px 0; }
.article-body .section-sm{ padding: 40px 0; }
.article-body .lab-divider{ height:1px; background:rgba(39,38,34,.08); margin: 0; }
.article-body .spacer-4{ height:16px; }
.article-body .spacer-6{ height:32px; }
.article-body .spacer-8{ height:64px; }

/* —— Prose —— */
.article-body .prose{ font-size:17px; line-height:1.7; color:var(--ink); }
.article-body .prose p{ margin:0 0 1.2em; max-width:64ch; }
.article-body .prose p.lede{ font-family:var(--font-serif); font-size:24px; line-height:1.45; letter-spacing:-.005em; color:var(--ink); max-width:32ch; }
.article-body .prose a{ text-decoration:underline; text-decoration-color:rgba(39,38,34,.35); text-underline-offset:3px; }
.article-body .prose a:hover{ text-decoration-color:var(--ink); }
.article-body .prose h2{ font-family:var(--font-serif); font-weight:400; font-size:36px; line-height:1.1; letter-spacing:-.015em; margin:3.2em 0 .6em; }
.article-body .prose h3{ font-family:var(--font-serif); font-weight:400; font-size:24px; line-height:1.2; letter-spacing:-.01em; margin:2.4em 0 .5em; }
.article-body .prose h4{ font-family:var(--font-sans); font-size:13px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); margin:2em 0 .8em; }
.article-body .prose ul, .article-body .prose ol{ padding-left:1.2em; margin:0 0 1.4em; }
.article-body .prose ul li, .article-body .prose ol li{ margin: .35em 0; max-width:60ch; }
.article-body .prose ul{ list-style:none; padding-left:0; }
.article-body .prose ul > li{ position:relative; padding-left:24px; }
.article-body .prose ul > li::before{ content:"—"; position:absolute; left:0; top:0; color:var(--ink-muted); }
.article-body .prose blockquote{ font-family:var(--font-serif); font-size:28px; line-height:1.3; letter-spacing:-.01em; margin: 2em 0; padding-left:24px; border-left:1px solid rgba(39,38,34,.25); max-width:30ch; }
.article-body .prose strong{ font-weight:500; }
.article-body .prose em{ font-style:italic; }
.article-body .prose figure{ margin:2.4em 0; }
.article-body .prose figcaption{ font-size:13px; color:var(--ink-muted); margin-top:12px; text-align:left; max-width:48ch; }

/* —— Hairline —— */
.article-body .hairline{ border:0; border-top:1px solid rgba(39,38,34,.12); margin:0; }

/* —— Anchor numbering —— */
.article-body .section-number{ font-family:var(--font-sans); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); display:flex; align-items:center; gap:10px; }
.article-body .section-number::before{ content:""; display:inline-block; width:24px; height:.5px; background:rgba(39,38,34,.4); }

/* —— Cards (paper-soft) —— */
.article-body .card{ background:var(--paper-soft); border-radius:var(--radius); padding:32px; }
.article-body .card-tight{ background:var(--paper-soft); border-radius:var(--radius); padding:24px; }
.article-body .card-bordered{ background:transparent; border-radius:var(--radius); padding:32px; border:1px solid rgba(39,38,34,.12); }

/* —— Generic placeholder (diagonal hatch) —— */
.article-body .ph{ background:var(--paper-soft); border-radius:var(--radius); position:relative; overflow:hidden; aspect-ratio: 4/5; }
.article-body .ph::before{ content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(135deg, transparent 0 10px, rgba(188,185,175,.22) 10px 11px); }
.article-body .ph .ph-label{ position:absolute; left:14px; bottom:12px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em; color:var(--ink-muted); background:var(--paper-soft); padding:4px 8px; border-radius:6px; }
.article-body .ph[data-aspect="16/9"]{ aspect-ratio:16/9; }
.article-body .ph[data-aspect="3/2"]{ aspect-ratio:3/2; }
.article-body .ph[data-aspect="1/1"]{ aspect-ratio:1/1; }
.article-body .ph[data-aspect="5/4"]{ aspect-ratio:5/4; }

/* ————————————————————————————————————————————————————
   POST HEADER (hero)
   ———————————————————————————————————————————————————— */
.article-body .post-meta{ display:flex; gap:20px; align-items:center; font-size:13px; color:var(--ink-muted); flex-wrap:wrap; }
.article-body .post-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--ink-muted); display:inline-block; }
.article-body .post-title{ font-family:var(--font-serif); font-weight:400; font-size:clamp(48px,6.4vw,88px); line-height:1.02; letter-spacing:-.02em; margin:24px 0 32px; max-width:18ch; }
.article-body .post-deck{ font-family:var(--font-serif); font-size:24px; line-height:1.4; color:var(--ink-muted); max-width:42ch; margin:0; }
.article-body .byline{ display:flex; align-items:center; gap:14px; margin-top:48px; }
.article-body .avatar{ width:42px; height:42px; border-radius:50%; background:var(--paper-soft); border:.5px solid rgba(188,185,175,.7); display:inline-block; }
.article-body .byline .who{ font-size:14px; }
.article-body .byline .who small{ display:block; font-size:12px; color:var(--ink-muted); margin-top:2px; }

/* —— Reading bar (fixed at top) —— */
.article-body .read-progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:100; pointer-events:none; }
.article-body .read-progress .fill{ height:100%; background:var(--ink); width:0%; transition:width .1s linear; }

/* ————————————————————————————————————————————————————
   TABLE OF CONTENTS  (left-rail, sticky)
   ———————————————————————————————————————————————————— */
.article-body .toc{ font-size:13px; }
.article-body .toc h5{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); font-weight:500; margin:0 0 16px; }
.article-body .toc ol{ list-style:none; padding:0; margin:0; counter-reset:toc; }
.article-body .toc li{ counter-increment:toc; }
.article-body .toc a{ display:flex; gap:14px; padding:8px 0; color:var(--ink-muted); transition:color .18s ease; line-height:1.4; align-items:baseline; }
.article-body .toc a::before{ content:counter(toc, decimal-leading-zero); font-variant-numeric:tabular-nums; font-size:11px; color:var(--ink-muted); flex-shrink:0; opacity:.7; min-width:22px; }
.article-body .toc a:hover{ color:var(--ink); }
.article-body .toc a.is-active{ color:var(--ink); }
.article-body .toc a.is-active::before{ opacity:1; color:var(--ink); }

/* ————————————————————————————————————————————————————
   TLDR / CALLOUT BOXES
   ———————————————————————————————————————————————————— */
.article-body .tldr{ background:var(--paper-soft); border-radius:var(--radius); padding:32px 36px; display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:start; }
.article-body .tldr .tag{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); padding-top:6px; }
.article-body .tldr ul{ margin:0; padding:0; list-style:none; display:grid; gap:10px; font-size:15.5px; line-height:1.55; }
.article-body .tldr ul li{ position:relative; padding-left:22px; }
.article-body .tldr ul li::before{ content:"—"; position:absolute; left:0; top:0; color:var(--ink-muted); }

.article-body .tip{ background:var(--paper-soft); border-radius:var(--radius); padding:24px 28px; display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; }
.article-body .tip .glyph{ width:32px; height:32px; flex-shrink:0; }
.article-body .tip .glyph svg{ width:100%; height:100%; stroke:var(--ink); fill:none; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.article-body .tip h5{ margin-bottom:6px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); font-weight:500; }
.article-body .tip p{ margin:0; font-size:15px; color:var(--ink); }

/* —— Pull quote —— */
.article-body .pull-quote{ font-family:var(--font-serif); font-size:clamp(32px,3.6vw,52px); line-height:1.15; letter-spacing:-.015em; max-width:24ch; margin:64px auto; text-align:center; color:var(--ink); }
.article-body .pull-quote::before{ content:"\201C"; display:block; font-size:1em; line-height:0; margin-bottom:.4em; color:var(--ink-muted); }
.article-body .pull-quote cite{ display:block; font-family:var(--font-sans); font-style:normal; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); margin-top:32px; }

/* ————————————————————————————————————————————————————
   STAT BLOCKS
   ———————————————————————————————————————————————————— */
.article-body .stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border-top:1px solid rgba(39,38,34,.12); border-bottom:1px solid rgba(39,38,34,.12); }
.article-body .stats .stat{ padding:32px 24px; border-right:1px solid rgba(39,38,34,.12); }
.article-body .stats .stat:last-child{ border-right:0; }
.article-body .stats .stat .num{ font-family:var(--font-serif); font-size:56px; line-height:1; letter-spacing:-.02em; }
.article-body .stats .stat .num small{ font-size:.5em; color:var(--ink-muted); margin-left:4px; }
.article-body .stats .stat .label{ font-size:12px; color:var(--ink-muted); margin-top:12px; max-width:22ch; }
.article-body .stats.compact .stat{ padding:24px 20px; }
.article-body .stats.compact .stat .num{ font-size:42px; }
@media (max-width:720px){
  .article-body .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .article-body .stats .stat:nth-child(2){ border-right:0; }
  .article-body .stats .stat{ border-bottom:1px solid rgba(39,38,34,.12); }
}

.article-body .stat-highlight{ background:var(--paper-soft); border-radius:var(--radius); padding:48px; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.article-body .stat-highlight .num{ font-family:var(--font-serif); font-size:clamp(72px,9vw,140px); line-height:.9; letter-spacing:-.03em; }
.article-body .stat-highlight .num small{ font-size:.32em; color:var(--ink-muted); margin-left:8px; letter-spacing:0; }
.article-body .stat-highlight p{ font-family:var(--font-serif); font-size:22px; line-height:1.4; color:var(--ink-muted); max-width:30ch; }
@media (max-width:720px){ .article-body .stat-highlight{ grid-template-columns:minmax(0,1fr); padding:32px; } }

/* ————————————————————————————————————————————————————
   COMPARISON TABLE
   ———————————————————————————————————————————————————— */
.article-body .cmp-table{ width:100%; border-collapse:collapse; font-size:14px; }
.article-body .cmp-table th, .article-body .cmp-table td{ text-align:left; padding:18px 20px; border-bottom:1px solid rgba(39,38,34,.1); vertical-align:top; }
.article-body .cmp-table thead th{ font-weight:500; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); padding-bottom:14px; padding-top:0; }
.article-body .cmp-table thead th .device{ font-family:var(--font-serif); font-size:22px; letter-spacing:-.01em; text-transform:none; color:var(--ink); display:block; margin-bottom:4px; font-weight:400; }
.article-body .cmp-table tbody th{ font-weight:400; color:var(--ink-muted); width:30%; }
.article-body .cmp-table .yes{ display:inline-flex; align-items:center; gap:8px; }
.article-body .cmp-table .yes svg{ width:14px; height:14px; stroke:var(--ink); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.article-body .cmp-table .no{ color:var(--ink-muted); }
.article-body .cmp-table tr:hover td{ background:var(--paper-soft); }
.article-body .cmp-table .winner{ background:var(--paper-soft); border-radius:6px; padding:2px 8px; font-family:var(--font-serif); font-style:italic; font-size:13px; }

/* —— Side-by-side comparison —— */
.article-body .vs{ display:grid; grid-template-columns:1fr auto 1fr; gap:32px; align-items:start; padding:48px 0; }
.article-body .vs-side{ background:var(--paper-soft); border-radius:var(--radius); padding:32px; }
.article-body .vs-side h3{ font-family:var(--font-serif); font-weight:400; font-size:24px; line-height:1.2; margin:0 0 4px; }
.article-body .vs-side .price{ font-size:13px; color:var(--ink-muted); margin-bottom:24px; }
.article-body .vs-side .device-frame{ aspect-ratio:3/4; background:var(--paper); border-radius:8px; border:.5px solid rgba(188,185,175,.7); position:relative; overflow:hidden; margin-bottom:24px; }
.article-body .vs-side .device-frame::after{ content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(135deg, transparent 0 12px, rgba(188,185,175,.2) 12px 13px); }
.article-body .vs-side .device-label{ position:absolute; top:12px; left:12px; font-family:var(--font-mono); font-size:10px; letter-spacing:.04em; color:var(--ink-muted); }
.article-body .vs-side dl{ display:grid; grid-template-columns:1fr auto; gap:10px 16px; margin:0; font-size:13px; }
.article-body .vs-side dt{ color:var(--ink-muted); }
.article-body .vs-side dd{ margin:0; text-align:right; font-variant-numeric:tabular-nums; }
.article-body .vs .vs-mark{ font-family:var(--font-serif); font-size:32px; color:var(--ink-muted); padding-top:240px; font-style:italic; }
@media (max-width:760px){ .article-body .vs{ grid-template-columns:minmax(0,1fr); } .article-body .vs .vs-mark{ padding-top:0; text-align:center; } }

/* ————————————————————————————————————————————————————
   TABS
   ———————————————————————————————————————————————————— */
.article-body .tabs{ background:var(--paper-soft); border-radius:var(--radius); padding:8px; display:inline-flex; gap:4px; }
.article-body .tabs button{ padding:10px 18px; font-size:13px; color:var(--ink-muted); border-radius:8px; transition:background .18s ease,color .18s ease; }
.article-body .tabs button.is-active{ background:var(--paper); color:var(--ink); }
.article-body .tab-panel{ display:none; padding:32px 0; }
.article-body .tab-panel.is-active{ display:block; }

/* —— Specs key-value list —— */
.article-body .kv{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
.article-body .kv .row{ display:grid; grid-template-columns:1fr auto; padding:14px 0; border-bottom:1px solid rgba(39,38,34,.08); font-size:14px; gap:24px; }
.article-body .kv .row dt{ color:var(--ink-muted); }
.article-body .kv .row dd{ margin:0; font-variant-numeric:tabular-nums; text-align:right; }
@media (max-width:720px){ .article-body .kv{ grid-template-columns:minmax(0,1fr); } }

/* ————————————————————————————————————————————————————
   CITATION BOX
   ———————————————————————————————————————————————————— */
.article-body .cite{ background:var(--paper-soft); border-radius:var(--radius); padding:20px 24px; display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; font-size:14px; transition:transform .18s ease; }
.article-body .cite:hover{ transform:translateY(-2px); }
.article-body .cite .src-tag{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); padding:4px 8px; background:var(--paper); border-radius:6px; }
.article-body .cite .body .title{ display:block; }
.article-body .cite .body .url{ display:block; font-family:var(--font-mono); font-size:11px; color:var(--ink-muted); margin-top:4px; }
.article-body .cite .arrow{ width:16px; height:16px; stroke:var(--ink); fill:none; stroke-width:1.5; transition:transform .18s ease; }
.article-body .cite:hover .arrow{ transform:translate(2px,-2px); }

/* ————————————————————————————————————————————————————
   FAQ
   ———————————————————————————————————————————————————— */
.article-body .faq{ display:grid; gap:10px; }
.article-body .faq details{ background:var(--paper-soft); border-radius:var(--radius); padding:0; transition:background .18s ease; }
.article-body .faq summary{ list-style:none; cursor:pointer; padding:24px 28px; display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; font-family:var(--font-serif); font-size:22px; letter-spacing:-.005em; line-height:1.3; }
.article-body .faq summary::-webkit-details-marker{ display:none; }
.article-body .faq summary .pm{ width:18px; height:18px; position:relative; flex-shrink:0; }
.article-body .faq summary .pm::before, .article-body .faq summary .pm::after{ content:""; position:absolute; left:50%; top:50%; background:var(--ink); transition:transform .25s ease; }
.article-body .faq summary .pm::before{ width:14px; height:1px; transform:translate(-50%,-50%); }
.article-body .faq summary .pm::after{ width:1px; height:14px; transform:translate(-50%,-50%); }
.article-body .faq details[open] summary .pm::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.article-body .faq details[open] summary .pm::before{ transform:translate(-50%,-50%) rotate(45deg); }
.article-body .faq details[open] summary .pm{ transform:rotate(45deg); }
.article-body .faq .answer{ padding:0 28px 28px; font-size:15.5px; line-height:1.65; color:var(--ink-muted); max-width:60ch; }

/* —— People also ask (compact) —— */
.article-body .paa{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.article-body .paa a{ background:var(--paper-soft); border-radius:var(--radius); padding:20px 24px; display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center; transition:transform .18s ease; font-size:15px; line-height:1.4; }
.article-body .paa a:hover{ transform:translateY(-2px); }
.article-body .paa a svg{ width:14px; height:14px; stroke:var(--ink-muted); fill:none; stroke-width:1.5; transition:transform .18s ease; flex-shrink:0; }
.article-body .paa a:hover svg{ transform:translate(2px,-2px); stroke:var(--ink); }
@media (max-width:720px){ .article-body .paa{ grid-template-columns:minmax(0,1fr); } }

/* ————————————————————————————————————————————————————
   PRICING TIERS
   ———————————————————————————————————————————————————— */
.article-body .pricing{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.article-body .tier{ background:var(--paper-soft); border-radius:var(--radius); padding:36px 32px; display:flex; flex-direction:column; }
.article-body .tier.featured{ background:var(--ink); color:var(--paper-soft); }
.article-body .tier .name{ font-family:var(--font-serif); font-size:28px; line-height:1.1; }
.article-body .tier .price{ font-family:var(--font-serif); font-size:56px; line-height:1; letter-spacing:-.02em; margin:24px 0 4px; }
.article-body .tier .price small{ font-size:.3em; color:var(--ink-muted); margin-left:6px; }
.article-body .tier.featured .price small{ color:rgba(247,246,242,.6); }
.article-body .tier .blurb{ font-size:14px; color:var(--ink-muted); margin:0 0 24px; line-height:1.5; }
.article-body .tier.featured .blurb{ color:rgba(247,246,242,.7); }
.article-body .tier ul{ list-style:none; padding:0; margin:0 0 32px; display:grid; gap:10px; font-size:14px; }
.article-body .tier ul li{ display:flex; gap:10px; align-items:start; line-height:1.4; }
.article-body .tier ul li svg{ width:14px; height:14px; flex-shrink:0; margin-top:4px; stroke:currentColor; fill:none; stroke-width:1.5; opacity:.6; }
.article-body .tier .cta{ margin-top:auto; }
.article-body .tier.featured .btn{ background:var(--paper-soft); color:var(--ink); width:100%; justify-content:center; }
.article-body .tier .btn-ghost{ width:100%; justify-content:center; }
@media (max-width:760px){ .article-body .pricing{ grid-template-columns:minmax(0,1fr); } }

/* ————————————————————————————————————————————————————
   CHARTS
   ———————————————————————————————————————————————————— */
.article-body .chart{ background:var(--paper-soft); border-radius:var(--radius); padding:36px 32px; }
.article-body .chart-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:32px; gap:24px; }
.article-body .chart-head h4{ font-family:var(--font-serif); font-weight:400; font-size:24px; letter-spacing:-.01em; margin:0; line-height:1.2; }
.article-body .chart-head .legend{ display:flex; gap:20px; font-size:12px; color:var(--ink-muted); }
.article-body .chart-head .legend span{ display:inline-flex; align-items:center; gap:8px; }
.article-body .chart-head .legend i{ width:12px; height:2px; display:inline-block; }
.article-body .legend .a{ background:var(--ink); }
.article-body .legend .b{ background:var(--rule); }

/* —— Bar chart —— */
.article-body .bars{ display:grid; gap:18px; }
.article-body .bars .bar-row{ display:grid; grid-template-columns:140px 1fr 60px; gap:20px; align-items:center; font-size:13px; }
.article-body .bars .bar-row .label{ color:var(--ink-muted); }
.article-body .bars .bar-row .track{ height:6px; background:rgba(39,38,34,.08); border-radius:3px; position:relative; overflow:hidden; }
.article-body .bars .bar-row .fill{ position:absolute; left:0; top:0; bottom:0; background:var(--ink); border-radius:3px; }
.article-body .bars .bar-row .val{ font-variant-numeric:tabular-nums; text-align:right; }

/* —— Line chart (svg) —— */
.article-body .line-chart svg{ width:100%; height:auto; display:block; }
.article-body .line-chart .axis{ stroke:rgba(39,38,34,.15); stroke-width:.5; }
.article-body .line-chart .grid-x{ stroke:rgba(39,38,34,.06); stroke-width:.5; }
.article-body .line-chart .line-a{ stroke:var(--ink); stroke-width:1.2; fill:none; }
.article-body .line-chart .line-b{ stroke:var(--rule); stroke-width:1; fill:none; stroke-dasharray:4 3; }
.article-body .line-chart .dot{ fill:var(--ink); }
.article-body .line-chart .label-x, .article-body .line-chart .label-y{ font-family:var(--font-sans); font-size:10px; fill:var(--ink-muted); }

/* —— Heatmap —— */
.article-body .heatmap{ display:grid; grid-template-columns:80px 1fr; gap:12px; align-items:start; }
.article-body .heatmap .ylabels{ display:grid; gap:4px; font-size:11px; color:var(--ink-muted); padding-top:24px; }
.article-body .heatmap .cells{ display:grid; gap:4px; }
.article-body .heatmap .row{ display:grid; grid-template-columns:repeat(24,minmax(0,1fr)); gap:4px; }
.article-body .heatmap .cell{ aspect-ratio:1; background:rgba(39,38,34,0); border-radius:2px; transition:transform .18s ease; }
.article-body .heatmap .cell:hover{ transform:scale(1.4); }
.article-body .heatmap .xlabels{ display:grid; grid-template-columns:repeat(24,minmax(0,1fr)); gap:4px; font-size:10px; color:var(--ink-muted); margin-top:8px; padding-left:92px; font-family:var(--font-mono); }
.article-body .heatmap .xlabels span{ text-align:center; }

/* —— Donut —— */
.article-body .donut{ display:grid; grid-template-columns:auto 1fr; gap:36px; align-items:center; }
.article-body .donut svg{ width:180px; height:180px; }
.article-body .donut .legend{ display:grid; gap:12px; font-size:13px; }
.article-body .donut .legend .item{ display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding-bottom:8px; border-bottom:1px solid rgba(39,38,34,.08); }
.article-body .donut .legend i{ width:10px; height:10px; border-radius:2px; }
.article-body .donut .legend .pct{ font-variant-numeric:tabular-nums; color:var(--ink-muted); }

/* —— Score gauge —— */
.article-body .gauge{ display:grid; gap:14px; }
.article-body .gauge-row{ display:grid; grid-template-columns:140px 1fr 32px; gap:20px; align-items:center; font-size:13px; }
.article-body .gauge-row .label{ color:var(--ink-muted); }
.article-body .gauge-row .pips{ display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:3px; }
.article-body .gauge-row .pip{ height:10px; background:rgba(39,38,34,.08); border-radius:1px; }
.article-body .gauge-row .pip.on{ background:var(--ink); }
.article-body .gauge-row .num{ font-variant-numeric:tabular-nums; text-align:right; }

/* ————————————————————————————————————————————————————
   PROS / CONS / WORTH IT
   ———————————————————————————————————————————————————— */
.article-body .pc{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.article-body .pc .col{ background:var(--paper-soft); border-radius:var(--radius); padding:32px; }
.article-body .pc h5{ margin-bottom:18px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); font-weight:500; }
.article-body .pc ul{ list-style:none; padding:0; margin:0; display:grid; gap:14px; font-size:15px; }
.article-body .pc ul li{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; line-height:1.5; }
.article-body .pc ul li svg{ width:14px; height:14px; margin-top:5px; stroke:var(--ink); fill:none; stroke-width:1.5; flex-shrink:0; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:720px){ .article-body .pc{ grid-template-columns:minmax(0,1fr); } }

.article-body .verdict{ background:var(--ink); color:var(--paper-soft); border-radius:var(--radius); padding:48px; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.article-body .verdict .badge{ font-family:var(--font-serif); font-style:italic; font-size:88px; letter-spacing:-.02em; line-height:.95; }
.article-body .verdict .badge small{ display:block; font-family:var(--font-sans); font-style:normal; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(247,246,242,.6); margin-bottom:14px; }
.article-body .verdict h3{ font-family:var(--font-serif); font-weight:400; font-size:28px; line-height:1.25; margin:0 0 12px; }
.article-body .verdict p{ color:rgba(247,246,242,.75); font-size:15px; line-height:1.6; margin:0 0 24px; max-width:38ch; }
.article-body .verdict .score{ display:flex; gap:24px; padding-top:24px; border-top:.5px solid rgba(247,246,242,.15); margin-top:24px; flex-wrap:wrap; }
.article-body .verdict .score div{ font-size:12px; color:rgba(247,246,242,.6); }
.article-body .verdict .score div strong{ display:block; color:var(--paper-soft); font-family:var(--font-serif); font-style:italic; font-size:24px; font-weight:400; margin-top:4px; }
@media (max-width:720px){ .article-body .verdict{ grid-template-columns:minmax(0,1fr); padding:32px; } .article-body .verdict .badge{ font-size:64px; } }

/* ————————————————————————————————————————————————————
   MAP + REGION CARDS
   ———————————————————————————————————————————————————— */
.article-body .map{ background:var(--paper-soft); border-radius:var(--radius); padding:32px; position:relative; aspect-ratio:16/9; overflow:hidden; }
.article-body .map svg{ width:100%; height:100%; }
.article-body .map .pin{ position:absolute; transform:translate(-50%,-100%); }
.article-body .map .pin .dot{ width:10px; height:10px; background:var(--ink); border-radius:50%; margin:0 auto; }
.article-body .map .pin .stem{ width:.5px; height:18px; background:var(--ink); margin:0 auto; }
.article-body .map .pin .lab{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em; color:var(--ink); padding:4px 8px; background:var(--paper); border-radius:4px; white-space:nowrap; transform:translateY(-26px); }

/* ————————————————————————————————————————————————————
   GALLERY / IMAGE LAYOUTS
   ———————————————————————————————————————————————————— */
.article-body .gallery-2{ display:grid; grid-template-columns:1.4fr 1fr; gap:16px; }
.article-body .gallery-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.article-body .gallery-bento{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(2,200px); gap:12px; }
.article-body .gallery-bento > :nth-child(1){ grid-column:span 2; grid-row:span 2; }
.article-body .gallery-bento > :nth-child(4){ grid-column:span 2; }
.article-body .gallery-bento .ph{ aspect-ratio:auto; height:100%; }
@media (max-width:720px){
  .article-body .gallery-2,
  .article-body .gallery-3{ grid-template-columns:minmax(0,1fr); }
  .article-body .gallery-bento{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(3,160px); }
  .article-body .gallery-bento > :nth-child(1){ grid-column:span 2; grid-row:span 1; }
  .article-body .gallery-bento > :nth-child(4){ grid-column:span 1; }
}

/* —— Step-by-step / numbered method —— */
.article-body .steps{ display:grid; gap:0; }
.article-body .steps .step{ display:grid; grid-template-columns:80px 1fr; gap:32px; padding:28px 0; border-top:1px solid rgba(39,38,34,.1); align-items:start; }
.article-body .steps .step:last-child{ border-bottom:1px solid rgba(39,38,34,.1); }
.article-body .steps .step .n{ font-family:var(--font-serif); font-style:italic; font-size:36px; line-height:1; color:var(--ink-muted); }
.article-body .steps .step h4{ font-family:var(--font-serif); font-weight:400; font-size:24px; line-height:1.2; margin:0 0 8px; letter-spacing:-.005em; text-transform:none; color:var(--ink); }
.article-body .steps .step p{ margin:0; font-size:15px; color:var(--ink-muted); line-height:1.6; max-width:55ch; }

/* —— Glossary —— */
.article-body .glossary{ display:grid; grid-template-columns:1fr 1fr; gap:0 48px; }
.article-body .glossary dt{ font-family:var(--font-serif); font-size:18px; padding-top:18px; }
.article-body .glossary dd{ margin:6px 0 18px; font-size:14px; color:var(--ink-muted); line-height:1.55; padding-bottom:18px; border-bottom:1px solid rgba(39,38,34,.08); }
@media (max-width:720px){ .article-body .glossary{ grid-template-columns:minmax(0,1fr); gap:0; } }

/* —— Timeline —— */
.article-body .timeline{ display:grid; gap:0; }
.article-body .tl-row{ display:grid; grid-template-columns:120px 1fr; gap:32px; padding:24px 0; border-top:1px solid rgba(39,38,34,.1); }
.article-body .tl-row:last-child{ border-bottom:1px solid rgba(39,38,34,.1); }
.article-body .tl-row .when{ font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--ink-muted); padding-top:4px; }
.article-body .tl-row h5{ font-family:var(--font-serif); font-size:20px; letter-spacing:-.005em; text-transform:none; color:var(--ink); font-weight:400; margin:0 0 4px; }
.article-body .tl-row p{ margin:0; font-size:14px; color:var(--ink-muted); max-width:50ch; line-height:1.5; }

/* —— Reviews —— */
.article-body .reviews{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.article-body .review{ background:var(--paper-soft); border-radius:var(--radius); padding:28px; display:flex; flex-direction:column; gap:16px; }
.article-body .review .quote{ font-family:var(--font-serif); font-size:17px; line-height:1.45; }
.article-body .review .who{ display:flex; align-items:center; gap:12px; padding-top:16px; border-top:.5px solid rgba(39,38,34,.1); }
.article-body .review .who .av{ width:32px; height:32px; border-radius:50%; background:var(--paper); border:.5px solid rgba(188,185,175,.7); }
.article-body .review .who .n{ font-size:13px; }
.article-body .review .who small{ display:block; font-size:11px; color:var(--ink-muted); margin-top:2px; }
.article-body .review .stars{ display:flex; gap:3px; }
.article-body .review .stars svg{ width:12px; height:12px; stroke:var(--ink); fill:var(--ink); stroke-width:1; }
@media (max-width:760px){ .article-body .reviews{ grid-template-columns:minmax(0,1fr); } }

/* —— Newsletter mid-post —— */
.article-body .nl{ background:var(--ink); color:var(--paper-soft); border-radius:var(--radius); padding:48px; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.article-body .nl h3{ font-family:var(--font-serif); font-weight:400; font-size:32px; line-height:1.15; letter-spacing:-.01em; margin:0; max-width:18ch; }
.article-body .nl p{ color:rgba(247,246,242,.7); font-size:14px; margin:8px 0 0; }
.article-body .nl form{ display:flex; gap:8px; padding:6px; background:rgba(247,246,242,.08); border-radius:14px; }
.article-body .nl input{ flex:1; background:none; border:0; color:var(--paper-soft); font:inherit; padding:10px 14px; font-size:14px; outline:none; }
.article-body .nl input::placeholder{ color:rgba(247,246,242,.5); }
.article-body .nl button{ background:var(--paper-soft); color:var(--ink); padding:11px 20px; border-radius:10px; font-size:13px; font-weight:500; }
@media (max-width:720px){ .article-body .nl{ grid-template-columns:minmax(0,1fr); padding:32px; } }

/* —— Compatibility chips —— */
.article-body .chips{ display:flex; flex-wrap:wrap; gap:8px; }
.article-body .chip{ background:var(--paper-soft); padding:8px 14px; border-radius:20px; font-size:13px; color:var(--ink); display:inline-flex; gap:8px; align-items:center; }
.article-body .chip.off{ color:var(--ink-muted); text-decoration:line-through; opacity:.5; }
.article-body .chip svg{ width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:1.5; }

/* —— Code/spec block —— */
.article-body .spec-card{ background:var(--paper-soft); border-radius:var(--radius); padding:0; overflow:hidden; }
.article-body .spec-card header{ display:grid; grid-template-columns:1fr auto; padding:20px 28px; border-bottom:1px solid rgba(39,38,34,.08); align-items:center; }
.article-body .spec-card header h5{ text-transform:none; font-family:var(--font-serif); font-size:18px; color:var(--ink); letter-spacing:0; font-weight:400; margin:0; }
.article-body .spec-card header .meta{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-muted); letter-spacing:.04em; }
.article-body .spec-card .body{ padding:24px 28px; }

/* —— Calculator-style ROI —— */
.article-body .calc{ display:grid; grid-template-columns:1.2fr 1fr; gap:32px; background:var(--paper-soft); border-radius:var(--radius); padding:36px; align-items:center; }
.article-body .calc .controls{ display:grid; gap:18px; }
.article-body .calc .field{ display:grid; gap:6px; }
.article-body .calc .field label{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.article-body .calc .field input[type=range]{ -webkit-appearance:none; appearance:none; height:2px; background:rgba(39,38,34,.15); border-radius:2px; outline:none; width:100%; }
.article-body .calc .field input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius:50%; background:var(--ink); cursor:pointer; }
.article-body .calc .field input[type=range]::-moz-range-thumb{ width:14px; height:14px; border-radius:50%; background:var(--ink); cursor:pointer; border:0; }
.article-body .calc .field .v{ font-variant-numeric:tabular-nums; font-size:13px; color:var(--ink); letter-spacing:0; text-transform:none; font-weight:500; }
.article-body .calc .out{ background:var(--paper); border-radius:8px; padding:28px; text-align:center; }
.article-body .calc .out .num{ font-family:var(--font-serif); font-size:64px; line-height:1; letter-spacing:-.02em; }
.article-body .calc .out .lab{ font-size:12px; color:var(--ink-muted); margin-top:10px; max-width:30ch; margin-left:auto; margin-right:auto; }
@media (max-width:760px){ .article-body .calc{ grid-template-columns:minmax(0,1fr); padding:28px; } }

/* ————————————————————————————————————————————————————
   FOOTNOTES + SOURCES
   ———————————————————————————————————————————————————— */
.article-body .fnotes{ font-size:13px; color:var(--ink-muted); display:grid; gap:10px; counter-reset:fn; }
.article-body .fnotes .fn{ display:grid; grid-template-columns:32px 1fr; gap:12px; line-height:1.55; counter-increment:fn; padding:6px 0; border-top:1px solid rgba(39,38,34,.08); }
.article-body .fnotes .fn::before{ content:counter(fn); font-family:var(--font-mono); font-size:11px; color:var(--ink-muted); }
.article-body .fnotes .fn:first-child{ border-top:0; }

/* —— Author / share footer —— */
.article-body .share{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.article-body .share .icon-btn{ background:var(--paper-soft); width:38px; height:38px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; color:var(--ink); }
.article-body .share .icon-btn svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

.article-body .author-bio{ background:var(--paper-soft); border-radius:var(--radius); padding:36px; display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center; }
.article-body .author-bio .avatar{ width:64px; height:64px; }
.article-body .author-bio h4{ font-family:var(--font-serif); font-size:22px; letter-spacing:-.005em; text-transform:none; color:var(--ink); font-weight:400; margin:0 0 4px; }
.article-body .author-bio p{ font-size:14px; color:var(--ink-muted); margin:6px 0 0; line-height:1.55; max-width:60ch; }

/* —— Related posts —— */
.article-body .related{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.article-body .related article .ph{ aspect-ratio:5/4; }
.article-body .related article h3{ font-family:var(--font-serif); font-size:22px; line-height:1.25; letter-spacing:-.005em; margin:18px 0 6px; max-width:18ch; font-weight:400; }
.article-body .related article .meta{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); }
@media (max-width:760px){ .article-body .related{ grid-template-columns:minmax(0,1fr); } }

/* ————————————————————————————————————————————————————
   ARTICLE LAYOUT (rail + body)
   ———————————————————————————————————————————————————— */
.article-body .article-grid{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:64px; max-width:1240px; margin:0 auto; padding:0 var(--wrap-pad, 48px); }
.article-body .article-grid > .rail{ position:sticky; top:96px; align-self:start; padding-top:8px; max-height:calc(100vh - 120px); overflow:auto; padding-bottom:48px; }
.article-body .article-grid > .body{ min-width:0; }
@media (max-width:980px){
  .article-body .article-grid{ grid-template-columns:minmax(0,1fr); gap:32px; padding:0 var(--wrap-pad-sm, 24px); }
  .article-body .article-grid > .rail{ position:static; max-height:none; }
}

/* —— Section anchor —— */
.article-body .anchor{ scroll-margin-top:96px; }

/* —— Decorative hairline blocks (intersticials) —— */
.article-body .interstitial{ display:flex; align-items:center; justify-content:center; gap:24px; padding:64px 0; color:var(--ink-muted); font-family:var(--font-serif); font-style:italic; font-size:18px; }
.article-body .interstitial::before, .article-body .interstitial::after{ content:""; flex:1; max-width:80px; height:.5px; background:rgba(39,38,34,.3); }

/* —— Annotated diagram —— */
.article-body .diagram{ background:var(--paper-soft); border-radius:var(--radius); padding:48px; aspect-ratio:16/10; position:relative; overflow:hidden; }
.article-body .diagram svg{ width:100%; height:100%; }

/* misc utilities */
.article-body .center { text-align:center; }
.article-body .row-2col { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.article-body .row-3col { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
@media (max-width:760px){
  .article-body .row-2col,
  .article-body .row-3col{ grid-template-columns:minmax(0,1fr); }
}

/* —— Highlighted inline stat —— */
.article-body .inline-stat{ display:inline-flex; align-items:baseline; gap:6px; background:var(--paper-soft); padding:2px 10px; border-radius:6px; font-family:var(--font-serif); font-size:1.1em; }

/* —— Aside box —— */
.article-body .aside-box{ background:var(--paper-soft); border-radius:var(--radius); padding:24px 28px; font-size:14.5px; line-height:1.65; color:var(--ink); margin:2em 0; max-width:none; }
.article-body .aside-box h6{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); margin:0 0 8px; font-weight:500; }

/* —— Battery / icon comparison rows —— */
.article-body .icon-row{ display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; padding:14px 0; border-bottom:1px solid rgba(39,38,34,.08); font-size:14px; }
.article-body .icon-row svg{ width:22px; height:22px; stroke:var(--ink); fill:none; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.article-body .icon-row .v{ font-variant-numeric:tabular-nums; color:var(--ink-muted); }

/* —— Bookmark / save tag —— */
.article-body .tag-row{ display:flex; flex-wrap:wrap; gap:8px; padding:24px 0; border-top:1px solid rgba(39,38,34,.08); border-bottom:1px solid rgba(39,38,34,.08); margin-top:48px; }
.article-body .tag-row .tag{ font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--ink-muted); padding:6px 12px; background:var(--paper-soft); border-radius:6px; }
.article-body .tag-row .tag::before{ content:"# "; opacity:.5; }

/* —— Lab notice strip (page-specific) —— */
.article-body .lab-notice{ background:var(--paper-soft); border-radius:var(--radius); border:1px dashed rgba(39,38,34,.2); padding:18px 24px; margin:32px auto; max-width:760px; font-size:13px; color:var(--ink-muted); display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; }
.article-body .lab-notice strong{ color:var(--ink); font-weight:500; }
.article-body .lab-notice .lab-tag{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em; padding:4px 8px; background:var(--paper); border-radius:6px; text-transform:uppercase; }