/* Hallmark · macrostructure: editorial-newsprint · tone: austere · genre: editorial
 * theme: Newsprint DNA (NYT-inspired) · pre-emit: P5 H5 E5 S5 R5 V4
 */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow-x: clip; font-family: 'Oswald', sans-serif; }
#app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* ==========================================================
   TOKENS — light / dark
   ========================================================== */

:root {
  /* topbar */
  --ms__topbar--bg:               #ffffff;
  --ms__topbar--border:           #121212;
  --ms__topbar--border-light:     #c8c8c0;

  /* shell */
  --ms__shell--fg:                #121212;
  --ms__btn--bg:                  #ffffff;
  --ms__btn--fg:                  #121212;
  --ms__btn--border:              #c8c8c0;
  --ms__btn--hover-bg:            #121212;
  --ms__btn--hover-fg:            #ffffff;
  --ms__btn--hover-border:        #121212;
  --ms__sep--color:               #c8c8c0;

  /* text tones */
  --ms__text--muted:              rgba(18, 18, 18, 0.42);
  --ms__text--faint:              rgba(18, 18, 18, 0.28);
  --ms__text--subtle:             rgba(18, 18, 18, 0.48);

  /* content */
  --ms__content--bg:              #fafaf8;
  --ms__content--fg:              #121212;
  --ms__content--link:            #1a0dab;
  --ms__content--border:          #e8e8e2;

  /* spinner */
  --ms__spinner--track:           #e8e8e2;
  --ms__spinner--active:          #121212;

  /* error */
  --ms__error--card-bg:           #f5f5f0;
  --ms__error--border:            #cc2222;
  --ms__error--fg:                #cc2222;
  --ms__error--code-bg:           #e8e8e2;
  --ms__error--text-muted:        rgba(18, 18, 18, 0.55);
}

[data-ms-theme="dark"] {
  --ms__topbar--bg:               #0d0d0c;
  --ms__topbar--border:           #e4e2d9;
  --ms__topbar--border-light:     #2e2e2a;
  --ms__shell--fg:                #e4e2d9;
  --ms__btn--bg:                  #0d0d0c;
  --ms__btn--fg:                  #9a9890;
  --ms__btn--border:              #2e2e2a;
  --ms__btn--hover-bg:            #e4e2d9;
  --ms__btn--hover-fg:            #0d0d0c;
  --ms__btn--hover-border:        #e4e2d9;
  --ms__sep--color:               #2e2e2a;
  --ms__text--muted:              rgba(228, 226, 217, 0.42);
  --ms__text--faint:              rgba(228, 226, 217, 0.28);
  --ms__text--subtle:             rgba(228, 226, 217, 0.48);
  --ms__content--bg:              #101010;
  --ms__content--fg:              #e4e2d9;
  --ms__content--link:            #8ab4f8;
  --ms__content--border:          #1e1e1c;
  --ms__spinner--track:           #1e1e1c;
  --ms__spinner--active:          #e4e2d9;
  --ms__error--card-bg:           #181816;
  --ms__error--border:            #cc2222;
  --ms__error--fg:                #f87171;
  --ms__error--code-bg:           #1e1e1c;
  --ms__error--text-muted:        rgba(228, 226, 217, 0.55);
}

/* ==========================================================
   NEWSPAPER HEADER — NYT DNA
   ========================================================== */

#topbar {
  flex-shrink: 0;
  background: var(--ms__topbar--bg);
  z-index: 50;
  overflow: visible;
  transition: opacity 0.18s ease;
}
#topbar.topbar--hidden {
  opacity: 0;
  pointer-events: none;
}

/* Info bar — calendar LEFT, theme RIGHT */
.topbar__info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 22px;
  border-bottom: 1px solid var(--ms__topbar--border-light);
}

/* Calendar inside info bar */
.topbar__info-cal {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Subscribe button */
.btn-subscribe {
  display: inline-flex;
  align-items: center;
  padding: 4px 13px;
  background: var(--ms__shell--fg);
  color: var(--ms__topbar--bg);
  font-family: 'Oswald', sans-serif;
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border: 1px solid var(--ms__shell--fg);
  cursor: pointer;
  text-decoration: none;
  border-radius: 1px;
  transition: opacity .15s;
  white-space: nowrap;
}
.btn-subscribe:hover { opacity: 0.7; }

/* Theme toggle */
.topbar__icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ms__text--muted);
  font-size: 0.8rem;
  padding: 3px;
  line-height: 1;
  transition: color .12s;
}
.topbar__icon-btn:hover { color: var(--ms__shell--fg); }
.topbar__icon-btn:focus-visible {
  outline: 2px solid var(--ms__shell--fg);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Three-column masthead */
.topbar__masthead-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 14px 24px 11px;
  border-top: 1px solid var(--ms__topbar--border);
  border-bottom: 1px solid var(--ms__topbar--border);
}

.topbar__masthead-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.topbar__edition-tag {
  font-family: 'Oswald', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ms__shell--fg);
}
.topbar__edition-sub {
  font-family: 'Oswald', sans-serif;
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ms__text--muted);
}

.topbar__masthead-center {
  text-align: center;
}
.topbar__title {
  display: inline-block;
  text-align: left;
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(1.4rem, 3.3vw, 2.4rem);
  font-weight: 900;
  color: var(--ms__shell--fg);
  line-height: 1;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
}
.topbar__title-the {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 0.3em;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ms__text--muted);
  margin-bottom: 3px;
}
/* The "S" in Satiristerical — Uncial Antiqua for visual disruption */
.topbar__title .title-p {
  font-family: 'Uncial Antiqua', serif;
  font-size: 1.35em;
  font-weight: 400;
  letter-spacing: -0.03em;
  vertical-align: -0.04em;
  display: inline-block;
}
.topbar__tagline {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 0.68rem;
  color: var(--ms__text--muted);
  margin-top: 5px;
  letter-spacing: 0.02em;
}

.topbar__masthead-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.topbar__vol {
  font-family: 'Oswald', sans-serif;
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ms__text--muted);
}

/* Breaking ticker */
.topbar__ticker {
  display: flex;
  align-items: center;
  height: 26px;
  border-bottom: 1px solid var(--ms__topbar--border);
  overflow: hidden;
}
.topbar__ticker-label {
  flex-shrink: 0;
  background: var(--ms__shell--fg);
  color: var(--ms__topbar--bg);
  font-family: 'Oswald', sans-serif;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0 13px;
  height: 100%;
  display: flex;
  align-items: center;
}
.topbar__ticker-track {
  overflow: hidden;
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
}
.topbar__ticker-inner {
  display: flex;
  gap: 0;
  white-space: nowrap;
  animation: ms-ticker 36s linear infinite;
}
@keyframes ms-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.topbar__ticker-item {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 0.7rem;
  color: var(--ms__shell--fg);
  padding: 0 0 0 32px;
}
.topbar__ticker-item::after {
  content: ' ·';
  color: var(--ms__topbar--border-light);
  margin-left: 32px;
}

/* Double rule — 3px thick + 2px gap + 1px thin */
.topbar__double-rule {
  height: 6px;
  background: linear-gradient(
    to bottom,
    var(--ms__topbar--border)       0,
    var(--ms__topbar--border)       3px,
    transparent                      3px,
    transparent                      5px,
    var(--ms__topbar--border-light) 5px
  );
}

/* Section nav — offset from left edge */
.topbar__nav {
  display: flex;
  align-items: center;
  padding: 0 18px 0 30px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--ms__topbar--border-light);
}
.topbar__nav::-webkit-scrollbar { display: none; }

/* Sections button */
.topbar__sections-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ms__shell--fg);
  font-family: 'Oswald', sans-serif;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 8px 10px 0;
  flex-shrink: 0;
  transition: color .12s;
}
.topbar__sections-btn:hover { color: var(--ms__text--muted); }
.topbar__sections-btn:focus-visible {
  outline: 2px solid var(--ms__shell--fg);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Nav pipe separator */
.topbar__nav-sep {
  color: var(--ms__topbar--border-light);
  font-size: 0.75rem;
  margin: 0 6px;
  flex-shrink: 0;
  user-select: none;
}

/* Nav links */
.topbar__nav-item {
  font-family: 'Oswald', sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 10px 10px;
  color: var(--ms__shell--fg);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .12s;
}
a.topbar__nav-item:hover { color: var(--ms__text--muted); }
a.topbar__nav-item.active {
  border-bottom-color: var(--ms__shell--fg);
  font-weight: 600;
}
.topbar__nav-item--dim { color: var(--ms__text--muted); cursor: default; }
.topbar__nav-item--dim:hover { color: var(--ms__text--muted); }

/* Date nav — pushed to right end of nav bar */
.topbar__cal-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 0;
  flex-shrink: 0;
}

/* Calendar buttons */
.tbtn--cal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: 1px solid var(--ms__topbar--border-light);
  border-radius: 1px;
  color: var(--ms__shell--fg);
  font-size: 0.6rem;
  cursor: pointer;
  padding: 0;
  transition: background .12s, color .12s, border-color .12s;
}
.tbtn--cal:hover {
  background: var(--ms__shell--fg);
  color: var(--ms__topbar--bg);
  border-color: var(--ms__shell--fg);
}
.tbtn--cal:focus-visible {
  outline: 2px solid var(--ms__shell--fg);
  outline-offset: 2px;
}
.tbtn--cal-date {
  width: auto;
  padding: 0 9px;
  gap: 5px;
  font-family: 'Oswald', sans-serif;
  font-size: 0.63rem;
  letter-spacing: 0.07em;
}

/* ==========================================================
   CONTENT AREA — two-column article layout
   ========================================================== */

#content-wrap {
  flex: 1;
  overflow-y: auto;
  background: var(--ms__content--bg);
  position: relative;
}

/* Article layout: main content + optional sidebar */
#article-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 0;
  max-width: 1100px;
  margin: 0 auto;
  min-height: 100%;
}

#content {
  padding: 32px 40px 64px 24px;
  color: var(--ms__content--fg);
  font-family: 'Source Serif 4', 'Georgia', serif;
  font-size: 1rem;
  line-height: 1.75;
  border-right: 1px solid var(--ms__content--border);
  min-width: 0;
}

/* Sidebar */
#sidebar {
  padding: 32px 20px 64px;
  color: var(--ms__content--fg);
  font-family: 'Source Serif 4', 'Georgia', serif;
  font-size: 0.82rem;
  line-height: 1.6;
}
#sidebar.hidden { display: none; }
#sidebar h2, #sidebar h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ms__shell--fg);
  margin: 0 0 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--ms__topbar--border);
}
#sidebar h2 { margin-top: 0; }
#sidebar h3 { margin-top: 22px; }
#sidebar p { margin: 0 0 10px; }
#sidebar ul { margin: 0 0 10px; padding-left: 16px; }
#sidebar li { margin-bottom: 5px; }
#sidebar hr {
  border: none;
  border-top: 1px solid var(--ms__content--border);
  margin: 18px 0;
}
#sidebar blockquote {
  border-left: 2px solid var(--ms__topbar--border);
  margin: 0 0 10px;
  padding: 4px 12px;
  color: var(--ms__text--subtle);
  font-style: italic;
  font-size: 0.88rem;
}
#sidebar strong {
  font-family: 'Oswald', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
  margin: 18px 0 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--ms__content--border);
}
#sidebar strong:first-child { margin-top: 0; }

/* Article meta elements */
.article-figure {
  margin: 20px 0 24px;
}
.article-cover {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--ms__content--border);
}
.article-caption {
  font-family: 'Oswald', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--ms__text--muted);
  padding: 6px 2px 0;
  line-height: 1.5;
  border-top: 1px solid var(--ms__content--border);
  margin-top: 0;
}
.article-subtitle {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ms__text--subtle);
  margin: 10px 0 0;
  font-style: italic;
}
.article-byline {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 12px 0 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ms__content--border);
  font-family: 'Oswald', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ms__text--muted);
}
.article-byline-name { font-weight: 600; color: var(--ms__shell--fg); }
.article-byline-date { color: var(--ms__text--muted); }

/* Markdown styles */
#content h1 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.9rem;
  font-weight: 600;
  margin: 0 0 20px;
  color: var(--ms__content--fg);
  border-bottom: 2px solid var(--ms__topbar--border);
  padding-bottom: 10px;
  letter-spacing: 0.03em;
}
#content h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  margin: 32px 0 10px;
  color: var(--ms__content--fg);
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--ms__content--border);
  padding-bottom: 6px;
}
#content h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  margin: 22px 0 6px;
  color: var(--ms__content--fg);
  letter-spacing: 0.03em;
}
#content p  { margin: 0 0 14px; }
#content ul, #content ol { margin: 0 0 14px; padding-left: 24px; }
#content li { margin-bottom: 6px; }
#content a  { color: var(--ms__content--link); text-decoration: underline; text-underline-offset: 2px; }
#content a:hover { opacity: 0.75; }
#content code {
  font-family: 'SFMono-Regular', 'Consolas', monospace;
  font-size: 0.86em;
  background: var(--ms__content--border);
  border-radius: 3px;
  padding: 2px 5px;
}
#content pre {
  background: var(--ms__content--border);
  border-radius: 4px;
  padding: 16px;
  overflow-x: auto;
  margin: 0 0 16px;
}
#content pre code { background: none; padding: 0; font-size: 0.84em; }
#content blockquote {
  border-left: 2px solid var(--ms__topbar--border);
  margin: 0 0 14px;
  padding: 4px 16px;
  color: var(--ms__text--subtle);
  font-style: italic;
}
#content table { border-collapse: collapse; width: 100%; margin: 0 0 16px; font-size: 0.9em; }
#content th, #content td { border: 1px solid var(--ms__content--border); padding: 7px 12px; text-align: left; }
#content th { font-weight: 700; background: var(--ms__content--border); font-family: 'Oswald', sans-serif; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }
#content hr { border: none; border-top: 1px solid var(--ms__content--border); margin: 24px 0; }

/* ==========================================================
   LOADING / ERROR
   ========================================================== */

#loading {
  position: absolute; inset: 0;
  background: var(--ms__content--bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px; z-index: 100;
}
#loading.hidden { display: none; }
.spinner {
  width: 40px; height: 40px;
  border: 2px solid var(--ms__spinner--track);
  border-top-color: var(--ms__spinner--active);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#loading-text { font-size: .85rem; color: var(--ms__text--subtle); letter-spacing: .08em; font-family: 'Oswald', sans-serif; text-transform: uppercase; }

#error-panel {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 90;
}
#error-panel.hidden { display: none; }
.error-card {
  background: var(--ms__error--card-bg);
  border: 1px solid var(--ms__error--border);
  border-radius: 4px; padding: 28px 32px;
  max-width: 440px; text-align: center;
  color: var(--ms__shell--fg);
}
.error-card .icon { font-size: 2rem; margin-bottom: 12px; color: var(--ms__error--fg); }
.error-card h3 { font-size: 1rem; margin-bottom: 8px; font-family: 'Oswald', sans-serif; letter-spacing: 0.04em; }
.error-card p { font-size: .83rem; color: var(--ms__error--text-muted); }
.error-card code {
  display: inline-block; margin-top: 10px;
  background: var(--ms__error--code-bg); padding: 4px 10px;
  border-radius: 3px; font-size: .8rem;
}

/* ==========================================================
   CALENDAR WIDGET
   ========================================================== */

/* Override legacy #cal-nav styles — position is handled by .topbar__cal-nav */
#cal-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.ms-cal__dropdown {
  position: fixed;
  z-index: 600;
}
.ms-cal__dropdown.hidden { display: none; }

.ms-cal {
  background: var(--ms__topbar--bg);
  border: 1px solid var(--ms__topbar--border);
  border-radius: 4px;
  padding: 16px;
  width: 264px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.28);
}

.ms-cal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ms-cal__month-label {
  font-family: 'Oswald', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ms__shell--fg);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ms-cal__nav {
  background: transparent;
  border: none;
  color: var(--ms__text--muted);
  cursor: pointer;
  font-size: 0.85rem;
  width: 1.8rem; height: 1.8rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 2px;
  transition: color .1s, background .1s;
}
.ms-cal__nav:hover { color: var(--ms__shell--fg); background: rgba(128,128,128,0.1); }

.ms-cal__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}
.ms-cal__days span {
  font-family: 'Oswald', sans-serif;
  font-size: 0.6rem;
  color: var(--ms__text--muted);
  text-align: center;
  padding-bottom: 5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ms-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.ms-cal__cell {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Oswald', sans-serif;
  font-size: 0.68rem;
  border-radius: 2px;
  transition: background .1s, color .1s;
  position: relative;
}
.ms-cal__cell--padding { pointer-events: none; }
.ms-cal__cell--empty { color: var(--ms__text--faint); cursor: default; }
.ms-cal__cell--available { color: var(--ms__shell--fg); cursor: pointer; font-weight: 600; }
.ms-cal__cell--available::after {
  content: '';
  position: absolute; bottom: 2px; left: 50%;
  transform: translateX(-50%);
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--ms__shell--fg);
}
.ms-cal__cell--available:hover { background: rgba(128,128,128,0.12); }
.ms-cal__cell--current {
  background: var(--ms__shell--fg);
  color: var(--ms__topbar--bg);
  font-weight: 700;
  cursor: default;
}
.ms-cal__cell--current::after { display: none; }
.ms-cal__cell--today:not(.ms-cal__cell--current):not(.ms-cal__cell--available) {
  border: 1px solid var(--ms__topbar--border-light);
  color: var(--ms__text--muted);
}

/* ==========================================================
   RECENT DRAWER
   ========================================================== */
.rdrw {
  position: fixed;
  top: 0; left: 0;
  width: 290px;
  height: 100%;
  background: var(--ms__topbar--bg);
  border-right: 1px solid var(--ms__topbar--border);
  z-index: 400;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .24s ease, visibility 0s .24s;
  visibility: hidden;
  overflow: hidden;
}
.rdrw--open {
  transform: translateX(0);
  transition: transform .24s ease, visibility 0s 0s;
  visibility: visible;
}
.rdrw__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px 11px;
  border-bottom: 1px solid var(--ms__topbar--border);
  flex-shrink: 0;
}
.rdrw__title {
  font-family: 'Oswald', sans-serif;
  font-size: 0.68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ms__shell--fg);
}
.rdrw__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ms__text--muted);
  font-size: 1rem;
  line-height: 1;
  padding: 2px 4px;
  transition: color .12s;
}
.rdrw__close:hover { color: var(--ms__shell--fg); }
.rdrw__cal-wrap {
  padding: 14px 16px;
  border-bottom: 1px solid var(--ms__topbar--border);
  flex-shrink: 0;
}
.rdrw__list-head {
  font-family: 'Oswald', sans-serif;
  font-size: 0.62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ms__text--muted);
  padding: 11px 16px 5px;
  flex-shrink: 0;
}
.rdrw__list {
  flex: 1;
  overflow-y: auto;
}
.rdrw__item {
  display: block;
  padding: 10px 16px;
  text-decoration: none;
  border-bottom: 1px solid var(--ms__topbar--border);
  transition: background .1s;
}
.rdrw__item:hover { background: rgba(128,128,128,.08); }
.rdrw__item--active { background: rgba(128,128,128,.13); }
.rdrw__item-topic {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ms__shell--fg);
  display: block;
  margin-bottom: 2px;
}
.rdrw__item-date {
  font-family: 'Oswald', sans-serif;
  font-size: 0.58rem;
  color: var(--ms__text--muted);
  letter-spacing: .03em;
}
.rdrw-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 399;
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease;
}
.rdrw-overlay--on {
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================
   AUTHOR FOOTER
   ========================================================== */
.post-footer {
  border-top: 1px solid var(--ms__topbar--border);
  background: var(--ms__topbar--bg);
  padding: 14px 24px;
  margin-top: auto;
}
.post-footer__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.post-footer__byline {
  font-family: 'Oswald', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ms__shell--fg);
  flex-shrink: 0;
}
.post-footer__byline a {
  color: var(--ms__shell--fg);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.post-footer__links {
  font-family: 'Oswald', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: var(--ms__text--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.post-footer__links a {
  color: var(--ms__text--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .12s;
}
.post-footer__links a:hover { color: var(--ms__shell--fg); }
.post-footer__sep { color: var(--ms__topbar--border-light); }

/* ==========================================================
   RESPONSIVE — mobile
   ========================================================== */
@media (max-width: 860px) {
  /* Stack sidebar below content on medium screens */
  #article-layout {
    grid-template-columns: 1fr;
  }
  #content { border-right: none; padding-right: 24px; }
  #sidebar { border-top: 1px solid var(--ms__content--border); padding-top: 24px; }
}

@media (max-width: 640px) {
  .topbar__info-bar { padding: 5px 14px; }
  .topbar__masthead-body {
    grid-template-columns: 1fr;
    padding: 10px 14px 8px;
    gap: 0;
  }
  .topbar__masthead-left,
  .topbar__masthead-right { display: none; }
  .topbar__title { font-size: clamp(1.15rem, 5.8vw, 1.9rem); }
  .topbar__title .title-p { font-size: 1.25em; }
  .topbar__tagline { font-size: 0.6rem; }
  .topbar__ticker { height: 24px; }
  .topbar__ticker-item { font-size: 0.65rem; }
  .topbar__nav { padding: 0 8px 0 18px; }
  .topbar__nav-item { padding: 8px 7px; font-size: 0.65rem; }
  .topbar__sections-btn { padding: 8px 6px 8px 0; font-size: 0.6rem; }
  .topbar__nav-item--dim { display: none; }
  #content { padding: 20px 16px 48px; }
  #content h1 { font-size: 1.5rem; }
}