.c-page-header {
  --gap: var(--theme-spacing--gutter);
  --arrow: polygon(
    20px 0%,
    20px 20%,
    100% 20%,
    100% 80%,
    20px 80%,
    20px 100%,
    0% 50%
  );

  @include grid-assign(
    container,
    picture,
    title,
    summary,
    breadcrumbs,
    lastmod,
    toc,
    edit,
    action
  );
  @include grid-breakout();
  grid-template:
    " . ... . " var(--gap)
    " . container ." minmax(0, 1fr)
    " . ... ." 0 / minmax(var(--gap), 1fr)
    calc(var(--theme-spacing--container) - var(--theme-spacing--menu)) minmax(var(--gap), 1fr);

  pointer-events: none; // just make sure we retain the option of breakout hero headers without interfering with the weirdy menu button

  &__container {
    pointer-events: all;
    display: grid;
    grid-template:
      ".           .   .        " var(--gap)
      "breadcrumbs .   edit     " min-content
      "title       .   .        " min-content
      "toc         toc toc      " auto
      "action      .    .  " auto
      ".           .   lastmod  " min-content / 1fr var(--gap) minmax(0, 1fr);
  }
  &__title {
    line-height: 1;
    text-transform: uppercase;
    text-shadow: -2px 1px 0 var(--theme-color--pop);
  }
  &__lastmod,
  &__edit {
    background: var(--theme-color--accent);
    color: var(--theme-color--contrast-max);
    font-size: var(--theme-type-size--6);
    padding: calc(var(--theme-spacing--1) / 2);
    text-align: right;
  }
  &__edit {
    background: var(--theme-color--ink-fade);
    color: var(--theme-color--ink);
    clip-path: var(--arrow);
  }

  // small tweaks for list view
  &--list {
    position: sticky;
    top: 0;
    .c-page-header__container {
      position: relative;
    }
    .c-page-header__toc {
      position: absolute;
      width: fit-content;
      max-width: var(--theme-spacing--container-min);
      box-sizing: content-box;
      right: 0;
    }
  }
}
