/* 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. */ /* tokens.css loads from its own in the shell (before this file) — an @import here would add a serial network round trip. */ * { 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-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-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); width: 100%; box-sizing: border-box; padding: var(--space-4) var(--gutter) var(--space-3); margin: 0; /* Sticky so the hamburger stays reachable on long pages; below the drawer (100) and backdrop (90). */ position: sticky; top: 0; z-index: 80; background: var(--bg); } @media (max-width: 760px) { .site-header { padding: 10px var(--gutter); } .site-header .brand { font-size: 18px; } } .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; } /* Phones: desktop-scale top whitespace and gutters read as dead space on a 390px screen — pull content up toward the header. */ @media (max-width: 760px) { :root { --gutter: 16px; } .site-main { padding-top: var(--space-2); } } .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; }