:root { color-scheme: light; --surface: #f7f7f5; --ink: #343638; --muted: #686868; background: var(--surface); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
[data-theme="gold"] { color-scheme: dark; --surface: #171817; --ink: #d5b77a; --muted: #afa38c; }
[data-theme="silver"] { color-scheme: dark; --surface: #111f35; --ink: #d1d9e3; --muted: #a1b0c4; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
main { flex: 1; display: grid; place-items: center; padding: 64px 32px 32px; }
.brand { width: min(100%, 850px); text-align: center; }
h1 { margin: 0; font-size: 1rem; }
h1 img { display: block; width: 100%; height: auto; }
.logo { display: block; background: var(--ink); -webkit-mask: url('assets/andygoldsmith-outline-v2.png') center / contain no-repeat; mask: url('assets/andygoldsmith-outline-v2.png') center / contain no-repeat; }
.logo img { visibility: hidden; }
.descriptor { margin: 38px 0 0; padding-left: .26em; font-size: .9375rem; line-height: 1.8; letter-spacing: .26em; text-transform: uppercase; }
footer { padding: 34px 24px; text-align: center; color: var(--muted); font-size: .875rem; line-height: 1.5; letter-spacing: .12em; }
@media (max-width: 540px) { main { padding: 48px 18px 24px; } .descriptor { margin-top: 28px; font-size: .875rem; letter-spacing: .16em; } footer { padding-bottom: 26px; } }
@media (max-height: 550px) and (min-width: 700px) { main { padding-top: 24px; } .brand { max-width: 430px; } .descriptor { margin-top: 12px; } footer { padding: 20px; } }