/* ── masthead ───────────────────────────────────────────────────────────
   Generated into every page from templates/masthead.css. The links used to
   exist on the front page and on articles and nowhere else, so clicking
   "Market" took the reader to a page with no way back to any other section —
   a dead end at the exact moment they were browsing. One definition now,
   injected everywhere, because three copies is how it drifted in the first
   place.

   Scoped to .mast-inner rather than the .page container the front page uses:
   the listing templates have no .page rule and article.html sizes its own,
   so a shared .page here would either miss or collide. */

.mast-inner { max-width: 1240px; margin: 0 auto; padding: 0 28px; }

/* The hand-written pages underline every link by default, which put a gold rule
   under the nameplate. The masthead's own links are furniture, not references,
   so it states its own baseline rather than depending on the host page's. */
.utility a,
.nameplate a { border: 0; text-decoration: none; }

.utility {
  border-bottom: 1px solid var(--rule-soft, #ECEEF1);
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.utility .mast-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 34px;
}
.utility a { color: inherit; text-decoration: none; }
.utility a:hover { color: var(--gold); }
/* The edition line replaces the "Front page" link when JavaScript runs. It is a
   <time>, not an <a>, so it inherits none of the link rules above; matching the
   surrounding type here keeps the bar from shifting when the swap happens. */
.utility .edition { font: inherit; letter-spacing: inherit; color: inherit; }

.nameplate { text-align: center; padding: 26px 0 18px; }
.nameplate a { text-decoration: none; }
.nameplate-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: clamp(38px, 8vw, 74px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
  display: inline-block;
}
.nameplate-rule {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 560px;
  margin: 12px auto 0;
}
.nameplate-rule::before,
.nameplate-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.nameplate-sub {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}

/* The double rule is the one piece of pure newspaper furniture here, and it
   earns its place: it marks where the paper's identity ends and the day's
   news begins. */
nav.sections { border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); }
nav.sections .mast-inner {
  display: flex;
  gap: 30px;
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: none;
}
nav.sections .mast-inner::-webkit-scrollbar { display: none; }
nav.sections a {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  padding: 11px 0;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
nav.sections a:hover { border-bottom-color: var(--gold-soft); }
nav.sections a.subscribe { color: var(--gold); font-weight: 500; }

/* Where the reader is. Without it the nav answers "where can I go" but not
   "where am I", which on a listing page titled only "Market" is the question
   the row is there to settle. */
nav.sections a[aria-current="page"] {
  color: var(--gold-strong);
  border-bottom-color: var(--gold);
}

@media (max-width: 768px) {
  .mast-inner { padding: 0 18px; }
  nav.sections .mast-inner { gap: 22px; justify-content: flex-start; }
}