/* ============================================
   GLOBAL.CSS — STELLA
   Master stylesheet. All variables live here.
   All pages inherit from this file.
   Change once — updates everywhere.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Lato:wght@300;400&display=swap');

/* ============================================
   MASTER VARIABLES
   ============================================ */

:root {

  /* BACKGROUNDS */
  --color-bg:               #F5F0E8;  /* warm cream — main page background */
  --color-bg-alt:           #EDE8DE;  /* deeper cream — alternating sections */

  /* TEXT */
  --color-text-primary:     #1C1C18;  /* dark charcoal — all headlines and body */
  --color-text-secondary:   #4A3728;  /* warm brown — supporting copy, pull quotes */
  --color-text-muted:       #8A7E6E;  /* muted warm — captions, labels, hints */

  /* BRAND COLORS */
  --color-green:            #1E2D1F;  /* dominant secondary — labels, rules, footer, active states */
  --color-gold:             #9A8456;  /* supporting accent — details within green areas */
  --color-orange:           #C4541A;  /* used sparingly — logo mark only */

  /* BORDERS */
  --color-border:           #D4CABC;  /* section dividers */
  --color-border-alt:       #E0DAD0;  /* lighter dividers inside sections */

  /* FONTS */
  --font-serif:             'Cormorant Garamond', serif;  /* headlines, pull quotes, display */
  --font-sans:              'Lato', sans-serif;           /* body, nav, labels, buttons */

  /* FONT SIZES */
  --size-h1:                44px;   /* hero headline */
  --size-h2:                28px;   /* section headline */
  --size-pull:              20px;   /* pull quotes */
  --size-body:              14px;   /* body text */
  --size-body-sm:           12px;   /* small supporting copy */
  --size-label:             9px;    /* all caps section labels */
  --size-nav:               9px;    /* nav links */

  /* FONT WEIGHTS */
  --weight-light:           300;
  --weight-regular:         400;

  /* LETTER SPACING */
  --tracking-tight:         0.01em;  /* headlines */
  --tracking-normal:        0.03em;  /* body text */
  --tracking-wide:          0.22em;  /* labels and nav */
  --tracking-widest:        0.28em;  /* eyebrow labels */

  /* SPACING */
  --space-section:          52px;   /* section top/bottom padding */
  --space-side:             24px;   /* left/right page padding */
  --space-gap:              24px;   /* gap between elements */
  --space-gap-sm:           16px;   /* small gap */

  /* LAYOUT */
  --max-width:              480px;  /* mobile first max width */

  /* TRANSITIONS */
  --transition:             0.2s ease;
}

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

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-weight: var(--weight-light);
  font-size: var(--size-body);
  line-height: 1.8;
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-normal);
  max-width: var(--max-width);
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
}

ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
button { cursor: pointer; background: none; border: none; font-family: inherit; color: inherit; }

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: var(--weight-light);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

h1 { font-size: var(--size-h1); }
h2 { font-size: var(--size-h2); }

p {
  font-size: var(--size-body);
  line-height: 1.9;
  color: var(--color-text-primary);
}

.section-label {
  display: block;
  font-size: 14px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin-bottom: var(--space-gap);
}

.section-label-light {
  display: block;
  font-size: 14px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin-bottom: var(--space-gap);
}

/* ============================================
   NAVIGATION
   ============================================ */

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px var(--space-side);
  border-bottom: 0.5px solid var(--color-border);
  background: var(--color-bg);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-logo {
  font-family: var(--font-serif);
  font-size: 18px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  font-weight: var(--weight-light);
}

.nav-logo-mark {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--color-green);
  border-radius: 50%;
  margin-left: 3px;
  vertical-align: middle;
  margin-bottom: 3px;
}

.nav-links {
  display: flex;
  gap: 24px;
}

.nav-links a {
  font-size: var(--size-nav);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color var(--transition);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--color-text-primary);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 0.5px;
  background: var(--color-text-muted);
  transition: var(--transition);
}

.nav-mobile {
  display: none;
  flex-direction: column;
  background: var(--color-bg);
  border-bottom: 0.5px solid var(--color-border);
}

.nav-mobile a {
  font-size: var(--size-nav);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 14px var(--space-side);
  border-bottom: 0.5px solid var(--color-border-alt);
  transition: color var(--transition);
}

.nav-mobile a:last-child { border-bottom: none; }
.nav-mobile.open { display: flex; }

@media (max-width: 480px) {
  .nav-links  { display: none; }
  .nav-toggle { display: flex; }
}

/* ============================================
   FOOTER
   ============================================ */

.footer {
  padding: 20px var(--space-side);
  background: var(--color-green);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-logo {
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-weight: var(--weight-light);
}

.footer-note {
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  opacity: 0.4;
}