/* The illustrations.
 *
 * Cut-out drawings, placed on the page. Nothing behind them, nothing around
 * them, no edge treatment of any kind.
 *
 * **Three things were tried here and all three were wrong**, and they are
 * recorded because each one looked reasonable in isolation:
 *
 *   1. a rounded plate with a shadow — put every drawing in a small box;
 *   2. a radial wash — a visible oval of light behind the figure;
 *   3. a radial mask to soften the edges — read as a blur around the artwork.
 *
 * All three existed to solve one problem: a near-black ink line on a dark page.
 * That problem is now solved where it should have been solved, by making light
 * the default theme — the drawings are on warm paper, which is what they were
 * drawn for. On dark they still read, because the figures carry pale fills and
 * a mid-green; only the outline merges, which is what an ink drawing does on
 * dark paper anyway.
 *
 * The artwork is a clean cut-out with real transparency. It needs nothing.
 *
 * The standard that keeps a new drawing consistent with these is in the docs
 * repo under `brand/illustration.md`.
 */

.illus {
  display: block;
  /* Height, not width. The figures are drawn at different widths, so matching
   * widths would make the people different sizes. */
  height: clamp(260px, 34vw, 560px);
  width: auto;
  /* Decorative: the prose beside them already says what they show. */
  pointer-events: none;
  user-select: none;
}

/* ---- Placement ----------------------------------------------------------
 *
 * The drawing costs no vertical space, and no text can ever reach it.
 *
 * Both halves of that matter and each one alone was tried and failed. A
 * two-column band reserved the drawing's height, and since an opener is often
 * a single heading, that left a 281px strip with four words in it. Absolute
 * positioning fixed the space and put the artwork under the prose instead —
 * five measured collisions, and section rules cutting across a face.
 *
 * So: absolute, and the section keeps a corridor free on the drawing's side.
 * Nothing has to be nudged per-section and no copy edit can reintroduce an
 * overlap, because the text physically cannot enter the band.
 */
.illus-open {
  position: relative;
  z-index: 1;
  margin-block-end: var(--s-xl);
}

@media (min-width: 1080px) {
  /* The corridor. Wide enough for the drawing plus the gutter it bleeds into. */
  .section:has(.illus) > .page,
  .trust:has(.illus) > .page {
    padding-inline-end: 15rem;
  }

  .section:has(.illus--flip) > .page,
  .trust:has(.illus--flip) > .page {
    padding-inline-end: 0;
    padding-inline-start: 15rem;
  }

  .illus-open > .illus {
    position: absolute;
    /* Anchored at the top so it falls into the space beside the content.
     * Anchoring the bottom made a 400px drawing grow upward out of a 54px
     * opener and straight over the section above. */
    /* Never above the opener. A negative start let the head rise past the
     * section's own top rule, and a hairline drawn across a face reads as a
     * mistake rather than as a layer. Zero, and the overhang is spent
     * downwards where there is nothing to cross. */
    inset-block-start: 0;
    /* **Starts exactly where the text stops.** A negative offset was measured
     * from the content edge, so a 300px drawing pulled back 158px still
     * reached 142px back into the prose — which is where every remaining
     * collision came from. `inset-inline-start: 100%` pins its near edge to
     * the far edge of the content box, so no width of drawing and no length
     * of copy can ever put the two in the same pixels. */
    inset-inline-start: 100%;
    margin-inline-start: var(--s-m);
    /* Smaller than it was. The drawings are company for the words, not the
     * subject of the page — at 400px they were competing with the headline
     * they sit beside. */
    height: clamp(220px, 19vw, 300px);
    width: auto;
    z-index: 0;
  }

  /* `.illus-open > .illus--flip`, not `.illus--flip`: the base rule is a child
   * selector and outranks a lone class, so the flip was being ignored and the
   * drawing sat on the right — 152px off the edge of a 1440px window. */
  .illus-open > .illus--flip {
    inset-inline-start: auto;
    inset-inline-end: 100%;
    margin-inline-start: 0;
    margin-inline-end: var(--s-m);
  }
}

/* Below the corridor width there is nowhere to put it beside the words, so it
 * returns to the flow above them at a size that still reads. */
@media (max-width: 1079px) {
  .illus-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-m);
  }

  .illus-open > .illus {
    order: -1;
    height: clamp(160px, 26vw, 230px);
  }
}

/* ---- Three layers, and the order matters -------------------------------
 *
 * The hairlines between rows were drawing straight across the artwork, which
 * looks like a mistake rather than like a design. But the fix cannot be
 * "put the drawing on top of everything", because then it covers words.
 *
 * So there are three layers and the drawing sits in the middle of them:
 *
 *   2  text — headings, prose, links, the animated figures
 *   1  the drawing
 *   0  grounds and hairlines (row borders, section rules)
 *
 * The mechanism is subtle and worth stating, because it is easy to undo by
 * accident: the blocks *containing* the text must NOT create a stacking
 * context. A `z-index` on a container traps its children inside it, and a
 * child at z-index 2 inside a container at z-index 0 still paints below a
 * sibling container at z-index 1. So the containers stay static, their
 * hairlines paint at the root level below the drawing, and only the
 * text-bearing elements themselves are lifted above it.
 */
.illus-open {
  position: relative;
  z-index: 1;
}

.section:has(.illus) :is(h1, h2, h3, h4, p, dt, dd, a, button, figure, canvas,
                         table, blockquote, code, .eyebrow, .plan, .said, .ledger),
.trust:has(.illus) :is(h1, h2, h3, h4, p, dt, dd, a, button, .eyebrow) {
  position: relative;
  z-index: 2;
}

/* The sections have to let it out; each one would otherwise clip at its own
 * edge and undo the overhang. */
.section:has(.illus),
.trust:has(.illus) {
  overflow-x: clip;
  overflow-y: visible;
}

/* ---- Motion -------------------------------------------------------------
 *
 * The drawing arrives a beat after the words beside it, and from the side, so
 * the two do not move in parallel like a carousel. Opacity and transform only,
 * so nothing here can cause a reflow.
 */
@media (prefers-reduced-motion: no-preference) {
  .illus {
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity 0.7s var(--ease-out) 0.1s,
      transform 0.7s var(--ease-out) 0.1s;
  }

  .is-in .illus,
  .illus.is-in {
    opacity: 1;
    transform: none;
  }
}