/* =========================================================
   DANANG2NITE — PHASE 76
   EN MOBILE MAGAZINE VIEW / LONG-FORM TYPOGRAPHY POLISH
   Scope: EN + magazine view + <= 820px only.
   Goal: keep the hero/TOC/editorial identity, reduce long-form
   reading scale and vertical rhythm for 15–25 section articles.
   ========================================================= */

@media (max-width:820px){
  html[lang="en"] body.page-magazine-view .magazine-reading{
    margin-top:24px!important;
  }

  /* Hero stays visually dominant. Only minor summary tightening. */
  html[lang="en"] body.page-magazine-view .magazine-masthead__summary{
    line-height:1.52!important;
  }

  /* Main long-form body: one step smaller and denser. */
  html[lang="en"] body.page-magazine-view .magazine-paragraph{
    margin-bottom:18px!important;
  }

  html[lang="en"] body.page-magazine-view .magazine-paragraph p{
    font-size:14.25px!important;
    line-height:1.60!important;
    letter-spacing:0!important;
  }

  html[lang="en"] body.page-magazine-view .magazine-paragraph strong{
    font-size:1em!important;
    font-weight:800!important;
  }

  html[lang="en"] body.page-magazine-view .magazine-paragraph:first-child p::first-letter{
    margin-top:4px!important;
    font-size:43px!important;
  }

  /* Section rhythm: retain the large editorial number, reduce title/body footprint. */
  html[lang="en"] body.page-magazine-view .magazine-section-heading{
    margin:31px 0 14px!important;
    padding-top:13px!important;
    grid-template-columns:34px minmax(0,1fr)!important;
    gap:9px!important;
  }

  html[lang="en"] body.page-magazine-view .magazine-section-heading__index{
    font-size:25px!important;
  }

  html[lang="en"] body.page-magazine-view .magazine-section-heading>div:last-child>span{
    font-size:7px!important;
    letter-spacing:.72px!important;
  }

  html[lang="en"] body.page-magazine-view .magazine-section-heading h2{
    margin-top:3px!important;
    font-size:20.75px!important;
    line-height:1.14!important;
    letter-spacing:-.30px!important;
  }

  /* H3 / boxed numbered subheads follow the same reading scale. */
  html[lang="en"] body.page-magazine-view .magazine-subheading{
    margin:23px 0 11px!important;
  }

  html[lang="en"] body.page-magazine-view .magazine-subheading h3{
    font-size:17.25px!important;
    line-height:1.25!important;
  }

  html[lang="en"] body.page-magazine-view .magazine-subheading.is-numbered{
    padding:12px 13px 12px 14px!important;
  }

  html[lang="en"] body.page-magazine-view .magazine-subheading.is-numbered h3{
    font-size:16.75px!important;
  }

  /* Lists were visually almost as large as body copy. Bring them into rhythm. */
  html[lang="en"] body.page-magazine-view .magazine-list{
    margin-bottom:18px!important;
    padding:12px 13px 12px 15px!important;
  }

  html[lang="en"] body.page-magazine-view .magazine-list li{
    margin:6px 0!important;
    font-size:14px!important;
    line-height:1.55!important;
  }

  html[lang="en"] body.page-magazine-view .magazine-quote blockquote{
    margin:22px 0!important;
    padding:16px!important;
    font-size:16.25px!important;
    line-height:1.46!important;
  }

  /* Non-text content keeps its current size; only the surrounding rhythm tightens. */
  html[lang="en"] body.page-magazine-view .magazine-media,
  html[lang="en"] body.page-magazine-view .magazine-video,
  html[lang="en"] body.page-magazine-view .magazine-sponsored{
    margin-top:24px!important;
    margin-bottom:24px!important;
  }

  html[lang="en"] body.page-magazine-view .magazine-divider{
    margin:30px 0!important;
  }

  /* Article ending remains unchanged in design, just closer to the reading flow. */
  html[lang="en"] body.page-magazine-view .magazine-article-end{
    margin-top:36px!important;
  }
}

@media (max-width:430px){
  html[lang="en"] body.page-magazine-view .magazine-paragraph p{
    font-size:14px!important;
    line-height:1.58!important;
  }

  html[lang="en"] body.page-magazine-view .magazine-section-heading h2{
    font-size:20.25px!important;
  }

  html[lang="en"] body.page-magazine-view .magazine-list li{
    font-size:13.75px!important;
  }
}