/* Valedgostar — valedgostar.com */
@font-face { font-family: "Vazirmatn"; font-weight: 400; font-display: swap;
  src: url(fonts/vazirmatn-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Vazirmatn"; font-weight: 600; font-display: swap;
  src: url(fonts/vazirmatn-latin-600-normal.woff2) format("woff2"); }

:root {
  --paper: #f3f5f7;
  --ink: #16213a;
  --muted: #5a6478;
  --rule: #d5dae2;
  --lit: #e9a93b;      /* shared with Valed Game Studio */
  --link: #0e6b6b;
  --font: "Vazirmatn", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.65 var(--font); }
a { color: var(--link); }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }

.page {
  max-width: 44rem; margin: 0 auto;
  padding: clamp(3rem, 12vh, 8rem) clamp(1.25rem, 5vw, 2rem) 3rem;
  min-height: 100vh; display: flex; flex-direction: column;
}

.mark { width: 3.5rem; height: 3rem; margin-bottom: 2rem; }
.mark .px { fill: var(--ink); }
.mark .px--lit { fill: var(--lit); }

h1 {
  margin: 0;
  font-weight: 600; font-size: clamp(3rem, 2rem + 6vw, 5.5rem);
  line-height: 1; letter-spacing: -0.035em;
}
.lede { margin: 1rem 0 0; font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem); line-height: 1.4; color: var(--muted); max-width: 26ch; }

.work, .contact { margin-top: clamp(3.5rem, 9vh, 6rem); }
h2 { margin: 0 0 1.25rem; font-size: 1rem; font-weight: 600; color: var(--muted); }

dl { margin: 0; }
dl > div {
  display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 0.25rem 2rem;
  padding: 1.1rem 0; border-top: 1px solid var(--rule);
}
dl > div:last-child { border-bottom: 1px solid var(--rule); }
dt { font-weight: 600; font-size: 1.15rem; }
dd { margin: 0; color: var(--muted); max-width: 34ch; }

.contact p { margin: 0; }
.foot { margin-top: auto; padding-top: 4rem; color: var(--muted); font-size: 0.875rem; }
.foot p { margin: 0; }

@media (max-width: 40rem) {
  dl > div { grid-template-columns: minmax(0, 1fr); }
}

/* vg-logo:start */
.mark--logo { display: block; width: 8rem; height: 8rem; margin: 0 0 1.5rem; }
@media (max-width: 40rem) { .mark--logo { width: 6rem; height: 6rem; } }
/* vg-logo:end */