/* Decorative editorial illustrations scroll with their section.
   Dedicated gutters keep the artwork outside the reading/clicking area. */
.margin-art { display: none; }

@media (min-width: 1100px) {
  .margin-illustrated {
    --reading-width: min(1120px, calc(100vw - 320px));
    --art-gutter: calc((100vw - var(--reading-width)) / 2);
    --art-width: clamp(100px, calc(var(--art-gutter) - 28px), 190px);
    isolation: isolate;
  }
  .margin-illustrated > section { position: relative; }
  .paper-theme .margin-illustrated #hero .hero-inner { max-width: var(--reading-width); }
  .paper-theme .margin-illustrated > :is(#overview, #debates, #videos, #gallery) {
    width: 100%;
    max-width: none;
    padding-inline: var(--art-gutter);
  }
  .margin-art {
    --art-height: calc(var(--art-width) * 2.4);
    display: block;
    position: absolute;
    top: min(var(--art-top, 24%), max(0px, calc(100% - var(--art-height) - 16px)));
    width: var(--art-width);
    margin: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    direction: ltr;
    opacity: .67;
    mix-blend-mode: multiply;
    mask-image: radial-gradient(ellipse 65% 56% at center, #000 46%, transparent 100%);
  }
  .margin-art--left { left: calc((var(--art-gutter) - var(--art-width)) / 2); }
  .margin-art--right { right: calc((var(--art-gutter) - var(--art-width)) / 2); }
  .margin-art img {
    display: block;
    position: relative;
    left: -30%;
    width: 160%;
    max-width: none;
    height: auto;
  }
  .margin-art--people { --art-height: calc(var(--art-width) * 1.65); opacity: .7; }
  .margin-art--people img { width: 110%; left: -5%; }
  .margin-art--scroll { opacity: .47; }
  #hero > .margin-art--right { --art-top: 20%; }
  #hero > .margin-art--left { --art-top: 58%; }
  #overview > .margin-art--left { --art-top: 12%; }
  #overview > .margin-art--right { --art-top: 63%; }
  #debates > .margin-art { --art-top: 16%; }
  #videos > .margin-art { --art-top: 0%; }
  #gallery > .margin-art { --art-top: 24%; }
}

/* On narrow screens, two compact ornaments get their own space above headings. */
@media (max-width: 1099px) {
  .margin-art--compact {
    display: block;
    width: 88px;
    height: 112px;
    margin: -10px auto 12px;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    opacity: .5;
    mix-blend-mode: multiply;
    mask-image: radial-gradient(ellipse at center, #000 35%, transparent 74%);
  }
  .margin-art--compact img { display: block; width: 100%; height: 100%; object-fit: cover; }
}

/* The amber wash is denser than the pencil-only motifs. */
.margin-art--bottle { opacity: .42; }

@media print { .margin-art { display: none; } }