* { box-sizing: border-box; }
:root { color-scheme: dark; --background: #101011; --gold: #dec393; --muted: #867660; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--background); color: var(--gold); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
.page { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding: 27px 30px 29px; }
.masthead { display: flex; justify-content: space-between; gap: 16px; color: #bda680; font-size: 13px; letter-spacing: .045em; }
.masthead span:last-child { color: #937f65; }
.hero { align-self: center; justify-self: center; text-align: center; width: 100%; display: flex; flex-direction: column; align-items: center; transform: translateY(-1.5vh); }
.emblem-button { appearance: none; border: 0; border-radius: 50%; padding: 0; width: clamp(110px, 12vw, 194px); height: clamp(110px, 12vw, 194px); background: transparent; cursor: default; display: grid; place-items: center; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; }
.emblem-button img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; pointer-events: none; }
.emblem-button:focus-visible { outline: 1px solid var(--gold); outline-offset: 9px; }
h1 { margin: 40px 0 0; font-weight: 400; font-size: clamp(22px, 3vw, 47px); line-height: 1.25; letter-spacing: -.025em; color: #e6c990; }
.reveal { margin: 18px 0 0; color: #a9987d; font-size: clamp(15px,1.7vw,20px); }
[hidden] { display: none !important; }
footer { justify-self: center; color: var(--muted); font-size: 12px; letter-spacing: .065em; text-align: center; }
@media (max-width: 600px) { .page { padding: 23px 19px 28px; } .masthead { font-size: 11px; } h1 { max-width: 320px; margin-top: 32px; } footer { max-width: 260px; line-height: 1.7; font-size: 10px; } }
@media (prefers-reduced-motion: no-preference) { h1, .reveal { transition: opacity .18s ease; } }