/* Article template (redesign phase 3, Nov 2026). Load after pages.css + redesign.css.
   Markup comes from tools/article-upgrade.js. */
html { overflow-x:hidden; } body { overflow-x:clip; } /* no sideways wobble */

.article.ax { max-width:1180px; padding:20px 16px 0; }
.ax-head, .ax-grid { max-width:calc(220px + 56px + 46rem); margin-inline:auto; }

/* reading bar */
.ax-progress { position:fixed; inset:0 0 auto 0; height:3px; z-index:60; pointer-events:none; }
.ax-progress i { display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transform-origin:0 50%; transform:scaleX(var(--read,0)); }

/* header band */
.ax-head { padding:8px 0 8px; }
.ax-head .crumbs { margin-bottom:22px; }
.article.ax h1 { font-size:clamp(34px,5vw,56px); font-weight:800; line-height:1.06; letter-spacing:-.03em; margin:12px 0 18px; max-width:20em; }
.article.ax .lede { font-size:clamp(18px,2vw,21px); line-height:1.5; color:var(--soft); max-width:38em; margin:0 0 22px; }
.ax-by { display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin:0 0 30px !important; }
.ax-av { width:34px; height:34px; border-radius:50%; background:var(--accent); color:var(--on-text); display:grid; place-items:center; font:800 15px var(--sans); flex:none; }
.ax-who { color:var(--muted); }
.ax-chip { border:1px solid var(--line-2); border-radius:999px; padding:4px 12px; font:600 12.5px var(--sans); color:var(--soft); white-space:nowrap; }
.article.ax .ax-head .hero { margin:0 0 8px; }
.article.ax .ax-head .hero img { border-radius:24px; aspect-ratio:21/9; }
@media (max-width:720px) { .article.ax .ax-head .hero img { aspect-ratio:16/9; border-radius:18px; } }

/* body + contents rail */
.ax-grid { display:grid; grid-template-columns:220px minmax(0,46rem); gap:56px; align-items:start; margin-top:28px; }
.ax-grid:not(:has(.ax-toc)) { grid-template-columns:minmax(0,46rem); justify-content:center; }
.ax-body { min-width:0; font-size:17.5px; line-height:1.7; }
.ax-body > :first-child { margin-top:0; }
.article.ax h2 { font-size:clamp(24px,2.6vw,30px); font-weight:800; line-height:1.15; letter-spacing:-.02em; margin:56px 0 12px; scroll-margin-top:24px; }
.article.ax h3 { font-size:19px; margin:32px 0 6px; }
.ax-toc { position:sticky; top:28px; font-size:14px; }
.ax-toc summary { list-style:none; cursor:pointer; font:700 12px/1.4 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.ax-toc summary::-webkit-details-marker { display:none; }
.ax-toc summary span { display:none; }
.ax-toc ol { list-style:none; margin:0; padding:0; border-left:2px solid var(--line); }
.ax-toc li + li { margin-top:0; }
.ax-toc a { display:block; padding:7px 0 7px 16px; margin-left:-2px; border-left:2px solid transparent; color:var(--muted); text-decoration:none; line-height:1.35; }
.ax-toc a:hover { color:var(--text); }
.ax-toc a.on { color:var(--text); border-left-color:var(--accent); font-weight:600; }
@media (max-width:1060px) {
  .ax-grid { grid-template-columns:minmax(0,46rem); justify-content:center; gap:0; margin-top:20px; }
  .ax-toc { position:static; margin:0 0 28px; }
  .ax-toc details { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:14px 18px; }
  .ax-toc summary { margin:0; display:flex; align-items:center; gap:10px; }
  .ax-toc summary span { display:inline; margin-left:auto; color:var(--muted); font-weight:600; letter-spacing:0; text-transform:none; font-size:13px; }
  .ax-toc summary::after { content:"+"; color:var(--accent); font-size:20px; line-height:1; }
  .ax-toc details[open] summary::after { content:"–"; }
  .ax-toc details[open] ol { margin-top:12px; }
}

/* "In 10 seconds" as cards */
.ax .tldr { background:none; border:0; padding:0; margin:0 0 36px; }
.ax .tldr ul { grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
.ax .tldr li { margin:0; padding:44px 16px 16px; border-radius:18px; background:linear-gradient(160deg,rgba(232,185,49,.14),rgba(90,212,238,.05)); border:1px solid rgba(232,185,49,.32); font-size:15.5px; line-height:1.45; }
.ax .tldr li::before { left:16px; top:14px; width:22px; height:22px; font-size:12px; line-height:22px; }

/* figures + photos */
.article.ax .fig img, .article.ax .photo-row img { border-radius:18px; }

/* tables: rounded card, zebra rows, scroll shadow on small screens */
.ax .table-wrap { border-radius:18px; border-color:var(--line-2);
  background:linear-gradient(90deg,var(--bg),var(--bg)) left/24px 100% no-repeat local, linear-gradient(270deg,var(--bg),var(--bg)) right/24px 100% no-repeat local,
             radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.55),transparent) left/12px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.55),transparent) right/12px 100% no-repeat scroll; }
.ax .table-wrap table { font-size:15px; }
.ax .table-wrap thead th { background:var(--surface-2); font:700 12px/1.3 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--soft); }
.ax .table-wrap tbody tr:nth-child(even) td { background:rgba(255,255,255,.025); }
.ax .table-wrap td, .ax .table-wrap th { padding:12px 14px; }

/* callouts with icon */
.ax .callout { display:flex; gap:14px; align-items:flex-start; border:1px solid var(--line-2); border-radius:16px; padding:16px 18px; background:var(--surface); font-size:15.5px; line-height:1.55; }
.ax .callout > div { min-width:0; }
.ax .callout > div > p + p { margin-top:8px; }
.ax-ic { flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:rgba(255,255,255,.06); color:var(--soft); }
.ax-ic svg { width:19px; height:19px; }
.ax .callout.ax-warn { border-color:rgba(244,183,64,.45); background:rgba(244,183,64,.07); } .ax-warn .ax-ic { background:rgba(244,183,64,.16); color:var(--warn); }
.ax .callout.ax-tip { border-color:rgba(90,212,238,.38); background:rgba(90,212,238,.06); } .ax-tip .ax-ic { background:rgba(90,212,238,.15); color:var(--inner); }
.ax .callout.ax-news { border-color:rgba(232,185,49,.45); background:rgba(232,185,49,.08); } .ax-news .ax-ic { background:var(--accent); color:var(--on-text); }
.ax .callout.ax-aff { background:transparent; font-size:14px; color:var(--muted); } .ax-aff p { color:var(--muted) !important; }
.ax .callout.ax-info .ax-ic { color:var(--accent); }
.ax .shop-note { border-radius:18px; }
.ax .disclaimer { border-radius:16px; }

/* FAQ cards */
.ax .faq { display:grid; gap:10px; margin-top:18px; }
.ax .faq details { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px 20px; }
.ax .faq summary { font-size:16.5px; }
.ax .faq summary::after { color:var(--accent); font-weight:700; }
.ax .faq details p { color:var(--soft); font-size:15.5px; }

/* end band: tool + keep reading */
.ax-end { margin-top:72px; }
.ax-end-in { max-width:1080px; margin:0 auto; padding:0 40px; }
.ax-cta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 32px; background:var(--bg); border-radius:24px; padding:30px 34px; color:var(--text); }
.ax-cta > div { max-width:34rem; }
.ax-cta .hx-eb { color:var(--accent) !important; }
.ax-cta strong { display:block; font-size:clamp(22px,2.6vw,28px); font-weight:800; line-height:1.15; letter-spacing:-.02em; margin:6px 0 6px; color:var(--text); }
.ax-cta p { margin:0; color:var(--soft); font-size:16px; }
.ax-cta .hx-btn { flex:none; }
.ax-relhead { margin:56px 0 22px; }
.ax-rels { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ax-rel { display:flex; flex-direction:column; background:#fff; border-radius:20px; overflow:hidden; text-decoration:none; color:var(--ink-dark) !important; box-shadow:0 18px 36px -24px rgba(59,42,20,.5); transition:transform .15s; }
.ax-rel:hover { transform:translateY(-3px); }
.ax-rel .ph { display:block; aspect-ratio:480/252; background:var(--bg); overflow:hidden; }
.ax-rel .ph img { display:block; width:100%; height:100%; object-fit:cover; }
.ax-noimg { display:grid; place-items:center; height:100%; background:radial-gradient(circle at 30% 20%,rgba(232,185,49,.35),transparent 60%),var(--bg); color:var(--accent); font:800 15px var(--sans); letter-spacing:.04em; }
.ax-rel strong { display:block; padding:16px 18px 6px; font-size:17px; line-height:1.3; }
.ax-rel .go { margin-top:auto; padding:0 18px 16px; font:700 14px var(--sans); color:var(--red); }
@media (max-width:860px) { .ax-rels { grid-template-columns:1fr; } .ax-rel { flex-direction:row; align-items:center; } .ax-rel .ph { width:38%; flex:none; align-self:stretch; aspect-ratio:auto; } .ax-rel strong { padding:12px 14px 4px; font-size:15.5px; } .ax-rel .go { display:none; } }
@media (max-width:560px) { .ax-end-in { padding:0 18px; } .ax-cta { padding:24px 22px; } .ax-cta .hx-btn { width:100%; justify-content:center; } .ax-body { font-size:17px; } .article.ax h2 { margin-top:44px; } }
@media (prefers-reduced-motion:reduce) { .ax-rel { transition:none; } }
.article.ax .ax-end .hx-h2 { color:var(--ink-dark); margin:8px 0 0; }
.article.ax .ax-rel strong { color:var(--ink-dark); }