/* /assets/css/layout.css */
/* Layout: container + site structure */
html {
  scroll-behavior: smooth;
}
.container {
  width: min(var(--container), calc(100% - 40px));
  margin-inline: auto;
}

.site {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.site-main {
  flex: 1;
  padding: var(--space-6) 0 var(--space-7);
}

/* Decorative rules (bookish but subtle) */
.header-rule,
.footer-rule {
  height: 1px;
  background: linear-gradient(to right,
    transparent,
    var(--rule),
    transparent
  );
}

/* Slightly tighter container on small screens */
@media (max-width: 700px) {
  .container {
    width: min(var(--container), calc(100% - 28px));
  }

  .site-main {
    padding: var(--space-5) 0 var(--space-6);
  }
}