/* Align Newsroom design upgrade — signal rail + marginalia + editorial art.
   Mobile-first. Extends the newsroom tokens (--cream/--ink/--gold/--sand/--stone).
   No <img> anywhere: all art is inline SVG. */

/* ============ layout: main column + signal rail ============ */
.nr-layout { max-width: 920px; margin-inline: auto; padding-inline: 1rem; min-width: 0; }
.nr-col-main { min-width: 0; }
.nr-rail { min-width: 0; margin-top: 2.5rem; display: grid; gap: 1.5rem; align-content: start; }

@media (min-width: 1200px) {
  .nr-layout {
    max-width: 1300px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 2.75rem;
    align-items: start;
  }
  .nr-rail {
    margin-top: 0;
    position: sticky;
    top: 1.25rem;
    max-height: calc(100vh - 2.5rem);
    overflow-y: auto;
    padding-bottom: 1rem;
  }
}

/* ============ rail sections ============ */
.nr-rail-sec { border-top: 2px solid var(--gold); padding-top: 0.7rem; min-width: 0; }
.nr-rail-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }
.nr-rail-head h2 {
  font-family: var(--sans); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin: 0;
}
.nr-rail-motif { flex: 0 0 auto; opacity: 0.9; }
.nr-rail-motif svg { display: block; width: 72px; height: auto; }

.nr-latest-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.nr-latest-list a { color: var(--ink); text-decoration: none; font-family: var(--serif); font-size: 0.98rem; line-height: 1.35; }
.nr-latest-list a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.nr-latest-meta { display: block; font-family: var(--mono); font-size: 0.68rem; color: var(--stone); margin-top: 0.2rem; }

@media (max-width: 719px) {
  .nr-latest-list {
    display: flex; gap: 0.9rem; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem; margin-inline: -1rem; padding-inline: 1rem;
  }
  .nr-latest-list li { flex: 0 0 240px; scroll-snap-align: start; border-left: 2px solid var(--sand); padding-left: 0.8rem; }
}

.nr-markets { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 1rem; margin: 0; padding: 0; list-style: none; }
.nr-markets li { display: flex; flex-direction: column; border-left: 2px solid var(--sand); padding-left: 0.6rem; min-width: 0; }
.nr-mk-label { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone); }
.nr-mk-val { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.nr-mk-chg { font-family: var(--mono); font-size: 0.68rem; }
.nr-mk-chg.up { color: #2e6b34; } .nr-mk-chg.down { color: #8a3b2e; }
.nr-markets-note { font-family: var(--mono); font-size: 0.64rem; color: var(--stone); margin-top: 0.6rem; }

.nr-read-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; counter-reset: read; }
.nr-read-list li { counter-increment: read; display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.5rem; align-items: baseline; }
.nr-read-list li::before {
  content: counter(read, decimal-leading-zero);
  font-family: var(--mono); font-size: 0.72rem; color: var(--gold);
}
.nr-read-list a { color: var(--ink); text-decoration: none; font-size: 0.92rem; line-height: 1.35; font-family: var(--sans); }
.nr-read-list a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.nr-read-desk { display: block; font-family: var(--mono); font-size: 0.64rem; color: var(--stone); text-transform: uppercase; letter-spacing: 0.08em; }

@media (min-width: 720px) and (max-width: 1199px) {
  .nr-rail { grid-template-columns: 1fr 1fr; }
  .nr-rail-sec-latest { grid-column: 1 / -1; }
}

/* ============ marginalia (story pages) ============ */
.mg {
  margin: 1.6em 0; padding: 1em 1.1em;
  background: rgba(231, 221, 206, 0.38);
  border-top: 2px solid var(--gold);
  min-width: 0;
}
.mg-kicker {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--stone); margin: 0 0 0.5em;
}
.mg-stat .mg-n { font-family: var(--serif); font-weight: 700; font-size: 2.1rem; line-height: 1.05; color: var(--ink); margin: 0 0 0.15em; }
.mg-stat .mg-l { font-family: var(--sans); font-size: 0.82rem; line-height: 1.45; color: var(--ink); margin: 0; }
.mg-facts ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.55em; }
.mg-facts li { font-family: var(--sans); font-size: 0.85rem; line-height: 1.5; color: var(--ink); padding-left: 1em; position: relative; }
.mg-facts li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.45em; height: 2px; background: var(--gold); }
.mg-time ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6em; }
.mg-time li { display: grid; grid-template-columns: 4.2rem 1fr; gap: 0.6rem; font-size: 0.82rem; line-height: 1.45; }
.mg-time .mg-d { font-family: var(--mono); font-size: 0.7rem; color: var(--stone); white-space: nowrap; }

@media (min-width: 900px) {
  .story-body .mg { float: right; width: 236px; margin: 0.25em 0 1.3em 1.7em; }
  .story-body .wrap::after { content: ""; display: table; clear: both; }
}
/* Sources must always start below any floated marginalia (fix-pass 2026-10-06). */
.story-body .mg-clear { clear: both; }

/* ============ editorial art ============ */
.story-art, .desk-art, .home-art { margin: 0; min-width: 0; }
.story-art { border-top: 1px solid var(--sand); border-bottom: 1px solid var(--sand); margin-bottom: 2.2rem; }
.story-art svg, .desk-art svg, .home-art svg { display: block; width: 100%; height: auto; }
.story-art figcaption, .desk-art figcaption {
  font-family: var(--sans); font-size: 0.7rem; color: var(--stone);
  padding: 0.55rem 0 0.8rem; max-width: 920px; margin-inline: auto; padding-inline: 1rem;
}
.desk-art { margin-bottom: 1.8rem; border-bottom: 1px solid var(--sand); }
.home-art { border-bottom: 1px solid var(--sand); margin-bottom: 2rem; }

/* ============ small screens: never break ============ */
@media (max-width: 719px) {
  .nr-layout { padding-inline: 1rem; overflow-x: clip; }
  .mg-time li { grid-template-columns: 3.4rem 1fr; }
}