/* ronic blog — one stylesheet for the whole section.
   Two inputs (ronic-indigo + ronic-beige) derive everything.
   Type uses the 14-cascade from the design whitelist: 12 label · 14 caption · 17 body · 22 title · 46 headline.
   Spacing: 4 · 8 · 16 · 24 (48 = 24+24 for page-level gaps). Radius 0 everywhere (owner call, 2 Sep 2026). */

:root {
  --accent: #4548e2;            /* ronic-indigo */
  --base:   #f4efe7;            /* ronic-beige */
  --ink:    #201c18;

  --ink-1: rgba(32, 28, 24, .90);
  --ink-2: rgba(32, 28, 24, .72);
  --ink-3: rgba(32, 28, 24, .55);
  --ink-4: rgba(32, 28, 24, .30);

  --paper: #fdfcfb;             /* page */
  --panel: var(--base);         /* the one inset: every exhibit sits on beige */

  --accent-bg:   rgba(69, 72, 226, .16);
  --accent-tint: rgba(69, 72, 226, .08);
  --fill-quiet:  rgba(32, 28, 24, .07);
  --good: #1f7a4d;              /* time used, money kept */
  --bad:  #c2410c;              /* time paid for and wasted */

  --hair:      0.5px solid rgba(32, 28, 24, .55);
  --hair-soft: 1px solid rgba(32, 28, 24, .10);

  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 48px;

  --t-headline: 46px; --t-title: 22px; --t-body: 17px; --t-caption: 14px; --t-label: 12px;

  --font: "Plus Jakarta Sans", "Aptos", "DM Sans", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --col: 660px;
  --rail: 200px;
  --gutter: 72px;   /* rail to column */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-1);
  font: 400 var(--t-body) / 1.55 var(--font);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}
img, svg, video, iframe { max-width: 100%; }
a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 0.5px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 0.5px solid var(--accent); outline-offset: 2px; }
p { margin: 0 0 var(--s3); }
b, strong { font-weight: 600; }

/* ── Shell ─────────────────────────────────────────── */
.site { max-width: calc(var(--rail) + var(--gutter) + var(--col)); margin: 0 auto; padding: 0 var(--s3); }
.site-head {
  display: flex; align-items: flex-end; gap: var(--s2);   /* flex-end + line-height 1 = both sit on one baseline */
  padding: var(--s4) 0 var(--s3);
  border-bottom: 0.5px solid var(--ink);   /* black hairline under the masthead */
}
.wordmark { display: block; height: 18px; line-height: 0; }
.wordmark img { height: 18px; width: auto; display: block; }
.kicker { font: 600 var(--t-label) / 1.4 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.site-head .kicker { color: var(--accent); line-height: 1; font-size: 17px; font-weight: 400; letter-spacing: 0; }  /* caps at 17px read the same height as the wordmark lowercase */
.site-head .kicker a { color: inherit; text-decoration: none; }
.site-foot {
  margin: var(--s5) 0 var(--s4); padding-top: var(--s3);
  border-top: var(--hair-soft);
  font: 500 var(--t-label) / 1.4 var(--font); color: var(--ink-3);
  display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
}

/* ── Feed (index) ──────────────────────────────────── */
.feed-intro { max-width: 62ch; margin: var(--s5) 0 var(--s4); color: var(--ink-2); }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { border-top: var(--hair-soft); padding: var(--s4) 0; display: grid; gap: var(--s2); }
.feed li:last-child { border-bottom: var(--hair-soft); }
.feed a { color: inherit; text-decoration: none; display: grid; gap: var(--s2); }
.feed h2 { font: 600 var(--t-title) / 1.25 var(--font); letter-spacing: -0.01em; margin: 0; }
.feed p { margin: 0; color: var(--ink-2); max-width: 62ch; }
.feed .thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--panel); display: block; }
@media (min-width: 700px) {
  .feed a { grid-template-columns: 1fr 180px; column-gap: var(--s4); }
  .feed .thumb { grid-column: 2; grid-row: 1 / 4; }
}

/* ── Note (post) ───────────────────────────────────── */
.post { display: grid; grid-template-columns: minmax(0, 1fr); padding: var(--s5) 0 0; }
.rail { display: none; }
@media (min-width: 1100px) {
  .post { grid-template-columns: var(--rail) var(--col); column-gap: var(--gutter); }
  /* sticky because the rail is the section index; on long notes the reader keeps it while scrolling */
  .rail { display: block; position: sticky; top: var(--s4); align-self: start; }
}
.rail .eyebrow { margin: var(--s5) 0 var(--s2); }
.rail .eyebrow + .eyebrow { margin-top: var(--s4); }
.rail .eyebrow:first-child { margin-top: 0; }
.rail ol { list-style: none; margin: 0; padding: 0; }
.rail li { border-top: var(--hair-soft); }
.rail li a {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--s2);
  padding: var(--s2) 0; color: var(--ink-2); text-decoration: none; font-size: var(--t-caption); line-height: 1.4;
}
.rail li a:hover { color: var(--ink-1); }
.rail .n { color: var(--accent); font-weight: 600; }
.rail .src {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2);
  padding: var(--s1) 0; border-top: var(--hair-soft);
  font: 500 var(--t-label) / 1.4 var(--font); color: var(--ink-2); text-decoration: none;
}
.rail .src:last-of-type { border-bottom: var(--hair-soft); }
.rail .src .arrow { color: var(--accent); flex: none; }
.rail .src:hover { color: var(--ink-1); }

.eyebrow { font: 600 var(--t-label) / 1.4 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
@media (min-width: 1100px) { .date-m { display: none; } }   /* the rail carries the date on desktop */
.headline {
  font: 500 var(--t-headline) / 1.1 var(--font);
  letter-spacing: -0.02em; margin: var(--s2) 0 var(--s4);
  max-width: 20ch; text-wrap: balance;
}
.lede { max-width: 62ch; }
/* opt-in newspaper columns for a parallel or longer passage; one column under 900px */
.lede.two-col { max-width: none; }
@media (min-width: 900px) { .lede.two-col { column-count: 2; column-gap: var(--s4); } .lede.two-col p { break-inside: avoid; } }
.lede p:last-child { margin-bottom: 0; }
.note > .lede { margin: var(--s4) 0; }

.post-foot {
  margin-top: var(--s5); padding-top: var(--s3); border-top: var(--hair-soft);
  font-size: var(--t-caption); color: var(--ink-2);
  display: flex; justify-content: space-between; gap: var(--s2) var(--s3); flex-wrap: wrap;
}
.post-nav { margin-top: var(--s4); font-size: var(--t-caption); }

/* ── Exhibits ──────────────────────────────────────── */
.ex { margin: var(--s4) 0; padding: var(--s3); background: var(--panel); }
figure.ex { margin-left: 0; margin-right: 0; }
.ex-row { display: grid; gap: var(--s3); margin: var(--s4) 0; }
.ex-row .ex, .ex-row .quote { margin: 0; }
.ex-row .quote { background: var(--panel); padding: var(--s3); }   /* a pair shares one surface */
/* slim exhibits: tweets, small charts, a quote. Never full width; stagger left/right instead of pairing */
.ex-slim { max-width: 480px; }
.ex-slim.narrow { max-width: 340px; }   /* for a breather exhibit: hug the small grid, wrap the title */
.ex-slim.right { margin-left: auto; }
/* wrapped: the exhibit floats and the paragraph after it runs around it (desktop only) */
@media (min-width: 900px) {
  .lede.wrap { max-width: none; }
  .lede .ex-slim.wrap-right, .lede .ex-slim.wrap-left { width: 46%; max-width: 360px; margin: var(--s1) 0 var(--s3) var(--s4); }
  .lede .ex-slim.wrap-right { float: right; }
  .lede .ex-slim.wrap-left { float: left; margin: var(--s1) var(--s4) var(--s3) 0; }
  /* staggered floats never overlap: a left wrap starts below any right wrap, and vice versa (3 Sep 2026) */
  .lede .ex-slim.wrap-left { clear: right; }
  .lede .ex-slim.wrap-right { clear: left; }
  /* a breather exhibit beside text: about a third of the column, so the text keeps a readable measure */
  .lede .ex-slim.narrow.wrap-right, .lede .ex-slim.narrow.wrap-left { width: 40%; max-width: 260px; }
}
.lede::after, .note::after { content: ""; display: table; clear: both; }
.lede > .ex:not(.ex-slim), .lede > .ex-row { clear: both; }   /* a full-width exhibit never slides under a wrapped one */
.lede .ex { margin-top: 0; }
@media (min-width: 700px) { .ex-row { grid-template-columns: 1fr 1fr; } }

.ex-head { position: relative; padding-right: 32px; margin-bottom: var(--s3); }
.ex-mark { display: block; width: 24px; height: 3px; background: var(--accent); margin-bottom: var(--s2); }
.ex-title { display: block; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.ex-sub { display: block; font-size: var(--t-caption); font-weight: 500; color: var(--ink-1); margin-top: var(--s1); }   /* the metric line is content, not chrome: full ink */
.ex-n {
  position: absolute; top: 0; right: 0;
  width: 22px; height: 22px; border: var(--hair);
  font: 600 var(--t-label) / 20px var(--font); text-align: center; color: var(--ink-1);
  font-variant-numeric: tabular-nums;
}
.ex-foot {
  display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
  margin-top: var(--s3); font: 500 var(--t-label) / 1.4 var(--font); color: var(--ink-3);
}
.ex-foot a { color: inherit; }

/* media exhibit: the picture is the exhibit; caption sits under it */
.ex-media { padding: 0; }
.ex-media > img, .ex-media > video { display: block; width: 100%; height: auto; }
.ex-cap { display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s2) var(--s3) var(--s3); font-size: var(--t-caption); color: var(--ink-1); }
.ex-cap .ex-n { position: static; flex: none; }
.ex-cap .ex-foot { margin: 0; display: block; }
.ex-cap p { margin: 0; }

/* video facade — loads the iframe only on tap */
.video { position: relative; aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; }
.video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 48px; border: 0; border-radius: 0; background: var(--base); cursor: pointer;
  display: grid; place-items: center;
}
.play::after { content: ""; width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 18px; border-color: transparent transparent transparent var(--accent); margin-left: 4px; }
.play:hover { background: #fff; }

/* charts (built by blog.js from data-chart JSON) */
.chart svg { display: block; width: 100%; height: auto; font-family: var(--font); letter-spacing: 0; }
.chart svg[width]:not([width="100%"]) { width: auto; }
.chart text { font-variant-numeric: tabular-nums; }

/* stat tile */
.stat { padding: var(--s2) 0 var(--s1); }
.stat-v { font: 500 var(--t-headline) / 1.1 var(--font); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-l { font-size: var(--t-caption); font-weight: 500; color: var(--ink-1); margin-top: var(--s1); }
.stat-v.tone-good { color: var(--good); }
.stat-v.tone-bad { color: var(--bad); }
.stat-line { font-size: var(--t-caption); color: var(--ink-2); margin-top: var(--s1); font-variant-numeric: tabular-nums; }

/* board + waffle widgets */
.board { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: flex-end; }
.board svg { width: auto; height: auto; max-width: 100%; }
.board .stat { padding: 0; }
.waffle-panes { display: flex; gap: var(--s3); align-items: flex-start; }
.waffle-pane { display: grid; gap: var(--s2); min-width: 0; }
.waffle-pane-label { font-size: var(--t-caption); font-weight: 600; }
.waffle-stat { display: flex; align-items: baseline; gap: var(--s2); margin: 0 0 var(--s2); flex-wrap: wrap; }
.waffle-pane .waffle-stat { margin: 0; display: grid; gap: 2px; }
.waffle-stat b { font-size: var(--t-title); font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.waffle-stat span { font-size: var(--t-caption); font-weight: 500; color: var(--ink-1); }
.waffle-legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin-top: var(--s2); font-size: var(--t-caption); font-weight: 500; color: var(--ink-1); }
.waffle-legend span { display: inline-flex; align-items: center; gap: 6px; }
.waffle-legend i { width: 10px; height: 10px; border-radius: 1px; display: inline-block; }
.waffle-legend .waffle-note { color: var(--ink-3); }

/* shift widget */
.shift { display: grid; gap: var(--s3); }
.shift-panes { display: flex; gap: var(--s3); align-items: flex-start; }
.shift-pane { display: grid; gap: var(--s2); min-width: 0; flex: 1 1 0; }
.shift-label { font-size: var(--t-caption); font-weight: 600; }
.shift-stat { display: grid; gap: 2px; }
.shift-stat b { font-size: var(--t-title); font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.shift-stat span { font-size: var(--t-caption); font-weight: 500; }
.shift-matrix, .shift-cost { width: 100%; border-collapse: collapse; font-size: var(--t-caption); font-variant-numeric: tabular-nums; }
.shift-matrix th, .shift-matrix td, .shift-cost th, .shift-cost td { text-align: left; padding: var(--s2) var(--s2) var(--s2) 0; border-top: var(--hair-soft); vertical-align: top; }
.shift-matrix thead th, .shift-cost thead th { border-top: 0; font-weight: 600; color: var(--ink-2); }
.shift-matrix tbody th, .shift-cost tbody th { font-weight: 600; width: 34%; }
.shift-matrix .dim { color: var(--ink-3); }
.shift-cost td { font-weight: 500; }
.shift-cost .save th, .shift-cost .save td { border-top: var(--hair); font-weight: 600; }
.shift-cost .save td { color: var(--accent); }
.sw { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.sw-call { background: var(--good); }
.sw-idle { background: var(--bad); opacity: .85; }
.sw-free { background: rgba(32, 28, 24, 0.12); }

/* a small table as an exhibit */
.ex-table { width: 100%; border-collapse: collapse; font-size: var(--t-caption); }
.ex-table th, .ex-table td { text-align: left; padding: var(--s2) var(--s2) var(--s2) 0; border-top: var(--hair-soft); vertical-align: top; }
.ex-table thead th { border-top: 0; font-weight: 600; color: var(--ink-2); }
.ex-table tbody th { font-weight: 600; width: 28%; }
.ex-table td.hit { color: var(--accent); font-weight: 600; }

/* pills — fill-only, selection = tint + weight */
.pills { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s3); }
.pill {
  font: 500 var(--t-caption) / 1 var(--font); color: var(--ink-2);
  min-height: 36px; padding: 0 var(--s3); border: 0; border-radius: 0;
  background: var(--fill-quiet); cursor: pointer;
}
.pill[aria-pressed="true"] { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
@media (hover: none) { .pill { min-height: 44px; } }
@media (prefers-reduced-motion: no-preference) { .pill { transition: background-color 120ms ease-out; } }

/* quote */
.quote { margin: var(--s4) 0; padding: 0; }
.quote.pull { margin: var(--s4) 0; }   /* a text beat in the flow; it does not clear floats, so it fills the space beside a wrapped exhibit */
.quote.pull p { max-width: 34ch; margin-bottom: 0; }
.quote .ex-mark { margin-bottom: var(--s3); }
.quote p { font: 500 var(--t-title) / 1.3 var(--font); letter-spacing: -0.01em; margin: 0 0 var(--s2); max-width: 30ch; }
.quote cite { font-style: normal; font-size: var(--t-caption); color: var(--ink-2); }

/* quote with a photo of the speaker */
.quote.has-photo { display: grid; grid-template-columns: 72px 1fr; gap: var(--s3) var(--s4); align-items: start; }
.quote.has-photo .ex-mark { grid-column: 1 / -1; margin-bottom: 0; }
.quote-photo { width: 72px; height: 72px; object-fit: cover; display: block; background: var(--fill-quiet); }
.quote.has-photo > div p { margin-top: -4px; }
@media (min-width: 700px) {
  .quote.has-photo { grid-template-columns: 96px 1fr; }
  .quote-photo { width: 96px; height: 96px; }
}

/* audiogram — built by blog.js from {type:"audio"} */
.audio { display: grid; grid-template-columns: 44px 1fr auto; gap: var(--s3); align-items: center; }
.audio-btn {
  width: 44px; height: 44px; border: 0; border-radius: 0; cursor: pointer;
  background: var(--accent-bg); color: var(--accent); font: 600 var(--t-caption) / 1 var(--font);
  display: grid; place-items: center;
}
.audio-btn[aria-pressed="true"] { background: var(--accent); color: #fff; }
.audio-wave { cursor: pointer; line-height: 0; }
.audio-wave svg { display: block; width: 100%; height: 48px; }
.audio-time { font: 500 var(--t-caption) / 1 var(--font); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.audio-tx { margin: var(--s2) 0 0; font-size: var(--t-caption); font-weight: 500; color: var(--ink-1); }

/* tweet — rendered by us, no third-party script */
.tweet { display: grid; gap: var(--s2); }
.tweet-who { display: flex; gap: var(--s2); align-items: center; }
.tweet-avatar { width: 40px; height: 40px; border-radius: 0; background: var(--fill-quiet); object-fit: cover; flex: none; }
.tweet-name { font-weight: 600; line-height: 1.25; }
.tweet-handle { font-size: var(--t-caption); color: var(--ink-3); }
.tweet-text { margin: 0; white-space: pre-line; }
.tweet-meta { font-size: var(--t-caption); color: var(--ink-3); }
.tweet-meta a { color: inherit; }

/* link card */
.linkcard { display: grid; grid-template-columns: 1fr auto; gap: var(--s1) var(--s3); text-decoration: none; color: inherit; align-items: start; }
.linkcard .domain { grid-column: 1; }
.linkcard .lt { grid-column: 1; font-weight: 600; line-height: 1.3; }
.linkcard .ld { grid-column: 1; font-size: var(--t-caption); color: var(--ink-2); }
.linkcard .arrow { grid-column: 2; grid-row: 1 / 4; color: var(--accent); font-size: var(--t-title); line-height: 1; }
.linkcard:hover .lt { text-decoration: underline; text-decoration-thickness: .5px; text-underline-offset: 3px; }

/* code */
.code { margin: 0; font: 400 var(--t-caption) / 1.55 var(--mono); overflow-x: auto; color: var(--ink-1); }
.code code { font: inherit; }

/* image gallery pair inside a media exhibit is just an .ex-row of .ex-media */

/* ── Catalog page helpers ───────────────────────────── */
.cat-section { margin: var(--s5) 0; }
.cat-section h2 { font: 600 var(--t-title) / 1.25 var(--font); letter-spacing: -0.01em; margin: 0 0 var(--s1); }
.cat-section .when { color: var(--ink-2); margin: 0 0 var(--s3); max-width: 62ch; }
.cat-section .ex, .cat-section .ex-row { margin-top: var(--s3); }
.cat-section details { margin-top: var(--s2); }
.cat-section summary { cursor: pointer; font-size: var(--t-caption); color: var(--ink-2); }
.cat-section details pre { margin-top: var(--s2); padding: var(--s3); background: var(--panel); }