/* ========== Cutout ========== */
/*
 * The Exa "Subtract" shape: a rounded box with a square notch bitten out of one top corner.
 * Part of the brand identity: use it on photos and brand shapes.
 *
 * Markup: the wrapper sets the size context; its direct child is clipped.
 *   <div class="exa-cutout"><img src="…" alt="…"></div>                  notch top-right (default)
 *   <div class="exa-cutout exa-cutout--left"><div class="shape"></div></div>  notch top-left
 *
 * The notch is square at any size: 22% of the width on both axes (cqw), with 12px corners
 * on all six corners, including the inner one. Pure CSS, no JS.
 * Per instance: style="--exa-cutout-notch: 64px; --exa-cutout-radius: 16px"
 *
 * In a row, alternate right / left so adjacent notches face each other.
 * Port of ExaLife src/lib/cutouts.ts. Generated by scripts/build-cutout-css.py: edit that, not the points.
 */

.exa-cutout {
  --exa-cutout-notch: 22cqw;
  --exa-cutout-radius: var(--exa-radius-cutout, 12px);

  container-type: inline-size;
  display: block;
}

.exa-cutout > * {
  display: block;
  width: 100%;
  clip-path: polygon(
    calc(0% + var(--exa-cutout-radius)) 0%,
    calc(0% + var(--exa-cutout-radius) * 0.8049) calc(0% + var(--exa-cutout-radius) * 0.0192),
    calc(0% + var(--exa-cutout-radius) * 0.6173) calc(0% + var(--exa-cutout-radius) * 0.0761),
    calc(0% + var(--exa-cutout-radius) * 0.4444) calc(0% + var(--exa-cutout-radius) * 0.1685),
    calc(0% + var(--exa-cutout-radius) * 0.2929) calc(0% + var(--exa-cutout-radius) * 0.2929),
    calc(0% + var(--exa-cutout-radius) * 0.1685) calc(0% + var(--exa-cutout-radius) * 0.4444),
    calc(0% + var(--exa-cutout-radius) * 0.0761) calc(0% + var(--exa-cutout-radius) * 0.6173),
    calc(0% + var(--exa-cutout-radius) * 0.0192) calc(0% + var(--exa-cutout-radius) * 0.8049),
    0% calc(0% + var(--exa-cutout-radius)),
    0% calc(100% - var(--exa-cutout-radius)),
    calc(0% + var(--exa-cutout-radius) * 0.0192) calc(100% - var(--exa-cutout-radius) * 0.8049),
    calc(0% + var(--exa-cutout-radius) * 0.0761) calc(100% - var(--exa-cutout-radius) * 0.6173),
    calc(0% + var(--exa-cutout-radius) * 0.1685) calc(100% - var(--exa-cutout-radius) * 0.4444),
    calc(0% + var(--exa-cutout-radius) * 0.2929) calc(100% - var(--exa-cutout-radius) * 0.2929),
    calc(0% + var(--exa-cutout-radius) * 0.4444) calc(100% - var(--exa-cutout-radius) * 0.1685),
    calc(0% + var(--exa-cutout-radius) * 0.6173) calc(100% - var(--exa-cutout-radius) * 0.0761),
    calc(0% + var(--exa-cutout-radius) * 0.8049) calc(100% - var(--exa-cutout-radius) * 0.0192),
    calc(0% + var(--exa-cutout-radius)) 100%,
    calc(100% - var(--exa-cutout-radius)) 100%,
    calc(100% - var(--exa-cutout-radius) * 0.8049) calc(100% - var(--exa-cutout-radius) * 0.0192),
    calc(100% - var(--exa-cutout-radius) * 0.6173) calc(100% - var(--exa-cutout-radius) * 0.0761),
    calc(100% - var(--exa-cutout-radius) * 0.4444) calc(100% - var(--exa-cutout-radius) * 0.1685),
    calc(100% - var(--exa-cutout-radius) * 0.2929) calc(100% - var(--exa-cutout-radius) * 0.2929),
    calc(100% - var(--exa-cutout-radius) * 0.1685) calc(100% - var(--exa-cutout-radius) * 0.4444),
    calc(100% - var(--exa-cutout-radius) * 0.0761) calc(100% - var(--exa-cutout-radius) * 0.6173),
    calc(100% - var(--exa-cutout-radius) * 0.0192) calc(100% - var(--exa-cutout-radius) * 0.8049),
    100% calc(100% - var(--exa-cutout-radius)),
    100% calc(0% + var(--exa-cutout-radius) + var(--exa-cutout-notch)),
    calc(100% - var(--exa-cutout-radius) * 0.0192) calc(0% + var(--exa-cutout-radius) * 0.8049 + var(--exa-cutout-notch)),
    calc(100% - var(--exa-cutout-radius) * 0.0761) calc(0% + var(--exa-cutout-radius) * 0.6173 + var(--exa-cutout-notch)),
    calc(100% - var(--exa-cutout-radius) * 0.1685) calc(0% + var(--exa-cutout-radius) * 0.4444 + var(--exa-cutout-notch)),
    calc(100% - var(--exa-cutout-radius) * 0.2929) calc(0% + var(--exa-cutout-radius) * 0.2929 + var(--exa-cutout-notch)),
    calc(100% - var(--exa-cutout-radius) * 0.4444) calc(0% + var(--exa-cutout-radius) * 0.1685 + var(--exa-cutout-notch)),
    calc(100% - var(--exa-cutout-radius) * 0.6173) calc(0% + var(--exa-cutout-radius) * 0.0761 + var(--exa-cutout-notch)),
    calc(100% - var(--exa-cutout-radius) * 0.8049) calc(0% + var(--exa-cutout-radius) * 0.0192 + var(--exa-cutout-notch)),
    calc(100% - var(--exa-cutout-radius)) calc(0% + var(--exa-cutout-notch)),
    calc(100% + var(--exa-cutout-radius) - var(--exa-cutout-notch)) calc(0% + var(--exa-cutout-notch)),
    calc(100% + var(--exa-cutout-radius) * 0.8049 - var(--exa-cutout-notch)) calc(0% - var(--exa-cutout-radius) * 0.0192 + var(--exa-cutout-notch)),
    calc(100% + var(--exa-cutout-radius) * 0.6173 - var(--exa-cutout-notch)) calc(0% - var(--exa-cutout-radius) * 0.0761 + var(--exa-cutout-notch)),
    calc(100% + var(--exa-cutout-radius) * 0.4444 - var(--exa-cutout-notch)) calc(0% - var(--exa-cutout-radius) * 0.1685 + var(--exa-cutout-notch)),
    calc(100% + var(--exa-cutout-radius) * 0.2929 - var(--exa-cutout-notch)) calc(0% - var(--exa-cutout-radius) * 0.2929 + var(--exa-cutout-notch)),
    calc(100% + var(--exa-cutout-radius) * 0.1685 - var(--exa-cutout-notch)) calc(0% - var(--exa-cutout-radius) * 0.4444 + var(--exa-cutout-notch)),
    calc(100% + var(--exa-cutout-radius) * 0.0761 - var(--exa-cutout-notch)) calc(0% - var(--exa-cutout-radius) * 0.6173 + var(--exa-cutout-notch)),
    calc(100% + var(--exa-cutout-radius) * 0.0192 - var(--exa-cutout-notch)) calc(0% - var(--exa-cutout-radius) * 0.8049 + var(--exa-cutout-notch)),
    calc(100% - var(--exa-cutout-notch)) calc(0% - var(--exa-cutout-radius) + var(--exa-cutout-notch)),
    calc(100% - var(--exa-cutout-notch)) calc(0% + var(--exa-cutout-radius)),
    calc(100% - var(--exa-cutout-radius) * 0.0192 - var(--exa-cutout-notch)) calc(0% + var(--exa-cutout-radius) * 0.8049),
    calc(100% - var(--exa-cutout-radius) * 0.0761 - var(--exa-cutout-notch)) calc(0% + var(--exa-cutout-radius) * 0.6173),
    calc(100% - var(--exa-cutout-radius) * 0.1685 - var(--exa-cutout-notch)) calc(0% + var(--exa-cutout-radius) * 0.4444),
    calc(100% - var(--exa-cutout-radius) * 0.2929 - var(--exa-cutout-notch)) calc(0% + var(--exa-cutout-radius) * 0.2929),
    calc(100% - var(--exa-cutout-radius) * 0.4444 - var(--exa-cutout-notch)) calc(0% + var(--exa-cutout-radius) * 0.1685),
    calc(100% - var(--exa-cutout-radius) * 0.6173 - var(--exa-cutout-notch)) calc(0% + var(--exa-cutout-radius) * 0.0761),
    calc(100% - var(--exa-cutout-radius) * 0.8049 - var(--exa-cutout-notch)) calc(0% + var(--exa-cutout-radius) * 0.0192),
    calc(100% - var(--exa-cutout-radius) - var(--exa-cutout-notch)) 0%
  );
}

.exa-cutout--left > * {
  clip-path: polygon(
    calc(100% - var(--exa-cutout-radius)) 0%,
    calc(100% - var(--exa-cutout-radius) * 0.8049) calc(0% + var(--exa-cutout-radius) * 0.0192),
    calc(100% - var(--exa-cutout-radius) * 0.6173) calc(0% + var(--exa-cutout-radius) * 0.0761),
    calc(100% - var(--exa-cutout-radius) * 0.4444) calc(0% + var(--exa-cutout-radius) * 0.1685),
    calc(100% - var(--exa-cutout-radius) * 0.2929) calc(0% + var(--exa-cutout-radius) * 0.2929),
    calc(100% - var(--exa-cutout-radius) * 0.1685) calc(0% + var(--exa-cutout-radius) * 0.4444),
    calc(100% - var(--exa-cutout-radius) * 0.0761) calc(0% + var(--exa-cutout-radius) * 0.6173),
    calc(100% - var(--exa-cutout-radius) * 0.0192) calc(0% + var(--exa-cutout-radius) * 0.8049),
    100% calc(0% + var(--exa-cutout-radius)),
    100% calc(100% - var(--exa-cutout-radius)),
    calc(100% - var(--exa-cutout-radius) * 0.0192) calc(100% - var(--exa-cutout-radius) * 0.8049),
    calc(100% - var(--exa-cutout-radius) * 0.0761) calc(100% - var(--exa-cutout-radius) * 0.6173),
    calc(100% - var(--exa-cutout-radius) * 0.1685) calc(100% - var(--exa-cutout-radius) * 0.4444),
    calc(100% - var(--exa-cutout-radius) * 0.2929) calc(100% - var(--exa-cutout-radius) * 0.2929),
    calc(100% - var(--exa-cutout-radius) * 0.4444) calc(100% - var(--exa-cutout-radius) * 0.1685),
    calc(100% - var(--exa-cutout-radius) * 0.6173) calc(100% - var(--exa-cutout-radius) * 0.0761),
    calc(100% - var(--exa-cutout-radius) * 0.8049) calc(100% - var(--exa-cutout-radius) * 0.0192),
    calc(100% - var(--exa-cutout-radius)) 100%,
    calc(0% + var(--exa-cutout-radius)) 100%,
    calc(0% + var(--exa-cutout-radius) * 0.8049) calc(100% - var(--exa-cutout-radius) * 0.0192),
    calc(0% + var(--exa-cutout-radius) * 0.6173) calc(100% - var(--exa-cutout-radius) * 0.0761),
    calc(0% + var(--exa-cutout-radius) * 0.4444) calc(100% - var(--exa-cutout-radius) * 0.1685),
    calc(0% + var(--exa-cutout-radius) * 0.2929) calc(100% - var(--exa-cutout-radius) * 0.2929),
    calc(0% + var(--exa-cutout-radius) * 0.1685) calc(100% - var(--exa-cutout-radius) * 0.4444),
    calc(0% + var(--exa-cutout-radius) * 0.0761) calc(100% - var(--exa-cutout-radius) * 0.6173),
    calc(0% + var(--exa-cutout-radius) * 0.0192) calc(100% - var(--exa-cutout-radius) * 0.8049),
    0% calc(100% - var(--exa-cutout-radius)),
    0% calc(0% + var(--exa-cutout-radius) + var(--exa-cutout-notch)),
    calc(0% + var(--exa-cutout-radius) * 0.0192) calc(0% + var(--exa-cutout-radius) * 0.8049 + var(--exa-cutout-notch)),
    calc(0% + var(--exa-cutout-radius) * 0.0761) calc(0% + var(--exa-cutout-radius) * 0.6173 + var(--exa-cutout-notch)),
    calc(0% + var(--exa-cutout-radius) * 0.1685) calc(0% + var(--exa-cutout-radius) * 0.4444 + var(--exa-cutout-notch)),
    calc(0% + var(--exa-cutout-radius) * 0.2929) calc(0% + var(--exa-cutout-radius) * 0.2929 + var(--exa-cutout-notch)),
    calc(0% + var(--exa-cutout-radius) * 0.4444) calc(0% + var(--exa-cutout-radius) * 0.1685 + var(--exa-cutout-notch)),
    calc(0% + var(--exa-cutout-radius) * 0.6173) calc(0% + var(--exa-cutout-radius) * 0.0761 + var(--exa-cutout-notch)),
    calc(0% + var(--exa-cutout-radius) * 0.8049) calc(0% + var(--exa-cutout-radius) * 0.0192 + var(--exa-cutout-notch)),
    calc(0% + var(--exa-cutout-radius)) calc(0% + var(--exa-cutout-notch)),
    calc(0% - var(--exa-cutout-radius) + var(--exa-cutout-notch)) calc(0% + var(--exa-cutout-notch)),
    calc(0% - var(--exa-cutout-radius) * 0.8049 + var(--exa-cutout-notch)) calc(0% - var(--exa-cutout-radius) * 0.0192 + var(--exa-cutout-notch)),
    calc(0% - var(--exa-cutout-radius) * 0.6173 + var(--exa-cutout-notch)) calc(0% - var(--exa-cutout-radius) * 0.0761 + var(--exa-cutout-notch)),
    calc(0% - var(--exa-cutout-radius) * 0.4444 + var(--exa-cutout-notch)) calc(0% - var(--exa-cutout-radius) * 0.1685 + var(--exa-cutout-notch)),
    calc(0% - var(--exa-cutout-radius) * 0.2929 + var(--exa-cutout-notch)) calc(0% - var(--exa-cutout-radius) * 0.2929 + var(--exa-cutout-notch)),
    calc(0% - var(--exa-cutout-radius) * 0.1685 + var(--exa-cutout-notch)) calc(0% - var(--exa-cutout-radius) * 0.4444 + var(--exa-cutout-notch)),
    calc(0% - var(--exa-cutout-radius) * 0.0761 + var(--exa-cutout-notch)) calc(0% - var(--exa-cutout-radius) * 0.6173 + var(--exa-cutout-notch)),
    calc(0% - var(--exa-cutout-radius) * 0.0192 + var(--exa-cutout-notch)) calc(0% - var(--exa-cutout-radius) * 0.8049 + var(--exa-cutout-notch)),
    calc(0% + var(--exa-cutout-notch)) calc(0% - var(--exa-cutout-radius) + var(--exa-cutout-notch)),
    calc(0% + var(--exa-cutout-notch)) calc(0% + var(--exa-cutout-radius)),
    calc(0% + var(--exa-cutout-radius) * 0.0192 + var(--exa-cutout-notch)) calc(0% + var(--exa-cutout-radius) * 0.8049),
    calc(0% + var(--exa-cutout-radius) * 0.0761 + var(--exa-cutout-notch)) calc(0% + var(--exa-cutout-radius) * 0.6173),
    calc(0% + var(--exa-cutout-radius) * 0.1685 + var(--exa-cutout-notch)) calc(0% + var(--exa-cutout-radius) * 0.4444),
    calc(0% + var(--exa-cutout-radius) * 0.2929 + var(--exa-cutout-notch)) calc(0% + var(--exa-cutout-radius) * 0.2929),
    calc(0% + var(--exa-cutout-radius) * 0.4444 + var(--exa-cutout-notch)) calc(0% + var(--exa-cutout-radius) * 0.1685),
    calc(0% + var(--exa-cutout-radius) * 0.6173 + var(--exa-cutout-notch)) calc(0% + var(--exa-cutout-radius) * 0.0761),
    calc(0% + var(--exa-cutout-radius) * 0.8049 + var(--exa-cutout-notch)) calc(0% + var(--exa-cutout-radius) * 0.0192),
    calc(0% + var(--exa-cutout-radius) + var(--exa-cutout-notch)) 0%
  );
}

.exa-cutout > img,
.exa-cutout > video {
  height: 100%;
  object-fit: cover;
}