@layer layout {
  .frame {
    display: grid;
    grid-template-rows:
      var(--header-top-h) var(--header-nav-h)
      1fr var(--footer-h);
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* Homepage only: the frame is the screen and never scrolls */
  html.is-locked,
  html.is-locked body {
    height: 100%;
    overflow: hidden;
  }

  .is-locked .frame {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
  }

  .frame > * {
    min-width: 0;
    min-height: 0;
  }

  .band {
    display: flex;
    align-items: center;
    padding-inline: var(--space-4);
    color: var(--color-on-accent);
  }

  .band__inner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    max-width: var(--frame-max-w);
    margin-inline: auto;
  }

  .header-top {
    background: var(--color-header-top);
  }

  .header-nav {
    background: var(--color-header-nav);
  }

  .site-footer {
    background: var(--color-footer);
    font-size: var(--text-sm);
  }

  .site-main {
    padding: var(--frame-gap);
  }

  .is-locked .site-main {
    overflow: hidden;
  }

  .main__inner {
    height: 100%;
    max-width: var(--frame-max-w);
    margin-inline: auto;
  }

  /* Homepage slots: fill the main area, scroll inside when full */
  .home-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: var(--frame-gap);
    height: 100%;
  }

  .slot {
    display: flex;
    flex-direction: column;
    gap: var(--frame-gap);
    min-height: 0;
  }

  @media (max-height: 800px) {
    .deco {
      display: none;
    }
  }
}