/**
 * Pathway Labs — shared site chrome (v2 site, June 2026).
 *
 * Nav, footer, buttons, section primitives. Built entirely on tokens.css —
 * no raw values except documented opacity tints. Load order:
 *   tokens.css → site-motion.css → site-chrome.css → page styles.
 *
 * Used by: home.html, news.html, contact.html.
 */

* { box-sizing: border-box; }
/* No global scroll-behavior: smooth. In-page anchor clicks are smooth-scrolled
   in JS (site-motion.js) instead, so that arriving at a #fragment from another
   page is always an instant jump straight to the bookmark - never an animated
   scroll down from the top. */
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  background: var(--color-bone);
  color: var(--color-ink);
  font-size: var(--text-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* Focus ring: bluex, per DESIGN.md (coral is action, not attention) */
:focus-visible {
  outline: 2px solid var(--color-bluex);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-3xl); }

/* ── Skip link ─────────────────────────────────────────────────────── */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-bone); color: var(--color-ink);
  padding: var(--space-md) var(--space-lg); border-radius: 0 0 var(--radius-md) 0;
  font-weight: var(--weight-semibold);
}
.skip-link:focus { left: 0; }

/* ── Top nav ───────────────────────────────────────────────────────── */
nav.top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(14, 18, 64, 0.94); /* ink @ 94% */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--color-on-ink);
  border-bottom: 1px solid rgba(236, 233, 222, 0.10); /* bone hairline @ 10% */
}
nav.top .bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-xl);
  max-width: 1280px; margin: 0 auto;
  padding: var(--space-base) var(--space-3xl);
}
nav.top .brand {
  display: flex; align-items: center; gap: var(--space-sm);
  font-weight: var(--weight-bold); font-size: 18px; letter-spacing: -0.02em;
  flex: 0 0 auto;
}
nav.top ul {
  display: flex; gap: var(--space-2xl);
  list-style: none; margin: 0; padding: 0;
  font-size: var(--text-body-sm);
  color: rgba(236, 233, 222, 0.72);
}
nav.top ul a { padding: var(--space-sm) 0; transition: color var(--motion-fast) var(--ease-pathway); }
nav.top ul a:hover { color: var(--color-on-ink); }
nav.top ul a[aria-current="page"] {
  color: var(--color-on-ink);
  border-bottom: 2px solid var(--color-coral);
}
nav.top .cta {
  background: var(--color-coral);
  color: var(--color-on-coral);
  padding: 10px var(--space-lg);
  border-radius: var(--radius-md);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  transition: background var(--motion-fast) var(--ease-pathway),
              color var(--motion-fast) var(--ease-pathway),
              transform var(--motion-fast) var(--ease-pathway);
}
nav.top .cta:hover { background: var(--color-coral-deep); color: var(--color-on-ink); }
nav.top .cta:active { transform: translateY(1px); }

/* Mobile nav */
nav.top .nav-toggle {
  display: none;
  background: transparent; border: 1px solid rgba(236, 233, 222, 0.28);
  color: var(--color-on-ink);
  width: 40px; height: 40px; border-radius: var(--radius-md);
  cursor: pointer; align-items: center; justify-content: center;
}
@media (max-width: 920px) {
  nav.top .nav-toggle { display: inline-flex; }
  nav.top ul {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--color-ink); /* fully opaque — sheet must occlude hero */
    box-shadow: var(--shadow-overlay);
    border-bottom: 1px solid rgba(236, 233, 222, 0.10);
    padding: var(--space-sm) var(--space-3xl) var(--space-lg);
    display: none;
  }
  nav.top.menu-open ul { display: flex; }
  nav.top ul a { display: block; padding: var(--space-md) 0; font-size: var(--text-body); }
  nav.top .cta { display: none; }
  nav.top.menu-open ul li:last-child { margin-top: var(--space-sm); }
}

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  padding: 14px var(--space-xl);
  border-radius: var(--radius-lg);
  font-size: 15px; font-weight: var(--weight-semibold);
  cursor: pointer; border: none; font-family: inherit;
  transition: background var(--motion-fast) var(--ease-pathway),
              color var(--motion-fast) var(--ease-pathway),
              border-color var(--motion-fast) var(--ease-pathway),
              transform var(--motion-fast) var(--ease-pathway);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }

/* Primary: coral fill, ink text — 5.17:1, AA pass. One per viewport. */
.btn-primary { background: var(--color-coral); color: var(--color-on-coral); }
.btn-primary:hover { background: var(--color-coral-deep); color: var(--color-on-ink); }

/* Outline on dark surfaces */
.btn-outline-dark {
  background: transparent; color: var(--color-on-ink);
  border: 1px solid rgba(236, 233, 222, 0.45);
}
.btn-outline-dark:hover { border-color: var(--color-on-ink); background: rgba(236, 233, 222, 0.08); }

/* Secondary on light surfaces */
.btn-secondary {
  background: var(--color-bone); color: var(--color-ink);
  border: 1px solid rgba(14, 18, 64, 0.35);
}
.btn-secondary:hover { background: var(--color-bone-2); }

/* ── Section primitives ────────────────────────────────────────────── */
section.block { padding: var(--space-7xl) 0; }
section.block.paper { background: var(--color-bone-2); }
section.block.dark { background: var(--color-ink); color: var(--color-on-ink); }

.eyebrow {
  font-size: var(--text-eyebrow);
  letter-spacing: 0.28em; text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--color-bluex);
  margin-bottom: var(--space-lg);
}
.dark .eyebrow, .on-dark .eyebrow { color: var(--color-coral-soft); }

section.block h2 {
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.08; letter-spacing: -0.03em;
  font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-lg); max-width: 820px;
}
section.block h2 em { font-style: normal; color: var(--color-coral); }
section.block .lead {
  font-size: var(--text-body-lg); line-height: 1.5;
  max-width: 720px;
  color: rgba(14, 18, 64, 0.62);
  margin: 0 0 var(--space-4xl);
}
section.block.dark .lead { color: rgba(236, 233, 222, 0.75); }

/* ── Cards ─────────────────────────────────────────────────────────── */
.card {
  background: var(--color-bone-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
}
.card-dark {
  background: var(--color-ink-2);
  color: var(--color-on-ink);
  border: 1px solid rgba(236, 233, 222, 0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
}

/* ── Inline text link ──────────────────────────────────────────────── */
.text-link {
  font-weight: var(--weight-semibold);
  color: var(--color-coral-deep);
}
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.dark .text-link, .on-dark .text-link { color: var(--color-coral-soft); }

/* ── Footer ────────────────────────────────────────────────────────── */
footer.site {
  background: var(--color-ink);
  color: rgba(236, 233, 222, 0.68);
  padding: var(--space-5xl) 0 var(--space-3xl);
  border-top: 1px solid rgba(236, 233, 222, 0.10);
  font-size: var(--text-body-sm);
}
footer.site .row {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-4xl);
}
footer.site h2 {
  color: var(--color-on-ink);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.2em; text-transform: uppercase;
  margin: 0 0 var(--space-base); font-weight: var(--weight-semibold);
}
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site ul li { padding: var(--space-xs) 0; }
footer.site ul a:hover { color: var(--color-on-ink); }
footer.site .brand-col .brand {
  display: flex; align-items: center; gap: var(--space-sm);
  color: var(--color-on-ink); font-weight: var(--weight-bold);
  font-size: 18px; margin-bottom: var(--space-base);
}
footer.site .brand-col p { max-width: 320px; margin: 0 0 var(--space-lg); }
footer.site .meta {
  display: flex; justify-content: space-between; gap: var(--space-base);
  flex-wrap: wrap;
  margin-top: var(--space-3xl); padding-top: var(--space-xl);
  border-top: 1px solid rgba(236, 233, 222, 0.10);
  font-size: var(--text-eyebrow);
}

@media (max-width: 920px) {
  .container { padding: 0 var(--space-xl); }
  nav.top .bar { padding: var(--space-md) var(--space-xl); }
  footer.site .row { grid-template-columns: 1fr 1fr; }
  section.block { padding: var(--space-6xl) 0; }
}
@media (max-width: 560px) {
  footer.site .row { grid-template-columns: 1fr; }
}