:root { --bg: #ffffff; --fg: #0a0a0a; --muted: #6e6e6e; --line: #dedede; --max-width: 1440px; --page-x: clamp(22px, 4vw, 72px); } * { box-sizing: border-box; margin: 0; padding: 0; } html { background: var(--bg); color: var(--fg); font-family: "Montserrat", Arial, sans-serif; font-size: 16px; font-weight: 300; scroll-behavior: smooth; } body { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); } a { color: inherit; text-decoration: none; } .site-header { width: min(100%, var(--max-width)); margin: 0 auto; padding: 28px var(--page-x); display: flex; align-items: center; justify-content: space-between; gap: 32px; border-bottom: 1px solid var(--line); } .brand { display: inline-flex; align-items: center; } .brand-logo { display: block; width: clamp(130px, 14vw, 210px); height: auto; object-fit: contain; } .site-nav { display: flex; align-items: center; gap: clamp(18px, 2.5vw, 42px); } .site-nav a, .site-footer, .site-footer a { font-size: 0.68rem; font-weight: 300; letter-spacing: 0.22em; text-transform: uppercase; } .site-nav a { position: relative; padding: 7px 0; } .site-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 180ms ease; } .site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; } .site-main { flex: 1; width: 100%; } .page-shell { width: min(100%, var(--max-width)); min-height: 68vh; margin: 0 auto; padding: clamp(64px, 9vw, 150px) var(--page-x); } .site-footer { width: min(100%, var(--max-width)); margin: 0 auto; padding: 26px var(--page-x) 30px; display: flex; justify-content: space-between; align-items: center; gap: 22px; border-top: 1px solid var(--line); color: var(--muted); } .site-footer a { color: var(--fg); } ::selection { background: var(--fg); color: var(--bg); } /* Optional black version: add class="theme-dark" to . */ body.theme-dark { --bg: #050505; --fg: #f7f7f7; --muted: #999999; --line: #252525; } body.theme-dark .brand-logo { filter: invert(1); } @media (max-width: 700px) { .site-header { align-items: flex-start; flex-direction: column; padding-top: 22px; padding-bottom: 22px; } .site-nav { width: 100%; justify-content: space-between; } .site-footer { align-items: flex-start; flex-direction: column; } }