@font-face { font-family: "Archivo"; src: url("fonts/archivo-condensed-800.woff2") format("woff2"); font-weight: 800; font-stretch: 62%; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --bg: #111113; --panel: #18181B; --ink: #F2F2EE; --dim: #A3A3A8; --line: #2E2E33;
  --mint: #5AE3B0; --on-mint: #06281C;
  --m: clamp(1.25rem, 4vw, 3rem);
  --glide: cubic-bezier(.32, .72, 0, 1);
  --display: "Archivo", "Arial Narrow", sans-serif; --sans: "Geist", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.125rem/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
h1, h2, p { margin: 0; }
svg { display: block; width: 100%; height: auto; }
::selection { background: var(--mint); color: var(--on-mint); }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; border-radius: 6px; }
.wrap { width: min(1240px, 100% - 2 * var(--m)); margin-inline: auto; }
.hide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.display { font: 800 clamp(3.9rem, 8.6vw, 7.9rem) / .88 var(--display); font-stretch: 62%; text-transform: uppercase; letter-spacing: -.005em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); font-weight: 600; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.say { color: var(--dim); max-width: 30ch; text-wrap: pretty; }

.btn { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 1.75rem; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 500; font-size: 1rem; white-space: nowrap; transition: transform .12s ease-out, background .3s var(--glide); }
.btn:hover { background: #fff; }
.btn:active { transform: scale(.97); }
.btn.mint { background: var(--mint); color: var(--on-mint); }
.btn.mint:hover { background: #78ECC4; }
.btn.small { height: 44px; padding: 0 1.35rem; font-size: .9375rem; }

.top { display: flex; align-items: center; gap: 2.25rem; padding: 1.75rem 0; }
.logo { display: flex; align-items: center; gap: .7rem; font-size: 1.6rem; font-weight: 700; letter-spacing: -.045em; margin-right: .75rem; }
.logo img { width: 34px; height: 34px; display: block; }
.top nav { display: flex; gap: 2rem; font-weight: 500; font-size: 1rem; }
.top nav a { transition: color .25s var(--glide); }
.top nav a:hover { color: var(--mint); }
.top .btn { margin-left: auto; }

footer { background: var(--panel); padding: 3rem 0 2.5rem; font-size: .9375rem; color: var(--dim); }
footer .foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2.25rem; }
footer .logo { font-size: 1.3rem; color: var(--ink); }
footer .logo img { width: 28px; height: 28px; }
footer nav { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin-left: auto; }
footer a { transition: color .25s var(--glide); }
footer a:hover { color: var(--ink); }
footer .legal { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .8125rem; color: #7A7A80; }
footer .legal a { color: var(--dim); }

.doc { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(5rem, 10vw, 8rem); }
.doc article { max-width: 44rem; }
.doc h1 { font: 800 clamp(3.25rem, 8vw, 6rem) / .9 var(--display); font-stretch: 62%; text-transform: uppercase; }
.doc .date { margin-top: 1.25rem; color: var(--dim); font-size: .9375rem; }
.doc .short { margin-top: 2.5rem; padding: 1.5rem 1.75rem; border-radius: 16px; background: var(--panel); font-size: 1.1875rem; line-height: 1.55; color: var(--ink); }
.doc h2 { margin: 3.25rem 0 1rem; font-size: 1.5rem; letter-spacing: -.02em; }
.doc p, .doc li { color: #C9C9CC; font-size: 1.0625rem; line-height: 1.65; text-wrap: pretty; }
.doc p + p { margin-top: 1rem; }
.doc ul { margin: 1rem 0 0; padding-left: 1.2rem; }
.doc li + li { margin-top: .65rem; }
.doc li::marker { color: var(--mint); }
.doc strong { color: var(--ink); font-weight: 600; }
.doc a { color: var(--mint); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.doc a:hover { color: #78ECC4; }

@media (max-width: 860px) {
  .top nav { display: none; }
  .say { max-width: 34ch; }
  footer .logo { flex-basis: 100%; }
  footer nav { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}