/* informal global.css (2026-09-28): fonts, shared nav dropdown and button spec. Linked at the end of <head> on every page. */
@font-face { font-family: 'Agrandir'; src: url('/fonts/agrandir-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Agrandir Narrow'; src: url('/fonts/agrandir-narrow-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Agrandir Narrow'; src: url('/fonts/agrandir-narrow-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Agrandir Narrow'; src: url('/fonts/agrandir-narrow-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* Resources dropdown (2026-09-28): Blog / Newsletter / Tools live under one nav item that also links to the /resources hub */
.nav .nav-item { position: relative; display: inline-flex; align-items: center; }
.nav .nav-item > a::after { content: ""; display: inline-block; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-left: 7px; position: relative; top: -2px; }
.nav .nav-dropdown { display: none; position: absolute; top: 100%; left: -20px; padding-top: 12px; z-index: 60; }
.nav .nav-dropdown-inner { background: var(--cream, #F4F5F0); border: 1px solid var(--ink); display: flex; flex-direction: column; min-width: 168px; padding: 6px 0; }
.nav .nav-dropdown a { display: block; color: var(--ink) !important; opacity: 1 !important; text-shadow: none !important; padding: 10px 20px; font-size: 14px; text-decoration: none !important; }
.nav .nav-dropdown a:hover { background: var(--yellow); color: var(--ink) !important; }
.nav .nav-item:hover .nav-dropdown, .nav .nav-item:focus-within .nav-dropdown { display: block; }
@media (max-width: 768px) {
  .nav .nav-item { flex-direction: column; align-items: flex-start; }
  .nav .nav-item > a::after { display: none; }
  .nav .nav-dropdown { display: block; position: static; padding: 12px 0 0 20px; }
  .nav .nav-dropdown-inner { background: transparent; border: 0; padding: 0; gap: 12px; min-width: 0; }
  .nav .nav-dropdown a { color: inherit !important; opacity: .75 !important; padding: 0; font-size: 16px; }
  .nav .nav-dropdown a:hover { background: transparent; }
}

/* btn-standard (2026-09-28): one pill button spec site-wide (was 12 variants) */
.btn-pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 26px !important; min-width: 0 !important; border-radius: var(--r-full) !important; font-family: 'Agrandir Narrow', sans-serif !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.2 !important; }
@media (max-width: 768px) { .btn-pill { padding: 12px 22px !important; font-size: 15px !important; } }

/* wayfinding (2026-10-01): page label above each hero headline + current-page state in the header nav */
.page-label { display: inline-block; margin: 0 0 28px !important; padding: 0; max-width: none !important; background: none; color: var(--paper) !important; font-family: 'Agrandir Narrow', sans-serif !important; font-weight: 500 !important; font-size: 15px !important; line-height: 1 !important; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 768px) { .page-label { margin-bottom: 20px !important; font-size: 13px !important; } }
.site-header .nav > a.is-active, .site-header .nav .nav-item.is-active > a { background: var(--yellow); padding: 4px 8px 2px; margin: -4px -8px -2px; opacity: 1; text-decoration: none; }
.site-header .nav .nav-dropdown a.is-active { background: var(--yellow); }
@media (max-width: 768px) { .site-header .nav .nav-dropdown a.is-active { background: transparent; text-decoration: underline; text-underline-offset: 4px; opacity: 1 !important; } }

/* nav-hierarchy (2026-10-14): nav type up a step (14 -> 16px) so it sits closer to the body copy below it, plus a Sign in pill that links to work.informal.com */
.site-header .nav { font-size: 16px; gap: 36px; align-items: center; }
.nav .nav-dropdown a { font-size: 15px; }
.nav .nav-dropdown { left: -22px; }
/* sign-in-centering (2026-11-02): Agrandir Narrow sits high in a line-height:1 box, so the pill gets 3px more top than bottom padding to optically center the caps */
.site-header .nav .nav-signin { display: inline-flex; align-items: center; padding: 8px 18px 5px; border: 1px solid var(--ink); border-radius: var(--r-full, 999px); line-height: 1; opacity: 1; text-shadow: none; margin-left: 4px; }
.site-header .nav .nav-signin:hover { background: var(--ink); color: var(--paper, #fff) !important; text-decoration: none; }
@media (max-width: 1024px) { .site-header .nav { gap: 28px; } }
@media (max-width: 768px) {
  .site-header.is-menu-open .nav .nav-signin { align-self: flex-start; margin: 8px 0 0; padding: 11px 22px 8px; font-size: 16px; }
}