/* ---------------------------------------------------------------------------
   Editorial layer over Pico CSS v2.

   Pico keeps doing the invisible work: resets, dark-mode switching, focus
   rings, accessible defaults. Everything here is about how the page reads,
   plus a bridge so the article's inline SVG figures inherit the palette.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: "Source Serif 4";
  src: url("../../assets/fonts/source-serif-4-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- palette */

:root {
  /* Warm the paper and cool the ink slightly. Pico's defaults are neutral
     grey, which reads as software; paper reads as print. */
  --pico-background-color: #FBFAF7;
  --pico-color:            #1B1D21;
  --pico-muted-color:      #6E727C;
  --pico-muted-border-color: #E3E0D8;
  --pico-primary:          #1F4BB8;
  --pico-primary-hover:    #163790;
  --pico-code-background-color: #F1EFE9;
  --pico-del-color:        #9B3B24;
  --pico-h1-color: var(--pico-color);
  --pico-h2-color: var(--pico-color);
  --pico-h3-color: var(--pico-color);
  --pico-h4-color: var(--pico-color);

  --pico-font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --pico-font-family: var(--pico-font-family-sans-serif);
  --pico-line-height: 1.62;
  --pico-typography-spacing-vertical: 1.35rem;
  --pico-border-radius: 5px;

  --f-display: "Source Serif 4", Charter, "Iowan Old Style", Georgia, serif;
  --f-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  /* px-based, not ch: the ch unit resolves against each element's own font,
     so serif headings and sans body would land on different widths */
  --measure: 52rem;
}

/* Pico ramps the root font size from 100% up to 131.25% as the viewport
   widens, which on a desktop screen reads as oversized for long-form. Pin it
   flat; the measure already keeps the line length right. */
:root { --pico-font-size: 100%; }
@media (min-width:  576px) { :root { --pico-font-size: 100%; } }
@media (min-width:  768px) { :root { --pico-font-size: 100%; } }
@media (min-width: 1024px) { :root { --pico-font-size: 100%; } }
@media (min-width: 1280px) { :root { --pico-font-size: 100%; } }
@media (min-width: 1536px) { :root { --pico-font-size: 100%; } }

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --pico-background-color: #14161A;
    --pico-color:            #E4E2DC;
    --pico-muted-color:      #8A8F99;
    --pico-muted-border-color: #2B2E35;
    --pico-primary:          #7EA0F0;
    --pico-code-background-color: #1D2026;
    --pico-del-color:        #D08466;
  }
}
[data-theme="dark"] {
  --pico-background-color: #14161A;
  --pico-color:            #E4E2DC;
  --pico-muted-color:      #8A8F99;
  --pico-muted-border-color: #2B2E35;
  --pico-primary:          #7EA0F0;
  --pico-code-background-color: #1D2026;
  --pico-del-color:        #D08466;
}

/* bridge: the short names the inline SVG figures already read */
:root, [data-theme] {
  --paper:      var(--pico-background-color);
  --paper-2:    color-mix(in srgb, var(--pico-color) 3.5%, var(--pico-background-color));
  --paper-3:    var(--pico-code-background-color);
  --ink:        var(--pico-color);
  --ink-2:      color-mix(in srgb, var(--pico-color) 70%, var(--pico-muted-color));
  --ink-3:      var(--pico-muted-color);
  --rule:       var(--pico-muted-border-color);
  --rule-2:     color-mix(in srgb, var(--pico-muted-border-color) 55%, var(--pico-color));
  --accent:      var(--pico-primary);
  --accent-soft: color-mix(in srgb, var(--pico-primary) 9%, var(--pico-background-color));
  --leak:        var(--pico-del-color);
  --leak-soft:   color-mix(in srgb, var(--pico-del-color) 9%, var(--pico-background-color));
}

/* ---------------------------------------------------------------- structure */

main.container { max-width: 900px; }

/* Prose sits at a reading measure while figures and tables use the full
   shell. Centring the prose keeps both symmetric about the same axis, so the
   inset reads as deliberate rather than as a ragged right edge. */
article section > p,
article section > h2,
article section > h3,
article section > ul,
article section > ol,
article section > pre,
article section > .callout,
article section > .note { margin-inline: auto; }

/* Pico renders <article> as a card. Long-form wants plain page flow. */
article {
  margin: 0; padding: 0; background: none; box-shadow: none;
  border-radius: 0; overflow: visible; max-height: none; width: auto;
}
article > header, article > footer {
  margin-inline: 0; padding: 0; background: none; border: 0; border-radius: 0;
}
article > header { margin-top: clamp(2.2rem, 6vw, 3.8rem); }

/* prose holds a measure; figures and tables are free to run wide */
article section > p,
article section > h2,
article section > h3,
article section > ul,
article section > ol,
article section > pre,
article section > .callout,
article section > .note,
article > header > * { max-width: var(--measure); }

article section { margin-top: clamp(2.6rem, 5.5vw, 4rem); }

/* ---------------------------------------------------------------- typography */

h1, h2, h3, h4, .post-title, .takeaways h2 {
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -0.011em;
  text-wrap: balance;
}

article > header h1 {
  font-size: clamp(1.95rem, 3.4vw, 2.6rem);
  line-height: 1.09;
  letter-spacing: -0.021em;
  margin-bottom: 0.75rem;
}
article h2 {
  font-size: clamp(1.3rem, 1.9vw, 1.55rem);
  line-height: 1.2;
  margin-bottom: 0.55rem;
}
article h3 {
  font-size: 1.12rem;
  line-height: 1.32;
  margin-bottom: 0.35rem;
  color: var(--ink);
}
article p { margin-bottom: 1.15rem; }
article section > p:last-child { margin-bottom: 0; }
article ul, article ol { margin-bottom: 1.15rem; }
article li { margin-bottom: 0.42rem; }

.lede { font-size: 1.08rem; line-height: 1.6; }

.kicker {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
.standfirst {
  font-family: var(--f-display);
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
  margin-bottom: 0;
}
.byline {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  padding-top: 1.15rem;
  margin-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

a { text-underline-offset: 2px; text-decoration-thickness: 1px; }

/* ---------------------------------------------------------------- topbar */

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 1.15rem;
  font-family: var(--f-mono); font-size: 0.7rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-bottom: 1px solid var(--rule);
}
.topbar a { color: var(--ink-3); text-decoration: none; }
.topbar a:hover { color: var(--accent); }
.topbar .right { display: flex; align-items: center; gap: 1.1rem; color: var(--ink-3); }

#theme-toggle {
  width: auto; margin: 0; padding: 0.3rem 0.6rem;
  font-family: var(--f-mono); font-size: 0.64rem;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-3); background: transparent;
  border: 1px solid var(--rule); border-radius: 4px;
  cursor: pointer; line-height: 1.4;
}
#theme-toggle:hover { color: var(--accent); border-color: var(--accent); }

#progress {
  position: fixed; inset: 0 auto auto 0; height: 2px; width: 0;
  background: var(--accent); z-index: 50; transition: width 90ms linear;
}
@media (prefers-reduced-motion: reduce) { #progress { transition: none; } }

/* ---------------------------------------------------------------- figures */

figure { margin: 1.5rem 0 0; }
figure img { width: 100%; height: auto; display: block; border-radius: 4px; }
figcaption {
  font-size: 0.855rem; line-height: 1.55; color: var(--ink-3);
  max-width: 72ch; margin-top: 0.85rem;
}
figcaption b { color: var(--ink-2); font-weight: 600; }

figure.chart {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: clamp(1rem, 2.4vw, 1.6rem);
}
figure.chart svg { display: block; width: 100%; height: auto; }
figure.chart figcaption { margin-top: 1.1rem; }

/* ---------------------------------------------------------------- tables */

.tscroll {
  overflow-x: auto; border: 1px solid var(--rule); border-radius: 6px;
  background: var(--paper-2); margin: 1.3rem 0 0;
  -webkit-overflow-scrolling: touch;
}
.tscroll table { margin: 0; font-size: 0.865rem; min-width: 34rem; --pico-border-width: 0; }
.tscroll th, .tscroll td {
  padding: 0.58rem 0.85rem; border-bottom: 1px solid var(--rule); background: transparent;
}
.tscroll thead th {
  font-family: var(--f-mono); font-size: 0.63rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500;
  border-bottom: 1px solid var(--rule-2); white-space: nowrap; vertical-align: bottom;
}
.tscroll tbody tr:last-child td { border-bottom: none; }
.tscroll td.num, .tscroll th.num {
  text-align: right; font-family: var(--f-mono);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tscroll td.num b { color: var(--leak); }
.tscroll tbody tr.hi { background: var(--accent-soft); }
.note { font-size: 0.8rem; color: var(--ink-3); margin-top: 0.55rem; }

/* ---------------------------------------------------------------- callouts */

.callout {
  border: 1px solid var(--rule); border-left: 2px solid var(--accent);
  border-radius: 5px; background: var(--accent-soft);
  padding: 1.05rem 1.2rem; margin-top: 1.3rem;
}
.callout .h {
  font-family: var(--f-mono); font-size: 0.63rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem;
}
.callout p { margin: 0; font-size: 0.93rem; }
.callout.warn { border-left-color: var(--leak); background: var(--leak-soft); }
.callout.warn .h { color: var(--leak); }

.takeaways {
  margin-top: clamp(2.6rem, 5vw, 3.6rem);
  background: var(--paper-2); border: 1px solid var(--rule);
  border-left: 2px solid var(--accent); border-radius: 6px;
  padding: clamp(1.3rem, 3.2vw, 2.1rem);
}
.takeaways h2 { font-size: 1.3rem; margin-top: 0; }
.takeaways li { margin-bottom: 0.65rem; }
.takeaways li::marker { color: var(--accent); font-variant-numeric: tabular-nums; }
.takeaways > p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- code */

pre {
  max-width: min(100%, 90ch); position: relative;
  border: 1px solid var(--rule); border-radius: 6px;
  background: var(--paper-3); margin: 1.3rem 0 0;
}
pre > code { font-size: 0.775rem; line-height: 1.7; background: none; }
:not(pre) > code {
  font-size: 0.86em; padding: 0.12em 0.36em;
  border-radius: 3px; background: var(--paper-3);
}

/* Prism tokens, coloured from the palette so they follow the theme */
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: var(--ink-3); font-style: italic; }
.token.punctuation { color: var(--ink-2); }
.token.keyword, .token.boolean, .token.important { color: var(--accent); font-weight: 600; }
.token.string, .token.char, .token.triple-quoted-string { color: var(--leak); }
.token.number { color: var(--leak); }
.token.function, .token.class-name { color: color-mix(in srgb, var(--accent) 62%, var(--ink)); }
.token.builtin, .token.decorator { color: var(--ink-2); }
.token.operator { color: var(--ink-2); background: none; }

.copy-btn {
  position: absolute; top: 0.4rem; right: 0.4rem;
  width: auto; margin: 0; padding: 0.18rem 0.48rem;
  font-family: var(--f-mono); font-size: 0.6rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 4px;
  cursor: pointer; opacity: 0; transition: opacity 120ms ease;
}
pre:hover .copy-btn, .copy-btn:focus-visible { opacity: 1; }

/* ---------------------------------------------------------------- contents */

#toc {
  margin-top: 1.8rem; border: 0; border-left: 2px solid var(--rule);
  background: none; padding: 0.1rem 0 0.1rem 1.1rem; max-width: var(--measure);
}
#toc summary {
  font-family: var(--f-mono); font-size: 0.65rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--ink-3); cursor: pointer;
  list-style: none;
}
#toc summary::-webkit-details-marker { display: none; }
#toc summary::after {
  content: "+";
  float: none;
  display: inline;
  width: auto;
  height: auto;
  margin-inline-start: 0.45rem;
  background-image: none;
  transform: none;
}
#toc[open] summary::after { content: "\2212"; }
#toc ol { margin: 0.9rem 0 0; padding-left: 1.1rem; }
#toc li { margin-bottom: 0.32rem; font-size: 0.88rem; }
#toc li::marker { color: var(--ink-3); font-family: var(--f-mono); font-size: 0.8em; }
#toc a { color: var(--ink-2); text-decoration: none; }
#toc a:hover { color: var(--accent); text-decoration: underline; }

/* ---------------------------------------------------------------- post list */

hgroup { margin-block: clamp(2.2rem, 6vw, 3.6rem) 2.2rem; }
hgroup h1 { font-size: clamp(2rem, 4.4vw, 2.7rem); margin-bottom: 0.5rem; }
hgroup > p { color: var(--ink-2); font-size: 1.05rem; max-width: 56ch; }

.post {
  display: flex; flex-direction: column; gap: 0.5rem;
  border-top: 1px solid var(--rule); padding: 1.7rem 0;
  text-decoration: none; color: inherit;
}
.post:hover .post-title { color: var(--accent); }
.post-meta {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--ink-3);
}
.post-title { font-size: 1.42rem; line-height: 1.22; }
.post-desc { color: var(--ink-2); font-size: 0.95rem; max-width: 62ch; line-height: 1.58; }

/* ---------------------------------------------------------------- footer */

footer.site {
  margin-top: 4.5rem; padding-top: 1.3rem; padding-bottom: 3.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: 0.69rem; color: var(--ink-3);
  display: flex; flex-direction: column; gap: 0.42rem; line-height: 1.75;
}
footer.site a { color: var(--ink-3); }

@media (max-width: 560px) {
  .topbar { font-size: 0.62rem; }
  .topbar .right { gap: 0.7rem; }
  .byline { gap: 0.25rem 1rem; }
}