/* Site chrome (header + footer) for The Triangle Hiring Brief pages.
   Derived from Website/_build/chrome.py -- its CSS constant, nav() and FOOTER.

   Every rule below is scoped to header.nav or body>footer. Two reasons:

   1. chrome.py's stylesheet is written to own a whole page: it carries a global
      *{margin:0;padding:0} reset, a navy body, and a{text-decoration:none}.
      Dropping that in unscoped would strip the brief's link underlines and its
      default typographic margins.
   2. The brief pages contain their own editorial <footer> inside .thb (the
      "Sources & Method" colophon) and their own <header> inside .thb (the
      masthead). A bare `footer` selector hits the colophon and renders it
      dark-navy-on-black. `body>footer` matches only the site footer, which is
      always a direct child of body. The header is safe either way because it is
      matched by class (header.nav), and no element inside .thb carries .nav.

   Refresh this file by hand if chrome.py's chrome styles change.

   Two deliberate differences from chrome.py:
   - header.nav uses an opaque navy background instead of
     rgba(10,14,39,.82) + backdrop-filter:blur(10px). These pages have a white
     body, so the translucent bar would read pale grey rather than navy.
   - body>footer sets font-family:var(--body) explicitly, which chrome.py gets
     from its body rule. */

:root{--navy:#0A0E27;--panel:#111634;--panel-2:#0d1230;--footer:#070A1C;--red:#E0201B;--coral:#FF6B5E;--amber:#E9A44C;--label:var(--amber);--slate:#5A5F70;--white:#fff;--ink:#EEF0F6;--ink-dim:rgba(238,240,246,.70);--hair:rgba(238,240,246,.10);--display:'Archivo Black',system-ui,sans-serif;--body:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace}

/* resets, confined to the chrome */
header.nav,header.nav *,body>footer,body>footer *{box-sizing:border-box;margin:0;padding:0}
header.nav a,body>footer a{color:inherit;text-decoration:none}
header.nav :focus-visible,body>footer :focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}

/* header */
header.nav{position:sticky;top:0;z-index:50;background:var(--navy);border-bottom:1px solid var(--hair);font-family:var(--body)}
header.nav .wrap{max-width:1280px;margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:28px;height:68px}
header.nav .brand{font-family:var(--display);font-size:1.15rem;letter-spacing:.04em;color:var(--white)}
header.nav .brand .p{color:var(--red)}
header.nav .menu{display:flex;align-items:center;gap:22px;margin-left:auto}
header.nav .menu a{font-family:var(--body);font-weight:500;font-size:1.02rem;letter-spacing:.01em;color:var(--ink-dim)}
header.nav .menu a:hover,header.nav .menu a.active{color:var(--white)}
header.nav .menu a.active{border-bottom:2px solid var(--red);padding-bottom:3px}
header.nav .has-sub{position:relative}
header.nav .sub{position:absolute;top:130%;left:-14px;min-width:230px;background:var(--panel);border:1px solid var(--hair);border-radius:12px;padding:8px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:.16s}
header.nav .has-sub:hover .sub{opacity:1;visibility:visible;transform:translateY(0)}
header.nav .sub a{display:block;padding:9px 12px;border-radius:8px;font-size:.98rem;color:var(--ink-dim)}
header.nav .sub a:hover{background:var(--panel-2);color:var(--white)}
header.nav .cta{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;background:var(--red);color:var(--white);padding:11px 18px;border-radius:8px;font-weight:500}
header.nav .nav-toggle{display:none}
header.nav .burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;margin-left:auto;cursor:pointer;padding:9px}
header.nav .burger span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px}

/* footer -- body>footer only, so the brief's own colophon footer is untouched */
body>footer{background:var(--footer);border-top:1px solid var(--hair);padding:60px 0 40px;font-size:1rem;font-family:var(--body);color:var(--ink)}
body>footer .wrap{max-width:1280px;margin:0 auto;padding:0 28px}
body>footer .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;margin-bottom:44px}
body>footer .brand{font-family:var(--display);letter-spacing:.04em;color:var(--white)}
body>footer .brand .p{color:var(--red)}
body>footer .foot-brand .brand{font-size:1.3rem;margin-bottom:14px;display:inline-block}
body>footer .foot-brand p{color:var(--slate);max-width:280px;line-height:1.5}
body>footer .foot-col h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);margin-bottom:14px}
body>footer .foot-col a{display:block;color:var(--ink-dim);padding:6px 0;font-weight:500}
body>footer .foot-col a:hover{color:#fff}
body>footer .foot-bar{border-top:1px solid var(--hair);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--slate);font-size:.95rem}
body>footer .foot-bar a:hover{color:#fff}

/* mobile -- chrome rules only, lifted from chrome.py's max-width:820px block */
@media (max-width:820px){
header.nav .nav-toggle{display:block;position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);overflow:hidden}
header.nav .nav-toggle:focus-visible~.burger{outline:2px solid var(--red);outline-offset:3px;border-radius:6px}
header.nav .burger{display:flex}
header.nav .wrap{position:relative;flex-wrap:wrap}
header.nav .menu{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;margin:0;background:var(--navy);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:6px 0;max-height:82vh;overflow:auto}
header.nav .nav-toggle:checked~.menu{display:flex}
header.nav .menu>a{padding:12px 28px}
header.nav .has-sub{position:static}
header.nav .menu .sub{position:static;opacity:1;visibility:visible;transform:none;background:none;border:0;box-shadow:none;padding:0;min-width:0}
header.nav .menu .sub a{padding:9px 28px 9px 46px;font-size:.95rem}
header.nav .has-sub>a{display:block;padding:12px 28px}
header.nav .menu .cta{margin:10px 28px 8px;text-align:center}
body>footer .foot-grid{grid-template-columns:1fr 1fr}
}