/* Shared Fable enhancement layer: complete navigation, persistent utilities, one clear sign-in action. */
:root{--signin-ink:var(--ink);--language-brand:var(--brand-bright,var(--gold))}
html[data-theme="dark"]{--signin-ink:var(--stage,var(--bg))}

.brandline b,.fbrand,.stage-brand{font-family:var(--disp);font-style:normal}
.brand-locale-word{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--language-brand)}

header.site .signin{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 18px;
  border-radius:999px;
  background:var(--brand-bright,var(--gold));
  color:var(--signin-ink);
  font-family:var(--disp);
  font-size:12.5px;
  font-weight:750;
  white-space:nowrap;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
header.site .signin:hover{color:var(--signin-ink);transform:translateY(-1px);box-shadow:var(--float)}
header.site .hd-cta{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--hair2);
  box-shadow:none;
}
header.site nav.pillnav a{white-space:nowrap}

@media(max-width:920px){
  header.site{padding:10px 0}
  header.site .wrap{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"brand actions" "nav nav";
    gap:9px 14px;
    align-items:center;
  }
  header.site .brandline{grid-area:brand;min-width:0}
  header.site .brandline b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  header.site nav.pillnav{
    grid-area:nav;
    display:flex;
    width:100%;
    max-width:none;
    justify-content:safe center;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
  }
  header.site nav.pillnav::-webkit-scrollbar{display:none}
  header.site nav.pillnav a{display:block;flex:0 0 auto;padding:7px 13px}
  header.site .hd-right,
  header.site .hd-user{grid-area:actions;display:flex;gap:8px;justify-content:flex-end;min-width:0}
  header.site .utils{display:flex;flex:none}
  header.site .signin{display:inline-flex}
  header.site .hd-cta{display:none}
}

@media(max-width:560px){
  header.site .wrap{padding-inline:14px;gap:8px 10px}
  header.site .brandline b{display:none}
  header.site .utils button{padding:5px 8px}
  header.site .signin{min-height:34px;padding:6px 13px;font-size:11.5px}
  header.site nav.pillnav a{padding:6px 11px;font-size:11.5px}
  header.site .chiplet{display:none}
  body:has(.mhero) .stats{grid-template-columns:1fr}
}

/* header wrap fix 2026-07-16: crowded room headers flex-squeeze the brand and CTA */
.brandline b,.hd-cta,.signin{white-space:nowrap}