/* Aitonomy blog — CONTENT styles only. The site chrome (tokens, fonts, nav,
   footer, buttons, .eyebrow, .lead, light/dark) is inherited verbatim from the
   hand-authored pages via the shell in templates/base.html, so the blog is
   visually identical to the rest of the site. This file only styles the blog's
   own content regions (post list, article prose, share, footnotes). All colours
   use the inherited design tokens. */

/* ── Layout ── */
.blogmain{padding:60px 0 96px}
.blogwrap{max-width:760px;margin:0 auto;padding:0 24px}

/* ── List / article shared display type ── */
.blogwrap h1{font-family:var(--serif);font-weight:600;letter-spacing:-.022em;line-height:1.12;color:var(--fg)}
.blog-head{margin-bottom:44px}
.blog-head h1{font-size:clamp(38px,6vw,60px);margin:0 0 18px}
.blog-head .lead{margin-top:0}

/* ── Post list ── */
.post-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.post-card{border:1px solid var(--line);border-radius:var(--r-card,18px);background:var(--panel,var(--bg-2));transition:border-color .18s,box-shadow .18s,transform .18s}
.post-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow);transform:translateY(-2px)}
.post-card-link{display:block;padding:26px 28px}
.post-meta{font-family:var(--mono);font-size:12.5px;color:var(--fg-muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.post-meta .dot{opacity:.5}
.post-card-title{font-family:var(--serif);font-weight:600;letter-spacing:-.02em;font-size:26px;line-height:1.2;margin:12px 0 8px;color:var(--fg)}
.post-card-desc{color:var(--fg-soft);margin:0 0 14px;font-size:16px;line-height:1.55}
.read-more{font-size:14px;font-weight:500;color:var(--accent)}
.read-more .arr,.arr{display:inline-block;transition:transform .15s}
.post-card:hover .read-more .arr{transform:translateX(3px)}
.empty{color:var(--fg-muted);font-style:italic}

/* ── Tags (btag = blog tag, avoids collision with site .tag) ── */
.tag-row{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}
.btag{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--fg-soft);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-chip,8px);padding:4px 9px;text-decoration:none}
a.btag:hover{border-color:var(--accent);color:var(--accent)}
.tag-cloud{display:flex;flex-wrap:wrap;gap:10px}
.tag-count{opacity:.55}

/* ── Article ── */
.crumbs{font-family:var(--mono);font-size:12.5px;color:var(--fg-muted);margin-bottom:26px}
.crumbs a{color:var(--fg-muted)}
.crumbs a:hover{color:var(--accent)}
.crumbs .arr{margin:0 6px;opacity:.5}
.post-header{margin-bottom:40px}
.post-header h1{font-size:clamp(32px,5.4vw,50px);margin:14px 0 18px}

.prose{font-size:18px;line-height:1.72;color:var(--fg)}
.prose > *:first-child{margin-top:0}
.prose p{margin:0 0 1.35em}
.prose h2{font-family:var(--serif);font-weight:600;letter-spacing:-.02em;font-size:28px;line-height:1.2;margin:2em 0 .6em;color:var(--fg)}
.prose h3{font-family:var(--serif);font-weight:600;letter-spacing:-.02em;font-size:22px;margin:1.7em 0 .5em;color:var(--fg)}
.prose a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.prose a:hover{text-decoration-color:var(--accent)}
.prose strong{font-weight:600;color:var(--fg)}
.prose ul,.prose ol{margin:0 0 1.35em;padding-left:1.3em}
.prose li{margin:.4em 0}
.prose li::marker{color:var(--accent)}
.prose blockquote{margin:1.6em 0;padding:6px 0 6px 22px;border-left:3px solid var(--accent);font-family:var(--serif);font-size:22px;line-height:1.4;color:var(--fg-soft);font-style:italic}
.prose blockquote p{margin:0}
.prose img{max-width:100%;height:auto;border-radius:var(--r-inner,14px);border:1px solid var(--line)}
.prose figure,.fig{margin:2em 0}
.prose figure svg,.fig svg{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r-inner,14px);background:var(--panel,var(--bg-2));padding:22px}
.prose figcaption,.fig figcaption{margin-top:10px;font-family:var(--mono);font-size:12.5px;color:var(--fg-muted);text-align:center}
.prose code{font-family:var(--mono);font-size:.86em;background:var(--bg-2);border:1px solid var(--line);border-radius:6px;padding:.12em .4em}
.prose pre{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-inner,14px);padding:18px 20px;overflow-x:auto;font-size:14.5px;line-height:1.6;margin:0 0 1.5em}
.prose pre code{background:none;border:0;padding:0;font-size:inherit}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.prose del{color:var(--fg-muted)}
.prose table{width:100%;border-collapse:collapse;margin:0 0 1.5em;font-size:15.5px}
.prose th,.prose td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line)}
.prose th{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-muted)}
.prose sup a{text-decoration:none;color:var(--accent);font-family:var(--mono);font-size:.72em}
.footnote-definition{display:flex;gap:10px;font-size:15px;color:var(--fg-soft);margin:.6em 0}
.footnote-definition sup{font-family:var(--mono);color:var(--accent)}
.footnote-definition p{margin:0}

/* ── Post footer / share ── */
.post-foot{margin-top:52px;padding-top:26px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.share{display:flex;align-items:center;gap:10px}
.share-label{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--fg-muted)}
.share-btn{font-size:13.5px;color:var(--fg-soft);border:1px solid var(--line);border-radius:999px;padding:7px 14px;text-decoration:none;transition:.15s}
.share-btn:hover{color:var(--accent);border-color:var(--accent)}
.back{font-size:14px;color:var(--fg-soft)}
.back:hover{color:var(--accent)}

@media (max-width:720px){
  .blogmain{padding:36px 0 64px}
  .prose{font-size:17px}
}
@media (prefers-reduced-motion:reduce){.post-card,.arr{transition:none}}

/* ══════════════════════════════════════════════════════════════════════════
   LONGFORM ARTICLE (.aa) — self-contained designed article body.
   Ported from the HQ preview, scoped under .aa so it never touches the chrome
   or the plain-markdown posts. Shared tokens inherit from the chrome; only the
   extra tokens the chrome lacks are (re)defined here, scoped to .aa.
   ═══════════════════════════════════════════════════════════════════════════ */
.aa{
  --accent-ink:#c93c13; --accent-soft:rgba(238,74,28,.09); --ok-soft:rgba(63,138,87,.10);
  font-family:var(--sans); font-size:18px; line-height:1.72; font-weight:360;
  letter-spacing:.002em; color:var(--ink);
}
[data-theme="dark"] .aa{
  --accent-ink:#ff8a5f; --accent-soft:rgba(255,122,77,.11); --ok-soft:rgba(127,182,133,.12);
}
.aa .wrap{max-width:720px; margin:0 auto}
.aa .col{max-width:640px; margin-inline:auto}
.aa-shell{max-width:720px; margin:0 auto}

/* hero */
.aa .eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent-ink); margin:0 0 22px; display:block}
.aa .eyebrow::before{content:none}
.aa h1{font-family:var(--serif); font-weight:420; font-size:clamp(34px,6.2vw,58px);
  line-height:1.04; letter-spacing:-.012em; margin:0 0 26px; text-wrap:balance; color:var(--ink)}
.aa .dek{font-family:var(--serif); font-weight:380; font-size:clamp(19px,2.4vw,23px); line-height:1.5;
  color:var(--ink); margin:0 0 30px; font-style:italic}
.aa .dek b{font-style:normal; font-weight:600}
.aa .byline{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; color:var(--soft);
  display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center;
  padding-bottom:30px; border-bottom:1px solid var(--line); margin-bottom:12px}
.aa .byline .sep{width:4px;height:4px;border-radius:50%;background:var(--soft);opacity:.6}

/* body */
.aa .col p{margin:0 0 22px}
.aa .lead{font-family:var(--sans); font-weight:360; font-size:1em; line-height:1.72; color:var(--ink); max-width:none; margin:0 0 22px}
.aa .lead::first-letter{font-family:var(--serif); float:left; font-size:3.05em; line-height:.82;
  font-weight:500; padding:.02em .09em 0 0; color:var(--accent)}
.aa h2{font-family:var(--serif); font-weight:480; font-size:clamp(24px,3.4vw,32px); line-height:1.16;
  letter-spacing:-.01em; margin:52px 0 18px; text-wrap:balance; color:var(--ink)}
.aa h2 .n{font-family:var(--mono); font-weight:500; font-size:.5em; color:var(--accent);
  letter-spacing:.1em; vertical-align:.32em; margin-right:.7em}
.aa strong{font-weight:600} .aa em{font-style:italic}
.aa a{color:var(--accent-ink); text-underline-offset:3px; text-decoration-thickness:1px; transition:color .15s ease}

/* pull quote */
.aa blockquote{margin:34px 0; padding:4px 0 4px 26px; border-left:2px solid var(--accent);
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(20px,2.6vw,25px); line-height:1.42; color:var(--ink)}
.aa blockquote cite{display:block; margin-top:14px; font-family:var(--mono); font-style:normal;
  font-size:12px; letter-spacing:.04em; color:var(--soft); text-transform:none}
.aa blockquote cite b{color:var(--muted); font-weight:500}

/* figures */
.aa figure{margin:40px 0}
.aa .fig-card{background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:22px 20px 14px; box-shadow:var(--shadow)}
.aa .fig-card svg{display:block; width:100%; height:auto}
.aa figcaption{font-family:var(--mono); font-size:11.5px; line-height:1.5; letter-spacing:.03em;
  color:var(--soft); margin-top:14px; padding-top:13px; border-top:1px solid var(--line-2)}
.aa figcaption b{color:var(--muted); font-weight:500}

/* inline-SVG diagram theme classes */
.aa .d-bg{fill:var(--panel-2)} .aa .d-panel{fill:var(--panel)}
.aa .d-line{stroke:var(--line); fill:none} .aa .d-line-2{stroke:var(--line-2); fill:none}
.aa .d-ink{fill:var(--ink)} .aa .d-muted{fill:var(--muted)} .aa .d-soft{fill:var(--soft)}
.aa .d-accent{fill:var(--accent)} .aa .d-accent-s{stroke:var(--accent); fill:none}
.aa .d-accent-band{fill:var(--accent); opacity:.10} .aa .d-neutral-band{fill:var(--ink); opacity:.05}
.aa .d-ok{fill:var(--ok)} .aa .d-ok-s{stroke:var(--ok); fill:none}
.aa .d-lbl{font-family:var(--mono); font-size:11.5px; letter-spacing:.04em}
.aa .d-lbl-sm{font-family:var(--mono); font-size:9.5px; letter-spacing:.06em}
.aa .d-num{font-family:var(--mono); font-size:12px; font-weight:500}
.aa .d-title{font-family:var(--mono); font-size:11px; letter-spacing:.14em}

/* comparison table */
.aa .cmp-wrap{margin:40px 0; overflow-x:auto}
.aa table.cmp{width:100%; border-collapse:collapse; font-size:15.5px; min-width:520px;
  background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.aa table.cmp th, .aa table.cmp td{padding:13px 16px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line-2)}
.aa table.cmp thead th{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--soft); font-weight:500; background:var(--panel-2)}
.aa table.cmp thead th:last-child{color:var(--accent-ink)}
.aa table.cmp tbody th{font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; color:var(--muted);
  font-weight:500; width:118px; white-space:nowrap}
.aa table.cmp td{color:var(--ink)}
.aa table.cmp tr:last-child th, .aa table.cmp tr:last-child td{border-bottom:none}

/* playbook */
.aa .play{background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:clamp(22px,4vw,34px); margin:40px 0; box-shadow:var(--shadow)}
.aa .play h3{font-family:var(--serif); font-weight:500; font-size:22px; margin:0 0 4px; color:var(--ink)}
.aa .play .ph-sub{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--soft); margin:0 0 22px}
.aa ol.steps{list-style:none; counter-reset:s; margin:0; padding:0}
.aa ol.steps li{counter-increment:s; position:relative; padding:0 0 20px 52px; margin:0}
.aa ol.steps li:last-child{padding-bottom:0}
.aa ol.steps li::before{content:counter(s,decimal-leading-zero); position:absolute; left:0; top:1px;
  font-family:var(--mono); font-size:13px; font-weight:500; color:var(--accent);
  width:34px; height:34px; border:1px solid var(--line); border-radius:9px;
  display:flex; align-items:center; justify-content:center; background:var(--panel-2)}
.aa ol.steps li b{font-weight:600}
.aa ol.steps li span{display:block; color:var(--muted); font-size:15.5px; margin-top:2px}
.aa ol.steps li:not(:last-child)::after{content:""; position:absolute; left:17px; top:41px; bottom:6px;
  width:1px; background:var(--line)}

/* callout */
.aa .impact{background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
  border-radius:14px; padding:20px 22px; margin:34px 0; font-size:16.5px; line-height:1.6}
.aa .impact b{font-weight:600}
.aa .impact .tag{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-ink); margin-bottom:8px}

/* close + sources */
.aa .close{font-family:var(--serif); font-style:italic; font-size:clamp(20px,2.6vw,24px); line-height:1.44;
  color:var(--ink); margin:44px 0 10px; text-wrap:balance}
.aa .rule{height:1px;background:var(--line);border:0;margin:48px 0}
.aa .sources{font-size:13.5px; line-height:1.62; color:var(--muted)}
.aa .sources h4{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--soft); margin:0 0 16px; font-weight:500}
.aa .sources ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.aa .sources li{padding-left:16px; position:relative}
.aa .sources li::before{content:"→"; position:absolute; left:0; color:var(--accent); font-size:12px; top:1px}
.aa .sources a{color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line)}
.aa .sources a:hover{color:var(--accent-ink)}
.aa .foot{margin-top:46px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--soft);
  display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center}
.aa .brand{font-family:var(--mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); display:flex; align-items:center; gap:9px}
.aa .brand .dot{width:9px;height:9px;border-radius:2px;background:var(--accent);display:inline-block}

@media (max-width:560px){
  .aa{font-size:17px}
  .aa .lead::first-letter{font-size:2.7em}
  .aa ol.steps li{padding-left:46px}
}