/* Site chrome: header, footer, main wrappers. */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(140%) blur(8px);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--ink-primary);
}
.brand-mark {
  font-family: var(--font-serif);
  font-size: var(--fs-600);
  color: var(--color-deep-rose);
}
.brand-name {
  font-family: var(--font-serif);
  font-size: var(--fs-500);
  font-weight: 700;
  letter-spacing: var(--letter-tight);
}

.site-nav {
  display: flex; align-items: center; gap: var(--space-5);
}
.site-nav a {
  text-decoration: none; color: var(--ink-secondary);
  font-weight: 500;
}
.site-nav a:hover { color: var(--ink-primary); }
.site-nav .btn { text-decoration: none; }

.inline-form { display: inline; }
.link-button {
  background: none; border: 0; padding: 0;
  color: var(--ink-secondary); font-weight: 500; cursor: pointer;
}
.link-button:hover { color: var(--ink-primary); }

main {
  flex: 1 0 auto;
  width: 100%;
}

.site-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-5) var(--space-6);
  color: var(--ink-muted);
  font-size: var(--fs-300);
  text-align: center;
}

@media (max-width: 600px) {
  .site-header { padding: var(--space-3) var(--space-4); }
  .site-nav { gap: var(--space-3); }
}