/* ==========================================================================
   PEREGRINE INDUSTRIES — MAIN CORES (Variables, Resets, Global Typography)
   ========================================================================== */

:root {
  /* Olive Green Family — now used for accents, text, borders */
  --olive:           #6B7A3A;   /* Core brand olive — text, icons, accents */
  --olive-dark:      #4A5828;   /* Deep olive — table headers, accent blocks */
  --olive-deep:      #3A4820;   /* Darkest — strong accents only */
  --olive-mid:       #5A6830;   /* Mid-tone for hover states */
  --olive-light:     #8FA44D;   /* Lighter olive for decorative accents */
  --olive-muted:     #A8B472;   /* Pale olive for subtle elements */

  /* Gold Accent System */
  --gold:            #B8960C;   /* Deep antique gold */
  --gold-warm:       #D4AF37;   /* Classic luxury gold */
  --gold-light:      #E8C96A;   /* Highlight gold */
  --gold-pale:       #F5E9C0;   /* Very pale gold tint */

  /* Neutral Luxury Base — beige/cream used as primary bg and header/footer */
  --cream:           #F5EFE4;   /* Main page background — warm beige */
  --cream-warm:      #EDE5D4;   /* Slightly richer beige — alternating sections */
  --linen:           #E4D9C3;   /* Linen card/tile backgrounds */
  --parchment:       #6B7A3A;   /* Borders → olive for visibility on beige bg */

  /* Dark Text Tones */
  --ink:             #1A1A14;   /* Near-black with warm tint */
  --ink-mid:         #3D3D30;   /* Dark text */
  --text-muted:      #5C5A46;   /* Body text, captions — slightly darker for beige bg */
  --text-light:      #8A8570;   /* Placeholder, subtle labels */

  /* UI Construct Elements */
  --white:           #FFFFFF;
  --border:          rgba(107,122,58,0.25);   /* Olive borders on beige — visible */
  --border-gold:     rgba(184,150,12,0.35);
  --card-bg:         #FAF7F0;   /* Cards on beige bg */
  --section-alt:     #EDE5D4;   /* Alternate section — warm beige */

  /* Header & Footer — premium beige/parchment tones */
  --header-bg:       #F5EFE4;   /* Header scrolled bg — deep olive for contrast */
  --footer-bg:       #F5EFE4;   /* Footer bg — deep rich olive-earth */

  /* Font System Roles */
  --font-hero:       'Fraunces', serif;
  --font-body:       'Jost', sans-serif;
  --font-label:      'Cinzel', serif;
  --font-accent:     'Cormorant', serif;
}

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

html {
  scroll-behavior: initial;
  background-color: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.85;
  overflow-x: hidden;
  background-color: var(--cream);
}

/* Override pull-quote olive to use olive (visible on beige) */

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.4s ease, padding 0.4s ease, background-color 0.4s ease;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Global Typography Scales */
.hero-h1 {
  font-family: var(--font-hero);
  font-size: clamp(54px, 8.5vw, 120px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -2px;
  font-variation-settings: 'opsz' 144;
  color: var(--white);
}

.section-title {
  font-family: var(--font-hero);
  font-size: clamp(38px, 5vw, 68px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--ink);
}

.section-title.light-text {
  color: var(--white);
}

.section-label {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 5px;
  color: var(--gold-warm);
  text-transform: uppercase;
  display: block;
}

.body-text {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--text-muted);
}

.pull-quote {
  font-family: var(--font-accent);
  font-size: 28px;
  font-style: italic;
  font-weight: 300;
  line-height: 1.4;
  color: var(--olive);
}

/* Layout Structural Utilities */
.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px;
}

.whitespace-bleed {
  padding: 140px 0;
}









@media (max-width: 1024px) {
  .container { padding: 0 40px; }
  .whitespace-bleed { padding: 100px 0; }
}

@media (max-width: 768px) {
  .container { padding: 0 24px; }
  .whitespace-bleed { padding: 80px 0; }
}