/* Copyright (c) 2025-2026 CS Inspiration. All Rights Reserved.
   VietAlpha - https://csinspiration.org
   Site masthead, shared by every page: centred VietAlpha wordmark, Research /
   News on the left, LumiToán / About / EN·VI on the right as quiet pills, a
   drawer below 960px, and the wordmark's collapse to the Vα monogram on
   scroll (site-header.js toggles the state; the choreography is below).
   Self-contained: the pages that load it (homepage family, research and news
   indexes, articles) declare different tokens and resets, so everything the
   header needs is scoped here. Markup:
     header.site-head > .site-head-row > a.brand[aria-label=VietAlpha] + nav.site-nav
       > button.nav-toggle + ul.site-menu#site-menu
     a.brand > .brand-mark[aria-hidden] > .bm-v + .bm-fold + .bm-a + .bm-fold + svg.bm-mono */

/* In-page anchors land below the sticky masthead (69px) with some air. */
html { scroll-padding-top: 92px; }

.site-head {
  --sh-cream: #F4EFE6;
  --sh-ink: #111111;
  --sh-mid: #5A5550;
  --sh-rule: rgba(17, 17, 17, 0.16);
  --sh-rule-soft: rgba(17, 17, 17, 0.09);
  --sh-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sh-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Same wide frame as the homepage: 5vw gutters, 1600px of content. */
  --sh-pad: clamp(20px, 5vw, 96px);
  --sh-frame: calc(1600px + 2 * var(--sh-pad));
  /* Wordmark collapse (site-header.js toggles .is-compact past 80px of
     scroll, back below 32px). The wordmark folds to its initials: "iet" and
     "lpha" retract, the serif V and A hand over to the geometric V and alpha
     of the monogram (.bm-mono, inline SVG traced from
     assets/brand/va-monogram-source.png). Two beats on the way in, fold then
     resolve; the reverse on the way out. The brand box has a fixed height and
     clips, so neither state nor the tween changes the header's height, and
     the nav never moves because the mark is centred in its own grid cell. */
  --bm-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --bm-fold: 420ms;
  --bm-mono-h: 17px;   /* cap height of the monogram V */
  --bm-mono-dy: 0px;   /* optical nudge against the serif baseline */

  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--sh-cream);
  color: var(--sh-ink);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.site-head.is-scrolled { border-bottom-color: var(--sh-rule); }

.site-head *,
.site-head *::before,
.site-head *::after { box-sizing: border-box; }
.site-head ul,
.site-head li { margin: 0; padding: 0; }
.site-head a { color: inherit; }
.site-head :focus-visible {
  outline: 2px solid var(--sh-ink);
  outline-offset: 3px;
}

.site-head .visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.site-head .ext-mark {
  display: inline-block;
  margin-left: 0.3em;
  font-size: 0.72em;
  transform: translateY(-0.18em);
}

/* Brand and nav share one grid cell; the nav's own flex row splits into left
   and right groups around it, so the wordmark stays centred however unequal
   the groups are. */
.site-head-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  max-width: var(--sh-frame);
  margin: 0 auto;
  padding: 16px var(--sh-pad);
}

.brand {
  grid-area: 1 / 1;
  justify-self: center;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: 36px;
  overflow: hidden;
  text-decoration: none;
}
.brand-mark {
  position: relative;
  display: inline-flex;
  font-family: var(--sh-serif);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
/* Expanded state, with the timings of the way back out: the monogram lets
   go first (alpha, then V), the serif V and A return under it, then the
   folded letters unroll. Each .bm-fold is a one-track grid whose track goes
   1fr -> 0fr; the inner span clips, so its letters are eaten from the A's
   side as the cell closes. */
.bm-v,
.bm-a {
  display: block;
  transition: opacity 200ms ease 80ms;
}
.bm-fold {
  display: inline-grid;
  grid-template-columns: 1fr;
  transition: grid-template-columns var(--bm-fold) var(--bm-ease) 40ms;
}
.bm-fold span {
  min-width: 0;
  overflow: hidden;
  transition: opacity var(--bm-fold) var(--bm-ease) 40ms, transform var(--bm-fold) var(--bm-ease) 40ms;
}
.bm-mono {
  position: absolute;
  left: 50%;
  top: 50%;
  height: var(--bm-mono-h);
  width: auto;
  overflow: visible;
  fill: currentColor;
  pointer-events: none;
  transform: translate(-50%, calc(-50% + var(--bm-mono-dy))) scale(0.92);
  transition: transform 200ms var(--bm-ease);
}
.bm-mono-v,
.bm-mono-a { opacity: 0; }
.bm-mono-v { transition: opacity 160ms ease 40ms; }
.bm-mono-a { transition: opacity 160ms ease; }

/* Collapsed state: fold, then resolve. The A sweeps back to the V over the
   first beat; the serif pair and the monogram cross-fade over the second,
   the alpha landing a touch after the V so the lock-together comes last. */
.site-head.is-compact .bm-v,
.site-head.is-compact .bm-a {
  opacity: 0;
  transition: opacity 200ms ease 200ms;
}
.site-head.is-compact .bm-fold {
  grid-template-columns: 0fr;
  transition-delay: 0ms;
}
.site-head.is-compact .bm-fold span {
  opacity: 0;
  transform: translateY(-22%);
  transition: opacity var(--bm-fold) var(--bm-ease), transform var(--bm-fold) var(--bm-ease);
}
.site-head.is-compact .bm-mono {
  transform: translate(-50%, calc(-50% + var(--bm-mono-dy))) scale(1);
  transition: transform 380ms var(--bm-ease) 200ms;
}
.site-head.is-compact .bm-mono-v,
.site-head.is-compact .bm-mono-a { opacity: 1; }
.site-head.is-compact .bm-mono-v { transition: opacity 260ms ease 200ms; }
.site-head.is-compact .bm-mono-a { transition: opacity 260ms ease 260ms; }
/* First paint and back/forward restores land in place without a tween. The
   second selector matches the specificity of the compact rules above. */
.site-head.no-anim .brand-mark *,
.site-head.is-compact.no-anim .brand-mark * { transition: none; }

.site-nav {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  margin: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--sh-sans);
  font-size: 14px;
  color: var(--sh-ink);
  padding: 8px 2px;
}
.nav-toggle-bars {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  width: 18px;
}
.nav-toggle-bars span {
  height: 1.5px;
  background: var(--sh-ink);
  transition: transform 0.25s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:first-child {
  transform: translateY(3.25px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

.site-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  list-style: none;
}
/* Research and News form the left group; everything after News is pushed to
   the right gutter. Every page carries the same first two items. */
.site-menu > li:nth-child(2) { margin-right: auto; }

.site-menu a {
  font-family: var(--sh-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--sh-ink);
  text-decoration: none;
  transition: color 0.18s ease;
}

/* Quiet outlined pills. The Research link and its drop-down caret share one
   pill (.va-models-row is injected by nav-models.js); without JS the plain
   link is the pill. */
.site-menu > li > a,
.site-menu .va-models-row,
.lang-switch {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--sh-rule);
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.025);
  white-space: nowrap;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.site-menu > li > a:hover,
.site-menu .va-models-row:hover,
.lang-switch:hover {
  background: rgba(17, 17, 17, 0.06);
  border-color: rgba(17, 17, 17, 0.28);
}
.site-menu > li > a:focus-visible { outline-offset: 2px; border-radius: 999px; }
.site-menu a.is-current { border-color: rgba(17, 17, 17, 0.55); }

.site-menu .va-models-row { gap: 4px; padding-right: 8px; }
.site-menu .va-models-toggle { width: 22px; height: 22px; border-radius: 999px; opacity: 0.7; }

.menu-anchor { display: none; }

.lang-switch {
  gap: 10px;
  padding: 0 14px;
}
.lang-switch .lang-opt {
  font-family: var(--sh-sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--sh-mid);
  text-decoration: none;
  padding: 4px 2px;
}
.lang-switch .lang-opt.is-current {
  color: var(--sh-ink);
  text-decoration: underline;
  text-underline-offset: 5px;
}
.lang-switch .lang-opt:hover { color: var(--sh-ink); }
.lang-sep {
  width: 1px;
  height: 12px;
  background: var(--sh-rule);
}

/* Drawer. 960px is where the right nav group (longest in Vietnamese) would
   otherwise reach the centred wordmark. Keep in step with the drawer block in
   nav-models.css. */
@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }

  .site-head { border-bottom-color: var(--sh-rule); }

  .site-menu {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    width: auto;
    background: var(--sh-cream);
    border-bottom: 1px solid var(--sh-rule);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 6px var(--sh-pad) 22px;
  }
  .site-nav.open .site-menu { display: flex; }
  .site-menu li { width: 100%; }
  .site-menu > li:nth-child(2) { margin-right: 0; }
  .site-menu a,
  .site-menu > li > a {
    display: block;
    height: auto;
    padding: 12px 0;
    font-size: 16px;
    border: 0;
    border-top: 1px solid var(--sh-rule-soft);
    border-radius: 0;
    background: none;
  }
  .site-menu > li > a:hover { background: none; text-decoration: underline; text-underline-offset: 5px; }
  .site-menu a.is-current { text-decoration: underline; text-underline-offset: 5px; }
  .site-menu .va-models-row { height: auto; padding: 0; border: 0; border-radius: 0; background: none; }
  .site-menu li:first-child a { border-top: 0; }
  .menu-anchor { display: block; }
  .menu-lang { padding-top: 16px; }
  .lang-switch { height: auto; padding: 0; border: 0; border-radius: 0; background: none; }

  /* Without JS the toggle can't open anything: hide it and set the menu
     inline under the wordmark so every link stays reachable. Pages set
     html.js from an inline head script. */
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .site-nav { grid-area: 2 / 1; padding-top: 12px; }
  html:not(.js) .site-menu {
    display: flex;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 20px;
    padding: 0;
    border: 0;
  }
  html:not(.js) .site-menu li { width: auto; }
  html:not(.js) .site-menu a { border-top: 0; padding: 6px 0; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-head,
  .site-menu a,
  .site-menu > li > a,
  .nav-toggle-bars span,
  .site-head .brand-mark *,
  .site-head.is-compact .brand-mark * { transition: none; }
}