/* =====================================================================
   RED EARTH DEVELOPMENTS — Brand System "Strata"
   Shared tokens + primitives for all rebrand pages
   ===================================================================== */

/* NOTE: the live pages override these colours page-locally (v6 cool palette, declared in each
   page's <style> and in pathway.css) — edit colours THERE, not here. This file owns the
   geometry tokens. Cormorant Garamond was removed 5 Aug: nothing renders it.
   FONTS: self-hosted since 6 Aug — the @font-face rules live in fonts.css, which every page
   loads BEFORE this file. No third-party font request, per privacy.html. */

:root{
  /* ---- Earth palette ---- */
  --terra:        #C33C26;   /* primary ochre / terracotta */
  --terra-deep:   #9E2E1C;   /* deep clay / oxblood */
  --terra-soft:   #DD6A52;   /* warm clay accent */
  --terra-pale:   #F0C3B6;   /* tint */

  --char:         #211D1A;   /* warm near-black */
  --char-2:       #342E29;   /* raised dark surface */
  --ink:          #2A2521;   /* body text on light */

  --paper:        #FBF8F2;   /* lightest page */
  --sand:         #F2EADD;   /* warm page bg */
  --bone:         #E8DECF;   /* panel / card */
  --bone-2:       #DACBB4;   /* deeper bone */
  --stone:        #8A7C6C;   /* muted text */

  --line:         rgba(33,29,26,.14);
  --line-strong:  rgba(33,29,26,.28);
  --line-on-dark: rgba(247,240,230,.16);

  /* ---- Type ---- */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Figtree', system-ui, -apple-system, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;

  /* ---- Geometry ---- */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --shadow-soft: 0 1px 2px rgba(33,29,26,.05), 0 12px 32px -16px rgba(33,29,26,.18);
  --shadow-lift: 0 2px 4px rgba(33,29,26,.06), 0 30px 60px -28px rgba(33,29,26,.34);

  --maxw: 1280px;
}

*{ box-sizing: border-box; }
html{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body{
  margin:0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--sand);
  font-size: 17px;
  line-height: 1.6;
}

/* ---- Type primitives ---- */
.eyebrow{
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--terra);
}
.eyebrow--stone{ color: var(--stone); }
.eyebrow--bone{ color: var(--bone-2); }

h1,h2,h3,h4{ font-family: var(--serif); font-weight: 400; line-height: 1.04; margin:0; letter-spacing: -.01em; }
.display{ font-size: clamp(48px, 7vw, 104px); font-weight: 400; }
.serif-italic{ font-style: italic; }

p{ margin:0 0 1em; text-wrap: pretty; }
a{ color: inherit; }

/* ---- Strata motif: stacked earth-layer bands ---- */
.strata{ display:flex; flex-direction:column; width:100%; }
.strata > span{ display:block; }
.strata-rule{
  height: 3px; width: 100%;
  background: linear-gradient(90deg,
    var(--terra-deep) 0 18%,
    var(--terra) 18% 44%,
    var(--terra-soft) 44% 64%,
    var(--bone-2) 64% 82%,
    var(--char) 82% 100%);
}

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--sans); font-weight: 600; font-size: 15px;
  letter-spacing:.01em;
  padding: 14px 26px; border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none; transition: all .18s ease;
}
.btn--solid{ background: var(--terra); color: var(--paper); }
.btn--solid:hover{ background: var(--terra-deep); }
.btn--ghost{ background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover{ border-color: var(--ink); background: rgba(33,29,26,.04); }
.btn--on-dark{ background: var(--paper); color: var(--char); }
.btn--on-dark:hover{ background: var(--sand); }

.arrow{ transition: transform .18s ease; }
.btn:hover .arrow{ transform: translateX(3px); }

::selection{ background: var(--terra); color: var(--paper); }