/* brain-site — layout chrome.
   Design tokens (color, type, spacing, semantic element styles) live
   in tokens.css from the Engineering Calm system; this file adds only
   the layout chrome the seed shell expects (header, main, footer)
   and binds them to the design tokens. */

@import url('./tokens.css');

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

/* Shared content width.
   - Up to ~1100px viewports, use the existing prose measure
     (full visible bleed, comfortable on phones / small laptops).
   - Above that, content shrinks to ~70vw of the viewport so a
     27" monitor doesn't render a single column straight down the
     middle of the screen. Capped at 1200px so we don't sprawl.
   The header, main, and footer all share this width so the navbar
   sits over its own content rather than running edge-to-edge. */
.site-header,
.site-main,
.site-footer {
  width: min(100% - 2 * var(--gutter), 70vw);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-3) 0;
}
@media (max-width: 1100px) {
  .site-header,
  .site-main,
  .site-footer {
    width: calc(100% - 2 * var(--gutter));
    max-width: var(--measure);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  border-bottom: var(--rule-thin);
  padding-top: var(--space-4);
  padding-bottom: var(--space-3);
}

.brand {
  font-family: var(--font-serif);
  font-size: var(--t-h3);
  font-weight: var(--w-regular);
  color: var(--fg);
  text-decoration: none;
  letter-spacing: -0.005em;
}
.brand:hover { text-decoration: none; }

.site-main {
  padding-top: var(--space-5);
  padding-bottom: var(--space-7);
  min-height: 60vh;
}

.site-footer {
  border-top: var(--rule-thin);
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  color: var(--fg-muted);
  padding-top: var(--space-3);
  padding-bottom: var(--space-5);
}

.site-footer a { color: var(--fg-muted); }

/* Graph page wants the full content width (no narrow prose measure). */
body.graph-page .site-main {
  width: min(100% - 2 * var(--gutter), 90vw);
  max-width: 1600px;
}