/* Article-only refinements share the existing typography layer so that
   scoped important rules win over its global reading measure and alignment. */
@layer astera-typography {
  @media screen {
    #page-material-detail {
      --article-measure: 60rem;
    }

    #page-material-detail :is(.article-excerpt, .article-relations, .article-body, .article-disclaimer) {
      inline-size: 100% !important;
      max-inline-size: var(--article-measure) !important;
      margin-inline: auto !important;
    }

    #page-material-detail .article-excerpt {
      text-align: justify !important;
      text-align-last: start !important;
      text-justify: inter-word;
    }

    #page-material-detail .article-body :is(p, ul, li, h2) {
      max-inline-size: 100% !important;
    }

    #page-material-detail .article-body :is(p, li) {
      text-align: justify !important;
      text-align-last: start !important;
      text-justify: inter-word;
      text-wrap: pretty !important;
      line-height: 1.8 !important;
      overflow-wrap: break-word !important;
    }

    #page-material-detail .article-body p {
      margin-block-end: 1.5rem !important;
    }

    #page-material-detail .article-body .article-key-point {
      color: var(--type-accent, #e4c67e) !important;
      font-weight: 600 !important;
    }

    #page-material-detail .article-body .article-callout {
      margin-block: 2rem !important;
      padding: 1.5rem 1.75rem !important;
      border: 1px solid rgb(228 198 126 / 18%) !important;
      border-inline-start: 3px solid var(--type-accent, #e4c67e) !important;
      background: #0d2019 !important;
      color: var(--type-ink, #eee9dd) !important;
      font-size: var(--type-lead, 1.25rem) !important;
      line-height: 1.65 !important;
      font-style: normal !important;
      box-shadow: none !important;
    }

    #page-material-detail .article-body h2 {
      margin-block-start: 3rem !important;
      border-block-start-color: rgb(228 198 126 / 22%) !important;
    }

    #page-material-detail .article-body h2::before {
      inline-size: 4rem;
      background: var(--type-accent, #e4c67e);
    }

    #page-material-detail .article-body ::selection {
      background: #e4c67e;
      color: #112b20;
    }

    @media (max-width: 48rem) {
      /* Scoped language-aware hyphenation keeps justified narrow lines readable.
         The content itself contains no manual or discretionary hyphens. */
      #page-material-detail .article-excerpt,
      #page-material-detail .article-body :is(p, li, strong) {
        -webkit-hyphens: auto !important;
        hyphens: auto !important;
        hyphenate-limit-chars: 8 4 4;
      }
      /* These wrappers contain literal compound words only; allow their
         existing hyphen to provide a natural break in narrow reading columns. */
      #page-material-detail .article-excerpt .astera-no-break,
      #page-material-detail .article-body :is(p, li) .astera-no-break {
        white-space: normal !important;
        -webkit-hyphens: auto !important;
        hyphens: auto !important;
      }
      #page-material-detail :is(.article-excerpt, .article-lead) {
        font-size: var(--type-body, 1rem) !important;
      }
      #page-material-detail .article-body :is(p, li) {
        line-height: 1.75 !important;
      }
      #page-material-detail .article-body .article-callout {
        padding: 1.1rem 1rem !important;
        font-size: var(--type-body, 1rem) !important;
      }
      #page-material-detail .article-body h2 {
        margin-block-start: 2.25rem !important;
      }
    }

    @media (forced-colors: active) {
      #page-material-detail .article-body .article-key-point {
        color: CanvasText !important;
      }
      #page-material-detail .article-body .article-callout {
        border-color: CanvasText !important;
        background: Canvas !important;
        color: CanvasText !important;
      }
    }
  }
}