/* ===========================================================================
 * resources/guide-chrome.css
 * Shared chrome for the lead-magnet web pages (landing + read-on-web).
 *
 * Loaded AFTER colors_and_type.css and v2/carte-v2.css. Two jobs:
 *   1. Remap the guides' v1 ground tokens (--carte-*) onto the v2 warm system
 *      so the reading body sits on the same paper/ink as the marketing site —
 *      while EB Garamond (display) and MinervaModern (small-caps) are left
 *      untouched, preserving the document reading register.
 *   2. Provide the exact site masthead (.nav) and colophon (.footer) styles,
 *      copied verbatim from the marketing pages, and hide each guide's own
 *      inline React nav/footer so the shared chrome is the only one shown.
 * =========================================================================== */

:root {
  /* Ground + ink + rules → v2 warm editorial system (site parity) */
  --carte-cream:      var(--paper);      /* warm ivory ground */
  --carte-white:      var(--card);       /* warm card fill */
  --carte-text:       var(--ink);        /* warm near-black body/heading ink */
  --carte-text-muted: var(--ink-2);      /* warm slate secondary */
  --carte-rule:       var(--rule);
  --carte-rule-soft:  var(--rule-soft);
  /* UI/caption sans → IBM Plex Sans (matches site). Display serif + small-caps
     are intentionally NOT remapped: the guides keep EB Garamond + MinervaModern. */
  --carte-font-body:  var(--sans);
  /* Navy surfaces (--carte-navy-deep/-very-deep) and the green accent
     (--carte-accent-green) are already shared with v2 — left as-is. */
}

/* Hide each guide's own React-rendered masthead + colophon; the shell supplies
   the real site chrome around #root. */
#root nav,
#root footer { display: none !important; }

/* ───── MASTHEAD — verbatim from the marketing pages ───── */
.nav {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--rule-soft);
}
.nav-inner { max-width: var(--wide); margin: 0 auto; padding: 14px var(--pad); display: flex; align-items: center; justify-content: space-between; gap: var(--s6); }
.nav-logo { display: flex; align-items: center; min-height: var(--hit); }
.nav-logo img { height: 30px; width: auto; }
.nav-links { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 34px); }
.nav-links a { font-family: var(--sans); font-size: 17px; font-weight: var(--fw-medium); color: var(--ink); opacity: 0.82; padding: 6px 0; min-height: var(--hit); display: inline-flex; align-items: center; transition: opacity var(--dur) var(--ease); position: relative; }
.nav-links a:hover { opacity: 1; }
.nav-links a.current { opacity: 1; }
.nav-links a.current::after { content: ""; position: absolute; left: 0; bottom: 2px; width: 70%; height: 1px; background: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 18px; }
@media (max-width: 940px) { .nav-links, .nav-cta .btn { display: none; } }

/* ───── FOOTER — verbatim from the marketing pages ───── */
.footer { background: var(--paper-3); color: var(--ink-2); border-top: 4px solid var(--brass); }
.footer-inner { max-width: var(--wide); margin: 0 auto; padding: var(--s9) var(--pad) var(--s6); }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s6); padding-bottom: var(--s7); margin-bottom: var(--s7); border-bottom: 1px solid var(--rule); }
.footer-brand { min-width: 0; }
.footer-logo { display: block; height: clamp(34px, 4vw, 48px); width: auto; }
.footer-tag { font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brass-ink); margin: var(--s4) 0 0; }
.footer-cta { font-family: var(--mono); font-size: 16px; font-weight: var(--fw-medium); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); border-bottom: 2px solid var(--brass); padding-bottom: 6px; white-space: nowrap; transition: color var(--dur) var(--ease); }
.footer-cta:hover { color: var(--brass-ink); }
.footer-cta .ar { color: var(--brass-ink); }
.footer-cols { display: flex; flex-wrap: wrap; gap: var(--s8) var(--s9); margin-bottom: var(--s8); }
.footer-col a { display: block; color: var(--ink); font-size: 17px; padding: 7px 0; opacity: 0.82; white-space: nowrap; transition: opacity var(--dur) var(--ease); }
.footer-col a:hover { opacity: 1; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s4); align-items: center; padding-top: var(--s6); border-top: 1px solid var(--rule); }
.footer-meta { font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; color: var(--ink-2); }
.footer-meta .link { color: var(--ink); }
.footer-disclaimer { font-family: var(--mono); font-size: 13px; line-height: 1.6; letter-spacing: 0.02em; color: var(--ink-2); max-width: 80ch; margin: var(--s6) 0 0; padding-top: var(--s5); border-top: 1px solid var(--rule); }
.footer-disclaimer b { font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: 0.08em; color: var(--brass-ink); margin-right: 8px; }
@media (max-width: 620px) { .footer-top { align-items: flex-start; } }