/* =====================================================================
   bryanadavis.com — stylesheet
   Dark theme is the default (:root). Light theme overrides via
   html[data-theme="light"]. Change values here to retheme the site.
   ===================================================================== */

/* ── Fonts ────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Design tokens — dark (default) ─────────────────────────────── */
:root {
  --color-bg:      #151a20;
  --color-surface: #1c232b;
  --color-text:    #e8e4d9;
  --color-accent:  #ff6b45;
  --color-accent-2:#f2cf6b;
  --color-divider: rgba(232,228,217,.16);

  --color-neutral-100: #1d2128;
  --color-neutral-200: #272c34;
  --color-neutral-300: #343a44;
  --color-neutral-400: #4a515c;
  --color-neutral-500: #646b76;
  --color-neutral-600: #828a95;
  --color-neutral-700: #a3aab3;
  --color-neutral-800: #c7ccd2;
  --color-neutral-900: #e7e3d8;

  --color-accent-100: #2a1f1a;
  --color-accent-200: #3a2620;
  --color-accent-300: #59311f;
  --color-accent-400: #8a3f22;
  --color-accent-500: #ff6b45;
  --color-accent-600: #ff835f;
  --color-accent-700: #ffa47f;
  --color-accent-800: #ffc7ac;
  --color-accent-900: #ffe9df;

  --color-accent-2-100: #2b2413;
  --color-accent-2-200: #3d3219;
  --color-accent-2-300: #5c4a1e;
  --color-accent-2-400: #8a6f28;
  --color-accent-2-500: #f2cf6b;
  --color-accent-2-600: #f5d886;
  --color-accent-2-700: #f8e2a3;
  --color-accent-2-800: #fbecc4;
  --color-accent-2-900: #fdf6e3;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 3px 10px rgba(0,0,0,.45);
  --shadow-lg: 0 14px 34px rgba(0,0,0,.55);

  --font-heading: 'Archivo', system-ui, sans-serif;
  --font-body:    'Archivo', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --status-on:       #8fdc7f;
  --status-degraded: var(--color-accent-2);
  --status-off:      #8a919b;
}

/* ── Design tokens — light override ─────────────────────────────── */
html[data-theme="light"] {
  --color-bg:      #f2ecda;
  --color-surface: #e9e0c5;
  --color-text:    #221f18;
  --color-accent:  #d9531f;
  --color-accent-2:#a97b0e;
  --color-divider: rgba(34,31,24,.15);

  --color-neutral-100: #f8f3e4;
  --color-neutral-200: #ece3cb;
  --color-neutral-300: #dbceac;
  --color-neutral-400: #c2b189;
  --color-neutral-500: #a8946b;
  --color-neutral-600: #8a7752;
  --color-neutral-700: #6c5c3d;
  --color-neutral-800: #4a3f2a;
  --color-neutral-900: #2c2718;

  --color-accent-100: #fdf0e8;
  --color-accent-200: #fbdcc8;
  --color-accent-300: #f3b892;
  --color-accent-400: #e88a55;
  --color-accent-500: #d9531f;
  --color-accent-600: #b8431a;
  --color-accent-700: #8f3415;
  --color-accent-800: #63240e;
  --color-accent-900: #3d1a0c;

  --color-accent-2-100: #fbf2d9;
  --color-accent-2-200: #f3e2a9;
  --color-accent-2-300: #e6c977;
  --color-accent-2-400: #c9a445;
  --color-accent-2-500: #a97b0e;
  --color-accent-2-600: #8a640c;
  --color-accent-2-700: #684b09;
  --color-accent-2-800: #443206;
  --color-accent-2-900: #291d04;

  --shadow-sm: 0 1px 2px rgba(34,31,24,.12);
  --shadow-md: 0 3px 10px rgba(34,31,24,.14);
  --shadow-lg: 0 14px 34px rgba(34,31,24,.18);

  --status-on:       #4c9a3b;
  --status-degraded: var(--color-accent-2);
  --status-off:      #8a8477;
}

/* ── Reset + base ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box }
[hidden] { display: none !important }
html { scroll-behavior: smooth }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  transition: background .2s ease, color .2s ease;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-accent); text-decoration: none }
a:hover { color: var(--color-accent-2) }
::selection { background: var(--color-accent-200); color: var(--color-text) }
img { max-width: 100%; display: block }
button { cursor: pointer; border: none; background: transparent; padding: 0; font-family: inherit }
input, select, textarea { font-family: inherit; font-size: inherit }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.2;
}
p { margin: 0 }

/* ── Utilities ───────────────────────────────────────────────────── */
.mono { font-family: var(--font-mono) }
.grayscale { filter: grayscale(1) contrast(1.08) }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

/* ── Button system ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-weight: 800; font-size: 14px;
  padding: 10px 16px; cursor: pointer; text-decoration: none;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none }
.btn-primary { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent) }
.btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); color: var(--color-bg) }
.btn-secondary { background: transparent; border-color: var(--color-accent); color: var(--color-accent) }
.btn-secondary:hover { background: var(--color-accent); color: var(--color-bg) }
.btn-block { width: 100%; justify-content: center }

/* ── Shell layout ────────────────────────────────────────────────── */
.bd-shell {
  display: grid;
  grid-template-columns: 258px 1fr;
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────────────── */
.bd-sidebar {
  border-right: 2px solid var(--color-divider);
  padding: 36px 28px;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.bd-sidebar--homelab {
  border-right-color: var(--color-accent);
  background: var(--color-surface);
}

.bd-brand {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-heading); font-weight: 800; font-size: 18px;
  letter-spacing: -0.01em; color: var(--color-text); text-decoration: none;
}
.bd-brand:hover { color: var(--color-text) }
.bd-brand-dot {
  width: 9px; height: 9px;
  background: var(--color-accent);
  display: inline-block; flex: none;
}

.bd-avatar {
  width: 100%; aspect-ratio: 1/1;
  margin: 22px 0 16px;
  border: 1px solid var(--color-divider);
  object-fit: cover;
}

.bd-sidebar-bio {
  font-size: 12px; line-height: 1.6;
  margin: 0 0 24px; opacity: .82;
}

.bd-sidebar-nav { display: flex; flex-direction: column }

.bd-snav {
  display: block; padding: 7px 0; font-size: 14.5px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  position: relative; text-decoration: none;
  transition: color .15s ease;
}
.bd-snav:hover { color: var(--color-text) }
.bd-snav[aria-current="page"] { color: var(--color-accent) }
.bd-snav[aria-current="page"]::before {
  content: "";
  position: absolute; left: -14px; top: 14px;
  width: 6px; height: 6px;
  background: var(--color-accent);
}

.bd-sidebar-actions { margin-top: auto; padding-top: 24px }

.bd-homelab-btn {
  display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
  background: var(--color-accent); color: var(--color-bg);
  font-family: var(--font-heading); font-weight: 800; font-size: 14px;
  padding: 11px 14px; margin-top: 14px;
  text-decoration: none;
  transition: background .15s ease;
}
.bd-homelab-btn:hover { background: var(--color-accent-600); color: var(--color-bg) }
.bd-homelab-btn[aria-current="page"] { outline: 2px solid var(--color-bg); outline-offset: -4px }
.bd-homelab-btn svg { width: 15px; height: 15px; flex: none }
.bd-homelab-inner { display: flex; align-items: center; gap: 8px }

.bd-icon-btn {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-divider);
  background: transparent; color: var(--color-text); cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
  margin: 16px 0;
}
.bd-icon-btn:hover { border-color: var(--color-accent); color: var(--color-accent) }
.bd-icon-btn svg { width: 15px; height: 15px }

/* Sun/moon icon swap */
.theme-sun { display: block }
.theme-moon { display: none }
html[data-theme="light"] .theme-sun { display: none }
html[data-theme="light"] .theme-moon { display: block }

.bd-hamburger {
  display: none;
  width: 34px; height: 34px;
  align-items: center; justify-content: center;
  border: 1px solid var(--color-divider);
  background: transparent; color: var(--color-text); cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.bd-hamburger:hover { border-color: var(--color-accent); color: var(--color-accent) }
.bd-hamburger svg { width: 16px; height: 16px }

.bd-sidebar-footer {
  font-family: var(--font-mono); font-size: 12px; opacity: .6;
  display: flex; gap: 12px; margin-bottom: 10px;
}
.bd-sidebar-footer a { color: inherit }
.bd-sidebar-footer a:hover { color: var(--color-text) }
.bd-copyright { font-family: var(--font-mono); font-size: 11px; opacity: .45 }

/* ── Mobile menu ─────────────────────────────────────────────────── */
.bd-mobile-menu {
  display: none; flex-direction: column; width: 100%;
}
.bd-mobile-menu .bd-snav { padding: 12px 0; font-size: 16px }
.bd-mobile-menu[data-open="true"] { display: flex }

.bd-mobile-footer {
  display: none; margin-top: 56px; padding-top: 24px;
  border-top: 2px solid var(--color-divider);
  flex-direction: column; gap: 14px;
}
.bd-mobile-footer-links {
  display: flex; gap: 16px; font-size: 12px; opacity: .7;
  font-family: var(--font-mono);
}
.bd-mobile-footer-links a { color: inherit }
.bd-mobile-footer-copy { font-family: var(--font-mono); font-size: 11px; opacity: .45 }

/* ── Main content area ───────────────────────────────────────────── */
.bd-main {
  padding: 64px clamp(24px, 4vw, 64px) 90px;
}

/* ── Page kicker + title ─────────────────────────────────────────── */
.bd-page-kicker {
  display: block;
  font-family: var(--font-mono); font-size: 12.5px;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--color-accent-700); margin-bottom: 12px;
}
.bd-page-title {
  font-size: 26px; margin: 0 0 8px;
}
.bd-page-title--flush { margin-bottom: 0 }
.bd-page-desc {
  font-size: 16px; line-height: 1.6; opacity: .75; margin: 0 0 32px;
}

/* ── Section headings ────────────────────────────────────────────── */
.bd-section { margin-bottom: 52px }
.bd-section-head {
  display: flex; align-items: baseline;
  justify-content: space-between; margin-bottom: 20px;
}
.bd-section-title {
  font-size: 15px; font-weight: 800;
  letter-spacing: .01em; text-transform: uppercase;
}
.bd-section-title--umbrella { margin-bottom: 4px }
.bd-section-link { font-size: 13px; color: var(--color-accent) }
.bd-section-link:hover { color: var(--color-accent-2) }
.bd-subsection { margin-top: 28px; }
.bd-subsection .bd-art:first-of-type { padding-top: 4px; }
.bd-subsection-title {
  font-size: 12px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  margin: 0;
}

/* ── Home tagline ────────────────────────────────────────────────── */
.bd-home-tagline {
  font-size: 17px; line-height: 1.65;
  margin: 0 0 28px; max-width: 62ch;
}

/* ── Currently strip ─────────────────────────────────────────────── */
.bd-currently {
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  padding: 16px 0; margin-bottom: 44px;
  display: flex; align-items: center; gap: 11px;
}
.bd-currently-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-accent-2);
  animation: bd-pulse 2s ease-in-out infinite; flex: none;
}
.bd-currently span {
  font-family: var(--font-mono); font-size: 12.5px;
}

/* ── Filter buttons ──────────────────────────────────────────────── */
.bd-filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px }
.bd-filter {
  border: 1px solid var(--color-divider); background: transparent;
  color: color-mix(in srgb, var(--color-text) 75%, transparent);
  font-size: 12.5px; padding: 6px 12px; cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
  font-family: inherit;
}
.bd-filter:hover { border-color: var(--color-accent); color: var(--color-text) }
.bd-filter[data-active="true"] {
  background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg);
}

/* ── Article rows ────────────────────────────────────────────────── */
.bd-art {
  display: block; padding: 26px 0;
  text-decoration: none; color: inherit;
}
.bd-art + .bd-art { border-top: 1px solid var(--color-divider) }
.bd-art:hover .bd-art-title { color: var(--color-accent) }
.bd-art-meta {
  font-family: var(--font-mono); font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  margin-bottom: 8px;
}
.bd-art-title {
  font-family: var(--font-heading); font-weight: 800; font-size: 19px;
  margin-bottom: 8px; transition: color .15s ease;
}
.bd-art--list .bd-art-title { font-size: 20px }
.bd-art-excerpt {
  font-size: 14.5px; line-height: 1.6; margin: 0 0 6px;
  opacity: .78; max-width: 64ch;
}
.bd-art--list .bd-art-excerpt { max-width: 68ch }
.bd-art-readmore { font-size: 13.5px; color: var(--color-accent) }

/* ── Load more button ────────────────────────────────────────────── */
.bd-load-more {
  display: block; width: 100%; margin-top: 20px;
  padding: 12px; border: 1px solid var(--color-divider);
  background: transparent; color: var(--color-accent);
  font-family: var(--font-heading); font-weight: 800; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.bd-load-more:hover:not(:disabled) { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-bg) }
.bd-load-more:disabled { opacity: .5; cursor: not-allowed }

/* ── Mini experiment cards (Home) ────────────────────────────────── */
.bd-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px; margin-top: 4px;
}
.bd-mini-card {
  display: block; padding: 18px;
  border: 1px solid var(--color-divider);
  color: inherit; text-decoration: none;
  transition: border-color .15s ease;
}
.bd-mini-card:hover { border-color: var(--color-accent) }
.bd-mini-card-title {
  font-family: var(--font-heading); font-weight: 800; font-size: 15px;
  margin-bottom: 6px; color: var(--color-text);
}
.bd-mini-card p { font-size: 13px; line-height: 1.5; opacity: .75; margin: 0 }
/* .bd-mini-card-desc: same look as .bd-mini-card p above, but a <span> —
   <summary> only permits phrasing content, so the Notable Project cards'
   description can't be a <p> even though it reads as one; display:block
   reproduces the paragraph's own-line layout without the invalid nesting. */
.bd-mini-card-desc { display: block; font-size: 13px; line-height: 1.5; opacity: .75; margin: 0 }

/* ── Experiment grid cards ───────────────────────────────────────── */
.bd-xgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 22px;
}
.bd-xcard {
  display: flex; flex-direction: column;
  background: var(--color-surface); border: 1px solid var(--color-divider);
  transition: border-color .15s ease;
}
.bd-xcard:hover { border-color: var(--color-accent) }
.bd-xcard[hidden] { display: none }
.bd-xcard-fig {
  margin: 0; aspect-ratio: 16/10;
  border-bottom: 1px solid var(--color-divider);
  overflow: hidden; background: var(--color-neutral-200);
  display: flex; align-items: center; justify-content: center;
  color: color-mix(in srgb, var(--color-text) 25%, transparent);
  font-family: var(--font-mono); font-size: 12px;
}
.bd-xcard-fig img { width: 100%; height: 100%; object-fit: cover }
.bd-xcard-body {
  padding: 20px; display: flex; flex-direction: column; gap: 11px; flex: 1;
}
.bd-xcard-title { font-family: var(--font-heading); font-weight: 800; font-size: 17px }
.bd-xcard-desc { font-size: 14px; line-height: 1.6; opacity: .78; flex: 1; margin: 0 }
.bd-xcard-tags { display: flex; gap: 8px; flex-wrap: wrap }
.bd-xtag {
  font-size: 11px; padding: 3px 9px;
  border: 1px solid var(--color-divider);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.bd-xcard-link { font-size: 13px; margin-top: 2px }

/* ── Article detail ──────────────────────────────────────────────── */
.bd-article-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; margin-bottom: 32px;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
  text-decoration: none; transition: color .15s ease;
}
.bd-article-back:hover { color: var(--color-accent) }
.bd-article-header { margin-bottom: 36px }
.bd-article-meta {
  font-family: var(--font-mono); font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  margin-bottom: 12px;
}
.bd-article-title { font-size: 26px; line-height: 1.15; margin-bottom: 16px }
.bd-article-summary {
  font-size: 16px; line-height: 1.65; opacity: .78;
  margin-bottom: 16px; max-width: 64ch;
}
.bd-article-tags { display: flex; gap: 8px; flex-wrap: wrap }
.bd-article-tag {
  font-family: var(--font-mono); font-size: 11px; padding: 3px 9px;
  border: 1px solid var(--color-divider);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.bd-article-divider { border: none; border-top: 1px solid var(--color-divider); margin: 32px 0 36px }

/* ── Prose (article body) ────────────────────────────────────────── */
.prose { font-size: 16px; line-height: 1.7 }
.prose > * + * { margin-top: 1.5em }
.prose h2 { font-size: 20px; margin-top: 2em }
.prose h3 { font-size: 17px; margin-top: 1.75em }
.prose ul { padding-left: 1.5em; list-style: disc }
.prose ol { padding-left: 1.5em; list-style: decimal }
.prose li + li { margin-top: 0.4em }
.prose code {
  font-family: var(--font-mono); font-size: .875em;
  background: var(--color-surface); padding: .15em .4em;
}
.prose pre {
  background: var(--color-surface); border: 1px solid var(--color-divider);
  padding: 20px; overflow-x: auto; margin: 1.5em 0;
}
.prose pre code { background: transparent; padding: 0 }
.prose blockquote {
  border-left: 3px solid var(--color-accent-2);
  padding-left: 1.25em; opacity: .8; margin: 1.5em 0;
}
.prose a { color: var(--color-accent); text-decoration: underline }
.prose a:hover { color: var(--color-accent-2) }
.prose strong { font-weight: 700 }
.prose hr { border: none; border-top: 1px solid var(--color-divider) }
.prose h4 { font-size: 15px; margin-top: 1.5em }
.prose h5 { font-size: 14px; margin-top: 1.25em }
.prose h6 { font-size: 13px; margin-top: 1.25em; opacity: .75 }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; overflow-x: auto; display: block }
.prose th { font-weight: 700; text-align: left; padding: 8px 12px; border-bottom: 2px solid var(--color-divider) }
.prose td { padding: 8px 12px; border-bottom: 1px solid var(--color-divider) }
.prose figure { margin: 2em 0 }
.prose figcaption { font-size: 13px; opacity: .65; margin-top: 8px; text-align: center }
.prose img { border-radius: 0 }
.prose .float-left { float: left; margin: 0 1.5em 1em 0; max-width: 40% }
.prose .float-right { float: right; margin: 0 0 1em 1.5em; max-width: 40% }
.prose .callout {
  border-left: 3px solid var(--color-accent); padding: 1em 1.25em;
  background: var(--color-accent-100); margin: 1.5em 0;
}
.prose .pull-quote {
  font-size: 1.2em; line-height: 1.5; font-style: italic; text-align: center;
  padding: 1.5em 2em; opacity: .85; margin: 2em 0;
  border-top: 2px solid var(--color-divider); border-bottom: 2px solid var(--color-divider);
}

/* ── About page ──────────────────────────────────────────────────── */
.bd-about-intro { font-size: 17px; line-height: 1.65; margin-bottom: 44px; max-width: 66ch }
.bd-about-section { margin-bottom: 40px }
.bd-about-section-label {
  font-family: var(--font-heading); font-weight: 800; font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  margin-bottom: 16px;
}
.bd-about-outside { font-size: 15px; line-height: 1.7; opacity: .85 }
.bd-skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}
.bd-skills-group { display: flex; flex-direction: column; gap: 10px }
.bd-skills-group-label {
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: 4px;
}
.bd-chips { display: flex; gap: 8px; flex-wrap: wrap }
.bd-chip {
  display: inline-flex; align-items: center;
  font-size: 13px; padding: 6px 12px;
  border: 1px solid var(--color-divider);
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
}
.bd-timeline { position: relative }
.bd-timeline::before {
  content: ""; position: absolute;
  left: 6px; top: 10px; bottom: 10px;
  width: 2px; background: var(--color-divider);
}
.bd-role { position: relative; padding: 22px 0 22px 30px }
.bd-role::before {
  content: ""; position: absolute; left: 0; top: 26px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid var(--color-bg);
  box-shadow: 0 0 0 1px var(--color-divider); z-index: 1;
}
.bd-role-date {
  font-family: var(--font-mono); font-size: 12.5px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  margin-bottom: 6px;
}
.bd-role-title { font-size: 17px; margin-bottom: 6px; line-height: 1.3 }
.bd-role-company { font-weight: 400; opacity: .55 }
.bd-role-desc { font-size: 14.5px; line-height: 1.6; opacity: .8; max-width: 66ch; margin: 0 }
.bd-contact {
  margin-top: 36px; padding-top: 24px;
  border-top: 2px solid var(--color-divider);
  display: flex; gap: 14px; flex-wrap: wrap;
}
.bd-about-section-hint {
  font-size: 12.5px; opacity: .55; margin: -8px 0 16px;
}

/* ── Resume — interactive disclosure widgets ─────────────────────────
   Areas of Expertise, Experience, and Notable Projects all use native
   <details>/<summary> so [open] is plain CSS-selectable state — no JS
   needed for the toggle itself. */
.bd-chip--expand > summary,
.bd-role-toggle > summary,
.bd-project-card > summary {
  cursor: pointer; list-style: none;
}
.bd-chip--expand > summary::-webkit-details-marker,
.bd-role-toggle > summary::-webkit-details-marker,
.bd-project-card > summary::-webkit-details-marker { display: none }
.bd-chip--expand > summary::marker,
.bd-role-toggle > summary::marker,
.bd-project-card > summary::marker { display: none }

/* Areas of Expertise */
.bd-chip--expand { transition: border-color .15s ease, background .15s ease }
.bd-chip--expand:hover { border-color: var(--color-accent) }
.bd-chip--expand > summary { display: flex; align-items: center; gap: 6px }
.bd-chip--expand > summary::after {
  content: "+"; opacity: .5; font-family: var(--font-mono); font-size: 12px;
}
.bd-chip--expand[open] {
  display: block;
  flex: 1 1 100%;
  background: var(--color-surface);
  border-color: var(--color-accent);
  padding: 14px 16px;
}
.bd-chip--expand[open] > summary::after { content: "\2013" }
.bd-chip-detail { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px }
.bd-chip-detail p {
  flex: 1 1 100%;
  margin: 0 0 6px;
  font-size: 13.5px; line-height: 1.6; opacity: .8;
}

/* Experience */
.bd-role-toggle { display: block }
.bd-role-title::after {
  content: " +"; opacity: .5; font-family: var(--font-mono); font-size: 14px;
}
.bd-role-toggle[open] .bd-role-title::after { content: "\a0\2013" }
.bd-role-toggle > .bd-role-desc { margin-top: 10px }
.bd-role-impact {
  margin: 12px 0 0; padding-left: 18px;
  font-size: 14.5px; line-height: 1.6; opacity: .85; max-width: 66ch;
}
.bd-role-impact li { margin-bottom: 6px }

/* Notable Projects */
.bd-project-card[open] {
  grid-column: 1 / -1;
  background: var(--color-surface);
  border-color: var(--color-accent);
}
.bd-project-card .bd-mini-card-title::after {
  content: " +"; opacity: .5; font-family: var(--font-mono); font-size: 13px;
}
.bd-project-card[open] .bd-mini-card-title::after { content: "\a0\2013" }
.bd-project-detail {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--color-divider);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px;
}
.bd-project-detail dt {
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: 4px;
}
.bd-project-detail dd { margin: 0; font-size: 14px; line-height: 1.6; opacity: .85 }
.bd-project-detail dd ul { margin: 0; padding-left: 18px }
.bd-project-detail dd li { margin-bottom: 4px }

/* ── Homelab lock screen ─────────────────────────────────────────── */
@keyframes bd-blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }

.bd-lock-screen {
  min-height: 70vh; display: flex; align-items: center; justify-content: center;
}
.bd-lock-form {
  width: min(420px, 100%);
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
  padding: 36px;
}
.bd-lock-eyebrow {
  display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
  font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--color-accent-700);
}
.bd-lock-title {
  font-size: 24px; margin: 0 0 10px; letter-spacing: -0.01em;
}
.bd-lock-desc {
  font-size: 14px; line-height: 1.6; opacity: .75; margin: 0 0 22px;
}
.bd-lock-label {
  display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent); margin-bottom: 8px;
}
.bd-lock-input {
  width: 100%; background: var(--color-bg);
  border: 1px solid var(--color-divider);
  color: var(--color-text); font-family: var(--font-mono);
  font-size: 15px; padding: 12px 14px; letter-spacing: .08em;
}
.bd-lock-input:focus { outline: none; border-color: var(--color-accent) }
.bd-lock-submit { width: 100%; margin-top: 18px }
.bd-lock-prompt {
  margin-top: 18px; font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  display: flex; align-items: center; gap: 6px;
}
.bd-blink-cursor { animation: bd-blink 1s step-end infinite }
.bd-lock-error {
  font-size: 13px; color: var(--color-accent); margin: 0 0 16px;
  padding: 10px 12px; border: 1px solid var(--color-accent);
  background: var(--color-accent-100);
}

/* ── Homelab ─────────────────────────────────────────────────────── */
.bd-homelab-header {
  display: flex; flex-wrap: wrap; gap: 24px;
  align-items: baseline; justify-content: space-between; margin-bottom: 32px;
}
.bd-homelab-stats { display: flex; gap: 24px; font-family: var(--font-mono) }
.bd-hstat-label {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent); margin-bottom: 4px;
}
.bd-hstat-value { font-size: 17px; color: var(--color-accent) }
.bd-hstat-value--neutral { color: var(--color-text); font-size: 17px; font-family: var(--font-mono) }
.bd-svc-group-title {
  font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  margin: 32px 0 12px; border-bottom: 1px solid var(--color-divider); padding-bottom: 8px;
}
.bd-svc-group-title:first-child { margin-top: 0 }
.bd-svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}
.bd-svc-grid--spaced { margin-bottom: 32px }
.bd-svc {
  border: 1px solid var(--color-divider); padding: 22px;
  display: flex; flex-direction: column; gap: 12px;
  text-decoration: none; color: inherit;
  transition: border-color .15s ease;
}
.bd-svc:hover { border-color: var(--color-accent) }
.bd-svc-header { display: flex; align-items: center; justify-content: space-between }
.bd-svc-name { font-family: var(--font-heading); font-weight: 800; font-size: 16px }
.bd-svc-cat {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .05em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.bd-svc-desc { font-size: 13.5px; line-height: 1.55; opacity: .75; flex: 1; margin: 0 }
.bd-svc-open { font-size: 13px; color: var(--color-accent) }

/* ── Radar ───────────────────────────────────────────────────────── */
.radar-kpi-section { margin-bottom: 48px }
.radar-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px; background: var(--color-divider);
  border: 1px solid var(--color-divider);
}
.radar-kpi { background: var(--color-bg); padding: 20px }
.radar-kpi-label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  margin-bottom: 8px;
}
.radar-kpi-value {
  font-family: var(--font-heading); font-weight: 800; font-size: 28px;
  color: var(--color-accent); margin-bottom: 4px;
}
.radar-kpi-sub { font-size: 12px; opacity: .6 }

.radar-section { margin-bottom: 48px }
.radar-section-heading {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--color-divider);
}
summary.radar-section-heading {
  cursor: pointer; list-style: none; user-select: none;
}
summary.radar-section-heading::-webkit-details-marker { display: none }
summary.radar-section-heading::marker { display: none }
.radar-section-h2 {
  font-size: 15px; font-weight: 800;
  letter-spacing: .01em; text-transform: uppercase;
}
.radar-section-meta { display: flex; align-items: center; gap: 10px }
.radar-section-hint {
  font-family: var(--font-mono); font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.radar-topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.radar-topic-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  padding: 16px;
}
.radar-topic-name {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-weight: 800;
  font-size: 13px; margin-bottom: 8px;
}
.radar-topic-desc { font-size: 12.5px; line-height: 1.55; opacity: .7; margin: 0 }

.radar-dash-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider); padding: 24px;
}
.card h3 {
  font-size: 14px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: 8px; color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.radar-chart-hint { font-size: 12px; opacity: .6; margin: 0 0 16px }
.radar-chart-holder { height: 220px }
.radar-chart-holder canvas { width: 100% !important; height: 100% !important }

.radar-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px }
.radar-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--color-divider); background: transparent;
  color: color-mix(in srgb, var(--color-text) 75%, transparent);
  font-size: 12px; padding: 5px 10px; cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.radar-chip:hover { border-color: var(--color-accent); color: var(--color-text) }
.radar-chip[aria-pressed="true"] {
  background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg);
}

.radar-search-row { display: flex; gap: 8px; margin-bottom: 16px }
.radar-search {
  flex: 1; background: var(--color-bg); border: 1px solid var(--color-divider);
  color: var(--color-text); font-family: var(--font-mono); font-size: 13px; padding: 8px 12px;
}
.radar-search:focus { outline: none; border-color: var(--color-accent) }
.radar-sort {
  background: var(--color-bg); border: 1px solid var(--color-divider);
  color: var(--color-text); font-size: 13px; padding: 8px 12px; font-family: inherit;
}
.radar-sort:focus { outline: none; border-color: var(--color-accent) }
.radar-score-legend { margin-top: 16px }
.radar-legend-heading {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  margin-bottom: 10px;
}
.radar-legend-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0 }
.radar-legend-row { display: grid; grid-template-columns: 100px 1fr; gap: 12px; align-items: start }
.radar-legend-row dt { font-weight: 600; font-size: 12px; display: flex; align-items: center; gap: 6px }
.radar-legend-row dd { font-size: 12px; opacity: .7; margin: 0 }

.radar-feed-subhint { font-family: var(--font-mono); font-size: 12px; opacity: .5; margin-bottom: 16px }
.radar-feed { display: flex; flex-direction: column; gap: 1px; background: var(--color-divider) }
.radar-item { background: var(--color-bg); padding: 20px }
.radar-item[hidden] { display: none }
.radar-item-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px }
.radar-item-title {
  font-family: var(--font-heading); font-weight: 800; font-size: 16px;
  margin: 0; flex: 1; line-height: 1.3;
}
.radar-item-title a { color: var(--color-text) }
.radar-item-title a:hover { color: var(--color-accent) }
.radar-badge-new {
  font-family: var(--font-mono); font-size: 10px; padding: 2px 6px;
  background: var(--color-accent); color: var(--color-bg);
  letter-spacing: .05em; flex: none;
}
.radar-item-authors { font-size: 13px; opacity: .6; margin: 0 0 10px; font-style: italic }
.radar-item-summary { font-size: 14px; line-height: 1.6; opacity: .78; margin: 0 0 12px; max-width: 72ch }
.radar-item-bullets { font-size: 13.5px; line-height: 1.6; opacity: .78; margin: 0 0 12px; padding-left: 1.5em; max-width: 72ch }
.radar-item-bullets li + li { margin-top: 4px }
.radar-priority-block {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px;
}
.radar-priority-score {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid var(--color-divider);
}
.radar-priority-score--high { border-color: var(--color-accent) }
.radar-priority-score--mid { border-color: var(--color-accent-2) }
.radar-priority-num { font-family: var(--font-heading); font-weight: 800; font-size: 20px }
.radar-priority-score--high .radar-priority-num { color: var(--color-accent) }
.radar-priority-score--mid .radar-priority-num { color: var(--color-accent-2) }
.radar-priority-label { font-size: 12px; opacity: .75 }
.radar-priority-stats { display: flex; flex-direction: column; gap: 6px }
.radar-stat-row { display: flex; align-items: center; gap: 10px; font-size: 12px }
.radar-stat-label { width: 70px; color: color-mix(in srgb, var(--color-text) 55%, transparent); font-size: 11px }
.radar-stat-dots { display: flex; gap: 3px }
.radar-level-dot { width: 10px; height: 10px; border: 1px solid var(--color-divider) }
.radar-level-dot--filled { background: var(--color-accent); border-color: var(--color-accent) }
.radar-stat-value { font-size: 11px; color: color-mix(in srgb, var(--color-text) 65%, transparent) }
.radar-scored-date { font-family: var(--font-mono); font-size: 11px; opacity: .45 }
.radar-item-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding-top: 12px; border-top: 1px solid var(--color-divider);
}
.radar-source-pill {
  font-family: var(--font-mono); font-size: 11px; padding: 2px 8px;
  border: 1px solid var(--color-divider);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.radar-kind-pill {
  font-family: var(--font-mono); font-size: 10px; padding: 2px 8px;
  letter-spacing: .04em; text-transform: uppercase;
}
.radar-kind-pill--academic, .radar-kind-pill--research { background: var(--color-accent-200); color: var(--color-accent-700) }
.radar-kind-pill--industry { background: var(--color-accent-2-200); color: var(--color-accent-2-700) }
.radar-kind-pill--practice, .radar-kind-pill--language { background: var(--color-neutral-200); color: var(--color-neutral-700) }
.radar-ref { font-family: var(--font-mono); font-size: 11px; opacity: .5 }
.radar-date-info { display: flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 11px; opacity: .5 }
.radar-date-label { opacity: .6; margin-right: 2px }
.radar-tag { font-family: var(--font-mono); font-size: 10px; padding: 2px 8px; border: 1px solid transparent }

.empty-state {
  padding: 40px 20px; text-align: center;
  font-size: 14px; opacity: .6; border: 1px solid var(--color-divider);
}

.radar-digest-list { display: flex; flex-direction: column; gap: 1px; background: var(--color-divider) }
.radar-digest-item { background: var(--color-bg) }
.radar-digest-summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; cursor: pointer; list-style: none; user-select: none;
}
.radar-digest-summary::-webkit-details-marker { display: none }
.radar-digest-left { display: flex; align-items: center; gap: 16px }
.radar-digest-date { font-family: var(--font-heading); font-weight: 800; font-size: 15px }
.radar-digest-count { font-family: var(--font-mono); font-size: 12px; opacity: .55 }
.radar-chevron { width: 18px; height: 18px; transition: transform .2s ease; flex: none }
details[open] .radar-chevron { transform: rotate(180deg) }
.radar-digest-body {
  padding: 16px 20px 20px;
  font-size: 14px; line-height: 1.6;
  border-top: 1px solid var(--color-divider);
}
.radar-digest-body ul { padding-left: 1.5em; margin: 12px 0 0 }
.radar-digest-body li + li { margin-top: 6px }
.radar-digest-body a { color: var(--color-accent) }

/* ── Radar topic dots ────────────────────────────────────────────── */
.radar-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex: none; display: inline-block;
}
.radar-dot--ir       { background: var(--color-accent) }
.radar-dot--recsys   { background: var(--color-accent-2) }
.radar-dot--ranking  { background: var(--color-accent-600) }
.radar-dot--ecom     { background: var(--color-accent-2-600) }
.radar-dot--llm      { background: var(--color-accent-700) }
.radar-dot--cloud    { background: var(--color-accent-2-700) }
.radar-dot--agentops { background: var(--color-neutral-700) }
.radar-dot--lang     { background: var(--color-neutral-600) }
.radar-dot--swe      { background: var(--color-neutral-500) }
.radar-dot--devtools { background: var(--color-neutral-400) }
.radar-dot--priority { background: var(--color-accent) }

.radar-tag--ir, .radar-tag--ranking, .radar-tag--llm { background: var(--color-accent-200); color: var(--color-accent-700); border-color: transparent }
.radar-tag--recsys, .radar-tag--ecom, .radar-tag--cloud { background: var(--color-accent-2-200); color: var(--color-accent-2-700); border-color: transparent }
.radar-tag--agentops, .radar-tag--lang, .radar-tag--swe, .radar-tag--devtools { background: var(--color-neutral-200); color: var(--color-neutral-700); border-color: transparent }

/* ── Animations ──────────────────────────────────────────────────── */
@keyframes bd-pulse {
  0%, 100% { opacity: 1 }
  50%       { opacity: .35 }
}

/* ── Mobile breakpoint ───────────────────────────────────────────── */
@media (max-width: 860px) {
  .bd-shell { grid-template-columns: 1fr }
  .bd-sidebar, .bd-main { min-width: 0 }

  .bd-sidebar {
    position: static; height: auto;
    border-right: none; border-bottom: 2px solid var(--color-divider);
    flex-direction: row; flex-wrap: wrap;
    align-items: center; justify-content: space-between;
    gap: 12px; padding: 16px 20px;
  }
  .bd-sidebar--homelab { border-bottom-color: var(--color-accent) }

  .bd-avatar { display: none }
  .bd-sidebar-bio { display: none }
  .bd-sidebar-nav { display: none !important }

  .bd-sidebar-actions {
    margin-top: 0 !important; padding-top: 0 !important;
    display: flex; align-items: center; gap: 8px;
  }
  .bd-sidebar-footer, .bd-copyright { display: none !important }

  .bd-homelab-btn { margin-top: 0; padding: 0; width: 36px; height: 36px; justify-content: center }
  .bd-homelab-label, .bd-homelab-arrow { display: none }

  .bd-hamburger { display: inline-flex }
  .bd-mobile-menu[data-open="true"] { display: flex }
  .bd-mobile-footer { display: flex }

  .bd-main { padding: 32px 20px 64px }
  .radar-dash-row { grid-template-columns: 1fr }
  .radar-search-row { flex-direction: column }
  .radar-sort { width: 100% }
}

/* ── Print ───────────────────────────────────────────────────────── */
@media print {
  :root, html[data-theme="dark"], html[data-theme="light"] {
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-text: #111111;
    --color-divider: rgba(0,0,0,.2);
  }
  body { background: #fff }
  .bd-shell { display: block }
  .bd-sidebar, .bd-mobile-footer, .no-print { display: none !important }
  .bd-main { padding: 0 }
}