/* ===============================================================
   The Barrera Foundation — Shared Styles
   barrera-styles.css
   =============================================================== */

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

:root {
  --bg:           #13100d;
  --bg-mid:       #1a1510;
  --bg-card:      #1e1912;
  --bg-light:     #f5f0e8;
  --cream:        #f0e8d8;
  --cream-soft:   #c8b89a;
  --terracotta:   #d4725a;
  --terra-light:  #e8917c;
  --gold:         #c9a84c;
  --gold-dim:     rgba(201,168,76,0.18);
  --border:       rgba(201,168,76,0.18);
  --border-soft:  rgba(240,232,216,0.08);
  --muted:        #6e6357;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Josefin Sans', sans-serif;
  background: var(--bg);
  color: var(--cream);
  overflow-x: hidden;
}

/* ── NOISE TEXTURE ── */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 0;
}

/* ════════════════════════════════
   NAV
════════════════════════════════ */
nav {
  position: relative;
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 52px;
  height: 132px;
  background: rgba(19,16,13,0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
  transition: background 0.4s ease;
}

.nav-logo {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none;
}

.nav-logo-mark img { max-width: 400px; height: auto; }

.nav-logo-text { display: flex; flex-direction: column; gap: 1px; }

.nav-logo-text .the {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.9rem; font-weight: 300; font-style: italic;
  letter-spacing: 0.2em; color: var(--terracotta); line-height: 1;
}

.nav-logo-text .name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem; font-weight: 400;
  letter-spacing: 0.12em; color: var(--cream); line-height: 1;
}

.nav-logo-text .sub {
  font-size: 0.5rem; font-weight: 200;
  letter-spacing: 0.35em; color: var(--gold);
  text-transform: uppercase; line-height: 1; margin-top: 2px;
}

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

.nav-links a {
  font-size: 0.6rem; font-weight: 200;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--cream-soft); text-decoration: none;
  transition: color 0.25s;
}

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

.nav-cta {
  font-size: 0.58rem !important; font-weight: 300 !important;
  letter-spacing: 0.2em !important;
  border: 1px solid var(--gold-dim) !important;
  padding: 8px 18px !important; border-radius: 2px;
  color: var(--gold) !important;
  transition: background 0.25s, color 0.25s !important;
}

.nav-cta:hover { background: var(--gold) !important; color: var(--bg) !important; }

.nav-hamburger {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; background: none; border: none; padding: 4px;
}

.nav-hamburger span {
  display: block; width: 24px; height: 1px; background: var(--cream-soft);
  transition: all 0.3s;
}

/* ════════════════════════════════
   SECTION SHARED
════════════════════════════════ */
section { position: relative; z-index: 1; }

.section-inner { max-width: 1100px; margin: 0 auto; padding: 0 52px; }

.section-label {
  font-size: 0.55rem; font-weight: 200; letter-spacing: 0.4em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 12px; display: block;
}

.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 300; line-height: 1.2;
  color: var(--cream); margin-bottom: 18px;
}

.section-title em { font-style: italic; color: var(--terracotta); }

.section-rule { width: 56px; height: 1px; background: linear-gradient(to right, var(--gold), transparent); margin-bottom: 28px; }

.section-body {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem; font-weight: 300; line-height: 1.9;
  color: var(--cream-soft);
}

/* ════════════════════════════════
   BUTTONS
════════════════════════════════ */
.btn-primary {
  display: inline-block;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.85rem; font-weight: 300; letter-spacing: 0.25em;
  text-transform: uppercase; text-decoration: none;
  background: var(--terracotta); color: var(--cream);
  padding: 14px 32px; border-radius: 2px;
  transition: background 0.3s, transform 0.2s;
  border: 1px solid var(--terracotta);
  cursor: pointer;
}

.btn-primary:hover { background: var(--terra-light); transform: translateY(-1px); }

.btn-outline {
  display: inline-block;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.85rem; font-weight: 300; letter-spacing: 0.25em;
  text-transform: uppercase; text-decoration: none;
  background: transparent; color: var(--cream);
  padding: 14px 32px; border-radius: 2px;
  border: 1px solid var(--border);
  transition: border-color 0.3s, color 0.3s, transform 0.2s;
}

.btn-outline:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-1px); }

/* ════════════════════════════════
   FOOTER
════════════════════════════════ */
footer {
  background: var(--bg);
  border-top: 1px solid var(--border-soft);
  padding: 36px 52px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}

.footer-left { font-size: 0.55rem; font-weight: 200; letter-spacing: 0.2em; color: var(--muted); }
.footer-left strong { font-weight: 300; color: var(--cream-soft); letter-spacing: 0.1em; }
.footer-center { font-family: 'Cormorant Garamond', serif; font-size: 0.9rem; font-weight: 300; font-style: italic; color: var(--muted); }
.footer-right { display: flex; gap: 24px; }
.footer-right a { font-size: 0.52rem; font-weight: 200; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color 0.25s; }
.footer-right a:hover { color: var(--cream-soft); }

/* ════════════════════════════════
   ANIMATIONS
════════════════════════════════ */
@keyframes fadeUp   { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeDown { from { opacity:0; transform:translateY(-14px); } to { opacity:1; transform:translateY(0); } }
@keyframes expand   { from { transform:scaleX(0); opacity:0; } to { transform:scaleX(1); opacity:1; } }
@keyframes scrollPulse { 0%,100% { opacity:0.3; } 50% { opacity:0.8; } }

/* ════════════════════════════════
   SCROLL REVEAL
════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.85s ease, transform 0.85s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1, .d1 { transition-delay: 0.1s; }
.reveal-delay-2, .d2 { transition-delay: 0.2s; }
.reveal-delay-3, .d3 { transition-delay: 0.3s; }
.reveal-delay-4, .d4 { transition-delay: 0.4s; }
.reveal-delay-5, .d5 { transition-delay: 0.5s; }

/* ════════════════════════════════
   RESPONSIVE — NAV & GLOBAL
════════════════════════════════ */
@media (max-width: 960px) {
  nav { padding: 0 28px; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .section-inner { padding: 0 28px; }
  footer { flex-direction: column; text-align: center; padding: 28px; }
  #mobile-nav ul { margin-top: 140px; }
}