/*
 * ============================================================
 * SERRA — BASE STYLESHEET
 * ============================================================
 * Shared across all pages. Do not add page-specific rules here.
 *
 * TABLE OF CONTENTS
 * 1. Design Tokens (CSS Variables)
 * 2. Reset & Base
 * 3. Typography Scale
 * 4. Layout Utility
 * 5. Navigation
 * 6. Footer
 * 7. Shared Buttons
 * 8. Reveal Animation System
 * ============================================================
 */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================
   All brand colors, borders, and typography live here.
   Edit these values to change the look site-wide.
   ============================================================ */

:root {

  /* --- Surface Colors --- */
  --sage-ground:    #EDEEE8;  /* page background */
  --contrast-bg:    #7A8C70;  /* sage contrast bands */

  /* --- Brand Colors --- */
  --sage:           #7A8C70;
  --gold:           #A67C3A;

  /* --- Text Colors (light surface) --- */
  --text-primary:   #1C201C;
  --text-body:      #3E433E;
  --text-secondary: #606660;
  --text-ui:        #4A4E4A;
  --text-muted:     #6A6E6A;

  /* --- Text Colors (contrast/sage surface) --- */
  --contrast-text:  #F0F2EE;
  --contrast-body:  #C8D4C4;
  --contrast-gold:  #D4B870;

  /* --- Borders --- */
  --border:          rgba(20, 24, 20, 0.15);   /* standard border */
  --border-light:    rgba(20, 24, 20, 0.08);   /* subtle dividers */
  --border-contrast: rgba(255, 255, 255, 0.18); /* borders on sage bg */

  /* --- Semantic (Financing Deductions only) --- */
  --positive: #3B6D11;
  --negative: #A32D2D;

  /* --- Spacing Scale --- */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  3rem;
  --space-xl:  4.5rem;
  --space-2xl: 6rem;

  /* --- Layout --- */
  --max-width: 1200px;
  --page-gutter: 3rem;

  /* --- Reveal Animation --- */
  --reveal-distance: 14px;
  --reveal-duration: 0.6s;
  --reveal-threshold: 0.08;
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */

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

html {
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  background: var(--sage-ground);
  color: var(--text-primary);
  line-height: 1.6;
}

a { text-decoration: none; }

img, svg { display: block; max-width: 100%; }


/* ============================================================
   3. TYPOGRAPHY SCALE
   ============================================================
   Named roles rather than raw sizes.
   Use these classes when marking up content.
   ============================================================ */

/* Kicker / eyebrow — small all-caps label above headings */
.t-kicker {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
}

/* Micro kicker — even smaller, used in bands and table headers */
.t-micro {
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
}

/* Section label — sage-colored kicker within content sections */
.t-section-label {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage);
  display: block;
}

/* Display heading — largest serif, page titles */
.t-display {
  font-family: 'Cormorant Garamond', serif;
  font-size: 56px;
  font-weight: 300;
  line-height: 1.08;
  color: var(--text-primary);
}

/* Hero heading — standard page h1 */
.t-h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 46px;
  font-weight: 300;
  line-height: 1.15;
  color: var(--text-primary);
}

/* Section heading */
.t-h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  font-weight: 300;
  line-height: 1.25;
  color: var(--text-primary);
}

/* Hero deck — italic serif subheading beneath h1 */
.t-deck {
  font-family: 'Cormorant Garamond', serif;
  font-size: 21px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  color: var(--text-body);
}

/* Body copy — standard prose */
.t-body {
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.8;
}

/* Small body — used in rows, captions, descriptions */
.t-small {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Contrast variants — use on sage/dark backgrounds */
.t-contrast       { color: var(--contrast-text); }
.t-contrast-body  { color: var(--contrast-body); }
.t-contrast-gold  { color: var(--contrast-gold); }


/* ============================================================
   4. LAYOUT UTILITY
   ============================================================ */

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
  width: 100%;
}

/* Full-bleed wrapper that constrains inner content */
.container-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}


/* ============================================================
   5. NAVIGATION
   ============================================================
   Shared across all pages. Sticky, full-width.
   ============================================================ */

nav {
  background: var(--sage-ground);
  border-bottom: 0.5px solid var(--border);
  padding: 1.5rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-wordmark {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
  text-decoration: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  list-style: none;
}

.nav-links a {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-ui);
  text-decoration: none;
  transition: color 0.2s;
}

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

.nav-cta {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  border: 0.5px solid var(--gold);
  background: transparent;
  padding: 10px 22px;
  text-decoration: none;
  transition: background 0.2s;
}

.nav-cta:hover {
  background: rgba(166, 124, 58, 0.07);
}


/* ============================================================
   6. FOOTER
   ============================================================ */

footer {
  background: var(--contrast-bg);
  border-top: 0.5px solid var(--border-contrast);
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2.5rem var(--page-gutter);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
}

.footer-wordmark {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--contrast-text);
  flex-shrink: 0;
}

.footer-disclaimer {
  font-size: 12px;
  color: var(--contrast-body);
  line-height: 1.65;
  max-width: 560px;
}


/* ============================================================
   7. SHARED BUTTONS
   ============================================================
   Three button variants used across the site.
   ============================================================ */

/* Sage outline — primary action on light bg */
.btn-sage {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
  border: 0.5px solid var(--sage);
  background: transparent;
  padding: 15px 32px;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s;
  white-space: nowrap;
}

.btn-sage:hover {
  background: rgba(122, 140, 112, 0.08);
}

/* Ghost — action on contrast/sage bg */
.btn-ghost {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--contrast-text);
  border: 0.5px solid rgba(240, 242, 238, 0.5);
  background: transparent;
  padding: 14px 28px;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.btn-ghost:hover {
  background: rgba(240, 242, 238, 0.08);
  border-color: rgba(240, 242, 238, 0.85);
}

/* Closing CTA — large sage-bordered button at page bottom */
.btn-cta {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
  border: 0.5px solid var(--sage);
  background: transparent;
  padding: 15px 32px;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s;
  flex-shrink: 0;
  white-space: nowrap;
}

.btn-cta:hover {
  background: rgba(122, 140, 112, 0.08);
}


/* ============================================================
   8. REVEAL ANIMATION SYSTEM
   ============================================================
   Elements with .reveal fade + rise in on scroll.
   Delay modifiers: .d1 .d2 .d3 .d4
   JS in serra.js fires the observer and handles above-fold
   hero elements separately (immediate, staggered by delay).
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition:
    opacity  var(--reveal-duration) ease,
    transform var(--reveal-duration) ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.d1 { transition-delay: 0.10s; }
.d2 { transition-delay: 0.20s; }
.d3 { transition-delay: 0.32s; }
.d4 { transition-delay: 0.44s; }