/* Phone rules for every article page, now and every article added later.
   Linked from the article head so it is in place before the first paint,
   which is what stops the page jumping when the header script runs.

   Desktop and tablet are untouched: everything here is inside max-width 720.
   Selectors carry a `body` prefix where they have to outrank a stylesheet the
   header script appends after this one. */

@media (max-width: 720px) {

  /* ---------- 1. One compact bar, height fixed before anything loads ----------
     The back arrow and the share icon are added by script. Their slots are
     already the right size here, so when they arrive nothing under them moves. */
  body .top {
    position: sticky;
    top: 0;
    z-index: 40;
    height: 52px;
    min-height: 52px;
    margin: 0;
    padding: 0 16px 0 44px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid #e6eef0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
  }

  body .ds-back {
    position: fixed;
    top: 0;
    left: 4px;
    height: 52px;
    z-index: 41;
    margin: 0;
    padding: 0 8px;
    font-size: 0;            /* the arrow alone is enough on a phone */
  }
  body .ds-back svg { width: 22px; height: 22px; }

  /* Share stays exactly where it was in the article, aligned right.
     Its row is reserved here so the page does not move when it appears. */
  body .ds-share-top {
    float: right;
    display: inline-flex;
    align-items: center;
    height: 44px;
    min-height: 44px;
    margin: 0 0 6px;
  }

  /* ---------- 2. The type scale for phones ---------- */
  h1 {
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -.5px;
    margin: 0 0 12px;
    text-wrap: balance;
  }
  h2 { font-size: 21px; line-height: 1.25; margin: 30px 0 10px; }
  h3 { font-size: 18px; line-height: 1.3;  margin: 22px 0 8px; }
  body, p, li { font-size: 17px; line-height: 1.65; }
  .article-intro, .lead { font-size: 17px; line-height: 1.6; }

  /* ---------- 3. Save stays where it was, visible, with its space held ------
     The script adds it after first paint, so the row is reserved here and
     nothing under it moves when the button arrives. */
  body .ds-save {
    float: right;
    display: inline-flex;
    align-items: center;
    height: 44px;
    min-height: 44px;
    margin: 6px 18px 4px 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }
  /* the row below the two buttons starts clean under them */
  body .atopics, body .pubdate, body .article-intro, body .lead { clear: both; }

  .article-category { font-size: 12px; margin: 0 0 10px; }
  .atopics  { margin: 0 0 8px; }
  .pubdate  { margin: 0 0 16px; font-size: 13px; }

  /* ---------- 4. The bottom bar stops sitting on the last paragraph ---------- */
  body { padding-bottom: 60px; }

  /* ---------- 5. Full width reading column ----------
     article.card is the reading panel on an article page. The guides list uses
     a.card for its result cards, which must keep its own rounded look. */
  article.card, .article-content {
    padding: 18px 18px 26px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .hero-inner { padding-top: 22px; padding-bottom: 24px; }
  .breadcrumb { margin-bottom: 12px; font-size: 12px; }
  figure img { border-radius: 14px; }
}