/* Shared site header: promo strip + nav bar (index.html, detail.html, about.html). Markup comes from site-header.js.
   The bands (promo, nav row divider) run full browser width; the nav contents stay in a 1440px box aligned with the page. */
.promo{display:flex;align-items:center;justify-content:center;height:40px;background:#D9A9A3;color:#FFFFFF;font-size:13px;letter-spacing:0.02em;text-align:center;padding:0 16px;}
.nav-row{border-bottom:1px solid var(--line);}
.nav-inner{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:16px 56px;gap:16px;}
nav{display:flex;gap:28px;font-size:15px;flex-wrap:wrap;justify-self:start;}
.icons{display:flex;align-items:center;gap:22px;justify-self:end;}

/* centered brand matches inspimock.html masthead: 48px logo + wordmark, tagline under the wordmark */
.brand{display:flex;align-items:center;justify-content:center;gap:14px;}
a.brand:hover{opacity:1;}
.brand .logo-mark{width:48px;height:48px;border-radius:999px;object-fit:cover;flex:none;}
.brand-text{display:flex;flex-direction:column;gap:2px;}
.brand .wordmark{font-family:'Newsreader',Georgia,serif;font-size:20px;}
.brand .tagline{font-family:'Newsreader',Georgia,serif;font-style:italic;font-size:13px;color:var(--ink-soft);}

@media (max-width:1100px){
  .nav-inner{padding-left:24px;padding-right:24px;}
}
/* phones: centered logo on its own row, nav + icons below */
@media (max-width:600px){
  .nav-inner{grid-template-columns:1fr auto;row-gap:12px;}
  .brand{grid-column:1 / -1;order:-1;}
  nav{gap:16px;font-size:14px;}
}