/* Static pages (blog, topics, about, projects, resume). Mirrors the portfolio's own design tokens
   (tailwind.config.js, src/index.css): General Sans only, black-100 ground, black-200/300 surfaces,
   white-600 body text, gray-gradient headings. */

@font-face { font-family: 'General Sans'; font-style: normal; font-weight: 400; font-display: swap; src: local('General Sans'), url('https://fonts.cdnfonts.com/s/85793/GeneralSans-Regular.woff') format('woff'); }
@font-face { font-family: 'General Sans'; font-style: normal; font-weight: 500; font-display: swap; src: local('General Sans'), url('https://fonts.cdnfonts.com/s/85793/GeneralSans-Medium.woff') format('woff'); }
@font-face { font-family: 'General Sans'; font-style: normal; font-weight: 600; font-display: swap; src: local('General Sans'), url('https://fonts.cdnfonts.com/s/85793/GeneralSans-Semibold.woff') format('woff'); }
@font-face { font-family: 'General Sans'; font-style: normal; font-weight: 700; font-display: swap; src: local('General Sans'), url('https://fonts.cdnfonts.com/s/85793/GeneralSans-Bold.woff') format('woff'); }

/* Fallback faces scaled to General Sans's widths. Until the web font arrives, text is drawn in
   Helvetica or Arial; scaled like this it wraps onto the same lines, so nothing below it moves
   when General Sans swaps in (layout shift). The percentages compare average glyph widths per
   weight. Capitals get their own family: Helvetica's are about 6% wider than General Sans's. */
@font-face { font-family: 'General Sans Fallback'; font-weight: 400; src: local('Helvetica'), local('Arial'), local('ArialMT'); size-adjust: 101%; }
@font-face { font-family: 'General Sans Fallback'; font-weight: 500; src: local('Helvetica'), local('Arial'), local('ArialMT'); size-adjust: 103.7%; }
@font-face { font-family: 'General Sans Fallback'; font-weight: 600; src: local('Helvetica Bold'), local('Helvetica-Bold'), local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 99%; }
@font-face { font-family: 'General Sans Fallback'; font-weight: 700; src: local('Helvetica Bold'), local('Helvetica-Bold'), local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 101.7%; }
@font-face { font-family: 'General Sans Caps Fallback'; font-weight: 400 500; src: local('Helvetica'), local('Arial'), local('ArialMT'); size-adjust: 94.3%; }
@font-face { font-family: 'General Sans Caps Fallback'; font-weight: 600 700; src: local('Helvetica Bold'), local('Helvetica-Bold'), local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 98.4%; }

:root {
  --black-100: #010103;
  --black-200: #0e0e10;
  --black-300: #1c1c21;
  --black-500: #3a3a49;
  --black-600: #1a1a1a;
  --white-800: #e4e4e6;
  --white-700: #d6d9e9;
  --white-600: #afb0b6;
  --neutral-400: #a3a3a3;
  --accent: #7c9cff;
  --sans: 'General Sans', 'General Sans Fallback', 'Segoe UI', Helvetica, Arial, sans-serif;
  --sans-caps: 'General Sans', 'General Sans Caps Fallback', 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --measure: 70ch;
  --gutter: clamp(20px, 5vw, 40px);
}

* { box-sizing: border-box; }
/* scroll-padding-top keeps anchor targets (#faq, TOC links, /projects/#card) clear of the sticky
   header. It matches the header height: one 74px row on wide screens, and on narrow screens the
   header is not sticky at all (see the nav media query below). */
html { color-scheme: dark; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--black-100);
  color: var(--white-600);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  overflow-x: clip;
  position: relative;
}
.glow {
  position: absolute; z-index: 0; pointer-events: none;
  top: -260px; left: 50%; width: min(900px, 100vw); height: 560px; transform: translateX(-50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
  filter: blur(40px);
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; height: auto; }
::selection { background: color-mix(in srgb, var(--accent) 40%, transparent); color: #fff; }

.text-gray-gradient, h1, .section-title, .rsec__title {
  background: linear-gradient(to right, #bec1cf 60%, #d5d8ea 60%, #d5d8ea 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.skip {
  position: absolute; left: 8px; top: -48px; z-index: 100;
  background: var(--black-300); color: #fff; padding: 8px 14px; border-radius: 6px;
}
.skip:focus { top: 8px; }
:where(a, button):focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; border-radius: 4px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Reading progress (created by the inline article script). */
.progress {
  position: fixed; top: 0; left: 0; z-index: 60; width: 100%; height: 2px; pointer-events: none;
  background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .12s linear;
}
@media (prefers-reduced-motion: reduce) { .progress { transition: none; } }

/* ---------- nav: same as the portfolio header ---------- */
.topbar { position: sticky; top: 0; z-index: 50; background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(6px); }
.topbar__inner {
  max-width: 80rem; margin: 0 auto; padding: 20px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.topbar__home { color: var(--neutral-400); font-weight: 700; font-size: 1.25rem; transition: color .2s; }
.topbar__home:hover { color: #fff; }
.topbar__nav { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 1rem; color: var(--neutral-400); }
.topbar__nav a { transition: color .2s; }
.topbar__nav a:hover, .topbar__nav a[aria-current='page'] { color: #fff; }
/* Hackathons, Research and Uses need about 1020px next to the brand (measured with General Sans,
   plus room for a wider fallback font). Narrower screens reach them from the footer instead. */
@media (max-width: 1099px) { .topbar__extra { display: none; } }
/* Below this width the brand and the nav no longer fit on one row and the header grows to two or
   three rows (about 150px on a 390px phone). A header that tall would cover a fifth of the screen
   and hide anchor targets, so it scrolls away with the page instead of sticking. */
@media (max-width: 760px) {
  .topbar { position: static; }
  html { scroll-padding-top: 16px; }
}
@media (max-width: 640px) {
  .topbar__inner { padding-top: 14px; padding-bottom: 14px; row-gap: 8px; }
  .topbar__nav { gap: 4px 18px; font-size: 15px; }
}

/* ---------- shared type ---------- */
/* Small uppercase labels use the capitals-sized fallback (see the @font-face rules at the top). */
.eyebrow, .card__eyebrow, .tldr strong, .toc__title, .series__title, .series__here, .pager__dir { font-family: var(--sans-caps); }
.eyebrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 16px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white-600);
}
.eyebrow .dot { color: var(--black-500); }
.badge {
  display: inline-block; padding: 4px 10px; border-radius: 999px; letter-spacing: 0.04em; text-transform: none;
  font-size: 12px; font-weight: 600;
  color: color-mix(in srgb, var(--accent) 72%, #fff); background: color-mix(in srgb, var(--accent) 14%, transparent);
}
h1 {
  font-weight: 600; font-size: clamp(2rem, 4.6vw, 3.25rem); line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 18px;
}
.standfirst { font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.6; color: var(--white-600); max-width: 62ch; margin: 0; }

/* ---------- article ---------- */
.article { position: relative; z-index: 1; max-width: 80rem; margin: 0 auto; padding: 48px var(--gutter) 80px; }
.article__head { max-width: 800px; margin-bottom: 44px; }
.article__head .links { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 6px; font-size: 15px; font-weight: 500;
  background: var(--black-300); color: #fff; transition: background .2s, transform .2s;
}
.pill:hover { background: var(--black-500); }
.pill:active { transform: scale(0.97); }
.tldr {
  margin: 28px 0 0; padding: 18px 20px; border-radius: 8px; background: var(--black-200); border: 1px solid var(--black-300);
  border-left: 3px solid var(--accent); color: var(--white-600); font-size: 16px;
}
.tldr strong { color: #fff; margin-right: 8px; letter-spacing: 0.08em; font-size: 12px; text-transform: uppercase; }
/* Screenshot of the live project, right under the article header (above the fold, so not lazy). */
.shot { max-width: 800px; margin: -12px 0 48px; }
.shot img {
  display: block; width: 100%; height: auto; border-radius: clamp(10px, 2vw, 16px); border: 1px solid var(--black-300); background: var(--black-200);
  box-shadow: 0 24px 60px -28px color-mix(in srgb, var(--accent) 45%, transparent);
}

.article__layout { display: grid; grid-template-columns: minmax(0, var(--measure)) 1fr; gap: 56px; align-items: start; }
.toc { order: 2; position: sticky; top: 96px; max-width: 260px; font-size: 14px; color: var(--white-600); }
.toc__title { margin: 0 0 10px; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.toc ol { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 1px solid var(--black-300); }
.toc li { margin: 8px 0; }
.toc a:hover { color: #fff; }
@media (max-width: 960px) {
  .article__layout { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; order: 0; max-width: none; margin-bottom: 8px; }
}

.prose { min-width: 0; }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.25em; }
.prose h2, .prose h3 { font-weight: 600; color: #fff; position: relative; letter-spacing: -0.005em; }
.prose h2 { font-size: clamp(1.45rem, 2.4vw, 1.85rem); line-height: 1.2; margin: 2.2em 0 0.7em; }
.prose h3 { font-size: 1.2rem; line-height: 1.35; margin: 1.8em 0 0.6em; color: var(--white-800); }
.prose .anchor { position: absolute; left: -1.1em; color: var(--black-500); opacity: 0; transition: opacity .2s; font-weight: 400; }
.prose h2:hover .anchor, .prose h3:hover .anchor { opacity: 1; }
.prose a { color: #fff; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--accent); }
.prose strong { color: var(--white-800); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.25em; }
.prose li { margin: 0.35em 0; }
.prose li::marker { color: var(--black-500); }
.prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--accent); color: var(--white-700); font-size: 1.08em; }
.prose hr { border: 0; border-top: 1px solid var(--black-300); margin: 2.5em 0; }
.prose code { font-family: var(--mono); font-size: 0.86em; background: var(--black-300); padding: 0.12em 0.4em; border-radius: 4px; color: var(--white-700); }
.prose pre {
  margin: 1.4em 0; padding: 18px 20px; overflow-x: auto; border-radius: 8px;
  background: var(--black-200); border: 1px solid var(--black-300); line-height: 1.55; font-size: 14px;
}
.prose pre code { background: none; padding: 0; font-size: inherit; }
/* Long identifiers in inline code (env var names, file paths) wrap instead of running off a phone screen. */
.prose :not(pre) > code { overflow-wrap: anywhere; }
/* Code blocks: a header bar holds the language label and the Copy button (added by the inline script). */
.prose .code { margin: 1.4em 0; border-radius: 8px; background: var(--black-200); border: 1px solid var(--black-300); overflow: hidden; }
.prose .code pre { margin: 0; border: 0; border-radius: 0; background: none; }
.code__bar {
  display: flex; align-items: center; gap: 12px; min-height: 38px; padding: 4px 6px 4px 16px;
  border-bottom: 1px solid var(--black-300);
}
.code__lang { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--white-600); }
.code__copy {
  margin-left: auto; padding: 7px 12px; border: 0; border-radius: 6px; cursor: pointer;
  font: 500 12.5px/1 var(--sans); color: var(--white-800); background: var(--black-300); transition: background .2s, color .2s;
}
.code__copy:hover { background: var(--black-500); color: #fff; }
.table-wrap { overflow-x: auto; margin: 1.4em 0; border: 1px solid var(--black-300); border-radius: 8px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; }
.prose th, .prose td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--black-300); vertical-align: top; }
.prose th { background: var(--black-200); color: var(--white-800); font-weight: 600; font-size: 13px; letter-spacing: 0.04em; }
.prose tr:last-child td { border-bottom: 0; }

.diagram, .image { margin: 2em 0; }
.diagram__canvas { padding: 18px; border-radius: 8px; background: var(--black-200); border: 1px solid var(--black-300); overflow-x: auto; }
.diagram__canvas svg { display: block; width: 100%; height: auto; max-width: 100%; }
figcaption { margin-top: 10px; font-size: 14px; color: var(--white-600); text-align: center; }
.image img { width: 100%; border-radius: 8px; border: 1px solid var(--black-300); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 3em 0 0; padding-top: 1.6em; border-top: 1px solid var(--black-300); }
.tags span, .prose .tags a { font-size: 12.5px; padding: 5px 10px; border-radius: 999px; background: var(--black-300); color: var(--white-600); }
.prose .tags a { text-decoration: none; transition: background .2s, color .2s; }
.prose .tags a:hover { background: var(--black-500); color: #fff; }

/* Series box (top of an article that belongs to a multi-part series). */
.series { margin: 24px 0 0; padding: 18px 20px; border-radius: 16px; background: var(--black-200); border: 1px solid var(--black-300); }
.series__title { margin: 0; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white-600); }
.series__title strong { margin-left: 4px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: #fff; }
.series__blurb { margin: 6px 0 0; font-size: 15px; }
.series__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 4px; }
.series__item {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 12px; border-radius: 8px;
  font-size: 15px; line-height: 1.45; color: var(--white-600); transition: background .2s, color .2s;
}
a.series__item:hover, .series__item[aria-current] { background: var(--black-300); color: #fff; }
.series__label { flex: none; min-width: 2.2em; font-family: var(--mono); font-size: 12.5px; color: var(--accent); }
.series__item > span:nth-child(2) { flex: 1 1 16ch; }
.series__here { flex: none; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white-600); }
@media (max-width: 640px) { .series__here { display: none; } }

/* Previous / next article. */
.pager { max-width: var(--measure); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 56px 0 0; }
.pager__link {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 16px;
  background: var(--black-200); border: 1px solid var(--black-300); transition: border-color .25s ease;
}
.pager__link:hover { border-color: var(--black-500); }
.pager__link--next { grid-column: 2; text-align: right; }
.pager__dir { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white-600); }
.pager__title { color: #fff; font-weight: 600; line-height: 1.35; }
@media (max-width: 640px) {
  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager__link--next { grid-column: auto; }
}

.author { display: flex; gap: 16px; align-items: center; margin: 2em 0 0; padding: 20px; border-radius: 8px; background: var(--black-200); border: 1px solid var(--black-300); }
.author img { border-radius: 50%; flex: none; }
.author p { margin: 0; }
.author__name { color: #fff; font-weight: 600; }
.author__name a { text-decoration: none; }
.author__bio { font-size: 15px; }

/* ---------- about page ---------- */
.profile__head { display: flex; gap: 28px; align-items: flex-start; }
.profile__avatar { border-radius: 50%; flex: none; background: var(--black-300); }
@media (max-width: 640px) { .profile__head { flex-direction: column; gap: 18px; } }

/* ---------- cards / index (same as the homepage Hackathons/Writing cards) ---------- */
.index { position: relative; z-index: 1; max-width: 80rem; margin: 0 auto; padding: 48px var(--gutter) 80px; }
.index__head { max-width: 760px; margin-bottom: 40px; }
.featured { margin-bottom: 20px; }
.guides { margin-bottom: 56px; }
.guides__lead { margin: -10px 0 20px; color: var(--white-600); font-size: 15px; line-height: 1.55; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.card {
  display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 16px;
  background: var(--black-200); border: 1px solid var(--black-300); transition: border-color .25s ease, transform .25s ease;
}
.card:hover { border-color: var(--black-500); transform: translateY(-2px); }
.card:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.card__eyebrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white-600); }
.card__title { margin: 0; font-weight: 600; font-size: 1.15rem; line-height: 1.3; color: #fff; }
.card--featured .card__title { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.card__desc { margin: 0; color: var(--white-600); font-size: 15px; line-height: 1.55; }
.card__meta { margin: auto 0 0; padding-top: 6px; font-size: 13px; color: var(--white-600); }

.related { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--black-300); }
.related h2 { font-weight: 600; font-size: 1.6rem; margin: 0 0 20px; color: #fff; }

.section-title { font-weight: 600; font-size: 1.6rem; line-height: 1.25; margin: 0 0 20px; }
.section-title__count { margin-left: 6px; font-size: 1rem; font-weight: 500; color: var(--white-600); }

/* ---------- breadcrumbs, topic chips ---------- */
.crumbs { margin: 0 0 22px; font-size: 13.5px; color: var(--white-600); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.crumbs li + li::before { content: '/'; margin-right: 6px; color: var(--black-500); }
.crumbs a:hover { color: #fff; }
.crumbs [aria-current] { color: var(--white-800); }

.topics-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; }
.index__head + .topics-row { margin-top: -12px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; font-size: 14px;
  background: var(--black-200); border: 1px solid var(--black-300); color: var(--white-800); transition: border-color .2s, color .2s;
}
a.chip:hover { border-color: var(--black-500); color: #fff; }
.chip__count { font-size: 12px; color: var(--white-600); }
.chip--more { color: var(--white-600); }
.more-topics { margin-top: 64px; }
.more-topics .topics-row { margin: 0; }

/* ---------- projects ---------- */
.psec + .psec { margin-top: 64px; }
.pcard:hover { transform: none; }
.pcard .card__title a { transition: color .2s; }
.pcard .card__title a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.pcard__tech { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.pcard__tech li { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: var(--black-300); color: var(--white-600); }
.pcard__tech a { display: block; margin: -4px -10px; padding: 4px 10px; border-radius: 999px; transition: background .2s, color .2s; }
.pcard__tech a:hover { background: var(--black-500); color: #fff; }
.pcard__links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: auto 0 0; padding-top: 8px; font-size: 14.5px; font-weight: 500; }
.pcard__links a, .rentry__list a, .rentry__links a, .resume__contact a {
  color: #fff; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); transition: text-decoration-color .2s;
}
.pcard__links a:hover, .rentry__list a:hover, .rentry__links a:hover, .resume__contact a:hover { text-decoration-color: var(--accent); }

/* ---------- hackathons, research, uses ---------- */
.page-intro { max-width: var(--measure); }
.index > .page-intro { margin: -8px 0 56px; }
.page-intro > :last-child { margin-bottom: 0; }
.badge--muted { color: var(--white-600); background: var(--black-300); }
.hcard__event { margin: -4px 0 0; font-size: 14.5px; font-weight: 500; line-height: 1.45; color: var(--white-800); }
.hcard__where { font-weight: 400; color: var(--white-600); }
.hcard__note { font-size: 14px; }
.callout {
  max-width: var(--measure); margin: 0 0 24px; padding: 18px 20px; border-radius: 16px;
  background: var(--black-200); border: 1px solid var(--black-300); border-left: 3px solid var(--accent);
}
.callout p { margin: 0; }
.callout .card__eyebrow { margin-bottom: 10px; }
/* /uses/: the header keeps the resume measure, the tool groups use the full width in columns. */
.uses-page .resume__body { max-width: none; }
.uses-page .page-intro { max-width: 880px; }
.uses {
  list-style: none; margin: 0; padding: 12px 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 0 32px;
}
.uses__row { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; }
.uses__name { font-size: 15.5px; font-weight: 600; color: var(--white-800); }
.uses__where { font-size: 14.5px; line-height: 1.6; }
.hcard__event a, .uses__where a {
  color: #fff; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); transition: text-decoration-color .2s;
}
.hcard__event a:hover, .uses__where a:hover { text-decoration-color: var(--accent); }

/* ---------- resume ---------- */
.resume__head, .resume__body { max-width: 880px; }
.resume__contact { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 20px 0 0; font-size: 15.5px; }
.resume__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 28px 0 0; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 12px 24px; border-radius: 8px;
  font-size: 1.1rem; font-weight: 600; color: #fff; background: var(--black-500);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 12px 32px -12px color-mix(in srgb, var(--accent) 55%, transparent);
  transition: background .2s, transform .2s;
}
.btn:hover { background: #4a4a5d; }
.btn:active { transform: scale(0.97); }
.btn__meta { font-size: 13px; font-weight: 500; color: var(--white-600); }
.resume__body { display: grid; gap: 44px; }
.rsec__title { margin: 0 0 14px; font-weight: 600; font-size: 1.45rem; line-height: 1.25; }
.rsec__card { padding: 4px 24px; border-radius: 16px; background: var(--black-200); border: 1px solid var(--black-300); }
.rentry { padding: 20px 0; }
.rentry + .rentry { border-top: 1px solid var(--black-300); }
.rentry__head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'title where' 'role when';
  gap: 2px 16px; align-items: baseline;
}
.rentry__title { grid-area: title; margin: 0; font-size: 1.1rem; font-weight: 600; line-height: 1.35; color: #fff; }
.rentry__title a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.rentry__where { grid-area: where; margin: 0; font-size: 14px; text-align: right; }
.rentry__role { grid-area: role; margin: 0; font-style: italic; color: var(--white-800); }
.rentry__note { font-style: normal; font-size: 14px; color: var(--white-600); }
.rentry__when { grid-area: when; margin: 0; font-size: 14px; text-align: right; white-space: nowrap; }
.rentry__list { margin: 12px 0 0; padding-left: 1.2em; font-size: 16px; line-height: 1.65; }
.rentry__list li { margin: 6px 0; }
.rentry__list li::marker { color: var(--black-500); }
.rentry__list strong { color: var(--white-800); font-weight: 600; }
.rentry__list--flush { margin: 0; padding: 14px 0 14px 1.2em; }
.rentry__links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0 0; font-size: 14.5px; font-weight: 500; }
.skills { display: grid; gap: 14px; margin: 0; padding: 18px 0; }
.skills__row { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 8px 20px; align-items: baseline; }
.skills dt { font-size: 15px; font-weight: 600; color: var(--white-800); }
.skills dd { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.chips li { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--black-300); color: var(--white-600); }
@media (max-width: 640px) {
  .rsec__card { padding: 2px 18px; }
  .rentry__head { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'title' 'role' 'where' 'when'; }
  .rentry__where, .rentry__when { text-align: left; }
  .skills__row { grid-template-columns: minmax(0, 1fr); }
  .btn { width: 100%; justify-content: center; }
}

/* ---------- footer ---------- */
.sitefoot {
  position: relative; z-index: 1; max-width: 80rem; margin: 0 auto; padding: 28px var(--gutter) 40px;
  border-top: 1px solid var(--black-300); color: var(--white-600); font-size: 14px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
}
.sitefoot a:hover { color: #fff; }
.sitefoot p { margin: 0; }
.sitefoot__links { display: flex; flex-wrap: wrap; gap: 16px; }

@media (prefers-reduced-motion: no-preference) {
  .article__head > *, .index__head > *, .featured, .cards > .card { animation: rise .6s cubic-bezier(.2,.7,.2,1) both; }
  .article__head > :nth-child(2), .index__head > :nth-child(2) { animation-delay: .06s; }
  .article__head > :nth-child(3), .index__head > :nth-child(3) { animation-delay: .12s; }
  .cards > .card:nth-child(n+2) { animation-delay: .12s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- print (mostly for /resume/) ---------- */
@media print {
  :root { --black-100: #fff; --black-200: #fff; --black-300: #d4d4d8; --black-500: #a1a1aa; --white-800: #111; --white-700: #222; --white-600: #333; }
  body { background: #fff; color: #222; font-size: 11pt; line-height: 1.5; }
  .topbar, .sitefoot, .glow, .skip, .progress, .code__copy, .resume__actions, .pager, .related, .toc,
  .topics-row, .more-topics, .crumbs { display: none !important; }
  h1, .section-title, .rsec__title, .text-gray-gradient { background: none; color: #000; }
  .prose h2, .prose h3, .card__title, .rentry__title, .pager__title, .author__name, .series__title strong { color: #000; }
  a { color: #000 !important; }
  .index, .article { padding-top: 0; }
  .rentry, .card { break-inside: avoid; }
  .rsec__card, .card { border-color: #d4d4d8; }
  * { animation: none !important; box-shadow: none !important; }
}