/* ################################### ARTICLE VIEW (html reader) #########################################
   Single sources: the themes (light/dark) are defined below; the typography of each article font preset lives in
   presets/{key}.css, of which articleView.js loads only the active one.

   Specificity: every rule here is prefixed with #divHtmlWrapper.articleView (an id, so (1,x,x)). That beats the shared
   scripts/css/htmlreader.css and tenant custom css written as ".htmlReader ..." selectors, and also the CRM per-title styling
   (".htmlReader[data-rootarticleid=..] *" / "... h1", at most (0,2,1)). So the preset's fonts, sizes and colours are NOT
   overridden by those; only !important or a selector that also starts with #divHtmlWrapper.articleView can change them.
   Exception, the font families: each tag takes its own variable (--avHeadFamily, --avBodyFamily, ...), which is how one preset mixes
   several families, but a publisher who sets fonts of their own replaces them all (data-customfonts, see "PRESET FONT FAMILIES").
   Sizes in the presets are mobile px; the wide variant (container >= 760px) scales them via --avWide*. */

/* resolved once on the image block, so captions inherit a length instead of re-resolving its % */
@property --avBleed {
    syntax: '<length>';
    inherits: true;
    initial-value: 0px;
}

#divHtmlWrapper.articleView {
    --avTopBarHeight:   52px;
    --avColumnMax:      640px;
    --avColumnPad:      30px 22px 140px;
    --avColumnSide:     22px;
    --avBleedMax:       22px;
    --avHeroRatio:      4 / 5;
    --avHeroGap:        28px;
    --avWideHead:       1;      /* headline, dek, quote, h2 multiplier */
    --avWideBody:       1;      /* body multiplier */
    --avH2Wide:         1;      /* h2 multiplier; uppercase h2 keeps its size (--avH2WideScale from the preset) */

    /* position / size: platform.css (#divHtmlWrapper and #divHtmlWrapper.desktop) */
    overflow:           hidden;
    text-align:         left;
    background-color:   var(--avBg);
    color:              var(--avInk);
    container:          articleview / inline-size;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition:         background-color .3s, color .3s;
}

/* ------------ themes (reader choice, data-theme set by articleView.js) -------------------- */

#divHtmlWrapper.articleView {
    --avBg: #fbfaf8;
    --avInk: #171614;
    --avSoft: #45423d;
    --avMuted: #76716a;
    --avRule: #e4e1db;
    --avChip: #f2f0ec;
    --avAccent: #b5372a;
    --avPill: #1c1b1a;
    --avPillInk: #f6f4f0;
}
#divHtmlWrapper.articleView[data-theme="dark"] {
    --avBg: #141413;
    --avInk: #e9e6e0;
    --avSoft: #c3bfb7;
    --avMuted: #8f8a82;
    --avRule: #2c2b29;
    --avChip: #1f1e1c;
    --avAccent: #e8806f;
    --avPill: #e9e6e0;
    --avPillInk: #141413;
}
/* oklch accent; the hex values above are its approximation for browsers without oklch.
   A publication's own accent (highlight colour) is set inline by articleView.js, contrast-checked against --avBg. */
@supports (color: oklch(0 0 0)) {
    #divHtmlWrapper.articleView {
        --avAccent: oklch(0.53 0.17 28);
    }
    #divHtmlWrapper.articleView[data-theme="dark"] {
        --avAccent: oklch(0.72 0.14 28);
    }
}

@container articleview (min-width: 760px) {
    #divHtmlWrapper.articleView .avScroll {
        --avColumnMax: 720px;
        --avColumnPad: 44px 24px 180px;
        --avColumnSide: 24px;
        --avBleedMax: 100px;
        --avHeroRatio: auto;
        --avHeroGap: 44px;
        --avWideHead: 1.5;
        --avWideBody: 1.08;
        --avH2Wide: var(--avH2WideScale);
    }
}

#divHtmlWrapper.articleView button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
#divHtmlWrapper.articleView button:focus-visible,
#divHtmlWrapper.articleView input:focus-visible {
    outline: 2px solid var(--avAccent);
    outline-offset: 2px;
}

/* ------------ top bar -------------------- */

#divHtmlWrapper.articleView .avTopBar {
    position:           absolute;
    top:                0;
    left:               0;
    right:              0;
    height:             var(--avTopBarHeight);
    z-index:            3;
    display:            flex;
    align-items:        center;
    justify-content:    space-between;
    padding:            0 10px;
    box-sizing:         border-box;
    background-color:   var(--avBg);
    border-bottom:      1px solid var(--avRule);
    transition:         background-color .3s, border-color .3s;
}
#divHtmlWrapper.articleView .avReadTime {
    padding-left: 12px;
    font: 500 12px/1 var(--avMetaFamily);
    letter-spacing: .02em;
    color: var(--avMuted);
    white-space: nowrap;
}
#divHtmlWrapper.articleView .avTopActions {
    display: flex;
    align-items: center;
    gap: 6px;
}
#divHtmlWrapper.articleView .avProgress {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 0;
    background-color: var(--avAccent);
    transition: width .1s linear;
}

/* theme switch */
#divHtmlWrapper.articleView .avThemeSwitch {
    height: 44px;
    padding: 0 4px;
    display: flex;
    align-items: center;
}
#divHtmlWrapper.articleView .avThemeTrack {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    box-sizing: border-box;
    background-color: var(--avChip);
    border: 1px solid var(--avRule);
    transition: background-color .3s, border-color .3s;
}
#divHtmlWrapper.articleView .avThemeKnob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background-color: var(--avInk);
    color: var(--avBg);
    transition: left .25s cubic-bezier(.2,.8,.2,1), background-color .3s, color .3s;
}
#divHtmlWrapper.articleView[data-theme="dark"] .avThemeKnob {
    left: 22px;
}
#divHtmlWrapper.articleView .avThemeKnob .avIconSun {
    display: block;
}
#divHtmlWrapper.articleView .avThemeKnob .avIconMoon {
    display: none;
}
#divHtmlWrapper.articleView[data-theme="dark"] .avThemeKnob .avIconSun {
    display: none;
}
#divHtmlWrapper.articleView[data-theme="dark"] .avThemeKnob .avIconMoon {
    display: block;
}
#divHtmlWrapper.articleView .avThemeSwitch:focus-visible {
    outline: none;
}
#divHtmlWrapper.articleView .avThemeSwitch:focus-visible .avThemeTrack {
    outline: 2px solid var(--avAccent);
    outline-offset: 2px;
}

/* close */
#divHtmlWrapper.articleView .avClose {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--avInk);
}

/* ------------ scroll container + column -------------------- */

#divHtmlWrapper.articleView .avScroll {
    position:           absolute;
    top:                var(--avTopBarHeight);
    left:               0;
    right:              0;
    bottom:             0;
    overflow-x:         hidden;
    overflow-y:         auto;
    overscroll-behavior: contain;
    scrollbar-width:    none;
    -webkit-overflow-scrolling: touch;
}
#divHtmlWrapper.articleView .avScroll::-webkit-scrollbar {
    display: none;
}

#divHtmlWrapper.articleView .divHtmlContent {
    display:            block;
    margin:             0 auto;
    max-width:          var(--avColumnMax);
    padding:            var(--avColumnPad);
    box-sizing:         border-box;
    font-weight:        var(--avBodyWeight);
    font-size:          calc(var(--avBodySize) * var(--avWideBody) * 1px);
    line-height:        var(--avBodyLh);
    letter-spacing:     var(--avBodyTr);
    color:              var(--avInk);
    hyphens:            auto;
    -webkit-hyphens:    auto;
    overflow-wrap:      break-word;
    font-optical-sizing: auto;
}

/* neutralise the generic htmlreader.css box model inside the column (:where keeps it below the rules that follow) */
#divHtmlWrapper.articleView :where(.htmlReader, .htmlReader .node, .htmlReader .divText, .htmlReader .divImage) {
    padding: 0;
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    background: none;
}
#divHtmlWrapper.articleView :where(.htmlReader) {
    white-space: normal;
    word-break: normal;
}
/* pdf colours do not survive a theme switch */
#divHtmlWrapper.articleView .htmlReader .node[style] {
    background-color: transparent !important;
    color: inherit !important;
}

/* ------------ header -------------------- */

#divHtmlWrapper.articleView .avHeader {
    text-align: var(--avAlign);
}
#divHtmlWrapper.articleView .avKicker,
#divHtmlWrapper.articleView .avKicker h3 {
    margin: 0;
    font-weight: var(--avLabelWeight);
    font-style: normal;
    font-size: calc(var(--avLabelSize) * 1px);
    line-height: 1.2;
    letter-spacing: var(--avLabelTr);
    text-transform: var(--avLabelCase);
    color: var(--avLabelColor);
}
#divHtmlWrapper.articleView .avHeadline {
    margin-top: 0;
}
#divHtmlWrapper.articleView .avKicker + .avHeadline {
    margin-top: 14px;
}
#divHtmlWrapper.articleView .avHeadline h1 {
    margin: 0;
    padding: 0;
    color: var(--avInk);
    background: none;
    text-transform: none;
    font-weight: var(--avHeadWeight);
    font-style: var(--avHeadStyle);
    font-size: calc(var(--avHeadSize) * var(--avWideHead) * 1px);
    line-height: var(--avHeadLh);
    letter-spacing: var(--avHeadTr);
    text-wrap: balance;
    hyphens: manual;
    -webkit-hyphens: manual;
}
#divHtmlWrapper.articleView .avDek {
    margin-top: 14px;
}
#divHtmlWrapper.articleView .avDek h3,
#divHtmlWrapper.articleView .avDek p {
    margin: 0;
    color: var(--avSoft);
    font-style: var(--avDekStyle);
    font-weight: var(--avDekWeight);
    font-size: calc(var(--avDekSize) * var(--avWideHead) * 1px);
    line-height: 1.42;
    letter-spacing: normal;
    text-transform: none;
    text-wrap: pretty;
}

#divHtmlWrapper.articleView .avMeta {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: var(--avMetaAlign);
    letter-spacing: normal;
    line-height: 1.3;
}
/* rules above/below the meta line: --avMetaRule / --avMetaRulePad from the preset */
#divHtmlWrapper.articleView .avMeta {
    padding: var(--avMetaRulePad);
    border-top: var(--avMetaRule) solid var(--avRule);
    border-bottom: var(--avMetaRule) solid var(--avRule);
}
#divHtmlWrapper.articleView .avMetaDate {
    font-size: 12.5px;
    font-weight: 400;
    color: var(--avMuted);
}
#divHtmlWrapper.articleView .avMeta + *:not(.avHero),
#divHtmlWrapper.articleView .avHeader + *:not(.avHeader):not(.avHero):not(.avMeta) {
    margin-top: 28px;
}

/* ------------ images -------------------- */

#divHtmlWrapper.articleView figure {
    margin: 0;
    padding: 0;
}
#divHtmlWrapper.articleView img {
    max-width: 100% !important;
    height: auto;
    border-radius: 0;
    margin: 0;
}
#divHtmlWrapper.articleView .divImage,
#divHtmlWrapper.articleView .avFigure {
    margin: 1.8em 0;
    text-align: center;
}
#divHtmlWrapper.articleView .divImage img,
#divHtmlWrapper.articleView .avFigure img {
    display: block;
    width: 100%;
}
#divHtmlWrapper.articleView .avSmallImage img {
    width: auto;
    margin: 0 auto;
}

/* bleed: break out of the column (--avImageBleed 1/0 from the preset), limited to the room the container has */
#divHtmlWrapper.articleView .divImage:not(.avSmallImage),
#divHtmlWrapper.articleView .avFigure:not(.avSmallImage) {
    --avBleed: calc(var(--avImageBleed) * min(var(--avBleedMax), max(0px, calc((100cqw - min(100cqw, var(--avColumnMax)) + 2 * var(--avColumnSide)) / 2))));
    margin-left: calc(var(--avBleed) * -1);
    margin-right: calc(var(--avBleed) * -1);
}

#divHtmlWrapper.articleView .avHero {
    margin: var(--avHeroGap) 0 0;
}
#divHtmlWrapper.articleView .avHero img {
    aspect-ratio: var(--avHeroRatio);
    object-fit: cover;
    object-position: center 22%;
    background-color: var(--avChip);
}
/* never crop an image shown at its own size */
#divHtmlWrapper.articleView .avHero.avSmallImage img {
    aspect-ratio: auto;
    object-fit: initial;
    background-color: transparent;
}
#divHtmlWrapper.articleView .avHero + * {
    margin-top: 28px;
}

#divHtmlWrapper.articleView figcaption,
#divHtmlWrapper.articleView .imageCaption {
    display: block;
    padding: 10px var(--avBleed, 0px) 0;
    margin: 0;
    text-align: left;
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1.45;
    font-style: normal;
    letter-spacing: 0;
    color: var(--avMuted);
    hyphens: manual;
    -webkit-hyphens: manual;
}
/* caption in its own block: normal flow; tucked under the image only when it directly follows it */
#divHtmlWrapper.articleView .divText > figcaption {
    padding: 0;
    margin: 0 0 1.8em;
}
#divHtmlWrapper.articleView .divImage:has(+ .divText > figcaption:first-child) {
    margin-bottom: 0;
}
#divHtmlWrapper.articleView .divImage + .divText > figcaption:first-child {
    padding-top: 10px;
}

/* ------------ body -------------------- */

#divHtmlWrapper.articleView p {
    margin: 0 0 1.1em;
    text-wrap: pretty;
}
#divHtmlWrapper.articleView a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: .15em;
}
#divHtmlWrapper.articleView b,
#divHtmlWrapper.articleView strong {
    font-weight: 700;
}

#divHtmlWrapper.articleView h1,
#divHtmlWrapper.articleView h2 {
    margin: 1.6em 0 .5em;
    padding: 0;
    color: inherit;
    background: none;
    font-weight: var(--avH2Weight);
    font-style: normal;
    font-size: calc(var(--avH2Size) * var(--avH2Wide) * 1px);
    line-height: 1.25;
    letter-spacing: var(--avH2Tr);
    text-transform: var(--avH2Case);
    text-align: left;
    hyphens: manual;
    -webkit-hyphens: manual;
}
#divHtmlWrapper.articleView h2::before {
    content: none;
}
#divHtmlWrapper.articleView h3 {
    margin: 1.4em 0 .4em;
    padding: 0;
    color: inherit;
    font-weight: var(--avH2Weight);
    font-style: normal;
    font-size: calc(var(--avH2Size) * .85 * 1px);
    line-height: 1.3;
    letter-spacing: var(--avH2Tr);
    text-transform: var(--avH2Case);
}
#divHtmlWrapper.articleView .avHeader h1,
#divHtmlWrapper.articleView .avHeader h3 {
    margin-top: 0;
    margin-bottom: 0;
}

/* pull quote */
#divHtmlWrapper.articleView blockquote {
    margin: 1.8em 0;
    padding: 0;
    border: 0;
}
#divHtmlWrapper.articleView .avPullQuote {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    font-style: var(--avQuoteStyle);
    font-weight: var(--avQuoteWeight);
    font-size: calc(var(--avQuoteSize) * var(--avWideHead) * 1px);
    line-height: 1.25;
    letter-spacing: var(--avHeadTr);
    text-wrap: balance;
    hyphens: manual;
    -webkit-hyphens: manual;
}
#divHtmlWrapper.articleView .avPullQuote::before {
    content: "";
    display: block;
    width: 36px;
    height: 2px;
    background-color: var(--avAccent);
}

/* sidebar items / long quotations: not a pull quote */
#divHtmlWrapper.articleView .avAside {
    margin: 1.2em 0;
    padding: 0 0 0 16px;
    border-left: 2px solid var(--avAccent);
    font-size: .92em;
    line-height: 1.55;
}
#divHtmlWrapper.articleView .avAside + .avAside,
#divHtmlWrapper.articleView .node:has(> .avAside) + .node:has(> .avAside) .avAside {
    margin-top: -.4em;
}

/* boxed groups (sidebars that carried a background in print) */
#divHtmlWrapper.articleView .avPanel {
    margin: 1.8em 0;
    padding: 18px 20px 4px;
    border-radius: 4px;
    background-color: var(--avChip) !important;
    color: inherit !important;
}
#divHtmlWrapper.articleView .avPanel > :first-child,
#divHtmlWrapper.articleView .avPanel > :first-child > :first-child {
    margin-top: 0;
}

/* drop cap: defined by the preset that uses it (presets/times.css) */

/* end mark */
#divHtmlWrapper.articleView .avEndMark {
    display: inline-block;
    width: .5em;
    height: .5em;
    margin-left: 4px;
    background-color: var(--avAccent);
}

/* search highlights + summary (existing features, themed) */
#divHtmlWrapper.articleView .highlighted {
    background-color: color-mix(in srgb, var(--avAccent) 28%, transparent);
    color: inherit;
    border-radius: 2px;
}
#divHtmlWrapper.articleView .summaryToggle {
    display: inline-flex;
    margin: 0 0 14px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--avRule);
    background-color: var(--avChip);
    color: var(--avInk);
    font: 600 12px/1 var(--avMetaFamily);
}
#divHtmlWrapper.articleView .summaryToggle.active {
    border-bottom-left-radius: 999px;
    border-bottom-right-radius: 999px;
}
#divHtmlWrapper.articleView .summary {
    margin: 0 0 24px;
    padding: 14px 16px;
    border-radius: 4px;
    background-color: var(--avChip);
    color: var(--avInk);
    font-size: .92em;
    line-height: 1.55;
}
#divHtmlWrapper.articleView .summary.collapsed {
    display: none;
}

/* ------------ listen: pill + player -------------------- */

#divHtmlWrapper.articleView .avListenPill {
    position:           absolute;
    right:              14px;
    bottom:             calc(18px + env(safe-area-inset-bottom, 0px));
    z-index:            2;
    height:             48px;
    padding:            0 18px 0 8px;
    border-radius:      24px;
    display:            flex;
    align-items:        center;
    gap:                10px;
    background-color:   var(--avPill);
    color:              var(--avPillInk);
    box-shadow:         0 6px 20px rgba(0,0,0,.18);
    font:               600 13px/1 Inter, sans-serif;
    white-space:        nowrap;
    transition:         background-color .3s, color .3s;
}
#divHtmlWrapper.articleView .avListenPill .avPlayDisc {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background-color: var(--avPillInk);
    color: var(--avPill);
}

#divHtmlWrapper.articleView .avPlayer {
    position:           absolute;
    left:               12px;
    right:              12px;
    bottom:             calc(14px + env(safe-area-inset-bottom, 0px));
    z-index:            2;
    display:            flex;
    align-items:        center;
    gap:                12px;
    box-sizing:         border-box;
    padding:            10px 8px 10px 10px;
    border-radius:      18px;
    background-color:   var(--avPill);
    color:              var(--avPillInk);
    box-shadow:         0 8px 28px rgba(0,0,0,.22);
    font-family:        Inter, sans-serif;
    transition:         background-color .3s, color .3s;
}
@container articleview (min-width: 760px) {
    #divHtmlWrapper.articleView .avPlayer {
        left: auto;
        right: 24px;
        width: 380px;
    }
}
#divHtmlWrapper.articleView .avPlayToggle {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    background-color: var(--avPillInk);
    color: var(--avPill);
}
#divHtmlWrapper.articleView .avPlayToggle .avIconPause,
#divHtmlWrapper.articleView .avPlayer.isPlaying .avPlayToggle .avIconPlay {
    display: none;
}
#divHtmlWrapper.articleView .avPlayer.isPlaying .avPlayToggle .avIconPause {
    display: flex;
}
#divHtmlWrapper.articleView .avIconPause {
    gap: 4px;
}
#divHtmlWrapper.articleView .avIconPause span {
    width: 4px;
    height: 14px;
    border-radius: 1px;
    background-color: currentColor;
}
#divHtmlWrapper.articleView .avIconPlay {
    display: block;
    margin-left: 3px;
}
#divHtmlWrapper.articleView .avPlayer.isLoading .avPlayToggle {
    opacity: .6;
    cursor: progress;
}
#divHtmlWrapper.articleView .avPlayerMid {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
#divHtmlWrapper.articleView .avPlayerRow {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font: 600 12px/1 Inter, sans-serif;
}
#divHtmlWrapper.articleView .avPlayerTitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#divHtmlWrapper.articleView .avPlayerTime {
    flex: none;
    font-weight: 500;
    opacity: .7;
    font-variant-numeric: tabular-nums;
}
/* seek: drawn here, not by the browser (sys.css strips the native range look, and iOS ignores accent-color) */
#divHtmlWrapper.articleView .avPlayer {
    touch-action: manipulation;
}
#divHtmlWrapper.articleView .avSeek {
    --avSeekPct: 0%;
    --avSeekRest: color-mix(in srgb, var(--avPillInk) 28%, transparent);
    display: block;
    width: 100%;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    touch-action: none;
}
#divHtmlWrapper.articleView .avSeek::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    border: 0;
    background: linear-gradient(to right, var(--avPillInk) var(--avSeekPct), var(--avSeekRest) var(--avSeekPct));
}
#divHtmlWrapper.articleView .avSeek::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -5px;
    border: 0;
    border-radius: 50%;
    background: var(--avPillInk);
    box-shadow: none;
}
#divHtmlWrapper.articleView .avSeek::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    border: 0;
    background: var(--avSeekRest);
}
#divHtmlWrapper.articleView .avSeek::-moz-range-progress {
    height: 4px;
    border-radius: 2px;
    background: var(--avPillInk);
}
#divHtmlWrapper.articleView .avSeek::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 0;
    border-radius: 50%;
    background: var(--avPillInk);
    box-shadow: none;
}
#divHtmlWrapper.articleView .avPlayerClose {
    flex: none;
    width: 36px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--avPillInk);
    opacity: .7;
}

#divHtmlWrapper.articleView .avListenPill.hidden,
#divHtmlWrapper.articleView .avPlayer.hidden {
    display: none;
}

/* offline: no speech */
#divPlatform[data-is_online="0"] #divHtmlWrapper.articleView .avListenPill,
#divPlatform[data-is_online="0"] #divHtmlWrapper.articleView .avPlayer {
    display: none;
}

/* ------------ desktop reader (centred panel) -------------------- */

#divHtmlWrapper.articleView.desktop {
    overflow: hidden;
}

/* ------------ reduced motion -------------------- */

@media (prefers-reduced-motion: reduce) {
    #divHtmlWrapper.articleView,
    #divHtmlWrapper.articleView * {
        transition: none !important;
    }
}

/* ################# PRESET FONT FAMILIES #################################
   Kept apart so a publisher's own fonts replace the preset's as a whole: when the article carries font-family rules of its own
   (article styling screen: body / h1 / h2) or the platform sets a body font (relation editor), articleView.js sets data-customfonts on the wrapper, none of these apply and the
   publisher's fonts (and what the text inherits from them) are used everywhere. Sizes, weights, colours and layout stay the preset's.
   Interface chrome (read time, listen pill, summary toggle, player) always keeps the preset. */

#divHtmlWrapper.articleView:not([data-customfonts]) .divHtmlContent {
    font-family:        var(--avBodyFamily);
}
#divHtmlWrapper.articleView:not([data-customfonts]) .avKicker,
#divHtmlWrapper.articleView:not([data-customfonts]) .avKicker h3 {
    font-family: var(--avLabelFamily);
}
#divHtmlWrapper.articleView:not([data-customfonts]) .avHeadline h1 {
    font-family: var(--avHeadFamily);
}
#divHtmlWrapper.articleView:not([data-customfonts]) .avDek h3,
#divHtmlWrapper.articleView:not([data-customfonts]) .avDek p {
    font-family: var(--avDekFamily);
}
#divHtmlWrapper.articleView:not([data-customfonts]) .avMeta {
    font-family: var(--avMetaFamily);
}
#divHtmlWrapper.articleView:not([data-customfonts]) figcaption,
#divHtmlWrapper.articleView:not([data-customfonts]) .imageCaption {
    font-family: var(--avMetaFamily);
}
#divHtmlWrapper.articleView:not([data-customfonts]) h1,
#divHtmlWrapper.articleView:not([data-customfonts]) h2 {
    font-family: var(--avH2Family);
}
#divHtmlWrapper.articleView:not([data-customfonts]) h3 {
    font-family: var(--avH2Family);
}
#divHtmlWrapper.articleView:not([data-customfonts]) .avPullQuote {
    font-family: var(--avQuoteFamily);
}
#divHtmlWrapper.articleView:not([data-customfonts]) :where(.htmlReader, .htmlReader .node, .htmlReader .divText, .htmlReader .divImage) {
    font-family: inherit;   /* the neutralising rule above, minus the family a publisher may set on .htmlReader */
}