/* ============================================================

   Token names mirror the design source: the `--c-*` shell/surface/text
   ramp comes from the design's THEMES map, the accent from its
   `accentColor` prop. Layout switches that the design computed in JS
   from `window.innerWidth < 900` are expressed here as one media
   query at the same 900px breakpoint.

   Type is driven by a single `--fs-scale` knob (see below) — the
   `--fs-*` steps are the design's raw px sizes multiplied by it, so
   the whole page can be sized up or down from one line.
   ============================================================ */

:root {
  /* ---------- Type scale ----------
     1 = the design's original sizes. Raise for larger text. */
  --fs-scale: 1.15;

  --fs-badge: calc(10.5px * var(--fs-scale));
  --fs-11: calc(11px * var(--fs-scale));
  --fs-12: calc(12px * var(--fs-scale));
  --fs-13: calc(13px * var(--fs-scale));
  --fs-14: calc(14px * var(--fs-scale));
  --fs-15: calc(15px * var(--fs-scale));
  --fs-16: calc(16px * var(--fs-scale));
  --fs-17: calc(17px * var(--fs-scale));
  --fs-18: calc(18px * var(--fs-scale));
  --fs-20: calc(20px * var(--fs-scale));
  --fs-22: calc(22px * var(--fs-scale));

  /* ---------- Accent ----------
     From the design's `accentColor` prop (default #ffa42b).
     The design offers: #1ed760 · #539df5 · #ffa42b · #f3727f */
  --accent: #ffa42b;
  --accent-tx: var(--accent);
  --accent-press: color-mix(in oklab, var(--accent) 78%, #000);

  /* ---------- Dark theme (default) ---------- */
  --c-shell: #000000;
  --c-bg: #121212;
  --c-s1: #181818;
  --c-s2: #1f1f1f;
  --c-line: #252525;
  --c-tx: #ffffff;
  --c-soft: #cbcbcb;
  --c-mut: #b3b3b3;
  --c-fnt: #7c7c7c;
  --c-bd: #4d4d4d;
  --c-track: #252525;
  --bar-mid: #7c7c7c;
  --bar-low: #4d4d4d;
  --hero-a: #1c1c1c;

  /* ---------- Layout — wide (>= 900px) ----------
     Widths that have to hold text track the type scale. */
  --pad: 48px;
  --cardpad: 26px;
  --h1: calc(56px * var(--fs-scale));
  --workcols: 28px 1.6fr 1fr calc(130px * var(--fs-scale));
  --bulletpad: 44px;
  --shellpad: 8px;
  --sidebar-w: 264px;
  --factkey-w: calc(76px * var(--fs-scale));

  --font: "Manrope", "Noto Sans SC", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}

:root[data-theme="light"] {
  --accent-tx: color-mix(in oklab, var(--accent) 68%, #000);

  --c-shell: #dcdcdc;
  --c-bg: #ffffff;
  --c-s1: #f5f5f5;
  --c-s2: #eaeaea;
  --c-line: #e2e2e2;
  --c-tx: #101010;
  --c-soft: #3b3b3b;
  --c-mut: #5f5f5f;
  --c-fnt: #6f6f6f;
  --c-bd: #c9c9c9;
  --c-track: #e8e8e8;
  --bar-mid: #6b6b6b;
  --bar-low: #a3a3a3;
  --hero-a: #f0f0f0;
}

/* ============================================================
   Base
   ============================================================ */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--c-shell);
}

body {
  font-family: var(--font);
  font-size: var(--fs-16);
  color: var(--c-tx);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3 {
  font-weight: 700;
  margin: 0;
}

/* Emphasis inside body copy lifts to primary text colour — the design
   sets `color:var(--c-tx)` on every single <b>. */
b,
strong {
  font-weight: 600;
  color: var(--c-tx);
}

a {
  color: inherit;
  text-decoration: none;
}

::-webkit-scrollbar {
  width: 10px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background: #8c8c8c66;
  border-radius: 9999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-track {
  background: transparent;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Systematic uppercase micro-label used throughout the design. */
.eyebrow {
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-fnt);
}

.sep {
  color: var(--c-fnt);
}

.ta-right {
  text-align: right;
}

/* A 1px hairline divider. */
.rule {
  height: 1px;
  background: var(--c-line);
}

/* ============================================================
   Shell — two panes over a full-height board, footer spanning both
   ============================================================ */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  height: 100dvh;
  width: 100%;
  padding: var(--shellpad);
  overflow: hidden;
  background: var(--c-shell);
  color: var(--c-tx);
}

/* ---------- Sidebar ---------- */

.sidebar {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 12px;
  border-radius: 8px;
  background: var(--c-bg);
  overflow-y: auto;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  font-size: var(--fs-15);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.navlink {
  display: block;
  padding: 10px 12px;
  border-radius: 9999px;
  font-size: var(--fs-14);
  font-weight: 400;
  color: var(--c-mut);
  background: transparent;
  transition: color 120ms, background 120ms;
}

.navlink:hover {
  color: var(--c-tx);
}

.navlink.is-active {
  font-weight: 600;
  color: var(--c-tx);
  background: var(--c-s2);
}

.sidebar__meta {
  margin-top: auto;
  padding: 0 12px;
  font-size: var(--fs-11);
  line-height: 1.6;
  color: var(--c-fnt);
}

/* ---------- Scroll pane ---------- */

.main {
  grid-row: 1;
  position: relative;
  border-radius: 8px;
  background: var(--c-bg);
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* ============================================================
   Top bar
   ============================================================ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px var(--pad);
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}

/* Pill row replaces the sidebar below the breakpoint. */
.topbar__nav {
  display: none;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
}

.pill {
  flex: none;
  padding: 8px 14px;
  border-radius: 9999px;
  font-size: var(--fs-13);
  background: var(--c-s2);
  color: var(--c-tx);
}

.topbar__label {
  display: block;
}

.theme-toggle {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-bd);
  border-radius: 50%;
  background: transparent;
  color: var(--c-mut);
  cursor: pointer;
  transition: color 120ms, border-color 120ms;
}

.theme-toggle:hover {
  color: var(--c-tx);
  border-color: var(--c-tx);
}

.theme-toggle:active {
  transform: scale(0.97);
}

.icon-moon {
  display: none;
}

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

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

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

.hero {
  display: flex;
  align-items: flex-end;
  padding: 60px var(--pad) 32px;
  background: linear-gradient(180deg, var(--hero-a) 0%, var(--c-bg) 100%);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.hero__eyebrow {
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-mut);
}

.hero__name {
  font-size: var(--h1);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--c-tx);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-14);
  color: var(--c-soft);
}

.hero__role {
  font-weight: 700;
  color: var(--c-tx);
}

/* ---------- Primary action ---------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 0 var(--pad) 24px;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 500px;
  background: var(--accent);
  color: #000;
  font-family: inherit;
  font-size: var(--fs-14);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  cursor: pointer;
  transition: transform 120ms cubic-bezier(0.3, 0, 0, 1), background 120ms;
}

.btn-primary:hover {
  transform: scale(1.04);
}

.btn-primary:active {
  transform: scale(0.96);
  background: var(--accent-press);
}

/* ============================================================
   Sections
   ============================================================ */

.section {
  padding: 24px var(--pad) 8px;
}

/* Sections after the first are inset and separated by a rule. */
.section--rule {
  margin: 0 var(--pad);
  padding: 40px 0 8px;
  border-top: 1px solid var(--c-line);
}

.section--last {
  padding-bottom: 64px;
}

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}

.section__title {
  font-size: var(--fs-22);
  letter-spacing: -0.005em;
  color: var(--c-tx);
}

.section__title--solo {
  margin-bottom: 20px;
}

/* ============================================================
   Work — a table that collapses to stacked rows
   ============================================================ */

.worktable__head {
  display: grid;
  grid-template-columns: var(--workcols);
  gap: 0 16px;
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--c-line);
}

.worktable {
  display: flex;
  flex-direction: column;
  margin-top: 6px;
}

.workrow {
  padding: 14px 12px;
  border-radius: 6px;
  transition: background 120ms;
}

.workrow:hover {
  background: var(--c-s2);
}

.workrow__grid {
  display: grid;
  grid-template-columns: var(--workcols);
  gap: 0 16px;
  align-items: baseline;
}

.workrow__num {
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--c-fnt);
}

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

.workrow__company {
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--c-tx);
}

.workrow__role,
.workrow__team,
.workrow__time {
  font-size: var(--fs-13);
  color: var(--c-mut);
}

.workrow__time {
  text-align: right;
}

/* Team and dates fold into one line once the trailing columns drop out. */
.workrow__mobilemeta {
  display: none;
  margin-top: 4px;
  font-size: var(--fs-12);
  color: var(--c-fnt);
}

.bullets {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 12px 0 0;
  padding: 0 0 0 var(--bulletpad);
  max-width: 960px;
  list-style: none;
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--c-soft);
}

.bullets li {
  position: relative;
  padding-left: 16px;
}

.bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-bd);
}

/* ============================================================
   Projects
   ============================================================ */

.projects {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.project {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: var(--cardpad);
  border-radius: 8px;
  background: var(--c-s1);
  transition: background 120ms, box-shadow 120ms;
}

.project:hover {
  background: var(--c-s2);
  box-shadow: rgba(0, 0, 0, 0.3) 0px 8px 8px;
}

.project__head,
.project__body {
  display: flex;
  flex-direction: column;
}

.project__head {
  gap: 14px;
}

.project__body {
  gap: 16px;
}

.project__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.tag-outline {
  padding: 4px 10px;
  border: 1px solid var(--c-bd);
  border-radius: 9999px;
  font-size: var(--fs-badge);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-mut);
}

.project__org {
  font-size: var(--fs-12);
  color: var(--c-fnt);
}

.project__title {
  font-size: var(--fs-18);
  line-height: 1.4;
  color: var(--c-tx);
}

.project__desc {
  margin: 0;
  max-width: 880px;
  font-size: var(--fs-14);
  line-height: 1.7;
  color: var(--c-mut);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  padding: 5px 12px;
  border-radius: 9999px;
  background: var(--c-s2);
  font-size: var(--fs-12);
  color: var(--c-mut);
}

/* ---------- Labelled fact lines ---------- */

.facts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fact {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.fact__k {
  flex: none;
  width: var(--factkey-w);
  padding-top: 2px;
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-fnt);
}

.fact__v {
  flex: 1;
  min-width: 220px;
  font-size: var(--fs-14);
  line-height: 1.65;
  color: var(--c-soft);
}

/* ---------- Outcome tiles ---------- */

/* Always three across — every project reports exactly three outcomes, and
   they read as a set rather than as a wrapping list. */
.metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.metric {
  min-width: 0;
  padding: 14px 16px;
  border-radius: 6px;
  background: var(--c-bg);
}

.metric__v {
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
  color: var(--c-tx);
}

.metric__k {
  margin-top: 4px;
  font-size: var(--fs-12);
  color: var(--c-mut);
}

/* ============================================================
   Cards — stack / skills / capabilities / education / about
   ============================================================ */

.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 22px;
  border-radius: 8px;
  background: var(--c-s1);
}

.card--skills {
  gap: 18px;
}

.card--caps {
  gap: 14px;
}

.card--edu {
  gap: 12px;
}

.card--about {
  gap: 12px;
  justify-content: center;
}

.card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 12px;
}

/* ---------- Proficiency legend + bars ---------- */

.legend {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--fs-11);
  color: var(--c-fnt);
}

.legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend__swatch {
  width: 10px;
  height: 4px;
  border-radius: 9999px;
}

.legend__swatch--hi {
  background: var(--accent);
}

.legend__swatch--mid {
  background: var(--bar-mid);
}

.legend__swatch--low {
  background: var(--bar-low);
}

.skills {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.skill {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.skill__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}

.skill__name {
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--c-tx);
}

.skill__note {
  font-size: var(--fs-12);
  color: var(--c-mut);
}

.bar {
  height: 6px;
  border-radius: 9999px;
  background: var(--c-track);
  overflow: hidden;
}

.bar__fill {
  height: 100%;
  border-radius: 9999px;
}

.bar__fill--hi {
  background: var(--accent);
}

.bar__fill--mid {
  background: var(--bar-mid);
}

.bar__fill--low {
  background: var(--bar-low);
}

/* ---------- Capability list ---------- */

.caps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--c-soft);
}

.caps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.caps__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-s2);
  color: var(--c-mut);
}

.caps__text {
  padding-top: 6px;
}

/* ---------- Education / about ---------- */

.edu__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
}

.edu__name {
  font-size: var(--fs-17);
  font-weight: 700;
  color: var(--c-tx);
}

.edu__major,
.edu__time {
  font-size: var(--fs-13);
  color: var(--c-mut);
}

.edu__line {
  font-size: var(--fs-14);
  line-height: 1.65;
  color: var(--c-soft);
}

.about {
  margin: 0;
  font-size: var(--fs-15);
  line-height: 1.7;
  color: var(--c-soft);
  text-wrap: pretty;
}

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

.footer {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 80px;
  padding: 0 20px;
  border-radius: 8px;
  background: var(--c-s1);
}

.footer__id {
  min-width: 0;
}

.footer__name {
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--c-tx);
}

.footer__meta {
  font-size: var(--fs-12);
  color: var(--c-mut);
}

/* Pushes the address and the button away from the identity block, keeping
   the two of them grouped at the right edge. */
.footer__mail {
  margin-left: auto;
  font-size: var(--fs-13);
  color: var(--c-mut);
  transition: color 120ms;
}

.footer__mail:hover {
  color: var(--c-tx);
}

.mail-btn {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  transition: transform 120ms cubic-bezier(0.3, 0, 0, 1);
}

.mail-btn:hover {
  transform: scale(1.04);
}

/* ============================================================
   Narrow — the design's `narrow = window.innerWidth < 900` branch
   ============================================================ */

@media (max-width: 899px) {
  :root {
    --pad: 18px;
    --cardpad: 18px;
    --h1: calc(38px * var(--fs-scale));
    --workcols: 24px minmax(0, 1fr);
    --bulletpad: 0px;
    --shellpad: 6px;
  }

  .shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    display: none;
  }

  /* Sidebar navigation moves into the sticky top bar. */
  .topbar__nav {
    display: flex;
  }

  .topbar__label {
    display: none;
  }

  /* Team and dates drop out of the grid and reappear as one meta line. */
  .md-only {
    display: none;
  }

  .workrow__mobilemeta {
    display: block;
  }

  /* Text stacks into one left-aligned column, the mail button sits centred
     against it on the right. */
  .footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "id   btn"
      "mail btn";
    align-items: center;
    gap: 2px 14px;
    min-height: 0;
    padding: 12px 14px;
  }

  .footer__id {
    grid-area: id;
  }

  .footer__mail {
    grid-area: mail;
    margin-left: 0;
  }

  .mail-btn {
    grid-area: btn;
    align-self: center;
  }

  /* Keeping all three outcome tiles on one row leaves each about 100px, so
     trim their padding and headline to match. */
  .metric {
    padding: 10px 11px;
  }

  .metric__v {
    font-size: var(--fs-15);
  }

  .metric__k {
    font-size: var(--fs-11);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }

  .main {
    scroll-behavior: auto;
  }
}