/* ============================================
   DESIGN SYSTEM — Grayscale Palette
   ============================================ */

:root {
  /* Color hierarchy (text) */
  --color-primary:     #111111;
  --color-secondary:   #444444;
  --color-tertiary:    #777777;
  --color-quiet:       #aaaaaa;

  /* Backgrounds */
  --bg-page:           #fafafa;
  --bg-card:           #f0f0f0;

  /* Borders */
  --border-color:      #e0e0e0;

  /* Spacing — fluid */
  --gap-tiny:    clamp(0.375rem, 1vw,   0.5rem);
  --gap-small:   clamp(0.75rem,  2vw,   1rem);
  --gap-medium:  clamp(1rem,     2.5vw, 1.5rem);
  --gap-large:   clamp(1.5rem,   4vw,   3rem);
  --gap-section: clamp(2.5rem,   4.5vw, 6rem);
  --gap-page:    clamp(3rem,     8vw,   8rem);

  /* Type — fluid */
  --font-tiny:     clamp(0.7rem,   1.4vw,  0.75rem);
  --font-small:    clamp(0.8rem,   1.6vw,  0.875rem);
  --font-body:     clamp(0.9rem,   1.8vw,  1rem);
  --font-lead:     clamp(1rem,     2vw,    1.125rem);
  --font-subtitle: clamp(1.1rem,   2.2vw,  1.25rem);
  --font-heading:  clamp(1.25rem,  3vw,    1.75rem);
  --font-subhero:  clamp(1.75rem,  4vw,    2.5rem);
  --font-hero:     clamp(2rem,     5vw,    3.5rem);

  /* Content width */
  --readable-width: 95%;

  /* Misc */
  --page-max-width:   900px;
  --border-radius:    6px;
  --transition-speed: 0.2s ease;
}


/* ============================================
   RESET
   ============================================ */

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  font-size: var(--font-body);
  line-height: 1.7;
  color: var(--color-secondary);
  background-color: var(--bg-page);
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }


/* ============================================
   LAYOUT
   ============================================ */

.site {
  max-width: min(90%, var(--page-max-width));
  margin: 0 auto;
  padding: var(--gap-page) 5vw;
}

section {
  margin-bottom: var(--gap-section);
}

section:last-child {
  margin-bottom: 0;
}


/* ============================================
   BASE ELEMENTS
   ============================================ */

h1, h2, h3 {
  color: var(--color-primary);
  font-weight: 400;
  line-height: 1.7;
}

h1 {
  font-size: var(--font-hero);
  letter-spacing: -0.03em;
  font-weight: 700;
}

h2 {
  font-size: var(--font-heading);
  letter-spacing: -0.02em;
  margin-bottom: var(--gap-small);
}

p {
  margin-bottom: var(--gap-small);
}


/* ============================================
   REUSABLE CLASSES
   ============================================ */

/* Subtitle — muted secondary line under a heading */
.subtitle {
  display: block;
  font-size: var(--font-subtitle);
  font-weight: 400;
  color: var(--color-tertiary);
  letter-spacing: -0.01em;
  margin-top: 0.25rem;
}

/* Section label — uppercase, small, tracked */
.section-label {
  font-size: clamp(0.875rem, 2vw, 1rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-tertiary);
  margin-bottom: var(--gap-large);
}

/* Measure — constrain text width for readability */
.measure {
  max-width: var(--readable-width);
}

/* Horizontal rule */
.divider {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: var(--gap-section) 0;
}

/* Dash list — items with bullet prefix */
.dash-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-tiny);
  padding-left: 2.25rem;    /* ← indent the whole list */
}

.dash-list li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;              /* ← bullet-to-text spacing */
  font-size: var(--font-small);
  color: var(--color-tertiary);
}

.dash-list li::before {
  content: '•';
  flex-shrink: 0;
  color: var(--color-quiet);
}

/* Link row — horizontal list of links */
.link-row {
  display: flex;
  gap: var(--gap-medium);
  margin-top: var(--gap-medium);
  font-size: var(--font-body);
}

.link-row a {
  color: var(--color-quiet);
  transition: color var(--transition-speed);
}

.link-row a:hover {
  color: var(--color-primary);
}

/* Button — outlined, minimal */
.btn {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  font-size: var(--font-small);
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background-color var(--transition-speed), color var(--transition-speed);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.btn:hover {
  background-color: var(--color-primary);
  color: var(--bg-page);
}


/* ============================================
   HERO — only structural override
   ============================================ */

.hero {
  margin-bottom: var(--gap-section);
}

.hero h1 {
  margin-bottom: var(--gap-tiny);
}

.hero p {
  font-size: var(--font-lead);
  margin-top: var(--gap-medium);
}