/* ============================================================
   KAIROS — design tokens
   Ported from handoff/shared/tokens.css
   Editorial-first, un-euphemistic, typographic.
   Pure black and pure gray are forbidden.
   ============================================================ */

:root {
  /* ---------- Palette ---------- */
  --bone:        #F6F3EE;   /* base / page ground */
  --bone-2:      #EFEBE3;   /* card fill */
  --bone-3:      #E4DFD4;   /* deeper wash */
  --ink:         #1F2A24;   /* deep forest — primary type + dark sections */
  --ink-2:       #4A544E;   /* secondary type */
  --ink-3:       #8A8F87;   /* tertiary / meta */
  --hairline:    #D8D2C6;   /* rules */
  --moss:        #5D6E5A;   /* accent — moss */
  --copper:      #B48A5C;   /* accent — ochre / warm gold */
  --oxide:       #7A4A38;   /* accent — oxidized copper */
  --white:       #FFFFFF;   /* only the Resources crisis strip */

  /* ---------- Typography ---------- */
  --f-display:   'Fraunces', 'GT Sectra', 'Freight Big', 'Playfair Display', Georgia, serif;
  --f-sans:      'Inter', 'Söhne', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --f-mono:      'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-wordmark:  'Cinzel', 'Optima', 'Albertus', var(--f-display);

  /* ---------- Scale ---------- */
  --t-mega:      clamp(56px, 9vw, 128px);
  --t-hero:      clamp(40px, 6vw, 88px);
  --t-h1:        clamp(32px, 4.4vw, 64px);
  --t-h2:        clamp(24px, 2.8vw, 40px);
  --t-h3:        20px;
  --t-body:      17px;
  --t-small:     14px;
  --t-micro:     11px;

  /* ---------- Space ---------- */
  --gutter:      clamp(20px, 4vw, 56px);
  --section-y:   clamp(80px, 12vh, 160px);

  /* ---------- Radius ---------- */
  --r-card:      8px;
  --r-inner:     4px;
  --r-pill:      999px;

  /* ---------- Motion ---------- */
  --ease-quiet:  cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   BASE RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: var(--t-body);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.005em;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
::selection { background: var(--ink); color: var(--bone); }

/* Focus rings — moss ring, 2px offset (RECOMMENDATIONS.md accessibility item) */
:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Skip-to-content — on every page, per the handoff README */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--bone);
  padding: 12px 20px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 0 0 var(--r-inner) 0;
}
.skip-link:focus {
  left: 0;
}

/* ============================================================
   TYPE UTILITIES
   ============================================================ */
.display { font-family: var(--f-display); font-weight: 300; letter-spacing: -0.025em; line-height: 1.02; }
.serif   { font-family: var(--f-display); }
.mono    { font-family: var(--f-mono); font-variant-ligatures: none; }
.meta    { font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); letter-spacing: 0.02em; }

/* ============================================================
   SECTION-HEADER PATTERN (sitewide, the ONLY one)
   Small mono uppercase moss eyebrow with a leading dash rule.
   Renders "— KAIROS". Never followed by a display-serif h2.
   ============================================================ */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--moss);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
}
.eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: currentColor;
  display: inline-block;
  flex-shrink: 0;
}

/* ============================================================
   CARD SYSTEM — three voices
   ============================================================ */
.card-light,
.card-dark {
  border-radius: var(--r-card);
  transition: border-color .2s var(--ease-quiet);
}
.card-light {
  background: var(--bone-2);
  border: 1px solid var(--hairline);
  color: var(--ink);
}
.card-light:hover,
.card-light:focus-within { border-color: var(--ink); }

.card-dark {
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--bone);
}

.card-callout {
  background: var(--bone-2);
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--moss);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  color: var(--ink);
}

/* ============================================================
   NAV — one system, two surfaces.

   .nav--dark   transparent overlay in bone, for pages opening on a
                dark band (home hero, .page-masthead).
   .nav--light  cream sticky bar in ink, for pages opening on bone
                (Shop, Sources, the six policy pages).
   .nav--mark-only  home page — phi mark alone, no wordmark, because
                the hero states the name at full scale.

   Shared geometry lives on .nav; only colour and positioning differ.
   The descriptor is not carried in the nav on any page.
   ============================================================ */
.nav {
  z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: clamp(18px, 2.6vh, 26px) var(--gutter);
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  line-height: 1;
  flex-shrink: 0;
}
.nav-phi {
  height: 26px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.nav-wordmark {
  font-family: var(--f-wordmark);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1;
}
/* Home only — the hero carries the identity at full scale, so the nav
   drops the brand entirely and the links use the whole width. */
.nav--mark-only .nav-brand { display: none; }
.nav--mark-only .nav-links { margin-left: 0; }

.nav-links {
  display: flex; align-items: center;
  flex-wrap: nowrap;
  /* Items distribute evenly across the available track rather than
     bunching at the right edge. */
  justify-content: space-between;
  flex: 1 1 auto;
  margin-left: clamp(24px, 4vw, 64px);
  gap: clamp(12px, 1.6vw, 28px);
}
.nav-links a {
  /* Doubled from 14px. Fluid so it never overflows: at 28px the row needs
     ~700px of track, which is fine to 900px but overflows a 768px tablet. */
  font-size: clamp(17px, 1.95vw, 28px);
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: 0.005em;
  white-space: nowrap;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color .2s var(--ease-quiet), border-color .2s var(--ease-quiet);
}
/* Active state carries a moss underline, not colour alone (WCAG 1.4.1). */
.nav-links a.active { border-bottom-color: var(--moss); }

/* ---------- DARK surface: transparent overlay on a dark band ---------- */
.nav--dark {
  /* Fixed to the viewport, not absolute: .hero and .page-masthead both
     create their own positioning/stacking contexts, which would trap an
     absolutely-positioned child. Fixed also keeps the nav reachable on
     long pages instead of scrolling away. */
  position: fixed; top: 0; left: 0; right: 0;
  background: transparent;
  transition: background .3s var(--ease-quiet), border-color .3s var(--ease-quiet);
  border-bottom: 1px solid transparent;
}
/* Once scrolled past the dark band, .nav--dark picks up a cream bar so the
   links stay legible over bone content. Toggled by /static/nav.js. */
.nav--dark.is-scrolled {
  background: rgba(246,243,238,.88);
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  border-bottom-color: var(--hairline);
}
.nav--dark.is-scrolled .nav-brand,
.nav--dark.is-scrolled .nav-wordmark { color: var(--ink); }
.nav--dark.is-scrolled .nav-phi { filter: none; }
.nav--dark.is-scrolled .nav-links a { color: var(--ink-2); }
.nav--dark.is-scrolled .nav-links a:hover,
.nav--dark.is-scrolled .nav-links a.active { color: var(--ink); }
.nav--dark .nav-brand,
.nav--dark .nav-wordmark { color: var(--bone); }
/* Source PNG is ink-black; invert to bone for the dark field. */
.nav--dark .nav-phi { filter: brightness(0) invert(1) opacity(.92); }
.nav--dark .nav-links a { color: rgba(246,243,238,.62); }
.nav--dark .nav-links a:hover,
.nav--dark .nav-links a.active { color: var(--bone); }

/* ---------- LIGHT surface: cream sticky bar ---------- */
.nav--light {
  position: sticky; top: 0;
  background: rgba(246,243,238,.82);
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  border-bottom: 1px solid var(--hairline);
}
.nav--light .nav-brand,
.nav--light .nav-wordmark { color: var(--ink); }
.nav--light .nav-links a { color: var(--ink-2); }
.nav--light .nav-links a:hover,
.nav--light .nav-links a.active { color: var(--ink); }

/* Breakpoint moved off 900px: the header needed ~903px to fit on one line,
   so links silently wrapped in the 900–905px band. */
@media (max-width: 680px) {
  .nav { flex-direction: column; align-items: flex-start; gap: 14px; }
  .nav-links {
    justify-content: flex-start; flex-wrap: wrap;
    row-gap: 10px; margin-left: 0; gap: 18px;
  }
  .nav-links a { font-size: 16px; }
}

/* ============================================================
   FOOTER — one continuous compliance row, 13px minimum
   ============================================================ */
.footer {
  padding: 18px var(--gutter);
  border-top: 1px solid var(--hairline);
  margin-top: 120px;
  font-size: 13px;
}
.footer-compliance {
  display: flex; flex-wrap: wrap;
  gap: 6px 28px;
  /* Top-aligned, not centred: the .eco mark is 64px tall and the address runs
     three lines, so centring would drop the policy links to the middle of the
     row. Everything now hangs from the same top edge. */
  align-items: flex-start;
}
/* Address behaves as a final menu item: 'Kairos' sits on the links' baseline,
   the street and city hang beneath it. */
.footer-end {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  margin-left: auto;           /* pushes address + mark to the right */
}
.footer-address {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-style: normal;          /* <address> italicises by default */
  text-align: right;
}
.footer-address-name { color: var(--ink-2); }
/* Matches the footer links: same face, same 13px, same tracking. Only the
   colour steps back so the address reads as secondary to the link row. */
.footer-address-line {
  font-family: inherit;
  font-size: 13px;
  letter-spacing: normal;
  color: var(--ink-3);
  line-height: 1.5;
}
.footer-ecomark { display: block; flex-shrink: 0; line-height: 0; }
.footer-ecomark img { display: block; }

@media (max-width: 680px) {
  /* Stack: links wrap, then address and mark go left-aligned beneath them. */
  .footer-end { margin-left: 0; width: 100%; }
  .footer-address { text-align: left; }
}
.footer-compliance a {
  color: var(--ink-2);
  transition: color .15s var(--ease-quiet);
}
.footer-compliance a:hover,
.footer-compliance a:focus { color: var(--ink); }

/* ============================================================
   PAGE MASTHEAD — full-bleed dark forest band
   ============================================================ */
.page-masthead {
  background: var(--ink);
  color: var(--bone);
  /* Top padding clears the transparent overlay nav that sits on this band. */
  padding: clamp(120px, 17vh, 210px) clamp(24px, 5vw, 56px) clamp(56px, 8vh, 112px);
  width: 100%;
}
.page-masthead-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px 48px;
}
.page-masthead h1 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(64px, 11vw, 148px);
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--bone);
  margin: 0;
  text-wrap: balance;
}
@media (max-width: 720px) {
  .page-masthead-inner {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 32px;
  }
}

/* Disclosure card — only on pages carrying no affiliate content */
.page-masthead-disclosure {
  background: var(--bone-2);
  border-left: 2px solid var(--moss);
  border-radius: 0 var(--r-inner) var(--r-inner) 0;
  padding: 16px 22px;
  min-width: 200px;
  max-width: 280px;
  align-self: end;
}
.page-masthead-disclosure .label {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--moss);
  font-weight: 500;
  margin: 0 0 8px;
}
.page-masthead-disclosure .lines {
  font-family: var(--f-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}
.page-masthead-disclosure .lines .row { display: block; }

/* ============================================================
   PROSE COLUMN — the standard editorial body
   ============================================================ */
.prose {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(48px, 8vh, 88px) var(--gutter) 0;
}
.prose p {
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 1.1em;
  text-wrap: pretty;
}
.prose p strong { color: var(--ink); font-weight: 500; }
.prose a:not(.btn) {
  color: var(--copper);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size .3s var(--ease-quiet);
}
.prose a:not(.btn):hover,
.prose a:not(.btn):focus { background-size: 100% 1px; }

/* ============================================================
   REFERENCE CHIPS — FTC substantiation trail
   ============================================================ */
sup.ref, .ref {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  line-height: 0;
  top: -0.35em;
  position: relative;
  padding: 0 2px;
  border-bottom: 1px dotted var(--ink-3);
  transition: color .15s var(--ease-quiet), border-color .15s var(--ease-quiet);
  white-space: nowrap;
}
sup.ref a { color: inherit; }
sup.ref:hover, sup.ref:focus-within,
.ref:hover, .ref:focus-within {
  color: var(--oxide);
  border-bottom-color: var(--oxide);
}

/* Reference tooltip — rendered by /static/refs.js */
.ref-tooltip {
  position: fixed;
  z-index: 1000;
  max-width: 340px;
  padding: 12px 14px;
  background: var(--bone);
  color: var(--ink-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-inner);
  box-shadow: 0 12px 32px -8px rgba(20, 31, 26, .22),
              0 4px 12px -4px rgba(20, 31, 26, .14);
  font-family: var(--f-sans);
  font-size: 13px;
  line-height: 1.55;
  display: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s var(--ease-quiet), transform .18s var(--ease-quiet);
}
.ref-tooltip.is-open { display: block; opacity: 1; transform: none; }
.ref-tooltip[data-placement="below"] { transform: translateY(-4px); }
.ref-tooltip[data-placement="below"].is-open { transform: none; }
.ref-tooltip-body { color: var(--ink-2); }
.ref-tooltip-link {
  display: inline-block;
  margin-left: 4px;
  color: var(--copper);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(180, 138, 92, .4);
  padding-bottom: 1px;
  white-space: nowrap;
  transition: border-color .15s var(--ease-quiet);
}
.ref-tooltip-link:hover { border-bottom-color: var(--copper); color: var(--ink); }
.ref-tooltip-empty { color: var(--ink-3); font-style: italic; }

/* ============================================================
   TAG SYSTEM — Compliance Brief §1.3. Two tags only.
   ============================================================ */
.tag {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--r-inner);
  background: var(--ink);
  color: var(--bone);
  vertical-align: 1px;
}
.tag--affiliate {
  background: var(--oxide);
  color: var(--bone);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px;
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  transition: background .3s var(--ease-quiet), color .3s var(--ease-quiet);
}
.btn:hover { background: var(--ink); color: var(--bone); }
.btn-solid { background: var(--ink); color: var(--bone); }
.btn-solid:hover { background: transparent; color: var(--ink); }

/* ============================================================
   REUSABLE
   ============================================================ */
.container { padding: 0 var(--gutter); }
.section { padding: var(--section-y) var(--gutter); }
.rule { height: 1px; background: var(--hairline); border: 0; margin: 0; }

/* Scroll reveal — only hides when JS is on; above-fold reveals instantly */
.js-motion .reveal:not(.in) { opacity: 0; transform: translateY(16px); }
.js-motion .reveal { transition: opacity .7s var(--ease-quiet), transform .7s var(--ease-quiet); }
.js-motion .reveal.in { opacity: 1; transform: none; }
.reveal { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-motion .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}