/* Hallmark · macrostructure: Workbench · genre: atmospheric · tone: technical
 * theme: studied-DNA (source: existing site — dark base, teal accent, terminal voice)
 * anchor hue: teal · pre-emit critique: P5 H4 E5 S4 R5 V4
 */

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* paper + surfaces (dark, locked for whole page) */
  --color-paper:    oklch(16% 0.018 250);
  --color-paper-1:  oklch(19% 0.020 250);
  --color-paper-2:  oklch(23% 0.022 250);

  /* ink */
  --color-ink:      oklch(96% 0.010 240);
  --color-ink-mut:  oklch(74% 0.018 245);
  --color-ink-fnt:  oklch(58% 0.020 245);

  /* accent (single, locked) */
  --color-accent:       oklch(82% 0.130 178);
  --color-accent-deep:  oklch(72% 0.128 178);
  --color-accent-ink:   oklch(22% 0.050 200);
  --color-accent-glow:  oklch(82% 0.130 178 / 0.16);

  /* lines */
  --rule:        oklch(100% 0 0 / 0.09);
  --rule-strong: oklch(100% 0 0 / 0.16);
  --rule-accent: oklch(82% 0.130 178 / 0.32);
  --color-focus: oklch(85% 0.13 178);

  /* type */
  --font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:    var(--font-display);
  --font-mono:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Code", "Roboto Mono", "Liberation Mono", monospace;

  --text-xs:   0.78rem;
  --text-sm:   0.9rem;
  --text-base: 1rem;
  --text-lg:   1.18rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  clamp(2.2rem, 4vw, 3rem);
  --text-display: clamp(2.8rem, 8vw, 5.5rem);

  /* space (4pt scale) */
  --s-xs: 0.25rem;
  --s-sm: 0.5rem;
  --s-md: 1rem;
  --s-lg: 1.5rem;
  --s-xl: 2.5rem;
  --s-2xl: 4rem;
  --s-3xl: 6rem;

  /* radius (one soft system; pill for interactive) */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.6s;

  --maxw: 1120px;
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
* { margin: 0; }

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

body {
  font-family: var(--font-body);
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-style: normal; line-height: 1.08; letter-spacing: -0.02em; overflow-wrap: anywhere; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-lg); }

.skip-link {
  position: absolute; left: var(--s-md); top: -3rem;
  background: var(--color-accent); color: var(--color-accent-ink);
  padding: var(--s-sm) var(--s-md); border-radius: var(--radius-sm);
  font: 600 var(--text-sm)/1 var(--font-mono); z-index: 100;
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: var(--s-md); }

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

.kicker {
  font: 500 var(--text-sm)/1 var(--font-mono);
  color: var(--color-accent);
  margin-bottom: var(--s-md);
  letter-spacing: 0;
}

/* ============================================================
   NAV  (single line desktop, height <= 72px)
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: oklch(16% 0.018 250 / 0.72);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.nav__inner {
  display: flex; align-items: center; gap: var(--s-lg);
  height: 68px;
}
.nav__brand { font: 600 var(--text-base)/1 var(--font-mono); white-space: nowrap; }
.nav__cwd { color: var(--color-ink-fnt); }
.nav__links {
  display: flex; align-items: center; gap: var(--s-lg);
  margin-left: auto;
  font: 500 var(--text-sm)/1 var(--font-mono);
  overflow-x: auto; scrollbar-width: none;
}
.nav__links::-webkit-scrollbar { display: none; }
.nav__links a {
  color: var(--color-ink-mut); white-space: nowrap; padding-block: var(--s-sm);
  border-bottom: 1px solid transparent; transition: color 0.2s var(--ease-out);
}
.nav__links a:hover, .nav__links a:focus-visible { color: var(--color-ink); }
.nav__links a.is-active { color: var(--color-accent); }

/* ============================================================
   BUTTONS  (pill, one radius family for interactive)
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-sm); white-space: nowrap;
  font: 600 var(--text-sm)/1 var(--font-body);
  padding: 0.8rem 1.4rem; border-radius: var(--radius-pill);
  background: var(--color-accent); color: var(--color-accent-ink);
  border: 1px solid transparent;
  transition: transform 0.15s var(--ease-out), background 0.2s var(--ease-out);
}
.btn:hover { background: var(--color-accent-deep); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn--sm { padding: 0.55rem 1rem; font-size: var(--text-xs); }
.btn--ghost {
  background: transparent; color: var(--color-ink);
  border-color: var(--rule-strong);
}
.btn--ghost:hover { background: var(--color-paper-1); border-color: var(--rule-accent); }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; padding-block: var(--s-3xl) var(--s-2xl); overflow: clip; }
.hero__glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(60% 55% at 15% 8%, var(--color-accent-glow), transparent 70%);
}
.hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-2xl);
  align-items: center;
}
.hero__name {
  font-size: var(--text-display); font-weight: 800; letter-spacing: -0.04em;
  margin-block: var(--s-xs) var(--s-sm);
}
.hero__role {
  font: 500 var(--text-xl)/1.2 var(--font-mono);
  color: var(--color-ink-mut); margin-bottom: var(--s-lg);
  display: flex; align-items: center; flex-wrap: wrap;
}
.caret {
  display: inline-block; width: 0.6ch; height: 1.05em; margin-left: 0.3ch;
  background: var(--color-accent); translate: 0 0.1em;
  animation: blink 1.1s steps(2, start) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.hero__sub {
  font-size: var(--text-lg); color: var(--color-ink-mut);
  max-width: 46ch; margin-bottom: var(--s-xl);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-md); }

/* status panel (real content, not fake chrome) */
.statuscard {
  background: var(--color-paper-1);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--s-lg);
  display: flex; flex-direction: column; gap: var(--s-md);
  font-family: var(--font-mono);
}
.statuscard__row { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--s-md); align-items: baseline; }
.statuscard__key { color: var(--color-ink-fnt); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; }
.statuscard__val { color: var(--color-ink); font-size: var(--text-sm); }
.dot {
  display: inline-block; width: 0.55em; height: 0.55em; margin-right: 0.5ch;
  border-radius: 50%; background: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-glow);
  translate: 0 -0.05em;
}
.statuscard__links {
  display: flex; flex-direction: column; gap: var(--s-xs);
  margin-top: var(--s-xs); padding-top: var(--s-md);
  border-top: 1px solid var(--rule); font-size: var(--text-sm);
}
.statuscard__links a { color: var(--color-accent); width: fit-content; }
.statuscard__links a:hover { color: var(--color-accent-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   STATS
   ============================================================ */
.stats { border-block: 1px solid var(--rule); background: var(--color-paper-1); }
.stats__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-block: var(--s-xl);
}
.stat { display: flex; flex-direction: column; gap: var(--s-xs); padding-inline: var(--s-lg); }
.stat + .stat { border-left: 1px solid var(--rule); }
.stat__value { font: 700 var(--text-3xl)/1 var(--font-mono); color: var(--color-accent); letter-spacing: -0.02em; }
.stat__label { color: var(--color-ink-mut); font-size: var(--text-sm); }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding-block: var(--s-3xl); }
.section--alt { background: var(--color-paper-1); border-block: 1px solid var(--rule); }
.section__head { margin-bottom: var(--s-2xl); }
.section__title { font-size: var(--text-3xl); font-weight: 800; }

/* ---- EXPERIENCE timeline ---- */
.timeline { list-style: none; padding: 0; display: grid; gap: var(--s-2xl); }
.job {
  display: grid; grid-template-columns: 12rem 1fr; gap: var(--s-xl);
  position: relative;
}
.job__meta { position: relative; }
.job__dates {
  font: 500 var(--text-sm)/1.4 var(--font-mono);
  color: var(--color-ink-fnt);
  position: sticky; top: 90px; display: inline-block;
}
.job__body { border-left: 1px solid var(--rule); padding-left: var(--s-xl); position: relative; }
.job__body::before {
  content: ""; position: absolute; left: -4.5px; top: 0.5rem;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-accent); box-shadow: 0 0 0 4px var(--color-paper);
}
.job__role { font-size: var(--text-xl); font-weight: 700; }
.job__org { color: var(--color-accent); font: 500 var(--text-base)/1.4 var(--font-mono); margin-bottom: var(--s-md); }
.job__note { color: var(--color-ink-mut); margin-bottom: var(--s-lg); max-width: 62ch; }
.job__group {
  font: 600 var(--text-xs)/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--color-ink-fnt); margin-top: var(--s-lg); margin-bottom: var(--s-sm);
}
.bullets { list-style: none; padding: 0; display: grid; gap: var(--s-md); max-width: 68ch; }
.bullets li { position: relative; padding-left: 1.5rem; color: var(--color-ink-mut); }
.bullets li::before {
  content: "▹"; position: absolute; left: 0; top: 0;
  color: var(--color-accent); font-size: 0.9em;
}

/* ---- SKILLS ---- */
.skills { display: grid; gap: 0; }
.skills__row {
  display: grid; grid-template-columns: 14rem 1fr; gap: var(--s-xl);
  padding-block: var(--s-lg); border-top: 1px solid var(--rule);
  align-items: baseline;
}
.skills__row:last-child { border-bottom: 1px solid var(--rule); }
.skills__row dt { font: 600 var(--text-base)/1.3 var(--font-body); color: var(--color-ink); }
.skills__row dd { margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-sm); }
.chip {
  font: 500 var(--text-sm)/1 var(--font-mono);
  color: var(--color-ink-mut);
  background: var(--color-paper-2);
  border: 1px solid var(--rule);
  padding: 0.4rem 0.7rem; border-radius: var(--radius-sm);
  transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.chip:hover { border-color: var(--rule-accent); color: var(--color-ink); }

/* ---- CREDENTIALS ---- */
.creds { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s-2xl); }
.creds .section__head { margin-bottom: var(--s-lg); }
.certlist { list-style: none; padding: 0; display: grid; gap: var(--s-md); }
.certlist li { display: flex; gap: var(--s-md); align-items: flex-start; color: var(--color-ink); }
.tick { color: var(--color-accent); font-size: var(--text-sm); translate: 0 0.15em; }
.edu__degree { font-size: var(--text-lg); font-weight: 700; }
.edu__school { color: var(--color-ink-mut); font-family: var(--font-mono); font-size: var(--text-sm); margin-top: var(--s-xs); }

/* ---- CONTACT ---- */
.contact {
  position: relative; overflow: clip;
  background: var(--color-paper-1);
  border: 1px solid var(--rule-accent); border-radius: var(--radius);
  padding: var(--s-3xl) var(--s-xl); text-align: center;
}
.contact__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 80% at 50% 0%, var(--color-accent-glow), transparent 70%);
}
.contact > *:not(.contact__glow) { position: relative; z-index: 1; }
.contact .kicker { display: inline-block; }
.contact__title { font-size: var(--text-3xl); font-weight: 800; max-width: 18ch; margin-inline: auto; }
.contact__sub { color: var(--color-ink-mut); max-width: 48ch; margin: var(--s-md) auto var(--s-xl); font-size: var(--text-lg); }
.contact__cta { display: flex; flex-wrap: wrap; gap: var(--s-md); justify-content: center; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1px solid var(--rule); padding-block: var(--s-xl); }
.footer__inner {
  display: flex; flex-wrap: wrap; gap: var(--s-md); justify-content: space-between;
  color: var(--color-ink-fnt); font: 400 var(--text-sm)/1.5 var(--font-mono);
}

/* ============================================================
   REVEAL MOTION
   ============================================================ */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .caret { animation: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-xl); }
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-lg) 0; }
  .stat:nth-child(3) { border-left: none; }
  .creds { grid-template-columns: 1fr; gap: var(--s-2xl); }
}
@media (max-width: 680px) {
  .nav__links { display: none; }
  .job { grid-template-columns: 1fr; gap: var(--s-md); }
  .job__dates { position: static; }
  .job__body { border-left: none; padding-left: 0; }
  .job__body::before { display: none; }
  .skills__row { grid-template-columns: 1fr; gap: var(--s-sm); }
  .stat { padding-inline: var(--s-md); }
  .contact { padding: var(--s-2xl) var(--s-lg); }
}