/* ==========================================================================
   ASIA EXPEDITIONS — DESIGN SYSTEM
   Font: Inter (bold display headings, tight tracking)
   Palette: Warm Sand (#FAF7F2), Jade (#095C55), Terracotta (#B8532F),
            Desert Gold (#D9822B), Earth Brown (#3B2A1F) for contrast sections
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..900;1,14..32,300..900&display=swap');

:root {
  --color-sand: #FAF7F2;
  --color-sand-muted: #F2EDE4;
  --color-jade: #095C55;
  --color-jade-hover: #074741;
  --color-jade-light: #E7F3F1;
  --color-terracotta: #B8532F;
  --color-gold: #D9822B;
  --color-brown: #3B2A1F;
  --color-brown-card: #4A3628;
  --border-subtle: #E8E2D5;
  --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  font-family: var(--font-inter);
  background-color: var(--color-sand);
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

body {
  overflow-x: hidden;
  font-family: var(--font-inter) !important;
  background-color: var(--color-sand);
}

/* Headings: Inter bold with tight tracking (previous preferred style) */
.font-serif, .font-display, .font-sans {
  font-family: var(--font-inter) !important;
}
h1.font-serif, h2.font-serif, h1, h2 {
  letter-spacing: -0.03em;
}
h3.font-serif, h4.font-serif {
  letter-spacing: -0.015em;
}

/* Cards */
.clean-card, .authentic-card, .pillar-card, .exp-card {
  background: #FFFFFF;
  border: 1px solid var(--border-subtle);
  border-radius: 1.5rem;
  box-shadow: 0 2px 10px -2px rgba(59, 42, 31, 0.06), 0 1px 3px rgba(59, 42, 31, 0.04);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.clean-card:hover, .authentic-card:hover, .pillar-card:hover, .exp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -10px rgba(9, 92, 85, 0.14), 0 4px 12px -2px rgba(184, 83, 47, 0.08);
  border-color: var(--color-jade);
}

/* Rounded Icon Containers & Team Avatars */
.icon-box {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.member-avatar {
  transition: transform 0.3s, box-shadow 0.3s;
}
.clean-card:hover .member-avatar {
  transform: scale(1.05);
  box-shadow: 0 0 0 4px var(--color-jade);
}

/* Complexity Bars */
.complexity-bar { display: flex; gap: 3px; align-items: center; }
.complexity-segment { width: 16px; height: 4px; border-radius: 2px; background-color: #E8E2D5; }
.complexity-segment.active { background-color: var(--color-jade); }

/* Accordion chevron (used by app.js modal) */
details[open] .accordion-chevron { transform: rotate(180deg); }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #FAF7F2; }
::-webkit-scrollbar-thumb { background: #D9D1C3; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-jade); }

/* Sticky filter bars sit under the 72px sticky header */
.sticky.top-20 { top: 72px !important; }