/* ─────────────────────────────────────────────────────────────
 * Haoxuan Jiang — Portfolio Design System
 * Tokens (v1)
 * Derived from the "Minimal" home-page direction.
 * All tokens are exposed as CSS custom properties on :root and as
 * tw-like utility classes (.hj-*) for quick consumption.
 * ───────────────────────────────────────────────────────────── */

:root {
  /* ── Color · Surfaces ─────────────────────────────────────── */
  --hj-paper:        #FAF9F6;  /* Workshop — warm off-white paper */
  --hj-paper-2:      #F0EDE5;  /* secondary surface, image placeholders */
  --hj-paper-3:      #E5DFD3;  /* tertiary surface, hover tints */

  /* ── Color · Ink ──────────────────────────────────────────── */
  --hj-ink:          #2A2620;  /* primary text — warm near-black */
  --hj-ink-2:        #3F3A33;  /* secondary text, body copy */
  --hj-ink-muted:    rgba(42, 38, 32, 0.70); /* de-emphasized body */
  --hj-ink-dim:      rgba(42, 38, 32, 0.55); /* meta, captions, dates */
  --hj-ink-faint:    rgba(42, 38, 32, 0.30); /* in-text separators */
  --hj-rule:         rgba(42, 38, 32, 0.14); /* horizontal rules */
  --hj-rule-strong:  #2A2620;                /* emphatic rules */

  /* ── Color · Accent (single, restrained) ──────────────────── */
  --hj-accent:       #C45A2E;                 /* Clay terracotta */
  --hj-accent-line:  rgba(196, 90, 46, 0.40); /* underline state */
  --hj-accent-tint:  rgba(196, 90, 46, 0.07); /* hover bg */
  --hj-accent-soft:  rgba(196, 90, 46, 0.22); /* outlines */

  /* ── Typography · Families ────────────────────────────────── */
  --hj-font-sans:    "Inter", "Neue Haas Grotesk Text", Helvetica, Arial, sans-serif;
  --hj-font-display: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --hj-font-mono:    "JetBrains Mono", "Geist Mono", ui-monospace, SFMono-Regular, monospace;

  /* ── Typography · Weights ─────────────────────────────────── */
  --hj-weight-regular: 400;
  --hj-weight-medium:  500;

  /* ── Typography · Scale (named for *role*, not size) ──────── */
  --hj-text-display-size: 44px;  --hj-text-display-line: 1.08;  --hj-text-display-track: -0.02em;
  --hj-text-lede-size:    19px;  --hj-text-lede-line:    1.45;  --hj-text-lede-track:    -0.005em;
  --hj-text-title-size:   19px;  --hj-text-title-line:   1.25;  --hj-text-title-track:   -0.01em;
  --hj-text-body-size:    14px;  --hj-text-body-line:    1.60;  --hj-text-body-track:    0;
  --hj-text-small-size:   13px;  --hj-text-small-line:   1.55;  --hj-text-small-track:   0;
  --hj-text-meta-size:    13px;  --hj-text-meta-line:    1.55;  --hj-text-meta-track:    0;
  --hj-text-micro-size:   12px;  --hj-text-micro-line:   1.55;  --hj-text-micro-track:   0.01em;
  --hj-text-label-size:   12px;  --hj-text-label-line:   1.55;  --hj-text-label-track:   0.08em; /* uppercase */
  --hj-text-mono-size:    12px;  --hj-text-mono-line:    1.55;  --hj-text-mono-track:    0;

  /* ── Spacing · 4px base unit ──────────────────────────────── */
  --hj-space-1:  4px;
  --hj-space-2:  8px;
  --hj-space-3:  12px;
  --hj-space-4:  16px;
  --hj-space-5:  20px;
  --hj-space-6:  24px;
  --hj-space-7:  32px;
  --hj-space-8:  48px;
  --hj-space-9:  64px;
  --hj-space-10: 80px;
  --hj-space-11: 96px;
  --hj-space-12: 128px;

  /* ── Layout · Sizing ──────────────────────────────────────── */
  --hj-content-max:  640px;          /* primary column width */
  --hj-content-wide: 720px;          /* used sparingly for project detail hero rows */
  --hj-page-pad-x:   24px;           /* gutter on small viewports */
  --hj-page-pad-y:   40px;           /* top padding */
  --hj-page-bottom:  80px;
  --hj-section-gap:  96px;           /* between major sections */
  --hj-block-gap:    24px;           /* between adjacent blocks within a section */

  /* ── Border · Radius ─────────────────────────────────────── */
  --hj-radius-xs: 2px;   /* thumbs, chips */
  --hj-radius-sm: 4px;
  --hj-radius-md: 6px;

  /* ── Border · Width ──────────────────────────────────────── */
  --hj-border-thin: 1px;

  /* ── Motion ──────────────────────────────────────────────── */
  --hj-ease:        cubic-bezier(0.2, 0.7, 0.3, 1);
  --hj-dur-fast:    .12s;
  --hj-dur-base:    .18s;
  --hj-dur-slow:    .28s;

  /* ── Z-index ─────────────────────────────────────────────── */
  --hj-z-nav: 10;
  --hj-z-overlay: 100;
}

/* ─────────────────────────────────────────────────────────────
 * Base / reset (just enough)
 * ───────────────────────────────────────────────────────────── */
html, body {
  margin: 0; padding: 0;
  background: var(--hj-paper);
  color: var(--hj-ink);
  font-family: var(--hj-font-sans);
  font-size: var(--hj-text-body-size);
  line-height: var(--hj-text-body-line);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
em, .hj-italic {
  font-family: var(--hj-font-display);
  font-style: italic;
  font-weight: var(--hj-weight-regular);
}

/* ─────────────────────────────────────────────────────────────
 * Type role classes
 * ───────────────────────────────────────────────────────────── */
.hj-display {
  font-family: var(--hj-font-sans);
  font-weight: var(--hj-weight-medium);
  font-size: var(--hj-text-display-size);
  line-height: var(--hj-text-display-line);
  letter-spacing: var(--hj-text-display-track);
  text-wrap: balance;
}
.hj-lede {
  font-size: var(--hj-text-lede-size);
  line-height: var(--hj-text-lede-line);
  letter-spacing: var(--hj-text-lede-track);
  color: var(--hj-ink-2);
}
.hj-title {
  font-weight: var(--hj-weight-medium);
  font-size: var(--hj-text-title-size);
  line-height: var(--hj-text-title-line);
  letter-spacing: var(--hj-text-title-track);
}
.hj-body  { font-size: var(--hj-text-body-size);  line-height: var(--hj-text-body-line); color: var(--hj-ink-2); }
.hj-small { font-size: var(--hj-text-small-size); line-height: var(--hj-text-small-line); color: var(--hj-ink-2); }
.hj-meta  { font-size: var(--hj-text-meta-size);  line-height: var(--hj-text-meta-line);  color: var(--hj-ink-dim); }
.hj-micro { font-size: var(--hj-text-micro-size); line-height: var(--hj-text-micro-line); color: var(--hj-ink-dim); }
.hj-label {
  font-size: var(--hj-text-label-size);
  line-height: var(--hj-text-label-line);
  letter-spacing: var(--hj-text-label-track);
  text-transform: uppercase;
  color: var(--hj-ink-dim);
  font-weight: var(--hj-weight-medium);
}
.hj-mono {
  font-family: var(--hj-font-mono);
  font-size: var(--hj-text-mono-size);
  line-height: var(--hj-text-mono-line);
  color: var(--hj-ink-dim);
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────
 * Layout helpers
 * ───────────────────────────────────────────────────────────── */
.hj-page {
  min-height: 100vh;
  padding: var(--hj-page-pad-y) var(--hj-page-pad-x) var(--hj-page-bottom);
  display: flex; flex-direction: column; align-items: center;
}
.hj-col      { width: 100%; max-width: var(--hj-content-max); }
.hj-col-wide { width: 100%; max-width: var(--hj-content-wide); }
.hj-rule     { border-top: var(--hj-border-thin) solid var(--hj-rule); }

/* ─────────────────────────────────────────────────────────────
 * Inline & link primitives
 * ───────────────────────────────────────────────────────────── */
.hj-link {
  border-bottom: var(--hj-border-thin) solid rgba(27, 27, 26, 0.2);
  padding-bottom: 2px;
  transition: border-color var(--hj-dur-fast) var(--hj-ease);
}
.hj-link:hover { border-bottom-color: var(--hj-ink); }

.hj-link-accent {
  color: var(--hj-accent);
  border-bottom: var(--hj-border-thin) solid var(--hj-accent-line);
  padding-bottom: 2px;
  transition: border-color var(--hj-dur-fast) var(--hj-ease);
}
.hj-link-accent:hover { border-bottom-color: var(--hj-accent); }

.hj-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--hj-accent);
  vertical-align: middle;
}

/* ─────────────────────────────────────────────────────────────
 * Project row — the load-bearing component of the home page
 * ───────────────────────────────────────────────────────────── */
.hj-row {
  display: block;
  padding: var(--hj-space-6) 0;
  border-top: var(--hj-border-thin) solid var(--hj-rule);
  transition: background var(--hj-dur-fast) var(--hj-ease),
              padding-left var(--hj-dur-base) var(--hj-ease);
  cursor: pointer;
}
.hj-row + .hj-row { border-top: var(--hj-border-thin) solid var(--hj-rule); }
.hj-row:last-of-type { border-bottom: var(--hj-border-thin) solid var(--hj-rule); }
.hj-row:hover {
  background: var(--hj-accent-tint);
  padding-left: var(--hj-space-3);
}
.hj-row-grid {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.hj-row-thumb {
  flex: 0 0 92px;
  width: 92px; height: 64px;
  border-radius: var(--hj-radius-xs);
  overflow: hidden;
  background: var(--hj-paper-3);
}
.hj-row-leader {
  flex: 1;
  border-bottom: 1px dotted var(--hj-ink-faint);
  transform: translateY(-4px);
}