/* ============================================================
   Catalyst•Wayfare — Site-level layout primitives.
   Shared by all directions. Each direction adds its own bespoke
   stylesheet on top of this.
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }

/* ---------- LAYOUT ---------- */
.cw-page {
  background: var(--cw-bg);
  color: var(--cw-fg);
  min-height: 100vh;
  font-family: var(--cw-sans);
  font-size: var(--cw-size-base);
  line-height: var(--cw-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.cw-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 56px;
}
.cw-container--narrow { max-width: 880px; }
.cw-container--wide  { max-width: 1480px; }

/* ---------- WORDMARK (the formal Catalyst•Wayfare lockup) ---------- */
.cw-wordmark {
  font-family: var(--cw-wordmark);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cw-fg);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  user-select: none;
}
.cw-wordmark .dot {
  display: inline-block;
  padding: 0 0.32em;
  font-family: var(--cw-sans);
  font-size: 0.6em;
  vertical-align: 0.18em;
  color: var(--cw-fg);
}

/* When the C·W mark is set in Semplicita Ombra, the Ombra cut doesn't
   include the middle-dot glyph — split-render with a sans dot inside. */
.cwm-c, .cwm-w { font-family: var(--cw-wordmark); }
.cwm-dot {
  display: inline-block;
  padding: 0 0.18em;
  font-family: var(--cw-sans);
  font-weight: 400;
  font-size: 0.55em;
  vertical-align: 0.22em;
  color: currentColor;
}

/* ---------- HEADER ---------- */
.cw-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 241, 234, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: var(--cw-rule-soft);
}
.cw-header__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 20px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}
.cw-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}
.cw-nav a {
  font-family: var(--cw-sans);
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--cw-fg-muted);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.cw-nav a:hover,
.cw-nav a[aria-current="page"] {
  color: var(--cw-fg);
  border-bottom-color: var(--cw-fg);
}

/* ---------- BUTTONS ---------- */
.cw-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: var(--cw-teal-900);
  color: var(--cw-fg-invert);
  border: 1px solid var(--cw-teal-900);
  font-family: var(--cw-sans);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.cw-btn:hover { background: var(--cw-teal-700); border-color: var(--cw-teal-700); }
.cw-btn .arrow { transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.cw-btn:hover .arrow { transform: translateX(4px); }

.cw-btn--ghost {
  background: transparent;
  color: var(--cw-fg);
  border-color: var(--cw-fg);
}
.cw-btn--ghost:hover {
  background: var(--cw-fg);
  color: var(--cw-fg-invert);
}
.cw-btn--paper {
  background: var(--cw-paper);
  color: var(--cw-ink);
  border-color: var(--cw-paper);
}
.cw-btn--paper:hover { background: var(--cw-mint); border-color: var(--cw-mint); }

/* ---------- FOOTER ---------- */
.cw-footer {
  border-top: var(--cw-rule);
  padding: 40px 56px 56px;
  background: var(--cw-bg);
}
.cw-footer__inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.cw-footer__col h5 {
  font-family: var(--cw-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cw-fg-muted);
  margin: 0 0 14px 0;
}
.cw-footer__col ul { list-style: none; padding: 0; margin: 0; }
.cw-footer__col li { margin-bottom: 8px; }
.cw-footer__col a {
  font-size: 17px;
  color: var(--cw-fg);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease;
}
.cw-footer__col a:hover { border-bottom-color: var(--cw-fg); }
.cw-footer__bottom {
  max-width: 1320px;
  margin: 48px auto 0;
  padding-top: 24px;
  border-top: var(--cw-rule-soft);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 15px;
  color: var(--cw-fg-soft);
  font-family: var(--cw-sans);
  letter-spacing: 0.02em;
}

/* ---------- DOT DIVIDER ---------- */
.cw-dot-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 64px 0;
}
.cw-dot-divider span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cw-sage);
  display: block;
}

/* ---------- UTILITIES ---------- */
.cw-section { padding: 96px 0; }
.cw-section--tight { padding: 64px 0; }
.cw-section--dark {
  background: var(--cw-teal-900);
  color: var(--cw-fg-invert);
}
.cw-section--dark h1, .cw-section--dark h2, .cw-section--dark h3, .cw-section--dark h4, .cw-section--dark p { color: var(--cw-fg-invert); }
.cw-section--dark .cw-eyebrow { color: var(--cw-fg-invert-muted); }
.cw-section--dark a { color: var(--cw-fg-invert); }

.cw-rule-soft { border-top: var(--cw-rule-soft); }
.cw-rule-full { border-top: var(--cw-rule); }

/* ---------- ANIMATIONS (subtle, documentary, not SaaS-y) ----------
   Design rule: content is readable WITHOUT animations. Each anim is
   purely additive — if the browser pauses it (hidden tab, reduced
   motion, etc.), the page still reads. We achieve this by making the
   base CSS state the visible end state, and only running animations
   via Web Animations API on enter (see cw-anim.js). */

/* Cursor-following sage dot (positioned via JS) */
.cw-cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cw-sage);
  pointer-events: none;
  z-index: 100;
  transform: translate3d(-100px, -100px, 0);
  transition: opacity 240ms ease;
  mix-blend-mode: multiply;
  opacity: 0.55;
}

/* Sage dot that breathes (used in the wordmark dot) — continuous,
   always-on animation. Works fine because it has no class trigger. */
@keyframes cw-breathe {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.15); }
}
.cw-breathe { animation: cw-breathe 4.5s ease-in-out infinite; }

/* Stat scrub: tabular numerals */
.cw-stat-scrub { font-variant-numeric: tabular-nums; }

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .cw-breathe, .cw-cursor-dot { animation: none; display: none; }
}