/* ---------- fonts (Fira Sans + Fira Code, OFL, self-hosted) ---------- */
@font-face { font-family: "Fira Sans"; src: url("/fonts/fira-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fira Sans"; src: url("/fonts/fira-sans-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Fira Sans"; src: url("/fonts/fira-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Fira Sans"; src: url("/fonts/fira-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Fira Code"; src: url("/fonts/fira-code-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fira Code"; src: url("/fonts/fira-code-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Fira Code"; src: url("/fonts/fira-code-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ---------- forest palette, light / dark ---------- */
:root {
  color-scheme: light dark;
  --bg:       light-dark(#f5f2e9, #141b16); /* paper / forest floor */
  --fg:       light-dark(#1f2a22, #dde3d6); /* ink / lichen */
  --muted:    light-dark(#5c6b5f, #8f9c8f);
  --accent:   light-dark(#3f6b3a, #9cc283); /* moss / sage */
  --accent-2: light-dark(#8a5a3b, #d39b6a); /* bark / amber */
  --fern:     light-dark(#7c9a6a, #5f7f5a);
  --rule:     light-dark(#d8d2c2, #2c3a30);
  --code-bg:  light-dark(#ece7da, #1b241e);

  --sans: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Fira Code", ui-monospace, "SF Mono", Menlo, monospace;
  --measure: 40rem;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0 auto;
  max-width: calc(var(--measure) + 2rem);
  padding: 0 1rem;
  background: var(--bg);
  color: var(--fg);
  font: 400 1.0625rem/1.65 var(--sans);
  text-rendering: optimizeLegibility;
}
main { min-height: 60vh; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent-2); }
::selection { background: color-mix(in srgb, var(--fern) 40%, transparent); }

h1, h2, h3, h4 { font-family: var(--mono); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
h1 { font-size: 1.6rem; margin: 2.5rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 2.5rem 0 0.75rem; }
h3 { font-size: 1rem; margin: 2rem 0 0.5rem; }

p, ul, ol, blockquote, pre, table, figure { margin: 0 0 1.25rem; }
img { max-width: 100%; height: auto; border-radius: 4px; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

blockquote {
  margin-left: 0; padding-left: 1rem;
  border-left: 3px solid var(--fern);
  color: var(--muted);
}

code, pre, kbd { font-family: var(--mono); font-size: 0.875em; }
:not(pre) > code { background: var(--code-bg); padding: 0.1em 0.35em; border-radius: 3px; }
pre {
  background: var(--code-bg);
  padding: 1rem 1.1rem;
  border-radius: 6px;
  overflow-x: auto;
  line-height: 1.55;
  tab-size: 4;
}

table { border-collapse: collapse; width: 100%; font-size: 0.95em; }
th, td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--rule); }
th { font-family: var(--mono); font-weight: 500; }

.muted { color: var(--muted); }

/* ---------- header / footer ---------- */
.site-header {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem;
  padding: 2rem 0 1rem;
  font-family: var(--mono);
}
.wordmark { font-weight: 600; font-size: 1.1rem; color: var(--fg); text-decoration: none; }
.wordmark::before { content: "~/"; color: var(--fern); }
.site-header nav { display: flex; gap: 1.25rem; font-size: 0.95rem; }
.site-header nav a { color: var(--muted); text-decoration: none; }
.site-header nav a:hover, .site-header nav a[aria-current] { color: var(--accent); }

.site-footer {
  display: flex; gap: 1.25rem;
  margin-top: 4rem; padding: 1.5rem 0 3rem;
  border-top: 1px solid var(--rule);
  font: 0.85rem var(--mono); color: var(--muted);
}

/* ---------- home ---------- */
.intro { font-size: 1.15rem; margin-top: 2rem; }

.link-list, .post-list { list-style: none; padding: 0; }
.link-list li { margin-bottom: 0.6rem; }
.link-list a { font-family: var(--mono); }
.link-list .muted { display: block; font-size: 0.95em; }

.post-list li { display: flex; gap: 1rem; margin-bottom: 0.45rem; }
.post-list time { flex: none; font: 0.9em var(--mono); color: var(--muted); padding-top: 0.1em; }

/* ---------- posts ---------- */
.post > header h1 { margin-bottom: 0.4rem; }
.meta { font: 0.9rem var(--mono); color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; margin-bottom: 2rem; }

/* mermaid: hide the source until it has rendered into an SVG */
pre.mermaid { background: none; padding: 0; text-align: center; font-family: var(--sans); }
pre.mermaid:not([data-processed]) { visibility: hidden; }

@media (max-width: 480px) {
  .post-list li { flex-direction: column; gap: 0; margin-bottom: 0.9rem; }
}

/* ---------- MicroLighter "forest" syntax theme ---------- */
[data-syntax-theme=forest] {
  --syntax-background: var(--code-bg);
  --syntax-foreground: var(--fg);
  --syntax-comment:  light-dark(#7d8a7f, #6f7e72);
  --syntax-keyword:  light-dark(#3f6b3a, #9cc283);
  --syntax-operator: light-dark(#5c6b5f, #a3aea3);
  --syntax-string:   light-dark(#8a5a3b, #d39b6a);
  --syntax-constant: light-dark(#a0522d, #e0b07d);
  --syntax-function: light-dark(#2f5d62, #8cc4bf);
  --syntax-type:     light-dark(#5a6e2a, #c2cf86);
  --syntax-variable: light-dark(#1f2a22, #dde3d6);
  --syntax-property: light-dark(#2f5d62, #8cc4bf);
  --syntax-tag:      light-dark(#3f6b3a, #9cc283);
  --syntax-selector: light-dark(#5a6e2a, #c2cf86);
  --syntax-inserted: light-dark(#3f6b3a, #9cc283);
  --syntax-deleted:  light-dark(#a23b2a, #e08a76);
}
[data-syntax-theme=forest] pre:has(code) { background-color: var(--syntax-background); color: var(--syntax-foreground); }
::highlight(comment), ::highlight(quote) { color: var(--syntax-comment); font-style: italic; }
::highlight(keyword), ::highlight(storage), ::highlight(at-rule), ::highlight(doctype), ::highlight(important), ::highlight(section) { color: var(--syntax-keyword); }
::highlight(operator), ::highlight(punctuation) { color: var(--syntax-operator); }
::highlight(string), ::highlight(regexp), ::highlight(attribute-value), ::highlight(link), ::highlight(raw) { color: var(--syntax-string); }
::highlight(numeric), ::highlight(boolean), ::highlight(constant), ::highlight(symbol), ::highlight(character-entity), ::highlight(anchor), ::highlight(entity) { color: var(--syntax-constant); }
::highlight(function), ::highlight(decorator), ::highlight(animation) { color: var(--syntax-function); }
::highlight(type), ::highlight(support) { color: var(--syntax-type); }
::highlight(variable), ::highlight(interpolation) { color: var(--syntax-variable); }
::highlight(property), ::highlight(key), ::highlight(attribute-name) { color: var(--syntax-property); }
::highlight(tag) { color: var(--syntax-tag); }
::highlight(selector) { color: var(--syntax-selector); }
::highlight(inserted) { color: var(--syntax-inserted); }
::highlight(deleted) { color: var(--syntax-deleted); }

/* ---------- styleguide helpers ---------- */
.swatches { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.75rem; }
.swatches li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.swatch { flex: none; width: 2rem; height: 2rem; border-radius: 4px; border: 1px solid var(--rule); }
.specimen-family { margin-bottom: 1.5rem; }
.specimen-family p { margin: 0 0 0.35rem; }
.footnotes { font-size: 0.9rem; color: var(--muted); }