:root {
  --bg: #0a0c0e;
  --surface: #14181c;
  --surface-2: #1b2126;
  --line: rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .18);
  --ink: #eef1f3;
  --muted: #8b959d;
  --me: #c6f24e;
  --gold: #ffc65c;
  --ui-font: "Vazirmatn", system-ui, "Segoe UI", Tahoma, sans-serif;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/vazirmatn.woff2') format('woff2-variations'), url('/vazirmatn.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
* { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16.5px/1.9 var(--ui-font); }
a { color: var(--me); }
.wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 max(16px, env(safe-area-inset-right)) 80px max(16px, env(safe-area-inset-left));
}
header {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line); margin-bottom: 36px;
  padding-top: env(safe-area-inset-top);
}
header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 62px; padding-block: 8px; padding-bottom: 8px;
}
.brand {
  display: flex; align-items: center; gap: 8px;
  font: 800 17px var(--ui-font); text-decoration: none; color: var(--ink); flex: none;
}
.brand .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--me); box-shadow: 0 0 8px var(--me); }
.brand b { color: var(--gold); }
.subnav { display: flex; flex-wrap: wrap; gap: 14px 18px; justify-content: flex-end; }
.subnav a {
  color: var(--muted); font: 700 13px var(--ui-font); text-decoration: none; white-space: nowrap;
}
.subnav a:hover, .subnav a:focus-visible { color: var(--ink); }
.subnav a[aria-current="page"] { color: var(--gold); }
.identity { margin: 8px 0 36px; }
.eyebrow {
  color: var(--gold); font: 800 12px var(--ui-font); letter-spacing: .08em; display: inline-block; margin-bottom: 10px;
}
h1 { font: 800 clamp(26px, 6vw, 36px)/1.35 var(--ui-font); margin: 0 0 10px; }
.roles { color: #cfd6dc; font: 600 15.5px/1.8 var(--ui-font); margin: 0 0 22px; max-width: 46ch; }
.toc {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 40px; padding: 0; list-style: none;
}
.toc a {
  display: inline-block; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--muted);
  font: 700 12.5px var(--ui-font); text-decoration: none;
}
.toc a:hover, .toc a:focus-visible { color: var(--ink); border-color: var(--gold); }
h2 {
  font: 800 18px var(--ui-font); margin: 48px 0 14px; color: var(--gold);
  scroll-margin-top: 84px;
}
h3 {
  font: 800 16px var(--ui-font); margin: 28px 0 10px; color: var(--ink);
  scroll-margin-top: 84px;
}
p, li { color: #cfd6dc; font: 500 15.5px/1.95 var(--ui-font); }
p { margin: 0 0 16px; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline; }
.pair {
  font: 800 15px var(--ui-font); color: var(--me);
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 18px; margin: 18px 0 24px;
  direction: ltr; text-align: right; unicode-bidi: isolate;
}
.quote {
  margin: 28px 0 8px; padding: 20px 22px;
  border-right: 3px solid var(--gold);
  background: var(--surface); border-radius: 0 14px 14px 0;
}
.quote p { margin: 0; color: var(--ink); font: 700 16.5px/1.85 var(--ui-font); }
.slogans { margin: 12px 0 18px; }
.slogans p {
  margin: 8px 0; color: var(--gold); font: 800 16px var(--ui-font);
}
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px 22px; margin: 18px 0 28px;
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 8px;
}
@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
  .subnav { gap: 10px 12px; }
  .subnav a { font-size: 12px; }
}
.grid a {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px;
}
.grid a:hover, .grid a:focus-visible { border-color: var(--gold); }
.grid b { display: block; color: var(--gold); font: 800 14px var(--ui-font); margin-bottom: 6px; }
.grid span { display: block; color: var(--muted); font: 600 13px/1.7 var(--ui-font); }
footer {
  border-top: 1px solid var(--line);
  padding: 28px 0 calc(28px + env(safe-area-inset-bottom));
  text-align: center;
}
footer p { color: var(--muted); font: 600 12.5px var(--ui-font); margin: 0; }
footer a { color: var(--muted); }