/* R81 — the paper's reading surface.
 *
 * Theme Studio themes the shell around this (the page renders through the same
 * `themed_layout_with_session` every other surface does), so nothing here sets
 * a brand colour, a font family or a background. What it sets is the shape of a
 * newspaper: a river of stories, a kicker above a headline, a standfirst under
 * it, and a body column narrow enough to read.
 */
.np-front,
.np-article,
.np-related,
.np-author { max-width: 46rem; margin: 0 auto; }
/* R86 (Dave): on a phone the river sat flush against the glass. The shell's
   `main` adds no gutter of its own, so the paper carries one; it is inside the
   max-width, which is why the box-sizing is explicit. */
.np-front,
.np-article,
.np-related,
[data-newspaper-view] { box-sizing: border-box; padding-inline: clamp(1rem, 4vw, 1.5rem); }
[data-newspaper-view] > .np-front,
[data-newspaper-view] > .np-article,
.np-front [data-newspaper-view],
.np-article [data-newspaper-view] { padding-inline: 0; }
.np-river,
.np-lead { margin: 0 0 2.5rem; }
/* R113: the paper's own name heads the front page, with its one-line promise
   and the sections as a row of links under it. */
.np-masthead { margin: 1.25rem 0 1.5rem; padding-bottom: .9rem; border-bottom: 3px double currentColor; }
.np-masthead h1 { font-size: clamp(1.9rem, 6vw, 2.8rem); line-height: 1.05; margin: 0 0 .35rem; letter-spacing: -.01em; }
.np-masthead-line { margin: 0 0 .75rem; font-size: 1rem; opacity: .85; }
.np-section-nav { display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
.np-section-nav a { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; padding: .3rem .65rem; border: 1px solid rgba(128,128,128,.45); border-radius: 999px; }
.np-section-nav a:hover,
.np-section-nav a:focus { border-color: currentColor; }
.np-river h2,
.np-related > h2,
.np-author > h2 { font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase; border-bottom: 2px solid currentColor; padding-bottom: .35rem; }
.np-card { padding: 1rem 0; border-bottom: 1px solid rgba(128,128,128,.28); }
.np-card h2,
.np-card h3 { margin: .15rem 0 .35rem; font-size: 1.35rem; line-height: 1.2; }
.np-lead .np-card h2 { font-size: 1.5rem; }
.np-card h2 a,
.np-card h3 a { text-decoration: none; }
.np-card h2 a:hover,
.np-card h2 a:focus,
.np-card h3 a:hover,
.np-card h3 a:focus { text-decoration: underline; }
.np-card--thumb { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; gap: 1rem; align-items: start; }
.np-card--thumb .np-card-thumb { grid-column: 2; grid-row: 1; }
.np-card--thumb .np-card-text { grid-column: 1; grid-row: 1; }
.np-card-thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .35rem; }
.np-kicker,
.np-kickers a { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; opacity: .85; margin: 0; }
.np-kickers a + a::before { content: " · "; }
.np-standfirst { margin: .2rem 0 .4rem; font-size: 1.02rem; opacity: .85; }
.np-meta { font-size: .8rem; opacity: .85; margin: 0; display: flex; gap: .6rem; flex-wrap: wrap; }
.np-byline { font-weight: 600; }
.np-byline a { text-decoration: none; }
.np-byline a:hover,
.np-byline a:focus { text-decoration: underline; }
.np-byline-tag { display: block; font-weight: 400; font-size: .85rem; opacity: .85; }
.np-more { margin: .75rem 0 0; font-size: .85rem; }
.np-empty { opacity: .85; font-style: italic; }

.np-article h1 { font-size: 2.1rem; line-height: 1.15; margin: .3rem 0 .5rem; }
.np-article .np-byline { display: block; font-size: .95rem; margin: 0 0 .25rem; }
.np-updated { font-size: .8rem; opacity: .85; margin: 0 0 1rem; }
.np-lead-photo { margin: 1rem 0 1.4rem; }
.np-lead-photo img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: cover; border-radius: .4rem; }
.np-lead-photo figcaption { font-size: .8rem; opacity: .85; margin-top: .4rem; }
.np-body { font-size: 1.08rem; line-height: 1.65; }
.np-body p,
.np-body ul { margin: 0 0 1.1rem; }
.np-body h2 { font-size: 1.3rem; line-height: 1.25; margin: 1.8rem 0 .6rem; }
.np-body h3 { font-size: 1.1rem; margin: 1.4rem 0 .5rem; }
.np-body ul { padding-left: 1.3rem; }
.np-body li { margin: 0 0 .4rem; }
.np-body a { text-underline-offset: .15em; }

/* R113: the pages a story was written from, as links a reader can check. */
.np-sources { margin: 2rem 0 0; font-size: .92rem; }
.np-sources h2 { font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 .5rem; }
.np-sources ol { margin: 0; padding-left: 1.3rem; }
.np-sources li { margin: 0 0 .35rem; overflow-wrap: anywhere; }

/* R113: who wrote it. */
.np-author-box { margin: 2rem 0 0; padding: 1rem 1.15rem; border: 1px solid rgba(128,128,128,.35); border-radius: .5rem; }
.np-author-box p { margin: 0 0 .4rem; }
.np-author-box-name { font-weight: 700; font-size: 1.05rem; }
.np-author-box-name a { text-decoration: none; }
.np-author-head { margin: 1.25rem 0 1.5rem; }
.np-author-head h1 { margin: 0 0 .2rem; }
.np-author-bio { max-width: 38rem; line-height: 1.6; }
.np-related { margin-top: 2.5rem; }

/* The integrity promise, rendered as part of the story rather than beneath a
 * fold: every change made after publication, with its date. */
.np-corrections { margin: 2.5rem 0 0; padding: 1rem 1.15rem; border-left: 4px solid currentColor; background: rgba(128,128,128,.07); }
.np-corrections h2 { font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 .6rem; }
.np-corrections ul,
.np-log { list-style: none; margin: 0; padding: 0; }
.np-corrections li,
.np-log li { margin: 0 0 .7rem; font-size: .9rem; }
.np-corrections li p,
.np-log li p { margin: .2rem 0 0; opacity: .85; }

.np-sections,
.np-years,
.np-months { list-style: none; margin: 1rem 0; padding: 0; }
.np-sections li,
.np-years li,
.np-months li { padding: .6rem 0; border-bottom: 1px solid rgba(128,128,128,.24); }
.np-count { font-size: .8rem; opacity: .85; margin-left: .5rem; }
.np-blurb { opacity: .85; }

.np-pages { display: flex; gap: .4rem; flex-wrap: wrap; margin: 1.75rem 0; }
.np-pages a,
.np-pages span { padding: .3rem .6rem; border: 1px solid rgba(128,128,128,.4); border-radius: .25rem; font-size: .9rem; text-decoration: none; }
.np-pages [aria-current="page"] { font-weight: 700; border-color: currentColor; }

.np-zone { font-size: .75rem; opacity: .85; margin: 2.5rem 0 0; }

@media (max-width: 40rem) {
  .np-article h1 { font-size: 1.6rem; }
  .np-card h2,
  .np-card h3 { font-size: 1.15rem; }
  .np-lead .np-card h2 { font-size: 1.25rem; }
  .np-card--thumb { grid-template-columns: minmax(0, 1fr) 5.5rem; gap: .75rem; }
}