/* The Claude Ads Operator — blog styles.
   Inherits the paper-&-ink identity from index.html verbatim.
   Same-origin, no webfonts, no external requests. One file, cached across every post. */

/* Tokens mirror index.html as of the v11 design-system pass (commit 3eb167e).
   Two chromatic accents on the whole site — burnt orange + green. --warn and --danger
   deliberately resolve to muted ink / the accent so nothing is "almost but not quite" the accent.
   If index.html's :root changes, change these to match. */
:root{
  --bg:#F6F2EA; --bg2:#EFEAE0; --card:#FFFDF9; --line:#E2DBCE; --line2:#CFC6B5;
  --text:#151412; --muted:#6A655C; --accent:#C2410C; --accent2:#1F7A4D;
  --warn:#6A655C; --danger:#C2410C; --blue:#2F5DA8; --max:1100px;
  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  /* type scale + radii, from the same pass */
  --d3:38px; --d4:32px; --d5:26px; --d6:20px; --d7:17px;
  --b1:16px; --b2:14px; --b3:12.5px; --m1:11px; --m2:10px;
  --r-chip:4px; --r-btn:6px; --r-card:8px;
  --sec:80px; --sec-tight:52px;
}
@media(max-width:700px){:root{--sec:28px;--sec-tight:20px}}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.65;
  -webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1,"ss01" 1}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ---------- sticky bar (matches index.html) ---------- */
.bar{position:sticky;top:0;z-index:50;background:rgba(246,242,234,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px}
.bar .logo{font-family:var(--serif);font-weight:600;font-size:18px;letter-spacing:-.01em;text-decoration:none}
.bar nav{display:flex;gap:22px;font-size:13px;color:var(--muted)}
.bar nav a{text-decoration:none}
.bar nav a:hover{color:var(--text)}
.btn{display:inline-block;background:var(--text);color:var(--bg);font-weight:600;padding:15px 24px;
  border-radius:var(--r-btn);text-decoration:none;font-size:var(--b1);border:1px solid var(--text);
  transition:background .15s,transform .08s}
.btn:hover{background:#000;transform:translateY(-1px)}
.bar .btn{padding:9px 16px;font-size:14px}
@media(max-width:700px){.bar nav{display:none}}

/* ---------- type ---------- */
h1,h2,h3{line-height:1.15;letter-spacing:-.015em}
h1{font-family:var(--serif);font-weight:500;font-size:clamp(32px,4.6vw,50px);letter-spacing:-.02em;line-height:1.08}
h2{font-family:var(--serif);font-weight:500;font-size:clamp(24px,3vw,32px);margin:44px 0 12px}
h3{font-size:18px;font-weight:600;letter-spacing:-.005em;margin:30px 0 8px}
.kicker{display:inline-block;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.muted{color:var(--muted)}

/* ---------- article ---------- */
.post{padding:56px 0 24px}
.post .wrap{max-width:720px}
.post .lead{font-size:clamp(17px,1.9vw,20px);color:var(--muted);line-height:1.6;margin-top:16px}
.meta{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.meta .who{font-weight:600;color:var(--text)}
/* ---------- post hero ---------- */
.phero{padding:4px 0 0}
.phero .wrap{max-width:720px}
.phero img{display:block;width:100%;height:auto;border-radius:var(--r-card);
  border:1px solid var(--line);background:var(--bg2)}
@media(max-width:700px){.phero .wrap{padding:0 16px}}

.body{padding:8px 0 64px}
.body .wrap{max-width:720px}
.body p{margin:18px 0;font-size:17px}
.body ul,.body ol{margin:18px 0 18px 22px}
.body li{margin:8px 0;font-size:17px}
.body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.body a:hover{text-decoration-thickness:2px}
.body strong{font-weight:650}
.body code{font-family:var(--mono);font-size:.88em;background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--r-chip);padding:1px 5px;word-break:break-word}
.body pre{background:#0F1013;color:#F1EFEA;border-radius:var(--r-card);padding:16px 18px;overflow-x:auto;margin:22px 0;
  font-family:var(--mono);font-size:13px;line-height:1.55}
.body pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}
.body blockquote{margin:22px 0;padding:14px 18px;background:var(--card);border-left:3px solid var(--line2);
  border-radius:0 6px 6px 0;color:var(--muted);font-size:16px}
.body blockquote p{margin:6px 0}
.body img{max-width:100%;height:auto;border-radius:var(--r-card);border:1px solid var(--line);display:block;margin:24px 0}
.body figure{margin:24px 0}
.body figcaption{font-size:13px;color:var(--muted);margin-top:8px;font-family:var(--mono)}
.body hr{border:0;border-top:1px solid var(--line);margin:40px 0}

/* callout — used for the honesty notes */
.note{margin:26px 0;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--warn);
  border-radius:0 var(--r-card) var(--r-card) 0;padding:16px 18px}
.note b{display:block;font-size:13px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--warn);margin-bottom:6px}
.note p{margin:6px 0;font-size:15.5px}
.note.green{border-left-color:var(--accent2)}
.note.green b{color:var(--accent2)}

/* tables */
.tblwrap{overflow-x:auto;margin:24px 0}
table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
th,td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{color:var(--muted);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  font-family:var(--mono);white-space:nowrap}

/* ---------- CTA ---------- */
.cta-inline{margin:26px 0;font-size:16px;color:var(--muted);border-left:2px solid var(--line2);padding-left:16px}
.cta-inline a{color:var(--accent);font-weight:600}
.cta-card{margin:44px 0 0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:26px}
.cta-card h3{margin:0 0 8px;font-family:var(--serif);font-weight:500;font-size:24px;letter-spacing:-.015em}
.cta-card p{margin:0 0 18px;color:var(--muted);font-size:16px}
.cta-card .sub{font-size:13px;color:var(--muted);margin-top:12px}

/* ---------- author ---------- */
.author{margin:40px 0 0;padding-top:26px;border-top:1px solid var(--line);display:flex;gap:16px;align-items:flex-start}
.author .txt{font-size:14.5px;color:var(--muted)}
.author .txt b{color:var(--text);display:block;margin-bottom:4px;font-size:15px}

/* ---------- index / listing ---------- */
.idx{padding:56px 0 24px}
.idx h1{margin-bottom:14px}
.idx .lead{font-size:clamp(17px,1.9vw,20px);color:var(--muted);max-width:640px}
.list{padding:8px 0 80px}
.item{padding:26px 0;border-top:1px solid var(--line)}
.item.has-th{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:start}
.item .th{display:block;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);
  background:var(--bg2)}
.item .th img{display:block;width:100%;height:auto}
.item .th:hover{border-color:var(--text)}
@media(max-width:640px){.item.has-th{grid-template-columns:1fr;gap:14px}}
.item:first-child{border-top:0}
.item a.t{font-family:var(--serif);font-weight:500;font-size:clamp(21px,2.4vw,26px);letter-spacing:-.015em;
  text-decoration:none;display:inline-block;line-height:1.2}
.item a.t:hover{color:var(--accent)}
.item .d{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px}
.item p{color:var(--muted);margin-top:8px;font-size:16px;max-width:680px}
.empty{padding:40px 0;color:var(--muted)}

/* ---------- footer ---------- */
.footer{padding:40px 0;color:var(--muted);font-size:13px;border-top:1px solid var(--line)}
.footer a{color:var(--muted)}

/* ---------- a11y ---------- */
a:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ============================================================
   ARTICLE MODULES — the research-page format.
   Answer-first, scannable, built out of labelled blocks rather
   than a wall of prose. Same two-chroma palette throughout.
   ============================================================ */

/* 1 — THE SHORT ANSWER. Always first, always complete. */
.answer{margin:0 0 34px;background:var(--card);border:1px solid var(--line2);
  border-radius:var(--r-card);padding:22px 24px}
.answer b{display:block;font-family:var(--mono);font-size:var(--m1);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.answer p{margin:0;font-size:var(--d7);line-height:1.6}
.answer p+p{margin-top:12px}

/* 4 — worth knowing */
.worth{margin:30px 0;background:var(--bg2);border-left:3px solid var(--accent);
  border-radius:0 var(--r-card) var(--r-card) 0;padding:18px 20px}
.worth b{display:block;font-family:var(--mono);font-size:var(--m2);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.worth .claim{display:block;font-family:var(--serif);font-size:var(--d6);line-height:1.3;
  letter-spacing:-.01em;margin-bottom:8px}
.worth p{margin:0;font-size:var(--b2);color:var(--muted)}

/* 5 — side-by-side comparison */
.cmp table{font-size:var(--b3)}
.cmp th:first-child,.cmp td:first-child{font-weight:600;color:var(--text);white-space:normal}
.cmp thead th{font-family:var(--mono);font-size:var(--m2);letter-spacing:.08em}
.cmp td{white-space:normal;vertical-align:top}

/* 6 — the ranked list */
.ranked{list-style:none;margin:26px 0;padding:0;counter-reset:rank}
.ranked li{counter-increment:rank;position:relative;padding:20px 0 20px 52px;
  border-top:1px solid var(--line)}
.ranked li:first-child{border-top:0}
.ranked li:before{content:counter(rank);position:absolute;left:0;top:20px;
  width:32px;height:32px;border-radius:50%;background:var(--text);color:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:var(--b3);font-weight:600}
.ranked h3{margin:0 0 6px;font-size:var(--d7);display:flex;flex-wrap:wrap;gap:10px;align-items:baseline}
.ranked .badge{font-family:var(--mono);font-size:var(--m2);font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);border:1px solid var(--line2);
  border-radius:var(--r-chip);padding:2px 7px;white-space:nowrap}
.ranked .badge.green{color:var(--accent2);border-color:#CDE3D5;background:#EEF6F1}
.ranked p{margin:0;font-size:var(--b1);color:var(--muted)}
.ranked p .trade{color:var(--text);font-weight:600}

/* 7 — pull quote */
.pull{margin:36px 0;font-family:var(--serif);font-size:var(--d5);line-height:1.34;
  letter-spacing:-.015em;color:var(--text);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:24px 0}

/* 8 — BY THE NUMBERS */
.bynum{margin:34px 0}
.bynum > b{display:block;font-family:var(--mono);font-size:var(--m1);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.bynum .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:640px){.bynum .tiles{grid-template-columns:1fr}}
.bynum .tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:18px}
.bynum .n{display:block;font-family:var(--serif);font-size:var(--d4);font-weight:500;
  letter-spacing:-.02em;line-height:1;margin-bottom:8px;font-variant-numeric:tabular-nums}
.bynum .lbl{font-size:var(--b3);color:var(--muted);line-height:1.45}
.bynum .src{display:block;margin-top:8px;font-family:var(--mono);font-size:var(--m2);color:var(--muted)}

/* 9 — phased timeline */
.phase{margin:24px 0;padding-left:20px;border-left:2px solid var(--line)}
.phase h3{margin:22px 0 6px;font-family:var(--mono);font-size:var(--m1);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.phase h3:first-child{margin-top:0}
.phase p{margin:0 0 4px;font-size:var(--b1)}

/* 10 — mistakes */
.mistakes{list-style:none;margin:24px 0;padding:0}
.mistakes li{padding:14px 0;border-top:1px solid var(--line);font-size:var(--b1);color:var(--muted)}
.mistakes li:first-child{border-top:0}
.mistakes li b{display:block;color:var(--text);margin-bottom:3px;font-size:var(--d7)}

/* 11 — do-this-tonight tip */
.tip{margin:28px 0;font-size:var(--b1);background:#EEF6F1;border:1px solid #CDE3D5;
  border-radius:var(--r-card);padding:16px 18px}
.tip b{font-family:var(--mono);font-size:var(--m2);letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent2);display:block;margin-bottom:6px}

/* 12 — FAQ */
.faq{margin:40px 0 0}
.faq h2{margin-bottom:6px}
.faq details{border-top:1px solid var(--line);padding:0}
.faq details[open]{padding-bottom:8px}
.faq summary{cursor:pointer;list-style:none;padding:16px 26px 16px 0;position:relative;
  font-weight:600;font-size:var(--d7)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:4px;top:14px;color:var(--muted);
  font-family:var(--mono);font-size:var(--d6);line-height:1}
.faq details[open] summary:after{content:"–"}
.faq details p{margin:0 0 12px;color:var(--muted);font-size:var(--b1)}

/* a claim someone else makes, which this post then corrects. Muted so the eye
   reads it as "the old answer" and lands on the correction beside it. */
.said{color:var(--muted);font-style:italic}

/* the pillar, pinned above the reverse-chron list */
.starthere{display:block;text-decoration:none;background:var(--card);border:1px solid var(--line2);
  border-radius:var(--r-card);padding:24px;margin-bottom:8px;transition:border-color .15s}
.starthere:hover{border-color:var(--text)}
.starthere .lbl{display:block;font-family:var(--mono);font-size:var(--m1);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.starthere .t{display:block;font-family:var(--serif);font-weight:500;
  font-size:clamp(22px,2.6vw,28px);letter-spacing:-.015em;line-height:1.2;margin-bottom:8px}
.starthere .d{display:block;color:var(--muted);font-size:var(--b1);max-width:640px}

/* visible breadcrumb, matching the BreadcrumbList schema that was already being emitted */
.crumbs{font-family:var(--mono);font-size:var(--m1);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs span{opacity:.5;margin:0 6px}

/* inline diagrams — structural only, never a chart of data we do not have.
   Wide diagrams scroll inside their own container rather than scaling down until
   the labels are unreadable, which is the same treatment .tblwrap gives tables. */
.body figure{overflow-x:auto;-webkit-overflow-scrolling:touch}
.body figure svg{display:block;width:100%;min-width:600px;height:auto;background:var(--bg2);
  border:1px solid var(--line);border-radius:var(--r-card);padding:18px 20px}
.body figure figcaption{min-width:0}
@media(max-width:640px){.body figure svg{padding:12px 10px}}

/* a clearly-labelled illustration. Dashed, so it never reads as measured data. */
.hypo{margin:26px 0;border:1px dashed var(--line2);border-radius:var(--r-card);
  padding:16px 18px;background:transparent}
.hypo>b{display:block;font-family:var(--mono);font-size:var(--m2);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.hypo table{margin:0}
.hypo p:last-child{margin-bottom:0}