/* Dhruv Arora — portfolio styles
   Themes: light by default, dark when the visitor's system prefers it, and the header toggle
   overrides both (it sets data-theme on the root element and remembers the choice). */

/* ---------------------------------------------------------------- Theme tokens */
:root {
  --bg: #FFFFFF;
  --surface: #F5F5F5;
  --card: #FFFFFF;
  --ink: #0A0A0A;
  --body: #404040;
  --muted: #636363;
  --line: #E5E5E5;
  --line-2: #D4D4D4;
  --chip: #F0F0F0;
  --chip-ink: #262626;
  --step-hi: #F0FDFA;
  --dot: #D9D9D9;
  --accent: #0F766E;
  --accent-bg: #0F766E;
  --accent-bg-hover: #115E59;
  --accent-ink: #FFFFFF;
  --accent-2: #C2410C;
  --accent-2-line: #EA580C;
  --accent-2-soft: rgba(234, 88, 12, 0.45);
  --header-bg: rgba(255, 255, 255, 0.86);
  --selection: rgba(15, 118, 110, 0.18);
  --foot-bg: #0A0A0A;
  --foot-ink: #FFFFFF;
  --foot-muted: #D4D4D4;
  --foot-faint: #A3A3A3;
  --foot-focus: #2DD4BF;
  color-scheme: light;

  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --gutter: clamp(20px, 5vw, 48px);
  --gutter-wide: clamp(20px, 5vw, 64px);
  --header-h: 65px;
  --radius: 12px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0A0A;
    --surface: #111111;
    --card: #161616;
    --ink: #FAFAFA;
    --body: #D4D4D4;
    --muted: #A3A3A3;
    --line: #262626;
    --line-2: #3A3A3A;
    --chip: #1F1F1F;
    --chip-ink: #E5E5E5;
    --step-hi: #0B1F1D;
    --dot: #232323;
    --accent: #2DD4BF;
    --accent-bg: #14B8A6;
    --accent-bg-hover: #2DD4BF;
    --accent-ink: #0A0A0A;
    --accent-2: #FB923C;
    --accent-2-line: #F97316;
    --accent-2-soft: rgba(249, 115, 22, 0.5);
    --header-bg: rgba(10, 10, 10, 0.84);
    --selection: rgba(45, 212, 191, 0.28);
    --foot-bg: #000000;
    --foot-ink: #FAFAFA;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0A0A0A;
  --surface: #111111;
  --card: #161616;
  --ink: #FAFAFA;
  --body: #D4D4D4;
  --muted: #A3A3A3;
  --line: #262626;
  --line-2: #3A3A3A;
  --chip: #1F1F1F;
  --chip-ink: #E5E5E5;
  --step-hi: #0B1F1D;
  --dot: #232323;
  --accent: #2DD4BF;
  --accent-bg: #14B8A6;
  --accent-bg-hover: #2DD4BF;
  --accent-ink: #0A0A0A;
  --accent-2: #FB923C;
  --accent-2-line: #F97316;
  --accent-2-soft: rgba(249, 115, 22, 0.5);
  --header-bg: rgba(10, 10, 10, 0.84);
  --selection: rgba(45, 212, 191, 0.28);
  --foot-bg: #000000;
  --foot-ink: #FAFAFA;
  color-scheme: dark;
}

/* ---------------------------------------------------------------- Base
   No-horizontal-scroll rules: border-box everywhere, no fixed widths wider than a phone,
   flex/grid children allowed to shrink (min-width: 0), long strings allowed to wrap,
   and clip on html/body as a last line of defence (clip, not hidden, so nothing becomes
   a scroll container). */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  overflow-x: clip;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-width: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure {
  margin: 0;
}

p, li, dd, dt, h1, h2, h3, h4, figcaption {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}

svg {
  flex: none;
}

a {
  color: inherit;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

::selection {
  background: var(--selection);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  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;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 16px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--accent-bg);
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* ---------------------------------------------------------------- Layout */
.wide {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--gutter-wide);
}

.container {
  width: 100%;
  max-width: calc(960px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: clamp(56px, 8vw, 88px);
}

.section--surface {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section--flush-bottom {
  border-bottom: 0;
}

.eyebrow {
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.section-title {
  max-width: 22ch;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
  color: var(--ink);
}

.section-intro {
  margin: 14px 0 32px;
  max-width: 58ch;
  color: var(--body);
}

/* ---------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--primary {
  background: var(--accent-bg);
  color: var(--accent-ink);
}

.btn--primary:hover {
  background: var(--accent-bg-hover);
}

.btn--outline {
  border: 1px solid var(--line-2);
  color: var(--ink);
}

.btn--outline:hover {
  border-color: var(--ink);
}

/* Header icon buttons (theme, menu): no border, just a soft background on hover. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--body);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.icon-btn:hover {
  background: var(--chip);
  color: var(--ink);
}

/* ---------------------------------------------------------------- Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top, 0px); /* clears a phone's status bar in full-screen web views */
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.2s ease;
}

/* At the very top the header sits on the hero's dot grid, so it goes transparent.
   Without JavaScript the class is never added and the header stays solid. */
.site-header.at-top:not(.menu-open) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* An open menu sits over the page, so it gets a solid background. */
.site-header.menu-open {
  background: var(--bg);
}

/* Set for one frame while the theme switches, so buttons don't fade between themes. */
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition: none !important;
}

.header-bar {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.nav-desktop {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-right: 6px;
  font-size: 0.9375rem;
}

/* A short rule between the page links and the theme button. */
.nav-desktop::after {
  content: "";
  width: 1px;
  height: 18px;
  background: var(--line-2);
}

.nav-desktop a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
  color: var(--body);
  text-decoration: none;
}

.nav-desktop a:hover,
.nav-desktop a[aria-current="true"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.5em;
}

/* The résumé is a link like the others, in the accent colour, with an arrow because it opens the PDF. */
.nav-desktop .nav-resume {
  gap: 4px;
  color: var(--accent);
  font-weight: 500;
}

.nav-desktop .nav-resume:hover {
  color: var(--accent);
}

/* Theme and menu buttons only work with JavaScript, so they only appear with it. */
.theme-toggle,
.menu-toggle {
  display: none;
}

.js .theme-toggle {
  display: inline-flex;
}

.theme-toggle .icon-sun {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
  display: inline;
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun {
    display: inline;
  }

  :root:not([data-theme="light"]) .theme-toggle .icon-moon {
    display: none;
  }
}

.menu-toggle .icon-close,
.menu-toggle[aria-expanded="true"] .icon-menu {
  display: none;
}

.menu-toggle[aria-expanded="true"] .icon-close {
  display: inline;
}

.nav-mobile {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100svh - var(--header-h));
  overflow-y: auto;
  padding-top: 4px;
  padding-bottom: 16px;
  border-top: 1px solid var(--line);
}

.nav-mobile[hidden] {
  display: none;
}

.nav-mobile a {
  display: flex;
  align-items: center;
  min-height: 52px;
  font-size: 1.125rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.nav-mobile a:last-child {
  border-bottom: 0;
  color: var(--accent);
  font-weight: 600;
}

@media (max-width: 900px) {
  .nav-desktop {
    display: none;
  }

  .js .menu-toggle {
    display: inline-flex;
  }
}

@media (min-width: 901px) {
  .nav-mobile {
    display: none !important;
  }
}

/* ---------------------------------------------------------------- Hero (first screen) */
.hero {
  min-height: clamp(560px, 100vh, 1000px);
  min-height: clamp(560px, 100svh, 1000px);
  display: flex;
  flex-direction: column;
  padding-top: var(--header-h);
  background-image: radial-gradient(var(--dot) 1px, transparent 1.2px);
  background-size: 22px 22px;
}

.hero-inner {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  align-items: center;
  gap: 48px 64px;
  padding-block: 48px;
}

.hero h1 {
  max-width: 16ch;
  font-size: clamp(2.5rem, 5.6vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-wrap: balance;
  color: var(--ink);
}

.hero h1 .accent {
  color: var(--accent);
}

.hero .eyebrow {
  margin-bottom: 20px;
}

/* On phones the location gets its own line instead of wrapping after a dangling "·". */
@media (max-width: 560px) {
  .eyebrow-sep {
    display: none;
  }

  .eyebrow-loc {
    display: block;
    margin-top: 2px;
  }
}

.lede {
  margin-top: 24px;
  max-width: 54ch;
  font-size: clamp(1.0625rem, 2vw, 1.1875rem);
  color: var(--body);
}

.hero-actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.hero-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 18px;
  font-size: 0.9375rem;
}

.hero-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--body);
}

.hero-links a:hover {
  color: var(--ink);
}

.hero-visual {
  display: none;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
}

@media (min-width: 1024px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  }

  .hero-visual {
    display: block;
  }
}

.hero-visual-title {
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.pair-list {
  list-style: none;
  padding: 0;
}

.pair-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.pair-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.node {
  flex: none;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--chip);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  white-space: nowrap;
  color: var(--ink);
}

.wire {
  flex: 1 1 auto;
  min-width: 12px;
  height: 2px;
  background-image: linear-gradient(90deg, var(--accent-2-soft) 55%, transparent 0);
  background-size: 8px 2px;
  background-repeat: repeat-x;
}

.link-icon {
  color: var(--accent-2-line);
}

.scroll-cue {
  align-self: center;
  margin-bottom: 20px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 44px;
  min-height: 44px;
  color: var(--muted);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.scroll-cue:hover {
  color: var(--ink);
}

@media (prefers-reduced-motion: no-preference) {
  .wire {
    animation: wire-flow 1.4s linear infinite;
  }

  .scroll-cue svg {
    animation: nudge 2.4s ease-in-out infinite;
  }
}

@keyframes wire-flow {
  to {
    background-position: 8px 0;
  }
}

@keyframes nudge {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(3px);
  }
}

/* ---------------------------------------------------------------- Systems */
.systems-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 20px;
}

.card {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.pair {
  margin-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink);
}

.pair-tail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.chip {
  min-width: 0;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--chip);
}

.card h3 {
  margin-bottom: 8px;
  font-size: 1.3125rem;
  line-height: 1.3;
  font-weight: 600;
  text-wrap: balance;
  color: var(--ink);
}

.card p {
  color: var(--body);
}

.card .outcome {
  margin-top: 12px;
  font-weight: 600;
  text-wrap: balance;
  color: var(--accent-2);
}

/* ---------------------------------------------------------------- Experience */
.section-title + .roles {
  margin-top: 32px;
}

.role {
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.role + .role {
  margin-top: 16px;
}

.role-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
}

.role-title {
  font-size: clamp(1.1875rem, 2.4vw, 1.375rem);
  line-height: 1.3;
  font-weight: 600;
  color: var(--ink);
}

.role-title .org {
  color: var(--accent);
}

.role-meta {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--accent-2);
}

.role ul {
  margin-top: 16px;
  padding-left: 20px;
  color: var(--body);
}

.role li + li {
  margin-top: 8px;
}

.role li::marker {
  color: var(--muted);
}

.role-tech {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--muted);
}

.edu {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 20px clamp(20px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
}

.resume-cta {
  margin-top: 28px;
}

/* ---------------------------------------------------------------- Stack */
.stack {
  margin-top: 28px;
  border-bottom: 1px solid var(--line-2);
}

.stack-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding: 18px 0;
  border-top: 1px solid var(--line-2);
}

/* A short orange tick where each row's rule starts, a small cousin of the metric bars. */
.stack-row::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--accent-2-line);
}

.stack-row dt {
  flex: 0 0 180px;
  padding-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.stack-row dd {
  flex: 1 1 320px;
  min-width: 0;
}

.chips {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chips li {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--card);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--ink);
}

/* ---------------------------------------------------------------- Case study */
/* Wide paragraphs fill each line. Safari's text-wrap: pretty (set on every p) shortens all
   their lines to even out the right edge, which shows as a strip of empty space. */
.case-intro {
  margin-top: 20px;
  text-wrap: wrap;
  color: var(--body);
}

.metrics {
  margin-top: 40px;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 24px 16px;
}

.metrics li {
  padding-top: 16px;
  border-top: 2px solid var(--accent-2-line);
}

.metric-value {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.75rem, 3.4vw, 2.125rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
}

.metric-label {
  display: block;
  margin-top: 4px;
  font-size: 0.9375rem;
  text-wrap: balance;
  color: var(--muted);
}

.case-fig {
  margin-top: 40px;
  padding: clamp(20px, 3vw, 28px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.case-fig figcaption,
.case-label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.case-fig figcaption {
  margin-bottom: 4px;
}

/* One row per layer: the name sits beside its items, and above them once the row gets narrow. */
.layer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 24px;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
}

.layer:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.layer-name {
  flex: 0 0 120px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.layer-body {
  flex: 1 1 300px;
  min-width: 0;
}

.tags,
.services {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.tags li {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--chip);
  font-size: 0.875rem;
  color: var(--chip-ink);
}

.services li {
  min-width: 0;
  padding: 6px 12px;
  border: 1.5px solid var(--accent);
  border-radius: 8px;
  background: var(--step-hi);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}

.layer-note {
  margin-top: 10px;
  font-size: 0.9375rem;
  color: var(--muted);
}

.case-fig + .case-label {
  margin-top: 48px;
}

.capabilities {
  margin-top: 12px;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 0 40px;
}

.capability {
  min-width: 0;
  padding-block: 20px 24px;
  border-top: 1px solid var(--line-2);
}

.capability-area {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.capability h4 {
  margin: 6px 0 8px;
  font-size: 1.1875rem;
  line-height: 1.35;
  font-weight: 600;
  text-wrap: balance;
  color: var(--ink);
}

.capability h4 + p {
  color: var(--body);
}

.my-part {
  margin-top: 16px;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.my-part .case-label {
  color: var(--accent);
}

.my-part p {
  margin-top: 8px;
  text-wrap: wrap; /* fills each line, like .case-intro */
  color: var(--body);
}

/* ---------------------------------------------------------------- Blog */
.post-featured {
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.post-meta {
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.post-featured h3 {
  font-size: clamp(1.3125rem, 2.6vw, 1.625rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--ink);
}

.post-summary {
  margin-top: 10px;
  max-width: 62ch;
  color: var(--body);
}

.post-link {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.post-link:hover {
  text-decoration: underline;
}

.post-list {
  margin-top: 16px;
  list-style: none;
  padding: 0;
}

.post-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.post-title {
  flex: 1 1 360px;
  min-width: 0;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.post-title a {
  text-decoration: none;
}

.post-title a:hover {
  text-decoration: underline;
}

.post-tags {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--muted);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--accent-2-line);
  color: var(--accent-2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- Footer */
.site-footer {
  background: var(--foot-bg);
  color: var(--foot-ink);
  border-top: 1px solid var(--line);
}

.site-footer .container {
  padding-block: clamp(48px, 7vw, 72px);
}

.site-footer :focus-visible {
  outline-color: var(--foot-focus);
}

.footer-title {
  max-width: 24ch;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
  color: var(--foot-ink);
}

.footer-sub {
  margin: 12px 0 20px;
  color: var(--foot-muted);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  font-size: 1rem;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  overflow-wrap: anywhere;
  color: var(--foot-ink);
}

.footer-copy {
  margin-top: 32px;
  font-size: 0.875rem;
  color: var(--foot-faint);
}

/* ---------------------------------------------------------------- Blog post pages */
.post-page {
  padding-top: var(--header-h);
}

.post-header {
  padding-block: clamp(40px, 7vw, 72px) 8px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-bottom: 20px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

.back-link:hover {
  color: var(--ink);
}

.post-header h1 {
  max-width: 24ch;
  font-size: clamp(2rem, 4.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 700;
  text-wrap: balance;
}

.post-header .post-summary {
  font-size: clamp(1.0625rem, 2vw, 1.1875rem);
}

.prose {
  max-width: 68ch;
  padding-block: 24px clamp(56px, 8vw, 88px);
  color: var(--body);
}

.prose > * + * {
  margin-top: 1.1em;
}

.prose h2 {
  margin-top: 2em;
  font-size: clamp(1.375rem, 2.6vw, 1.625rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--ink);
}

.prose h3 {
  margin-top: 1.6em;
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--ink);
}

.prose a {
  color: var(--accent);
}

.prose strong {
  color: var(--ink);
}

.prose ul,
.prose ol {
  padding-left: 22px;
}

.prose li + li {
  margin-top: 6px;
}

.prose code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--chip);
  color: var(--chip-ink);
  font-family: var(--font-mono);
  font-size: 0.88em;
  overflow-wrap: anywhere;
}

.prose pre {
  max-width: 100%;
  overflow-x: auto;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  font-size: 0.875rem;
  line-height: 1.6;
}

.prose pre code {
  padding: 0;
  background: none;
  font-size: inherit;
  overflow-wrap: normal;
}

.prose blockquote {
  margin-left: 0;
  margin-right: 0;
  padding-left: 18px;
  border-left: 3px solid var(--accent-2-line);
  color: var(--body);
}

.prose img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.prose figure figcaption {
  margin-top: 8px;
  font-size: 0.875rem;
  color: var(--muted);
}

.prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.prose th,
.prose td {
  padding: 8px 12px;
  border: 1px solid var(--line);
  text-align: left;
}

/* ---------------------------------------------------------------- Desktop type scale
   From 901px up (where the desktop nav appears), text is a step smaller than the sizes set
   above, which phones and tablets keep. Headings that grow with the screen keep their growth
   rate and just top out lower. Small mono labels keep their size everywhere, and the first
   screen (the hero) keeps its original sizes. */
@media (min-width: 901px) {
  body {
    font-size: 1rem;
  }

  /* Hands the hero's buttons back the original body size the rest of the page steps down from. */
  .hero {
    font-size: 1.0625rem;
  }

  .brand {
    font-size: 1.0625rem;
  }

  .post-header .post-summary {
    font-size: clamp(1.0625rem, 2vw, 1.125rem);
  }

  .section-title {
    font-size: clamp(1.75rem, 3.6vw, 2.25rem);
  }

  .card h3 {
    font-size: 1.1875rem;
  }

  .role-title {
    font-size: clamp(1.1875rem, 2.4vw, 1.25rem);
  }

  .metric-value {
    font-size: clamp(1.75rem, 3.4vw, 1.875rem);
  }

  .capability h4,
  .post-title,
  .prose h3 {
    font-size: 1.125rem;
  }

  .post-featured h3,
  .prose h2 {
    font-size: clamp(1.3125rem, 2.6vw, 1.5rem);
  }

  .footer-title {
    font-size: clamp(1.5rem, 3vw, 1.875rem);
  }

  .post-header h1 {
    font-size: clamp(2rem, 4.6vw, 2.625rem);
  }
}