/* ══════════════════════════════════════════════════════════════════
   base.css — the design tokens and the site nav, in one place.

   Loaded by index.html and by everything in /articles/. It exists because
   the nav was duplicated between the sales page and the article template,
   and a menu rendered from two copies eventually becomes two menus.

   Load order matters: link this BEFORE a page's own styles, so a page can
   override what it needs and so its rules can use the tokens.

   ── Why --gold is #D8B327 ────────────────────────────────────────
   Because that is what is in the logo. Seven pages used to carry
   #C9A020 in their own inline :root, and brand-kit.html documented that
   value, but sampling the logo artwork settles it: 77% of every gold
   pixel in TravelFeePlaybook_logo.png is #D9B327, one unit off this
   token and twenty-six units off #C9A020.

   All pages now use this value. The mark is the only asset that cannot
   be corrected in a stylesheet, so the stylesheets match the mark.

   (index.html used to carry a comment saying its gold was "inherited
   from the splash page". The splash page used #C9A020, so that comment
   was wrong. It has been removed rather than propagated.)
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* ── brand core — matches the logo artwork, see above ── */
  --black:#0d0d0d;
  --gold:#D8B327;
  --green:#3D7A3A;
  --chalk:#FAFAF8;
  --gray:#4A4A4A;
  --font-d:'Bebas Neue',sans-serif;
  --font-s:'Permanent Marker',cursive;
  --font-b:'Inter',sans-serif;

  /* ── derived for long-form reading ── */
  --chalk-2:#F0EFEA;
  --ink:#1A1A16;
  --ink-soft:#57564E;
  --line:#DCDAD1;
  --gold-ink:#7E6410;   /* #D8B327 darkened for AA text on chalk — do not use raw gold on light */

  --prose:40rem;
  --wide:62rem;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-b);font-size:1.0625rem;line-height:1.7;
  color:var(--ink);background:var(--chalk);
}
img{max-width:100%;display:block}

/* ── button ────────────────────────────────────────────────────── */
.btn{
  display:inline-block;font-family:var(--font-d);font-size:1.3rem;letter-spacing:.1em;
  background:var(--gold);color:var(--black);text-decoration:none;
  padding:.95rem 2.1rem;border:none;border-radius:0;cursor:pointer;
  transition:background .15s,color .15s;
}
.btn:hover{background:var(--chalk);color:var(--black)}

/* ── site nav ──────────────────────────────────────────────────────
   One definition for every page that has a nav. In-page anchors are
   written per page, because they resolve differently from /articles/
   than from the root. */
.nav{background:var(--black);border-bottom:1px solid rgba(216,179,39,.22);position:relative;z-index:20}
.nav__in{max-width:var(--wide);margin-inline:auto;padding:.7rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.nav__brand{font-family:var(--font-d);font-size:1.05rem;letter-spacing:.14em;color:var(--gold);
  text-decoration:none;white-space:nowrap}
.nav__links{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.nav__links a{font-family:var(--font-d);font-size:1rem;letter-spacing:.12em;text-transform:uppercase;
  color:#B4B2A9;text-decoration:none;transition:color .15s}
.nav__links a:hover{color:var(--gold)}
.nav__links a[aria-current="page"]{color:var(--gold)}
.nav__links .btn{font-size:1rem;padding:.42rem 1.1rem;color:var(--black)}
.nav__links .btn:hover{color:var(--black)}

@media(max-width:640px){
  .nav__in{justify-content:center;gap:.55rem;padding:.65rem 1rem}
  .nav__links{gap:1rem;justify-content:center;width:100%}
  .nav__links a{font-size:.9rem;letter-spacing:.09em}
}