/* Mobile long-form reading rhythm r2. Keep this layer scoped to article pages. */

@media (max-width: 820px) {
  html {
    scrollbar-gutter: auto;
  }

  body:is([data-site-page="learn"], [data-site-page="learn-change"], [data-site-page="two"])
    main#main.container.learn-page,
  main#main.l2-content.cup-story-article-main {
    width: 100%;
    max-width: none;
    margin-inline: auto;
    padding-inline: clamp(20px, 5.5vw, 24px);
  }

  body:is([data-site-page="learn"], [data-site-page="learn-change"])
    :is(.reading-panel, .reader, .article-body),
  body[data-site-page="two"]
    :is(.two-article, .two-article-heading, .two-article-body),
  main.cup-story-article-main
    :is(.cup-story-article, .cup-story-article-head, .cup-story-article-body) {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  body:is([data-site-page="learn"], [data-site-page="learn-change"])
    :is(.reader h1, .article-body h2, .article-body h3, .article-body p, .article-quote, .article-image),
  body[data-site-page="two"]
    :is(.two-article-heading h1, .two-article-body p, .two-article-body blockquote, .two-article-body figure),
  main.cup-story-article-main
    :is(.cup-story-article-head h1, .cup-story-article-lead, .cup-story-article-meta, .cup-story-article-body p, .cup-story-article-body blockquote, .cup-story-article-figure) {
    margin-inline: 0;
  }

  body:is([data-site-page="learn"], [data-site-page="learn-change"])
    .article-body p,
  body[data-site-page="two"]
    .two-article-body p,
  main.cup-story-article-main
    .cup-story-article-body p,
  body[data-site-page="news"]
    .daily-body p {
    margin-bottom: 20px !important;
    font-size: 17px;
    line-height: 1.85 !important;
    text-align: left !important;
    text-justify: auto;
    letter-spacing: 0;
    word-spacing: 0;
    font-kerning: normal;
    font-feature-settings: "kern" 1;
    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
    text-wrap: pretty;
    hanging-punctuation: allow-end;
  }

  body:is([data-site-page="learn"], [data-site-page="learn-change"])
    .article-body,
  body[data-site-page="two"]
    .two-article-body,
  main.cup-story-article-main
    .cup-story-article-body,
  body[data-site-page="news"]
    .daily-body {
    line-height: 1.85 !important;
  }

  body:is([data-site-page="learn"], [data-site-page="learn-change"])
    :is(.article-body blockquote, .article-quote),
  body[data-site-page="two"]
    .two-article-body blockquote,
  main.cup-story-article-main
    .cup-story-article-body blockquote,
  body[data-site-page="news"]
    .daily-quote {
    text-align: left;
    line-height: 1.7;
  }

  body:is([data-site-page="learn"], [data-site-page="learn-change"])
    .article-image,
  body[data-site-page="two"]
    .two-article-body figure,
  main.cup-story-article-main
    .cup-story-article-figure {
    max-width: 100%;
  }

  body:is([data-site-page="learn"], [data-site-page="learn-change"])
    .article-image img,
  body[data-site-page="two"]
    .two-article-body img,
  main.cup-story-article-main
    .cup-story-article-figure img {
    max-width: 100%;
    height: auto;
  }

  body:is([data-site-page="learn"], [data-site-page="learn-change"], [data-site-page="two"])
    main#main.learn-page
    nav.edition-switch[aria-label],
  main.cup-story-article-main .cup-edition-switch {
    margin-bottom: 10px !important;
  }

  body:is([data-site-page="learn"], [data-site-page="learn-change"])
    nav.learn-series[aria-label] {
    margin-bottom: 16px;
  }

  /* Win the older learn-mobile-polish and serif override declarations. */
  html body:is([data-site-page="learn"], [data-site-page="learn-change"]) .article-body p {
    margin-bottom: 20px !important;
    line-height: 1.85 !important;
    text-align: left !important;
  }
}