/* ==========================================================================
   SITE HEADER — one component for every reader page
   ==========================================================================
   Rendered by /header.js into <div id="site-header">. The block is the
   same everywhere: the wren and the wordmark, the tagline, then the star
   band carrying the edition date between two rules. Below the band, on
   every page but the home page, the back link. Only the band's colour
   varies by section, set per page as data-accent on the mount; the
   wordmark, tagline and date never change colour.

   Pages carry no copy of these rules: change them here, and every page
   follows.
   ========================================================================== */
.masthead { padding: 48px 0 0; position: relative; }
.masthead-top { text-align: center; }
.masthead-brand { display: flex; align-items: center; justify-content: center; gap: 12px; }
.masthead-logo { height: 60px; width: auto; }
.paper-name {
  font-family: "Playfair Display", serif; font-size: clamp(34px, 8.5vw, 54px); font-weight: 700;
  letter-spacing: -1.5px; line-height: 0.95; color: var(--ink); margin: 0;
}
/* The link home lives inside the h1 and holds both the wren and the
   wordmark. Its layout is the brand row's own (flex, 12px gap), so
   nothing moves; the wordmark underlines on hover, and keyboard focus
   draws a copper ring around the pair. */
.masthead-home { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; border-radius: 6px; }
.paper-name-text { text-decoration: underline transparent; text-decoration-thickness: 2px; text-underline-offset: 0.14em; transition: text-decoration-color 0.15s ease; }
.masthead-home:hover .paper-name-text { text-decoration-color: var(--copper); }
.masthead-home:focus-visible { outline: 2px solid var(--copper); outline-offset: 6px; }
.masthead-tagline {
  font-family: "Source Serif 4", Georgia, serif; font-style: italic; font-size: clamp(16px, 3.6vw, 18px);
  color: var(--ink-mid); margin-top: 4px; text-align: center;
}
.masthead-strip { text-align: center; padding: 14px 0 14px; }
/* The band: one pair of rules holding the date. */
.edition-band {
  padding: 9px 0;
  border-top: 1px solid var(--header-accent, var(--copper));
  border-bottom: 1px solid var(--header-accent, var(--copper));
}
.edition-banner {
  display: block;
  font-family: "DM Mono", monospace;
  font-variant-caps: small-caps;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--header-accent, var(--copper));
}

/* The compact masthead (data-compact): the same pieces, closer together,
   for a page that needs its viewport. Wren 40px, wordmark smaller, no
   tagline, the band tight under the brand. */
.masthead.is-compact { padding-top: 14px; }
.masthead.is-compact .masthead-logo { height: 40px; }
.masthead.is-compact .paper-name { font-size: clamp(28px, 7vw, 40px); letter-spacing: -1px; }
.masthead.is-compact .masthead-strip { padding: 8px 0 4px; }
.masthead.is-compact .edition-band { padding: 7px 0; }

/* The back link: directly under the date, on every page but the home page. */
.back-to-today {
  display: block; text-align: center; font-family: "DM Mono", monospace; font-size: 11px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--copper); text-decoration: none;
  /* 44px of thumb without moving anything: the extra padding is handed
     straight back to the layout by the negative margins. */
  padding: 10px 0 16px; margin: -6px 0;
}
.back-to-today:hover { text-decoration: underline; }

/* A sub-page's own title: a modest heading, since the band and the back
   link already say where the reader is. */
.page-title {
  font-family: "Playfair Display", serif; font-weight: 700; font-size: 22px; line-height: 1.25;
  letter-spacing: -0.2px; text-align: center; color: var(--ink); margin: 18px 0 4px;
}

/* The header spans the page column, so the column's side gutter has to
   be the same on every page for the band's rules to line up. This is the
   home page's phone gutter. */
@media (max-width: 480px) {
  body { padding-left: 16px; padding-right: 16px; }
  .masthead-strip { padding-bottom: 6px; }
}

/* THE MENU — the ☰ button in the masthead's top corner, and the
   full-screen cream takeover it opens. Rendered by header.js on every
   page. Fades in and out (no slide); a modal dialog hidden from focus
   and assistive tech when closed, the page behind it locked while open. */
.hamburger-btn {
  position: absolute; top: 8px; right: 4px; z-index: 20;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; font-size: 22px; line-height: 1; color: var(--ink);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.hamburger-btn:hover { color: var(--copper); }
.hamburger-btn:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; border-radius: 6px; }
.menu-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: var(--ground);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  overflow-y: auto;
}
.menu-overlay.open { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
body.menu-open { position: fixed; width: 100%; overflow: hidden; }
.menu-content {
  max-width: 420px; margin: 0 auto; min-height: 100%;
  display: flex; flex-direction: column;
  padding: calc(6px + env(safe-area-inset-top, 0px)) 20px 20px;
}
.menu-bar { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin: 0 -6px 4px 0; }
/* The menu's masthead is the link home, with the page masthead's own
   hover underline and focus ring. */
.menu-brand { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 6px; margin-left: -6px; font-family: "Playfair Display", serif; font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -0.2px; text-decoration: none; border-radius: 6px; }
.menu-brand-text { text-decoration: underline transparent; text-decoration-thickness: 2px; text-underline-offset: 0.14em; transition: text-decoration-color 0.15s ease; }
.menu-brand:hover .menu-brand-text { text-decoration-color: var(--copper); }
.menu-brand:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
.menu-logo { width: 30px; height: 30px; object-fit: contain; }
.menu-close {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; font-size: 30px; line-height: 1;
  color: var(--copper); cursor: pointer; padding: 0; border-radius: 22px;
  -webkit-tap-highlight-color: transparent;
}
.menu-close:hover { color: var(--copper-hover); }
.menu-group { margin-top: 8px; }
.menu-group + .menu-group { margin-top: 14px; }
.menu-group-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 7px; border-bottom: 1px solid var(--copper);
}
.menu-group-label {
  margin: 0; font-family: "DM Mono", monospace; font-weight: 500; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--copper);
}
.menu-group-hint { font-family: "Source Serif 4", Georgia, serif; font-style: italic; font-size: 13px; color: var(--grey); }
.menu-group-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; margin: 0; padding: 0; list-style: none; }
.menu-link {
  display: flex; align-items: center; min-height: 48px; padding: 0 2px;
  font-family: "Source Serif 4", Georgia, serif; font-size: 17px; line-height: 1.25;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule);
  -webkit-tap-highlight-color: transparent;
}
.menu-link:hover, .menu-link:active { color: var(--copper); }
.menu-link:focus-visible, .menu-close:focus-visible { outline: 2px solid var(--copper); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
  .menu-overlay, .menu-overlay.open { transition: none; }
}