/* ========================================================================== A.Z. | tl;dr; — site stylesheet Plain CSS, no preprocessor. Sections: 1 Fonts · 2 Tokens · 3 Base · 4 Layout · 5 Header/nav · 6 Footer 7 Post list · 8 Home · 9 Article/prose · 10 Code · 11 Tables · 12 Media 13 TOC · 14 Post footer/nav · 15 Talks · 16 Pages (hire/about/404) 18 Motion/print ========================================================================== */ /* 1 — Fonts (self-hosted, SIL OFL; no third-party requests) */ @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/assets/fonts/source-serif-4-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/assets/fonts/source-serif-4-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 200 900; font-display: swap; src: url("/assets/fonts/source-serif-4-latin-ext-wght-italic.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 200 900; font-display: swap; src: url("/assets/fonts/source-serif-4-latin-wght-italic.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/assets/fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/assets/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* 2 — Tokens --------------------------------------------------------------- Light ("warm paper") is the default; dark ("graphite") applies from the OS preference unless the reader has chosen explicitly (data-theme on ). data-theme also works on any nested element. */ :root, [data-theme="light"] { color-scheme: light; --bg: #faf7f1; /* page */ --surface: #f3eee4; /* code, table head, quiet panels */ --surface-2: #eae3d6; /* hover on surface, kbd */ --border: #dcd3c3; /* hairlines */ --border-strong: #8f8573; --text: #2a2c30; /* body copy */ --heading: #16181b; --muted: #5d6067; /* meta, captions */ --accent: #8a4708; /* the one accent: links, active nav, markers */ --accent-hover: #6b3504; --accent-soft: #8a47081f; /* tinted backgrounds */ --focus: #8a4708; --ok: #2f6b3a; --fail: #a3271d; --paper: #ffffff; /* backing for images/diagrams */ --tok-comment: #63676e; --tok-keyword: #8a4708; --tok-string: #2f6b3a; --tok-number: #7a3a8c; --tok-func: #1d5a96; --tok-type: #0f6668; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #15171b; --surface: #1d2025; --surface-2: #262a31; --border: #30353e; --border-strong: #636b79; --text: #d5d8de; --heading: #f2f3f5; --muted: #9ba2ad; --accent: #e2a85f; --accent-hover: #f3c288; --accent-soft: #e2a85f24; --focus: #e2a85f; --ok: #8fce9b; --fail: #f09a8e; --paper: #ffffff; --tok-comment: #8d949f; --tok-keyword: #e2a85f; --tok-string: #a6cfa0; --tok-number: #cfa6dc; --tok-func: #8fbbe6; --tok-type: #7fcac3; } } [data-theme="dark"] { color-scheme: dark; --bg: #15171b; --surface: #1d2025; --surface-2: #262a31; --border: #30353e; --border-strong: #636b79; --text: #d5d8de; --heading: #f2f3f5; --muted: #9ba2ad; --accent: #e2a85f; --accent-hover: #f3c288; --accent-soft: #e2a85f24; --focus: #e2a85f; --ok: #8fce9b; --fail: #f09a8e; --paper: #ffffff; --tok-comment: #8d949f; --tok-keyword: #e2a85f; --tok-string: #a6cfa0; --tok-number: #cfa6dc; --tok-func: #8fbbe6; --tok-type: #7fcac3; } :root { --font-serif: "Source Serif 4", Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif; --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; --measure: 40rem; /* reading column: ~72 characters at 18px serif */ --breakout: 5rem; /* how far code/tables/figures may extend per side on desktop */ --gutter: 1.25rem; /* page side padding (1rem under 400px) */ /* spacing scale (rem): 4 8 12 16 24 32 48 64 96 */ --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --radius: 4px; } /* 3 — Base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5rem; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.6; font-optical-sizing: auto; text-rendering: optimizeLegibility; min-height: 100vh; display: flex; flex-direction: column; overflow-wrap: break-word; } main { flex: 1; } img, svg, video, iframe { max-width: 100%; } h1, h2, h3, h4, h5, h6 { color: var(--heading); font-weight: 600; line-height: 1.2; text-wrap: balance; } a { color: var(--accent); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; } a:hover, a.is-hover { color: var(--accent-hover); text-decoration-thickness: 2px; } :focus { outline: none; } :focus-visible, .is-focus { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; } ::selection { background: var(--accent); color: var(--bg); } hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-7) 0; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; left: var(--gutter); top: -4rem; z-index: 100; background: var(--heading); color: var(--bg); padding: .6rem 1rem; font: 600 .9rem var(--font-sans); text-decoration: none; border-radius: var(--radius); } .skip-link:focus { top: .75rem; color: var(--bg); } /* small UI text: sans for controls/meta, mono for dates + brand details */ .meta, .eyebrow { font-family: var(--font-mono); font-size: .8125rem; color: var(--muted); letter-spacing: .01em; } .eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; } /* 4 — Layout */ .wrap { width: 100%; max-width: calc(var(--measure) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .page { padding-block: var(--s-7) var(--s-8); } .page-head { margin-bottom: var(--s-7); } .page-head h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.5rem); margin: 0 0 var(--s-3); letter-spacing: -.01em; } .page-head .lede { color: var(--muted); margin: 0; font-size: 1.125rem; } .page-head .hash { color: var(--muted); font-weight: 400; } .back-link { font: 500 .875rem var(--font-sans); display: inline-block; margin-bottom: var(--s-5); text-decoration: none; } .back-link:hover { text-decoration: underline; } /* 5 — Header + navigation */ .site-header { border-bottom: 1px solid var(--border); background: var(--bg); } .site-header .wrap { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-4); padding-block: .875rem; } .brand { font: 600 1rem var(--font-mono); color: var(--heading); text-decoration: none; letter-spacing: -.01em; margin-right: auto; white-space: nowrap; padding-block: .25rem; } .brand .sep { color: var(--accent); padding-inline: .15em; } .brand .tldr { color: var(--muted); font-weight: 500; } .brand:hover { color: var(--heading); } .brand:hover .tldr { color: var(--accent); } .site-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: .125rem; margin: 0; padding: 0; } .site-nav a { display: block; padding: .4rem .7rem; border-radius: var(--radius); font: 500 .9375rem var(--font-sans); color: var(--text); text-decoration: none; } .site-nav a:hover, .site-nav a.is-hover { background: var(--surface); color: var(--heading); } /* active = accent colour AND an underline bar (never colour alone) */ .site-nav a[aria-current] { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); border-radius: var(--radius) var(--radius) 0 0; } .site-nav { order: 2; } .header-tools { order: 3; display: flex; align-items: center; gap: .125rem; } .icon-btn { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; background: none; border: 0; border-radius: var(--radius); color: var(--text); cursor: pointer; } .icon-btn:hover, .icon-btn.is-hover { background: var(--surface); color: var(--heading); } .icon-btn svg { width: 1.25rem; height: 1.25rem; } .theme-toggle .i-sun, [data-theme-active="dark"] .theme-toggle .i-moon { display: none; } [data-theme-active="dark"] .theme-toggle .i-sun { display: block; } .nav-toggle { display: none; } @media (max-width: 38rem) { /* No JS: nav simply wraps onto its own row and stays fully usable. */ .site-nav { order: 4; width: 100%; } .site-nav ul { margin-inline: -.7rem; } /* With JS: collapse behind a labelled Menu button. */ .js .nav-toggle { display: inline-flex; align-items: center; gap: .4rem; height: 2.5rem; padding: 0 .7rem; background: none; border: 1px solid var(--border); border-radius: var(--radius); font: 500 .875rem var(--font-sans); color: var(--text); cursor: pointer; } .js .nav-toggle:hover { background: var(--surface); } .js .nav-toggle svg { width: 1.1rem; height: 1.1rem; } .js .nav-toggle .i-close, .js .nav-toggle[aria-expanded="true"] .i-open { display: none; } .js .nav-toggle[aria-expanded="true"] .i-close { display: block; } .js .site-nav { display: none; } .js .site-nav.is-open { display: block; border-top: 1px solid var(--border); margin-top: var(--s-2); padding-top: var(--s-2); } .js .site-nav ul { flex-direction: column; gap: 0; margin-inline: 0; } .js .site-nav a { padding: .8rem .25rem; font-size: 1.0625rem; border-bottom: 1px solid var(--border); border-radius: 0; } .js .site-nav li:last-child a { border-bottom: 0; } .js .site-nav a[aria-current] { box-shadow: inset 3px 0 0 var(--accent); padding-left: .85rem; } } /* 6 — Footer */ .site-footer { border-top: 1px solid var(--border); margin-top: auto; } .site-footer .wrap { padding-block: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: center; font: .875rem var(--font-sans); color: var(--muted); } .site-footer p { margin: 0; margin-right: auto; } .site-footer ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-4); margin: 0; padding: 0; } .site-footer a { color: var(--muted); } .site-footer a:hover { color: var(--accent-hover); } .link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--muted); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; } .link-btn:hover { color: var(--accent-hover); } /* 7 — Post list (home, archive, tag pages, 404) */ .year-nav { display: flex; flex-wrap: wrap; gap: .25rem .25rem; margin: 0 0 var(--s-6); padding: 0; list-style: none; font-family: var(--font-mono); font-size: .8125rem; } .year-nav a { display: block; padding: .3rem .6rem; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; } .year-nav a:hover { border-color: var(--accent); color: var(--accent-hover); } .year-nav .n { color: var(--muted); } .year-group { margin-bottom: var(--s-7); } .year-group > h2 { display: flex; align-items: baseline; gap: var(--s-3); margin: 0 0 var(--s-2); font: 600 1rem var(--font-mono); color: var(--heading); letter-spacing: .02em; padding-bottom: var(--s-2); border-bottom: 1px solid var(--border-strong); } .year-group > h2 .n { font-weight: 400; font-size: .8125rem; color: var(--muted); } .post-list { list-style: none; margin: 0; padding: 0; } .post-list > li { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); column-gap: var(--s-4); padding: .8rem 0; border-bottom: 1px solid var(--border); } .post-list > li:last-child { border-bottom: 0; } .post-list time { font-family: var(--font-mono); font-size: .8125rem; color: var(--muted); padding-top: .32rem; white-space: nowrap; } .post-list .title { font-size: 1.1875rem; line-height: 1.35; font-weight: 500; color: var(--heading); text-decoration: none; text-wrap: pretty; } .post-list .title:hover, .post-list .title.is-hover { color: var(--accent-hover); text-decoration: underline; text-decoration-thickness: 1px; } .post-list .tags { grid-column: 2; margin: .2rem 0 0; font: .8125rem var(--font-sans); color: var(--muted); } .post-list .tags a { color: var(--muted); text-decoration: none; white-space: nowrap; display: inline-block; } .post-list .tags a:hover { color: var(--accent-hover); text-decoration: underline; } .post-list .tags a::before { content: "#"; opacity: .6; } .post-list .tags a + a { margin-left: .6em; } .post-list .tags .more { margin-left: .6em; opacity: .8; } .post-list.with-year > li { grid-template-columns: 6.5rem minmax(0, 1fr); } @media (max-width: 30rem) { .post-list.with-year > li { display: block; } .post-list.with-year time { display: block; padding: 0 0 .1rem; } } @media (max-width: 25rem) { :root { --gutter: 1rem; } .post-list > li { grid-template-columns: 3.6rem minmax(0, 1fr); column-gap: var(--s-3); } .post-list .title { font-size: 1.125rem; } } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin: 0 0 var(--s-2); padding-bottom: var(--s-2); border-bottom: 1px solid var(--border-strong); } .section-head h2 { margin: 0; font: 600 .8125rem var(--font-mono); text-transform: uppercase; letter-spacing: .09em; color: var(--heading); } .section-head a, .more-link { font: 500 .875rem var(--font-sans); text-decoration: none; white-space: nowrap; } .section-head a:hover, .more-link:hover { text-decoration: underline; } /* tag index */ .tag-cloud { list-style: none; margin: 0; padding: 0; columns: 3 11rem; column-gap: var(--s-6); font: .9375rem var(--font-sans); } .tag-cloud li { padding: .2rem 0; break-inside: avoid; } .tag-cloud a { text-decoration: none; color: var(--text); } .tag-cloud a:hover { color: var(--accent-hover); text-decoration: underline; } .tag-cloud a::before { content: "#"; color: var(--muted); } .tag-cloud .n { font-family: var(--font-mono); font-size: .75rem; color: var(--muted); margin-left: .3em; } /* 8 — Home */ .intro { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-5); align-items: center; margin-bottom: var(--s-7); } .intro img { width: 5rem; height: 5rem; border-radius: 50%; object-fit: cover; object-position: 50% 35%; border: 1px solid var(--border); display: block; } .intro h1 { margin: 0 0 .35rem; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.125rem); letter-spacing: -.01em; } .intro p { margin: 0; color: var(--text); max-width: 34rem; } .intro .links { margin-top: .5rem; font: .875rem var(--font-sans); color: var(--muted); } .intro .links a + a { margin-left: var(--s-4); } @media (max-width: 25rem) { .intro { gap: var(--s-4); } .intro img { width: 3.75rem; height: 3.75rem; } } .home-section { margin-bottom: var(--s-7); } .talk-brief { list-style: none; margin: 0; padding: 0; } .talk-brief li { padding: .8rem 0; border-bottom: 1px solid var(--border); } .talk-brief li:last-child { border-bottom: 0; } .talk-brief .event { display: block; font: .8125rem var(--font-mono); color: var(--muted); margin-bottom: .15rem; } .talk-brief .t { font-size: 1.0625rem; line-height: 1.4; color: var(--heading); } .handbook { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s-5); align-items: center; padding: var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .handbook img { width: 100%; height: auto; display: block; border-radius: 2px; background: var(--surface-2); min-height: 4rem; font: .7rem var(--font-sans); color: var(--muted); } .handbook h2 { margin: .15rem 0 .25rem; font-size: 1.25rem; } .handbook p { margin: 0 0 .5rem; font-size: 1rem; } .handbook .cta { font: 600 .9375rem var(--font-sans); } @media (max-width: 25rem) { .handbook { grid-template-columns: 4.5rem minmax(0,1fr); padding: var(--s-4); gap: var(--s-4); } } /* 9 — Article ---------------------------------------------------------------- */ .article-layout { display: grid; grid-template-columns: minmax(0, 1fr); } .post-header { margin-bottom: var(--s-6); } .post-header h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 2.75rem); line-height: 1.12; letter-spacing: -.015em; margin: var(--s-3) 0 0; } .post-header .meta { display: flex; flex-wrap: wrap; gap: .2rem .9rem; } .post-header .meta span + span::before { content: "·"; margin-right: .9rem; opacity: .6; } .prose { font-size: 1.125rem; line-height: 1.7; } @media (max-width: 38rem) { .prose { font-size: 1.0625rem; line-height: 1.68; } } .prose > * { margin-block: 0; } .prose > * + * { margin-top: 1.35em; } .prose h2 { font-size: 1.625rem; margin-top: 2.6em; letter-spacing: -.01em; } .prose h3 { font-size: 1.3125rem; margin-top: 2.1em; } .prose h4 { font-size: 1.125rem; margin-top: 1.9em; } .prose h5, .prose h6 { font: 600 .8125rem var(--font-sans); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-top: 1.9em; } .prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .7em; } .prose h2, .prose h3, .prose h4 { position: relative; } .heading-anchor { font: 400 .8em var(--font-mono); margin-left: .4em; color: var(--muted); text-decoration: none; opacity: 0; transition: opacity .12s; } .prose :is(h2,h3,h4):hover .heading-anchor, .heading-anchor:focus-visible { opacity: 1; } @media (hover: none) { .heading-anchor { opacity: .55; } } .heading-anchor:hover { color: var(--accent-hover); } .prose :is(h2,h3,h4):target { scroll-margin-top: 5rem; } .prose :is(h2,h3,h4):target::before { content: ""; position: absolute; left: -1rem; top: .15em; bottom: .15em; width: 3px; background: var(--accent); } .prose a { overflow-wrap: anywhere; } .prose strong, .prose b { color: var(--heading); font-weight: 650; } .prose ul, .prose ol { padding-left: 1.4em; } .prose li { margin-top: .45em; padding-left: .2em; } .prose li::marker { color: var(--muted); } .prose ol > li::marker { font-family: var(--font-mono); font-size: .85em; } .prose li > ul, .prose li > ol { margin-top: .45em; } .prose li > p { margin: 0; } .prose li > p + p { margin-top: .7em; } .prose blockquote { margin-inline: 0; padding: .15em 0 .15em 1.25em; border-left: 3px solid var(--accent); color: var(--heading); font-style: italic; } .prose blockquote p { margin: 0; } .prose blockquote p + p { margin-top: .8em; } .prose blockquote footer, .prose blockquote cite { display: block; margin-top: .6em; font: normal .875rem var(--font-sans); color: var(--muted); } .prose :not(pre) > code { font-family: var(--font-mono); font-size: .86em; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; padding: .08em .35em; overflow-wrap: anywhere; } .prose kbd { font: .8em var(--font-mono); background: var(--surface-2); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 3px; padding: .05em .4em; } .prose sup { line-height: 0; } /* breakout: code, tables and figures may grow wider than the text column on desktop */ @media (min-width: 56rem) { .prose > .code-block, .prose > .table-wrap.is-wide { margin-inline: calc(-1 * var(--breakout)); } } /* 10 — Code blocks */ .code-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .code-bar { display: none; align-items: center; justify-content: space-between; min-height: 2rem; padding: 0 .4rem 0 1rem; border-bottom: 1px solid var(--border); } .code-block[data-lang] .code-bar, .js .code-bar { display: flex; } .code-lang { font: 500 .6875rem var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .copy-btn { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; height: 1.625rem; padding: 0 .55rem; background: none; border: 1px solid transparent; border-radius: 3px; cursor: pointer; font: 500 .75rem var(--font-sans); color: var(--muted); } .copy-btn svg { width: .875rem; height: .875rem; } .copy-btn:hover, .copy-btn.is-hover { color: var(--heading); border-color: var(--border-strong); background: var(--surface-2); } .copy-btn[data-state="copied"] { color: var(--ok); border-color: currentColor; } .copy-btn[data-state="failed"] { color: var(--fail); border-color: currentColor; } .code-block pre { margin: 0; padding: 1rem 1.125rem; overflow-x: auto; tab-size: 2; font: 400 .875rem/1.6 var(--font-mono); color: var(--heading); font-variant-ligatures: none; -webkit-overflow-scrolling: touch; } .code-block pre:focus-visible { outline-offset: -2px; } .code-block code { font: inherit; background: none; border: 0; padding: 0; white-space: pre; } @media (max-width: 38rem) { .prose > .code-block { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; border-inline: 0; } .code-block pre { font-size: .8125rem; padding-inline: var(--gutter); } .code-bar { padding-left: var(--gutter); } } /* raw 
 written directly in a post's HTML (no wrapper) gets the same treatment */
.prose pre:not(.code-block pre) { margin-inline: 0; padding: 1rem 1.125rem; overflow-x: auto; max-width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font: 400 .875rem/1.6 var(--font-mono); color: var(--heading); }
/* highlight.js classes -> six semantic token colours (build-time highlighting, no client JS) */
.hljs-comment, .hljs-quote, .hljs-meta { color: var(--tok-comment); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-doctag, .hljs-section { color: var(--tok-keyword); }
.hljs-type, .hljs-built_in, .hljs-title.class_, .hljs-selector-class, .hljs-selector-id { color: var(--tok-type); }
.hljs-string, .hljs-regexp, .hljs-char.escape_, .hljs-template-tag { color: var(--tok-string); }
.hljs-number, .hljs-literal, .hljs-symbol, .hljs-variable.constant_, .hljs-bullet { color: var(--tok-number); }
.hljs-title, .hljs-title.function_, .hljs-attr, .hljs-attribute, .hljs-name, .hljs-property, .hljs-variable { color: var(--tok-func); }
.hljs-deletion { color: var(--fail); } .hljs-addition { color: var(--ok); }
.hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: 650; }

/* 11 — Tables: always scroll inside their own region, never hide columns */
.table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius);
  background:
    linear-gradient(to right, var(--bg) 30%, transparent) left / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--bg) 30%, transparent) right / 2.5rem 100% no-repeat local,
    linear-gradient(to right, var(--border-strong), transparent) left / .6rem 100% no-repeat scroll,
    linear-gradient(to left, var(--border-strong), transparent) right / .6rem 100% no-repeat scroll;
}
.prose table { border-collapse: collapse; width: 100%; font: .9375rem/1.45 var(--font-sans); font-variant-numeric: tabular-nums; }
.prose th, .prose td { padding: .6rem .9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.prose th { font-weight: 600; color: var(--heading); white-space: nowrap; border-bottom: 1px solid var(--border-strong); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody tr:hover td { background: var(--accent-soft); }
.prose td code { white-space: nowrap; }
@media (max-width: 38rem) { .prose th, .prose td { padding: .5rem .7rem; } .prose td { min-width: 5.5rem; } }

/* 12 — Media. Images are never cropped, recoloured or inverted.
   A white "paper" backing keeps transparent diagrams legible in dark mode. */
.prose img { height: auto; max-width: 100%; border-radius: 3px; background: var(--paper); }
.prose p:has(> img), .prose p:has(> a > img), .prose figure {
  margin-inline: 0; text-align: center; font: .875rem/1.5 var(--font-sans); color: var(--muted);
}
.prose p:has(> img) > br:first-child { display: none; }
.prose p:has(> img) img, .prose p:has(> a > img) img, .prose figure img { display: block; margin: 0 auto .6rem; border: 1px solid var(--border); }
.prose p:has(> img):not(:has(> img ~ img)) img:last-child { margin-bottom: .6rem; }
.prose .img-link { display: block; text-decoration: none; }
.prose figcaption { margin-top: .6rem; }
.prose iframe { display: block; width: 100%; border: 1px solid var(--border); border-radius: var(--radius); }
.prose iframe[src*="youtube"], .prose iframe[src*="youtu.be"], .prose iframe[src*="vimeo"] { aspect-ratio: 16 / 9; height: auto; }

/* 13 — Table of contents (proposed). 
 so it works without JS. */
.toc { margin: 0 0 var(--s-6); border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--font-sans); }
.toc summary { cursor: pointer; padding: .7rem 1rem; font: 600 .8125rem var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--heading); list-style-position: inside; }
.toc summary:hover { color: var(--accent-hover); }
.toc ol { list-style: none; margin: 0; padding: 0 1rem .9rem; font-size: .9375rem; line-height: 1.4; }
.toc .lvl-3 a { padding-left: 1.6rem; font-size: .875rem; }
.toc li { margin: 0; }
.toc a { display: block; padding: .3rem 0 .3rem .7rem; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--accent-hover); }
.toc a[aria-current="true"], .toc a.is-current { color: var(--heading); border-left-color: var(--accent); font-weight: 600; }
@media (min-width: 82rem) {
  .article-layout.has-toc { grid-template-columns: minmax(0,1fr) minmax(0, var(--measure)) minmax(0,1fr); max-width: none; padding-inline: 0; }
  .article-layout.has-toc > * { grid-column: 2; }
  .article-layout.has-toc > .toc {
    grid-column: 3; grid-row: 2 / span 3; align-self: start; position: sticky; top: 2rem;
    width: 14.5rem; margin: 0 0 0 calc(var(--breakout) + 2rem); border: 0; border-radius: 0;
    max-height: calc(100vh - 4rem); overflow-y: auto;
  }
  .article-layout.has-toc > .toc summary { padding: 0 0 .6rem .7rem; pointer-events: none; list-style: none; }
  .article-layout.has-toc > .toc summary::-webkit-details-marker { display: none; }
  .article-layout.has-toc > .toc ol { padding: 0; border-left: 1px solid var(--border); }
  .article-layout.has-toc > .toc a { margin-left: -1px; }
}

/* 14 — Post footer: tags, details, newer/older */
.post-footer { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--border-strong); }
.tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 var(--s-4); padding: 0; }
.tag-list a { display: block; padding: .2rem .6rem; border: 1px solid var(--border); border-radius: var(--radius); font: .8125rem var(--font-mono); color: var(--text); text-decoration: none; }
.tag-list a::before { content: "#"; color: var(--muted); }
.tag-list a:hover, .tag-list a.is-hover { border-color: var(--accent); color: var(--accent-hover); }
.post-footer .meta { margin: 0; }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-6); }
.post-nav a { display: block; padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; }
.post-nav a:hover, .post-nav a.is-hover { border-color: var(--accent); }
.post-nav .label { display: block; font: 500 .75rem var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .3rem; }
.post-nav .t { color: var(--heading); font-size: 1.0625rem; line-height: 1.35; text-wrap: pretty; }
.post-nav a:hover .t { color: var(--accent-hover); }
.post-nav .older { text-align: right; grid-column: 2; }
.post-nav .newer { grid-column: 1; }
@media (max-width: 38rem) { .post-nav { grid-template-columns: 1fr; } .post-nav .older, .post-nav .newer { grid-column: 1; text-align: left; } }

/* 15 — Talks timeline */
.timeline-section > h2 { font: 600 .8125rem var(--font-mono); text-transform: uppercase; letter-spacing: .09em; margin: var(--s-7) 0 var(--s-5); }
.timeline { list-style: none; margin: 0; padding: 0 0 0 1.75rem; border-left: 1px solid var(--border-strong); }
.talk { position: relative; padding-bottom: var(--s-7); }
.talk:last-child { padding-bottom: var(--s-2); }
.talk::before { /* marker: hollow = past, filled = upcoming */
  content: ""; position: absolute; left: calc(-1.75rem - 6px); top: .3rem; width: 11px; height: 11px;
  border-radius: 50%; background: var(--bg); border: 2px solid var(--border-strong);
}
.talk[data-status="upcoming"]::before { background: var(--accent); border-color: var(--accent); }
.talk-when { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; }
.badge { font: 600 .6875rem var(--font-mono); text-transform: uppercase; letter-spacing: .08em; padding: .1rem .45rem; border: 1px solid var(--border-strong); border-radius: 3px; color: var(--muted); }
.talk[data-status="upcoming"] .badge { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.talk .event { margin: .5rem 0 .15rem; font: 600 .9375rem var(--font-sans); color: var(--text); }
.talk h3 { margin: 0 0 .5rem; font-size: 1.3125rem; line-height: 1.3; }
.talk .where { margin: 0 0 .6rem; font: .9375rem/1.45 var(--font-sans); color: var(--muted); }
.talk-links { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; margin: 0 0 .8rem; padding: 0; font: 500 .9375rem var(--font-sans); }
.talk .notes { font-size: 1rem; line-height: 1.55; }
.talk .notes h4 { margin: 0 0 .25rem; font: 600 .75rem var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.talk .notes ul { margin: 0; padding-left: 1.2em; }
.talk .notes li::marker { color: var(--muted); }
.empty-note { color: var(--muted); font-style: italic; margin: 0; }

/* 16 — Hire me / About / 404 */
.cta-row { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); padding: 0 !important; margin-top: 1em; }
.cta-row li { margin: 0; padding: 0; }
.btn {
  display: flex; flex-direction: column; gap: .15rem; padding: .9rem 1.1rem; border: 1px solid var(--accent);
  border-radius: var(--radius); text-decoration: none; color: var(--heading); background: var(--accent-soft);
}
.btn .k { font: 600 1.0625rem var(--font-sans); }
.btn .d { font: .8125rem var(--font-mono); color: var(--muted); overflow-wrap: anywhere; }
.btn:hover, .btn.is-hover { background: var(--accent); color: var(--bg); }
.btn:hover .d, .btn.is-hover .d { color: inherit; }
@media (max-width: 30rem) { .cta-row { grid-template-columns: 1fr; } }

.nf-code { font: 600 clamp(3.5rem, 2rem + 8vw, 6rem)/1 var(--font-mono); color: var(--heading); margin: 0 0 var(--s-4); letter-spacing: -.04em; }
.nf-code .sep { color: var(--accent); }
.nf-actions { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-3); padding: 0; margin: var(--s-5) 0 var(--s-7); font: 600 .9375rem var(--font-sans); }
.nf-actions a { display: block; padding: .6rem 1rem; border: 1px solid var(--border-strong); border-radius: var(--radius); text-decoration: none; color: var(--heading); }
.nf-actions a:hover { border-color: var(--accent); color: var(--accent-hover); }

/* 18 — Motion + print */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  a, .icon-btn, .copy-btn, .btn, .post-nav a, .tag-list a { transition: color .12s, background-color .12s, border-color .12s; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media print {
  .site-header nav, .header-tools, .nav-toggle, .site-footer, .toc, .copy-btn, .post-nav, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .prose > .code-block { margin-inline: 0; } .code-block pre { white-space: pre-wrap; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}