:root{
  --bg: #050608;
  --bg-2: #0a0c10;
  --ink: #f4f6f8;
  --ink-dim: #a7adb5;
  --ink-mute: #5e6670;
  --line: rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.16);
  --accent: #7dd3fc;
  --accent-soft: rgba(125,211,252,0.14);
  --display: "Instrument Serif", "Times New Roman", serif;
  --sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --container: 1180px;
  --gutter: 22px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); overflow-x: clip; }
body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a, button { -webkit-tap-highlight-color: transparent; }

.sky {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(125,211,252,0.10) 0%, rgba(125,211,252,0.04) 30%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% -10%, rgba(255,255,255,0.04) 0%, transparent 50%),
    var(--bg);
}
#stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.035; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 2;
}

.nav { position: relative; z-index: 10; padding: 18px 0; }
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-size: 19px; letter-spacing: 0.01em; }
.brand-mark {
  width: 22px; height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}
.brand-name b { font-weight: 400; }
.brand-name span { color: var(--ink-dim); margin-left: 2px; font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; vertical-align: 3px; }

.nav-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.back-link { color: var(--ink-mute); font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; transition: color 0.18s; }
.back-link:hover { color: var(--ink); }
.lang { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 2px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; }
.lang button, .lang a { padding: 5px 6px; border-radius: 999px; color: var(--ink-dim); text-decoration: none; transition: background 0.18s, color 0.18s; }
.lang button[aria-pressed="true"], .lang a[aria-current="page"] { background: rgba(255,255,255,0.08); color: var(--ink); }

footer { border-top: 1px solid var(--line); padding: 32px 0 40px; font-size: 13px; color: var(--ink-mute); }
.footer-row { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; }
.footer-link { color: var(--ink-mute); transition: color 0.18s; }
.footer-link:hover { color: var(--ink); }

@media (min-width: 640px){
  :root { --gutter: 32px; }
  .nav { padding: 22px 0; }
  .brand { font-size: 20px; }
}

@media (max-width: 520px){
  .nav-row { align-items: flex-start; }
  .nav-actions { flex-direction: column; align-items: flex-end; gap: 8px; }
  .lang button, .lang a { padding: 5px 5px; }
}

@media (min-width: 960px){
  :root { --gutter: clamp(36px, 4vw, 56px); }
  .nav { padding: 28px 0; }
  .brand { font-size: 22px; }
  .brand-name span { font-size: 13px; vertical-align: 4px; }
  .back-link { font-size: 12px; }
  .lang { font-size: 11px; }
  .lang button, .lang a { padding: 6px 12px; }
}