/* R19 shared molten masthead: one header and menu across every TOTM route. */
.site-header {
  position: relative;
  isolation: isolate;
  display: block;
  width: min(1500px, calc(100% - 48px));
  min-height: 0;
  margin: 18px auto 0;
  overflow: hidden;
  border: 1px solid rgba(255,106,61,.32);
  border-radius: 10px 10px 0 0;
  background:
    radial-gradient(ellipse at 8% -45%, rgba(255,122,63,.58) 0, rgba(164,54,27,.34) 29%, transparent 61%),
    radial-gradient(ellipse at 76% 155%, rgba(255,81,31,.24) 0, transparent 55%),
    linear-gradient(112deg, #3a1711 0%, #211311 42%, #0c0d0e 82%);
  box-shadow: 0 20px 60px rgba(0,0,0,.34), inset 0 1px rgba(255,165,113,.12);
}
.site-header::before {
  position: absolute;
  z-index: -1;
  inset: -75% 24% 34% -12%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,128,68,.34), rgba(229,72,34,.14) 42%, transparent 72%);
  filter: blur(18px);
  transform: rotate(-6deg);
  content: '';
}
.site-header::after {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 53px;
  left: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,106,61,.72) 18%, rgba(255,167,119,.36) 48%, rgba(255,106,61,.42) 82%, transparent);
  box-shadow: 0 0 14px rgba(255,106,61,.22);
  content: '';
}
.header-brand-row {
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 8vw, 8rem);
  padding: 1.1rem clamp(1.25rem, 2.5vw, 2.25rem);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  color: var(--paper);
  font-size: clamp(1.7rem, 3vw, 2.65rem);
  font-weight: 800;
  letter-spacing: -.095em;
  text-decoration: none;
}
.wordmark > span:not(.signal), .wordmark-name > span { color: var(--orange); }
.wordmark em { color: var(--paper); font-style: normal; }
.wordmark-lockup { display: grid; gap: .22rem; }
.wordmark-name { display: inline-flex; align-items: baseline; line-height: .78; }
.wordmark-separator {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--orange) 0 25%, #e5484d 25% 50%, var(--paper) 50% 75%, #3b82f6 75% 100%);
  box-shadow: 0 0 12px rgba(255,106,61,.16);
}
.wordmark-subtitle {
  color: var(--orange);
  font-size: clamp(.64rem, .9vw, .82rem);
  font-weight: 800;
  line-height: .92;
  letter-spacing: .06em;
  text-transform: lowercase;
  white-space: nowrap;
  text-shadow: 0 0 18px rgba(255,106,61,.24);
}
.signal { margin-right: .42rem; color: var(--orange); font-size: .45em; filter: drop-shadow(0 0 9px rgba(255,106,61,.66)); }
.header-nav {
  min-height: 54px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  background: linear-gradient(180deg, rgba(8,9,10,.78), rgba(5,6,7,.94));
  backdrop-filter: blur(10px);
}
.site-header nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(90px, 1fr));
  gap: 0;
  width: min(760px, 100%);
}
.site-header nav a {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 53px;
  padding: 0 1.25rem;
  border-right: 1px solid rgba(242,238,230,.09);
  color: var(--paper-soft);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .18s ease, background .18s ease;
}
.site-header nav a::after {
  position: absolute;
  right: 28%;
  bottom: 0;
  left: 28%;
  height: 2px;
  background: var(--orange);
  opacity: 0;
  transform: scaleX(.4);
  transition: opacity .18s ease, transform .18s ease;
  content: '';
}
.site-header nav a:is(:hover, :focus-visible),
.site-header nav a.active,
.site-header nav a[aria-current='page'] { background: rgba(255,106,61,.08); color: var(--paper); outline: none; }
.site-header nav a:is(:hover, :focus-visible)::after,
.site-header nav a.active::after,
.site-header nav a[aria-current='page']::after { right: 28%; bottom: 0; left: 28%; opacity: 1; transform: scaleX(1); }
.quiet-button {
  padding: .72rem .9rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--paper);
  font-size: .68rem;
  letter-spacing: .09em;
  text-decoration: none;
  text-transform: uppercase;
}
.quiet-button:is(:hover, :focus-visible) { border-color: var(--orange); color: var(--orange); }
.share-button {
  align-self: center;
  margin: 0 1rem;
  padding: .66rem 1.15rem;
  border-color: rgba(255,106,61,.58);
  border-radius: 3px;
  background: linear-gradient(135deg, rgba(255,106,61,.18), rgba(255,106,61,.05));
  color: var(--paper);
  font-weight: 800;
}
.share-button:is(:hover, :focus-visible) { background: var(--orange); color: #140907; box-shadow: 0 0 24px rgba(255,106,61,.22); }
.mercury-header-wordmark {
  display: block;
  width: min(356px, 30vw);
  padding: .5rem 0;
  line-height: 0;
  text-decoration: none;
  filter: drop-shadow(0 0 18px rgba(255,106,61,.2));
  transition: filter .18s ease, transform .18s ease;
}
.mercury-header-wordmark img { display: block; width: 100%; height: auto; }
.mercury-header-wordmark:is(:hover, :focus-visible) { filter: drop-shadow(0 0 17px rgba(255,106,61,.42)); transform: translateY(-1px); outline: none; }

@media (max-width: 720px) {
  .site-header { width: min(100% - 28px, 1500px); margin-top: 10px; }
  .site-header::after { bottom: 47px; }
  .header-brand-row { min-height: 82px; gap: 1rem; padding: .8rem .85rem; }
  .header-nav { min-height: 48px; grid-template-columns: minmax(0, 1fr) auto; }
  .site-header nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .site-header nav a { min-height: 47px; padding: 0 .35rem; font-size: .54rem; letter-spacing: .09em; }
  .share-button { margin: .45rem; padding: .56rem .62rem; font-size: .54rem; }
  .quiet-button { padding: .6rem .7rem; font-size: .58rem; }
  .mercury-header-wordmark { width: min(43vw, 184px); }
}

@media (prefers-reduced-motion: reduce) {
  .site-header *, .site-header *::before, .site-header *::after { transition: none !important; }
}