/* QBH standard chrome: the header and footer the blog itself uses.
 *
 * Every class begins qbhc-, which nothing else on this site uses. That is
 * deliberate: the politics articles carry their own .nav, .nav-list and .bar
 * rules for headers they no longer have, and qbh-site-theme.css overrides
 * those again with !important. Renaming means this file is the only thing
 * styling the chrome, so it looks the same on every article whatever that
 * article's own stylesheet does.
 *
 * The design is the blog's: a translucent bar, the navigation in a rounded
 * capsule, a 44px crest. Values are taken from qbh-site-theme.css and stated
 * literally here rather than read from a :root an article may not define.
 */
.qbhc, .qbhc * { box-sizing: border-box }
.qbhc a { text-decoration: none }

/* ------------------------------------------------------------------ header */
.qbhc-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(247, 243, 236, .86);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(15, 23, 42, .12);
}
.qbhc-header .qbhc-inner {
  max-width: 1180px; margin: 0 auto; padding: .6rem 1rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: .7rem 1rem; flex-wrap: wrap;
}
.qbhc-brand { display: flex; align-items: center; gap: .7rem; min-width: 0 }
.qbhc-logo {
  width: 44px; height: 44px; border-radius: 15px; object-fit: cover; flex: 0 0 auto;
  border: 1px solid rgba(15, 23, 42, .12); background: #fff;
  box-shadow: 0 14px 26px rgba(0, 0, 0, .18);
}
.qbhc-name {
  font-weight: 950; letter-spacing: -.03em; white-space: nowrap;
  color: #0c111d; font-size: 1.02rem;
}
.qbhc-nav { display: flex; align-items: center; gap: .7rem; min-width: 0 }

/* the capsule */
.qbhc-list {
  display: flex; align-items: center; flex-wrap: wrap; gap: .25rem;
  list-style: none; margin: 0; padding: .35rem;
  border: 1px solid rgba(15, 23, 42, .12); border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 10px 34px rgba(15, 23, 42, .05);
}
.qbhc-list li { margin: 0; padding: 0; list-style: none }
.qbhc-list a, .qbhc-theme {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .58rem .82rem; border-radius: 999px;
  color: #5b6472; font-size: .86rem; font-weight: 800;
  border: 0; background: transparent; cursor: pointer; font-family: inherit;
}
.qbhc-list a:hover, .qbhc-theme:hover { background: #eef0f3; color: #0c111d }
.qbhc-list a.qbhc-on { color: #c46b1e }

/* ------------------------------------------------------------------ footer */
.qbhc-footer {
  margin-top: 2rem; padding: 1.1rem 0;
  border-top: 1px solid rgba(15, 23, 42, .12); background: #fbf7f0; color: #0c111d;
}
.qbhc-footer .qbhc-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 1rem;
  display: flex; gap: .6rem 1rem; justify-content: space-between;
  align-items: center; flex-wrap: wrap;
}
.qbhc-footer p { margin: 0; font-size: .9rem; color: #5b6472 }
.qbhc-footer nav { display: flex; flex-wrap: wrap; gap: .9rem }
.qbhc-footer a { color: #c46b1e; font-weight: 800; font-size: .9rem }

.qbhc-policy {
  max-width: 1180px; margin: 0 auto; padding: 1rem 1rem 2.2rem;
  color: #5b6472; font-size: .86rem; line-height: 1.55;
}
.qbhc-policy-links { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin-bottom: .5rem }
.qbhc-policy a { color: #c46b1e; font-weight: 700 }
.qbhc-policy p { margin: .3rem 0 }
.qbhc-addr { font-size: .82rem; color: #6b7280 }

/* -------------------------------------------------------------------- dark */
:root[data-theme="dark"] .qbhc-header {
  background: rgba(12, 17, 29, .86); border-bottom-color: rgba(255, 255, 255, .12);
}
:root[data-theme="dark"] .qbhc-name { color: #f2f5f7 }
:root[data-theme="dark"] .qbhc-list {
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14);
  box-shadow: none;
}
:root[data-theme="dark"] .qbhc-list a,
:root[data-theme="dark"] .qbhc-theme { color: #c8d2dd }
:root[data-theme="dark"] .qbhc-list a:hover,
:root[data-theme="dark"] .qbhc-theme:hover { background: rgba(255, 255, 255, .1); color: #fff }
:root[data-theme="dark"] .qbhc-footer { background: #0f1216; color: #cfd6dc; border-top-color: rgba(255, 255, 255, .12) }
:root[data-theme="dark"] .qbhc-footer p { color: #9fb0bd }
:root[data-theme="dark"] .qbhc-policy { color: #9fb0bd }

/* ------------------------------------------------------------------ narrow */
@media (max-width: 760px) {
  .qbhc-header .qbhc-inner { padding: .5rem .75rem }
  .qbhc-name { font-size: .92rem }
  .qbhc-logo { width: 38px; height: 38px; border-radius: 12px }
  .qbhc-nav { width: 100% }
  .qbhc-list { width: 100%; justify-content: flex-start; border-radius: 18px }
  .qbhc-list a, .qbhc-theme { padding: .42rem .6rem; font-size: .82rem }
  .qbhc-footer .qbhc-inner { justify-content: flex-start }
}