.showcase-header {
  --nav-gold: #e9c382;
  --nav-ivory: #f0eadc;
  --nav-muted: #c0c7c6;
  --nav-edge: #e0e6dd26;
  position: sticky;
  top: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  min-height: 70px;
  padding: 8px clamp(15px, 6.3vw, 106px);
  background: #10161bf5;
  color: var(--nav-ivory);
  border-bottom: 1px solid var(--nav-edge);
}
.showcase-header .brand { letter-spacing: .14em; gap: 9px; }
.showcase-header .seal { background: var(--nav-gold); width: 24px; height: 24px; }
.showcase-header .brand sup { color: var(--nav-gold); margin-left: -5px; }
.showcase-header nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px clamp(12px, 2.9vw, 44px); min-width: 0; font-size: .81rem; }
.showcase-header nav a { color: var(--nav-muted); white-space: nowrap; }
.showcase-header nav a:hover, .showcase-header nav [aria-current], .showcase-header nav .current-section { color: var(--nav-ivory); }
.showcase-header nav [aria-current], .showcase-header nav .current-section { text-decoration: underline; text-underline-offset: 7px; text-decoration-color: var(--nav-gold); }
.showcase-header .archive-link { color: var(--nav-gold); }
.showcase-header .nav-actions { display: flex; align-items: center; gap: 7px; }
.showcase-header .button { min-height: 42px; white-space: nowrap; padding: 8px 13px; gap: 8px; color: #1c1914; background: var(--nav-gold); border-color: var(--nav-gold); }
.showcase-header .nav-download { background: transparent; color: var(--nav-ivory); border-color: #e9c38280; }
.showcase-header .nav-download:hover { color: #1c1914; }
.showcase-header .button:hover { background: #f7d9a3; border-color: #f7d9a3; }
.showcase-header a:focus-visible { outline: 2px solid var(--nav-gold); outline-offset: 4px; }
.reading-progress { position: absolute; height: 2px; left: 0; bottom: -1px; width: 100%; background: var(--nav-gold); transform: scaleX(var(--read, 0)); transform-origin: left; }
@media (max-width: 760px) {
  .showcase-header { padding: 6px clamp(13px, 4vw, 29px) 8px; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; }
  .showcase-header .brand { grid-column: 1; }
  .showcase-header .nav-actions { grid-column: 2; grid-row: 1; }
  .showcase-header .button { min-height: 36px; padding-inline: 9px; gap: 5px; font-size: .75rem; }
  .showcase-header nav { grid-column: 1/-1; justify-content: space-between; gap: 7px; min-height: 38px; font-size: clamp(.64rem, 2.8vw, .79rem); }
  .showcase-header nav a { display: inline-flex; align-items: center; min-height: 35px; }
  .showcase-header nav [aria-current], .showcase-header nav .current-section { text-underline-offset: 5px; }
  .showcase-header .archive-link span { display: none; }
}
@media (max-width: 385px) {
  .showcase-header .brand { font-size: .78rem; letter-spacing: .08em; gap: 6px; }
  .showcase-header .button span { display: none; }
  .showcase-header nav { justify-content: flex-start; gap: 1px 12px; }
  .showcase-header nav a { white-space: normal; min-height: 28px; }
}