/* Shared chrome for the public site: mobile nav, active link and the
   footer. Loaded after each page's inline <style>, so these rules win
   on equal specificity. Tokens fall back to the landing values in case a
   page doesn't define them. Page-specific styles stay inline. */

@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-italic-400.woff2') format('woff2');
}

/* ─── Nav ─────────────────────────────────────────────────────────── */

/* Desktop: the menu wrapper disappears from the box tree so links and
   CTAs stay in the nav's 3-column grid exactly as before. */
.nav-menu { display: contents; }

.nav-lnk.is-active { color: var(--sage, #3F9568); font-weight: 500; }

/* Sister brand mark, same treatment as delfossec.com: italic serif "delfos"
   plus "sec" in Prompt bold on a lime pill. */
.nav-sister { display: inline-flex; align-items: baseline; gap: 2px; text-decoration: none; }
.nav-sister .ds-serif {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400;
  font-size: 1.12rem; letter-spacing: -.01em; color: var(--ink, #20201B);
}
.nav-sister .ds-sfx {
  font-family: 'Prompt', 'Geist', system-ui, sans-serif; font-weight: 700;
  font-size: .84rem; letter-spacing: -.01em; line-height: 1.1;
  color: #1B211E; background: #D2FF2F; border-radius: 4px;
  padding: 1px 4px 2px; transform: translateY(-1.5px);
}

.nav-burger {
  display: none;
  justify-self: end;
  width: 40px; height: 40px;
  border: 1px solid rgba(32,32,27,.16);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: background 120ms, transform 80ms;
}
.nav-burger:hover { background: rgba(32,32,27,.05); }
.nav-burger:active { transform: scale(.96); }
.nav-burger:focus-visible { outline: 2px solid var(--sage, #3F9568); outline-offset: 2px; }
.nav-burger span {
  position: absolute; left: 12px; right: 12px; height: 1.5px;
  background: var(--ink, #20201B); border-radius: 2px;
  transition: transform 200ms cubic-bezier(0.23,1,0.32,1), opacity 120ms;
}
.nav-burger span:nth-child(1) { top: 15px; }
.nav-burger span:nth-child(2) { top: 23px; }
nav.nav-open .nav-burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
nav.nav-open .nav-burger span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* Collapses only when site.js runs (it flags <html class="js"> from the
   head); without JS the links and CTAs stay visible as before. */
@media (max-width: 1260px) {
  html.js nav { grid-template-columns: 1fr auto; }
  html.js .nav-burger { display: block; }
  html.js .nav-menu { display: none; }

  html.js nav.nav-open .nav-menu {
    display: flex; flex-direction: column; gap: 1.5rem;
    position: fixed; top: 62px; left: 0; right: 0;
    max-height: calc(100vh - 62px);
    max-height: calc(100dvh - 62px);
    overflow-y: auto;
    padding: 1.25rem clamp(1.5rem,5vw,3.5rem) 1.75rem;
    background: var(--cream, #FAF8F1);
    border-bottom: 1px solid var(--line, rgba(32,32,27,.09));
    box-shadow: 0 24px 48px rgba(32,32,27,.10);
    animation: nav-menu-in 220ms cubic-bezier(0.23,1,0.32,1);
  }
  /* Page sheets hide .nav-links / .nav-lnk on small screens; the open
     panel needs them back, hence the extra nav ancestor. */
  html.js nav.nav-open .nav-menu .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
  }
  html.js nav.nav-open .nav-menu .nav-lnk {
    display: block; padding: .8rem 0; font-size: 1rem;
    border-bottom: 1px solid var(--line, rgba(32,32,27,.09));
  }
  html.js nav.nav-open .nav-menu .nav-sister { display: flex; }
  html.js nav.nav-open .nav-menu .nav-ctas { justify-content: flex-start; flex-wrap: wrap; }
  html.js nav.nav-open .nav-menu .nav-btn-ghost,
  html.js nav.nav-open .nav-menu .nav-btn-dark { padding: 10px 20px; font-size: .9rem; }
}

@keyframes nav-menu-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ─── Footer ──────────────────────────────────────────────────────── */

footer.site-footer {
  display: block;
  background: var(--cream, #FAF8F1);
  border-top: 1px solid var(--line, rgba(32,32,27,.09));
  padding: 3rem clamp(1.5rem,5vw,3.5rem) 1.5rem;
  text-align: left;
}
.site-footer .footer-grid {
  max-width: 1360px; margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
  padding-bottom: 2rem;
}
.site-footer .nav-brand {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  font-size: 1.35rem; font-weight: 400; line-height: 1; letter-spacing: -.01em;
  color: var(--ink, #20201B); text-decoration: none;
}
.site-footer .brand-gov {
  color: var(--sage, #3F9568);
  font-family: 'Inter', 'Geist', system-ui, -apple-system, sans-serif;
  font-style: normal; font-weight: 700; letter-spacing: -.01em;
}
.site-footer .footer-powered {
  font-size: .55rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-4, #B0AB9F); font-weight: 600; margin: 6px 0 0;
}
.site-footer .footer-powered a { font-size: inherit; color: var(--ink-3, #6F6A5E); text-decoration: none; }
.site-footer .footer-powered a:hover { color: var(--ink, #20201B); }
.site-footer .footer-tagline {
  margin: 1.5rem 0 0; font-size: .82rem; line-height: 1.65;
  color: var(--ink-2, #56524A); max-width: 36ch;
}
.site-footer .footer-tagline a {
  font-size: inherit; color: var(--ink, #20201B); text-decoration: none; font-weight: 500;
  border-bottom: 1px solid var(--line, rgba(32,32,27,.09));
}
.site-footer .footer-tagline a:hover { border-bottom-color: var(--ink-3, #6F6A5E); }
.site-footer .footer-mail {
  display: inline-block; margin-top: 1rem;
  font-size: .82rem; color: var(--sage-2, #347A55); text-decoration: none;
}
.site-footer .footer-mail:hover { color: var(--sage-s, #2C7349); }
.site-footer .footer-col-label {
  font-size: .65rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3, #6F6A5E); font-weight: 600; margin: 6px 0 1rem;
}
.site-footer .footer-col a {
  display: block; padding: 6px 0; font-size: .85rem;
  color: var(--ink-2, #56524A); text-decoration: none;
}
.site-footer .footer-col a:hover { color: var(--ink, #20201B); }
.site-footer .footer-bottom {
  max-width: 1360px; margin: 0 auto;
  border-top: 1px solid var(--line, rgba(32,32,27,.09)); padding-top: 1.5rem;
  text-align: center;
  font: 500 .65rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3, #6F6A5E);
}
.site-footer .footer-bottom .sep { margin: 0 .8rem; color: var(--ink-4, #B0AB9F); }

@media (max-width: 900px) {
  .site-footer .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .site-footer .footer-brand-block { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .site-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer .footer-bottom { line-height: 1.8; }
}

@media (prefers-reduced-motion: reduce) {
  html.js nav.nav-open .nav-menu { animation: none; }
  .nav-burger span { transition: none; }
}