/* The site's palette and type, without its scripts or web fonts. */
:root {
  --bg: #090b09;
  --ink: #f1efe8;
  --ink-2: #b1b5ac;
  --ink-3: #878c83;
  --lime: #cfff56;
  --gutter: clamp(16px, 4vw, 56px);
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; color-scheme: dark; }
body { margin: 0; font-family: Archivo, 'Helvetica Neue', Arial, system-ui, sans-serif; font-size: 16px; line-height: 1.55; background: var(--bg); }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 4px; }
a:hover { color: var(--lime); }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--lime); color: var(--bg); }

main { display: grid; align-content: center; justify-items: start; gap: 20px; min-height: 100svh; max-width: 1280px; margin: 0 auto; padding: 48px var(--gutter); }
.brand { display: flex; align-items: center; font-size: 20px; text-decoration: none; }
.brand img { width: 40px; height: 40px; margin-right: 12px; }
.brand span { color: var(--lime); }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 24px 0 0; font: 500 14px ui-monospace, 'IBM Plex Mono', monospace; color: var(--ink-2); }
.eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--lime); }
h1 { margin: 0; max-width: 18ch; font-size: clamp(2.2rem, 6vw, 4.5rem); font-weight: 600; line-height: 1.04; letter-spacing: -0.025em; }
p { margin: 0; max-width: 52ch; color: var(--ink-2); font-size: 1.1rem; }
.links { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 12px; }
.lang { margin-top: 32px; font-size: 14px; color: var(--ink-3); }