.nav-stack {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  display: flow-root;
}
.nav-stack .site-nav {
  position: static;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: hidden;
}

.nav-mast {
  padding: 10px 26px 0;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  transform-origin: top center;
  background: var(--paper);
}
.nav-mast .dateline {
  font-family: 'Spectral', serif; font-style: italic;
  font-size: 11px; color: var(--ink-2); letter-spacing: 0.03em;
  display: flex; justify-content: center; align-items: center; gap: 12px;
  padding: 0 0 6px;
}
.nav-mast .dateline .rule { flex: 1; max-width: 80px; height: 1px; background: var(--rule); }
.nav-mast .brand {
  text-align: center;
  font-family: 'Newsreader', serif; font-weight: 400;
  font-size: 44px; letter-spacing: -0.025em; line-height: 1;
  margin: 4px 0 2px; color: var(--ink);
}
.nav-mast .brand em {
  font-style: italic; color: var(--accent);
  display: inline-block; transform: rotate(-4deg); transform-origin: bottom left;
}
.nav-mast .strap {
  text-align: center; font-style: italic; font-size: 12px;
  color: var(--ink-2); margin: 0 0 8px;
}
.nav-mast .row {
  display: flex; align-items: baseline; justify-content: space-between;
  border-top: 1px solid var(--rule); padding: 9px 0 10px;
  font-family: 'Spectral', serif;
}
.nav-mast .row .links { display: flex; gap: 22px; align-items: baseline; }
.nav-mast .row .links a { color: var(--ink); text-decoration: none; font-size: 14px; font-style: italic; }
.nav-mast .row .links a .num { color: var(--ink-3); margin-right: 4px; font-variant-numeric: oldstyle-nums; font-style: italic; }
.nav-mast .row .links a.on { border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
.nav-mast .row .cta { font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; }
.nav-mast .row .cta em { font-style: italic; color: var(--accent); font-weight: 500; }
.nav-mast .row .cta .arrow { color: var(--accent); margin-left: 6px; }
.nav-mast .row .row-end { display: flex; align-items: baseline; gap: 16px; }
.nav-mast .row .support {
  font-family: 'Spectral', serif; font-style: italic; font-size: 14px;
  color: var(--ink-2); text-decoration: none;
  transition: color 150ms ease;
}
.nav-mast .row .support:hover { color: var(--accent); }
.nav-mast .row .sep {
  font-family: 'Newsreader', serif; font-size: 13px;
  color: var(--ink-3); line-height: 1; user-select: none;
}

.nav-stack .site-nav { display: none; }

.nav-mast {
  overflow: hidden;
  box-sizing: border-box;
  animation: nav-shell-to-pill linear both;
  animation-timeline: scroll(root);
  animation-range: 0 220px;
}
@keyframes nav-shell-to-pill {
  0% {
    max-height: 280px;
    padding: 10px 26px 0;
    margin: 0;
    border-top:    1px solid transparent;
    border-left:   1px solid transparent;
    border-right:  1px solid transparent;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
    background: var(--paper);
    box-shadow: none;
  }
  100% {
    max-height: 56px;
    padding: 16px 24px;
    margin: 10px 7vw 18px;
    border-top:    1px solid var(--rule);
    border-left:   1px solid var(--rule);
    border-right:  1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--paper);
    box-shadow: 0 10px 30px -14px rgb(28 28 30 / 0.35);
  }
}

.nav-mast .dateline {
  animation: nav-collapse-aux linear both;
  animation-timeline: scroll(root);
  animation-range: 0 50px;
  overflow: hidden;
}
@keyframes nav-collapse-aux {
  0%   { opacity: 1; max-height: 30px; padding-bottom: 6px; }
  100% { opacity: 0; max-height: 0;    padding-bottom: 0; }
}

.nav-mast .strap {
  animation: nav-collapse-strap linear both;
  animation-timeline: scroll(root);
  animation-range: 30px 100px;
  overflow: hidden;
}
@keyframes nav-collapse-strap {
  0%   { opacity: 1; max-height: 20px; margin-bottom: 8px; }
  100% { opacity: 0; max-height: 0;    margin-bottom: 0; }
}

.nav-mast .brand {
  animation: nav-brand-morph linear both;
  animation-timeline: scroll(root);
  animation-range: 30px 200px;
  transform-origin: center;
  margin: 4px 0 2px;
}
@keyframes nav-brand-morph {
  0%   { font-size: 44px; transform: translate(0, 0);          margin: 4px 0 2px; }
  100% { font-size: 22px; transform: translate(-38vw, 0);      margin: 0; }
}

.nav-mast .row {
  animation: nav-row-lift linear both;
  animation-timeline: scroll(root);
  animation-range: 50px 200px;
}
@keyframes nav-row-lift {
  0%   { transform: translateY(0);     border-top: 1px solid var(--rule);       padding: 9px 0 10px; }
  100% { transform: translateY(-22px); border-top: 1px solid transparent;      padding: 0; }
}

.nav-mast .row .links {
  --nav-shift: 46vw;
  animation: nav-links-slide linear both;
  animation-timeline: scroll(root);
  animation-range: 50px 200px;
}
@media (max-width: 1080px) {
  .nav-mast .row .links { --nav-shift: 36vw; }
}
@keyframes nav-links-slide {
  0%   { transform: translateX(0);              gap: 22px; }
  100% { transform: translateX(var(--nav-shift)); gap: 14px; }
}

.nav-mast .row .row-end {
  animation: nav-cta-shift linear both;
  animation-timeline: scroll(root);
  animation-range: 50px 200px;
}
@keyframes nav-cta-shift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-2vw); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-mast, .nav-mast .brand, .nav-mast .dateline, .nav-mast .strap,
  .nav-mast .row, .nav-mast .row .links, .nav-mast .row .row-end {
    animation: none; opacity: 1; max-height: none; transform: none;
  }
  .nav-mast .brand { font-size: 44px; }
}

@media (max-width: 820px) {
  .nav-mast { display: none; }
  .nav-stack .site-nav { display: block; }
  .nav-stack {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}