/* McKinley Group — design tokens (single source of truth)
   Feel: Jade Mills Estates luxury editorial. Identity: McKinley's own forest-green accent.
   Two fonts only. Near-monochrome warmed by one accent. */

:root {
  /* palette — near-monochrome, warmed; NEVER pure #000 */
  --white:      #ffffff;
  --paper:      #f4f1ea;   /* warm off-white panel */
  --champagne:  #e4dfd8;   /* eyebrow / soft text on dark */
  --ink:        #1c1a18;   /* primary text + dark bands */
  --ink-2:      #2a2724;
  --green:      #2c3426;   /* McKinley signature forest-green accent (his own, not Jade's bronze) */
  --green-deep: #1f2419;
  --grey:       #64615b;   /* meta / secondary (AA contrast on white + paper) */
  --line:       rgba(28,26,24,0.12);
  --line-light: rgba(255,255,255,0.18);

  /* type */
  --serif: 'Italiana', 'Cormorant Garamond', Georgia, serif;
  --sans:  'Red Hat Display', 'Poppins', system-ui, -apple-system, sans-serif;  /* McKinley brand fonts */
  --display-sans: 'Red Hat Display', system-ui, sans-serif;  /* bold hero over video */

  /* scale */
  --hero:    clamp(2.7rem, 7.2vw, 5.6rem);
  --h2:      clamp(2rem, 4.6vw, 3.4rem);
  --h3:      clamp(1.4rem, 2.4vw, 1.9rem);
  --body:    1.0625rem;          /* 17px */
  --cap:     0.6875rem;          /* 11px tracked micro-caps */

  /* rhythm */
  --band:    clamp(4.5rem, 9vw, 8.5rem);  /* vertical band padding */
  --gutter:  clamp(1.25rem, 5vw, 5rem);   /* horizontal page gutter */
  --ease:    cubic-bezier(.22,.61,.36,1);
}
/* Phones: 72px above and below every band stacked to 144px of blank between sections (JJ 9/28) */
@media (max-width: 600px) { :root { --band: 3.4rem; } }

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

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  font-family: var(--sans);
  font-size: var(--body);
  font-weight: 300;
  line-height: 1.65;
  color: rgba(28,26,24,0.82);
  background: var(--white);
  letter-spacing: 0.01em;
  overflow-x: clip;
}

h1, h2, h3, .serif { font-family: var(--serif); font-weight: 400; color: var(--ink); line-height: 1.04; }

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

/* the connective signature: 11px tracked uppercase micro-caps */
.eyebrow {
  font-family: var(--sans);
  font-size: var(--cap);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--green);
}
.eyebrow--light { color: var(--champagne); }