/* TDAT site tokens shared by the field-guide library and all campaign pages. */
:root {
  --ink: #0b0a09;
  --ink2: #121110;
  --panel: #121110;
  --bone: #f4efe7;
  --muted: #a8a297;
  --ember: #e5484d;
  --coral: #e5484d;
  --teal: #e5484d;
  --red: #e5484d;
  --bright: #ff6b4a;
  --line: rgba(244,239,231,.15);
}
img { max-width: 100%; height: auto; }
body { font-family: "Instrument Sans", sans-serif; }
h1, h2, h3, h4, .brand { font-family: "Bricolage Grotesque", sans-serif; }
h1 em, h2 em { font-family: "Instrument Serif", serif; }
h1, h2, h3, p, .brand, .tag, .eyebrow { overflow-wrap: anywhere; }
.hero > *, .grid > *, .steps > *, .banner > * { min-width: 0; max-width: 100%; }
.banner .cta { flex-shrink: 0; white-space: normal; overflow-wrap: anywhere; justify-content: center; text-align: center; }
.banner .tag { color: var(--bone); }
.nav { align-items: center; gap: 16px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; text-decoration: none; line-height: 1.25; }
.brand img { width: 32px; height: 32px; flex: 0 0 32px; }
.cta:not(.secondary), .campaign-capture button { color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid var(--ember); outline-offset: 5px;
}
.campaign-skip { position: absolute; top: 12px; left: 12px; z-index: 100; padding: 12px 18px; background: var(--bone); color: var(--ink); border-radius: 8px; transform: translateY(-180%); }
.campaign-skip:focus { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}