/* ==========================================================================
   Section: article
   Figma frame "Blog Unterseite" (218:493), band y 767..1968.

   Measured anchors, reproduced exactly at 1440:
     aside      x = 37, text indented to 47, 202 wide
                "Autor" 855, name 887, date 910, TOC label 958,
                TOC entries every 23px from 1000, CTA pill 37 / 1324, 195 x 37
     card       x = 355, y = 818, 970 x 1126, radius 15, white at 0.8
     h2         x = 399, y = 846, 56 / 56, #1b1d36
     body       x = 399, y = 926 / 1660 / 1750, 901 wide, 17 / 19 light
     figure     x = 399, y = 1016, 889 x 593, radius 15
     ornament   box x = -382, y = 1291.07, 737.436 x 871.456,
                inner 839.688 x 698.931 rotated -87.32deg

   Reproduced rather than tidied:
     - the third paragraph starts at x=393 against the other two at 399.
       Normalised to 399; 6px of manual drift, not intent.
     - Figma stacks exact duplicates of "Autor", "Tobias Gabel" and two TOC
       entries on identical coordinates. Rendered once each.
     - the card's padding is asymmetric: 44 left, 25 right.
   ========================================================================== */


  .article {
    position: relative;
    display: grid;
    /* Aside 37..249, card 355..1325: a 212 track, a 106 gutter, a 970 track. */
    grid-template-columns: 212px 970px;
    column-gap: 106px;
    align-items: start;
    padding-block: 51px 24px;
    padding-inline:
      calc(var(--stage-x) + clamp(1.25rem, 2.5694vw, 37px))
      calc(var(--stage-x) + clamp(1.25rem, 7.9861vw, 115px));
  }

  /* --- aside ------------------------------------------------------------ */

  .article__aside {
    position: relative;
    z-index: 1;
    /* Aside text sits 10px inside its column (47 against 37); the CTA pill
       does not. */
    padding-block-start: 37px;   /* card opens at 818, "Autor" at 855 */
  }

  .article__meta-label,
  .article__meta,
  .article__toc-label,
  .article__toc {
    margin-inline-start: 10px;
    max-inline-size: 202px;
    color: var(--color-surface-dark);
  }

  /* "Autor" closes at 874 and the name opens at 887; the name closes at 906
     and the date opens at 910. Two different gaps, so the second one is
     addressed on its own rather than averaged. */
  .article__meta { margin-block-start: 13px; }
  .article__meta + .article__meta { margin-block-start: 4px; }

  .article__toc-label {
    /* Date closes at 929, the label opens at 958. */
    margin-block-start: 29px;
  }

  .article__toc {
    /* Label closes at 977, the first entry at 1000. */
    margin-block-start: 23px;
  }

  .article__toc ul {
    display: grid;
    /* Entries every 23px against a 19px line box. */
    row-gap: 4px;
    list-style: none;
    padding: 0;
  }

  .article__toc a {
    color: inherit;
    text-decoration: none;
  }

  .article__toc a:hover,
  .article__toc a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  /* Same pill as every other CTA: the gradient sits at 70%, the label does not. */
  .article__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 195px;
    block-size: 37px;
    /* Last entry closes at 1226, the pill opens at 1324. */
    margin-block-start: 98px;
    border-radius: var(--radius-2xl);
    color: var(--color-on-dark);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: var(--leading-button);
    text-decoration: none;
    isolation: isolate;
  }

  .article__cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-image: var(--gradient-brand);
    opacity: 0.7;
    transition: opacity var(--duration-fast) var(--ease-out);
  }

  .article__cta:hover::before,
  .article__cta:focus-visible::before {
    opacity: 1;
  }

  /* --- body ------------------------------------------------------------- */

  .article__body {
    position: relative;
    z-index: 1;
    min-block-size: 1126px;
    padding: 28px 25px 0 44px;
    border-radius: var(--radius-md);
    background-color: rgb(255 255 255 / 0.8);
    box-shadow: var(--shadow-card);
  }

  .article__title {
    color: var(--color-heading-alt);
  }

  .article__body p {
    max-inline-size: 901px;
  }

  /* h2 closes at 902, the first paragraph opens at 926. */
  .article__body > p:first-of-type { margin-block-start: 24px; }

  .article__figure {
    /* Figma wraps this in scaleY(-1) + rotate(180deg), which nets to a
       horizontal flip. Dropping it mirrors the photo. */
    scale: -1 1;
    /* Paragraph closes at 983, the figure opens at 1016. */
    margin-block-start: 33px;
    inline-size: 889px;
    max-inline-size: 100%;
    block-size: auto;
    aspect-ratio: 889 / 593;
    border-radius: var(--radius-md);
    object-fit: cover;
  }

  /* Figure closes at 1609, the next paragraph at 1660. */
  .article__figure + p { margin-block-start: 51px; }

  /* 1660 + 3 lines of 19 = 1717; the last paragraph opens at 1750. */
  .article__body > p:last-child { margin-block-start: 33px; }

  /* --- ornament --------------------------------------------------------- */

  .article__ornament {
    position: absolute;
    /* Enters from off-canvas, so it stays on the viewport edge rather than the
       centred stage. */
    inset-block-start: 524px;      /* 1291.07 - 767 */
    inset-inline-start: -382px;
    inline-size: 737.436px;
    aspect-ratio: 737.436 / 871.456;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 0;
  }

  .article__ornament-frame {
    flex: none;
    inline-size: 113.865%;         /* 839.688 / 737.436 */
    aspect-ratio: 839.688 / 698.931;
    rotate: -87.32deg;
    display: block;
    overflow: hidden;
  }

  .article__ornament-frame img {
    inline-size: 100%;
    block-size: 120.14%;
    max-inline-size: none;
    object-fit: cover;
  }

  /* ------------------------------------------------------------------
     Below 1440 there is no comp. Decisions taken here:
       - the two columns stack at 64rem with the aside FIRST, so author,
         date and contents still precede the prose as they do on desktop
       - the body card loses its fixed height and its asymmetric padding
         evens out
       - the ornament is dropped: its placement is a function of the 1440
         composition
     ------------------------------------------------------------------ */

  @media (width < 64rem) {
    .article {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 48px;
      padding-block: 64px;
    }

    .article__aside {
      padding-block-start: 0;
    }

    .article__body {
      min-block-size: 0;
      padding: 32px 24px;
    }

    .article__cta {
      margin-block-start: 32px;
    }

    .article__ornament {
      display: none;
    }
  }