/* srtk.in
   One narrow column, like the original site. Geist for everything, Geist Mono
   only inside code. No cards: sections are split by hairlines. */

:root {
  --panel-gap: 16px;
  --home-top: clamp(56px, 10vh, 104px);
  --bg: #0c0b0a;
  --bg-2: #13120f;
  --surface: #13120f;
  --row-hover: #171613;
  --line: #24221e;
  --line-2: #33302b;
  --fg: #f2efe9;
  --fg-2: #cfcac1;
  --muted: #8f8a81;
  --faint: #6f6a62;
  --accent: #e0a458;
  --accent-soft: rgba(224, 164, 88, 0.1);
  --accent-line: rgba(224, 164, 88, 0.4);
  --ok: #3fb950;
  --warn: #d29922;
  --code-bg: #13120f;
  --glow-b: rgba(224, 164, 88, 0.035);
  --grain: 0.045;
  --hills-back: #15130f;
  --hills-front: #100f0c;

  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --col: 700px;
  --gutter: 24px;
  --read: 700px;
  --radius: 8px;
  --radius-sm: 6px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

:root[data-theme="light"] {
  --bg: #f8f6f2;
  --bg-2: #f0ede7;
  --surface: #fcfbf8;
  --row-hover: #f0ede7;
  --line: #e3dfd7;
  --line-2: #d3cec4;
  --fg: #161512;
  --fg-2: #2f2c27;
  --muted: #69645b;
  --faint: #7a756c;
  --accent: #a3601a;
  --accent-soft: rgba(163, 96, 26, 0.08);
  --accent-line: rgba(163, 96, 26, 0.35);
  --ok: #1a7f37;
  --warn: #9a6700;
  --code-bg: #f3f0ea;
  --glow-b: rgba(163, 96, 26, 0.03);
  --grain: 0.02;
  --hills-back: #efeee9;
  --hills-front: #f4f3ef;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 24px;
  background: var(--bg);
}
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg-2);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color 0.25s ease, color 0.25s ease;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
strong { color: var(--fg); font-weight: 600; }
::selection { background: var(--accent-line); color: var(--fg); }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 8px 14px; border-radius: 6px; background: var(--fg); color: var(--bg); font-weight: 600; }
.skip:focus { top: 12px; }

.col { width: 100%; max-width: calc(var(--col) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

.inline {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.inline:hover { color: var(--fg); text-decoration-color: var(--fg); }

.arrow-link { color: var(--muted); font-size: 15px; white-space: nowrap; transition: color 0.2s ease; }
.arrow-link span { display: inline-block; transition: transform 0.25s var(--ease); }
.arrow-link:hover { color: var(--fg); }
.arrow-link:hover span { transform: translateX(3px); }

/* ---------- Atmosphere: a soft glow up top and a little film grain ---------- */

body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; }
body::after {
  background: radial-gradient(50vw 45vh at 92% 0%, var(--glow-b), transparent 70%);
}
body::before {
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Hills along the bottom of the viewport, fixed behind everything. */
.hills { position: fixed; left: 0; right: 0; bottom: 0; height: clamp(100px, 17vh, 190px); overflow: hidden; z-index: 0; pointer-events: none; }
.hills svg { width: 100%; height: 100%; }
.hills-back { fill: var(--hills-back); }
.hills-front { fill: var(--hills-front); }
main, .site-foot { position: relative; z-index: 1; }


/* ---------- Home ---------- */

.intro { padding-top: clamp(56px, 10vh, 104px); }
.name { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; color: var(--fg); }
.role { margin-top: 2px; font-size: 15px; font-weight: 500; color: var(--muted); }
.bio { margin-top: 16px; max-width: 62ch; color: var(--muted); }
.bio + .bio { margin-top: 12px; }
.bio-lead { color: var(--fg-2); font-size: 1.06rem; }
.intro-card { position: relative; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
/* Theme toggle, top right of the intro card: shows the theme you'd switch to. */
/* Same space between the sidebar cards as between the two columns. */
.activity-card { margin-top: 0; }
.theme-toggle { position: absolute; top: -4px; right: -6px; z-index: 1; display: inline-flex; padding: 6px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease; }
.theme-toggle:hover { color: var(--fg); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-moon { display: none; }
:root[data-theme="light"] .theme-sun { display: none; }
:root[data-theme="light"] .theme-moon { display: block; }
.intro-top { padding-right: 40px; }
.intro-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 24px; flex-wrap: wrap; }
.icons { display: flex; align-items: center; gap: 18px; padding-top: 6px; }
.icons a { display: inline-flex; color: var(--muted); transition: color 0.2s ease, transform 0.25s var(--ease); }
.icons a:hover { color: var(--fg); transform: translateY(-1px); }
.icons svg { width: 22px; height: 22px; }

.section { padding-top: clamp(56px, 9vw, 88px); }
.section-cards { padding-top: 20px; }

.section > p, .section > div > p { max-width: 64ch; }
.section p + p { margin-top: 14px; }


/* Post thumbnails (content/thumbs): one bold idea each, no text, still until hovered. */
.row-thumb svg * { transform-box: fill-box; }
.t-acc { fill: var(--accent); }
.t-acc-soft { fill: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.t-bad-dot { fill: #e0798f; }
.t-track { fill: var(--line); }
.t-base { stroke: var(--line-2); stroke-width: 3; stroke-linecap: round; }
.t-frame { fill: var(--bg); stroke: var(--line-2); stroke-width: 3; }
.t-frame-acc { fill: none; stroke: var(--accent); stroke-width: 3.5; }
.t-soft { fill: color-mix(in srgb, var(--accent) 16%, transparent); }
.t-stroke { fill: none; stroke: var(--line-2); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.t-stroke-acc { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.t-dim { opacity: 0.5; }
.t-ok { fill: var(--ok); }
.t-dash { fill: none; stroke: var(--line-2); stroke-width: 3; stroke-dasharray: 5 6; stroke-linecap: round; }
.t-node { fill: var(--bg); stroke: var(--line-2); stroke-width: 3; }
.t-link { fill: none; stroke: color-mix(in srgb, var(--accent) 50%, transparent); stroke-width: 3; stroke-dasharray: 8 6; }
.t-bg { fill: var(--bg-2); }
.t-bg-stroke { stroke: var(--bg-2); stroke-width: 5; stroke-linecap: round; }

/* proxy: the upload finishes while the backend stays dead */
.t-fill { transform-origin: left; transition: transform 1.6s var(--ease); }
.row:hover .t-fill { transform: scaleX(1.493); }
.t-pulse { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.t-flat { fill: none; stroke: #e0798f; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 4 8; }
.row:hover .t-ping { animation: t-ping 1s ease-in-out infinite; }
@keyframes t-ping { 50% { transform: scale(1.6); opacity: 0.5; } }
.t-ping { transform-origin: center; }

/* k3s: pods climb to the ceiling */
.t-ceiling { stroke: var(--warn); stroke-width: 3; stroke-dasharray: 8 7; stroke-linecap: round; }
.t-bar { transform-origin: bottom; }
.row:hover .t-bar { animation: t-grow 0.8s var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes t-grow { from { transform: scaleY(0.1); } }

/* acls: the setuid bit stands out */
.t-perm { font-family: var(--mono); font-size: 42px; font-weight: 600; fill: var(--fg-2); }
.t-perm-r { transition: opacity 0.5s ease; }
.t-perm-s { fill: var(--accent); }
.row:hover .t-perm-r { opacity: 0.25; }
.t-under { transform-origin: center; transform: scaleX(0); transition: transform 0.5s var(--ease); }
.row:hover .t-under { transform: none; }

/* gnss: the sky turns */
.t-ring { fill: none; stroke: var(--line-2); stroke-width: 2.5; }
.t-center { fill: var(--line-2); }
.row-thumb .t-sky { transform-box: view-box; transform-origin: 160px 90px; transition: transform 2.4s var(--ease); }
.row:hover .t-sky { transform: rotate(40deg); }
.t-sat-gps { fill: var(--accent); }
.t-sat-glo { fill: #e0798f; }
.t-sat-gal { fill: #a8c68d; }
.t-sat-bds { fill: var(--warn); }
.t-sat-nav { fill: #d0a4d8; }

/* bitchess: the rook's rays light up outward */
.t-sq-dark { fill: rgba(255, 255, 255, 0.05); }
.t-sq-on { fill: color-mix(in srgb, var(--accent) 38%, transparent); }
.row:hover .t-sq-on { animation: t-ray 0.9s var(--ease) both; animation-delay: calc(var(--d) * 80ms); }
@keyframes t-ray { from { fill: transparent; } }
.t-sq-rook { fill: color-mix(in srgb, var(--accent) 70%, transparent); }
.t-rook { fill: var(--fg); }
.t-board { fill: none; stroke: var(--line-2); stroke-width: 2; }

/* encrypt: the lock snaps shut */
.t-noise rect { fill: var(--fg); opacity: 0.08; }
.row:hover .t-noise rect:nth-child(3n) { animation: t-wave 1.4s ease-in-out infinite; }
.row:hover .t-noise rect:nth-child(3n+1) { animation: t-wave 1.4s ease-in-out 0.5s infinite; }
.t-shackle { fill: none; stroke: var(--fg-2); stroke-width: 8; stroke-linecap: round; transform: translateY(-10px); transition: transform 0.45s cubic-bezier(0.5, 0, 0.3, 1.4); }
.row:hover .t-shackle { transform: none; }
.t-lock { fill: var(--accent); }

/* firewall: allowed traffic flows through the gap, the rest bounces */
.t-brick { fill: color-mix(in srgb, var(--fg) 30%, transparent); }
.row:hover .t-flow { animation: t-flow 1.2s linear infinite; animation-delay: calc(var(--i) * 0.08s); }
@keyframes t-flow { from { transform: translateX(-14px); opacity: 0.3; } to { transform: none; opacity: 1; } }
.row:hover .t-bounce { animation: t-bounce 0.9s var(--ease) infinite; animation-delay: calc(var(--i) * 0.3s); }
@keyframes t-bounce { 40% { transform: translateX(10px); } }

/* airlink: the signal pulses and the screen lights */
.t-wave { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; opacity: calc(0.9 - var(--i) * 0.25); }
.row:hover .t-wave { animation: t-emit 1.2s ease-out infinite; animation-delay: calc(var(--i) * 0.2s); }
@keyframes t-emit { 0% { opacity: 0.15; } 25% { opacity: 1; } 100% { opacity: 0.15; } }
@keyframes t-wave { 50% { opacity: 0.15; } }
.t-glow { transform-origin: center; transition: transform 0.6s var(--ease); }
.row:hover .t-glow { transform: scale(2.2); }

/* ipsec: packets stream through the tunnel */
.t-tunnel { fill: color-mix(in srgb, var(--accent) 8%, transparent); stroke: var(--line-2); stroke-width: 3; }
.row:hover .t-packets { animation: t-slide 1s linear infinite; }
@keyframes t-slide { from { transform: translateX(0); } to { transform: translateX(40px); } }

/* irc: the shared key turns, the links carry it */
.t-key { transform-origin: center; transition: transform 0.8s var(--ease); }
.row:hover .t-key { transform: rotate(-20deg) scale(1.12); }
.row:hover .t-link { animation: t-march 0.8s linear infinite; }
@keyframes t-march { to { stroke-dashoffset: -14; } }

/* lab: the Pi wakes the server */
.t-server { opacity: 0.45; transition: opacity 0.6s ease 0.2s; }
.row:hover .t-server { opacity: 1; }
.t-led { fill: var(--faint); transition: fill 0.3s ease 0.6s; }
.row:hover .t-led { fill: var(--ok); }
.row:hover .t-wire { animation: t-march 0.6s linear infinite; }
.row:hover .t-blink { animation: t-wave 1s steps(1) infinite; }

/* securecopy: data scrambles, then the check lands */
.row:hover .t-cipher { animation: t-wave 0.9s ease-in-out 2; animation-delay: calc(var(--i) * 0.1s); }
.t-nudge { transition: transform 0.4s var(--ease); }
.row:hover .t-nudge { transform: translateX(6px); }
.t-check { fill: none; stroke: var(--ok); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; }
.row:hover .t-check { animation: t-draw 0.6s var(--ease) 0.3s both; }
@keyframes t-draw { from { stroke-dashoffset: 40; } }

/* rice: bspwm splits the focused window for a new one */
.t-rice-win { fill: color-mix(in srgb, #92b9ea 8%, var(--bg)); stroke: var(--line-2); stroke-width: 3; }
.t-rice-focus { fill: color-mix(in srgb, #92b9ea 16%, var(--bg)); stroke: #92b9ea; }
.t-rice-acc-dot { fill: #e0798f; }
.t-rice-shrink { height: 110px; transition: height 0.6s var(--ease); }
.row:hover .t-rice-shrink { height: 51px; }
.t-rice-new { fill: color-mix(in srgb, #e0798f 14%, var(--bg)); stroke: #e0798f; transform: translateY(10px); opacity: 0; transition: transform 0.6s var(--ease) 0.2s, opacity 0.4s ease 0.2s; }
.row:hover .t-rice-new { transform: none; opacity: 1; }

:root[data-theme="light"] .t-sq-dark { fill: rgba(0, 0, 0, 0.05); }

/* Home: one column by default; on wide screens the About card becomes a
   sticky sidebar so featured posts and the full list sit beside it. */
@media (min-width: 1100px) {
  .home-grid {
    display: grid;
    grid-template-columns: minmax(360px, 440px) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px;
  }
  .home-grid .col { max-width: none; padding: 0; }
  .home-grid .intro { padding-top: 0; }
  /* Only pin the sidebar when all of it fits on screen. */
  .home-side { align-self: start; }
  .home-main-inner > .section:first-child { padding-top: 0; }
  .home-grid .intro-top { flex-direction: column; }
  .home-grid .icons { padding-top: 2px; }
}

/* Rows: the original srtk.in list, a little roomier */
.rows { list-style: none; }
.row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.rows > li:first-child .row { border-top: 1px solid var(--line); }

.row-date { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.row-body { display: flex; flex-direction: column; gap: 3px; }
.row-title { font-size: 1.12rem; font-weight: 550; line-height: 1.35; color: var(--fg); letter-spacing: -0.015em; }
.row-title { text-decoration: underline 1px transparent; text-underline-offset: 0.2em; transition: text-decoration-color 0.2s ease; }
.row:hover .row-title { text-decoration-color: var(--line-2); }
.row-desc { font-size: 15px; color: var(--muted); max-width: 62ch; }

/* Wide home: the page itself never scrolls. The sidebar and footer stay put
   and only the writing column scrolls (site.js points Lenis at it). */
@media (min-width: 1100px) {
  :root { --shell-top: clamp(24px, 5vh, 72px); }
  html body.home { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
  .home main { flex: 1; min-height: 0; }
  .home-grid { height: 100%; grid-template-rows: 100%; }
  .home-side, .home-main { height: 100%; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
  .home-side::-webkit-scrollbar, .home-main::-webkit-scrollbar { display: none; }
  /* Both columns end on the same line: the last sidebar card stretches down. */
  .home-side { padding: var(--shell-top) 0 16px; display: flex; flex-direction: column; }
  .home-side > .activity-card { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .home-side > .activity-card > .next-card { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  /* The list takes what room is left and scrolls inside the card. */
  .home-side .work { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .home-side .work::-webkit-scrollbar { display: none; }
  .home-main-inner { padding: var(--shell-top) 0 16px; }
  .home-main { mask-image: linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent); }
  .home .site-foot { margin-top: 0; padding: 14px 0 18px; }
}

/* Sidebar: activity */
.next-card { padding: 0; }
.next-title { font-weight: 600; font-size: 1.25rem; color: var(--fg); margin-bottom: 14px; }
.work-list { list-style: none; }
/* Logo on the left, as tall as the name and title beside it; the line runs full width below. */
.work-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.work-logo { display: block; width: 40px; height: 40px; border-radius: 6px; object-fit: cover; }
.work-list .work-line { grid-column: 1 / -1; }
.work li { padding: 20px 0; border-top: 1px solid var(--line); }
.work li:first-child { border-top: 0; }
.work-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.work-org { font-size: 1rem; font-weight: 550; letter-spacing: -0.01em; line-height: 1.3; color: var(--fg); }
.work-when { flex: none; font-size: 13px; color: var(--faint); font-variant-numeric: tabular-nums; }
.work-role { margin-top: 1px; font-size: 14px; color: var(--muted); }
.work-sub { margin-top: 1px; }
.work-sub .work-role { margin-top: 0; }
.work-place { flex: none; font-size: 13px; color: var(--faint); }
.work-line { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--fg-2); }
.work-org a { color: inherit; transition: color 0.2s ease; }
.work-org a:hover { color: var(--fg); text-decoration: underline 1px var(--line-2); text-underline-offset: 0.2em; }

/* List rows with a thumbnail */
.row-thumbed { grid-template-columns: 176px minmax(0, 1fr); gap: 20px; align-items: center; }
.row-thumb { display: block; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); }
.row-thumb svg { display: block; width: 100%; height: 100%; }
.row-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.row-thumbed .row-date { font-size: 13px; }
.row-pin { display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; transform: rotate(35deg); color: var(--faint); }

/* Contact */

/* Footer */
.site-foot {
  display: flex; justify-content: center;
  margin-top: clamp(72px, 10vw, 110px); padding-top: 24px; padding-bottom: 40px;
  font-size: 14px; color: var(--faint);
  /* rule spans the text column only, not the gutters */
  background: linear-gradient(var(--line), var(--line)) no-repeat center top / calc(100% - 2 * var(--gutter)) 1px;
}
/* ---------- Writing index ---------- */

.page { padding-top: clamp(72px, 13vh, 136px); }

.page-title { font-weight: 600; font-size: clamp(2.4rem, 6vw, 3.2rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--fg); }

/* ---------- Post ---------- */

.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.progress-bar { height: 100%; width: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }

.back { display: inline-block; font-size: 15px; color: var(--muted); margin-bottom: 28px; transition: color 0.2s ease; }
.back:hover { color: var(--fg); }
.post-title {
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--fg);
  text-wrap: balance;
}
.post-subtitle { margin-top: 14px; font-size: 1.1rem; line-height: 1.5; color: var(--muted); text-wrap: pretty; }

.post-tags { margin-top: 20px; font-size: 14.5px; color: var(--faint); }
.post-tags a { color: var(--faint); transition: color 0.2s ease; }
.post-tags a:hover { color: var(--fg); }
.post-links { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 12px; }
.post-head { position: relative; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
/* Back to home: sits in the left margin beside the title on wide screens. */
.back-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 20px; border-radius: 10px; color: var(--muted); transition: color 0.2s ease, border-color 0.25s ease, transform 0.3s var(--ease); }
.back-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.back-btn:hover { color: var(--fg); border-color: var(--line-2); transform: translateX(-2px); }
@media (min-width: 900px) {
  .back-btn { position: absolute; left: -64px; top: 6px; margin: 0; }
}

.toc-inline { margin-top: 20px; }
.toc-inline summary { cursor: pointer; font-size: 15px; color: var(--muted); padding: 6px 0; }
.toc-inline summary:hover { color: var(--fg); }
.toc-inline ol { list-style: none; font-size: 15px; padding: 6px 0 0 2px; }
.toc-inline ol ol { padding-left: 16px; }
.toc-inline li { padding: 3px 0; }
.toc-inline a { color: var(--fg-2); }
.toc-inline a:hover { color: var(--fg); }

/* Section rail: dashes, the active section always labelled, all labels on hover. */
.toc-rail { position: fixed; left: max(20px, calc((100vw - var(--read)) / 2 - 300px)); top: 50%; transform: translateY(-50%); z-index: 20; display: none; width: 250px; }
.toc-rail ol { list-style: none; }
.toc-rail a { display: flex; align-items: center; gap: 12px; padding: 4px 0; color: var(--faint); font-size: 13.5px; line-height: 1.35; }
.toc-dash { width: 24px; height: 2px; border-radius: 2px; background: var(--line-2); flex: none; transform: scaleX(0.55); transform-origin: 0 50%; transition: transform 0.3s var(--ease), background-color 0.3s ease; }
.toc-text { opacity: 0; transform: translateX(-4px); transition: opacity 0.25s ease, transform 0.3s var(--ease), color 0.2s ease; }
.toc-rail a.is-active .toc-dash { transform: none; background: var(--fg); }
.toc-rail a.is-active .toc-text { opacity: 1; transform: none; color: var(--fg); }
.toc-rail:hover .toc-text, .toc-rail:focus-within .toc-text { opacity: 1; transform: none; }
.toc-rail a:hover .toc-text { color: var(--fg); }
@media (min-width: 1300px) {
  .toc-rail { display: block; }
  .toc-inline { display: none; }
}

/* Prose: the reading column. */
.prose {
  margin-top: 40px;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--fg-2);
  text-wrap: pretty;
  hanging-punctuation: first;
}
.prose > * + * { margin-top: 1.15em; }
.prose > p:first-child { font-size: 1.18rem; line-height: 1.65; color: var(--fg); }
.prose h2, .prose h3, .prose h4 {
  font-family: var(--sans);
  color: var(--fg);
  letter-spacing: -0.03em;
  line-height: 1.2;
  position: relative;
  text-wrap: balance;
}
.prose h2 { font-size: clamp(1.4rem, 3vw, 1.65rem); font-weight: 600; margin-top: 2.4em; padding-top: 0.2em; }
.prose h3 { font-size: 1.2rem; font-weight: 600; margin-top: 1.9em; }
.prose h4 { font-size: 1.05rem; font-weight: 600; margin-top: 1.6em; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: 0.7em; }
.prose h2 + h3 { margin-top: 1.1em; }
.prose .anchor {
  position: absolute;
  left: -1.1em;
  width: 1em;
  color: var(--faint);
  font-weight: 400;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.prose h2:hover .anchor, .prose h3:hover .anchor, .prose .anchor:focus { opacity: 1; }
.prose .anchor:hover { color: var(--fg); }
.prose a:not(.anchor):not(.footnote-ref):not(.footnote-backref) {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
.prose a:not(.anchor):hover { color: var(--fg); text-decoration-color: var(--fg); }
.prose strong { font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.45em; }
.prose li::marker { color: var(--faint); }
.prose ol > li::marker { font-variant-numeric: tabular-nums; }
.prose hr { border: 0; height: 1px; background: var(--line); margin: 3em 0; }
.prose blockquote {
  border-left: 2px solid var(--line-2);
  padding: 0.1em 0 0.1em 1.2em;
  color: var(--muted);
  font-style: italic;
}
.prose .callout {
  font-style: normal;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fg-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
}
.prose .callout p + p { margin-top: 0.7em; }

.prose :not(pre) > code {
  font-family: var(--mono);
  font-size: 0.78em;
  padding: 0.15em 0.4em;
  border-radius: 5px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg);
  word-break: break-word;
}

/* Code blocks break out slightly wider than the text column on desktop. */
.prose .code, .prose .diagram, .prose .table-wrap { margin-top: 1.6em; margin-bottom: 1.6em; }
.prose > .code + *, .prose > .diagram + *, .prose > .table-wrap + * { margin-top: 0; }
.code {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--code-bg);
  overflow: hidden;
  font-family: var(--mono);
}
.code-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px 6px 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
}
.code-label { letter-spacing: 0.04em; }
.code-copy {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.code-copy:hover { color: var(--fg); border-color: var(--line-2); }
.code pre {
  padding: 16px 18px;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.65;
  tab-size: 4;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.code code { font-family: inherit; color: var(--fg-2); }

/* Diagrams (inline SVG using the d-* classes). */
.diagram {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  padding: clamp(14px, 3vw, 28px);
}
.diagram-inner { display: flex; justify-content: center; overflow-x: auto; }
.diagram svg { width: 100%; max-width: 660px; height: auto; }
.diagram figcaption { margin-top: 14px; font-family: var(--sans); font-size: 14px; color: var(--muted); text-align: center; }
.d-box { fill: var(--bg); stroke: var(--line-2); stroke-width: 1.5; }
.d-accent { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }
.d-line { stroke: var(--line-2); stroke-width: 2; stroke-dasharray: 4; fill: none; }
.d-arrow { fill: var(--line-2); }
.d-title { fill: var(--fg); font-family: var(--sans); font-weight: 600; }
.d-sub { fill: var(--muted); font-family: var(--sans); }
.d-badge { fill: var(--accent); font-family: var(--sans); font-weight: 600; }
.d-cap { fill: var(--faint); font-family: var(--sans); }

/* Screenshots */
.shot { margin-top: 1.6em; margin-bottom: 1.6em; }
.prose > .shot + * { margin-top: 0; }
.shot img { display: block; width: 100%; height: auto; border-radius: 4px; border: 1px solid var(--line); background: var(--bg-2); }
.shot figcaption { margin-top: 10px; font-family: var(--sans); font-size: 14px; color: var(--muted); text-align: center; }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.prose table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 15px; line-height: 1.5; }
.prose th, .prose td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.prose tr:last-child td { border-bottom: 0; }
.prose th { font-weight: 600; color: var(--fg); background: var(--bg-2); font-size: 13px; letter-spacing: 0.02em; white-space: nowrap; }
.prose td:first-child { color: var(--fg); font-weight: 500; }

/* Footnotes */
.prose .footnote { margin-top: 3em; padding-top: 1.2em; border-top: 1px solid var(--line); font-size: 0.9em; color: var(--muted); }
.prose .footnote hr { display: none; }
.prose sup { line-height: 0; }
.prose .footnote-ref { color: var(--accent); font-size: 0.75em; padding: 0 2px; }

/* End of post */
.post-end { margin-top: 64px; padding-top: 8px; border-top: 1px solid var(--line); }
.post-end > p { color: var(--muted); max-width: 62ch; }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin-top: 36px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pager-card { display: flex; align-items: center; gap: 14px; padding: 22px 0; }
.pager-next { grid-column: 2; justify-content: flex-end; text-align: right; }
.pager-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pager-label { font-size: 13px; color: var(--muted); }
.pager-title { font-size: 1.05rem; font-weight: 550; letter-spacing: -0.015em; line-height: 1.3; color: var(--fg); text-wrap: balance; transition: color 0.2s ease; }
.pager-title { text-decoration: underline 1px transparent; text-underline-offset: 0.2em; }
.pager-card:hover .pager-title { text-decoration-color: var(--line-2); }
.pager-arrow { flex: none; font-size: 18px; color: var(--faint); transition: transform 0.25s var(--ease), color 0.2s ease; }
.pager-card:hover .pager-arrow { color: var(--fg); }
.pager-card[rel="prev"]:hover .pager-arrow { transform: translateX(-3px); }
.pager-next:hover .pager-arrow { transform: translateX(3px); }

.notfound { min-height: 45vh; }

/* ---------- Syntax highlighting (Pygments short classes) ---------- */

.code .c, .code .c1, .code .cm, .code .cs, .code .ch, .code .cpf, .code .sd { color: #8b949e; font-style: italic; }
.code .k, .code .kd, .code .kn, .code .kr, .code .kp, .code .kc, .code .ow { color: #ff7b72; }
.code .kt, .code .nc, .code .nn { color: #ffa657; }
.code .s, .code .s1, .code .s2, .code .sb, .code .sc, .code .se, .code .sh, .code .si, .code .sx, .code .sr, .code .ss, .code .sa { color: #a5d6ff; }
.code .m, .code .mi, .code .mf, .code .mh, .code .mo, .code .il { color: #79c0ff; }
.code .nf, .code .fm, .code .nd { color: #d2a8ff; }
.code .nb, .code .bp, .code .no { color: #79c0ff; }
.code .nt { color: #7ee787; }
.code .na, .code .nv, .code .vi, .code .vg, .code .vc { color: #79c0ff; }
.code .cp { color: #ff7b72; }
.code .gp { color: #8b949e; user-select: none; }
.code .go { color: #8b949e; }
.code .gh, .code .gu { color: #79c0ff; font-weight: 600; }
.code .gi { color: #7ee787; }
.code .gd { color: #ffa198; }
.code .err { color: inherit; }

:root[data-theme="light"] .code .c, :root[data-theme="light"] .code .c1, :root[data-theme="light"] .code .cm,
:root[data-theme="light"] .code .cs, :root[data-theme="light"] .code .ch, :root[data-theme="light"] .code .sd { color: #6e7781; }
:root[data-theme="light"] .code .k, :root[data-theme="light"] .code .kd, :root[data-theme="light"] .code .kn,
:root[data-theme="light"] .code .kr, :root[data-theme="light"] .code .kp, :root[data-theme="light"] .code .kc,
:root[data-theme="light"] .code .ow, :root[data-theme="light"] .code .cp { color: #cf222e; }
:root[data-theme="light"] .code .kt, :root[data-theme="light"] .code .nc, :root[data-theme="light"] .code .nn { color: #953800; }
:root[data-theme="light"] .code .s, :root[data-theme="light"] .code .s1, :root[data-theme="light"] .code .s2,
:root[data-theme="light"] .code .sb, :root[data-theme="light"] .code .sc, :root[data-theme="light"] .code .se,
:root[data-theme="light"] .code .sh, :root[data-theme="light"] .code .si, :root[data-theme="light"] .code .sx,
:root[data-theme="light"] .code .sr, :root[data-theme="light"] .code .ss, :root[data-theme="light"] .code .sa { color: #0a3069; }
:root[data-theme="light"] .code .m, :root[data-theme="light"] .code .mi, :root[data-theme="light"] .code .mf,
:root[data-theme="light"] .code .mh, :root[data-theme="light"] .code .mo, :root[data-theme="light"] .code .il,
:root[data-theme="light"] .code .nb, :root[data-theme="light"] .code .bp, :root[data-theme="light"] .code .no,
:root[data-theme="light"] .code .na, :root[data-theme="light"] .code .nv, :root[data-theme="light"] .code .vi { color: #0550ae; }
:root[data-theme="light"] .code .nf, :root[data-theme="light"] .code .fm, :root[data-theme="light"] .code .nd { color: #8250df; }
:root[data-theme="light"] .code .nt, :root[data-theme="light"] .code .gi { color: #116329; }
:root[data-theme="light"] .code .gd { color: #82071e; }

/* ---------- Motion ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--delay, 0s);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html:not(.lenis) { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .row-thumb *, .row-thumb img { animation: none !important; }
    *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ---------- Small screens ---------- */

@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .row-thumbed { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: start; }
  /* Draw the ridge wider than the screen so it keeps its shape instead of squashing. */
  .hills { height: 22vh; }
  .hills svg { width: 300%; margin-left: -100%; }
  .intro { padding-top: 40px; }
  .page { padding-top: 56px; }
  .rows .row { padding: 18px 0; }
  .post-title { font-size: 1.85rem; }
  body { font-size: 16px; }
      .row:not(.row-thumbed) { grid-template-columns: 1fr; gap: 2px; }
  
  
  .prose { font-size: 1.03rem; }
  .prose > p:first-child { font-size: 1.12rem; }
  .code pre { font-size: 12.5px; padding: 14px; }
  .prose .anchor { display: none; }
  .diagram-inner { justify-content: flex-start; }
  .diagram svg { min-width: 560px; }
  .pager { grid-template-columns: 1fr; }
  .pager-next { grid-column: 1; }
  .pager-card ~ .pager-card { border-top: 1px solid var(--line); }
}

@media (max-width: 370px) {
    }

/* Wide home on shorter screens: tighten the sidebar so all of it fits above the footer. */
@media (min-width: 1100px) and (max-height: 960px) {
  .home-grid .intro-card { padding-bottom: 20px; }
  .home-grid .name { font-size: 1.7rem; }
  .home-grid .bio { margin-top: 12px; font-size: 15px; line-height: 1.6; }
  .home-grid .bio-lead { font-size: 15.5px; }
  .home-grid .bio + .bio { margin-top: 8px; }
  .home-grid .next-title { margin-bottom: 10px; }
  .home-grid .work li { padding: 14px 0; }
}
@media (min-width: 1100px) and (max-height: 840px) {
  :root { --shell-top: 16px; }
}