/* mishmesh: one family (Atkinson Hyperlegible Next, with its mono for code and the wordmark),
   cool paper, cobalt cells. The automaton band at the top of each page is the only loud thing. */

@font-face { font-family: "Atkinson Next"; src: url("fonts/atkinson-hyperlegible-next-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Next"; src: url("fonts/atkinson-hyperlegible-next-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Next"; src: url("fonts/atkinson-hyperlegible-next-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Next"; src: url("fonts/atkinson-hyperlegible-next-latin-700-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Mono"; src: url("fonts/atkinson-hyperlegible-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Mono"; src: url("fonts/atkinson-hyperlegible-mono-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --paper: #F8F9FB;
  --ink: #171A26;
  --ink-2: #545B6C;
  --hair: #E0E3EA;
  --cell: #3446D9;
  --mark: #C92A64;
  --code-bg: #EDEFF5;
  --measure: 42rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0F1117;
    --ink: #E8EAF0;
    --ink-2: #A2A8B7;
    --hair: #272C39;
    --cell: #8C9AFF;
    --mark: #FF6F9D;
    --code-bg: #1A1E29;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Atkinson Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  font-kerning: normal;
}
@media (min-width: 720px) { body { font-size: 1.1875rem; } }

::selection { background: color-mix(in srgb, var(--cell) 28%, transparent); }
:focus-visible { outline: 3px solid var(--mark); outline-offset: 2px; border-radius: 2px; }

.skip { position: absolute; left: -999px; top: 0; background: var(--paper); color: var(--ink); padding: 0.5rem 0.75rem; z-index: 10; }
.skip:focus { left: 16px; }

/* the automaton */
canvas.band { display: block; width: 100%; height: 76px; color: var(--cell); }
@media (min-width: 720px) { canvas.band { height: 104px; } }
.home canvas.band { height: clamp(200px, 40vh, 400px); }

/* one column, shared by masthead, main and footer */
.masthead, main, .foot { width: min(var(--measure), 100% - 32px); margin-inline: auto; }

.masthead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem; padding-top: 1.25rem; }
.wordmark { font-family: "Atkinson Mono", ui-monospace, monospace; font-weight: 700; font-size: 1.375rem; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.masthead nav { display: flex; gap: 1.25rem; font-size: 0.9375rem; }
.masthead nav a { color: var(--ink-2); text-decoration: none; }
.masthead nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }

main { padding-top: 2.5rem; }

/* home */
.intro { font-size: 1.1875em; line-height: 1.5; margin: 0 0 3rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.posts { list-style: none; padding: 0; margin: 0; display: grid; gap: 2.25rem; }
.posts .title { font-size: 1.375rem; font-weight: 700; line-height: 1.25; color: var(--ink); text-decoration: none; }
.posts .title:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.posts .summary { margin: 0.35rem 0 0.25rem; }
.posts time { color: var(--ink-2); font-size: 0.875rem; }

/* posts */
.post h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 2.875rem); line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 0.75rem; text-wrap: balance; }
.dateline { color: var(--ink-2); font-size: 0.9375rem; margin: 0 0 2.25rem; }
.draft { display: inline-block; font-size: 0.75rem; line-height: 1.5; color: var(--mark); border: 1px solid currentColor; border-radius: 999px; padding: 0 0.55em; margin-left: 0.4em; vertical-align: 0.1em; }

.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose pre, .prose table { margin: 0 0 1.1em; }
.prose h2 { font-size: 1.5rem; line-height: 1.2; margin: 2.4em 0 0.6em; letter-spacing: -0.01em; }
.prose h3 { font-size: 1.1875rem; line-height: 1.3; margin: 2em 0 0.5em; }
.prose a, .foot a, .after a { color: var(--cell); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.prose a:hover, .foot a:hover, .after a:hover { text-decoration-thickness: 2px; }
.prose li + li { margin-top: 0.3em; }
.prose blockquote { margin-left: 0; padding-left: 1rem; border-left: 3px solid var(--cell); color: var(--ink-2); }
.prose hr { border: 0; border-top: 1px solid var(--hair); margin: 2.5rem 0; }
.prose img { max-width: 100%; height: auto; }
.prose sup, .prose sub { line-height: 0; }
.prose code { font-family: "Atkinson Mono", ui-monospace, monospace; font-size: 0.9em; background: var(--code-bg); padding: 0.08em 0.3em; border-radius: 4px; }
.prose pre { background: var(--code-bg); padding: 0.9rem 1rem; border-radius: 6px; overflow-x: auto; line-height: 1.5; font-size: 0.875rem; }
.prose pre code { background: none; padding: 0; font-size: inherit; }
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.prose th, .prose td { padding: 0.45rem 0.9rem 0.45rem 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.prose th { text-align: left; font-weight: 700; }
.prose td[align="right"], .prose th[align="right"] { text-align: right; }
.prose .credits { border-top: 1px solid var(--hair); padding-top: 1.25rem; margin-top: 3rem; }

.after { margin-top: 3rem; font-size: 0.9375rem; }

.foot { margin-top: 4.5rem; margin-bottom: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--hair); color: var(--ink-2); font-size: 0.875rem; }
.foot p { margin: 0; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* Notebook navigation: terminal details, ordinary links, no decorative controls. */
.masthead { row-gap: 1rem; }
.masthead nav { gap: 1rem; flex-wrap: wrap; }
.masthead nav a { padding-block: .45rem; border-bottom: 2px solid transparent; }
.masthead nav a[aria-current="page"] { color: var(--ink); border-color: var(--cell); }
.wordmark::after { content: "_"; color: var(--cell); }
.pathline { font: .75rem/1.6 "Atkinson Mono", ui-monospace, monospace; color: var(--ink-2); margin: 0 0 .75rem; overflow-wrap: anywhere; }
.home-heading, .index-title { font-size: clamp(2rem, 5vw, 2.75rem); line-height: 1.12; letter-spacing: -.025em; margin: 0 0 1rem; }
.home .intro { font-size: 1.15rem; max-width: 36rem; color: var(--ink-2); margin-bottom: 2rem; }
.sections { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin: 2rem 0 2.5rem; }
.section-card { padding: 1.1rem 0; border-top: 2px solid var(--cell); }
.section-card h2 { margin: 0 0 .45rem; font-size: 1.3rem; }
.section-card p { margin: .4rem 0; font-size: 1rem; color: var(--ink-2); }
.section-card a, .section-head a, .section-meta a, .empty-state a, .related a, .source-files a, .feed-link a { color: var(--cell); text-underline-offset: .2em; }
.section-card h2 a { color: var(--ink); text-decoration: none; }
.section-card h2 a:hover { text-decoration: underline; }
.section-meta { font: .75rem/1.6 "Atkinson Mono", ui-monospace, monospace; color: var(--ink-2); }
.section-head { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; margin: 2.5rem 0 1.3rem; }
.section-head h2 { font-size: 1.2rem; margin: 0; }
.section-head a { font-size: .875rem; }
.topics { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1.1rem 0 1.5rem; }
.topics > span:first-child { font-size: .75rem; color: var(--ink-2); margin-right: .25rem; }
.topics a, a.topic { font: .75rem/1.5 "Atkinson Mono", ui-monospace, monospace; padding: .22rem .5rem; color: var(--ink-2); border: 1px solid var(--hair); border-radius: 3px; text-decoration: none; }
.topics a:hover, a.topic:hover { border-color: var(--cell); color: var(--cell); }
.posts { gap: 0; }
.posts > li { border-top: 1px solid var(--hair); padding: 1.45rem 0; }
.posts .summary { font-size: 1.0625rem; }
.posts .topics { margin: .65rem 0 0; }
.posts .byline { margin: .45rem 0 0; color: var(--ink-2); font-size: .875rem; }
.posts .section-meta { margin: 0 0 .4rem; display: flex; gap: .75rem; }
.byline { font-size: .9375rem; line-height: 1.5; }
.attribution { border-left: 3px solid var(--cell); padding: .7rem 1rem; margin: 0 0 1.5rem; background: var(--code-bg); }
.attribution .byline { margin-top: 0; font-weight: 700; }
.evidence { font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }
details.credits { font-size: .875rem; margin: 1rem 0; }
details.credits summary { cursor: pointer; color: var(--cell); }
details.credits ul { padding-left: 1.25rem; }
details.credits li { margin: .6rem 0; }
details.credits small { display: block; color: var(--ink-2); }
details.credits a, .post-tools a { color: var(--cell); text-underline-offset: .2em; }
.post-tools { font-size: .875rem; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 1rem 0 2rem; }
.empty-state { border-block: 1px solid var(--hair); padding: 1.2rem 0; color: var(--ink-2); }
.empty-state p { margin: .25rem 0; }
.archive-year { margin: 2rem 0 .5rem; }
.archive-year > h2 { font: 1rem/1.5 "Atkinson Mono", ui-monospace, monospace; color: var(--ink-2); }
.section-head > h1 { flex-basis: 100%; font-size: 2.5rem; line-height: 1.15; margin: 0; }
.section-head > .intro { flex-basis: 100%; margin: .5rem 0; font-size: 1.15rem; color: var(--ink-2); }
.credit-kind { display: block; color: var(--ink-2); font-size: .8rem; }
.credit-kind + br { display: none; }
.related { border-top: 1px solid var(--hair); padding-top: 1rem; margin-top: 2.5rem; }
.related h2 { font-size: 1.125rem; }
.source-files { padding-left: 1.25rem; font-size: .875rem; overflow-wrap: anywhere; }
.source-files li { margin: .6rem 0; }
.foot nav, .after { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.foot nav { margin-top: .75rem; }
.foot p + p { margin-top: .4rem; }
.preview-notice { border: 1px solid var(--mark); color: var(--mark); padding: .6rem .8rem; font-size: .875rem; }
@media (max-width: 480px) { .sections { grid-template-columns: 1fr; gap: .25rem; } .masthead nav { gap: .85rem; } .masthead { padding-top: 1rem; } main { padding-top: 2rem; } }