/* ============================================================
   I.O. Collective Co. — shared styles
   Single source of truth for the palette: edit the :root
   variables here to recolor the entire site.
   Palette: plum is the action color only (buttons, links,
   one flagship surface per page). Sections alternate across
   warm bone paper, deep slate, forest green, and cream accents.
   Page-specific styles live in each page's inline <style> block.
   ============================================================ */

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

:root {
  /* base surfaces */
  --paper: #F7F3EC;        /* warm bone page background */
  --white: #FFFFFF;        /* cards, text on dark */
  --surface: #FBF9F4;      /* subtle card background */
  --border: #E2DCD2;       /* warm lines */

  /* plum — reserved for actions and key brand moments */
  --primary: #472457;      /* buttons, links, primary elements */
  --primary-light: #5F3272;/* hover states */
  --primary-deep: #23102E; /* one dark plum moment per page, max */
  --accent: #8E3B5F;       /* berry — small labels, borders on light */
  --accent-light: #EFC4D2; /* blush — accents on dark plum */

  /* supporting section colors */
  --slate: #232A30;        /* deep charcoal sections */
  --slate-deep: #1B2126;
  --forest: #3E5C48;       /* green sections */
  --forest-deep: #2C4234;
  --cream: #EDE3CB;        /* cream accents — buttons, borders, numerals */
  --cream-deep: #57524A;   /* deep warm greige for text and borders on light */
  --cream-soft: #F5EDDB;   /* light cream tint panels */
  --cream-bright: #F5EDDA; /* cream for text on dark backgrounds */

  /* text */
  --ink: #221D18;          /* warm near-black headings and body */
  --muted: #6B635C;        /* warm gray secondary text */

  --shadow-card: 0 1px 2px rgba(34,29,24,0.05), 0 18px 36px -22px rgba(34,29,24,0.28);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
}

/* NAV */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: var(--paper); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5%; height: 64px; isolation: isolate;
}
.nav-logo { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 600; color: var(--ink); text-decoration: none; letter-spacing: 0.02em; }
.nav-logo span { color: var(--primary); }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { font-size: 13px; color: var(--muted); text-decoration: none; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-cta { font-size: 13px; font-weight: 500; color: var(--white); background: var(--primary); padding: 9px 20px; border-radius: 4px; text-decoration: none; transition: background 0.2s; white-space: nowrap; }
.nav-cta:hover { background: var(--primary-light); }
.nav-check { display: none; }
.nav-burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; }
.nav-burger span { width: 22px; height: 2px; background: var(--ink); display: block; transition: 0.2s; }

/* BUTTONS */
.btn-primary { font-size: 14px; font-weight: 500; padding: 12px 26px; background: var(--primary); color: var(--white); border: none; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; }
.btn-primary:hover { background: var(--primary-light); }
.btn-outline { font-size: 13px; font-weight: 500; padding: 11px 22px; background: transparent; color: var(--primary); border: 1px solid var(--primary); border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; transition: background 0.2s; }
.btn-outline:hover { background: rgba(71,36,87,0.06); }

/* SECTION HEADINGS
   .section-title font-size and margin are set per page.
   Eyebrows carry a short rule for a designed, prominent opener. */
.section-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; color: var(--primary); text-transform: uppercase; margin-bottom: 12px; }
.section-eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; opacity: 0.5; flex-shrink: 0; }
.section-title { font-family: 'Cormorant Garamond', serif; font-weight: 400; color: var(--ink); line-height: 1.2; }

/* TEXTURE + DIMENSION
   Layer onto dark or light sections to break flat color blocks. */
.tex-dots { background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1.4px); background-size: 22px 22px; }
.tex-dots-ink { background-image: radial-gradient(rgba(34,29,24,0.06) 1px, transparent 1.4px); background-size: 20px 20px; }
.tex-lines { background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 12px); }

/* MOBILE NAV */
@media (max-width: 768px) {
  .nav-links { display: flex; flex-direction: column; position: fixed; top: 64px; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--border); padding: 6px 5% 16px; gap: 14px; max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
  .nav-check:checked ~ .nav-links { max-height: 340px; overflow-y: auto; padding-top: 16px; }
  .nav-burger { display: flex; }
  .nav-logo { font-size: 17px; flex-shrink: 0; }
}