/* Sitewide header and footer, matching index.html.

   index.html carries its own inline design system and does not load
   styles.css, and the two share class names (.site-footer, .footer-nav,
   .btn) with different rules. So the homepage header/footer CSS lives here
   under an hp- prefix, with index.html's token values inlined, and nothing
   leaks into or out of styles.css.

   Loaded by every page that loads styles.css (root pages, blog/, 404),
   right after styles.css / brand-fonts.css. If index.html's header or
   footer changes, update this file and the duplicated markup in every page
   by hand, and bump ?v= on this file's <link> everywhere. */

@keyframes hp-cursor-blink { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } }
.hp-header, .hp-footer { --hp-gutter: clamp(24px, 5.3vw, 76px); font-family: "Helvetica Neue", Helvetica, -apple-system, "Segoe UI", Arial, sans-serif; }
.hp-header a, .hp-footer a { text-decoration: none; transition: color 120ms cubic-bezier(0.2, 0, 0.2, 1), border-color 120ms cubic-bezier(0.2, 0, 0.2, 1); }
.hp-header a:focus-visible, .hp-footer a:focus-visible { outline: 2px solid #4B8DE0; outline-offset: 2px; }
.hp-wordmark { font-family: var(--font-mono); font-weight: 500; font-size: 19px; letter-spacing: 0.14em; color: #F0EEE8; white-space: nowrap; line-height: 1; }
.hp-wordmark-cursor { color: #4B8DE0; animation: hp-cursor-blink 1.1s step-end infinite; }
.hp-header { position: sticky; top: 0; z-index: 10; background: #0B0B0A; border-bottom: 1px solid #1E1E1B; }
.hp-header .hp-inner { max-width: 1440px; margin: 0 auto; padding: 20px var(--hp-gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.hp-header .hp-home { display: flex; align-items: center; }
.hp-nav { display: flex; flex-wrap: wrap; gap: 34px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.hp-nav a { color: #8A867E; }
.hp-nav a:hover, .hp-footer-nav a:hover { color: #F0EEE8; }
.hp-btn { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.08em; font-size: 13px; border-radius: 2px; border: 1px solid #2A2A26; padding: 8px 16px; white-space: nowrap; background: transparent; color: #F0EEE8; }
.hp-btn:hover { color: #F0EEE8; border-color: #6E6A63; }
@media (max-width: 880px) { .hp-nav { display: none; } }
@media (max-width: 420px) {
  .hp-header .hp-inner { flex-wrap: nowrap; gap: 12px; }
  .hp-header .hp-wordmark { font-size: 17px; }
  .hp-header .hp-btn { padding: 8px 12px; font-size: 12px; letter-spacing: 0.04em; }
}
.hp-footer { max-width: 1440px; margin: 0 auto; padding: 44px var(--hp-gutter) 120px; display: flex; flex-direction: column; gap: 28px; border-top: 1px solid #1E1E1B; }
.hp-footer .hp-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.hp-footer .hp-wordmark { font-size: 15px; }
.hp-footer-nav { display: flex; flex-wrap: wrap; gap: 14px 26px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; }
.hp-footer-nav a { color: #A29D94; }
.hp-footer .hp-legal { border-top: 1px solid #1E1E1B; padding-top: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 30px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #6E6A63; }
.hp-footer .hp-legal div { display: flex; flex-wrap: wrap; gap: 12px 30px; }
@media (prefers-reduced-motion: reduce) { .hp-wordmark-cursor { animation: none; } }