/* Reader view: the priority screen. Mobile-first sizing. */ /* * Three font steps (spec 8). Set on before paint by the inline script in * header.php, so there is no flash-then-reflow at the reader's chosen size. * * Sizes are in rem so they compound with the browser/system text-size setting * rather than overriding it. */ :root { --rd-read-size: 1.125rem; --rd-read-leading: 1.75; } :root[data-rd-fontsize="s"] { --rd-read-size: 1rem; --rd-read-leading: 1.7; } :root[data-rd-fontsize="m"] { --rd-read-size: 1.125rem; --rd-read-leading: 1.75; } :root[data-rd-fontsize="l"] { --rd-read-size: 1.3125rem;--rd-read-leading: 1.8; } /* -------------------------------------------------------------- progressbar */ .rd-progressbar { position: sticky; top: 0; z-index: 20; height: 3px; width: 100%; background: var(--rd-line); } .rd-progressbar__fill { display: block; height: 100%; width: 0; background: var(--rd-accent); transition: width 0.1s linear; } /* ------------------------------------------------------------------- layout */ .rd-reader { max-width: var(--rd-measure); margin: 0 auto; padding: 1.5rem 1.25rem 3rem; } .rd-reader__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; font-size: 0.875rem; } .rd-reader__back { text-decoration: none; color: var(--rd-ink-muted); font-weight: 600; } .rd-reader__back:hover { color: var(--rd-ink); } /* ---------------------------------------------------------------- font size */ .rd-fontsize { display: flex; align-items: center; gap: 0.35rem; } .rd-fontsize__label { color: var(--rd-ink-muted); margin-right: 0.15rem; } .rd-fontsize__btn { font: inherit; background: var(--rd-surface); color: var(--rd-ink); border: 1px solid var(--rd-line-strong); border-radius: 999px; /* 44px min tap target (spec 7). */ min-height: 44px; padding: 0 0.85rem; cursor: pointer; } .rd-fontsize__btn[aria-pressed="true"] { background: var(--rd-accent); color: var(--rd-accent-ink); border-color: var(--rd-accent); font-weight: 600; } /* -------------------------------------------------------------------- story */ .rd-story__header { margin-bottom: 2rem; } .rd-story__meta { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 0 0 0.75rem; font-size: 0.8125rem; } .rd-story__time { font-weight: 700; letter-spacing: 0.02em; color: var(--rd-accent); } .rd-story__moods { display: flex; gap: 0.4rem; flex-wrap: wrap; } /* * These sit inline in the byline row, where a full 44px chip would dominate the * header. 32px clears the WCAG 2.5.8 AA minimum (24px) with margin to spare, * which is the right trade here — the same filters are available as full-size * chips one tap away on the discovery screen. */ .rd-story__mood { display: inline-flex; align-items: center; min-height: 32px; color: var(--rd-ink-muted); text-decoration: none; border: 1px solid var(--rd-line-strong); border-radius: 999px; padding: 0.15rem 0.75rem; transition: color 0.16s ease, border-color 0.16s ease; } .rd-story__mood:hover { color: var(--rd-accent); border-color: var(--rd-accent); } .rd-story__title { margin: 0 0 0.5rem; font-family: var(--rd-font-read); font-size: clamp(1.9rem, 5.5vw, 2.75rem); font-weight: 600; line-height: 1.12; /* Display sizes need tighter tracking than the body face defaults to. */ letter-spacing: -0.022em; text-wrap: balance; } .rd-story__byline { margin: 0; color: var(--rd-ink-muted); font-size: 0.9375rem; } .rd-story__content { font-family: var(--rd-font-read); font-size: var(--rd-read-size); line-height: var(--rd-read-leading); /* * Newsreader ships real small-text optical sizing; pinning it here stops * the browser inheriting a display-weight cut into body copy. */ font-optical-sizing: auto; /* Stops the ragged right edge from getting too jagged at narrow widths. */ hyphens: auto; text-wrap: pretty; } .rd-story__content p { margin: 0 0 1.4em; } .rd-story__content p:first-of-type::first-letter { float: left; font-size: 3.4em; line-height: 0.82; padding: 0.06em 0.09em 0 0; font-weight: 600; } .rd-story__content h2, .rd-story__content h3 { margin: 2em 0 0.6em; line-height: 1.25; } .rd-story__content blockquote { margin: 1.6em 0; padding-left: 1.1em; border-left: 3px solid var(--rd-line); color: var(--rd-ink-muted); font-style: italic; } .rd-story__content hr { border: 0; margin: 2.4em auto; width: 6ch; border-top: 1px solid var(--rd-line); } /* ------------------------------------------------------------------- resume */ .rd-resume { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 2rem; padding: 1rem 1.1rem; background: var(--rd-surface); border: 1px solid var(--rd-line); border-radius: var(--rd-radius); } .rd-resume__text { margin: 0; flex: 1 1 100%; font-size: 0.9375rem; color: var(--rd-ink-muted); } .rd-resume__dismiss { font: inherit; font-size: 0.875rem; background: none; border: 0; padding: 0.5rem; color: var(--rd-ink-muted); text-decoration: underline; cursor: pointer; } /* ------------------------------------------------------------------ ad slot */ .rd-reader__ad { margin: 2.5rem 0; } /* ---------------------------------------------------------------------- end */ .rd-end { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--rd-line); } .rd-end__heading { margin: 0 0 0.35rem; font-family: var(--rd-font-read); font-size: 1.5rem; } .rd-end__lead { margin: 0 0 1.25rem; color: var(--rd-ink-muted); font-size: 0.9375rem; } .rd-end__grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-bottom: 2rem; } @media (min-width: 560px) { .rd-end__grid { grid-template-columns: repeat(2, 1fr); } } .rd-end__actions { margin: 0 0 2rem; } /* ------------------------------------------------------------- next story */ .rd-next { display: grid; gap: 0.35rem; padding: 1.4rem 1.5rem; margin-bottom: 2rem; background: var(--rd-surface); border: 1px solid var(--rd-accent); border-radius: var(--rd-radius); text-decoration: none; color: inherit; transition: transform 0.14s ease, box-shadow 0.14s ease; } .rd-next:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgb(0 0 0 / 0.09); } .rd-next__kicker { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rd-accent); } .rd-next__title { font-family: var(--rd-font-read); font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.01em; } .rd-next__hook { color: var(--rd-ink-muted); font-size: 0.9375rem; line-height: 1.5; } .rd-next__time { font-size: 0.8125rem; font-weight: 600; color: var(--rd-accent); }