/* HWD · the header and footer every page wears, bar the Studio.
   The markup is kept identical across pages by tools/chrome.mjs, which writes it between the
   <!-- hwd:nav --> and <!-- hwd:foot --> markers; this file is the only place it is styled.
   Everything is hwd- prefixed and the colours are written out: the pages each have their own
   short class names and their own :root, and the 404 has neither. */

.hwd-nav { position: sticky; top: 0; z-index: 40; height: 80px; display: flex; align-items: center;
  background: #EDEFF1; border-bottom: 1px solid rgba(23,27,31,.14); color: #171B1F;
  font-family: Jost, Futura, sans-serif; font-weight: 300; }
.hwd-nav a { color: inherit; text-decoration: none; }
.hwd-nav .hwd-nwrap { width: 100%; max-width: 1480px; margin: 0 auto; padding-inline: clamp(20px, 4.5vw, 64px);
  display: flex; align-items: center; gap: 40px; min-width: 0; box-sizing: border-box; }
.hwd-nav .hwd-brand { display: flex; align-items: center; gap: 14px; flex: none; }
.hwd-nav .hwd-mark { font-family: Michroma, monospace; font-size: 17px; letter-spacing: .22em; display: inline-flex; align-items: baseline; }
.hwd-nav .hwd-mark i { width: 6px; height: 6px; border-radius: 50%; background: #C69A2B; margin-left: 2px; display: inline-block; }
.hwd-nav .hwd-tag { font-size: 13px; color: #4A535A; border-left: 1px solid rgba(23,27,31,.14); padding-left: 16px; white-space: nowrap; }
.hwd-nav .hwd-links { margin-left: auto; display: flex; gap: 30px; align-items: center;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #4A535A; }
.hwd-nav .hwd-links a { padding-bottom: 3px; border-bottom: 1px solid transparent; white-space: nowrap; }
.hwd-nav .hwd-links a:hover { color: #171B1F; }
.hwd-nav .hwd-links a.on { color: #171B1F; border-bottom-color: #C69A2B; }
.hwd-nav .hwd-right { display: flex; align-items: center; gap: 18px; min-width: 0; }
.hwd-nav .hwd-go { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 24px;
  background: #171B1F; color: #F8F9F9; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: .18em;
  text-transform: uppercase; white-space: nowrap; }
.hwd-nav .hwd-go:hover { background: #22282D; }
.hwd-nav .hwd-acct .who.guest { text-transform: uppercase; letter-spacing: .16em; }

@media (max-width: 1080px) { .hwd-nav .hwd-links { gap: 22px; } .hwd-nav .hwd-nwrap { gap: 28px; } }
@media (max-width: 900px) {
  .hwd-nav { height: 64px; }
  .hwd-nav .hwd-tag, .hwd-nav .hwd-links { display: none; }
  .hwd-nav .hwd-nwrap { gap: 12px; }
  .hwd-nav .hwd-right { margin-left: auto; gap: 10px; }
  .hwd-nav .hwd-go { height: 44px; padding: 0 16px; font-size: 11px; }
}
/* On a phone the bar keeps Sign in and the menu. Start designing is in the menu, and a button this
   wide next to both is what used to push a 320px screen sideways. */
@media (max-width: 560px) { .hwd-nav .hwd-go { display: none; } }

.hwd-foot { background: #EDEFF1; color: #171B1F; border-top: 1px solid rgba(23,27,31,.14);
  font-family: Jost, Futura, sans-serif; font-weight: 300; }
.hwd-foot a { color: inherit; text-decoration: none; }
.hwd-foot .hwd-fwrap { max-width: 1480px; margin: 0 auto; padding-inline: clamp(20px, 4.5vw, 64px); box-sizing: border-box; }
.hwd-foot .hwd-cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; padding: 46px 0 34px; }
.hwd-foot .hwd-col { display: flex; flex-direction: column; gap: 10px; }
.hwd-foot .hwd-h { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #8A949B; }
.hwd-foot .hwd-col a { font-size: 14.5px; color: #4A535A; }
.hwd-foot .hwd-col a:hover { color: #8A6914; }
.hwd-foot .hwd-col p { margin: 6px 0 0; font-size: 14px; color: #4A535A; line-height: 1.5; }
.hwd-foot .hwd-fmark { font-family: Michroma, monospace; font-size: 28px; letter-spacing: .22em; line-height: 1; display: inline-flex; align-items: baseline; }
.hwd-foot .hwd-fmark i { width: 6px; height: 6px; border-radius: 50%; background: #C69A2B; margin-left: 2px; display: inline-block; }
.hwd-foot .hwd-bar { display: flex; justify-content: space-between; gap: 12px 26px; flex-wrap: wrap; padding: 16px 0 22px;
  border-top: 1px solid rgba(23,27,31,.14); color: #8A949B;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; line-height: 1.6; }
@media (max-width: 860px) { .hwd-foot .hwd-cols { grid-template-columns: 1fr 1fr; gap: 26px; padding: 32px 0 24px; } }
html { scroll-padding-top: 96px; }