/* The masthead, option A, "the broadsheet" (the owner, 12 Oct 2026).
   ---------------------------------------------------------------------------
   Loaded after custom.css, which still holds the bar's older rules; these win
   by being scoped to .header.osc-mh.

   THE FOOTPRINT IS THE OLD ONE, ON PURPOSE. The bar is fixed, and forty-odd
   templates clear it with their own top padding (pt-32, 120px, 160px...) --
   measured on 12 Oct, Photo of the Day had 7px to spare under a 125px bar and
   Local News 10px. So, unscrolled on a desktop: a 23px dateline strip, a 1px
   hairline, a 62px nameplate row, the 6px double rule, a 32px section row and
   a 1px edge: 125px. Scrolled, the strip and sections go and the bar is 63px.
   Below 1024px it is the nameplate row and the rule: 75px, the phone's old
   height. Change one of these numbers and the pages under the bar move.

   One serif family beside the blackletter -- Georgia, which the stories are
   set in -- and the paper's own colours: ink #141414, paper #FFFFF7, red
   #b21f2d. No photograph behind the bar: under a 90% wash it read as a smudge
   and muddied the nameplate. */

.header.osc-mh {
  background: #FFFFF7;
  color: #141414;
  padding: 0;
  text-align: center;
  border-bottom: 1px solid #e3ddd0;
  font-family: Georgia, 'Times New Roman', serif;
}
.header.osc-mh.shrink { height: auto; }

/* ---- the dateline strip: date, motto, weather (desktop only) ----------- */
.osc-mh-strip {
  display: none;
  height: 23px;
  padding: 0 32px;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid #ece6d8;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5a554a;
}
.osc-mh-date { justify-self: start; white-space: nowrap; }
.osc-mh-motto { font-style: italic; font-size: 12.5px; letter-spacing: 0.01em; text-transform: none; white-space: nowrap; }
header .osc-mh-wx { justify-self: end; white-space: nowrap; color: #5a554a; text-decoration: none; }
header .osc-mh-wx:hover { color: #b21f2d; }

/* ---- the nameplate row -------------------------------------------------- */
.osc-mh-row {
  height: 68px;
  padding: 0 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}
.osc-mh-left { justify-self: start; display: flex; align-items: center; }
.osc-mh-right { justify-self: end; display: flex; align-items: center; }
.osc-mh-center { margin-left: 0 !important; }

/* The sections button: a drawn icon, not a "☰" character at 40px. */
.header .osc-mh-menu {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  margin: 0;
  border: 0;
  background: transparent;
  color: #141414;
  font: inherit;
  cursor: pointer;
}
.header .osc-mh-menu:hover { color: #b21f2d; }
.header .osc-mh-menu:focus-visible { outline: 2px solid #b21f2d; outline-offset: 2px; }
.osc-mh-menu-icon { width: 24px; height: 24px; flex-shrink: 0; }
.osc-mh-menu-label { display: none; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }

.header .osc-mh-title { margin: 0; line-height: 1; white-space: nowrap; }
.header .osc-mh-title a { color: #141414; text-decoration: none; }

/* ---- the account side --------------------------------------------------- */
.osc-mh-account { align-items: center; gap: 16px; }
header .osc-mh-login {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #141414;
  text-decoration: none;
}
header .osc-mh-login:hover { color: #b21f2d; }
header .osc-mh-subscribe {
  display: inline-block;
  padding: 10px 16px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffffff;
  background: #b21f2d;
  border-radius: 2px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
header .osc-mh-subscribe:hover { background: #8f1824; color: #ffffff; }
.header.osc-mh .osc-account-trigger { flex-direction: row; gap: 8px; padding: 4px 6px; }
.header.osc-mh .osc-account-chip-avatar { width: 30px; height: 30px; background-color: #141414; }
.header.osc-mh .osc-account-chip-name { font-size: 13px; color: #141414; max-width: 170px; }
.header.osc-mh .osc-search-trigger { color: #141414; }
.header.osc-mh .osc-search-trigger:hover,
.header.osc-mh .osc-search-trigger[aria-expanded="true"] { color: #b21f2d; background: rgba(178, 31, 45, 0.08); }
.header.osc-mh .osc-search-trigger:focus-visible { outline-color: #b21f2d; }

/* ---- the double rule ---------------------------------------------------- */
.osc-mh-rule {
  height: 6px;
  margin: 0 16px;
  box-sizing: border-box;
  border-top: 3px solid #141414;
  border-bottom: 1px solid #141414;
}

/* ---- the sections (desktop only; the drawer has them on a phone) -------- */
.header .osc-mh-nav {
  height: 32px;
  margin: 0 !important;
  padding: 0 32px;
  align-items: center;
  justify-content: center;
  gap: 34px;
}
.header .osc-mh-nav > * { margin: 0 !important; }
.header .osc-mh-nav > a,
.header .osc-mh-nav .osc-nav-dd > a {
  padding: 4px 0;
  font-size: 13px !important;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: normal;
  color: #141414;
  text-decoration: none;
  white-space: nowrap;
}
.header .osc-mh-nav a:hover { color: #b21f2d; }
/* The section the reader is in: the paper's red, underlined. */
.header .osc-mh-nav a.active { color: #b21f2d; font-weight: normal; box-shadow: inset 0 -2px 0 #b21f2d; }
.header .osc-mh-nav a.hover-underline:hover::after { bottom: 0; background-color: #b21f2d; }
.header .osc-mh-nav a.active.hover-underline:hover::after { display: none; }
.header .osc-mh-nav .osc-nav-dd-toggle { color: #5a554a; }
.header .osc-mh-nav .osc-nav-dd-toggle:hover,
.header .osc-mh-nav .osc-nav-dd-toggle:focus-visible { color: #b21f2d; }
.header .osc-mh-nav .osc-nav-dd-toggle:focus-visible { outline-color: #b21f2d; }
/* The dropdown card, in the masthead's paper and red. */
.header .osc-mh-nav .osc-nav-dd-panel { padding-top: 10px; }
.header .osc-mh-nav .osc-nav-dd-panel::before { inset: 6px 0 0 0; background: #FFFFF7; border-color: #e3ddd0; border-top: 3px solid #b21f2d; border-radius: 0; }
header .osc-mh-nav .osc-nav-dd-panel a { font: 15px/1.3 Georgia, 'Times New Roman', serif; letter-spacing: 0; text-transform: none; color: #141414; }
header .osc-mh-nav .osc-nav-dd-panel a:hover,
header .osc-mh-nav .osc-nav-dd-panel a:focus-visible { background: #f3eee2; color: #b21f2d; }
header .osc-mh-nav .osc-nav-dd-panel a[aria-current="page"] { color: #b21f2d; box-shadow: inset 3px 0 0 #b21f2d; }

/* ---- desktop: the strip and the big nameplate --------------------------- */
@media (min-width: 1024px) {
  .header.osc-mh:not(.shrink) .osc-mh-strip { display: grid; }
  .osc-mh-row { height: 62px; padding: 0 24px; }
  .osc-mh-rule { margin: 0 32px; }
  .header.osc-mh.shrink .osc-mh-row { height: 56px; }
}
@media (min-width: 1025px) {
  .header.osc-mh h1.text-large { font-size: 50px; }
  .header.osc-mh h1.text-xsall { font-size: 30px; }
}
@media (min-width: 1280px) {
  .osc-mh-menu-label { display: inline; }
}
/* Seven sections and two carets: narrower desktops close the gaps up. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .header .osc-mh-nav { gap: 22px; }
  .osc-mh-motto { font-size: 11.5px; }
}