/*
 * Audience styling of the Lees & doe components (body.magazine-adult = the adult magazines, e.g. VECTOR).
 * Only shape and type differ here: every colour comes from the magazine palette and the page subject
 * (Content/magazines.json → tokens.css / page.css), so a new magazine needs no stylesheet changes.
 * Kept in the components layer, after page.css and activities.css, so ordinary specificity decides.
 */
@layer components {
  .magazine-adult .cover-masthead {
    font-weight: 850;
    letter-spacing: -6px;
  }
  .magazine-adult .cover-story h2 {
    font-size: clamp(40px, 5vw, 68px);
    line-height: 1.03;
  }
  .magazine-adult .cover-story p {
    max-width: 380px;
  }
  .magazine-adult .cover-label {
    transform: none;
  }
  .magazine-adult .article-header h2 {
    font-weight: 800;
    letter-spacing: -1.5px;
  }
  .magazine-adult .article-image img,
  .magazine-adult .button,
  .magazine-adult .callout,
  .magazine-adult .infographic,
  .magazine-adult .cover-lines li,
  .magazine-adult .speech-text {
    border-radius: 0;
  }
  /* A quieter accent box for adult readers: the accent colour as a wash instead of a full fill. */
  .magazine-adult .callout {
    background: color-mix(in srgb, var(--lime) 35%, var(--paper));
    border-left: 4px solid var(--green);
  }
  .magazine-adult .callout:not(.has-mascot) > div {
    padding-right: 0;
  }
  .magazine-adult .callout img {
    height: 80px;
    width: 80px;
    bottom: 15px;
  }
  .magazine-adult .speech-text::before {
    display: none;
  }
  .magazine-adult .comic-art {
    aspect-ratio: 3/2;
  }

  @media (max-width: 540px) {
    .magazine-adult .cover-masthead {
      font-size: clamp(60px, 15vw, 85px);
      letter-spacing: -4px;
    }
    .magazine-adult .cover-story h2 {
      font-size: clamp(34px, 8.7vw, 47px);
      line-height: 1.03;
    }
    .magazine-adult .cover-story p {
      max-width: 240px;
    }
    .magazine-adult .magazine-page:not(.layout-feature) .article-header h2 {
      font-size: 32px;
    }
    .magazine-adult .callout img {
      height: 60px;
      width: 60px;
    }
    .magazine-adult .editor-note {
      display: block;
    }
  }
}