/* layout.css: page frame. Base 360 px, extended at 600/900/1200 px. */

.site-header,
.site-main,
.site-footer {
  padding-inline: var(--space-3);
  margin-inline: auto;
  max-inline-size: 72rem;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
}

.brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  min-block-size: var(--tap);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
/* Logo only: the symbol; the name stays for screen readers. */
.brand__symbol { inline-size: 3rem; block-size: 3rem; flex-shrink: 0; transition: transform var(--duration); }
.brand:hover .brand__symbol { transform: rotate(-6deg); }

.site-main { padding-block: var(--space-4) var(--space-5); }
.site-main:focus { outline: none; }

.site-footer {
  margin-block-start: var(--space-4);
  padding-block: var(--space-4);
  color: var(--color-muted);
  font-size: 0.9375rem;
}

@media (min-width: 600px) {
  .site-header, .site-main, .site-footer { padding-inline: var(--space-4); }
}

@media (min-width: 900px) {
  .site-main { padding-block: var(--space-5); }
}

@media (min-width: 1200px) {
  .site-header, .site-main, .site-footer { padding-inline: var(--space-5); }
}

/* Logo buzz on click (app.js); off with reduced motion like every animation. */
.brand.is-buzzing .brand__symbol { animation: brand-buzz 380ms linear; }
@keyframes brand-buzz {
  10%, 50%, 90% { transform: translate(-2px, 1px) rotate(-6deg); }
  30%, 70% { transform: translate(2px, -1px) rotate(6deg); }
}

/* Footer: brand symbol beside the notes and links. */
.site-footer { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); align-items: start; }
.site-footer > :not(.site-footer__symbol) { grid-column: 2; }
.site-footer__symbol { grid-row: 1 / span 6; inline-size: 3.5rem; block-size: 3.5rem; transform: rotate(-6deg); }
.site-footer p { margin-block: 0 var(--space-2); }