/* Simple Stuff Blog — paper theme (matches the main site) */
:root {
  --p-cream: #FAFAF6;
  --p-paper: #FFFFFF;
  --p-paper-warm: #FBF8F0;
  --p-ink: #1B1B19;
  --p-ink-soft: #4A4944;
  --p-ink-faint: #8B8983;
  --p-line: #E8E4DA;
  --p-line-soft: #F1EDE3;
  --p-cyan: #0E7B91;
  --p-cyan-strong: #0A5F70;
  --p-cyan-soft: #DCEEF3;
  --p-warm: #B45309;
  --p-warm-soft: #FEF3C7;
  --p-shadow-card: 0 1px 2px rgba(28,25,23,.04), 0 6px 24px -8px rgba(28,25,23,.08);
  /* aliases used by migrated post components (--b-*) */
  --b-bg: var(--p-cream); --b-bg-soft: var(--p-paper); --b-border: var(--p-line); --b-border-soft: var(--p-line-soft);
  --b-text: var(--p-ink); --b-text-muted: var(--p-ink-soft); --b-text-faint: var(--p-ink-faint);
  --b-accent: var(--p-cyan); --b-accent-soft: var(--p-cyan-soft); --b-warm: var(--p-warm); --b-warm-soft: var(--p-warm-soft);
  --b-shadow: var(--p-shadow-card);
  --font-serif: "Iowan Old Style", "Charter", "Sitka Text", "Hoefler Text", "Georgia", "Cambria", "Hiragino Mincho ProN", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Text", "Helvetica Neue", system-ui, "Hiragino Sans", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--p-ink);
  background: var(--p-cream);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--p-cyan); text-decoration: none; }
a:hover { color: var(--p-cyan-strong); }

/* Header / footer */
.site-header { border-bottom: 1px solid var(--p-line); background: rgba(255,255,255,.88); position: sticky; top: 0; backdrop-filter: saturate(180%) blur(8px); z-index: 10; }
.site-header-inner { max-width: 920px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-logo .brand-logo { height: 30px; display: block; }
.header-nav { display: inline-flex; gap: 22px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; }
.header-nav a { color: var(--p-ink-soft); }
.header-nav a.active, .header-nav a:hover { color: var(--p-cyan); }

.blog-main { max-width: 720px; margin: 0 auto; padding: 48px 24px 64px; }

/* Index */
.blog-head { text-align: center; margin-bottom: 40px; }
.post-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 3.2px; text-transform: uppercase; color: var(--p-cyan); margin: 0 0 14px; }
.post-eyebrow a { color: var(--p-cyan); }
.blog-head h1 { font-family: var(--font-serif); font-size: 40px; font-weight: 500; letter-spacing: -.5px; margin: 0 0 14px; }
.blog-lede { color: var(--p-ink-soft); font-size: 17px; max-width: 560px; margin: 0 auto; }
.post-list { list-style: none; padding: 0; margin: 0; }
.post-item { border-top: 1px solid var(--p-line); }
.post-item:last-child { border-bottom: 1px solid var(--p-line); }
.post-item a { display: block; padding: 22px 4px; color: inherit; }
.post-item a:hover { background: var(--p-line-soft); }
.post-item time { display: block; font-size: 12px; letter-spacing: .4px; text-transform: uppercase; color: var(--p-ink-faint); margin-bottom: 6px; }
.post-item-title { display: block; font-family: var(--font-serif); font-size: 23px; color: var(--p-ink); margin-bottom: 6px; }
.post-item-excerpt { display: block; font-size: 15px; color: var(--p-ink-soft); }
.blog-empty { text-align: center; color: var(--p-ink-faint); }

/* Post */
.post-title { font-family: var(--font-serif); font-size: 38px; font-weight: 500; letter-spacing: -.5px; line-height: 1.18; margin: 6px 0 12px; }
.post-meta { font-size: 13px; letter-spacing: .4px; text-transform: uppercase; color: var(--p-ink-faint); margin: 0 0 28px; }
.post-hero { width: 100%; height: auto; border-radius: 12px; margin: 0 0 28px; }
.post-body { font-size: 18px; color: var(--p-ink); }
.post-body h2 { font-family: var(--font-serif); font-size: 27px; font-weight: 500; margin: 40px 0 12px; }
.post-body h3 { font-family: var(--font-serif); font-size: 22px; font-weight: 500; margin: 32px 0 10px; }
.post-body p { margin: 0 0 20px; }
.post-body img { max-width: 100%; height: auto; border-radius: 10px; }
.post-body blockquote { margin: 24px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--p-cyan); color: var(--p-ink-soft); font-style: italic; }
.post-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--p-line-soft); padding: 2px 6px; border-radius: 5px; }
.post-body pre { background: var(--p-paper-warm); border: 1px solid var(--p-line); border-radius: 10px; padding: 16px; overflow: auto; }
.post-body pre code { background: none; padding: 0; }
.post-body ul, .post-body ol { margin: 0 0 20px; padding-left: 26px; }
.post-body li { margin: 6px 0; }
.post-body a { text-decoration: underline; text-underline-offset: 2px; }
.post-foot { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--p-line); font-weight: 600; }

.site-footer { border-top: 1px solid var(--p-line); }
.site-footer-inner { max-width: 920px; margin: 0 auto; padding: 28px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-footer-logo img { height: 24px; opacity: .8; display: block; }
.site-footer-copy { color: var(--p-ink-faint); font-size: 13px; margin: 0; }

@media (max-width: 640px) {
  .blog-main { padding: 32px 18px 48px; }
  .blog-head h1 { font-size: 32px; }
  .post-title { font-size: 30px; }
  .post-body { font-size: 17px; }
}

/* ─────────────────────────────────────────────
   Post components (migrated from the hand-written posts)
   ───────────────────────────────────────────── */

/* Diagram */
figure.diagram { background: var(--b-bg-soft); border: 1px solid var(--b-border); border-radius: 14px; padding: 30px 18px 18px; margin: 28px 0; text-align: center; box-shadow: var(--b-shadow); }
figure.diagram svg { max-width: 100%; height: auto; }
figure.diagram figcaption { font-family: var(--font-serif); font-style: italic; font-size: 13.5px; color: var(--b-text-faint); margin-top: 12px; line-height: 1.6; }

/* Formula block */
.formula { background: #FAF6EF; border: 1px solid var(--b-border); border-left: 3px solid var(--b-accent); border-radius: 0 10px 10px 0; padding: 16px 20px; margin: 22px 0; font-family: ui-monospace, "SF Mono", "Menlo", monospace; font-size: 14px; color: var(--b-text); line-height: 1.7; }
.formula .label { display: block; font-size: 10px; font-weight: 700; color: var(--b-text-faint); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; font-family: var(--font-sans); }

/* Tool callout */
.tool-callout { background: var(--b-accent-soft); border: 1px solid rgba(14,123,145,.20); border-radius: 14px; padding: 22px 24px; margin: 36px 0; display: flex; gap: 16px; align-items: center; }
.tool-callout img { width: 52px; height: 52px; flex-shrink: 0; border-radius: 12px; object-fit: cover; background: var(--b-bg-soft); box-shadow: var(--b-shadow); }
.tool-callout .text { flex: 1; font-family: var(--font-sans); font-size: 14px; line-height: 1.65; color: var(--b-text-muted); }
.tool-callout .text strong { color: var(--b-text); font-weight: 600; }
.tool-callout a { color: var(--b-accent); text-decoration: none; font-weight: 600; }
.tool-callout a::after { content: " →"; opacity: .8; }

/* Maker / author card */
.maker-compact { display: flex; align-items: center; gap: 16px; background: var(--b-bg-soft); border: 1px solid var(--b-border); border-radius: 14px; padding: 20px 22px; margin: 48px 0 32px; box-shadow: var(--b-shadow); }
.maker-compact img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: center 22%; flex-shrink: 0; box-shadow: var(--b-shadow); }
.maker-compact .text { font-family: var(--font-sans); font-size: 13.5px; color: var(--b-text-muted); line-height: 1.75; }
.maker-compact .text strong { color: var(--b-text); font-weight: 600; }

/* Related links */
.related { border-top: 1px solid var(--b-border); padding-top: 28px; margin-top: 32px; }
.related h3 { font-family: var(--font-sans); font-size: 11px; font-weight: 700; color: var(--b-text-faint); letter-spacing: 2.4px; text-transform: uppercase; margin: 0 0 16px; }
.related ul { list-style: none; padding: 0; margin: 0; }
.related li { padding: 7px 0; }
.related a { font-family: var(--font-serif); color: var(--b-text); font-weight: 500; font-size: 16px; text-decoration: none; letter-spacing: -.1px; }
.related a:hover { color: var(--b-accent); }
.related .meta { display: block; font-family: var(--font-sans); font-size: 12px; color: var(--b-text-faint); font-weight: 400; margin-top: 3px; }

/* Ranges table (edge-angle) */
.ranges { background: var(--b-bg-soft); border: 1px solid var(--b-border); border-radius: 14px; padding: 0; overflow: hidden; margin: 22px 0; box-shadow: var(--b-shadow); }
.ranges table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ranges th, .ranges td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--b-border); color: var(--b-text-muted); }
.ranges th { font-family: var(--font-sans); font-size: 10.5px; font-weight: 700; color: var(--b-accent); letter-spacing: 1.5px; text-transform: uppercase; background: var(--b-accent-soft); }
.ranges tr:last-child td { border-bottom: none; }
.ranges td.discipline { color: var(--b-text); font-family: var(--font-serif); font-weight: 500; font-size: 16px; }
.ranges td.num { font-variant-numeric: tabular-nums; }

/* Reference table (FIS rules) */
.ref-table-wrap { background: var(--b-bg-soft); border: 1px solid var(--b-border); border-radius: 14px; overflow-x: auto; margin: 28px 0; box-shadow: var(--b-shadow); -webkit-overflow-scrolling: touch; }
.ref-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 540px; }
.ref-table th, .ref-table td { padding: 11px 12px; text-align: center; border-bottom: 1px solid var(--b-border); color: var(--b-text-muted); white-space: nowrap; }
.ref-table th { font-family: var(--font-sans); font-size: 10.5px; font-weight: 700; color: var(--b-accent); letter-spacing: 1.5px; text-transform: uppercase; background: var(--b-accent-soft); }
.ref-table tr:last-child td { border-bottom: none; }
.ref-table td.disc { color: var(--b-text); font-family: var(--font-serif); font-weight: 500; font-size: 16px; text-align: left; }
.ref-table td.num { font-variant-numeric: tabular-nums; }
.ref-table .group { font-family: var(--font-sans); font-size: 11px; color: var(--b-accent); font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; background: var(--b-accent-soft); text-align: left; padding-left: 12px; }

/* Source note (FIS rules) */
.source-note { background: var(--b-warm-soft); border: 1px solid rgba(180,83,9,.18); border-left: 3px solid var(--b-warm); border-radius: 0 10px 10px 0; padding: 16px 20px; margin: 28px 0; font-family: var(--font-sans); font-size: 13.5px; color: var(--b-text-muted); line-height: 1.7; }
.source-note strong { color: var(--b-text); font-weight: 600; }