/* azhark.com: an engineer's notebook. Warm paper, ink, one terracotta accent, real code in real
   editors. Dark mode follows the system. Motion is short, eased out, and off for reduced motion. */

@font-face { font-family: "Fraunces"; src: url(fonts/fraunces-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url(fonts/hanken-grotesk-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/jetbrains-mono-latin.woff2) format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  color-scheme: light dark;
  --paper: oklch(97.4% 0.009 80);
  --paper-2: oklch(94.2% 0.013 80);
  --surface: oklch(99.2% 0.004 80);
  --ink: oklch(22% 0.012 60);
  --ink-2: oklch(41% 0.014 60);
  --muted: oklch(55% 0.013 65);
  --rule: oklch(88.5% 0.013 80);
  --accent: oklch(56% 0.155 38);
  --accent-ink: oklch(48% 0.14 38);
  --accent-soft: oklch(93% 0.035 50);
  --code-bg: oklch(21.5% 0.01 60);
  --code-bar: oklch(25.5% 0.011 60);
  --code-ink: oklch(91% 0.012 80);
  --code-muted: oklch(58% 0.012 70);
  --shadow: 0 1px 0 oklch(88% 0.013 80), 0 18px 40px -24px oklch(30% 0.03 60 / .35);

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --measure: 43rem;
  --wide: 72rem;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: oklch(19.5% 0.009 60);
    --paper-2: oklch(23.5% 0.011 60);
    --surface: oklch(22% 0.01 60);
    --ink: oklch(93% 0.01 80);
    --ink-2: oklch(80% 0.012 75);
    --muted: oklch(64% 0.012 70);
    --rule: oklch(31% 0.012 60);
    --accent: oklch(70% 0.14 45);
    --accent-ink: oklch(76% 0.12 50);
    --accent-soft: oklch(30% 0.05 45);
    --code-bg: oklch(15.5% 0.008 60);
    --code-bar: oklch(19% 0.01 60);
    --shadow: 0 1px 0 oklch(30% 0.012 60), 0 18px 40px -24px oklch(0% 0 0 / .6);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.68 var(--sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: .2em; transition: color .15s; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--accent-soft); color: var(--ink); }
kbd { font: 500 .72rem/1 var(--mono); padding: .22rem .38rem; border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); color: var(--ink-2); }

.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: .5rem 1rem; z-index: 50; }
.skip:focus { left: 1rem; }

.wrap { width: min(100% - 2.5rem, var(--wide)); margin-inline: auto; }
.wrap.article { width: min(100% - 2.5rem, var(--measure)); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in oklch, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; flex-wrap: wrap; }
.wordmark { font: 600 1.18rem/1 var(--mono); letter-spacing: -.02em; color: var(--ink); text-decoration: none; display: inline-flex; align-items: baseline; }
.wordmark-mark { color: var(--accent); margin-right: .1em; }
.wordmark-dot { color: var(--accent); }
.wordmark:hover { color: var(--ink); }
.wordmark:hover .wordmark-mark { animation: blink .6s steps(2) 2; }
.primary-nav { display: flex; align-items: center; gap: 1.35rem; flex-wrap: wrap; }
.primary-nav a { color: var(--ink-2); text-decoration: none; font-size: .95rem; font-weight: 500; padding: .35rem 0; position: relative; }
.primary-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.primary-nav a:hover { color: var(--ink); }
.primary-nav a:hover::after, .primary-nav a[aria-current="page"]::after { transform: scaleX(1); }
.primary-nav a[aria-current="page"] { color: var(--ink); }
.palette-open { display: inline-flex; align-items: center; gap: .6rem; font: 500 .85rem/1 var(--sans); color: var(--muted); background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: .45rem .5rem .45rem .75rem; cursor: pointer; transition: border-color .15s, color .15s; }
.palette-open:hover { border-color: var(--accent); color: var(--ink); }
.find-short { display: none; }
@media (hover: none) { .palette-open kbd { display: none; } .palette-open { padding-right: .75rem; } }

.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 30; pointer-events: none; }
.read-progress span { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }

main { padding-bottom: clamp(3rem, 8vw, 6rem); }

/* ---------- Type ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; color: var(--ink); font-optical-sizing: auto; }
h1 { font-size: clamp(2.1rem, 4.4vw, 3rem); margin: 0 0 .7rem; }
h2 { font-size: clamp(1.4rem, 2.4vw, 1.7rem); margin: 2.8rem 0 .8rem; }
h3 { font-size: 1.22rem; margin: 2rem 0 .6rem; }
.kicker { font: 500 .78rem/1.2 var(--mono); letter-spacing: .02em; color: var(--accent); margin: 0 0 .9rem; }
.kicker::before { content: "// "; opacity: .7; }
.lede { font-size: 1.14rem; line-height: 1.6; color: var(--ink-2); }
.meta { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; color: var(--muted); font: 400 .82rem/1.5 var(--mono); margin: 0; }

.article-head { padding: 2.2rem 0 1.5rem; border-bottom: 1px solid var(--rule); margin-bottom: 2rem; }

/* ---------- Breadcrumbs ---------- */
.crumbs { padding-top: 1.6rem; font: 400 .8rem/1.4 var(--mono); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: .35rem; color: var(--rule); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs + .article-head { padding-top: 1rem; }

/* ---------- Reading layout with the table of contents ---------- */
.reading { display: grid; grid-template-columns: minmax(0, var(--measure)); justify-content: center; column-gap: clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 1180px) {
  .reading:has(.toc:not([hidden])) { grid-template-columns: minmax(0, var(--measure)) 14rem; }
}
.toc { display: none; }
@media (min-width: 1180px) {
  .toc:not([hidden]) { display: block; position: sticky; top: 5.5rem; align-self: start; margin-top: 9.5rem; max-height: calc(100vh - 7rem); overflow: auto; font-size: .86rem; }
}
.toc-title { font: 500 .72rem/1 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .8rem; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.toc li a { display: block; padding: .3rem 0 .3rem .9rem; margin-left: -1px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; line-height: 1.35; transition: color .2s, border-color .2s; }
.toc li a:hover { color: var(--ink); }
.toc li a.is-active { color: var(--ink); border-left-color: var(--accent); }

/* ---------- Prose ---------- */
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.15rem; }
.prose li { margin-bottom: .35rem; }
.prose li::marker { color: var(--muted); }
.prose li > ul, .prose li > ol { margin: .35rem 0 0; }
.prose h2 { scroll-margin-top: 5.5rem; position: relative; }
.prose h2 .anchor { position: absolute; left: -1.1em; color: var(--rule); text-decoration: none; font-weight: 400; opacity: 0; transition: opacity .15s; }
.prose h2:hover .anchor { opacity: 1; }
.prose h2 .anchor:hover { color: var(--accent); }
.prose code { font: .86em/1.4 var(--mono); background: var(--paper-2); border: 1px solid var(--rule); border-radius: 4px; padding: .08em .35em; }
.prose blockquote { margin: 1.6rem 0; padding: .2rem 0 .2rem 1.2rem; border-left: 2px solid var(--accent); color: var(--ink-2); font-style: italic; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }
.prose .note { background: var(--accent-soft); padding: 1rem 1.15rem; border-radius: 8px; color: var(--ink); }
.prose .note::before { content: "note"; display: block; font: 600 .7rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--accent-ink); margin-bottom: .5rem; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: .9rem; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: .5rem .8rem; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.prose th { font: 600 .78rem/1.4 var(--mono); color: var(--ink-2); background: var(--paper-2); }
.prose td { font-variant-numeric: tabular-nums; }
.prose td code, .prose th code { background: none; border: 0; padding: 0; }
.prose tbody tr { transition: background-color .15s; }
.prose tbody tr:hover { background: var(--paper-2); }
.prose pre { background: var(--code-bg); color: var(--code-ink); padding: 1rem 1.1rem; border-radius: 10px; overflow-x: auto; font: .86rem/1.65 var(--mono); }
.prose pre code { background: none; border: 0; padding: 0; color: inherit; font: inherit; }
.prose figure { margin: 1.5rem 0; }
.prose figcaption { color: var(--muted); font-size: .85rem; margin-top: .4rem; }

/* Result tables stream in like query output (class added by site.js). */
@media (prefers-reduced-motion: no-preference) {
  .stream tbody tr { opacity: 0; transform: translateY(4px); }
  .stream.is-in tbody tr { opacity: 1; transform: none; transition: opacity .35s var(--ease-out), transform .35s var(--ease-out), background-color .15s; transition-delay: calc(var(--row, 0) * 60ms), calc(var(--row, 0) * 60ms), 0s; }
}

/* ---------- Code blocks: an editor window (markup from azhark-core/code.php) ---------- */
.code-block { margin: 1.4rem 0 1.8rem; border-radius: 12px; overflow: hidden; background: var(--code-bg); box-shadow: var(--shadow); }
.code-block figcaption { display: flex; align-items: stretch; gap: .75rem; margin: 0; padding: 0 .6rem 0 0; background: var(--code-bar); font: 500 .74rem/1 var(--mono); color: var(--code-muted); }
.code-tab { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1rem; background: var(--code-bg); color: var(--code-ink); box-shadow: inset 0 2px 0 var(--accent); }
.code-tab::before { content: ""; width: .5rem; height: .5rem; border-radius: 2px; background: var(--accent); opacity: .85; }
.code-block[data-lang="python"] .code-tab::before { background: oklch(78% 0.13 95); }
.code-lang { display: inline-flex; align-items: center; margin-left: auto; }
.copy-code { align-self: center; font: inherit; color: var(--code-ink); background: transparent; border: 1px solid oklch(40% 0.012 60); border-radius: 6px; padding: .38rem .7rem; cursor: pointer; transition: border-color .15s, background-color .15s; }
.copy-code:hover { border-color: oklch(60% 0.012 60); background: oklch(30% 0.012 60); }
.copy-code.is-done { border-color: oklch(65% 0.12 150); color: oklch(85% 0.1 150); }
.code-body { display: flex; overflow-x: auto; }
.gutter { flex: none; padding: 1rem .2rem 1.1rem .9rem; text-align: right; white-space: pre; user-select: none; color: oklch(45% 0.01 60); font: .86rem/1.65 var(--mono); min-width: 2.6rem; }
.code-block pre, .gutter, .terminal, .prose code { font-variant-ligatures: none; }
.code-block pre { margin: 0; padding: 1rem 1.2rem 1.1rem .9rem; background: none; border-radius: 0; color: var(--code-ink); font: .86rem/1.65 var(--mono); tab-size: 4; overflow: visible; flex: 1; }
.t-k { color: oklch(76% 0.13 45); }
.t-s { color: oklch(80% 0.12 135); }
.t-n { color: oklch(83% 0.11 85); }
.t-c { color: oklch(56% 0.012 70); font-style: italic; }

/* ---------- Lists of links ---------- */
.siblings { margin-top: 3.2rem; padding-top: 1.6rem; border-top: 1px solid var(--rule); }
.siblings h2 { margin: 0 0 1rem; font-size: 1.2rem; }
.siblings ul { margin: 0 0 .8rem; padding: 0; list-style: none; counter-reset: q; columns: 2 15rem; column-gap: 2rem; }
.siblings li { counter-increment: q; margin: 0 0 .45rem; break-inside: avoid; display: flex; gap: .6rem; align-items: baseline; }
.siblings li::before { content: counter(q, decimal-leading-zero); font: 500 .72rem/1 var(--mono); color: var(--muted); }
.siblings li.is-current a { color: var(--ink); text-decoration: none; font-weight: 600; }
.siblings li.is-current::before { color: var(--accent); }
.siblings .more { font-weight: 600; }

.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; padding: .95rem 0; border-bottom: 1px solid var(--rule); }
.post-list li > a { font: 600 1.08rem/1.35 var(--display); color: var(--ink); text-decoration: none; transition: color .15s; }
.post-list li > a:hover { color: var(--accent); }
.post-list time { color: var(--muted); font: 400 .8rem/1.6 var(--mono); white-space: nowrap; }
.post-list p { grid-column: 1 / -1; margin: 0; color: var(--ink-2); font-size: .95rem; }
.post-list.compact li > a { font-size: 1rem; }

/* ---------- Author box ---------- */
.author-box { display: flex; gap: 1.1rem; align-items: flex-start; margin-top: 3.2rem; padding: 1.4rem; border-radius: 14px; background: var(--paper-2); font-size: .95rem; color: var(--ink-2); }
.author-box img { border-radius: 50%; flex: none; box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--accent-soft); }
.author-box p { margin: 0 0 .4rem; }
.author-name { color: var(--ink); font-weight: 600; }
.author-proof { color: var(--ink); }

/* ---------- Home: hero ---------- */
.hero { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(2.5rem, 6vw, 4.5rem); }
@media (min-width: 960px) { .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.1rem); line-height: 1.02; letter-spacing: -.035em; margin-bottom: 1.2rem; }
.hero-count { color: var(--accent); font-variant-numeric: tabular-nums; }
.hero .lede { max-width: 36rem; }
.hero-links { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; margin: 2rem 0 0; }
.button { display: inline-flex; align-items: center; gap: .5rem; background: var(--ink); color: var(--paper); text-decoration: none; padding: .85rem 1.3rem; border-radius: 10px; font-weight: 600; font-size: .95rem; transition: background-color .2s, transform .2s var(--ease-out); }
.button:hover { background: var(--accent); color: var(--paper); transform: translateY(-1px); }
.text-link { font-weight: 600; text-decoration: none; }
.text-link span { display: inline-block; transition: transform .25s var(--ease-out); }
.text-link:hover span { transform: translateX(4px); }

/* The terminal: a real query, typed out once (site.js), whose rows are Azhar's projects. */
.terminal { margin: 0; border-radius: 14px; overflow: hidden; background: var(--code-bg); color: var(--code-ink); box-shadow: var(--shadow); font: .84rem/1.6 var(--mono); transform: rotate(.4deg); }
.terminal figcaption { display: flex; align-items: center; gap: 1rem; padding: .7rem 1rem; background: var(--code-bar); color: var(--code-muted); font-size: .74rem; margin: 0; }
.dots { display: inline-flex; gap: .4rem; }
.dots i { width: .62rem; height: .62rem; border-radius: 50%; background: oklch(45% 0.012 60); }
.dots i:first-child { background: var(--accent); }
.terminal-body { padding: 1.2rem 1.3rem 1.3rem; min-height: 19.5rem; }
.t-line { margin: 0 0 1rem; white-space: pre-wrap; word-break: break-word; }
.t-prompt { color: var(--accent); }
.caret { display: inline-block; width: .55em; height: 1.1em; margin-left: 2px; vertical-align: -.18em; background: var(--code-ink); animation: blink 1.1s steps(2) 7 forwards; }
.t-result { border-collapse: collapse; width: 100%; font-size: .8rem; }
.t-result th, .t-result td { text-align: left; padding: .32rem .7rem; border: 1px solid oklch(34% 0.012 60); }
.t-result th { color: var(--code-muted); font-weight: 600; }
.t-result a { color: oklch(80% 0.12 135); text-decoration: none; }
.t-result a:hover { text-decoration: underline; }
.t-more td { color: var(--code-muted); font-style: italic; }
.t-summary { margin: .9rem 0 0; color: var(--code-muted); }
.terminal .t-result tr, .terminal .t-summary { transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); }
.terminal.is-printing .t-result tr { opacity: 0; transform: translateX(-4px); }
.terminal.is-printing .t-summary { opacity: 0; }
.terminal.is-printed .t-result tr { opacity: 1; transform: none; transition-delay: calc(var(--row, 0) * 90ms); }
.terminal.is-printed .t-summary { opacity: 1; transition-delay: .6s; }

/* ---------- Home: sections ---------- */
.block { padding: clamp(2.2rem, 5vw, 3.2rem) 0 .5rem; border-top: 1px solid var(--rule); }
.block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.2rem; }
.block-head h2 { margin: 0; font-size: clamp(1.35rem, 2.2vw, 1.6rem); }
.block-head a { font-size: .9rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 900px) { .split { grid-template-columns: 1.1fr .9fr; } }

/* Certifications as a ledger: name, facts, one square per question. */
.cert-ledger { list-style: none; margin: 0; padding: 0; counter-reset: cert; }
.cert-ledger li { counter-increment: cert; border-bottom: 1px solid var(--rule); }
.cert-row { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; grid-template-areas: "num name count" "num facts dots"; gap: .25rem 1rem; padding: 1.15rem .6rem; text-decoration: none; color: var(--ink); border-radius: 8px; transition: background-color .2s; }
.cert-row::before { content: counter(cert, decimal-leading-zero); grid-area: num; font: 500 .8rem/1.9 var(--mono); color: var(--muted); }
.cert-row:hover { background: var(--paper-2); color: var(--ink); }
.cert-name { grid-area: name; font: 600 1.3rem/1.25 var(--display); letter-spacing: -.015em; }
.cert-facts { grid-area: facts; color: var(--muted); font-size: .9rem; }
.cert-count { grid-area: count; font: 500 .82rem/1.9 var(--mono); color: var(--accent-ink); white-space: nowrap; text-align: right; }
.cert-count span { display: inline-block; transition: transform .25s var(--ease-out); }
.cert-row:hover .cert-count span { transform: translateX(4px); }
.cert-dots { grid-area: dots; display: flex; gap: 4px; align-items: center; justify-content: flex-end; }
.cert-dots i { width: 9px; height: 9px; border-radius: 2px; background: var(--rule); transition: background-color .3s; }
.cert-row:hover .cert-dots i { background: var(--accent); }

.project-list { list-style: none; margin: 0; padding: 0; }
.project-list li { border-bottom: 1px solid var(--rule); }
.project-list a { display: grid; grid-template-columns: auto 1fr; gap: .15rem 1rem; padding: 1rem 0; text-decoration: none; color: var(--ink); }
.project-list strong { font: 600 1.15rem/1.3 var(--display); letter-spacing: -.01em; transition: color .15s; }
.project-host { justify-self: end; font: 400 .78rem/1.9 var(--mono); color: var(--muted); }
.project-text { grid-column: 1 / -1; color: var(--ink-2); font-size: .94rem; }
.project-list a:hover strong { color: var(--accent); }

/* ---------- HackerRank index ---------- */
.cert-list { display: grid; gap: 0; margin-top: 2.2rem; border-top: 1px solid var(--rule); }
.cert-card { padding: 1.6rem 0; border-bottom: 1px solid var(--rule); }
.cert-card h2 { margin: 0 0 .3rem; font-size: 1.45rem; }
.cert-card h2 a { color: var(--ink); text-decoration: none; }
.cert-card h2 a:hover { color: var(--accent); }
.cert-card .cert-facts { display: block; margin: 0 0 1rem; font: 400 .8rem/1.5 var(--mono); }
.cert-card ul { margin: 0; padding: 0; list-style: none; columns: 2 14rem; column-gap: 2rem; counter-reset: q; }
.cert-card li { counter-increment: q; margin-bottom: .4rem; break-inside: avoid; display: flex; gap: .6rem; align-items: baseline; }
.cert-card li::before { content: counter(q, decimal-leading-zero); font: 500 .72rem/1 var(--mono); color: var(--muted); }

/* ---------- Pagination ---------- */
.pagination { margin-top: 2rem; }
.nav-links { display: flex; gap: 1rem; justify-content: space-between; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--rule); padding: 2.2rem 0 2.6rem; color: var(--muted); font-size: .86rem; }
.footer-row { display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; align-items: flex-end; }
.footer-row p { margin: 0; max-width: 34rem; }
.footer-row .footer-sign { font: 400 .82rem/1.6 var(--mono); color: var(--ink-2); margin-bottom: .4rem; }
.footer-sign span:first-child { color: var(--accent); }
.footer-out { color: var(--muted); margin-left: .6rem; }
.footer-row nav { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.footer-row a { color: var(--ink-2); text-decoration: none; }
.footer-row a:hover { color: var(--accent); }

/* ---------- Command palette ---------- */
.palette { width: min(100% - 2rem, 38rem); margin: 12vh auto auto; padding: 0; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px -20px oklch(20% 0.02 60 / .45); }
.palette::backdrop { background: oklch(20% 0.01 60 / .35); backdrop-filter: blur(3px); }
.palette[open] { animation: palette-in .22s var(--ease-out); }
.palette-box { margin: 0; }
.palette-input { display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem; border-bottom: 1px solid var(--rule); font-family: var(--mono); color: var(--accent); }
.palette-input input { flex: 1; border: 0; background: transparent; color: var(--ink); font: 400 1rem/1.4 var(--sans); outline: none; }
.palette-results { list-style: none; margin: 0; padding: .4rem; max-height: min(60vh, 26rem); overflow: auto; }
.palette-results li a { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: .6rem .75rem; border-radius: 8px; color: var(--ink); text-decoration: none; }
.palette-results .p-title { min-width: 0; }
.palette-results li a .p-group { font: 400 .74rem/1 var(--mono); color: var(--muted); white-space: nowrap; }
.palette-results li a mark { background: none; color: var(--accent-ink); font-weight: 600; }
.palette-results li[aria-selected="true"] a { background: var(--paper-2); }
.palette-results li[aria-selected="true"] a .p-group { color: var(--accent-ink); }
.palette-empty { padding: 1rem .75rem; color: var(--muted); }
.palette-hint { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: 0; padding: .65rem 1rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: .78rem; }

/* ---------- Motion ---------- */
@keyframes blink { 50% { opacity: 0; } }
@keyframes palette-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(10px); }
  .js .reveal.is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(var(--stagger, 0) * 80ms); }
  .js .terminal.reveal.is-in { transform: rotate(.4deg); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .terminal { transform: none; }
}

/* ---------- Small screens ---------- */
@media (max-width: 720px) {
  body { font-size: 1rem; }
  .header-row { padding: .6rem 0; }
  .primary-nav { gap: .9rem; }
  .find-long { display: none; }
  .find-short { display: inline; }
  .terminal, .js .terminal.reveal.is-in { transform: none; font-size: .78rem; }
  .terminal-body { min-height: 0; }
  .cert-row { grid-template-columns: 2rem minmax(0, 1fr); grid-template-areas: "num name" "num facts" "num count"; }
  .cert-count { text-align: left; }
  .cert-dots { display: none; }
  .post-list li { grid-template-columns: 1fr; }
  .prose h2 .anchor { display: none; }
}