/* Page frame: top navigation, main column, banners. */
@layer reset, tokens, base, layout, components, utilities, print;

@layer layout {
  .site-nav {
    position: sticky; top: 0; z-index: 10;
    display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center;
    padding: var(--space-3) var(--space-5);
    background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-edge);
  }
  .site-nav a {
    padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
    font-size: var(--text-sm); text-decoration: none; color: var(--ink-soft);
  }
  .site-nav a:hover { background: var(--glass-strong); color: var(--ink); }
  .site-nav a[aria-current="page"] { background: var(--action); color: var(--action-ink); }
  .site-nav .wordmark {
    display: flex; align-items: center; gap: var(--space-2);
    margin-right: auto; padding-left: 0;
    font-size: var(--text-lg); font-weight: var(--weight-regular); color: var(--ink);
  }
  .site-nav .wordmark:hover { background: none; }
  .wordmark-mark { width: 1.5rem; height: 1.5rem; flex: none; }

  main { max-width: 68rem; margin: 0 auto; padding: var(--space-2) var(--space-5) var(--space-7); }
  main.page--wide { max-width: 104rem; }

  .banner {
    padding: var(--space-2) var(--space-5); font-size: var(--text-sm);
    background: var(--glass-strong); border-bottom: 1px solid var(--line);
  }
  .banner form { display: inline; }
}

@layer layout {
  /* Page title with its main action on the right. */
  .page-header { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; justify-content: space-between; }
  .page-header h1 { margin-bottom: var(--space-2); }
}

@layer layout {
  /* Signed-out and joining pages: one centred glass card. */
  .auth { display: grid; place-items: center; min-height: 80vh; padding-block: var(--space-6); }
  .auth-card { width: 100%; max-width: 26rem; padding: var(--space-6); }
  .auth-card--wide { max-width: 34rem; }
  .auth-card h1 { font-size: var(--text-xl); margin-top: var(--space-4); }
  .auth-mark { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-lg); }
  .auth-links { margin-top: var(--space-4); font-size: var(--text-sm); text-align: center; }
  .auth .flash { max-width: 26rem; }
}