/* WorldRewind shared site header. Every page uses the same markup:

   <header class="wr-head">
     <a class="wr-brand" href="/">World<em>Rewind</em></a>
     <span class="wr-tag">An atlas of world history</span>
     <nav class="wr-menu" aria-label="Site">
       <a href="/">Globe</a><a href="/history">Stories</a><a href="/stats">Stats</a><a href="/#about">About</a>
     </nav>
   </header>

   Mark the current page with aria-current="page". No rule or border under it: the page fades in below. */
.wr-head {
  display: flex; align-items: baseline; gap: 12px; position: relative; z-index: 5;
  /* same side gutter as the page content below, so everything lines up edge to edge */
  padding: 14px max(16px, env(safe-area-inset-right, 0px), min(4vw, 56px)) 8px max(16px, env(safe-area-inset-left, 0px), min(4vw, 56px));
  font-family: "IM Fell English", "Iowan Old Style", Georgia, serif;
}
.wr-brand { font: 400 26px/1 "IM Fell English", "Iowan Old Style", Georgia, serif; letter-spacing: .01em; color: var(--ink, #2b2116); text-decoration: none; white-space: nowrap; }
.wr-brand em { color: var(--accent, #a8341c); }
.wr-brand:hover { color: var(--ink, #2b2116); }
.wr-tag { font: 15px/1 "IM Fell English SC", "IM Fell English", Georgia, serif; letter-spacing: .06em; color: var(--muted, #7a6a54); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wr-menu { display: flex; gap: 18px; margin-left: auto; flex: none; }
.wr-menu a { position: relative; font: 15px/1 "IM Fell English SC", "IM Fell English", Georgia, serif; letter-spacing: .06em; color: var(--muted, #7a6a54); text-decoration: none; padding: 4px 0; transition: color .2s; }
.wr-menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent, #a8341c); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.wr-menu a:hover, .wr-menu a:focus-visible, .wr-menu a[aria-current="page"] { color: var(--accent, #a8341c); }
.wr-menu a:hover::after, .wr-menu a:focus-visible::after, .wr-menu a[aria-current="page"]::after { transform: scaleX(1); }
@media (max-width: 720px) { .wr-tag { display: none; } .wr-menu { gap: 14px; } }
/* On phones the wordmark already leads to the globe, so the Globe link steps aside to keep one line */
@media (max-width: 480px) { .wr-menu a[href="/"] { display: none; } }
@media (max-width: 360px) { .wr-brand { font-size: 22px; } .wr-menu { gap: 11px; } .wr-menu a { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .wr-menu a, .wr-menu a::after { transition: none; } }