@font-face { font-family: 'IBM Plex Mono'; src: local('IBM Plex Mono Thin'), url("/assets/IBMPlexMono-Thin-03f21dc2.ttf") format('truetype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: local('IBM Plex Mono Thin Italic'), url("/assets/IBMPlexMono-ThinItalic-3af1ff06.ttf") format('truetype'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: local('IBM Plex Mono ExtraLight'), url("/assets/IBMPlexMono-ExtraLight-85f146b6.ttf") format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: local('IBM Plex Mono ExtraLight Italic'), url("/assets/IBMPlexMono-ExtraLightItalic-fe5f60c9.ttf") format('truetype'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: local('IBM Plex Mono Light'), url("/assets/IBMPlexMono-Light-1f3d9e86.ttf") format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: local('IBM Plex Mono Light Italic'), url("/assets/IBMPlexMono-LightItalic-56fd7180.ttf") format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: local('IBM Plex Mono'), url("/assets/IBMPlexMono-Regular-e0183082.ttf") format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: local('IBM Plex Mono Italic'), url("/assets/IBMPlexMono-Italic-f6ac6d39.ttf") format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: local('IBM Plex Mono Medium'), url("/assets/IBMPlexMono-Medium-e9fc3651.ttf") format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: local('IBM Plex Mono Medium Italic'), url("/assets/IBMPlexMono-MediumItalic-aa3ba135.ttf") format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: local('IBM Plex Mono SemiBold'), url("/assets/IBMPlexMono-SemiBold-51fa7d60.ttf") format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: local('IBM Plex Mono SemiBold Italic'), url("/assets/IBMPlexMono-SemiBoldItalic-cc6d2dcd.ttf") format('truetype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: local('IBM Plex Mono Bold'), url("/assets/IBMPlexMono-Bold-f68bf7f9.ttf") format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: local('IBM Plex Mono Bold Italic'), url("/assets/IBMPlexMono-BoldItalic-ed928812.ttf") format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  --canvas:    oklch(0.95 0.004 95);
  --line:      oklch(0.86 0.006 95);
  --paper:     oklch(0.985 0.003 95);
  --ink:       oklch(0.24 0.008 95);
  --ink-body:  oklch(0.32 0.008 95);
  --ink-muted: oklch(0.50 0.008 95);
  --accent:    oklch(0.50 0.09 152);
  --chip-bg:   oklch(0.94 0.006 95);
  --chip-line: oklch(0.88 0.006 95);
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sans: 'Manrope', system-ui, sans-serif;
  --fs-display: 2.5rem;
  --fs-lead:    1rem;
  --fs-body:    0.8125rem;
  --fs-micro:   0.75rem;
  --lh-tight:  1;
  --lh-body:   1.6;
  --fw-normal: 400;
  --fw-bold:   600;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--canvas);
  padding: 48px 24px;
}

a { text-decoration: none; }
a:hover { opacity: 0.65; }

/* --- accessibility utilities --- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
#main-content:focus, #main-content:focus-visible { outline: none; }
.skip-link {
  position: absolute; left: 14px; top: -60px; z-index: 10;
  background: var(--ink); color: #fff; padding: 9px 15px;
  font: var(--fw-bold) var(--fs-body)/var(--lh-tight) var(--mono); border-radius: 6px;
  text-decoration: none; transition: top 0.16s ease;
}
.skip-link:focus { top: 14px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* --- font-family --- */
body { font-family: var(--sans); }
.name, .meta, .label, .links, .job-date, .chip, .edu-meta, .tech-group-label, footer p { font-family: var(--mono); }
.edu-meta { font-variant-numeric: tabular-nums; }

/* --- color --- */
body { color: var(--ink-body); }
.name, .job-title, .edu-title { color: var(--ink); }
.tagline, .chip, .meta, .label, .job-date, .edu-meta, .tech-group-label, footer { color: var(--ink-muted); }
.job-org, a { color: var(--accent); }

/* --- modular grid --- */
.cv {
  width: 1000px; max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "header      header      header"
    "profile     profile     links"
    "experience  experience  tech"
    "other-exp   other-exp   edu"
    "other-exp   other-exp   pubs";
  gap: 1px;                    /* hairline grid lines */
  background: var(--line);     /* shows through the gaps */
  border: 1px solid var(--line);
}
.cv > * { background: var(--paper); }   /* every cell = a panel */

.header      { grid-area: header; }
.profile     { grid-area: profile; }
.links       { grid-area: links; }
.experience  { grid-area: experience; }
.other-exp   { grid-area: other-exp; }
.tech        { grid-area: tech; }
.edu         { grid-area: edu; }
.pubs        { grid-area: pubs; }

.panel { padding: 28px 32px; display: flex; flex-direction: column; gap: 16px; }

/* --- header --- */
.header {
  padding: 38px 32px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.header-intro { display: flex; flex-direction: column; gap: 8px; }
.name    { font-size: var(--fs-display); font-weight: var(--fw-bold); letter-spacing: -0.015em; line-height: var(--lh-tight); margin: 0; }
.tagline { margin: 0; font-size: var(--fs-lead); }
.meta    { margin: 0; font-size: var(--fs-micro); text-align: right; line-height: var(--lh-body); }

/* --- terminal prompt --- */
.term {
  width: 1000px; max-width: 100%;
  margin: 0 auto 16px;
  padding: 0 32px;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  cursor: text;
}
.term-line { margin: 0; line-height: var(--lh-body); color: var(--ink-body); }
.term-ghost { color: var(--ink-muted); opacity: 0.55; }
.term-percent, .prompt-user-path { color: var(--accent); }
.term-percent { white-space: pre; }
.prompt-user-path { font-weight: var(--fw-bold); }
.term-active { display: flex; align-items: center; position: relative; }
.term-cursor {
  display: inline-block;
  width: 0.6em; height: 1em;
  margin-left: 1px;
  background: var(--accent);
  animation: term-blink 1s steps(1) infinite;
}
@keyframes term-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.term-input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  padding: 0; margin: 0; border: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font: inherit;
  font-size: 16px; /* avoid iOS zoom; input text itself is invisible */
}
.term-input:focus { outline: none; }

/* --- section labels --- */
.label    { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; margin: 0; }

/* --- profile --- */
.profile-text { margin: 0; font-size: var(--fs-lead); line-height: var(--lh-body); text-wrap: pretty; }

/* --- links --- */
.links-list   { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: var(--fs-body); }

/* --- experience --- */
.jobs      { display: flex; flex-direction: column; gap: 16px; }
.job       { display: flex; flex-direction: column; gap: 8px; }
.job-title-block { display: flex; flex-direction: column; gap: 4px; }
.job-head  { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: nowrap; }
.job-title { margin: 0; font-size: var(--fs-lead); font-weight: var(--fw-bold); }
.job-org   { font-weight: var(--fw-normal); }
.job-date  { font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.job-promo-title { font-size: var(--fs-body); color: var(--ink-muted); }
.job-desc  { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); }

/* --- tech --- */
.tech-group { display: flex; flex-direction: column; gap: 8px; }
.tech-group-label { font-size: var(--fs-micro); font-weight: var(--fw-bold); margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip  { font-size: var(--fs-micro); padding: 3px 8px; background: var(--chip-bg); border: 1px solid var(--chip-line); }

/* --- education --- */
.edu-body  { display: flex; flex-direction: column; gap: 5px; }
.edu-title { margin: 0; font-size: var(--fs-lead); font-weight: var(--fw-bold); }
.edu-meta  { margin: 0; font-size: var(--fs-body); }

/* --- footer --- */
footer   { margin-top: 24px; text-align: center; }
footer p { margin: 0; font-size: var(--fs-micro); }

/* --- responsive: collapse 3-col grid to 1 col --- */
@media (max-width: 760px) {
  .cv {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "profile"
      "links"
      "experience"
      "tech"
      "other-exp"
      "edu"
      "pubs";
  }
  .header    { flex-direction: column; align-items: flex-start; }
  .meta      { text-align: left; }
  .job-title { font-size: var(--fs-body); font-weight: var(--fw-bold); }
  .job-org   { font-size: var(--fs-body); }
}