/*
 * Site styles (ADR-0004): one stylesheet, design tokens as custom properties.
 *
 * Gold is a deep, old "royal gold" (#c9a227), not a bright lemon yellow. Every gold
 * token in the dark palette uses it, so the whole site shifts together.
 *
 * Dark royal purple theme: deep Tyrian purple with gold accents, the colors of
 * royal robes and crowns. Dark is the DEFAULT for every visitor, whatever their
 * system setting. The header, hero and footer are deep purple in both themes so the
 * identity never changes; the optional light theme only changes the reading
 * surfaces between them.
 *
 * Theme blocks:
 *   1. :root                     the dark palette (default) plus tokens shared by both themes
 *   2. :root[data-theme="light"] light values, applied only when the visitor picks light
 * Every token in block 2 must also exist in block 1 and every color pair must keep
 * its contrast in both themes: both are enforced by tests.
 */

:root {
  color-scheme: dark;

  /* Reading surfaces (dark by default, overridden by the light theme) */
  --bg: #120a24;
  --surface: #1b1035;
  --surface-alt: #251650;
  --text: #eee8fb;
  --text-muted: #b4a8d6;
  --heading: #ffffff;
  --accent: #c4b0ff;
  --border: #38246b;
  --focus: #d9b24a;
  --gold: #c9a227;
  --gold-bright: #c9a227;
  --stripe: #8b5cf6;
  --shadow: 0 0 0;

  /* Header, hero and footer (the same in both themes) */
  --chrome-bg: #1a0b3b;
  --chrome-text: #f5f0ff;
  --chrome-muted: #cdbff0;
  --chrome-gold: #c9a227;
  --hero-from: #1a0b3b;
  --hero-via: #3a1878;
  --hero-to: #2a1160;
  --hero-text: #f5f0ff;
  --hero-muted: #d3c7f2;
  --hero-gold: #c9a227;
  --hero-button-text: #2a1160;

  /* Code card in the hero (the same in both themes) */
  --code-bg: #0e0620;
  --code-text: #e9e2ff;
  --code-keyword: #b794ff;
  --code-type: #e9b6ff;
  --code-string: #c9a227;
  --code-comment: #9a8bc4;
  --code-operator: #c4b0ff;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.5rem;
  --space-7: 4rem;
  --radius: 1rem;
  --content-width: 60rem;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #faf7ff;
  --surface: #ffffff;
  --surface-alt: #f1eafc;
  --text: #1c1233;
  --text-muted: #5b4e7a;
  --heading: #2e1065;
  --accent: #5b21b6;
  --border: #ddd0f3;
  --focus: #6d28d9;
  --gold: #8a6100;
  --gold-bright: #b07d00;
  --stripe: #6d28d9;
  --shadow: 46 16 101;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  color: var(--heading);
  font-family: var(--font-display);
  line-height: 1.2;
  margin: 0 0 var(--space-3);
}

p {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--accent);
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* On the deep purple areas the focus ring must be gold to stay visible. */
.site-header :focus-visible,
.hero :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--chrome-gold);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -4rem;
  background: var(--chrome-gold);
  color: var(--hero-button-text);
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  z-index: 20;
}

.skip-link:focus {
  top: var(--space-3);
}

.container {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding-inline: var(--space-5);
}

/* Header: deep purple with a gold hairline, in both themes */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--chrome-bg) 94%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid color-mix(in srgb, var(--chrome-gold) 30%, transparent);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-3);
}

/* Narrow screens: name and theme toggle share row 1, navigation gets row 2. */
.brand {
  order: 1;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--chrome-text);
  text-decoration: none;
  margin-right: auto;
}

.brand:hover {
  color: var(--chrome-gold);
}

.header-inner > nav {
  order: 3;
  width: 100%;
}

.theme-toggle {
  order: 2;
}

/* Wider screens: everything on one row, navigation between name and toggle. */
@media (min-width: 42rem) {
  .header-inner > nav {
    order: 2;
    width: auto;
  }

  .theme-toggle {
    order: 3;
  }
}

/* Very short viewports (phones in landscape): a sticky header would eat the screen. */
@media (max-height: 30rem) {
  .site-header {
    position: static;
  }
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list a {
  color: var(--chrome-muted);
  text-decoration: none;
  font-size: 0.95rem;
  padding-block: 0.15rem;
  border-bottom: 2px solid transparent;
}

.nav-list a:hover,
.nav-list a[aria-current="true"] {
  color: var(--chrome-text);
  border-bottom-color: var(--chrome-gold);
}

.theme-toggle {
  font: inherit;
  font-size: 0.9rem;
  color: var(--chrome-text);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--chrome-text) 40%, transparent);
  border-radius: 999px;
  padding: var(--space-1) var(--space-4);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.theme-toggle:hover {
  border-color: var(--chrome-gold);
  color: var(--chrome-gold);
}

/* The toggle ships hidden and theme.js reveals it, so it never shows as a dead button. */
.theme-toggle[hidden] {
  display: none;
}

/* Hero: a deep purple field with a gold glow and a faint brocade pattern */

.hero {
  position: relative;
  overflow: hidden;
  color: var(--hero-text);
  padding-block: var(--space-7) calc(var(--space-7) + var(--space-3));
  background:
    radial-gradient(60rem 28rem at 88% -10%, color-mix(in srgb, var(--hero-gold) 22%, transparent), transparent 60%),
    radial-gradient(50rem 30rem at -10% 110%, color-mix(in srgb, #8b5cf6 35%, transparent), transparent 60%),
    repeating-linear-gradient(45deg, rgb(255 255 255 / 0.025) 0 1px, transparent 1px 14px),
    linear-gradient(160deg, var(--hero-from), var(--hero-via) 55%, var(--hero-to));
  border-bottom: 3px solid var(--hero-gold);
}

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

.crown {
  display: block;
  width: 2.75rem;
  height: auto;
  color: var(--hero-gold);
  margin-bottom: var(--space-3);
}

.eyebrow {
  color: var(--hero-gold);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin-bottom: var(--space-2);
}

.hero-title {
  font-size: clamp(2.5rem, 7vw, 4rem);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-3);
}

.hero-rule {
  width: 4.5rem;
  height: 3px;
  border: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--hero-gold), transparent);
  margin: 0 0 var(--space-5);
}

.hero-lead {
  font-size: 1.15rem;
  max-width: 44rem;
  color: var(--hero-text);
}

.hero-meta {
  color: var(--hero-muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.button {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  color: var(--hero-text);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--hero-text) 45%, transparent);
  border-radius: 999px;
  padding: var(--space-2) var(--space-5);
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}

.button:hover {
  border-color: var(--hero-gold);
  color: var(--hero-gold);
}

.button-primary {
  background: var(--hero-gold);
  border-color: var(--hero-gold);
  color: var(--hero-button-text);
}

.button-primary:hover {
  background: color-mix(in srgb, var(--hero-gold) 85%, white);
  border-color: color-mix(in srgb, var(--hero-gold) 85%, white);
  color: var(--hero-button-text);
  transform: translateY(-1px);
}

/* Sections */

.section {
  padding-block: var(--space-6);
}

.section + .section {
  border-top: 1px solid var(--border);
}

.section-title {
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  margin-bottom: var(--space-4);
}

.section-title::after {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  margin-top: var(--space-2);
  border-radius: 2px;
  background: var(--gold-bright);
}

.section-intro {
  color: var(--text-muted);
  max-width: 44rem;
}

.subheading {
  font-size: 1.3rem;
  margin-top: var(--space-6);
}

.stack {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

/* Cards */

.card,
.skill-group,
.role {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: 0 1px 2px rgb(var(--shadow) / 0.06), 0 12px 28px -16px rgb(var(--shadow) / 0.35);
  /* opacity and transform also carry the scroll-reveal, so they are listed here. */
  transition: opacity 0.6s ease, transform 0.3s ease, border-color 0.2s, box-shadow 0.2s;
}

.card:hover,
.skill-group:hover,
.role:hover {
  transform: translateY(-2px);
  border-color: var(--stripe);
  box-shadow: 0 2px 4px rgb(var(--shadow) / 0.08), 0 18px 36px -16px rgb(var(--shadow) / 0.45);
}

.card-featured {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--space-5) + 4px);
}

.card-featured::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--stripe), var(--gold-bright));
}

.card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.card-title {
  font-size: 1.35rem;
  margin-bottom: var(--space-1);
}

.card-tagline {
  color: var(--text-muted);
  font-weight: 500;
}

.card-role {
  font-size: 0.95rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text-muted);
  white-space: nowrap;
}

.badge::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--stripe);
}

.badge-in-development::before {
  background: var(--gold-bright);
}

.highlights {
  margin: 0 0 var(--space-4);
  padding-left: 1.2rem;
}

.highlights li {
  margin-bottom: var(--space-2);
}

.highlights li::marker {
  color: var(--gold-bright);
}

.honest-note {
  background: var(--surface-alt);
  border-left: 3px solid var(--gold-bright);
  border-radius: 0.5rem;
  padding: var(--space-2) var(--space-3);
  font-size: 0.95rem;
}

.card-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-4) 0 0;
  font-weight: 600;
}

/* Tags */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
}

.tag {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1rem 0.65rem;
}

/* Experience: a vertical line with a gold marker for each role */

.timeline {
  list-style: none;
  margin: var(--space-5) 0 0 0.5rem;
  padding: 0 0 0 var(--space-5);
  border-left: 2px solid var(--border);
  display: grid;
  gap: var(--space-5);
}

.timeline > li {
  position: relative;
}

.timeline > li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-5) - 7px);
  top: 1.5rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 0 4px var(--bg);
}

.role-title {
  font-size: 1.25rem;
  margin-bottom: var(--space-1);
}

.role-company {
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.role-client {
  font-weight: 400;
  color: var(--text-muted);
}

.role-period {
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* Skills */

.skill-title {
  font-size: 1.05rem;
  margin-bottom: var(--space-3);
}

.skill-group .tags {
  margin-bottom: 0;
}

/* Contact and footer */

.contact-list {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.contact-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  box-shadow: 0 1px 2px rgb(var(--shadow) / 0.06), 0 12px 28px -16px rgb(var(--shadow) / 0.35);
  overflow-wrap: anywhere;
}

.contact-label {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-link {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
}

/* Profile icons (GitHub, LinkedIn) inside links: drawn in the link's own color. */
.link-icon {
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.45em;
  vertical-align: -0.18em;
  fill: currentColor;
}

.contact-action {
  font-size: 0.9rem;
  font-weight: 600;
}

.contact-value {
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.site-footer {
  background: var(--chrome-bg);
  color: var(--chrome-muted);
  border-top: 3px solid var(--chrome-gold);
  padding-block: var(--space-5);
  font-size: 0.9rem;
}

.site-footer p {
  margin: 0;
}

.site-footer a {
  color: var(--chrome-gold);
}

/* Hero layout: copy beside the code card on wide screens, stacked on phones */

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 60rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

/* Animated background (decorative, ADR-0008): lanes of scrolling code plus floating technology logos.
   One copy lives in the hero (stronger) and one is fixed behind the whole page (fainter), and both use the
   same lanes, so the background reads as one continuous surface from the top of the page to the bottom. */

.code-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

/* Lanes are equal-width grid columns across the full width, so they can never overlap each other. */
.code-streams {
  --lanes: 8;
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  display: grid;
  grid-template-columns: repeat(var(--lanes), minmax(0, 1fr));
}

.code-streams--page {
  position: fixed;
  z-index: -1;
}

.code-stream {
  min-width: 0;
  overflow: hidden;
  padding-inline: 0.6rem;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}

/* Each lane holds its code twice, so moving up by half its own height loops with no jump. */
.code-stream pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1.6;
  white-space: pre;
  animation: stream var(--dur, 60s) linear infinite;
  animation-direction: var(--dir, normal);
}

@keyframes stream {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, -50%, 0);
  }
}

/* In the hero the code is clearly visible; behind the rest of the page it is quieter but still moving. */
.code-streams--hero .code-stream pre {
  color: color-mix(in srgb, var(--hero-muted) 38%, transparent);
}

.code-streams--hero .code-stream:nth-child(even) pre {
  color: color-mix(in srgb, var(--hero-gold) 30%, transparent);
}

.code-streams--page .code-stream pre {
  color: color-mix(in srgb, var(--accent) 15%, transparent);
}

.code-streams--page .code-stream:nth-child(even) pre {
  color: color-mix(in srgb, var(--gold-bright) 17%, transparent);
}

/* Floating technology logos. In the hero each sits in a light round badge so every brand color stays visible. */
.tech-logos {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.tech-logos--page {
  position: fixed;
  z-index: -1;
}

.tech-logo {
  position: absolute;
  left: var(--x);
  top: var(--y, auto);
  bottom: var(--b, auto);
  width: 3.1rem;
  height: 3.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f5f0ff;
  box-shadow: 0 10px 26px -10px rgb(0 0 0 / 0.6), 0 0 0 3px color-mix(in srgb, var(--hero-gold) 40%, transparent);
  animation: bob var(--d, 12s) ease-in-out var(--delay, 0s) infinite alternate;
}

.tech-logo svg {
  width: 58%;
  height: 58%;
  fill: var(--brand);
}

@keyframes bob {
  from {
    transform: translate3d(0, 0, 0) rotate(-3deg);
  }

  to {
    transform: translate3d(8px, -14px, 0) rotate(3deg);
  }
}

/* Behind the page's text, logos are quiet silhouettes in the theme color, so text never sits on a bright badge. */
.tech-logos--page .tech-logo {
  width: 2.6rem;
  height: 2.6rem;
  background: transparent;
  box-shadow: none;
  opacity: 0.22;
}

.tech-logos--page .tech-logo svg {
  fill: var(--accent);
}

.tech-logos--page .tech-logo svg text {
  fill: var(--bg);
}

/* Cards let a little of the moving background show through, blurred so their text stays crisp. */
.card,
.skill-group,
.role,
.stat,
.contact-card {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Tablets: fewer, wider lanes. */
@media (max-width: 74.99rem) {
  .code-streams {
    --lanes: 5;
  }

  .code-stream:nth-child(n + 6) {
    display: none;
  }
}

/* Phones: text spans the whole width, so use three lanes at lower opacity and keep only the edge logos. */
@media (max-width: 41.99rem) {
  .code-streams {
    --lanes: 3;
  }

  .code-stream:nth-child(n + 4) {
    display: none;
  }

  .code-streams--hero .code-stream pre {
    color: color-mix(in srgb, var(--hero-muted) 22%, transparent);
  }

  .code-streams--hero .code-stream:nth-child(even) pre {
    color: color-mix(in srgb, var(--hero-gold) 18%, transparent);
  }

  .code-streams--page .code-stream pre {
    color: color-mix(in srgb, var(--accent) 10%, transparent);
  }

  .tech-logo:not(.tech-logo--edge) {
    display: none;
  }

  .tech-logo {
    width: 2.6rem;
    height: 2.6rem;
  }

  /* The hero is very tall on a phone, so a percentage from the top would land on the portrait:
     pin the top logos into the hero's top padding instead. */
  .tech-logos--hero .tech-logo--top {
    top: 0.9rem;
  }
}

/* Live sites section */

.grid-wide {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}

.live-address {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
}

.badge-live::before {
  background: var(--gold-bright);
  animation: live-pulse 2.4s ease-in-out infinite;
}

@keyframes live-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold-bright) 60%, transparent);
  }

  50% {
    box-shadow: 0 0 0 5px transparent;
  }
}

.footer-note {
  margin-top: var(--space-2);
  font-size: 0.8rem;
}

/* A soft dark halo behind the hero copy calms the moving code only where the text sits. */
.hero-copy {
  position: relative;
}

.hero-copy::before {
  content: "";
  position: absolute;
  inset: -2rem -2.5rem;
  z-index: -1;
  border-radius: 3rem;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--hero-from) 82%, transparent) 45%, transparent 78%);
  pointer-events: none;
}


/* Portrait beside the name */

.hero-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
}

.avatar {
  width: 10rem;
  height: 10rem;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 20%;
  border: 4px solid var(--hero-gold);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--hero-gold) 18%, transparent), 0 24px 44px -14px rgb(0 0 0 / 0.65);
  background: var(--hero-to);
}

@media (max-width: 41.99rem) {
  .avatar {
    width: 7.5rem;
    height: 7.5rem;
  }
}

.hero-identity-text {
  min-width: 0;
}

/* The code card: the owner's profile written as a C# record */

.code-card {
  background: var(--code-bg);
  border: 1px solid color-mix(in srgb, var(--hero-gold) 35%, transparent);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -24px rgb(0 0 0 / 0.65), 0 0 0 6px color-mix(in srgb, var(--hero-gold) 6%, transparent);
  overflow: hidden;
}

.code-card-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.9rem;
  background: color-mix(in srgb, var(--code-bg) 70%, #3a1878);
  border-bottom: 1px solid color-mix(in srgb, var(--hero-gold) 20%, transparent);
}

.code-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
}

.code-dot-gold {
  background: var(--code-string);
}

.code-dot-orchid {
  background: var(--code-type);
}

.code-dot-violet {
  background: var(--code-keyword);
}

.code-card-file {
  margin-left: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--code-comment);
}

.code-card-body {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--code-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tok-k {
  color: var(--code-keyword);
}

.tok-t {
  color: var(--code-type);
}

.tok-s {
  color: var(--code-string);
}

.tok-c {
  color: var(--code-comment);
}

.tok-o {
  color: var(--code-operator);
}

/* Stats strip: a few checkable facts, overlapping the hero's bottom edge */

.stats-wrap {
  position: relative;
  z-index: 2;
  margin-top: -2.5rem;
}

.stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold-bright);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  box-shadow: 0 1px 2px rgb(var(--shadow) / 0.06), 0 16px 32px -18px rgb(var(--shadow) / 0.5);
}

.stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1.1;
  color: var(--gold);
}

.stat-label {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Scroll reveal: content is hidden only when the script that reveals it is running (the "js" class). */

/* :where() keeps this at zero specificity so cards keep their own richer hover transitions. */
:where([data-reveal]) {
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js [data-reveal]:not(.is-visible) {
  opacity: 0;
  transform: translateY(18px);
}

/* Scroll progress bar: gold on purple, fixed to the top edge */

.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  height: 3px;
  pointer-events: none;
}

.scroll-progress span {
  display: block;
  height: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0));
  background: linear-gradient(90deg, #8b5cf6, var(--chrome-gold));
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
    animation: none !important;
  }

  .js [data-reveal]:not(.is-visible) {
    opacity: 1;
    transform: none;
  }

  .card:hover,
  .skill-group:hover,
  .role:hover,
  .button-primary:hover {
    transform: none;
  }
}

@media print {
  .site-header,
  .skip-link,
  .hero-actions {
    display: none;
  }
}