/* layout.css */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: calc(var(--space)*5) calc(var(--space)*4);
}

.app-header{
  position: sticky;
  top: 0;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  z-index: 50;
}

.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top: calc(var(--space)*2);
  padding-bottom: calc(var(--space)*2);
}

.app-main{ padding-top: calc(var(--space)*5); }

.app-footer{
  border-top: 1px solid var(--c-border);
  background: var(--c-surface);
  margin-top: calc(var(--space)*8);
}

.footer__inner{
  display:flex;
  justify-content:space-between;
  gap: calc(var(--space)*3);
  padding-top: calc(var(--space)*3);
  padding-bottom: calc(var(--space)*3);
}

.brand{
  display:flex;
  align-items:center;
  gap: calc(var(--space)*2);
  text-decoration:none;
}
.brand__logo{ display:block; }
.brand__name{ font-weight:700; letter-spacing:.2px; }