@font-face { font-family: 'Archivo Black'; src: url('./fonts/ArchivoBlack-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('./fonts/Lora-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Sans 3'; src: url('./fonts/SourceSans3-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Sans 3'; src: url('./fonts/SourceSans3-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
:root { --ink: #17131a; --blue: #005ff2; --cyan: #00e5e8; --paper: #f8f7f2; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; background: var(--paper); color: var(--ink); }
main { width: min(760px, calc(100% - 3rem)); min-height: 100svh; margin: auto; padding: 3rem 0; display: flex; flex-direction: column; justify-content: center; }
.logo { mix-blend-mode: multiply; width: 190px; height: auto; margin-bottom: 4rem; }
h1 { max-width: 11ch; margin: 0; font: 3.7rem/.95 'Archivo Black', sans-serif; letter-spacing: -.055em; }
main p { max-width: 32rem; margin: 2rem 0; font: 1.35rem/1.5 Lora, serif; }
main a { display: inline-block; width: fit-content; padding: .9rem 1.15rem; background: var(--cyan); color: var(--ink); font: 700 1rem 'Source Sans 3', sans-serif; text-decoration: none; }
main a:hover, main a:focus-visible { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--blue); }
main a:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
@media (max-width: 600px) { main { width: min(100% - 2rem, 760px); padding: 2rem 0; } .logo { width: 160px; margin-bottom: 3rem; } h1 { font-size: clamp(2.8rem, 14vw, 4rem); } main p { font-size: 1.1rem; } }
@media (prefers-reduced-motion: reduce) { a { transition: none; } }