/* THE site footer style, the only one (FOOTER-MATCH-01, Matt 9f2fa9cb): every page with the shared .hp-footer markup loads
   this file and adds no footer rules of its own, so the footers cannot drift. The tokens it needs are scoped to .hp-footer
   so the host page's own styles are untouched. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/fraunces-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.hp-footer {
  --border-light: rgba(28, 25, 23, 0.08);
  --font-body: 'Inter', system-ui, sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono: 'DM Mono', ui-monospace, monospace;
  --font-ui: 'Lexend', system-ui, sans-serif;
  --gutter: clamp(20px, 2.6vw, 48px);
  --measure-grid: 1280px;
  --panel-bg: #1F1D1B;
  --panel-border: rgba(255, 255, 255, 0.06);
  --panel-text: #FAFAF8;
  --panel-text-secondary: #A8A29E;
  --panel-text-tertiary: #78716C;
  --radius-sm: 8px;
  --space-band: clamp(48px, 5.4vw, 84px);
  --terracotta: #E8703A;
  --terracotta-line: rgba(232, 112, 58, 0.20);
  box-sizing: border-box; text-align: left;
  /* own base type so nothing is inherited from the host page (FOOTER-MATCH-01) */
  color: var(--panel-text); font-family: var(--font-body); font-size: 16px; line-height: 1.5;
}
/* Wide screens: the same steps as v2/colors_and_type.css, so this follows the nav and page body there (LAYOUT-WIDTH-01). */
@media (min-width: 1920px) { .hp-footer { --measure-grid: 1440px; } }
@media (min-width: 2560px) { .hp-footer { --measure-grid: 1600px; } }
.hp-footer *, .hp-footer *::before, .hp-footer *::after { box-sizing: border-box; }
.hp-footer a { text-decoration: none; }
.hp-footer { background: var(--panel-bg); border-top: 1px solid var(--panel-border); padding: var(--space-band) 0 36px; }
.hp-footer-inner { max-width: var(--measure-grid); margin: 0 auto; padding: 0 var(--gutter); }
.hp-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.hp-footer-brandcol { max-width: 320px; }
.hp-footer-brandrow { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.hp-footer-name { font-family: var(--font-ui); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; color: var(--panel-text); }
.hp-footer-mission { font-family: var(--font-display); font-style: normal; font-weight: 500; font-size: 0.95rem; line-height: 1.35;
  color: var(--panel-text); margin-bottom: 12px; }
.hp-footer-tag { font-family: var(--font-body); font-size: 0.84rem; line-height: 1.55; color: var(--panel-text-secondary); }
.hp-footer-coltitle { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--panel-text-tertiary); margin-bottom: 16px; }
/* 44px rows: tap targets on phones, same rhythm on desktop */
.hp-footer-col a { display: flex; align-items: center; min-height: 44px; font-family: var(--font-body); font-size: 0.82rem; font-weight: 500;
  color: var(--panel-text-secondary); text-decoration: none; padding: 0; transition: color .2s; }
.hp-footer-col a:hover { color: var(--terracotta); }
.hp-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--panel-border); }
.hp-footer-copy { font-family: var(--font-mono); font-size: 12px; color: var(--panel-text-secondary); }
.hp-social { display: flex; gap: 10px; }
.hp-social a { width: 38px; height: 38px; border-radius: var(--radius-sm); border: 1px solid var(--panel-border);
  display: flex; align-items: center; justify-content: center; color: var(--panel-text-secondary); transition: all .2s; }
.hp-social a:hover { color: var(--terracotta); border-color: var(--terracotta-line); }
@media (max-width: 1024px) {
  .hp-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .hp-footer-brandcol { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 768px) {
  .hp-footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .hp-footer-grid { gap: 26px; }
}