/* ============================================================
   Flux Design Sandbox
   Combining ideas from: Beat Hagenlocher, Gwern, Daniel Miessler,
   Christian Tietze, Crafting Interpreters, Tufte CSS, David Larlet,
   Adactio, Butterick, Pawel Grzybek
   ============================================================ */

/* --- Design Tokens --- */
:root {
  /* Typography */
  --font-body: "Iowan Old Style", "Palatino Linotype", "URW Palladio L",
    P052, Palatino, serif;
  --font-heading: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans",
    source-sans-pro, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
    Consolas, "DejaVu Sans Mono", monospace;

  /* Vertical rhythm — everything derives from this */
  --base-font-size: 18px;
  --base-line-height: 1.6;
  --lh: calc(var(--base-font-size) * var(--base-line-height));

  /* Colors — warm parchment (Miessler-inspired) */
  --color-bg: #f4f1eb;
  --color-bg-alt: #eae7e0;
  --color-bg-card: #fff;
  --color-text: #2c2c2c;
  --color-text-muted: #6b6b6b;
  --color-text-faint: #999;
  --color-accent: #4a7c59;
  --color-accent-soft: rgba(74, 124, 89, 0.08);
  --color-link: #2a6496;
  --color-link-hover: #1a4060;
  --color-border: #ddd;
  --color-border-light: #eee;
  --color-code-bg: #f0ece4;
  --color-tag-bg: var(--color-accent-soft);
  --color-tag-text: var(--color-accent);
  --color-new: #2d8a56;
  --color-updated: #7a6c2a;
  --color-sidenote-bg: transparent;
  --color-theme-toggle-bg: var(--color-bg-alt);
  --color-theme-toggle-fg: var(--color-text-muted);

  /* Syntax highlighting — Tonsky (light defaults) */
  --hl-string-bg: #e0f6e0;
  --hl-string-fg: #1a3a1a;
  --hl-comment-bg: #f8f0d0;
  --hl-comment-fg: #5a4a1a;
  --hl-def-bg: #ecedff;
  --hl-def-fg: #1a1a3a;
  --hl-constant: #531ab6;
  --hl-number: #531ab6;
  --hl-type: #595959;

  /* Layout */
  --content-width: 640px;
  --content-padding: 1.5rem;
  --margin-note-width: 220px;
}

/* Dark mode handled entirely by [data-theme="dark"] below.
   No @media query needed — JS sets data-theme on load. */

/* --- Theme & Accent Controls --- */

/* --- Site Navigation (inside .site-controls pill) --- */

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.1em;
  font-size: 1rem;
  border-right: 1px solid var(--color-border);
  padding-right: 0.4em;
  margin-right: 0.1em;
}

.site-nav a {
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}

.site-nav a:hover {
  color: var(--color-link);
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .site-nav a:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* --- Site Footer --- */

.site-footer {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-text-faint);
  margin-top: 2lh;
  margin-top: calc(var(--lh) * 2);
  padding-top: 1lh;
  padding-top: var(--lh);
  border-top: 1px solid var(--color-border-light);
}

.site-footer a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-link);
}

/* --- Site Controls (theme toggle) --- */

.site-controls {
  position: fixed;
  top: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  gap: 0.3em;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 99px;
  padding: 0.3em 0.5em;
  z-index: 100;
}

.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0.15em;
  color: var(--color-text-muted);
  transition: color 0.2s;
}

.theme-toggle:hover {
  color: var(--color-text);
}

.accent-dot {
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
  background: none;
}

.accent-dot:hover {
  transform: scale(1.25);
}

.accent-dot.active {
  border-color: var(--color-text);
  box-shadow: 0 0 0 1px var(--color-bg);
}

.accent-divider {
  width: 1px;
  height: 1.2em;
  background: var(--color-border);
  margin: 0 0.15em;
}

/* Force light/dark via data attribute, overriding prefers-color-scheme */
[data-theme="light"] {
  --color-bg: #f4f1eb;
  --color-bg-alt: #eae7e0;
  --color-bg-card: #fff;
  --color-text: #2c2c2c;
  --color-text-muted: #6b6b6b;
  --color-text-faint: #999;
  --color-accent: #4a7c59;
  --color-accent-soft: rgba(74, 124, 89, 0.08);
  --color-link: #2a6496;
  --color-link-hover: #1a4060;
  --color-border: #ddd;
  --color-border-light: #eee;
  --color-code-bg: #f0ece4;
  --color-tag-bg: var(--color-accent-soft);
  --color-tag-text: var(--color-accent);
  --color-new: #2d8a56;
  --color-updated: #7a6c2a;
  --hl-string-bg: #e0f6e0;
  --hl-string-fg: #1a3a1a;
  --hl-comment-bg: #f8f0d0;
  --hl-comment-fg: #5a4a1a;
  --hl-def-bg: #ecedff;
  --hl-def-fg: #1a1a3a;
  --hl-constant: #531ab6;
  --hl-number: #531ab6;
  --hl-type: #595959;
}

[data-theme="light"] a {
  text-decoration-color: rgba(42, 100, 150, 0.3);
}

[data-theme="dark"] {
  --color-bg: #1a1a1f;
  --color-bg-alt: #222228;
  --color-bg-card: rgba(51, 51, 57, 1);
  --color-text: #d4d4d8;
  --color-text-muted: #9ca3af;
  --color-text-faint: #6b7280;
  --color-accent: #6aab7b;
  --color-accent-soft: rgba(106, 171, 123, 0.1);
  --color-link: #7daacd;
  --color-link-hover: #a3c4df;
  --color-border: #333;
  --color-border-light: #2a2a2f;
  --color-code-bg: #2a2a30;
  --color-tag-bg: var(--color-accent-soft);
  --color-tag-text: var(--color-accent);
  --color-new: #4ade80;
  --color-updated: #d4aa3c;
  --hl-string-bg: #1a2e1a;
  --hl-string-fg: #b0d8b0;
  --hl-comment-bg: #2a2518;
  --hl-comment-fg: #d4c89a;
  --hl-def-bg: #1a1a2e;
  --hl-def-fg: #a0a8d0;
  --hl-constant: #b6a0ff;
  --hl-number: #b6a0ff;
  --hl-type: #989898;
}

[data-theme="dark"] a {
  text-decoration-color: rgba(125, 170, 205, 0.3);
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--base-font-size);
  line-height: var(--base-line-height);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  max-width: calc(var(--content-width) + var(--margin-note-width) + 4rem);
  margin: 0 auto;
  padding: var(--content-padding);
  padding-top: 3rem;
}

/* --- Vertical Rhythm ---
   Using lh units where supported, calc fallback otherwise.
   Butterick: 120-145% line spacing.
   Pawel Grzybek: lh/rlh units for rhythm.
   Christian Tietze: consistent custom property spacing. */

p,
ul,
ol,
blockquote,
pre,
table,
figure,
.stream-card {
  margin-bottom: 1lh;
  margin-bottom: var(--lh);
}

/* --- Typography --- */

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text);
}

h1 {
  font-size: 2rem;
  margin-bottom: 0.5lh;
  margin-bottom: calc(var(--lh) * 0.5);
  letter-spacing: -0.02em;
}

h2 {
  font-size: 1.4rem;
  margin-top: 2lh;
  margin-top: calc(var(--lh) * 2);
  margin-bottom: 0.5lh;
  margin-bottom: calc(var(--lh) * 0.5);
}

/* Crafting Interpreters: § anchor on hover */
h2, h3, h4 {
  position: relative;
}
h2 a.anchor,
h3 a.anchor,
h4 a.anchor {
  position: absolute;
  left: -1.5em;
  color: transparent;
  text-decoration: none;
  font-weight: normal;
  transition: color 0.2s ease;
}
h2:hover a.anchor,
h3:hover a.anchor,
h4:hover a.anchor {
  color: var(--color-text-faint);
}

h3 {
  font-size: 1.15rem;
  margin-top: 1.5lh;
  margin-top: calc(var(--lh) * 1.5);
  margin-bottom: 0.25lh;
  margin-bottom: calc(var(--lh) * 0.25);
  font-style: italic;
}

.subtitle {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: normal;
  font-style: italic;
  color: var(--color-text-muted);
  margin-top: -0.25lh;
  margin-top: calc(var(--lh) * -0.25);
  margin-bottom: 1.5lh;
  margin-bottom: calc(var(--lh) * 1.5);
}

/* --- Links ---
   Adactio: styled underlines with text-decoration-* */

a {
  color: var(--color-link);
  text-decoration-line: underline;
  text-decoration-color: rgba(42, 100, 150, 0.3);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

a:hover {
  color: var(--color-link-hover);
  text-decoration-color: var(--color-link-hover);
}

/* Dark link underline color handled by [data-theme="dark"] below. */

/* --- Lists --- */

ul {
  padding-left: 1.5em;
  list-style-type: "✧ ";  /* white star */
}

ol {
  padding-left: 1.5em;
}

li {
  margin-bottom: 0.25lh;
  margin-bottom: calc(var(--lh) * 0.25);
}

/* --- Blockquotes ---
   Stylish, with subtle background, accent border, optional attribution */

blockquote {
  border-left: 3px solid var(--color-accent);
  padding: 1em 1.2em;
  margin-left: 0;
  margin-right: 0;
  color: var(--color-text-muted);
  background: var(--color-accent-soft);
  border-radius: 0 6px 6px 0;
  position: relative;
}

blockquote::before {
  content: "\201C";
  position: absolute;
  top: -0.15em;
  left: 0.15em;
  font-size: 3rem;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.2;
  font-family: Georgia, serif;
}

blockquote p {
  margin-bottom: 0.5em;
}

blockquote p:last-child {
  margin-bottom: 0;
}

blockquote cite,
blockquote .attribution {
  display: block;
  margin-top: 0.5em;
  font-size: 0.85em;
  font-style: normal;
  color: var(--color-text-faint);
  font-family: var(--font-heading);
}

blockquote cite::before,
blockquote .attribution::before {
  content: "— ";
}

/* Epigraph style: centered, no border, more typographic */
blockquote.epigraph {
  border-left: none;
  background: transparent;
  text-align: center;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5em 0;
  font-size: 1.1em;
}

blockquote.epigraph::before {
  content: none;
}

blockquote.epigraph cite {
  text-align: center;
}

/* Pullquote: larger, accent-colored, editorial */
blockquote.pullquote {
  border-left: none;
  border-top: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  border-radius: 0;
  background: transparent;
  padding: 1em 0;
  font-size: 1.15em;
  font-style: italic;
  color: var(--color-accent);
  text-align: center;
}

blockquote.pullquote::before {
  content: none;
}

/* --- Code ---
   Monospace, subtle background, respects rhythm */

code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--color-code-bg);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

pre {
  background: var(--color-code-bg);
  padding: 1em 1.2em;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.5;
}

pre code {
  background: none;
  padding: 0;
}

/* --- Syntax Highlighting ---
   Tonsky-inspired: minimal colors, background-based for key elements.
   Only 4 semantic categories get color:
     1. Strings       → green bg
     2. Constants      → purple/magenta
     3. Definitions    → blue bg
     4. Comments       → warm/yellow bg
   Everything else: default foreground. No bold. */

/* All --hl-* vars defined in :root, [data-theme="light"], and
   [data-theme="dark"] blocks above — no duplicate needed here. */

/* Strings: green background, dark text */
pre .s, pre .s1, pre .s2, pre .string,
pre .str {
  background: var(--hl-string-bg);
  color: var(--hl-string-fg);
  border-radius: 2px;
  padding: 0 0.15em;
}

/* Comments: warm yellow background */
pre .c, pre .c1, pre .cm, pre .comment,
pre .cmt {
  background: var(--hl-comment-bg);
  color: var(--hl-comment-fg);
  border-radius: 2px;
  padding: 0 0.15em;
  font-style: italic;
}

/* Function/method definitions: blue background */
pre .nf, pre .fm, pre .def,
pre .fn-def {
  background: var(--hl-def-bg);
  color: var(--hl-def-fg);
  border-radius: 2px;
  padding: 0 0.15em;
}

/* Constants, numbers, booleans: purple text (no bg — sparse enough) */
pre .mi, pre .mf, pre .mb, pre .mh, pre .mo,
pre .num, pre .const,
pre .kc {
  color: var(--hl-constant);
}

/* Types: dimmed (they're everywhere in Go/Rust) */
pre .nc, pre .type, pre .typ {
  color: var(--hl-type);
}

/* Everything else: default text color — keywords, variables, calls, 
   operators, punctuation. No color, no bold. This IS the code. */
pre .k, pre .kw, pre .kd, pre .kr,    /* keywords */
pre .nb, pre .bp,                       /* builtins */
pre .n, pre .na, pre .nx,               /* names/attrs */
pre .o, pre .p,                         /* operators/punctuation */
pre .nv, pre .vi, pre .var,             /* variables */
pre .nd                                  /* decorators */
{
  color: inherit;
  font-weight: normal;
  font-style: normal;
}

/* --- Org-mode htmlize class mappings (org-html-htmlize-output-type 'css) ---
   Maps org-* face classes to Tonsky highlighting.
   These classes come from Emacs font-lock faces via htmlize. */

/* Strings → green background */
pre .org-string,
pre .org-doc {
  background: var(--hl-string-bg);
  color: var(--hl-string-fg);
  border-radius: 2px;
  padding: 0 0.15em;
}

/* Comments → warm background */
pre .org-comment,
pre .org-comment-delimiter {
  background: var(--hl-comment-bg);
  color: var(--hl-comment-fg);
  border-radius: 2px;
  padding: 0 0.15em;
  font-style: italic;
}

/* Function/type definitions → blue background */
pre .org-function-name {
  background: var(--hl-def-bg);
  color: var(--hl-def-fg);
  border-radius: 2px;
  padding: 0 0.15em;
}

/* Constants, numbers → purple text */
pre .org-constant,
pre .org-number {
  color: var(--hl-constant);
}

/* Types → dimmed */
pre .org-type {
  color: var(--hl-type);
}

/* Nix-mode classes → Tonsky mapping */
pre .org-nix-attribute { color: inherit; }
pre .org-nix-constant { color: var(--hl-constant); }
pre .org-nix-antiquote { color: inherit; }

/* Everything else from org → default (Tonsky: de-emphasize) */
pre .org-keyword,
pre .org-builtin,
pre .org-nix-keyword,
pre .org-nix-builtin,
pre .org-variable-name,
pre .org-property-name,
pre .org-css-property,
pre .org-css-selector,
pre .org-preprocessor,
pre .org-negation-char {
  color: inherit;
  font-weight: normal;
  font-style: normal;
}

/* --- Org export structure mappings --- */

/* Main content wrapper */
article.content {
  counter-reset: sidenote-counter;
}

/* Section structure */
.outline-2,
.outline-3,
.outline-4 {
  /* no special styling needed, headings handle it */
}

/* Code blocks from org */
.org-src-container {
  margin-bottom: 1lh;
  margin-bottom: var(--lh);
}

.org-src-container > pre.src {
  background: var(--color-code-bg);
  padding: 1em 1.2em;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.5;
  font-family: var(--font-mono);
}

/* ox-tufte sidenote toggle (checkbox hack for mobile) */
.margin-toggle {
  display: none;
}

label.margin-toggle.sidenote-number {
  display: inline;
}

.margin-toggle:checked + .sidenote,
.margin-toggle:checked + .marginnote {
  display: block;
}

/* ox-tufte epigraph (blockquote with caption/footer) */
blockquote footer {
  font-size: 0.85em;
  font-style: normal;
  color: var(--color-text-faint);
  font-family: var(--font-heading);
  margin-top: 0.5em;
}

blockquote footer::before {
  content: "— ";
}

/* Org figure numbering */
.figure-number {
  font-family: var(--font-heading);
  font-weight: 600;
  font-style: normal;
}

/* Org tags on headings */
.tag {
  font-family: var(--font-mono);
  font-size: 0.7em;
  font-weight: normal;
  color: var(--color-text-faint);
}

/* Org timestamps */
.timestamp-wrapper,
.timestamp {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--color-text-faint);
}

a.timestamp-link {
  color: var(--color-text-faint);
  text-decoration: none;
  border-bottom: 1px dotted var(--color-border);
  transition: color 0.2s, border-color 0.2s;
}

a.timestamp-link:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* Org lists */
.org-ul {
  padding-left: 1.5em;
  list-style-type: "✧ ";
}

.org-ol {
  padding-left: 1.5em;
}

/* Subtitle from #+SUBTITLE */
.subtitle {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: normal;
  font-style: italic;
  color: var(--color-text-muted);
  margin-top: calc(var(--lh) * -0.25);
  margin-bottom: calc(var(--lh) * 1.5);
}

/* Postamble (footer) - hide validation link */
.status .validation {
  display: none;
}

.status {
  margin-top: calc(var(--lh) * 3);
  padding-top: var(--lh);
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem;
  color: var(--color-text-faint);
  font-family: var(--font-heading);
}

/* --- Sidenotes / Margin Notes ---
   Tufte CSS + Gwern: margin notes for thinking */

.sidenote,
.marginnote {
  float: right;
  clear: right;
  margin-right: calc(-1 * var(--margin-note-width) - 2rem);
  width: var(--margin-note-width);
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--color-text-muted);
  position: relative;
}

.sidenote {
  border-left: 2px solid var(--color-border);
  padding-left: 0.75em;
}

.sidenote-number {
  counter-increment: sidenote-counter;
}

.sidenote-number::after {
  content: counter(sidenote-counter);
  font-size: 0.7em;
  position: relative;
  top: -0.5em;
  color: var(--color-accent);
  padding-left: 0.1em;
}

.sidenote::before {
  content: counter(sidenote-counter);
  font-size: 0.7em;
  position: relative;
  top: -0.5em;
  color: var(--color-accent);
  padding-right: 0.3em;
}

/* Collapse sidenotes on small screens */
@media (max-width: 900px) {
  body {
    max-width: var(--content-width);
  }
  .sidenote,
  .marginnote {
    float: none;
    display: block;
    margin: 0.5lh 0;
    margin: calc(var(--lh) * 0.5) 0;
    width: 100%;
    font-size: 0.85rem;
    background: var(--color-bg-alt);
    padding: 0.75em 1em;
    border-radius: 4px;
    border-left: 3px solid var(--color-border);
    margin-right: 0;
  }
}

/* --- Callouts ---
   Crafting Interpreters design-note style, extended with types.
   Each type has: left border color, subtle bg, icon prefix. */

:root {
  --callout-note-color: #2a6496;
  --callout-note-bg: rgba(42, 100, 150, 0.06);
  --callout-tip-color: #4a7c59;
  --callout-tip-bg: rgba(74, 124, 89, 0.06);
  --callout-info-color: #3a7ca5;
  --callout-info-bg: rgba(58, 124, 165, 0.06);
  --callout-warning-color: #9a7b2a;
  --callout-warning-bg: rgba(154, 123, 42, 0.06);
  --callout-danger-color: #b44;
  --callout-danger-bg: rgba(180, 68, 68, 0.06);
  --callout-design-color: var(--color-accent);
  --callout-design-bg: var(--color-accent-soft);
}

/* Dark callout colors handled by [data-theme="dark"] below. */

[data-theme="light"] {
  --callout-note-color: #2a6496;
  --callout-note-bg: rgba(42, 100, 150, 0.06);
  --callout-tip-color: #4a7c59;
  --callout-tip-bg: rgba(74, 124, 89, 0.06);
  --callout-info-color: #3a7ca5;
  --callout-info-bg: rgba(58, 124, 165, 0.06);
  --callout-warning-color: #9a7b2a;
  --callout-warning-bg: rgba(154, 123, 42, 0.06);
  --callout-danger-color: #b44;
  --callout-danger-bg: rgba(180, 68, 68, 0.06);
}

[data-theme="dark"] {
  --callout-note-color: #7daacd;
  --callout-note-bg: rgba(125, 170, 205, 0.08);
  --callout-tip-color: #6aab7b;
  --callout-tip-bg: rgba(106, 171, 123, 0.08);
  --callout-info-color: #6aafcf;
  --callout-info-bg: rgba(106, 175, 207, 0.08);
  --callout-warning-color: #d4aa3c;
  --callout-warning-bg: rgba(212, 170, 60, 0.08);
  --callout-danger-color: #e07070;
  --callout-danger-bg: rgba(224, 112, 112, 0.08);
}

.callout {
  border-left: 3px solid var(--callout-border, var(--color-accent));
  background: var(--callout-bg, var(--color-accent-soft));
  border-radius: 0 6px 6px 0;
  padding: 0.9em 1.2em;
  margin: 1lh 0;
  margin: var(--lh) 0;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.callout-title {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.72rem;
  color: var(--callout-border, var(--color-accent));
  margin-bottom: 0.4em;
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.callout-title::before {
  font-size: 1em;
  line-height: 1;
}

.callout p:last-child {
  margin-bottom: 0;
}

/* --- Callout Types --- */

.callout-note {
  --callout-border: var(--callout-note-color);
  --callout-bg: var(--callout-note-bg);
}
.callout-note .callout-title::before { content: "✎"; }

.callout-tip {
  --callout-border: var(--callout-tip-color);
  --callout-bg: var(--callout-tip-bg);
}
.callout-tip .callout-title::before { content: "✦"; }

.callout-info {
  --callout-border: var(--callout-info-color);
  --callout-bg: var(--callout-info-bg);
}
.callout-info .callout-title::before { content: "ℹ"; }

.callout-warning {
  --callout-border: var(--callout-warning-color);
  --callout-bg: var(--callout-warning-bg);
}
.callout-warning .callout-title::before { content: "⚠"; }

.callout-danger {
  --callout-border: var(--callout-danger-color);
  --callout-bg: var(--callout-danger-bg);
}
.callout-danger .callout-title::before { content: "✖"; }

.callout-design {
  --callout-border: var(--callout-design-color);
  --callout-bg: var(--callout-design-bg);
}
.callout-design .callout-title::before { content: "◆"; }

/* --- Dropcap ---
   Gwern: classic typographic dropcap */

.dropcap::first-letter {
  float: left;
  font-size: 3.2em;
  line-height: 0.8;
  padding-right: 0.08em;
  padding-top: 0.07em;
  font-weight: 600;
  color: var(--color-accent);
}

/* --- Small Caps ---
   Gwern: small caps for emphasis/theming */

.smallcaps {
  font-variant: small-caps;
  letter-spacing: 0.05em;
}

/* --- Horizontal Rule --- */

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 2lh 0;
  margin: calc(var(--lh) * 2) 0;
}

/* ============================================================
   STREAM / FLUX COMPONENTS
   Inspired by Beat Hagenlocher's /stream/
   ============================================================ */

.flux {
  counter-reset: sidenote-counter;
}

.flux-header {
  margin-bottom: 2lh;
  margin-bottom: calc(var(--lh) * 2);
}

.flux-header h1 {
  font-size: 1.6rem;
}

.flux-header .description {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.flux-feed-links {
  display: flex;
  gap: 1em;
  margin-top: 0.5lh;
  margin-top: calc(var(--lh) * 0.5);
  font-size: 0.8rem;
  font-family: var(--font-mono);
}

.flux-feed-links a {
  color: var(--color-text-faint);
  text-decoration: none;
  border: 1px solid var(--color-border);
  padding: 0.2em 0.6em;
  border-radius: 4px;
  transition: all 0.2s;
}

.flux-feed-links a:hover {
  color: var(--color-link);
  border-color: var(--color-link);
}

/* --- Stream Card (streamlet) ---
   Beat-style: rounded card with date, title, body, tags */

.stream-card {
  background: var(--color-bg-card);
  border-radius: 10px;
  padding: 1.2em 1.4em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 0 rgba(148, 163, 184, 0.06);
  position: relative;
}

.stream-card .card-date {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text-faint);
  margin-bottom: 0.3em;
}

.stream-card .card-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.5em;
  line-height: 1.3;
}

.stream-card .card-body {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.stream-card .card-body p:last-child {
  margin-bottom: 0;
}

/* Section anchor on cards */
.stream-card .card-anchor {
  position: absolute;
  left: -1.5em;
  top: 1.2em;
  font-size: 1.1rem;
  color: transparent;
  text-decoration: none;
  transition: color 0.2s;
}

.stream-card:hover .card-anchor {
  color: var(--color-text-faint);
}

/* --- Tags --- */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  margin-top: 0.7em;
}

.tag {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 500;
  background: var(--color-tag-bg);
  color: var(--color-tag-text);
  padding: 0.25em 0.7em;
  border-radius: 99px;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

a.tag:hover {
  background: var(--color-tag-text);
  color: var(--color-bg);
}

/* Tags inline in headings (org export) */
h2 .tags,
h3 .tags,
h4 .tags {
  display: inline-flex;
  margin-top: 0;
  margin-left: 0.5em;
  vertical-align: middle;
}

/* --- Page Update Entry ---
   Beat-style: compact one-liner for new (+) or updated (~) pages */

.page-entry {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.5em 0.8em;
  border-radius: 8px;
  border: 1px solid var(--color-border-light);
  transition: background 0.2s;
  text-decoration: none;
  margin-bottom: 0.4lh;
  margin-bottom: calc(var(--lh) * 0.4);
}

.page-entry:hover {
  background: var(--color-bg-alt);
  text-decoration: none;
}

.page-entry .marker {
  font-size: 0.8rem;
  font-weight: 600;
  flex-shrink: 0;
}

.page-entry .marker.new {
  color: var(--color-new);
}

.page-entry .marker.updated {
  color: var(--color-updated);
}

.page-entry .page-title {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text);
  flex: 1;
}

.page-entry .page-date {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--color-text-faint);
  margin-left: auto;
  white-space: nowrap;
}

.page-entry .arrow {
  color: var(--color-accent);
  font-size: 0.75rem;
  transition: transform 0.2s;
}

.page-entry:hover .arrow {
  transform: rotate(0deg) translateY(1px);
}

/* --- GitHub Entry ---
   Compact PR/issue/release entries */

.github-entry {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  padding: 0.6em 0;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 0.88rem;
}

.github-entry:last-child {
  border-bottom: none;
}

.github-entry .gh-icon {
  flex-shrink: 0;
  width: 1.3em;
  text-align: center;
  margin-top: 0.15em;
}

.github-entry .gh-icon.pr {
  color: var(--color-new);
}
.github-entry .gh-icon.issue {
  color: var(--color-updated);
}
.github-entry .gh-icon.release {
  color: var(--color-accent);
}

.github-entry .gh-content {
  flex: 1;
  min-width: 0;
}

.github-entry .gh-title {
  color: var(--color-text);
}

.github-entry .gh-title a {
  text-decoration: none;
}

.github-entry .gh-title a:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-link);
}

.github-entry .gh-repo {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-text-faint);
}

.github-entry .gh-date {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-faint);
  white-space: nowrap;
  margin-top: 0.15em;
}

/* --- Bookmark Entry --- */

.bookmark-entry {
  padding: 0.6em 0;
  border-bottom: 1px solid var(--color-border-light);
}

.bookmark-entry:last-child {
  border-bottom: none;
}

.bookmark-entry .bm-header {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
}

.bookmark-entry .bm-icon {
  flex-shrink: 0;
  color: var(--color-accent);
}

.bookmark-entry .bm-title {
  font-size: 0.9rem;
  flex: 1;
  min-width: 0;
}

.bookmark-entry .bm-date {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-faint);
  white-space: nowrap;
}

.bookmark-entry .bm-note {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-top: 0.2em;
  margin-left: 1.8em;
  font-style: italic;
}

.bookmark-entry .bm-meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-faint);
  margin-top: 0.2em;
}

/* --- Release highlight --- */

.release-card {
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent);
  border-radius: 8px;
  padding: 0.8em 1em;
  margin-bottom: 1lh;
  margin-bottom: var(--lh);
}

.release-card .release-version {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--color-accent);
}

.release-card .release-project {
  font-family: var(--font-heading);
  font-weight: 500;
}

.release-card .release-date {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text-faint);
}

/* --- Flux navigation --- */

.flux-years {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-text-faint);
  margin-bottom: 1.5lh;
  margin-bottom: calc(var(--lh) * 1.5);
}

.flux-years a {
  color: var(--color-text-muted);
}

.flux-years strong {
  color: var(--color-text);
  text-decoration: none;
}

.flux-stats {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-text-faint);
  margin-bottom: 1.5lh;
  margin-bottom: calc(var(--lh) * 1.5);
}

.flux-more {
  font-size: 0.85rem;
  margin-top: 1lh;
  margin-top: var(--lh);
}

.flux-archive-link {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-top: 2lh;
  margin-top: calc(var(--lh) * 2);
}

/* --- Year Separator --- */

.year-separator {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-faint);
  margin: 2lh 0 1lh 0;
  margin: calc(var(--lh) * 2) 0 calc(var(--lh) * 1) 0;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--color-border);
}

/* --- Table --- */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-bottom: 1lh;
  margin-bottom: var(--lh);
}

th,
td {
  text-align: left;
  padding: 0.4em 0.8em;
  border-bottom: 1px solid var(--color-border-light);
}

th {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

/* --- Footer --- */

footer {
  margin-top: 3lh;
  margin-top: calc(var(--lh) * 3);
  padding-top: 1lh;
  padding-top: var(--lh);
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem;
  color: var(--color-text-faint);
  font-family: var(--font-heading);
}

/* --- Figures & Images --- */

figure {
  margin: 1.5lh 0;
  margin: calc(var(--lh) * 1.5) 0;
}

figure img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

figcaption {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: 0.5em;
  line-height: 1.4;
}

figcaption strong {
  font-style: normal;
  color: var(--color-text);
}

/* Full-width figure — breaks out of content column */
figure.fullwidth {
  max-width: calc(var(--content-width) + var(--margin-note-width) + 2rem);
  width: 100%;
}

figure.fullwidth img {
  width: 100%;
}

/* Margin figure — Tufte-style, floats in the right margin */
figure.margin {
  float: right;
  clear: right;
  margin-right: calc(-1 * var(--margin-note-width) - 2rem);
  width: var(--margin-note-width);
  margin-top: 0;
  margin-bottom: 1lh;
  margin-bottom: var(--lh);
}

figure.margin img {
  width: 100%;
}

figure.margin figcaption {
  font-size: 0.75rem;
}

@media (max-width: 900px) {
  figure.margin {
    float: none;
    width: 100%;
    margin-right: 0;
    margin: 1lh 0;
    margin: var(--lh) 0;
  }
}

/* Bordered figure — subtle frame */
figure.bordered img {
  border: 1px solid var(--color-border);
  padding: 0.5em;
  background: var(--color-bg-card);
  border-radius: 6px;
}

/* Figure grid — side by side images */
.figure-grid {
  display: grid;
  gap: 1em;
  margin: 1.5lh 0;
  margin: calc(var(--lh) * 1.5) 0;
}

.figure-grid.cols-2 {
  grid-template-columns: 1fr 1fr;
}

.figure-grid.cols-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 600px) {
  .figure-grid.cols-2,
  .figure-grid.cols-3 {
    grid-template-columns: 1fr;
  }
}

.figure-grid figure {
  margin: 0;
}

/* Screenshot — drop shadow, slight rounding */
figure.screenshot img {
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12),
              0 1px 4px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] figure.screenshot img {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4),
              0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Inline image in text — small, flows with text */
img.inline {
  display: inline;
  height: 1.2em;
  width: auto;
  vertical-align: text-bottom;
  margin: 0 0.1em;
}

/* --- Color Palette Demo --- */

.palette {
  display: flex;
  gap: 0.5em;
  flex-wrap: wrap;
  margin-bottom: 1lh;
  margin-bottom: var(--lh);
}

.swatch {
  width: 3em;
  height: 3em;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: flex-end;
  padding: 0.2em;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* --- Accent Picker --- */

.accent-picker {
  margin-bottom: 1lh;
  margin-bottom: var(--lh);
}

.accent-group {
  margin-bottom: 0.8em;
}

.accent-group-label {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
  margin-bottom: 0.3em;
}

.accent-group .palette {
  margin-bottom: 0.3em;
}

.accent-swatch {
  width: 2.4em;
  height: 2.4em;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  font-size: 0;
  /* color set via inline style, overridden by JS on theme change */
}

.accent-swatch:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.accent-swatch.active {
  border-color: var(--color-text);
  transform: scale(1.1);
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-text);
}

.accent-current {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-top: 0.5em;
}

.accent-current span {
  color: var(--color-accent);
  font-weight: 600;
}

/* --- Utility classes (avoid inline styles for CSP) --- */

.nav-toc {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  margin-bottom: calc(var(--lh) * 2);
}

.text-base { font-size: 1rem; }
.text-sm { font-size: 0.85rem; }
.text-italic { font-style: italic; }
.text-bold { font-weight: bold; }
.text-semibold { font-weight: 600; }
.mt-sm { margin-top: 0.3em; }

.specimen-headings {
  background: transparent;
  padding: 0;
}
.specimen-headings h1,
.specimen-headings h2,
.specimen-headings h3 {
  margin: 0.3em 0;
}
.specimen-headings h1 { margin: 0; }

/* Link style demos */
a.link-thick { text-decoration-thickness: 2px; }
a.link-offset { text-underline-offset: 0.3em; }
a.link-accent { text-decoration-color: var(--color-accent); }
a.link-dotted { text-decoration-style: dotted; }

/* Tonsky inline highlight pills */
.hl-pill {
  padding: 0.1em 0.3em;
  border-radius: 2px;
}
.hl-pill-string { background: var(--hl-string-bg); }
.hl-pill-comment { background: var(--hl-comment-bg); font-style: italic; }
.hl-pill-def { background: var(--hl-def-bg); }
.hl-pill-constant { color: var(--hl-constant); }

/* Stream card compact variant (for grouped entries) */
.stream-card-compact {
  padding: 0.8em 1.2em;
}
.stream-card-compact .card-date {
  margin-bottom: 0.6em;
}

/* Color palette demo swatches — colors set by JS */
.swatch {
  /* background set via data-bg attribute + JS */
}

/* --- Typography Specimen --- */

.specimen {
  padding: 1.2em;
  background: var(--color-bg-alt);
  border-radius: 8px;
  margin-bottom: 1lh;
  margin-bottom: var(--lh);
}

.specimen .label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-faint);
  margin-bottom: 0.3em;
}

.specimen-serif {
  font-family: var(--font-body);
}
.specimen-sans {
  font-family: var(--font-heading);
}
.specimen-mono {
  font-family: var(--font-mono);
}

/* Marker candidates for comparison (sandbox only) */
ul.marker-endash      { list-style-type: "– "; }
ul.marker-hyphen      { list-style-type: "⁃ "; }
ul.marker-hedera      { list-style-type: "❧ "; }
ul.marker-reference   { list-style-type: "※ "; }