@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400&family=Instrument+Serif:ital@0;1&display=swap");

:root { color-scheme: dark; font-family: "DM Mono", monospace; color: #e8e1d1; background: #111412; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 50% 40%, #263126 0, #111412 45%); }
main { width: min(900px, calc(100% - 40px)); min-height: 100vh; margin: auto; display: grid; grid-template-rows: auto 1fr; }
nav { padding: 28px 0; display: flex; justify-content: space-between; border-bottom: 1px solid #ffffff22; }
a { color: inherit; text-decoration: none; text-transform: uppercase; font-size: .72rem; letter-spacing: .16em; }
a[aria-current] { color: #e6b85c; }
#app { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 0 100px; }
.compass { position: relative; width: min(42vw, 260px); aspect-ratio: 1; margin-bottom: 44px; border: 1px solid #d2c7ae55; border-radius: 50%; box-shadow: inset 0 0 60px #0008, 0 0 80px #a5b88512; }
.compass::before, .compass::after { content: ""; position: absolute; inset: 50% 12%; border-top: 1px solid #d2c7ae25; }
.compass::after { transform: rotate(90deg); }
.north { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); color: #e6b85c; font-size: .7rem; }
.needle { position: absolute; inset: 23% 48%; background: linear-gradient(#e6b85c 50%, #84745a 50%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); transform: rotate(24deg); transform-origin: center; }
.kicker { color: #e6b85c; text-transform: uppercase; letter-spacing: .2em; font-size: .68rem; }
h1 { max-width: 720px; margin: 10px 0 30px; font: 400 clamp(2.8rem, 8vw, 6rem)/.95 "Instrument Serif", serif; }
button, .return { border: 1px solid #d2c7ae66; background: transparent; color: inherit; padding: 14px 20px; font: inherit; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; cursor: pointer; }
button:hover, button:focus-visible, .return:hover, .return:focus-visible { border-color: #e6b85c; color: #e6b85c; }
.about { max-width: 700px; }
.about > p:not(.kicker) { max-width: 580px; margin: 0 auto 32px; color: #b6b2a6; line-height: 1.8; }