/* =========================================================================
   PARALLAX THINKING — COLOURS & TYPE
   The five-colour palette is locked. Solar Gold is punctuation only —
   one moment per page. Everything else carries the work.
   ========================================================================= */

/* Webfont setup.
   Both families are served from local brand-supplied variable font files in /fonts.
   - Newsreader: editorial / headings.
   - Hanken Grotesk: body, UI, labels, wordmark.
*/
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/Newsreader-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/Newsreader-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('fonts/HankenGrotesk-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('fonts/HankenGrotesk-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- Palette (locked) ---- */
  --deep-space:        #4A5469;  /* primary dark — type, anchoring, marker fills */
  --solar-gold:        #C49A2C;  /* punctuation only. once per page. */
  --soft-stone:        #F7F5F1;  /* primary light surface — cards, content */
  --pale-lunar:        #8E929E;  /* hairlines, axes, secondary text, marker strokes */
  --off-pale-lunar:    #EAEAEB;  /* site bg — gives Soft Stone something to sit against */

  /* ---- Tonal variants (constrained: ±8% emphasis, ±15% structural) ---- */
  --pale-lunar-emph-8:    #82869199;  /* internal hierarchy within an element family */
  --pale-lunar-struct-15: #A6AAB5;  /* structural lines, secondary ring weights */
  --pale-lunar-light-15:  #777B86;  /* inversion mode: axes on Deep Space backgrounds */
  --deep-space-emph-8:    #424b5e;
  --deep-space-struct-15: #3a4150;

  /* ---- Semantic foreground / surface ---- */
  --fg-1:              var(--deep-space);     /* primary text */
  --fg-2:              var(--pale-lunar);     /* secondary text, captions */
  --fg-3:              var(--pale-lunar-struct-15); /* tertiary, structure-as-type */
  --fg-accent:         var(--solar-gold);     /* used sparingly, punctuation only */

  --surface-page:      var(--off-pale-lunar); /* the canvas behind cards */
  --surface-card:      var(--soft-stone);     /* the card itself */
  --surface-inverse:   var(--deep-space);     /* dark surfaces */
  --fg-on-inverse:     var(--soft-stone);     /* text on Deep Space */
  --fg-on-inverse-2:   var(--pale-lunar-light-15);

  --hairline:          var(--pale-lunar);     /* 1px structural rules */
  --hairline-faint:    var(--pale-lunar-struct-15); /* 0.5px / quadrant midlines */

  /* ---- Typography ---- */
  --font-serif:        'Newsreader', 'Iowan Old Style', 'Apple Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:         'Hanken Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Modular scale — 1.414 ratio, 17px base, baseline = 8px */
  --baseline:          8px;

  --fs-display:        68px;
  --fs-h1:             48px;
  --fs-h2:             34px;
  --fs-h3:             24px;
  --fs-lead:           20px;
  --fs-subhead:        17px;
  --fs-body:           17px;
  --fs-small:          14px;
  --fs-micro:          12px;

  --lh-display:        1.05;
  --lh-h1:             1.1;
  --lh-h2:             1.2;
  --lh-h3:             1.3;
  --lh-lead:           1.5;
  --lh-body:           1.6;
  --lh-small:          1.5;
  --lh-micro:          1.4;

  --tracking-display:  -0.02em;
  --tracking-h1:       -0.018em;
  --tracking-h2:       -0.012em;
  --tracking-h3:       -0.005em;
  --tracking-flat:     0;
  --tracking-small:    0.01em;
  --tracking-caps:     0.18em;   /* eyebrows / micro caps */
  --tracking-caps-wide: 0.22em;

  /* ---- Spacing & grid (8px baseline, 12-col grid, 20px gutter) ---- */
  --grid-cols:         12;
  --grid-gutter:       20px;
  --grid-margin-web:   80px;
  --grid-margin-print: 60px;

  --space-1:           8px;
  --space-2:           16px;
  --space-3:           24px;
  --space-4:           32px;
  --space-5:           40px;
  --space-6:           48px;
  --space-7:           64px;
  --space-8:           80px;
  --space-9:           120px;

  /* ---- Stroke weights ---- */
  --stroke-hair:       0.5px;
  --stroke-rule:       1px;
  --stroke-emphasis:   1.25px;

  /* ---- Radii — the brand is largely angular. Small radius only where UI needs it. ---- */
  --radius-0:          0;
  --radius-xs:         2px;
  --radius-sm:         4px;
  --radius-md:         8px;
  --radius-pill:       999px;

  /* ---- Motion — restrained. Short, eased, never bouncy. ---- */
  --ease-standard:     cubic-bezier(0.2, 0, 0, 1);
  --ease-out:          cubic-bezier(0.16, 1, 0.3, 1);
  --dur-quick:         140ms;
  --dur-base:          220ms;
  --dur-slow:          420ms;

  /* ---- Shadow — used sparingly. Cards earn elevation through grid, not glow. ---- */
  --shadow-none:       none;
  --shadow-card:       0 1px 0 rgba(74, 84, 105, 0.06), 0 8px 24px rgba(74, 84, 105, 0.04);
  --shadow-lift:       0 2px 0 rgba(74, 84, 105, 0.06), 0 14px 36px rgba(74, 84, 105, 0.07);
}

/* =========================================================================
   SEMANTIC TYPOGRAPHY
   Headings = Newsreader, sentence case. Body/UI = Hanken Grotesk.
   No bold body type. No em-dashes. Hierarchy comes from size and typeface
   contrast — not weight.
   ========================================================================= */

html {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display, h1.display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
}

h1, .h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tracking-h1);
  color: var(--fg-1);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-h2);
  color: var(--fg-1);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tracking-h3);
  color: var(--fg-1);
  margin: 0;
}

.lead, p.lead {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--tracking-flat);
  color: var(--fg-1);
}

.italic-lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--fg-1);
}

.subhead {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-subhead);
  line-height: var(--lh-body);
  color: var(--fg-1);
}

p, .body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
}

.small {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: var(--tracking-small);
  color: var(--fg-2);
}

/* Eyebrow / micro caps — Hanken Medium, ALL CAPS, +0.18em–+0.22em */
.eyebrow,
.caps-micro {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-2);
}

.caps-small {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Italic editorial — pull-quotes, subtitles, emphasis (sparingly) */
em, .italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

/* Wordmark — always lowercase Hanken */
.wordmark {
  font-family: var(--font-sans);
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: 0;
  color: var(--fg-1);
}

/* Hairline — Pale Lunar, 1px. Axes and structure live here. */
.hairline {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 0;
}
.hairline-faint {
  border: 0;
  border-top: 0.5px solid var(--hairline-faint);
  margin: 0;
}
.solar-rule {
  /* The single accent moment. One per page. */
  border: 0;
  border-top: 1px solid var(--solar-gold);
  width: 32px;
  margin: 0 0 var(--space-2) 0;
}

/* =========================================================================
   UTILITY HELPERS — used in cards and previews
   ========================================================================= */

.surface-page    { background: var(--surface-page); }
.surface-card    { background: var(--surface-card); }
.surface-inverse { background: var(--surface-inverse); color: var(--fg-on-inverse); }

.fg-1 { color: var(--fg-1); }
.fg-2 { color: var(--fg-2); }
.fg-3 { color: var(--fg-3); }
.fg-accent { color: var(--fg-accent); }
.fg-on-inverse { color: var(--fg-on-inverse); }

/* 12-column grid container */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter);
}

/* Golden split (7:5) — dominant left, supporting right */
.golden-split {
  display: grid;
  grid-template-columns: 7fr 5fr;
  column-gap: var(--grid-gutter);
}