/* sinolega v2 — typography layer */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;

  --fs-h1: clamp(2.25rem, 1.5rem + 3.5vw, 4rem);
  --fs-h2: clamp(1.75rem, 1.25rem + 2.5vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1rem + 1.25vw, 1.75rem);
  --fs-lead: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.6875rem;

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.55;
  --lh-loose: 1.7;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-text);
}

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: var(--lh-tight);
  color: var(--color-text);
}

h1 { font-size: var(--fs-h1); font-weight: 500 }
h2 { font-size: var(--fs-h2); font-weight: 600 }
h3 { font-size: var(--fs-h3); font-weight: 600 }

p { line-height: var(--lh-normal) }

.label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-primary);
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--color-muted);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

a { color: var(--color-primary); transition: color .15s }
a:hover { color: var(--color-secondary) }