/* reader.css — the article itself. Every rule reads from a custom property so the panel can rewrite the page without touching the DOM. */ :root { /* Fallbacks only. Store.applyPalette() computes the real values in JS and sets them on , so no rule here needs color-mix() — which Safari did not support until 16.2, and which silently voided every background that used it on older iPhones. */ --rd-bg: #FBFAF7; --rd-fg: #14120E; --rd-muted: #5C574E; --rd-hair: #CFCAC0; --rd-faint: #E8E4DC; --rd-tint: #F1EEE8; --rd-cap-auto: #6B655B; --rd-cap-rule: #D8D3C9; --rd-link-soft: rgba(28,79,138,.45); --rd-link-wash: rgba(28,79,138,.14); --rd-link-hover: #3C5F7A; } .reader { max-width: calc(var(--rd-measure, 70ch)); margin-inline: var(--rd-page-align, auto); padding: var(--rd-pad, 56px) 24px 40vh; color: var(--rd-fg); font-family: var(--rd-body-font, 'Literata', Georgia, serif); font-size: var(--rd-size, 20px); font-weight: var(--rd-weight, 400); line-height: var(--rd-lh, 1.62); letter-spacing: var(--rd-track, 0em); word-spacing: var(--rd-word, 0em); text-align: var(--rd-align, left); -webkit-hyphens: var(--rd-hyphens, manual); hyphens: var(--rd-hyphens, manual); font-variant-ligatures: var(--rd-liga, normal); font-feature-settings: var(--rd-numfeat, "lnum" 1); text-wrap: var(--rd-wrap, pretty); -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; } .reader p { margin: 0 0 var(--rd-para-gap, .9em); text-indent: var(--rd-indent, 0em); } .reader p:first-of-type, .reader h1 + p, .reader h2 + p, .reader h3 + p { text-indent: 0; } .reader > p:first-of-type { margin-top: 0; } /* ---- title & headings ------------------------------------------------ */ .rd-title { font-family: var(--rd-head-font, 'Newsreader', Georgia, serif); font-size: var(--rd-title-size, 2.6em); font-weight: var(--rd-head-weight, 600); font-style: var(--rd-head-style, normal); line-height: var(--rd-head-lh, 1.12); letter-spacing: var(--rd-head-track, -.01em); text-transform: var(--rd-head-case, none); text-align: var(--rd-head-align, left); color: var(--rd-head-color, var(--rd-fg)); margin: 0 0 .1em; text-indent: 0; text-wrap: balance; } .rd-byline { font-family: var(--rd-cap-font, 'IBM Plex Mono', monospace); font-size: calc(var(--rd-cap-size, .72em) * .95); letter-spacing: .14em; text-transform: uppercase; color: var(--rd-muted); margin: 0 0 2.2em; text-align: var(--rd-head-align, left); } .reader h2, .reader h3, .reader h4, .reader h5, .reader h6 { font-family: var(--rd-head-font, 'Newsreader', Georgia, serif); font-weight: var(--rd-head-weight, 600); font-style: var(--rd-head-style, normal); line-height: var(--rd-head-lh, 1.12); letter-spacing: var(--rd-head-track, -.01em); text-transform: var(--rd-head-case, none); text-align: var(--rd-head-align, left); color: var(--rd-head-color, var(--rd-fg)); margin: var(--rd-head-space, 1.9em) 0 .55em; text-indent: 0; text-wrap: balance; } .reader h2 { font-size: calc(1em * var(--rd-head-scale, 1.22) * var(--rd-head-scale, 1.22)); } .reader h3 { font-size: calc(1em * var(--rd-head-scale, 1.22) * 1.06); } .reader h4 { font-size: calc(1em * var(--rd-head-scale, 1.22) * .92); } .reader h5, .reader h6 { font-size: 1em; letter-spacing: .1em; text-transform: uppercase; } body.rd-headrule .reader h2 { border-bottom: 1px solid var(--rd-hair); padding-bottom: .3em; } /* ---- lede & drop cap -------------------------------------------------- */ body.rd-lede .reader .rd-first { font-size: 1.12em; line-height: calc(var(--rd-lh, 1.62) * .96); } body.rd-dropcap .reader .rd-first::first-letter { float: left; font-family: var(--rd-head-font); font-weight: var(--rd-head-weight); font-size: 3.4em; line-height: .82; padding: .05em .09em 0 0; color: var(--rd-accent); } /* ---- links ------------------------------------------------------------ */ .reader a { color: var(--rd-link, #1c4f8a); font-weight: var(--rd-link-weight, 400); text-decoration: none; } body.rd-link-underline .reader a { text-decoration: underline; text-decoration-thickness: .5px; text-underline-offset: .18em; text-decoration-color: var(--rd-link-soft); } body.rd-link-subtle .reader a:hover { text-decoration: underline; text-underline-offset: .18em; } body.rd-link-ink .reader a { color: var(--rd-fg); text-decoration: underline; text-decoration-thickness: .5px; text-decoration-color: var(--rd-hair); text-underline-offset: .18em; } body.rd-link-mark .reader a { background: var(--rd-link-wash); box-shadow: 0 0 0 .12em var(--rd-link-wash); border-radius: 2px; } .reader a:hover { color: var(--rd-link-hover); } .reader a.rd-external::after { content: ' ↗'; font-size: .8em; opacity: .55; } /* ---- references ------------------------------------------------------- */ .rd-ref { font-size: .68em; vertical-align: super; line-height: 0; } body:not(.rd-refs) .rd-ref { display: none; } .reader .references, .reader .reflist { font-size: .78em; color: var(--rd-muted); line-height: 1.5; } .reader .references li { margin-bottom: .5em; } /* ---- figures & captions ---------------------------------------------- */ .rd-figure { margin: 1.6em 0; max-width: 100%; border-radius: var(--rd-img-radius, 2px); } .reader img { max-width: 100%; max-width: min(100%, calc(var(--rd-img-scale, 100%))); height: auto; border-radius: var(--rd-img-radius, 2px); filter: brightness(calc(1 - var(--rd-img-dim, 0))) grayscale(var(--rd-img-gray, 0)) contrast(var(--rd-img-contrast, 1)); transition: filter .25s ease; } body.rd-img-frame .reader img { box-shadow: 0 0 0 1px var(--rd-hair), 0 12px 30px -18px rgba(0,0,0,.6); } body.rd-img-float .rd-figure { float: right; clear: right; width: 40%; width: min(42%, 320px); margin: .4em 0 1.2em 1.8em; } body.rd-img-wide .rd-figure { float: none; width: 100%; margin: 2em 0; text-align: center; } body.rd-img-wide .rd-figure img { width: 100%; } body.rd-img-inline .rd-figure { float: none; width: min(60%, 380px); margin: 1.6em auto; } body.rd-img-hidden .reader img, body.rd-img-hidden .rd-figure { display: none; } .rd-caption, .reader figcaption { font-family: var(--rd-cap-font, 'IBM Plex Mono', monospace); font-size: var(--rd-cap-size, .72em); font-weight: var(--rd-cap-weight, 400); font-style: var(--rd-cap-style, normal); line-height: var(--rd-cap-lh, 1.45); letter-spacing: var(--rd-cap-track, 0em); text-transform: var(--rd-cap-case, none); text-align: var(--rd-cap-align, left); color: var(--rd-cap-color, var(--rd-cap-auto)); margin-top: .6em; padding-top: .45em; text-indent: 0; border-top: 1px solid var(--rd-cap-rule); } body.rd-img-hidden .rd-caption { display: none; } /* ---- quotes, code, lists, tables -------------------------------------- */ .rd-quote { font-family: var(--rd-quote-font, 'Newsreader', serif); font-size: var(--rd-quote-size, 1em); font-style: var(--rd-quote-style, italic); color: var(--rd-fg); margin: 1.6em 0; padding-left: 1.2em; } body.rd-quotebar .rd-quote { border-left: 2px solid var(--rd-accent); } .rd-code, .reader code, .reader pre { font-family: var(--rd-code-font, ui-monospace, monospace); font-size: var(--rd-code-size, .86em); background: var(--rd-tint); border-radius: 3px; padding: .08em .3em; } .reader pre { padding: 1em 1.1em; overflow-x: auto; } .reader ul, .reader ol { margin: 0 0 var(--rd-para-gap, .9em); padding-left: 1.6em; } .reader li { margin-bottom: var(--rd-list-gap, .35em); } .reader hr { border: 0; border-top: 1px solid var(--rd-hair); margin: 2.4em 0; } .reader dl { margin: 0 0 1em; } .reader dt { font-weight: 600; } .reader dd { margin: 0 0 .6em 1.4em; } .rd-table, .rd-infobox { font-family: var(--rd-body-font); font-size: var(--rd-table-size, .85em); border-collapse: collapse; line-height: 1.4; } .rd-table { width: 100%; margin: 1.8em 0; display: block; overflow-x: auto; } .rd-table th, .rd-table td, .rd-infobox th, .rd-infobox td { border: 1px solid var(--rd-hair); padding: .45em .65em; text-align: left; vertical-align: top; } .rd-table th, .rd-infobox th { background: var(--rd-tint); font-weight: 600; } .rd-infobox { float: right; width: 44%; width: min(46%, 340px); margin: .3em 0 1.4em 1.8em; } .rd-infobox .rd-caption { border: 0; } body:not(.rd-show-infobox) .rd-infobox { display: none; } body:not(.rd-show-tables) .rd-table { display: none; } .rd-math img, .rd-math { font-size: calc(1em * var(--rd-math-scale, 1)); vertical-align: middle; } .rd-math img { filter: none; } body[data-theme-family="dark"] .rd-math img { filter: invert(1) hue-rotate(180deg); } /* ---- paragraph focus --------------------------------------------------- */ body.rd-focus .reader .rd-body p, body.rd-focus .reader .rd-body li { transition: opacity .18s ease; } body.rd-focus .reader .rd-body:hover p, body.rd-focus .reader .rd-body:hover li { opacity: calc(1 - var(--rd-focus-dim, .55)); } body.rd-focus .reader .rd-body p:hover, body.rd-focus .reader .rd-body li:hover { opacity: 1; } /* ---- paper grain ------------------------------------------------------- */ body.rd-texture .scroller::before { content: ''; position: fixed; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; z-index: 5; opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"); mix-blend-mode: overlay; } /* Things Wikipedia ships that never help a reader. */ .reader .mw-empty-elt, .reader .mw-editsection, .reader .hatnote a.mw-selflink { display: none; } .reader .hatnote { font-size: .82em; color: var(--rd-muted); font-style: italic; margin-bottom: 1.4em; } .reader .IPA, .reader .nowrap { white-space: nowrap; } /* ---- phones ------------------------------------------------------------ A floated thumbnail inside a 375px screen leaves a column two words wide, so on small screens figures and infoboxes go full width. */ /* A 300px float inside a 700px measure leaves a 400px column — too narrow to read. Below tablet width the figures take the full measure instead. */ @media (max-width: 900px) { body.rd-img-float .rd-figure, body.rd-img-inline .rd-figure { float: none; width: 100%; margin: 1.6em 0; } .rd-infobox { float: none; width: 100%; margin: 1.6em 0; display: table; table-layout: fixed; } .rd-infobox img { max-width: 100%; height: auto; } } @media (max-width: 700px) { .reader { padding-left: 16px; padding-right: 16px; } .rd-table { font-size: calc(var(--rd-table-size, .85em) * .92); } } /* ---- floats that know how wide the column actually is ------------------- Viewport width is the wrong test: the measure is a reader setting, so a 1280px window can still hold a 66-character column that a floated infobox would crush to two words per line. Where container queries exist, ask the column itself; older browsers keep the media-query behaviour above. */ @supports (container-type: inline-size) { .reader { container-type: inline-size; container-name: reader; } @container reader (max-width: 780px) { body.rd-img-float .rd-figure, body.rd-img-inline .rd-figure { float: none; width: 100%; margin: 1.6em 0; } .rd-infobox { float: none; width: 100%; margin: 1.6em 0; display: table; table-layout: fixed; } .rd-infobox img { max-width: 100%; height: auto; } } } /* ---- attribution ------------------------------------------------------- */ .rd-credit { margin-top: 3.5em; padding-top: 1.2em; border-top: 1px solid var(--rd-hair); font-family: var(--rd-cap-font, ui-monospace, monospace); font-size: calc(var(--rd-cap-size, .8em) * .92); line-height: 1.6; color: var(--rd-muted); text-indent: 0; } .rd-credit p { margin: 0 0 .7em; text-indent: 0; } .rd-credit a { color: var(--rd-link); } /* The external-link arrow belongs after text, never after a photograph. */ .rd-filelink { border: 0; } .reader a.rd-filelink::after { content: none; } /* ---- image licensing --------------------------------------------------- Images start hidden and are revealed only once their licence is known to permit reuse. Hiding by opacity rather than display keeps the layout from jumping while the metadata is in flight. */ .reader img { opacity: 0; transition: opacity .25s ease; } .reader img.rd-img-cleared, body:not(.rd-licence-checked) .reader img { opacity: 1; } body.rd-licence-pending .reader img:not(.rd-img-cleared) { opacity: 0; } .rd-img-credit { font-family: var(--rd-cap-font, ui-monospace, monospace); font-size: calc(var(--rd-cap-size, .8em) * .82); line-height: 1.45; color: var(--rd-muted); margin: .35em 0 0; text-indent: 0; letter-spacing: .01em; } .rd-img-credit a { color: var(--rd-muted); text-decoration: underline; text-decoration-thickness: .5px; text-underline-offset: .15em; } .rd-img-credit a:hover { color: var(--rd-link); } .rd-img-withheld { font-family: var(--rd-cap-font, ui-monospace, monospace); font-size: calc(var(--rd-cap-size, .8em) * .85); color: var(--rd-muted); font-style: italic; margin: 0 0 .5em; text-indent: 0; padding: .7em .9em; border: 1px dashed var(--rd-hair); } body.rd-img-hidden .rd-img-credit, body.rd-img-hidden .rd-img-withheld { display: none; }