@layer mp.layout {

  html {
    --mp-header-nav-height: 75px;
    background-color: var(--mp-color-body);
  }
  html {
    scroll-padding-top: calc(var(--mp-header-nav-height) + var(--wa-space-3xl));
  }
  body {
    display: grid;
    grid-template-areas:
    "header"
    "main"
    "footer";
    grid-template-rows: min-content auto min-content;
    grid-template-columns: 1fr;
    min-block-size: 100vh;
    min-inline-size: 100%;
    grid-auto-flow: column;
    background-color: var(--mp-color-body);
    color: var(--mp-color-dark);
    margin: 0;
    padding: 0;
    justify-items: center;
  }

  body > header {
    border-bottom: var(--wa-border-width-l) solid var(--mp-color-primary);
    isolation: isolate;
    position: sticky;
    top: 0;
    transition-property: transform;
    transition-duration: var(--wa-transition-normal);
    transition-timing-function: var(--mp-transition-cubic);
    will-change: auto;
    z-index: 1000;
    margin: 0;
    padding-block-start: var(--wa-space-l);
    padding-block-end: var(--wa-space-l);
    padding-inline-start: var(--wa-space-m);
    padding-inline-end: var(--wa-space-m);
    grid-area: header;
    background: white;
    --mp-link-color: var(--mp-color-dark);
    block-size: var(--mp-header-nav-height);
  }

  body > main {
    grid-area: main;
    inline-size: min(100%, var(--mp-form--container-max-width));
    overflow: auto;
    padding: var(--wa-space-l) var(--wa-space-m);
    grid-template-rows: auto 1fr;
  }

  body > footer {
    background: var(--mp-color-dark);
    border-top: var(--wa-border-width-l) solid var(--mp-color-light);
    max-block-size: 150px;
    margin-top: 0;
    margin-bottom: 0;
    padding-inline-start: var(--wa-space-l);
    padding-inline-end: var(--wa-space-l);
    padding-block-start: var(--wa-space-2xl);
    padding-block-end: var(--wa-space-2xl);
    inline-size: 100%;
  }

  dialog::backdrop {
    background-color: color-mix(
      in oklab,
      var(--wa-color-overlay-modal, rgb(0 0 0 / 0.25)) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
      transparent
    );
    /* apply gausion blur*/
    filter: blur(calc(var(--wa-shadow-blur-scale) * var(--wa-space-2xs) + var(--wa-space-xs)));
    /*filter: drop-shadow(0 0 calc(var(--wa-shadow-blur-scale) * 4px + 8px) rgba(0, 0, 0, 0.25));*/
    /*background-color: var(--wa-color-overlay-modal, rgb(0 0 0 / 0.25));*/
    transition: background-color var(--wa-transition-normal) var(--mp-transition-cubic);
  }
}