/* The Signal Brief — shared static stylesheet.
   Self-hosted fonts (no CDN), no JS, no trackers. Served at /styles.css ;
   fonts at /fonts/*.ttf (root-absolute, resolved at the deployed domain root).
   Design tokens mirror inputs/design.test.md. */

@font-face { font-family:'Fraunces'; src:url('/fonts/Fraunces.ttf') format('truetype');
  font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/fonts/Inter.ttf') format('truetype');
  font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('/fonts/IBMPlexMono-Regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('/fonts/IBMPlexMono-Bold.ttf') format('truetype');
  font-weight:700; font-style:normal; font-display:swap; }

:root {
  --paper:#F7F4EF; --surface:#FFFFFF; --surface2:#F1EDE6; --surface3:#EAE4DA;
  --ink:#16140F; --on-variant:#46423A; --muted:#6E685A; --line:#D6CFC2;
  --accent:#C24A22; --forest:#2E5B3E; --olive:#7C7A55;
  --gold:#C99A20; --silver:#9AA0A6; --bronze:#B0703A;
  --dark-bg:#16140F; --dark-ink:#F2ECDF;
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans);
  line-height:1.55; -webkit-font-smoothing:antialiased; }
.wrap { max-width:1100px; margin:0 auto; padding:40px 24px 88px; }
.measure { max-width:68ch; }

/* ── masthead / nav ─────────────────────────────────────── */
.masthead { display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:28px; }
.masthead .brand { font-family:var(--mono); font-size:13px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink); text-decoration:none; font-weight:700; }
.masthead .brand b { color:var(--accent); }
.masthead nav a { font-family:var(--sans); font-size:13px; color:var(--muted);
  text-decoration:none; margin-left:18px; }
.masthead nav a:hover { color:var(--accent); }

/* ── headings / hero ────────────────────────────────────── */
.kicker { font-family:var(--sans); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); font-weight:700; }
h1 { font-family:var(--serif); font-weight:700; font-size:clamp(30px,5.2vw,50px); line-height:1.08;
  letter-spacing:-.02em; margin:.28em 0 .18em; }
h1 em { color:var(--accent); font-style:normal; }
.lede { font-family:var(--serif); font-size:clamp(18px,2.3vw,22px); color:#2b2820; }
.post-meta { font-family:var(--mono); font-size:12.5px; color:var(--muted); margin-top:10px; }
.post-meta .lang { border:1px solid var(--line); padding:1px 6px; margin-left:8px; }

h2 { font-family:var(--serif); font-size:clamp(22px,3vw,28px); line-height:1.15; margin:44px 0 8px; }
h3 { font-family:var(--serif); font-size:20px; margin:28px 0 6px; }
p.sub { color:var(--muted); margin-top:0; }

/* ── prose (rendered markdown) ──────────────────────────── */
.post-body { font-size:17px; }
.post-body > p, .post-body > ul, .post-body > ol, .post-body > blockquote { max-width:68ch; }
.post-body p { margin:0 0 1.05em; }
.post-body a { color:var(--accent); text-underline-offset:2px; }
.post-body strong { font-weight:700; }
.post-body ul, .post-body ol { padding-left:1.2em; }
.post-body li { margin:.3em 0; max-width:66ch; }
.post-body blockquote { margin:1.4em 0; padding:.2em 0 .2em 18px; border-left:3px solid var(--accent);
  font-family:var(--serif); font-style:italic; color:var(--on-variant); }
.post-body blockquote p { max-width:64ch; }
.post-body code { font-family:var(--mono); font-size:.86em; background:var(--surface2);
  padding:.1em .35em; border:1px solid var(--line); }
.post-body pre { background:var(--surface2); border:1px solid var(--line); padding:14px 16px;
  overflow:auto; } .post-body pre code { background:none; border:none; padding:0; }
.post-body img { display:block; width:100%; max-width:760px; height:auto; margin:22px 0 8px;
  border:1px solid var(--line); }
.post-body img + em, .post-body figcaption { display:block; font-size:13px; color:var(--muted);
  font-style:normal; margin:-2px 0 26px; }
.post-body hr { border:none; border-top:1px solid var(--line); margin:36px 0; }

/* ── metrics table ──────────────────────────────────────── */
table.metrics { width:100%; border-collapse:collapse; font-size:14px; margin:16px 0; }
table.metrics th, table.metrics td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); }
table.metrics thead th { font-family:var(--sans); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); border-bottom:1.5px solid var(--ink); }
.post-body table { width:100%; border-collapse:collapse; font-size:14px; margin:18px 0; }
.post-body th, .post-body td { text-align:left; padding:7px 10px; border-bottom:1px solid var(--line); }
.post-body thead th { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  border-bottom:1.5px solid var(--ink); }
.num, table.metrics .num, table.metrics .q { text-align:right; font-family:var(--mono); }
.mono { font-family:var(--mono); font-size:12.5px; }
table.metrics .q { font-weight:700; }
tr.r-car td { background:rgba(46,91,62,.06); }
tr.r-ppt td { background:rgba(194,74,34,.06); }

/* ── gallery decks ──────────────────────────────────────── */
.deck { margin:40px 0; }
.deck-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  border-bottom:1px solid var(--line); padding-bottom:6px; }
.deck-head h3 { font-family:var(--serif); font-size:22px; margin:0; }
.tag { font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:3px 8px; vertical-align:middle; margin-left:6px; color:#fff; }
.tag.carousel { background:var(--forest); }
.tag.pptx { background:var(--accent); }
.score { font-family:var(--mono); font-size:26px; font-weight:700; }
.score span { font-size:13px; color:var(--muted); }
.caption { color:#2b2820; margin:8px 0 12px; max-width:80ch; }
.muted { color:var(--muted); }
.strip { display:flex; gap:14px; overflow-x:auto; padding:6px 2px 16px; scroll-snap-type:x mandatory;
  scrollbar-width:thin; }
.slide { flex:0 0 auto; width:min(70vw,360px); margin:0; scroll-snap-align:center;
  background:var(--surface); border:1px solid var(--line); }
.slide img { display:block; width:100%; height:auto; }
.slide figcaption { font-family:var(--mono); font-size:11px; color:var(--muted); padding:4px 8px;
  border-top:1px solid var(--line); }
.legend { font-size:13px; color:var(--muted); margin-top:6px; }

/* ── index / post list ──────────────────────────────────── */
.post-list { list-style:none; padding:0; margin:24px 0 0; }
.post-list li { border-bottom:1px solid var(--line); padding:22px 0; }
.post-list a.title { font-family:var(--serif); font-size:24px; color:var(--ink); text-decoration:none;
  display:inline-block; line-height:1.2; }
.post-list a.title:hover { color:var(--accent); }
.post-list time { font-family:var(--mono); font-size:12px; color:var(--muted); display:block; margin-bottom:4px; }
.post-list p { color:var(--on-variant); margin:6px 0 0; max-width:74ch; }

/* ── footer ─────────────────────────────────────────────── */
footer.site { margin-top:64px; padding-top:20px; border-top:1px solid var(--line);
  font-size:13px; color:var(--muted); }
footer.site a { color:var(--accent); }
a { color:var(--accent); }