.pn-site { position: relative; overflow-x: clip; }

.pn-masthead {
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.25rem;
  padding: .6rem var(--pn-inset);
  border-bottom: 1px solid var(--pn-rule);
  background: var(--pn-paper);
}

.pn-wordmark, .pn-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: var(--pn-ink);
  font-family: var(--pn-display);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -.01em;
  text-decoration: none;
}
.pn-wordmark:hover { color: var(--pn-ink); }
.pn-wordmark img, .pn-footer-brand img { width: 1.75rem; height: 1.75rem; }

.pn-nav { margin-left: auto; }
.pn-nav ul { display: flex; gap: 1.75rem; margin: 0; padding: 0; list-style: none; }
.pn-nav a { display: inline-block; padding: .5rem 0; color: var(--pn-ink); font-size: .97rem; font-weight: 500; text-decoration: none; border-bottom: 1px solid transparent; }
.pn-nav a:hover { border-bottom-color: var(--pn-prussian); color: var(--pn-prussian); }

.pn-footer { padding: clamp(3.5rem, 7vw, 5.5rem) var(--pn-inset) 2.5rem; background: var(--pn-prussian-deep); color: var(--pn-wash); }
.pn-footer a { color: var(--pn-white); }
.pn-footer a:hover { color: var(--pn-sun); }
.pn-footer-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1rem 3rem; align-items: end; }
.pn-footer-brand { margin: 0; color: var(--pn-white); font-size: clamp(2.6rem, 6vw, 4.5rem); line-height: 1; }
.pn-footer-brand img { width: .8em; height: .8em; }
.pn-footer-line { grid-column: 1; margin: 0; }
.pn-footer nav { grid-column: 2; grid-row: 1 / span 2; }
.pn-footer-links { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.pn-credit, .pn-legal { margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid rgb(169 199 221 / .3); }
.pn-credit { color: var(--pn-white); font-weight: 600; }
.pn-legal { font-size: .92rem; }

@media (min-width: 60rem) {
  .pn-masthead { position: sticky; top: 0; }
}

@media (max-width: 52rem) {
  .pn-masthead { flex-wrap: wrap; gap: .25rem 1rem; padding-block: .6rem .5rem; }
  .pn-wordmark { margin-right: auto; }
  .pn-nav { order: 3; width: 100%; }
  .pn-nav ul { gap: 1.25rem; }
  .pn-footer-grid { grid-template-columns: 1fr; }
  .pn-footer nav { grid-column: 1; grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}