/* ============================================================
   Guardians — shared site chrome
   Used by index.html, platform.html, privacy.html, 404.html.
   Page-specific styles (sections, hero, video, diagrams, forms,
   CTA buttons) stay inline in each page so we don't accidentally
   couple unrelated layouts together.
   ============================================================ */

:root {
  --forest: #2F4033;
  --forest-deep: #1A2A20;
  --ink: #1A1F1B;
  --paper: #F5F2EC;        /* warm editorial off-white */
  --paper-2: #ECE7DC;      /* slightly deeper for tonal shifts */
  --paper-3: #E3DDCD;      /* deeper still — used by platform Section 6 */
  --rule: rgba(26, 31, 27, 0.18);
  --rule-soft: rgba(26, 31, 27, 0.10);
  --muted: rgba(26, 31, 27, 0.62);
  --on-dark: #E9E4D6;
  --on-dark-muted: rgba(233, 228, 214, 0.62);
  --rule-dark: rgba(233, 228, 214, 0.18);
  --accent: oklch(0.62 0.08 60);   /* warm clay — used sparingly */

  /* Olympus City tokens — used by platform Section 2 mock only */
  --olympus-blue: #1A2C5B;
  --elysian-gold: #C9A84C;

  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;

  --measure: 36rem;        /* readable column */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
img, svg { display: block; max-width: 100%; }

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

/* Focus states — never suppressed */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap--narrow { max-width: 44rem; }
section.bleed { padding: clamp(5rem, 12vw, 9rem) 0; }
section.bleed--tight { padding: clamp(3rem, 7vw, 5rem) 0; }
.dark { background: var(--ink); color: var(--on-dark); }
.dark--forest { background: var(--forest-deep); color: var(--on-dark); }
.paper-2 { background: var(--paper-2); }
.paper-3 { background: var(--paper-3); }

/* ---------- Type ---------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.08;
  text-wrap: balance;
}
.display {
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.display--xl {
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: 1.0;
  letter-spacing: -0.025em;
}
.heading {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  line-height: 1.1;
}
.eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}
.dark .eyebrow { color: var(--on-dark-muted); }
.lead {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.45;
  font-style: italic;
  color: var(--ink);
}
.body p {
  max-width: var(--measure);
  margin: 0 0 1.1em;
}
.body p:last-child { margin-bottom: 0; }

/* Pull quote — used at the close of long-form sections */
.pull {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  line-height: 1.18;
  font-style: italic;
  max-width: 28ch;
  margin: clamp(3rem, 7vw, 5rem) 0 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--accent);
  text-wrap: balance;
}
.pull--two { max-width: 36ch; }
.pull--two span { display: block; }
.dark .pull { color: var(--on-dark); }

/* ---------- Header ---------- */
header.site {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(245, 242, 236, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--rule-soft);
}
.site-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.wordmark {
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-size: 20px;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  color: #1A2C5B;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.dark .wordmark, .wordmark.on-dark { color: #FAFAF8; }
.nav {
  display: flex;
  gap: 1.75rem;
  font-size: 0.88rem;
  color: var(--ink);
}
.nav a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.2s ease;
}
.nav a:hover { border-color: var(--ink); }
.nav a.is-current { border-color: var(--ink); font-weight: 700; }
@media (max-width: 640px) { .nav { display: none; } }

/* ---------- Modal (Get in touch) ---------- */
.modal {
  position: fixed; inset: 0;
  background: rgba(10, 12, 10, 0.8);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 60;
}
.modal.is-open { display: flex; }
.modal-card {
  background: var(--ink);
  color: var(--on-dark);
  width: 100%;
  max-width: 32rem;
  padding: 2.25rem;
  position: relative;
  border: 1px solid var(--rule-dark);
}
.modal-card h3 {
  font-family: var(--serif);
  font-size: 1.6rem;
  margin: 0 0 0.5rem;
  color: var(--on-dark);
}
.modal-card > p {
  color: var(--on-dark-muted);
  font-size: 0.95rem;
  margin: 0 0 1.25rem;
}
.modal-close {
  position: absolute; top: 1rem; right: 1rem;
  background: transparent; border: none;
  color: var(--on-dark);
  font-size: 1.4rem; cursor: pointer;
  line-height: 1;
  padding: 0.25rem 0.5rem;
}

/* ---------- Footer ---------- */
footer.site {
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  padding: 3rem 0 2rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.footer-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.footer-grid a { color: var(--ink); text-decoration: none; }
.footer-grid a:hover { text-decoration: underline; }
.footer-meta { font-size: 0.78rem; }

/* ---------- Placeholder tag ---------- */
.placeholder-tag {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--paper-2);
  padding: 0.15rem 0.45rem;
  border-radius: 2px;
  border: 1px solid var(--rule-soft);
}
.dark .placeholder-tag {
  color: var(--on-dark-muted);
  background: rgba(255,255,255,0.05);
  border-color: var(--rule-dark);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}