/* Shared site header.
 *
 * Extracted from css/top.css so interior pages (blog, author, policy) can use the
 * exact homepage header without pulling in the whole homepage stylesheet. The
 * homepage keeps getting these rules from top.css; this file is byte-for-byte the
 * same declarations, so the two cannot drift apart visually.
 *
 * If a header rule changes in top.css, change it here too.
 */
.tfh-header{background:#1a1c28;color:#fff}
.tfh-nav-shell{max-width:1240px;margin:0 auto;min-height:112px;display:flex;align-items:center;gap:56px;border-bottom:1px solid #343744}
.tfh-logo{display:block;flex:none;width:206px;line-height:0}
.tfh-logo img{width:100%;height:auto;max-height:46px;object-fit:contain;object-position:left center}
.tfh-nav{display:flex;align-items:center;justify-content:flex-end;flex:1;gap:60px;font-size:14px;line-height:1.4}
.tfh-nav-links,.tfh-nav-actions{display:flex;align-items:center;gap:28px}
.tfh-nav a{color:#d2d4db;text-decoration:none;white-space:nowrap}
.tfh-nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}
.tfh-nav .tfh-nav-cta{background:#05c4a0;color:#1A1C28;border-radius:7px;font-size:15px;font-weight:700;padding:15px 28px;min-width:150px;text-align:center}
.tfh-nav .tfh-nav-cta:hover{text-decoration:none;box-shadow:0 0 0 2px #fff}
.tfh-menu-toggle{display:none;background:transparent;border:1px solid #5a606e;color:#fff;align-items:center;gap:9px;padding:10px 13px;border-radius:6px;font:inherit;cursor:pointer}
.tfh-menu-toggle svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
.tfh-header a:focus-visible,.tfh-menu-toggle:focus-visible{outline:3px solid #05c4a0;outline-offset:6px}

@media(max-width:1320px){.tfh-nav-shell{margin:0 28px;gap:35px}.tfh-nav{gap:40px}.tfh-nav-links{gap:24px}}
@media(max-width:1100px){.tfh-nav-shell{gap:24px}.tfh-logo{width:185px}.tfh-nav{gap:32px}.tfh-nav-links,.tfh-nav-actions{gap:20px}.tfh-nav .tfh-nav-cta{min-width:130px;padding:14px 20px}}
@media(max-width:980px){.tfh-nav-shell{min-height:96px;justify-content:space-between;flex-wrap:wrap;gap:0;padding:22px 0}.tfh-nav{flex-basis:100%;padding-top:24px;flex-wrap:wrap;justify-content:space-between;gap:24px}.tfh-header.tfh-enhanced .tfh-menu-toggle{display:inline-flex}.tfh-header.tfh-enhanced .tfh-nav:not(.is-open){display:none}.tfh-nav-links{flex-wrap:wrap;gap:24px}.tfh-nav-actions{margin-left:auto}}
@media(max-width:767px){.tfh-nav-shell{margin:0 24px}.tfh-logo{width:180px}.tfh-nav,.tfh-nav-links,.tfh-nav-actions{flex-direction:column;align-items:stretch;gap:0}.tfh-nav a{display:block;padding:12px 6px}.tfh-nav-links,.tfh-nav-actions{width:100%}.tfh-nav-actions{border-top:1px solid #343744;margin-top:12px;padding-top:12px}.tfh-nav .tfh-nav-cta{margin-top:10px;padding:15px 24px}}
@media(max-width:360px){.tfh-logo{width:156px}}
@media print{.tfh-menu-toggle{display:none!important}.tfh-header .tfh-nav{display:flex!important}}

/* On the blog the page around the header comes from the old site's stylesheet, which
 * loads a different cut of Inter and its own text settings. Pin the header to what the
 * developer's pages give it, so it is the same header on every page of the site.
 * Checked 2026-10-01 against the developer's pages at 1440, 1024, 768 and 375 wide. */
@font-face{font-family:"Header Inter";src:url('/assets/fonts/inter-400.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-007F}
@font-face{font-family:"Header Inter";src:url('/assets/fonts/inter-700.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-007F}
.tfh-header{font-family:"Header Inter",Inter,Arial,sans-serif;line-height:normal;text-rendering:auto}
/* the old stylesheet forces every button to 44px tall on phones; the developer's menu button is 42px */
.tfh-header .tfh-menu-toggle{min-height:auto!important}