/* ==========================================================================
   Obsidian Signal — design tokens
   Generated from design-system/tokens.json by design-system/generate-tokens.mjs.
   Do not hand-edit: change the token there and run `npm run tokens`, so the
   site and the design system cannot drift.
   Dark is the primary theme. Light applies when the OS asks for it and no
   explicit choice is stamped, and whenever [data-theme="light"] is stamped.
   ========================================================================== */

:root {
  color-scheme: dark;
  --surface-base: #07090e;
  --surface-raised: #0b0f19;
  --surface-panel: #111827;
  --surface-card: rgba(17, 24, 39, 0.75);
  --surface-card-hover: rgba(30, 41, 59, 0.85);
  --surface-card-solid: #151e30;
  --surface-input: rgba(15, 23, 42, 0.8);
  --surface-nav: rgba(7, 9, 14, 0.75);
  --surface-chip: rgba(255, 255, 255, 0.04);
  --surface-chip-strong: rgba(255, 255, 255, 0.05);
  --surface-inverse: #ffffff;
  --surface-inverse-hover: #f1f5f9;
  --surface-nav-solid: rgba(7, 9, 14, 0.92);
  --ink-primary: #f8fafc;
  --ink-secondary: #cbd5e1;
  --ink-muted: #94a3b8;
  --ink-dim: #64748b;
  --ink-on-accent: #07090e;
  --ink-on-inverse: #07090e;
  --ink-featured: #e0e7ff;
  --accent-cyan: #38bdf8;
  --accent-indigo: #6366f1;
  --accent-violet: #8b5cf6;
  --accent-violet-bright: #a855f7;
  --accent-cyan-fill: rgba(56, 189, 248, 0.1);
  --accent-cyan-fill-strong: rgba(56, 189, 248, 0.2);
  --accent-indigo-fill: rgba(99, 102, 241, 0.12);
  --signal-success: #10b981;
  --signal-success-fill: rgba(16, 185, 129, 0.1);
  --signal-warning: #f59e0b;
  --signal-danger: #f87171;
  --signal-danger-fill: rgba(248, 113, 113, 0.12);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-card: rgba(255, 255, 255, 0.1);
  --border-hover: rgba(56, 189, 248, 0.4);
  --border-accent: #38bdf8;
  --border-success: rgba(16, 185, 129, 0.25);
  --border-danger: rgba(248, 113, 113, 0.3);
  --border-indigo: rgba(99, 102, 241, 0.35);
  --focus-ring: #38bdf8;
  --focus-halo: rgba(56, 189, 248, 0.25);
  --rail-start: #38bdf8;
  --rail-mid: #6366f1;
  --rail-end: rgba(255, 255, 255, 0.05);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
  --shadow-glow-cyan: 0 0 30px rgba(56, 189, 248, 0.2);
  --shadow-glow-indigo: 0 0 30px rgba(99, 102, 241, 0.25);
  --shadow-focus: 0 0 0 4px rgba(56, 189, 248, 0.25);

  /* Layout scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 28px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 96px;
  --gutter-page: 24px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;
  --header-height: 72px;
  --container-max: 1200px;
  --measure-prose: 68ch;
  --measure-subtitle: 680px;
  --touch-min: 44px;

  /* Typefaces */
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;

  /* Motion — durations and easings, per the system's States and interaction rules */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  /* Glass */
  --glass-blur: blur(16px);
  --glass-blur-sm: blur(8px);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --surface-base: #f7f8fa;
    --surface-raised: #ffffff;
    --surface-panel: #eef1f6;
    --surface-card: rgba(255, 255, 255, 0.86);
    --surface-card-hover: rgba(255, 255, 255, 1);
    --surface-card-solid: #ffffff;
    --surface-input: #ffffff;
    --surface-nav: rgba(247, 248, 250, 0.8);
    --surface-chip: rgba(15, 23, 42, 0.05);
    --surface-chip-strong: rgba(15, 23, 42, 0.07);
    --surface-inverse: #0b0f19;
    --surface-inverse-hover: #1e293b;
    --surface-nav-solid: rgba(247, 248, 250, 0.95);
    --ink-primary: #0b0f19;
    --ink-secondary: #334155;
    --ink-muted: #4a5a70;
    --ink-dim: #5b6b80;
    --ink-on-accent: #ffffff;
    --ink-on-inverse: #ffffff;
    --ink-featured: #312e81;
    --accent-cyan: #0369a1;
    --accent-indigo: #4f46e5;
    --accent-violet: #6d28d9;
    --accent-violet-bright: #7c3aed;
    --accent-cyan-fill: rgba(3, 105, 161, 0.08);
    --accent-cyan-fill-strong: rgba(3, 105, 161, 0.14);
    --accent-indigo-fill: rgba(79, 70, 229, 0.1);
    --signal-success: #047857;
    --signal-success-fill: rgba(4, 120, 87, 0.08);
    --signal-warning: #b45309;
    --signal-danger: #b91c1c;
    --signal-danger-fill: rgba(185, 28, 28, 0.08);
    --border-subtle: rgba(15, 23, 42, 0.1);
    --border-card: rgba(15, 23, 42, 0.12);
    --border-hover: rgba(3, 105, 161, 0.45);
    --border-accent: #0369a1;
    --border-success: rgba(4, 120, 87, 0.3);
    --border-danger: rgba(185, 28, 28, 0.32);
    --border-indigo: rgba(79, 70, 229, 0.3);
    --focus-ring: #0369a1;
    --focus-halo: rgba(3, 105, 161, 0.22);
    --rail-start: #0369a1;
    --rail-mid: #4f46e5;
    --rail-end: rgba(15, 23, 42, 0.06);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.1);
    --shadow-md: 0 6px 16px rgba(15, 23, 42, 0.1);
    --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.14);
    --shadow-glow-cyan: 0 0 24px rgba(3, 105, 161, 0.14);
    --shadow-glow-indigo: 0 0 24px rgba(79, 70, 229, 0.16);
    --shadow-focus: 0 0 0 4px rgba(3, 105, 161, 0.22);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --surface-base: #f7f8fa;
  --surface-raised: #ffffff;
  --surface-panel: #eef1f6;
  --surface-card: rgba(255, 255, 255, 0.86);
  --surface-card-hover: rgba(255, 255, 255, 1);
  --surface-card-solid: #ffffff;
  --surface-input: #ffffff;
  --surface-nav: rgba(247, 248, 250, 0.8);
  --surface-chip: rgba(15, 23, 42, 0.05);
  --surface-chip-strong: rgba(15, 23, 42, 0.07);
  --surface-inverse: #0b0f19;
  --surface-inverse-hover: #1e293b;
  --surface-nav-solid: rgba(247, 248, 250, 0.95);
  --ink-primary: #0b0f19;
  --ink-secondary: #334155;
  --ink-muted: #4a5a70;
  --ink-dim: #5b6b80;
  --ink-on-accent: #ffffff;
  --ink-on-inverse: #ffffff;
  --ink-featured: #312e81;
  --accent-cyan: #0369a1;
  --accent-indigo: #4f46e5;
  --accent-violet: #6d28d9;
  --accent-violet-bright: #7c3aed;
  --accent-cyan-fill: rgba(3, 105, 161, 0.08);
  --accent-cyan-fill-strong: rgba(3, 105, 161, 0.14);
  --accent-indigo-fill: rgba(79, 70, 229, 0.1);
  --signal-success: #047857;
  --signal-success-fill: rgba(4, 120, 87, 0.08);
  --signal-warning: #b45309;
  --signal-danger: #b91c1c;
  --signal-danger-fill: rgba(185, 28, 28, 0.08);
  --border-subtle: rgba(15, 23, 42, 0.1);
  --border-card: rgba(15, 23, 42, 0.12);
  --border-hover: rgba(3, 105, 161, 0.45);
  --border-accent: #0369a1;
  --border-success: rgba(4, 120, 87, 0.3);
  --border-danger: rgba(185, 28, 28, 0.32);
  --border-indigo: rgba(79, 70, 229, 0.3);
  --focus-ring: #0369a1;
  --focus-halo: rgba(3, 105, 161, 0.22);
  --rail-start: #0369a1;
  --rail-mid: #4f46e5;
  --rail-end: rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.1);
  --shadow-md: 0 6px 16px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.14);
  --shadow-glow-cyan: 0 0 24px rgba(3, 105, 161, 0.14);
  --shadow-glow-indigo: 0 0 24px rgba(79, 70, 229, 0.16);
  --shadow-focus: 0 0 0 4px rgba(3, 105, 161, 0.22);
}

/* Gradient recipes — composed from the rail tokens, per the system's Colour rules.
   The gradient is a rail, never a ground for text. */
:root {
  --gradient-signal: linear-gradient(135deg, var(--rail-start) 0%, var(--rail-mid) 50%, var(--accent-violet-bright) 100%);
  --gradient-rail: linear-gradient(180deg, var(--rail-start) 0%, var(--rail-mid) 50%, var(--rail-end) 100%);
  --gradient-underline: linear-gradient(90deg, var(--rail-start), var(--rail-mid));
}

/* ==========================================================================
   CSS Reset & Base Styles
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* Clears the fixed header so an anchored heading is never hidden under it. */
  scroll-padding-top: calc(var(--header-height) + var(--space-5));
}

body {
  font-family: var(--font-sans);
  background-color: var(--surface-base);
  color: var(--ink-primary);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

/* ==========================================================================
   Accessibility: Focus Management, Skip Links, Screen Reader Utilities
   ========================================================================== */

/* Universal accessible keyboard focus ring */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  top: -120px;
  left: 16px;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--surface-card-solid);
  color: var(--accent-cyan);
  border: 2px solid var(--accent-cyan);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: var(--shadow-lg), var(--shadow-glow-cyan);
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus-visible,
.skip-link:focus {
  top: 16px;
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Screen reader only utility */
.sr-only,
.visually-hidden:where(:not(:focus-within, :active)) {
  position: absolute !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* Accessible focus ring enhancements for interactive controls */
.btn:focus-visible,
.btn-resume-nav:focus-visible,
.nav-link:focus-visible,
.nav-toggle:focus-visible,
.social-icon-link:focus-visible,
.btn-copy:focus-visible,
.back-to-top:focus-visible,
.credential-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow: var(--shadow-focus);
}

/* Accessible touch targets (min 44x44px for accessibility) */
.social-icon-link,
.back-to-top {
  min-width: 44px;
  min-height: 44px;
}

.btn-copy {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Ambient Background Glow */
body::before {
  content: '';
  position: fixed;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 600px;
  background: radial-gradient(circle, var(--accent-cyan-fill) 0%, var(--accent-indigo-fill) 40%, transparent 70%);
  filter: blur(80px);
  z-index: -1;
  pointer-events: none;
}

body::after {
  content: '';
  position: fixed;
  bottom: -200px;
  right: -100px;
  width: 700px;
  height: 500px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-violet) 8%, transparent) 0%, transparent 70%);
  filter: blur(100px);
  z-index: -1;
  pointer-events: none;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul {
  list-style: none;
}

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* Section Common */
.section {
  /* 64px top and bottom, so 128px between sections rather than 192px. The
     old rhythm made an 8,900px page and read as dead space wherever a
     section's last row was short. */
  padding: var(--space-9) 0;
  position: relative;
}

.section-header {
  margin-bottom: var(--space-8);
}

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-cyan);
  background: var(--accent-cyan-fill);
  border: 1px solid var(--accent-cyan-fill-strong);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 16px;
}

.section-title {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink-primary);
  letter-spacing: -0.02em;
}

.section-subtitle {
  font-size: 1.05rem;
  color: var(--ink-secondary);
  max-width: var(--measure-subtitle);
  margin-top: var(--space-3);
}

/* Text Gradient Helper */
.text-gradient {
  /* The name is set in ink and the signal moves to a rail beneath it.
     background-clip: text renders as transparent under forced-colors, which
     would erase the name entirely, and gradient-filled text carries no
     contrast guarantee at any stop. */
  color: var(--ink-primary);
  display: inline-block;
  position: relative;
  padding-bottom: 4px;
}

.text-gradient::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--gradient-signal);
}

/* ==========================================================================
   Navigation Bar (Sticky Glassmorphism)
   ========================================================================== */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: var(--surface-nav);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--border-subtle);
  z-index: 1000;
  transition: all var(--transition-base);
}

.navbar.scrolled {
  background: var(--surface-nav-solid);
  box-shadow: var(--shadow-lg);
  border-bottom-color: var(--border-card);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink-primary);
  text-decoration: none;
}

.brand-monogram {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent-cyan-fill-strong), var(--accent-indigo-fill));
  border: 1px solid var(--border-hover);
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 1.1rem;
  box-shadow: var(--shadow-glow-cyan);
  transition: transform var(--transition-fast);
}

.nav-brand:hover .brand-monogram {
  transform: scale(1.05);
  border-color: var(--accent-cyan);
}

.brand-title {
  letter-spacing: -0.01em;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-link {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-secondary);
  position: relative;
  display: inline-flex;
  align-items: center;
  /* touch-min hit area without growing the visible text box */
  min-height: var(--touch-min);
  padding: 6px 4px;
  transition: color var(--transition-fast);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 9px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-underline);
  border-radius: 2px;
  transition: width var(--transition-base);
}

.nav-link:hover,
.nav-link.active,
.nav-link[aria-current="page"] {
  color: var(--ink-primary);
}

.nav-link.active::after,
.nav-link[aria-current="page"]::after,
.nav-link:hover::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: none;
}

.btn-resume-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent-cyan);
  background: var(--accent-cyan-fill);
  border: 1px solid var(--border-hover);
  padding: 8px 18px;
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
}

.btn-resume-nav:hover {
  background: var(--accent-cyan-fill-strong);
  border-color: var(--accent-cyan);
  box-shadow: var(--shadow-glow-cyan);
  transform: translateY(-1px);
}

/* Mobile Nav Toggle */
.nav-toggle {
  display: none;
  flex: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: var(--radius-sm);
  background: var(--surface-chip-strong);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--ink-primary);
  border-radius: 2px;
  transition: all var(--transition-fast);
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero {
  padding-top: calc(var(--header-height) + 64px);
  padding-bottom: 80px;
  position: relative;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 60px;
  align-items: center;
}

.hero-content {
  z-index: 2;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--signal-success);
  background: var(--signal-success-fill);
  border: 1px solid var(--border-success);
  padding: 6px 16px;
  border-radius: var(--radius-full);
  margin-bottom: 24px;
}

.status-dot {
  width: 8px;
  height: 8px;
  background-color: var(--signal-success);
  border-radius: 50%;
  box-shadow: var(--shadow-glow-cyan);
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal-success) 55%, transparent);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px transparent;
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 transparent;
  }
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}

.hero-role {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink-secondary);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-role-tag {
  color: var(--accent-cyan);
  background: var(--accent-cyan-fill);
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  border: 1px solid var(--accent-cyan-fill-strong);
}

.hero-role-dynamic {
  display: inline-flex;
  align-items: center;
  color: var(--ink-secondary);
}

.dynamic-role-text {
  color: var(--ink-primary);
  display: inline-block;
  min-width: 1ch;
  border-bottom: 2px solid var(--border-hover);
  padding-bottom: 2px;
}

.typing-cursor {
  display: inline-block;
  color: var(--accent-cyan);
  font-weight: 300;
  margin-left: 3px;
  animation: blink-cursor 0.9s infinite;
}

@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.hero-bio {
  font-size: 1.12rem;
  color: var(--ink-secondary);
  line-height: 1.7;
  max-width: min(var(--measure-prose), 640px);
  margin-bottom: 36px;
}

.hero-ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  color: var(--ink-on-inverse);
  background: var(--surface-inverse);
  box-shadow: var(--shadow-md);
}

.btn-primary:hover {
  background: var(--surface-inverse-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Solid accent, not the gradient: white on the gradient's cyan stop measures
   2.1:1. ink-on-accent over accent-cyan is 9.3:1 dark and 5.9:1 light. */
.btn-accent,
.btn-gradient {
  color: var(--ink-on-accent);
  background: var(--accent-cyan);
  box-shadow: var(--shadow-md);
}

.btn-accent:hover,
.btn-gradient:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--shadow-glow-cyan);
}

.btn-secondary {
  color: var(--ink-primary);
  background: var(--surface-chip-strong);
  border: 1px solid var(--border-subtle);
  backdrop-filter: var(--glass-blur-sm);
}

.btn-secondary:hover {
  background: var(--border-card);
  border-color: var(--border-card);
  transform: translateY(-2px);
}

.hero-socials {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero-socials span {
  font-size: 0.85rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.social-icon-link {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-chip);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-secondary);
  transition: all var(--transition-fast);
}

.social-icon-link:hover {
  color: var(--accent-cyan);
  background: var(--accent-cyan-fill);
  border-color: var(--accent-cyan);
  transform: translateY(-2px);
}

/* Hero Avatar & Visual Card */
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
}

.avatar-wrapper {
  position: relative;
  width: 320px;
  height: 320px;
  border-radius: var(--radius-xl);
  padding: 8px;
  background: linear-gradient(135deg, var(--border-hover) 0%, var(--accent-indigo-fill) 50%, var(--surface-chip-strong) 100%);
  box-shadow: var(--shadow-lg), var(--shadow-glow-cyan);
}

.avatar-inner {
  width: 100%;
  height: 100%;
  border-radius: calc(var(--radius-xl) - 6px);
  overflow: hidden;
  background-color: var(--surface-panel);
  position: relative;
}

.avatar-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-smooth);
}

.avatar-wrapper:hover .avatar-inner img {
  transform: scale(1.04);
}

/* Floating Badges around Avatar */
.float-card {
  position: absolute;
  padding: 12px 18px;
  background: var(--surface-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 3;
  animation: float-badge 4s ease-in-out infinite alternate;
}

.float-card-1 {
  bottom: -15px;
  left: -25px;
  animation-delay: 0s;
}

.float-card-2 {
  top: 15px;
  right: -25px;
  animation-delay: 2s;
}

@keyframes float-badge {
  0% { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}

.float-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--accent-cyan-fill-strong);
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.float-card-title {
  font-size: 0.82rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.float-card-val {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink-primary);
}

/* ==========================================================================
   Metrics Bar
   ========================================================================== */

.metrics-section {
  padding: 24px 0 64px 0;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.metric-card {
  background: var(--surface-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  position: relative;
  overflow: hidden;
  transition: all var(--transition-base);
}

/* One lead tile per row carries the signal edge. Stamping it on every tile
   flattens the hierarchy and leaves the reader nothing to land on. */
.metric-card--lead::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-signal);
  transition: opacity var(--transition-fast);
}

.metric-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md), var(--shadow-glow-cyan);
}



.metric-number {
  font-family: var(--font-mono);
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--ink-primary);
  line-height: 1.1;
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.metric-number .accent {
  color: var(--accent-cyan);
}

.metric-label {
  font-size: 0.9rem;
  color: var(--ink-secondary);
  font-weight: 500;
}

/* ==========================================================================
   Experience Section (Timeline)
   ========================================================================== */

.timeline {
  position: relative;
  margin-top: 40px;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 20px;
  left: 20px;
  width: 2px;
  background: var(--gradient-rail);
}

.timeline-item {
  position: relative;
  padding-left: 64px;
  margin-bottom: 48px;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-marker {
  position: absolute;
  left: 10px;
  top: 4px;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface-base);
  border: 3px solid var(--accent-cyan);
  box-shadow: var(--shadow-glow-cyan);
  z-index: 2;
  transition: all var(--transition-fast);
}

.timeline-item:hover .timeline-marker {
  transform: translateX(-50%) scale(1.2);
  background: var(--accent-cyan);
}

.timeline-card {
  background: var(--surface-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: all var(--transition-base);
}

.timeline-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
  background: var(--surface-card-hover);
}

.timeline-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.timeline-role-group h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink-primary);
  margin-bottom: 4px;
}

.timeline-company {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent-cyan);
}

.timeline-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.timeline-date {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-muted);
  background: var(--surface-chip-strong);
  padding: 4px 12px;
  border-radius: var(--radius-full);
}

.badge-current {
  background: var(--signal-success-fill);
  color: var(--signal-success);
  border: 1px solid var(--border-success);
  font-weight: 600;
}

.timeline-summary {
  font-size: 0.98rem;
  font-style: italic;
  color: var(--ink-secondary);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.timeline-bullets {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: var(--measure-prose);
}

.timeline-bullet {
  position: relative;
  padding-left: 24px;
  font-size: 0.95rem;
  color: var(--ink-secondary);
  line-height: 1.6;
}

.timeline-bullet::before {
  content: '▹';
  position: absolute;
  left: 0;
  color: var(--accent-cyan);
  font-size: 1.1rem;
  line-height: 1.4;
}

.timeline-bullet strong {
  color: var(--ink-primary);
  font-weight: 600;
}

/* ==========================================================================
   Featured Systems & Architecture (Case Studies)
   ========================================================================== */

.systems-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.system-card {
  background: var(--surface-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 32px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all var(--transition-base);
}

.system-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-indigo);
  box-shadow: var(--shadow-lg), var(--shadow-glow-indigo);
  background: var(--surface-card-hover);
}

.system-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.system-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-cyan-fill-strong), var(--accent-indigo-fill));
  border: 1px solid var(--border-hover);
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.system-stat-badge {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--signal-success);
  background: var(--signal-success-fill);
  border: 1px solid var(--border-success);
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.system-card h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink-primary);
  margin-bottom: 12px;
}

.system-card p {
  font-size: 0.95rem;
  color: var(--ink-secondary);
  line-height: 1.65;
  max-width: var(--measure-prose);
  margin-bottom: var(--space-5);
}

.system-tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tech-tag {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-secondary);
  background: var(--surface-chip);
  border: 1px solid var(--border-subtle);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.system-card:hover .tech-tag {
  border-color: var(--border-card);
  color: var(--ink-primary);
}

/* ==========================================================================
   Technical Arsenal (Skills Matrix)
   ========================================================================== */

.skills-matrix {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

/* A skills group is grouped content, not a discrete object: it takes a rule
   and the grid's own gap, no fill and no elevation. */
.skill-category-card {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-5) 0 0;
}

.category-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--ink-primary);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
}

.category-icon {
  color: var(--accent-cyan);
}

.skill-pill-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.skill-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-secondary);
  background: var(--surface-chip);
  border: 1px solid var(--border-subtle);
  padding: 7px 14px;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.skill-pill:hover {
  background: var(--accent-cyan-fill);
  border-color: var(--border-hover);
  color: var(--ink-primary);
  transform: translateY(-2px);
}

.skill-pill.featured {
  background: var(--accent-indigo-fill);
  border-color: var(--border-indigo);
  color: var(--ink-featured);
}

/* ==========================================================================
   Education & Certifications
   ========================================================================== */

.credentials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.credential-card {
  background: var(--surface-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all var(--transition-base);
}

.credential-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
}

.credential-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.credential-badge-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.credential-badge-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--accent-cyan-fill);
  border: 1px solid var(--border-hover);
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.credential-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink-primary);
  margin-bottom: 4px;
}

.credential-org {
  font-size: 0.9rem;
  color: var(--accent-cyan);
  font-weight: 600;
}

.credential-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.credential-link {
  color: var(--accent-cyan);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

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

/* ==========================================================================
   Contact Section
   ========================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items: start;
}

.contact-info-card {
  background: var(--surface-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 36px;
}

.contact-info-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.contact-info-card p {
  color: var(--ink-secondary);
  margin-bottom: var(--space-7);
  font-size: 0.98rem;
  line-height: 1.6;
  max-width: var(--measure-prose);
}

.contact-channels {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.channel-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
  padding: 14px 18px;
  background: var(--surface-chip);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.channel-item:hover {
  background: var(--accent-cyan-fill);
  border-color: var(--border-hover);
  transform: translateX(4px);
}

.channel-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--accent-cyan-fill);
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.channel-details {
  flex-grow: 1;
  /* Without this a flex child refuses to shrink below its longest unbreakable
     string, which pushed this card 44px past a 390px viewport. */
  min-width: 0;
}

.channel-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
}

.channel-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-primary);
  overflow-wrap: anywhere;
}

.btn-copy {
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-cyan);
  background: var(--accent-cyan-fill);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.btn-copy:hover {
  background: var(--accent-cyan);
  color: var(--surface-base);
}

/* Contact Form */
.contact-form-card {
  background: var(--surface-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 36px;
}

.contact-form-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 24px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-secondary);
  margin-bottom: 8px;
}

.form-control {
  width: 100%;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--ink-primary);
  background: var(--surface-input);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  outline: none;
  transition: all var(--transition-fast);
}

.form-control:focus {
  border-color: var(--accent-cyan);
  box-shadow: var(--shadow-focus);
  background: var(--surface-input);
}

.form-control::placeholder {
  color: var(--ink-muted);
  opacity: 1;
}

textarea.form-control {
  resize: vertical;
  min-height: 120px;
}

.form-status {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  display: none;
}

.form-status.success {
  display: block;
  background: var(--signal-success-fill);
  border: 1px solid var(--border-success);
  color: var(--signal-success);
}

.form-status.error {
  display: block;
  background: var(--signal-danger-fill);
  border: 1px solid var(--border-danger);
  color: var(--signal-danger);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  border-top: 1px solid var(--border-subtle);
  padding: 48px 0;
  background: var(--surface-raised);
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-copy {
  font-size: 0.9rem;
  color: var(--ink-muted);
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-link {
  font-size: 0.9rem;
  color: var(--ink-secondary);
  transition: color var(--transition-fast);
}

.footer-link:hover {
  color: var(--accent-cyan);
}

.back-to-top {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-chip-strong);
  border: 1px solid var(--border-subtle);
  color: var(--ink-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.back-to-top:hover {
  color: var(--accent-cyan);
  background: var(--accent-cyan-fill);
  border-color: var(--accent-cyan);
  transform: translateY(-3px);
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

@media (max-width: 1024px) {
  /* The full link row plus the header actions stop fitting here, so the links
     move behind the toggle rather than pushing the actions off-screen. */
  .nav-menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: var(--surface-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-5);
    gap: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    transform: translateY(-150%);
    opacity: 0;
    pointer-events: none;
    transition: all var(--transition-smooth);
  }

  .nav-menu.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-toggle {
    display: flex;
  }

  .hero-title {
    font-size: 3rem;
  }
  .systems-grid {
    grid-template-columns: 1fr;
  }
  .skills-matrix {
    grid-template-columns: 1fr;
  }
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .credentials-grid {
    grid-template-columns: 1fr;
  }
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .hero-role {
    justify-content: center;
  }

  .hero-bio {
    margin-left: auto;
    margin-right: auto;
    /* Headings stay centred; running text does not. A centred paragraph loses
       its left edge on every line, which is measurably slower to read. */
    text-align: left;
  }

  .hero-ctas {
    justify-content: center;
  }

  .hero-socials {
    justify-content: center;
  }

  .hero-visual {
    order: -1;
    margin-bottom: 24px;
  }

  .avatar-wrapper {
    width: 240px;
    height: 240px;
  }

  .float-card {
    display: none;
  }

  .metrics-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .timeline::before {
    left: 14px;
  }

  .timeline-item {
    padding-left: 44px;
  }

  .timeline-marker {
    left: 4px;
    width: 18px;
    height: 18px;
  }

  .timeline-card {
    padding: 20px;
  }

  .section {
    padding: var(--space-8) 0;
  }

  .hero-title {
    font-size: 2.25rem;
  }
}

/* Form accessible validation styles */
.form-control[aria-invalid="true"] {
  border-color: var(--signal-danger) !important;
  box-shadow: 0 0 0 3px var(--border-danger) !important;
}

.required-indicator {
  color: var(--signal-danger);
  margin-left: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .typing-cursor {
    display: none !important;
  }
  .status-dot {
    animation: none !important;
  }
  .float-badge {
    animation: none !important;
  }
  .btn:hover,
  .metric-card:hover,
  .system-card:hover,
  .credential-card:hover,
  .social-icon-link:hover,
  .channel-item:hover,
  .skill-pill:hover,
  .back-to-top:hover {
    transform: none !important;
  }
}

/* ==========================================================================
   Header actions on phones

   The header carries four controls: brand, resume, theme and the menu toggle.
   At phone widths they do not all fit with their labels, and because the
   actions row is flex: none the overflow clipped the menu toggle off-screen
   instead of squashing it. The resume label and the brand name are dropped
   before any control is, so every one stays reachable at its full hit area.
   ========================================================================== */

.brand-title {
  white-space: nowrap;
}

@media (max-width: 600px) {
  .nav-actions {
    gap: var(--space-2);
  }

  /* Icon only. The label stays in the accessibility tree, and the footer
     carries a text link to the same file. */
  .btn-resume-nav {
    width: var(--touch-min);
    height: var(--touch-min);
    padding: 0;
    justify-content: center;
    gap: 0;
  }

  .btn-resume-nav span {
    position: absolute;
    clip-path: inset(50%);
    overflow: hidden;
    width: 1px;
    height: 1px;
    white-space: nowrap;
  }
}

@media (max-width: 440px) {
  .brand-title {
    display: none;
  }
}

/* ==========================================================================
   Theme toggle
   ========================================================================== */

.theme-toggle {
  /* flex: none — a flex child shrinks by default, which squeezed this below
     the touch-min hit area on narrow desktop widths. */
  flex: none;
  width: var(--touch-min);
  height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--surface-chip);
  border: 1px solid var(--border-subtle);
  color: var(--ink-secondary);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.theme-toggle:hover {
  color: var(--accent-cyan);
  background: var(--accent-cyan-fill);
  border-color: var(--border-hover);
}

/* Exactly one glyph shows per theme. */
.theme-toggle .icon-dark { display: none; }
.theme-toggle .icon-light { display: block; }

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

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

/* ==========================================================================
   Form status messages
   ========================================================================== */

.form-status {
  display: none;
  align-items: flex-start;
  gap: var(--space-2);
}

.form-status.success,
.form-status.error {
  display: flex;
}

.form-status svg {
  flex: none;
  margin-top: 2px;
}

/* ==========================================================================
   Print — the light theme, without the furniture
   ========================================================================== */

@media print {
  :root {
    color-scheme: light;
    --surface-base: #ffffff;
    --surface-raised: #ffffff;
    --surface-card: #ffffff;
    --surface-card-solid: #ffffff;
    --surface-chip: #ffffff;
    --surface-chip-strong: #ffffff;
    --ink-primary: #000000;
    --ink-secondary: #1a1a1a;
    --ink-muted: #3d3d3d;
    --accent-cyan: #00506e;
    --border-card: #b8bfc9;
    --border-subtle: #d3d8df;
  }

  .navbar,
  .nav-toggle,
  .theme-toggle,
  .back-to-top,
  .hero-socials,
  .contact-form-card,
  .float-card,
  .skip-link,
  body::before,
  body::after {
    display: none !important;
  }

  body {
    background: #ffffff;
  }

  .section {
    padding: var(--space-5) 0;
    break-inside: avoid;
  }

  .metric-card,
  .timeline-card,
  .system-card,
  .credential-card {
    background: none;
    backdrop-filter: none;
    box-shadow: none;
    border: 1px solid var(--border-card);
    break-inside: avoid;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.75rem;
    color: var(--ink-muted);
  }
}

/* ==========================================================================
   Forced colors (Windows High Contrast)
   ========================================================================== */

@media (forced-colors: active) {
  .text-gradient {
    color: CanvasText;
  }

  .text-gradient::after,
  .metric-card--lead::before {
    background: Highlight;
  }

  .btn,
  .btn-copy,
  .theme-toggle,
  .social-icon-link,
  .back-to-top,
  .metric-card,
  .timeline-card,
  .system-card,
  .credential-card,
  .form-control {
    border: 1px solid ButtonBorder;
  }

  :focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 3px;
  }
}

/* ==========================================================================
   Category badges

   signal-success means a measured figure. A category label is not one, so it
   takes the neutral chip and the green is left to carry numbers the page can
   defend.
   ========================================================================== */

.system-stat-badge.is-category {
  color: var(--ink-muted);
  background: var(--surface-chip-strong);
  border-color: var(--border-subtle);
}

/* ==========================================================================
   Touch targets

   The system puts a touch-min floor on every interactive element in both
   dimensions. These were between 17px and 43px tall; the two smallest failed
   even the 24px WCAG 2.5.8 minimum.
   ========================================================================== */

.btn,
.btn-resume-nav,
.form-control,
.nav-brand {
  min-height: var(--touch-min);
}

.credential-link,
.footer-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
}

/* The LinkedIn row's value is a link. Stretching its hit area over the whole
   row clears the floor without making the row taller. */
.channel-item {
  position: relative;
}

a.channel-value::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
}

.channel-item .btn-copy {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Engineering Ops Console

   A hidden terminal for the readers who go looking for one. Everything here is
   token-driven, so it inherits both themes rather than hard-coding a black
   terminal that would fail contrast in light mode. The terminal read comes from
   the mono face, the prompt and the window chrome, not from a forced ground.

   Opened by: five clicks on the ED monogram, typing "ops" on the page, or the
   "Open system console" control in the footer.
   ========================================================================== */

/* The footer's discoverable entry point. Reads as a peer of .footer-link. */
.ops-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.ops-trigger:hover {
  color: var(--accent-cyan);
}

.ops-trigger svg {
  flex: none;
}

/* --------------------------------------------------------------------------
   Window
   -------------------------------------------------------------------------- */

.ops-console {
  width: min(860px, calc(100vw - (var(--gutter-page) * 2)));
  max-width: none;
  height: min(620px, calc(100vh - (var(--space-8) * 2)));
  max-height: none;
  padding: 0;
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--ink-secondary);
  box-shadow: var(--shadow-lg), var(--shadow-glow-cyan);
  overflow: hidden;
}

.ops-console[open] {
  display: flex;
  flex-direction: column;
}

.ops-console::backdrop {
  background: rgba(7, 9, 14, 0.72);
  backdrop-filter: var(--glass-blur-sm);
}

/* The dialog polyfill path (no showModal) positions the window itself. */
.ops-console:not(:modal) {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9000;
}

/* --------------------------------------------------------------------------
   Title bar
   -------------------------------------------------------------------------- */

.ops-titlebar {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  background: var(--surface-panel);
  border-bottom: 1px solid var(--border-subtle);
}

.ops-dots {
  display: flex;
  gap: 6px;
  flex: none;
}

.ops-dots span {
  width: 11px;
  height: 11px;
  border-radius: var(--radius-full);
  background: var(--ink-dim);
  opacity: 0.55;
}

.ops-dots span:nth-child(1) { background: var(--signal-danger); }
.ops-dots span:nth-child(2) { background: var(--signal-warning); }
.ops-dots span:nth-child(3) { background: var(--signal-success); }

.ops-title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ops-close {
  flex: none;
  width: var(--touch-min);
  height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: none;
  border: 1px solid transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.ops-close:hover {
  color: var(--signal-danger);
  background: var(--signal-danger-fill);
  border-color: var(--border-danger);
}

/* --------------------------------------------------------------------------
   Output log
   -------------------------------------------------------------------------- */

.ops-output {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.75;
  background: var(--surface-base);
}

.ops-line {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ink-secondary);
  animation: ops-line-in 0.18s ease-out both;
}

@keyframes ops-line-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: none; }
}

.ops-line--blank { min-height: 0.75em; }
.ops-line--heading {
  color: var(--ink-primary);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.ops-line--accent  { color: var(--accent-cyan); }
.ops-line--muted   { color: var(--ink-muted); }
.ops-line--dim {
  color: var(--ink-muted);
  font-size: 0.95em;
}
.ops-line--success { color: var(--signal-success); }
.ops-line--danger  { color: var(--signal-danger); }

/* The echoed command, so scrollback reads like a real session. */
.ops-echo {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  overflow-wrap: anywhere;
}

.ops-echo-prompt {
  flex: none;
  color: var(--accent-cyan);
}

.ops-echo-cmd {
  color: var(--ink-primary);
}

/* Metric rows. A grid rather than padded strings, so narrow screens wrap
   instead of scrolling a column of numbers off the edge. */
.ops-kv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: baseline;
}

.ops-kv-key { color: var(--ink-muted); }

.ops-kv-val {
  color: var(--ink-primary);
  font-weight: 600;
  text-align: right;
}

.ops-kv-val.is-accent { color: var(--accent-cyan); }

/* Label-left pairs (help, stack): a fixed key column so the descriptions line
   up, and the value reads as prose rather than a right-aligned figure. */
.ops-kv--pair {
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--space-3);
}

.ops-kv--pair .ops-kv-key { color: var(--accent-cyan); }

.ops-kv--pair .ops-kv-val {
  color: var(--ink-secondary);
  font-weight: 400;
  text-align: left;
}

.ops-pre {
  margin: var(--space-2) 0;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--accent-cyan);
  animation: ops-line-in 0.18s ease-out both;
}

/* Pipeline steps: the tick keeps its own colour while the label stays ink.
   The mark is boxed to a fixed 4ch because U+2713 is outside the JetBrains Mono
   subset Google Fonts serves and renders from the fallback face. Without the
   box, every label would nudge sideways at the moment its step ticked over. */
.ops-step-mark {
  display: inline-block;
  width: 4ch;
  color: var(--signal-success);
}

.ops-step-mark.is-pending { color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   Prompt
   -------------------------------------------------------------------------- */

.ops-inputbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-panel);
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

.ops-prompt {
  flex: none;
  color: var(--accent-cyan);
  font-weight: 600;
}

.ops-input {
  flex: 1;
  min-width: 0;
  padding: var(--space-2) 0;
  background: none;
  border: 0;
  color: var(--ink-primary);
  font-family: inherit;
  font-size: inherit;
  caret-color: var(--accent-cyan);
}

.ops-input:focus {
  outline: none;
}

/* The focus ring belongs on the bar: the input has no box of its own. */
.ops-inputbar:focus-within {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.ops-input:disabled {
  color: var(--ink-dim);
  cursor: progress;
}

.ops-input::placeholder {
  color: var(--ink-muted);
}

/* Lock the page behind the window so the background cannot scroll away. */
.ops-open,
.ops-open body {
  overflow: hidden;
}

@media (max-width: 600px) {
  .ops-console {
    width: calc(100vw - var(--space-4));
    height: calc(100dvh - var(--space-7));
  }

  .ops-output,
  .ops-inputbar {
    font-size: 0.76rem;
  }

  .ops-kv,
  .ops-kv--pair {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .ops-kv-val {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ops-line,
  .ops-pre {
    animation: none !important;
  }
}

@media (forced-colors: active) {
  .ops-console,
  .ops-close,
  .ops-trigger {
    border: 1px solid ButtonBorder;
  }

  .ops-line,
  .ops-kv-key,
  .ops-kv-val,
  .ops-pre,
  .ops-step-mark {
    color: CanvasText;
  }
}

@media print {
  .ops-console,
  .ops-trigger {
    display: none !important;
  }
}