/* Static HTML uses the same brand surfaces while the interactive application loads. */
:root { --shell-bg: #F8F8F8; --shell-ink: #182643; --shell-link: #047283; --shell-card: #FFFFFF; --shell-border: rgba(24,38,67,.16); }
:root[data-theme='dark'] { --shell-bg: #182643; --shell-ink: #FFFFFF; --shell-link: #3FC7BD; --shell-card: #26334E; --shell-border: rgba(255,255,255,.16); }
:root[data-variant='black'] { --shell-bg: #1D1D1B; --shell-card: #2B2B29; }
body { background-color: var(--shell-bg); }
[data-static-shell] { color: var(--shell-ink); font: 16px/1.65 system-ui, sans-serif; max-width: 1120px; margin: auto; padding: 24px; }
[data-static-shell] a { color: var(--shell-link); }
[data-static-shell] nav { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding-block: 8px 32px; }
[data-static-shell] nav img { display: block; margin-inline-end: 16px; }
[data-static-shell] [data-brand-tone='dark'], :root[data-theme='dark'] [data-static-shell] [data-brand-tone='light'] { display: none; }
:root[data-theme='dark'] [data-static-shell] [data-brand-tone='dark'] { display: block; }
[data-static-shell] main { padding-block: 32px; }
[data-static-shell] h1 { font-size: clamp(2rem,5vw,3rem); line-height: 1.2; }
[data-static-shell] h2 { line-height: 1.3; }
[data-static-shell] .project-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,360px),1fr)); gap: 24px; }
[data-static-shell] article { background: var(--shell-card); border: 1px solid var(--shell-border); border-radius: 14px; padding: 24px; }
[data-static-shell] article img, [data-static-shell] .project-image { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: contain; border-radius: 10px; }
[data-static-shell] footer { border-top: 1px solid var(--shell-border); padding-block: 24px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }