/* masthead + footer (global) */
.masthead {border-top: var(--rule-thick) solid var(--ink);
  border-bottom: var(--rule-thin) solid var(--ink);
  background: var(--paper);
  position: relative;
  z-index: 10;}
.masthead__top {display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0;
  font-size: var(--step--2);
  font-family: var(--font-body);
  color: var(--muted);
  border-bottom: var(--rule-thin) solid var(--rule-faint);}
.masthead__date {font-weight: 600; color: var(--ink); letter-spacing: 0.04em;}
.masthead__edition {letter-spacing: 0.2em; text-transform: uppercase; font-size: var(--step--2);}
.masthead__actions {display: flex; gap: 1.5rem; align-items: center;}
.masthead__actions a {color: var(--muted); font-weight: 500;}
.masthead__actions a:hover {color: var(--accent);}
.masthead__logo {text-align: center;
  padding: 1.5rem 0 1.25rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--step-6);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);}
.masthead__tagline {text-align: center;
  font-family: var(--font-body);
  font-size: var(--step--2);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 1rem;
  font-style: italic;
  font-weight: 400;}
.masthead__nav {border-top: var(--rule-thin) solid var(--ink);
  border-bottom: var(--rule-thin) solid var(--ink);
  overflow-x: auto;}
.masthead__nav-list {display: flex;
  justify-content: center;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;}
.masthead__nav-list li {padding: 0.85rem 1.5rem;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  position: relative;}
.masthead__nav-list li:not(:last-child)::after {content: ''; position: absolute; right: 0; top: 25%; bottom: 25%;
  border-right: var(--rule-thin) solid var(--rule-faint);}
.masthead__nav-list a {transition: color 0.15s;}
.masthead__nav-list a:hover {color: var(--accent);}
.masthead__nav-list .active {color: var(--accent);}
.footer {background: var(--ink); color: var(--paper); padding: 4rem 0 2rem; margin-top: 0;}
.footer__top {display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: var(--rule-thin) solid #333;}
.footer__brand {font-family: var(--font-display); font-size: var(--step-5); font-weight: 900; letter-spacing: -0.02em; line-height: 1; margin-bottom: 0.5rem;}
.footer__tagline {font-size: var(--step--1); color: #999; font-style: italic; margin-bottom: 1.5rem; max-width: 40ch;}
.footer__col h4 {font-family: var(--font-body); font-size: var(--step--2); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem;}
.footer__col ul {list-style: none; padding: 0; margin: 0;}
.footer__col li {padding: 0.35rem 0;}
.footer__col a {color: #d0d0c9; font-size: var(--step-0); transition: color 0.15s;}
.footer__col a:hover {color: var(--paper);}
.footer__bottom {padding-top: 2rem; display: flex; justify-content: space-between; align-items: center; font-size: var(--step--2); color: #888;}
.footer__bottom a {color: #888;}
.footer__bottom a:hover {color: var(--paper);}
@media (max-width: 1024px) {
  .footer__top {grid-template-columns: 1fr 1fr;}
}
@media (max-width: 640px) {
  .masthead__logo {font-size: var(--step-5);}
  .footer__top {grid-template-columns: 1fr;}
  .masthead__nav-list li {padding: 0.75rem 0.8rem; font-size: var(--step--2);}
}
@media (max-width: 640px) {
  .masthead__nav, .masthead__nav-list, .navbar__menu, .navbar__nav, .primary-nav, .utility-bar, .topbar, .edito-bar, .location-bar, .issue-strap {overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;}
  .masthead__nav::-webkit-scrollbar, .masthead__nav-list::-webkit-scrollbar, .navbar__menu::-webkit-scrollbar, .navbar__nav::-webkit-scrollbar, .primary-nav::-webkit-scrollbar, .utility-bar::-webkit-scrollbar, .topbar::-webkit-scrollbar {display: none;}
  .masthead__nav-list, .navbar__menu-list, .primary-nav__list {flex-wrap: nowrap;
    white-space: nowrap;}
  .container, .masthead, .footer, main, article {max-width: 100vw;
    box-sizing: border-box;}
}
@media (max-width: 640px) {
  header, .masthead, .navbar {max-width: 100vw; overflow-x: hidden;}
  header ul, .masthead ul, .navbar ul, nav ul {max-width: 100vw;
    overflow-x: auto;
    scrollbar-width: none;}
}