/* Apothecary Letter frames — shared page chrome (nav + footer + letter type)
   Load AFTER ../../styles/colors_and_type.css and components.css */

* { box-sizing: border-box; }
body { margin: 0; background: var(--ivory); color: var(--warm-black); font-family: var(--font-sans); }
img { max-width: 100%; display: block; }
a { color: var(--sage-mid); }
a:hover { color: var(--cinnabar); }

/* ===== NAV (homepage vocabulary) ===== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(254,253,251,0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--parchment);
}
.nav-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.brand img { width: 34px; height: 34px; }
.brand .lock { display: flex; flex-direction: column; gap: 2px; }
.brand .lock .small { font: 500 0.6rem/1 var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.brand .lock b { font: 600 1rem/1.1 var(--font-sans); letter-spacing: 0.005em; color: var(--warm-black); }
.nav-links { display: flex; align-items: center; gap: 2rem; }
.nav-links a {
  color: var(--warm-black); text-decoration: none;
  font: 500 0.85rem/1 var(--font-sans);
  letter-spacing: 0.02em;
  transition: color var(--dur) var(--ease);
}
.nav-links a:hover { color: var(--cinnabar); }
.nav-links a.active { color: var(--cinnabar); }
.nav-cta {
  background: var(--cinnabar) !important; color: #fff !important;
  padding: 0.7rem 1.25rem; border-radius: var(--r-sm);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.22), 0 1px 0 rgba(42,41,38,0.12);
  transition: background var(--dur) var(--ease);
}
.nav-cta:hover { background: var(--cinnabar-glow) !important; color: #fff !important; }

/* ===== FOOTER ===== */
.footer {
  margin-top: 6rem;
  padding: 3.5rem 1.5rem 3rem;
  text-align: center;
  color: rgba(248,246,241,0.75);
}
.footer .foot-mark { width: 40px; margin: 0 auto 1rem; opacity: 0.9; }
.footer .foot-name { font: 500 0.68rem/1 var(--font-sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-soft); }
.footer .foot-line { font: italic 400 1.05rem/1.6 var(--font-serif); color: rgba(248,246,241,0.65); margin: 1rem 0 0; }
.footer .foot-legal { font: 400 0.72rem/1.7 var(--font-sans); color: rgba(248,246,241,0.42); margin-top: 1.6rem; max-width: 560px; margin-left: auto; margin-right: auto; }

/* ===== LETTER PAGE TYPE ===== */
.letter-body p {
  font: 400 1.1rem/1.85 var(--font-sans);
  color: var(--charcoal);
  margin: 0 0 1.4rem;
}
.letter-body p.lede-p {
  font: 400 1.32rem/1.75 var(--font-serif);
  color: var(--warm-black);
}
.letter-body h2 {
  font: 500 1.75rem/1.3 var(--font-serif);
  color: var(--ink-black);
  margin: 3rem 0 1.1rem;
}
.letter-body h2 .cn { font-size: 1.2rem; margin-left: 0.5rem; }
.letter-body .dropcap::first-letter {
  font: 400 3.9rem/0.82 var(--font-serif);
  color: var(--cinnabar);
  float: left;
  padding: 0.35rem 0.65rem 0 0;
}
.letter-body strong { color: var(--warm-black); font-weight: 600; }
.letter-body em { font-family: var(--font-serif); font-size: 1.08em; }

/* Pull quote */
.pullquote {
  margin: 2.8rem 0;
  padding: 0 0 0 1.6rem;
  border-left: 2px solid var(--gold);
}
.pullquote p {
  font: italic 400 1.5rem/1.5 var(--font-serif);
  color: var(--warm-black);
  margin: 0;
}

/* Q&A block (LLM-quotable) */
.qa { margin: 1.6rem 0 0; }
.qa dt {
  font: 600 1.12rem/1.5 var(--font-sans);
  color: var(--ink-black);
  margin: 1.8rem 0 0.5rem;
}
.qa dd {
  margin: 0;
  font: 400 1.05rem/1.8 var(--font-sans);
  color: var(--charcoal);
}

/* Disclaimer strip */
.disclaim {
  margin: 3rem 0 0;
  padding: 1.1rem 1.3rem;
  background: var(--cream);
  border: 1px solid var(--parchment);
  font: 400 0.85rem/1.7 var(--font-sans);
  color: var(--charcoal-light);
}