/* ---------------------------- TOP STRIP ---------------------------- */
.topstrip {
  background: var(--black); color: #cfcfcf;
  font-family: var(--label); font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
}
.topstrip .wrap { display: flex; align-items: center; gap: 16px; height: 34px; }
.topstrip .date { white-space: nowrap; }
.ticker { flex: 1; display: flex; align-items: center; min-width: 0; height: 100%; }
.ticker-label {
  background: var(--red); color: var(--on); font-weight: 700; padding: 0 12px; height: 100%;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.ticker-label::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .25; } }
.ticker-window { flex: 1; overflow: hidden; position: relative; height: 100%;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker-track { position: absolute; top: 0; left: 0; height: 100%; display: flex; align-items: center;
  white-space: nowrap; animation: tick 60s linear infinite; }
.ticker-track a { padding: 0 22px; color: #eee; }
.ticker-track a:hover { color: #ffd84d; }
.ticker-track a::after { content: "◆"; color: var(--red); margin-left: 44px; font-size: 9px; vertical-align: 2px; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ------------------------------ HEADER ----------------------------- */
.site-header { color: #fff; border-bottom: 6px solid var(--black); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 22px; padding-bottom: 22px; }
.logo { display: block; flex: none; filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, .55)) drop-shadow(0 0 14px rgba(0, 0, 0, .25)); }
.logo img {
  height: 78px; width: auto;
  /* The source logo has an unrelated white line in its top pixel row. */
  clip-path: inset(2% 0 0);
}
.header-tag {
  font-family: var(--label); text-transform: uppercase; letter-spacing: .14em; font-size: 13px;
  color: rgba(255, 255, 255, .85); text-align: right; line-height: 1.4;
}
.header-tag strong { display: block; font-family: var(--head); font-weight: 400; letter-spacing: .04em; font-size: 26px; color: #fff; }

.navbar { background: var(--black); position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 0 var(--red); }
.navbar .wrap { display: flex; align-items: stretch; gap: 0; overflow-x: auto; scrollbar-width: none; }
.navbar .wrap::-webkit-scrollbar { display: none; }
.navbar a {
  font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 14px;
  color: #ddd; padding: 13px 14px; white-space: nowrap; position: relative;
}
.navbar a:hover { color: #fff; background: #222; }
.navbar a.active { color: var(--on); background: var(--red); }


/* Shared navigation: popular sections scroll while the full list stays available. */
.navbar .nav-inner { display:flex; align-items:stretch; overflow:visible; }
.nav-links { display:flex; flex:1 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none; }
.nav-links::-webkit-scrollbar { display:none; }
.nav-links a { display:flex; align-items:center; }
.section-picker { display:flex; flex:0 0 auto; align-items:center; padding:6px 0 6px 12px; background:var(--black); }
.section-picker select { max-width:205px; min-height:38px; padding:7px 30px 7px 10px; border:2px solid #888; border-radius:0; background:#1b1b1b; color:#fff; font:600 14px var(--label); cursor:pointer; }
.section-picker select:focus-visible { outline:3px solid var(--red-hot); outline-offset:2px; }
@media(max-width:760px) {
  .site-header .header-tag { display:block; font-size:11px; letter-spacing:.05em; }
  .site-header .header-tag strong { font-size:18px; }
  .site-header .header-tag span { display:none; }
  .navbar .nav-inner { padding-right:8px; }
  .section-picker { padding-left:6px; }
  .section-picker select { max-width:145px; font-size:13px; }
}
#site-chrome { display:contents; }

@media(max-width:760px) { .logo img { height:52px; } }
.navbar a.active { box-shadow:inset 0 -3px 0 rgba(0,0,0,.25); }

/* Remove the hairline at the ticker/header seam. */
.topstrip { border:0; box-shadow:none; }
.site-header { border-top:0; margin-top:0; outline:0; }
@media(max-width:760px) { .topstrip .date { display:none; } }
@media(prefers-reduced-motion:reduce) { .ticker-track, .ticker-label::before { animation:none; } }

/* The compact logo appears only once the navigation reaches the viewport top. */
.sticky-sentinel { display:block; height:1px; margin-bottom:-1px; pointer-events:none; }
.navbar .sticky-brand { display:none; }
.navbar.is-stuck { display:flex; align-items:stretch; }
.navbar.is-stuck .sticky-brand { display:flex; align-items:center; justify-content:center; flex:0 0 25%; min-width:0; padding:4px 12px; background:var(--section-backdrop, var(--red)); }
.navbar.is-stuck .sticky-brand:hover { background:var(--section-backdrop, var(--red)); filter:brightness(1.1); }
.navbar.is-stuck .sticky-brand img { display:block; width:auto; max-width:100%; height:44px; object-fit:contain; clip-path:inset(2% 0 0); }
.navbar.is-stuck .nav-inner { flex:1 1 75%; width:75%; min-width:0; max-width:none; margin:0; padding-left:0; padding-right:24px; }
@media(max-width:760px) { .navbar.is-stuck .sticky-brand { padding:4px 6px; } .navbar.is-stuck .sticky-brand img { height:auto; max-height:34px; } .navbar.is-stuck .nav-inner { padding-right:8px; } }
/* Clipping horizontal overflow must not create a scrolling ancestor for the sticky bar. */
body { overflow-x:clip; }