/* Persistent wayfinding: keep the primary navigation legible while long
   editorial sections scroll, and hint at the lower content directory on entry. */
html{scroll-padding-top:82px}
.masthead{
  --brand-scale:1;
  position:sticky;
  top:0;
  z-index:30;
  width:100%;
  margin:0;
  padding-inline:var(--pad);
  background:rgba(9,11,10,.96);
  box-shadow:0 1px 0 var(--line);
  backdrop-filter:blur(16px) saturate(1.08);
  -webkit-backdrop-filter:blur(16px) saturate(1.08);
  transition:height .28s cubic-bezier(.2,.7,.2,1),background-color .28s ease,box-shadow .28s ease;
}
.masthead .brand{
  transform:translate3d(0,0,0) scale(var(--brand-scale));
  transform-origin:left center;
  backface-visibility:hidden;
  will-change:transform;
  transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
body.has-scrolled .masthead{
  --brand-scale:.83783784;
  height:64px;
  background:rgba(6,8,7,.9);
  box-shadow:0 1px 0 #ffffff2b,0 12px 34px #0008;
}
body.has-scrolled .masthead .brand-caption{opacity:.66}

.page-depth-cue{
  position:fixed;
  z-index:8;
  right:max(14px,calc(var(--pad) / 2));
  bottom:132px;
  display:none;
  grid-template-columns:auto 1px;
  align-items:end;
  gap:10px;
  min-height:96px;
  padding:0;
  color:#e8eadf;
  font-size:8px;
  letter-spacing:.16em;
  writing-mode:vertical-rl;
  text-transform:uppercase;
  text-shadow:0 2px 12px #000;
}
.page-depth-cue:after{
  content:"";
  display:block;
  width:1px;
  height:72px;
  background:linear-gradient(180deg,var(--signal),transparent);
  transform-origin:top;
  animation:pageDepthPulse 1.8s ease-in-out infinite;
}
body[data-route="edit"]:not(.has-scrolled):not(:has(dialog[open])) .page-depth-cue{display:grid}
.page-depth-cue:hover,.page-depth-cue:focus-visible{color:var(--signal)}
@keyframes pageDepthPulse{0%,100%{transform:scaleY(.45);opacity:.45}50%{transform:scaleY(1);opacity:1}}

@media(max-width:760px){
  html{scroll-padding-top:72px}
  .masthead{padding-inline:var(--pad)}
  body.has-scrolled .masthead{--brand-scale:.87878788;height:60px}
  .page-depth-cue{right:8px;bottom:112px;min-height:78px;font-size:7px}
  .page-depth-cue:after{height:54px}
}

@media(prefers-reduced-motion:reduce){
  .masthead,.masthead .brand{transition:none}
  .page-depth-cue:after{animation:none;transform:none}
}