/* Three treatments for display type that crosses a photograph.
   Selected with data-text-treatment on <body>:
     veil     — the photograph fades into the paper behind the type (default)
     multiply — the type prints into the photograph in multiply
     clear    — no overlap; type and photograph share an edge instead     */

/* Shared: the headline sits above the photograph and keeps its own colour. */
.edit-menu h2, .closing-story h2 { position: relative; z-index: 2; }

/* veil ------------------------------------------------------------------- */
[data-text-treatment='veil'] .edit-menu h2::before,
[data-text-treatment='veil'] .closing-story h2::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -14% -10%;
  background: radial-gradient(ellipse 58% 54% at 50% 50%,
    rgb(var(--veil) / .97) 0%,
    rgb(var(--veil) / .9) 42%,
    rgb(var(--veil) / .55) 66%,
    rgb(var(--veil) / 0) 82%);
  pointer-events: none;
}
[data-text-treatment='veil'] .closing-story h2::before { inset: -18% -12% -12% -6%; }

/* multiply --------------------------------------------------------------- */
[data-text-treatment='multiply'] .edit-menu h2,
[data-text-treatment='multiply'] .closing-story h2 { mix-blend-mode: multiply; }
[data-text-treatment='multiply'] .edit-menu h2 { color: var(--accent); }
[data-text-treatment='multiply'] .closing-story figure { margin-left: 36%; }

/* clear ------------------------------------------------------------------ */
[data-text-treatment='clear'] .edit-menu h2 {
  margin-left: 0;
  margin-bottom: 52px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--rule);
}
[data-text-treatment='clear'] .closing-story {
  display: grid;
  grid-template-columns: 1fr 40%;
  column-gap: 7%;
  align-items: center;
  min-height: 0;
  padding: 0 4.5% 0 6%;
}
[data-text-treatment='clear'] .closing-story h2 {
  text-align: right;
  margin: 0;
  padding-right: 4%;
}
[data-text-treatment='clear'] .closing-story h2 > span:first-child,
[data-text-treatment='clear'] .closing-story h2 > span:nth-child(2) { margin-left: 0; }
[data-text-treatment='clear'] .closing-story figure {
  width: 100%;
  margin: 0;
}

@media (max-width: 640px) {
  [data-text-treatment='clear'] .edit-menu h2 { margin: 48px 0 32px -4%; padding-bottom: 24px; }
  [data-text-treatment='clear'] .closing-story { display: block; padding: 0; }
  [data-text-treatment='clear'] .closing-story h2 { text-align: left; padding-right: 0; }
  [data-text-treatment='clear'] .closing-story figure { width: 86%; margin: 36px 0 0 14%; }
  [data-text-treatment='multiply'] .closing-story figure { margin-left: 14%; }
}