/* Article pages (/counsel/...). A SEPARATE stylesheet on purpose: index.html carries its CSS
   inline and has just been measured clean in both themes, so it is not refactored here.
   Tokens are copied from index.html's :root so the two surfaces stay one system, and the light
   values are the AA-passing ones (--gold-ink #8B6508, --good #3B7349), never the pre-fix pair. */
:root{
  --ink:#15171A; --ink2:#1D2024; --ink3:#23272C; --line:#2A2D31; --paper:#F6F1E7;
  --gold:#C8A872; --gold-lt:#E2C998; --gold-ink:#8B6508;
  --bg:var(--ink); --surface:var(--ink2); --border:var(--line);
  --text:var(--paper); --muted:#9A917E; --accent:var(--gold);
  --accent-text:var(--gold-lt); --on-accent:var(--ink); --good:#7FB08A;
  --header-bg:rgba(21,23,26,.86);
  --mark-faint:rgba(246,241,231,.30); --mark-gold:#C8A872; --mark-core:#C8A872;
  --serif:'Cambria','Big Caslon','Hoefler Text',Georgia,serif;
  --sans:-apple-system,'Inter',system-ui,sans-serif;
  --w:760px;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme]){
    --ink2:#FBF7EE; --ink3:#F3EEE2; --line:#E7DFCE;
    --bg:#F6F1E7; --surface:#FBF7EE; --border:#E7DFCE;
    --text:#15171A; --muted:#6E664F; --good:#3B7349;
    --accent-text:var(--gold-ink); --on-accent:#15171A;
    --header-bg:rgba(246,241,231,.86);
    --mark-faint:rgba(21,23,26,.22); --mark-gold:#B8860B; --mark-core:#B8860B;
  }
}
:root[data-theme="light"]{
  --ink2:#FBF7EE; --ink3:#F3EEE2; --line:#E7DFCE;
  --bg:#F6F1E7; --surface:#FBF7EE; --border:#E7DFCE;
  --text:#15171A; --muted:#6E664F; --good:#3B7349;
  --accent-text:var(--gold-ink); --on-accent:#15171A;
  --header-bg:rgba(246,241,231,.86);
  --mark-faint:rgba(21,23,26,.22); --mark-gold:#B8860B; --mark-core:#B8860B;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-weight:400;
  line-height:1.68;-webkit-font-smoothing:antialiased}
a{color:var(--accent-text)}
a:hover{text-decoration:none}
header.site{position:sticky;top:0;background:var(--header-bg);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);border-bottom:.5px solid var(--border);z-index:20}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 24px;max-width:1120px;margin:0 auto}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand .wm{font-family:var(--serif);font-size:19px;color:var(--text)}
.bar nav a{color:var(--muted);font-size:14px;margin-left:18px;text-decoration:none}
.bar nav a:hover{color:var(--text)}
.themebtn{margin-inline-start:16px;background:transparent;border:.5px solid var(--border);
  color:var(--muted);width:34px;height:34px;border-radius:9px;cursor:pointer;font-size:15px;
  line-height:1;display:inline-flex;align-items:center;justify-content:center}
.themebtn:hover{color:var(--text);border-color:var(--accent)}
main{max-width:var(--w);margin:0 auto;padding:0 24px 72px}
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-text);
  font-weight:500;margin:46px 0 10px}
h1{font-family:var(--serif);font-weight:500;font-size:37px;line-height:1.16;letter-spacing:.01em;margin:0 0 14px}
h2{font-family:var(--serif);font-weight:500;font-size:25px;line-height:1.22;margin:40px 0 12px}
.dateline{font-size:13px;color:var(--muted);border-bottom:.5px solid var(--border);padding-bottom:18px;margin-bottom:6px}
p{font-size:17px;margin:18px 0}
.lede{font-size:19px;color:var(--muted)}
.note{background:var(--surface);border:.5px solid var(--border);border-radius:12px;
  padding:18px 20px;font-size:15px;color:var(--muted);margin:26px 0}
.note b{color:var(--text)}
.sources{margin:34px 0 0;padding:20px 22px;background:var(--surface);
  border:.5px solid var(--border);border-radius:12px}
.sources h2{font-size:17px;margin:0 0 10px}
.sources ol{margin:0;padding-left:20px}
.sources li{font-size:14.5px;color:var(--muted);margin-bottom:8px;line-height:1.55}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:28px 0}
.card{background:var(--surface);border:.5px solid var(--border);border-radius:14px;padding:22px}
.card h2{font-size:18px;margin:0 0 8px}
.card p{font-size:14.5px;color:var(--muted);margin:0}
.card a{text-decoration:none}
footer.site{border-top:.5px solid var(--border);padding:32px 24px 46px;text-align:center;
  color:var(--muted);font-size:13.5px}
footer.site .legal{margin-top:10px;font-size:12px;max-width:620px;margin-inline:auto}
.backlink{display:inline-block;margin-top:34px;font-size:14.5px}
@media (max-width:700px){
  h1{font-size:29px}
  h2{font-size:21px}
  p{font-size:16.5px}
  .lede{font-size:17.5px}
  main{padding:0 18px 56px}
  .bar{padding:6px 16px;flex-wrap:nowrap}
  /* Three text links plus a wordmark do not fit 390px: the bar wrapped onto two lines and
     crowded the mark (measured at 390x844). Capabilities is dropped on small screens because it
     is still linked from the limits box in the page body, while the two conversion paths stay. */
  .bar nav a.hide-sm{display:none}
  /* 16px-tall links are below the 44px tap-target floor. Padding, not font-size, fixes that:
     the text stays readable and the touchable box grows. */
  .bar nav a{margin-left:14px;font-size:13.5px;padding:14px 0;display:inline-block}
  .themebtn{width:44px;height:44px;margin-inline-start:12px}
  /* The wordmark is the primary "back to the product" affordance on a phone, so it gets a real
     tap box too. Inline citation links inside prose deliberately do NOT: stretching them to 44px
     would wreck the line rhythm, and the 44px floor is for standalone controls, not running text. */
  .brand{padding:10px 0}
  .brand .wm{font-size:17px}
}