/* Halftone wordmark footer. Colors come from --hwf-* set by halftone-footer.js. */
.hwf { position: relative; z-index: 2; display: flex; flex-direction: column; height: var(--hwf-h, 560px); background: var(--hwf-bg, #0a0a0a); color: var(--hwf-ink, #e9e4da); overflow: hidden; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; -webkit-font-smoothing: antialiased; box-sizing: border-box; }
.hwf *, .hwf *::before, .hwf *::after { box-sizing: border-box; }
.hwf-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; padding: 40px 56px 28px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.5; }
.hwf-brand { display: flex; flex-direction: column; gap: 6px; min-width: 150px; }
.hwf-brand b { font-weight: 700; letter-spacing: 0.22em; }
.hwf-brand span { opacity: 0.5; letter-spacing: 0.1em; text-transform: none; }
.hwf-cols { display: flex; gap: 72px; margin-left: auto; }
.hwf-col { display: flex; flex-direction: column; gap: 6px; }
.hwf-col h4 { margin: 0 0 6px; font: inherit; opacity: 0.45; font-weight: 400; }
.hwf a, .hwf-back { color: inherit; text-decoration: none; opacity: 0.8; transition: opacity 0.2s, color 0.2s; }
.hwf a:hover, .hwf-back:hover { opacity: 1; color: var(--hwf-warm, #e3262b); }
.hwf-back { background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; white-space: nowrap; }
.hwf-rule { margin: 0 56px; border: 0; border-top: 1px solid color-mix(in srgb, var(--hwf-ink, #e9e4da) 16%, transparent); }
.hwf-stage { position: relative; flex: 1 1 auto; min-height: 0; touch-action: pan-y; }
.hwf-canvas { position: absolute; left: 0; top: 0; display: block; }
.hwf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1100px) { .hwf-top { padding-inline: 28px; } .hwf-rule { margin-inline: 28px; } .hwf-cols { gap: 40px; } }
@media (max-width: 719px) {
    .hwf { height: var(--hwf-hm, 380px); }
    .hwf-top { display: grid; grid-template-columns: 1fr auto; gap: 18px 16px; padding: 24px 18px 16px; font-size: 10px; }
    .hwf-brand { min-width: 0; }
    .hwf-back { justify-self: end; }
    .hwf-cols { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; margin: 0; }
    .hwf-rule { margin-inline: 18px; }
}
