/* Blog, article, timeline and topic pages. Builds on /landing/styles.css (tokens, header, glass, backdrop). */

:root { --amb: #b45309; --blu: #2563eb; --code-bg: #f6f8fa; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --amb: #fbbf24; --blu: #60a5fa; --code-bg: #0b0e13; } }
:root[data-theme="dark"] { --amb: #fbbf24; --blu: #60a5fa; --code-bg: #0b0e13; }

/* Topic colours: each category gets its own accent. New categories fall back to teal. */
[data-cat] { --c: var(--sig); }
[data-cat="security"] { --c: var(--hdr); }
[data-cat="cryptography"] { --c: var(--pay); }
[data-cat="iam"] { --c: var(--sig); }
[data-cat="database"] { --c: var(--amb); }
[data-cat="operating-system"] { --c: var(--blu); }

.blog, .article-wrap, .timeline-wrap, .lost { position: relative; z-index: 1; }
a { text-underline-offset: 3px; }
kbd { font-family: var(--mono); font-size: 11px; line-height: 1; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--glass-line); background: color-mix(in srgb, var(--sunk) 60%, transparent); color: var(--muted); }
mark { background: color-mix(in srgb, var(--pay) 28%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }

/* Header pieces specific to these pages */
.nav .nav-out[aria-current] { border-color: color-mix(in srgb, var(--sig) 55%, var(--glass-line)); color: var(--sig); }
.search-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-radius: 999px; font-family: var(--mono); font-size: 12px; color: var(--muted);
  background: var(--glass-fill); border: 1px solid var(--glass-line); box-shadow: var(--glass-hl); transition: color 160ms, border-color 160ms; }
.search-trigger:hover { color: var(--ink); border-color: color-mix(in srgb, var(--sig) 50%, var(--glass-line)); }
.progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--hdr), var(--pay), var(--sig)); pointer-events: none; }
body:not(.article-page) .progress { display: none; }
.foot-links { display: inline-flex; gap: 14px; }
.foot-links a { color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--ink); }

/* ── Blog index ─────────────────────────────────────────────── */
.blog { padding-bottom: clamp(56px, 8vw, 104px); }
.blog-hero { padding-block: clamp(40px, 7vw, 88px) clamp(20px, 3vw, 32px); }
.blog-hero.compact { padding-bottom: 8px; }
.blog-hero h1 { font-family: var(--display); font-weight: 800; font-size: clamp(40px, 7vw, 92px); line-height: .95; letter-spacing: -.04em; margin: 14px 0 20px; max-width: 16ch; text-wrap: balance; }
.blog-hero h1 span { color: var(--muted); }
.blog-hero .lede { color: var(--muted); font-size: 18px; max-width: 60ch; margin: 0; }
.stats { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; }
.stats li { font-family: var(--mono); font-size: 12px; color: var(--muted); padding: 6px 12px; border-radius: 999px; background: var(--glass-fill); border: 1px solid var(--glass-line); box-shadow: var(--glass-hl); }
.stats b { color: var(--ink); font-weight: 500; }
/* Topics and tags in the stats row are links to their indexes. */
.stats li:has(> a) { padding: 0; transition: border-color 160ms; }
.stats li > a { display: block; padding: 6px 12px; border-radius: inherit; color: inherit; text-decoration: none; }
.stats li > a span { color: var(--sig); }
.stats li:has(> a):hover { border-color: color-mix(in srgb, var(--sig) 55%, var(--glass-line)); }
.stats li:has(> a):hover, .stats li > a:focus-visible { color: var(--ink); }
/* All posts · Topics · Tags, on the taxonomy pages */
.tax-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 22px; padding: 4px; border-radius: 999px; background: var(--glass-fill); border: 1px solid var(--glass-line); box-shadow: var(--glass-hl); }
.tax-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); text-decoration: none; transition: color 160ms, background 160ms; }
.tax-tabs a span { font-size: 11px; color: var(--faint); }
.tax-tabs a:hover { color: var(--ink); }
.tax-tabs a[aria-current] { color: var(--ink); background: color-mix(in srgb, var(--ink) 9%, transparent); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }
.crumbs { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--faint); display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs .cat { color: var(--c); }

/* Search + topics, pinned under the header while scrolling the list */
.finder { position: sticky; top: 61px; z-index: 10; margin: 0 calc(-1 * var(--gutter)) 24px; padding: 12px var(--gutter); background: var(--glass-bar); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom: 1px solid transparent; transition: border-color 200ms; }
.finder.stuck { border-bottom-color: var(--glass-line); }
.finder-search { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: var(--r-card); color: var(--muted); background: var(--glass-fill); border: 1px solid var(--glass-line); box-shadow: var(--glass-hl), var(--glass-drop); transition: border-color 160ms, box-shadow 160ms; }
.finder-search:focus-within { border-color: color-mix(in srgb, var(--sig) 60%, var(--glass-line)); box-shadow: var(--glass-hl), 0 0 0 4px color-mix(in srgb, var(--sig) 15%, transparent); }
.finder-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 17px; color: var(--ink); }
.finder-search input::placeholder { color: var(--faint); }
.finder-search input::-webkit-search-cancel-button { filter: grayscale(1); }
.topics { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.topic { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); background: var(--glass-fill); border: 1px solid var(--glass-line); box-shadow: var(--glass-hl); transition: color 160ms, border-color 160ms, background 160ms; }
.topic span { font-size: 11px; color: var(--faint); }
.topic:hover { color: var(--ink); }
.topic[aria-pressed="true"] { color: var(--c, var(--ink)); border-color: color-mix(in srgb, var(--c, var(--ink)) 50%, var(--glass-line)); background: linear-gradient(155deg, color-mix(in srgb, var(--c, var(--ink)) 14%, transparent), transparent), var(--glass-fill); }
.topic[data-topic=""] { --c: var(--ink); }
/* keerthivibisan.com / posts: the site name links home. */
.label.crumb a { color: var(--muted); text-decoration: none; transition: color 160ms; }
.label.crumb a:hover { color: var(--sig); }
.result-note { margin: 0 0 16px; font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* Post cards */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.post-grid.compact { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.post-card { position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--glass-fill); border: 1px solid var(--glass-line); box-shadow: var(--glass-hl);
  transition: transform 350ms var(--ease), border-color 250ms, box-shadow 350ms var(--ease); }
.post-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 55%, var(--glass-line)); box-shadow: var(--glass-hl), 0 30px 60px -34px color-mix(in srgb, var(--c) 70%, transparent); }
.post-card.enter { animation: card-in 420ms var(--ease) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.post-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background:
  radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--c) 35%, transparent), transparent 60%),
  radial-gradient(90% 90% at 100% 100%, color-mix(in srgb, var(--pay) 22%, transparent), transparent 60%), var(--sunk); }
.cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.post-card:hover .cover img { transform: scale(1.04); }
.cover-glyph { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center; font-family: var(--display); font-weight: 800; font-size: clamp(28px, 4vw, 44px); letter-spacing: -.03em; line-height: 1;
  color: color-mix(in srgb, var(--c) 75%, var(--ink)); opacity: .85;
  background-image: linear-gradient(var(--glass-line) 1px, transparent 1px), linear-gradient(90deg, var(--glass-line) 1px, transparent 1px); background-size: 28px 28px; }
.badge-new { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-family: var(--mono); font-size: 11px; color: var(--ink);
  background: var(--glass-fill); border: 1px solid var(--glass-line); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.badge-new::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--sig); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sig) 25%, transparent); }
.post-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 22px; }
.post-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-family: var(--mono); font-size: 12px; color: var(--faint); }
.post-meta .cat { color: var(--c); }
.post-card h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.post-card .summary { margin: 0; color: var(--muted); font-size: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.read-more { margin-top: auto; padding-top: 6px; font-family: var(--mono); font-size: 12px; color: var(--c); }
.read-more span { display: inline-block; transition: transform 250ms var(--ease); }
.post-card:hover .read-more span { transform: translateX(4px); }
/* The newest post leads, larger and side by side */
.post-card.featured { grid-column: 1 / -1; }
.post-card.featured .post-link { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.post-card.featured .cover { aspect-ratio: auto; min-height: 340px; }
.post-card.featured .post-body { justify-content: center; padding: clamp(24px, 4vw, 44px); gap: 12px; }
.post-card.featured h3 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.05; }
.post-card.featured .summary { font-size: 16.5px; -webkit-line-clamp: 4; }
.post-card.featured .read-more { margin-top: 8px; }
/* /posts/ pagination (blog.js): ← Newer · 1 2 · Older → */
.pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 32px 0 8px; }
.pages .nums { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--glass-fill); border: 1px solid var(--glass-line); box-shadow: var(--glass-hl); }
.pages button { font-family: var(--mono); font-size: 12.5px; color: var(--muted); border-radius: 999px; transition: color 160ms, background 160ms, border-color 160ms; }
.pages .nums button { min-width: 34px; padding: 6px 10px; border: 0; background: none; }
.pages .step { padding: 8px 16px; background: var(--glass-fill); border: 1px solid var(--glass-line); box-shadow: var(--glass-hl); }
.pages button:hover:not(:disabled) { color: var(--ink); }
.pages .step:hover:not(:disabled) { border-color: color-mix(in srgb, var(--sig) 55%, var(--glass-line)); }
.pages button[aria-current] { color: var(--ink); background: color-mix(in srgb, var(--ink) 10%, transparent); cursor: default; }
.pages button:disabled { opacity: .35; cursor: default; }
.pages-note { flex-basis: 100%; margin: 4px 0 0; text-align: center; font-family: var(--mono); font-size: 11px; color: var(--faint); }
.empty { text-align: center; padding: 48px 0 24px; color: var(--muted); }
.empty-code { margin: 0; font-family: var(--display); font-weight: 800; font-size: 88px; letter-spacing: -.04em; line-height: 1; background: linear-gradient(90deg, var(--hdr), var(--pay), var(--sig)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.back { margin: 40px 0 0; font-family: var(--mono); font-size: 13px; }
.back a { color: var(--muted); text-decoration: none; }
.back a:hover { color: var(--ink); }

/* Topic index (/categories/) */
.topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 24px; }
.topic-card { display: grid; gap: 6px; padding: 22px; border-radius: var(--r-card); text-decoration: none; color: inherit; background: linear-gradient(155deg, color-mix(in srgb, var(--c) 14%, transparent), transparent 60%), var(--glass-fill);
  border: 1px solid var(--glass-line); box-shadow: var(--glass-hl); transition: transform 300ms var(--ease), border-color 200ms; }
.topic-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 55%, var(--glass-line)); }
.topic-card .count { font-family: var(--display); font-weight: 800; font-size: 44px; line-height: 1; color: var(--c); }
.topic-card b { font-family: var(--display); font-size: 22px; letter-spacing: -.02em; }
.topic-card .latest { font-size: 13px; color: var(--muted); }

/* ── Article ────────────────────────────────────────────────── */
.article-wrap { display: grid; grid-template-columns: minmax(0, 740px); justify-content: center; gap: 64px; padding-bottom: clamp(56px, 8vw, 104px); }
.article-wrap.has-toc { grid-template-columns: minmax(0, 740px) 230px; }
.article-head { padding-top: clamp(32px, 6vw, 72px); }
.article-head h1 { font-family: var(--display); font-weight: 800; font-size: clamp(36px, 5.6vw, 64px); line-height: 1.02; letter-spacing: -.035em; margin: 16px 0 18px; text-wrap: balance; }
.article-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-family: var(--mono); font-size: 12.5px; color: var(--faint); }
.article-meta time { color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.tags a { font-family: var(--mono); font-size: 12px; color: var(--c); text-decoration: none; padding: 3px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 35%, var(--glass-line)); }
.article .tags a:hover { background: color-mix(in srgb, var(--c) 10%, transparent); }
.article-head::after { content: ''; display: block; height: 1px; margin-top: 28px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 0%, transparent)); opacity: .6; }

/* Reading typography */
.prose { font-size: 18px; line-height: 1.75; color: var(--prose-ink, var(--ink)); overflow-wrap: break-word; }
/* Text runs about 70 characters a line; code, images, tables and callouts keep the full column. */
.prose > :where(p, ul, ol, dl, blockquote, h1, h2, h3, h4, h5, h6) { max-width: 620px; }
/* Dark mode: body text a step softer than pure white, so long reads don't glare. Headings and bold keep full strength. */
:root[data-theme="dark"] .article-page { --prose-ink: #d2d6dc; }
.prose :is(h1, h2, h3, h4, strong, b) { color: var(--ink); }
/* A post sits on a calmer background: the site's colour glows dimmed behind the text. */
body.article-page .backdrop { opacity: .25; }
.prose > :first-child { margin-top: 28px; }
.prose p { margin: 1.1em 0; }
.prose h1, .prose h2, .prose h3, .prose h4 { font-family: var(--display); letter-spacing: -.02em; line-height: 1.2; scroll-margin-top: 84px; }
/* Posts written with # headings: a step above h2, not the paragraph line height. */
.prose h1 { font-size: clamp(29px, 3.4vw, 36px); margin: 2em 0 .6em; }
.prose h2 { font-size: clamp(26px, 3vw, 32px); margin: 2.1em 0 .6em; }
.prose h3 { font-size: clamp(21px, 2.4vw, 24px); margin: 1.8em 0 .5em; }
.prose h4 { font-size: 19px; margin: 1.6em 0 .4em; }
/* Zero-width, so the hidden # never wraps onto a line of its own under a long heading. */
.prose .permalink { display: inline-block; width: 0; white-space: nowrap; color: var(--faint); opacity: 0; transition: opacity 160ms; vertical-align: middle; }
.prose .permalink svg { margin-left: 8px; }
.prose .permalink svg { width: 18px; height: 18px; }
.prose :is(h1, h2, h3, h4):hover .permalink, .prose .permalink:focus-visible { opacity: 1; }
.prose a:not(.permalink) { color: var(--sig); text-decoration-color: color-mix(in srgb, var(--sig) 40%, transparent); }
.prose a:not(.permalink):hover { text-decoration-color: var(--sig); }
.prose strong, .prose b { font-weight: 650; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 1em 0; }
.prose li { margin: .35em 0; }
.prose li::marker { color: var(--c); }
.prose blockquote:not([class]) { margin: 1.6em 0; padding: 2px 0 2px 20px; border-left: 3px solid var(--c); color: var(--muted); }
.prose hr { border: 0; height: 1px; margin: 3em 0; background: linear-gradient(90deg, transparent, var(--glass-line), transparent); }
/* Inline code: a faint tint, no box, so a long phrase still reads as part of the sentence when it wraps. */
.prose :not(pre) > code { font-family: var(--mono); font-size: .86em; padding: .1em .36em; border-radius: 5px; color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.prose img { display: block; max-width: 100%; height: auto; margin: 1.6em auto; border-radius: var(--r-inner); border: 1px solid var(--glass-line); background: #fff; }
.prose picture { display: block; margin: 0 auto; }
.prose figure { margin: 1.8em 0; }
.prose figure img { margin-bottom: 0; }
.prose figcaption { margin-top: 10px; text-align: center; font-family: var(--mono); font-size: 12.5px; color: var(--faint); }
.prose table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 15px; }
.prose th, .prose td { padding: 10px 14px; border-bottom: 1px solid var(--glass-line); text-align: left; vertical-align: top; }
.prose th { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--muted); }
.prose lite-youtube, .prose iframe { display: block; margin: 1.6em 0; border-radius: var(--r-inner); overflow: hidden; max-width: 100%; }
.prose details { margin: 1.4em 0; padding: 12px 16px; border-radius: var(--r-inner); background: var(--glass-fill); border: 1px solid var(--glass-line); }
.prose details > summary { cursor: pointer; font-weight: 500; }
/* Code blocks: Hugo's highlighter output, plus a language label and copy button from blog.js */
.prose .highlight, .prose > pre { position: relative; margin: 1.7em 0; border-radius: var(--r-inner); background: var(--code-bg); border: 1px solid var(--glass-line); overflow: hidden; }
.prose pre { margin: 0; padding: 18px 20px; overflow-x: auto; font-family: var(--mono); font-size: 14px; line-height: 1.65; tab-size: 2; }
.prose .highlight pre { background: none !important; }
.prose .highlight.has-lang pre { padding-top: 40px; }
/* No language label: no strip either. Copy floats in the corner, shown on hover (always on touch screens). */
.no-lang .code-tools { justify-content: flex-end; }
@media (hover: hover) {
  .prose .no-lang .copy-code { opacity: 0; }
  .prose .no-lang:hover .copy-code, .prose .no-lang .copy-code:focus-visible, .prose .no-lang .copy-code.done { opacity: .9; }
}
.code-tools { position: absolute; top: 8px; left: 14px; right: 8px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.code-lang { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.copy-code { pointer-events: auto; font-family: var(--mono); font-size: 11px; padding: 4px 9px; border-radius: 8px; color: var(--muted); background: var(--glass-fill); border: 1px solid var(--glass-line); opacity: .75; transition: opacity 160ms, color 160ms; }
.copy-code:hover, .copy-code:focus-visible { opacity: 1; color: var(--ink); }
.copy-code.done { color: var(--sig); opacity: 1; }

/* Table of contents */
.toc { position: sticky; top: 92px; align-self: start; max-height: calc(100vh - 120px); overflow: auto; margin-top: clamp(32px, 6vw, 72px); padding-left: 4px; scrollbar-width: thin; }
.toc .label { margin: 0 0 12px; }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc ul ul { padding-left: 12px; }
.toc a { display: block; padding: 5px 0 5px 12px; border-left: 2px solid var(--glass-line); font-size: 13.5px; line-height: 1.4; color: var(--muted); text-decoration: none; transition: color 160ms, border-color 160ms; }
.toc a:hover { color: var(--ink); }
.toc a.active { color: var(--c); border-left-color: var(--c); }
.article-page .toc { --c: var(--sig); }

/* After the article */
.article-foot { margin-top: 56px; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 20px 22px; border-radius: var(--r-card); background: var(--glass-fill); border: 1px solid var(--glass-line); box-shadow: var(--glass-hl); }
.share .label { margin: 0 6px 0 0; }
.share .btn { font-size: 14px; padding: 8px 14px; text-decoration: none; }
a.btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.pager-link { display: grid; gap: 4px; padding: 18px 20px; border-radius: var(--r-card); text-decoration: none; color: inherit; background: var(--glass-fill); border: 1px solid var(--glass-line); box-shadow: var(--glass-hl); transition: border-color 200ms, transform 300ms var(--ease); }
.pager-link:hover { border-color: color-mix(in srgb, var(--sig) 50%, var(--glass-line)); transform: translateY(-2px); }
.pager-link .label { margin: 0; }
.pager-link b { font-family: var(--display); font-size: 18px; letter-spacing: -.01em; font-weight: 700; }
.pager-link.newer { grid-column: 2; text-align: right; }
.related { margin-top: 48px; }
.related .label { margin: 0 0 14px; }
.related .post-card h3 { font-size: 18px; }
.related .post-card .summary { display: none; }

/* ── 404 ────────────────────────────────────────────────────── */
.lost { padding-block: clamp(64px, 12vw, 140px); }
.lost-code { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(96px, 18vw, 200px); line-height: .85; letter-spacing: -.05em; }
.lost-code span { color: var(--hdr); }
.lost h1 { font-family: var(--display); font-size: clamp(28px, 4vw, 44px); letter-spacing: -.02em; margin: 18px 0 10px; }
.lost .lede { color: var(--muted); margin: 0; }

/* ── Search dialog ─────────────────────────────────────────── */
dialog.search { width: min(640px, calc(100vw - 32px)); max-height: min(72vh, 640px); margin: 12vh auto auto; padding: 0; border-radius: var(--r-panel); color: var(--ink); overflow: hidden;
  background: color-mix(in srgb, var(--panel) 82%, transparent); border: 1px solid var(--glass-line); box-shadow: var(--glass-hl), 0 40px 100px -30px rgb(0 0 0 / .6);
  -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%); }
dialog.search[open] { display: flex; flex-direction: column; animation: search-in 260ms var(--ease) both; }
@keyframes search-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
dialog.search::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, rgb(255 255 255 / .5), rgb(255 255 255 / .1) 26%, rgb(255 255 255 / .02) 58%, rgb(255 255 255 / .22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
:root[data-theme="light"] dialog.search::before { display: none; }
dialog.search::backdrop { background: rgb(6 8 12 / .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.search-box { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--glass-line); color: var(--muted); }
.search-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 18px; color: var(--ink); }
.search-box input::placeholder { color: var(--faint); }
.search-results { list-style: none; margin: 0; padding: 8px; overflow-y: auto; flex: 1; }
.search-results .group { padding: 10px 12px 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.search-results a { display: grid; gap: 3px; padding: 11px 14px; border-radius: var(--r-inner); color: inherit; text-decoration: none; }
.search-results a[aria-selected="true"] { background: linear-gradient(155deg, color-mix(in srgb, var(--c) 16%, transparent), transparent 80%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent); }
.r-meta { font-family: var(--mono); font-size: 11.5px; color: var(--faint); display: flex; gap: 12px; }
.r-meta .cat { color: var(--c); }
.r-title { font-weight: 600; font-size: 16px; }
.r-snippet { font-size: 13.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.r-empty { padding: 28px 16px; text-align: center; color: var(--muted); }
.search-foot { display: flex; gap: 18px; margin: 0; padding: 10px 18px; border-top: 1px solid var(--glass-line); font-family: var(--mono); font-size: 11px; color: var(--faint); }
.search-foot kbd { margin-right: 4px; }

/* ── Smaller screens ───────────────────────────────────────── */
@media (max-width: 1100px) {
  .article-wrap.has-toc { grid-template-columns: minmax(0, 740px); }
  .toc { display: none; }
}
@media (max-width: 860px) {
  .finder { top: 101px; }
  .post-card.featured .post-link { grid-template-columns: 1fr; }
  .post-card.featured .cover { min-height: 0; aspect-ratio: 16 / 9; }
  .prose { font-size: 17px; }
  .pager { grid-template-columns: 1fr; }
  .pager-link.newer { grid-column: auto; text-align: left; }
  dialog.search { margin-top: 8vh; }
}
@media (prefers-reduced-motion: reduce) {
  .post-card, .post-card:hover, .cover img, .pager-link { transition: none; transform: none; }
  .post-card.enter, dialog.search[open] { animation: none; }
}

/* Admonitions (> [!NOTE] etc. from hugo-admonitions): keep their type colour, sit on our glass in both themes. */
.admonition { margin: 1.6em 0 !important; border-radius: var(--r-inner) !important; overflow: hidden; background: var(--glass-fill) !important; border: 1px solid var(--glass-line) !important; border-left-width: 3px !important; box-shadow: var(--glass-hl); }
.admonition .admonition-content { background: transparent !important; color: inherit !important; }
.admonition .admonition-content :is(p, li) { color: inherit; }
.admonition .admonition-content code { background: color-mix(in srgb, var(--sunk) 75%, transparent) !important; color: inherit !important; }
.admonition a { color: var(--sig) !important; }
/* The module keeps its light-mode colours in dark mode (Note is a deep #096ae1); lift them so titles read on dark glass. */
:root[data-theme="dark"] {
  --adm-note: #6cb6ff; --adm-note-rgb: 108,182,255; --adm-info: #5cc8ff; --adm-info-rgb: 92,200,255;
  --adm-tip: #2bd4c4; --adm-tip-rgb: 43,212,196; --adm-question: #2bd4c4; --adm-question-rgb: 43,212,196; --adm-abstract: #2bd4c4; --adm-abstract-rgb: 43,212,196;
  --adm-success: #4fd18b; --adm-success-rgb: 79,209,139; --adm-experiment: #4fd18b; --adm-experiment-rgb: 79,209,139;
  --adm-warning: #f5b74f; --adm-warning-rgb: 245,183,79; --adm-idea: #f5b74f; --adm-idea-rgb: 245,183,79; --adm-danger: #ff9a5c; --adm-danger-rgb: 255,154,92;
  --adm-caution: #ff5a5f; --adm-caution-rgb: 255,90,95; --adm-error: #ff5a5f; --adm-error-rgb: 255,90,95; --adm-memo: #ff5a5f; --adm-memo-rgb: 255,90,95; --adm-goal: #ff5a5f; --adm-goal-rgb: 255,90,95;
  --adm-important: #b57bff; --adm-important-rgb: 181,123,255; --adm-task: #b57bff; --adm-task-rgb: 181,123,255; --adm-code: #9aa8ff; --adm-code-rgb: 154,168,255; --adm-quote: #9aa8ff; --adm-quote-rgb: 154,168,255;
}
.hero-actions .btn.primary { flex: none; }

/* Pinned bars (the /posts/ finder, the timeline filters): no box of their own while they sit in the page;
   once pinned under the header they get a full-width glass strip that reads as part of the header. */
body { overflow-x: clip; }
.finder, .tl-controls { background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-bottom: 0 !important; margin-inline: 0 !important; padding-inline: 0 !important; }
.finder::before, .tl-controls::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none;
  background: var(--glass-bar); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--glass-line); opacity: 0; transition: opacity 200ms; }
.finder.stuck::before, .tl-controls.stuck::before { opacity: 1; }

/* ── Polish ───────────────────────────────────────────────── */

/* Covers: each diagram whole, like a sheet rising from a topic-tinted, gridded tray. */
.cover:not(.no-image) { display: flex; align-items: flex-end; justify-content: center; padding: 22px 26px 0;
  background:
    linear-gradient(var(--glass-line) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--glass-line) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--c) 26%, transparent), transparent 70%),
    var(--sunk); }
.cover:not(.no-image) img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px 10px 0 0; background: #fff;
  box-shadow: 0 -10px 34px -14px rgb(0 0 0 / .55), 0 0 0 1px rgb(0 0 0 / .06); transform-origin: 50% 100%; transition: transform 600ms var(--ease), filter 300ms; }
.post-card:hover .cover:not(.no-image) img { transform: translateY(-6px) scale(1.02); }
.post-card.featured .cover:not(.no-image) { padding: 36px 44px 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cover img { filter: brightness(.88) contrast(1.04); } }
:root[data-theme="dark"] .cover img { filter: brightness(.88) contrast(1.04); }
.post-card:hover .cover img { filter: none; }

/* Topic chips carry their colour */
.topic .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }

/* Stay in the loop */
.follow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: 56px; padding: clamp(24px, 4vw, 40px); border-radius: var(--r-card);
  background: radial-gradient(500px circle at 0% 0%, color-mix(in srgb, var(--pay) 16%, transparent), transparent 60%), radial-gradient(400px circle at 100% 100%, color-mix(in srgb, var(--sig) 14%, transparent), transparent 60%), var(--glass-fill);
  border: 1px solid var(--glass-line); box-shadow: var(--glass-hl); }
.follow h2 { margin: 6px 0 8px; font-family: var(--display); font-size: clamp(26px, 3vw, 34px); letter-spacing: -.02em; }
.follow p { margin: 0; color: var(--muted); max-width: 52ch; }
.follow .label { color: var(--pay); }
.follow .hero-actions { margin: 0; }

/* Article header: a soft glow in the topic's colour, the full width of the window. It stays behind the title and
   has faded out by the time the text starts, so paragraphs sit on a plain background. */
.article-head { position: relative; }
.article-wrap::before { content: ''; position: absolute; z-index: -1; top: 0; left: 50%; width: 100vw; height: 420px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(600px circle at 28% 30%, color-mix(in srgb, var(--c) 17%, transparent), transparent 70%),
    radial-gradient(520px circle at 78% 10%, color-mix(in srgb, var(--c) 8%, transparent), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 85%); mask-image: linear-gradient(to bottom, #000 40%, transparent 85%); }

/* Contents on phones and tablets */
.toc-mobile { display: none; margin: 24px 0 0; border-radius: var(--r-card); background: var(--glass-fill); border: 1px solid var(--glass-line); box-shadow: var(--glass-hl); }
.toc-mobile > summary { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; font-family: var(--mono); font-size: 12.5px; color: var(--ink); }
.toc-mobile > summary::-webkit-details-marker { display: none; }
.toc-mobile > summary::after { content: ''; width: 7px; height: 7px; margin: 3px 2px 0 auto; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 250ms var(--ease); }
.toc-mobile[open] > summary::after { transform: translateY(3px) rotate(-135deg); }
.toc-mobile > summary .toc-left { margin-left: auto; }
.toc-mobile nav { padding: 0 18px 14px; }
.toc-mobile ul { list-style: none; margin: 0; padding: 0; }
.toc-mobile ul ul { padding-left: 14px; }
.toc-mobile a { display: block; padding: 6px 0; font-size: 14.5px; color: var(--muted); text-decoration: none; border-top: 1px solid var(--glass-line); }
.toc-mobile a.active { color: var(--c); }
.toc-left { margin: 14px 0 0; padding-left: 14px; font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
.toc-mobile .toc-left { margin: 0; padding: 0; color: var(--sig); }
@media (max-width: 1100px) { .toc-mobile { display: block; } }

/* Jumping to a heading flashes it briefly */
.prose :is(h1, h2, h3, h4):target { animation: target-flash 1.8s var(--ease); border-radius: 8px; }
@keyframes target-flash { 0%, 40% { background: color-mix(in srgb, var(--c) 18%, transparent); box-shadow: 0 0 0 8px color-mix(in srgb, var(--c) 18%, transparent); } 100% { background: transparent; box-shadow: 0 0 0 8px transparent; } }

/* Diagrams zoom in place */
.prose a:has(> picture, > img) { cursor: zoom-in; display: block; }
dialog.zoom { max-width: min(1200px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: var(--r-panel); background: #fff; overflow: auto; cursor: zoom-out; box-shadow: 0 40px 120px -30px rgb(0 0 0 / .7); }
dialog.zoom[open] { animation: zoom-in 300ms var(--ease) both; }
@keyframes zoom-in { from { opacity: 0; transform: scale(.94); } }
dialog.zoom::backdrop { background: rgb(6 8 12 / .7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog.zoom img { display: block; max-width: 100%; height: auto; }

/* Who wrote it */
.author { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 20px; padding: 24px; border-radius: var(--r-card);
  background: radial-gradient(360px circle at 0% 0%, color-mix(in srgb, var(--sig) 12%, transparent), transparent 60%), var(--glass-fill);
  border: 1px solid var(--glass-line); box-shadow: var(--glass-hl); }
.author img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--panel); box-shadow: 0 0 0 2px var(--sig); }
.author .label { margin: 0; }
.author h2 { margin: 4px 0 6px; font-family: var(--display); font-size: 22px; letter-spacing: -.02em; }
.author p { margin: 0; color: var(--muted); font-size: 15px; }
.author-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px !important; font-family: var(--mono); font-size: 12.5px; }
.author-links a { color: var(--sig); text-decoration: none; }
.author-links a:hover { text-decoration: underline; }

/* Back to top */
.to-top { position: fixed; z-index: 40; right: var(--gutter); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink);
  background: var(--glass-fill); border: 1px solid var(--glass-line); box-shadow: var(--glass-hl), var(--glass-drop); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; transition: opacity 250ms, transform 300ms var(--ease), border-color 160ms; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { border-color: color-mix(in srgb, var(--sig) 55%, var(--glass-line)); }

@media (max-width: 860px) {
  .cover:not(.no-image) { padding: 16px 18px 0; }
  .post-card.featured .cover:not(.no-image) { padding: 22px 24px 0; }
  .author { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cover img, .to-top { transition: none; }
  .prose :is(h2, h3, h4):target, dialog.zoom[open] { animation: none; }
}

/* ── Authorship: human-written, or written with an AI tool ── */
.ai-mark { --ai: #8a93a2; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; background: var(--ai); border: 2px solid var(--bg); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ai) 40%, transparent); flex: none; overflow: hidden; }
.ai-mark svg { width: 15px; height: 15px; }
.ai-mark img { width: 100%; height: 100%; object-fit: cover; }

.byline { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 7px 16px 7px 7px; border-radius: 999px; text-decoration: none; color: var(--ink);
  background: var(--glass-fill); border: 1px solid var(--glass-line); box-shadow: var(--glass-hl); transition: border-color 200ms, transform 300ms var(--ease); }
.byline:hover { transform: translateY(-1px); }
.byline .faces { display: inline-flex; align-items: center; }
.byline .faces img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg); }
.byline .faces .ai-mark { width: 30px; height: 30px; margin-left: -12px; }
.byline .faces .ai-mark + .ai-mark { margin-left: -8px; }
.byline .faces .ai-mark svg { width: 16px; height: 16px; }
.byline-text { display: grid; line-height: 1.25; }
.byline-text b { font-size: 14px; font-weight: 600; }
.byline-text span { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.byline.human { border-color: color-mix(in srgb, var(--sig) 35%, var(--glass-line)); }
.byline.human:hover { border-color: color-mix(in srgb, var(--sig) 65%, var(--glass-line)); }
.byline.human .faces img { box-shadow: 0 0 0 2px var(--sig); }
.byline.human .byline-text span { color: var(--sig); }
.byline.ai { --ai: #8b5cf6; border-color: color-mix(in srgb, var(--ai) 40%, var(--glass-line)); background: linear-gradient(110deg, color-mix(in srgb, var(--ai) 12%, transparent), transparent 70%), var(--glass-fill); }
.byline.ai .byline-text span { color: color-mix(in srgb, var(--ai) 80%, var(--ink)); }

/* On the cards */
.post-meta .by { display: inline-flex; align-items: center; gap: 4px; }
.post-meta .by i { font-style: normal; }
.post-meta .by.human { color: var(--sig); }
.post-meta .by.ai { color: var(--pay); }

/* In the author card the tool's mark sits on the photo's edge */
.author-faces { position: relative; display: inline-block; width: 72px; height: 72px; }
.author-faces .ai-mark { position: absolute; right: -6px; bottom: -4px; width: 30px; height: 30px; }
.author-faces .ai-mark svg { width: 16px; height: 16px; }
.author.with-ai img { box-shadow: 0 0 0 2px var(--pay); }

/* The byline shares a row with the topic tags, under the title */
.article-sub { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 16px; }
.article-sub .tags { margin: 0; }
.article-sub .byline { margin-top: 0; margin-left: auto; padding: 5px 14px 5px 5px; gap: 10px; }
.article-sub .byline .faces img { width: 32px; height: 32px; }
.article-sub .byline .faces .ai-mark { width: 26px; height: 26px; margin-left: -10px; }
.article-sub .byline .faces .ai-mark svg { width: 14px; height: 14px; }
.article-sub .byline-text b { font-size: 13px; }
.article-sub .byline-text span { font-size: 11px; }
@media (max-width: 560px) { .article-sub { flex-direction: column; align-items: flex-start; } .article-sub .byline { margin-left: 0; } }