/* ============================================================================
   Blog styles — readable, theme-aware (light default, dark via toggle/system).
   No frameworks. Tweak the tokens in :root and you've re-skinned everything.
   ============================================================================ */

:root {
  --bg:        #fbfaf7;
  --surface:   #ffffff;
  --text:      #1c1b19;
  --muted:     #6b675f;
  --border:    #e7e3da;
  --accent:    #c8553d;   /* warm red — bonk-ish; swap for your brand */
  --accent-2:  #2a9d8f;
  --hi-bg:     #fdf1ee;
  --code-bg:   #f4f1ea;
  --measure:   68ch;      /* reading width */
  --radius:    12px;
  color-scheme: light dark;
}

/* dark palette: system default when no explicit choice… */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#141310; --surface:#1c1a16; --text:#ece7dd; --muted:#a49d90;
    --border:#2e2a22; --accent:#e07a5f; --accent-2:#4bbfae; --hi-bg:#2a1f1a;
    --code-bg:#211e18;
  }
}
/* …and when the toggle forces dark. */
:root[data-theme="dark"] {
  --bg:#141310; --surface:#1c1a16; --text:#ece7dd; --muted:#a49d90;
  --border:#2e2a22; --accent:#e07a5f; --accent-2:#4bbfae; --hi-bg:#2a1f1a;
  --code-bg:#211e18;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.125rem/1.7 ui-serif, Georgia, "Iowan Old Style", Palatino, serif;
  -webkit-font-smoothing: antialiased;
}

/* reading-progress bar */
.progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--accent); z-index: 50; transition: width .1s linear;
}

.theme-toggle {
  position: fixed; top: 14px; right: 16px; z-index: 50;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-size: 18px; cursor: pointer; line-height: 1;
}
.theme-toggle:hover { border-color: var(--accent); }

article {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 4rem 1.25rem 6rem;
}

/* ---- hero ---- */
.hero { margin-bottom: 3.5rem; }
.eyebrow {
  font: 600 .8rem/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 1rem;
}
h1 {
  font: 800 clamp(2.1rem, 6vw, 3.4rem)/1.08 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.02em; margin: 0 0 1.2rem;
}
.lede { font-size: 1.3rem; color: var(--text); margin: 0 0 1rem; }
.byline { font: 500 .95rem/1 ui-sans-serif, system-ui, sans-serif; color: var(--muted); }

/* ---- structure ---- */
section { margin: 3rem 0; }
h2 {
  font: 700 1.7rem/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.01em; margin: 0 0 1rem; padding-top: .5rem;
}
h3 { font: 700 1.25rem/1.3 ui-sans-serif, system-ui, sans-serif; margin: 2rem 0 .6rem; }
p { margin: 0 0 1.15rem; }
a { color: var(--accent); text-underline-offset: 3px; }

blockquote {
  margin: 1.8rem 0; padding: .2rem 0 .2rem 1.3rem;
  border-left: 3px solid var(--accent);
  font-size: 1.35rem; font-style: italic; color: var(--text);
}

/* ---- callouts (the "gotcha" boxes) ---- */
.callout {
  margin: 1.8rem 0; padding: 1.1rem 1.25rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
  font: 400 1.02rem/1.6 ui-sans-serif, system-ui, sans-serif;
}
.callout-trap { border-left: 4px solid var(--accent); }
.callout-tag {
  display: inline-block; margin-right: .5rem;
  font: 700 .72rem/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}

/* ---- tables ---- */
.table-wrap { overflow-x: auto; margin: 1.5rem 0; }
table {
  width: 100%; border-collapse: collapse;
  font: 400 1rem/1.5 ui-sans-serif, system-ui, sans-serif;
}
th, td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--border); }
thead th { font-weight: 700; color: var(--muted); font-size: .85rem;
  text-transform: uppercase; letter-spacing: .04em; }
td.hi, .hi { color: var(--accent); font-weight: 700; }

/* ---- pure-CSS bar chart ---- */
.chart { margin: 1.5rem 0; }
.bar { display: flex; align-items: center; gap: .8rem; margin: .5rem 0;
  font: 600 .95rem/1 ui-sans-serif, system-ui, sans-serif; }
.bar-label { width: 3.5rem; color: var(--muted); }
.bar-track { flex: 1; height: 22px; background: var(--code-bg);
  border-radius: 6px; overflow: hidden; }
.bar-fill { display: block; height: 100%; width: calc(var(--v) * 1%);
  background: var(--muted); border-radius: 6px; }
.bar-fill.hi { background: var(--accent); }
.bar-val { width: 3.5rem; text-align: right; }
figcaption { color: var(--muted); font: 400 .9rem/1.4 ui-sans-serif, system-ui, sans-serif;
  margin-top: .6rem; }

/* ---- code ---- */
code { font: 0.9em ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--code-bg); padding: .12em .4em; border-radius: 5px; }
pre { background: var(--code-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.15rem; overflow-x: auto; margin: 1.5rem 0; }
pre code { background: none; padding: 0; font-size: .92rem; line-height: 1.5; }

img { max-width: 100%; height: auto; border-radius: var(--radius); }

.foot { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
  color: var(--muted); font: 400 .95rem/1.6 ui-sans-serif, system-ui, sans-serif; }