/* base: переменные, сброс, типографика, зерно, свет сайта, колоннада, кнопки */
:root {
  --ff-display: var(--gf-ff, "Cormorant Unicase", "Times New Roman", serif);
  --fw-display: var(--gf-fw, 600);
  --ff-text: "Golos Text", system-ui, "Segoe UI", sans-serif;
  --ff-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --round: 1;
  --r-btn: 2px;
  --r-card: 0px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  --light-violet: var(--color-primary);
  --light-gold: var(--gold);
  --line: color-mix(in srgb, var(--color-text) 14%, transparent);
  --line-soft: color-mix(in srgb, var(--color-text) 8%, transparent);

  --pad: clamp(20px, 4vw, 72px);
  --hdr-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 12px); background: var(--color-background); }
body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font: 400 clamp(16px, 1.05vw, 18px)/1.55 var(--ff-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100svh;
  overflow-x: clip;
}
img, picture, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--color-primary); color: var(--color-primary-foreground); }

h1, h2, h3, .display {
  font-family: var(--ff-display);
  font-weight: var(--fw-display);
  font-synthesis: none;
  letter-spacing: -.012em;
  line-height: .96;
}
.mono { font-family: var(--ff-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }

:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 3px; border-radius: 2px; }

/* свет сайта: два направленных луча из углов окна (не круглые пятна), фиолетовый сверху слева, золотой снизу справа */
.site-light { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.site-light::before, .site-light::after { content: ""; position: absolute; inset: 0; filter: blur(7px); }
.site-light::before {
  background: conic-gradient(from 96deg at 0% 0%, transparent 0deg, color-mix(in srgb, var(--light-violet) 13%, transparent) 3deg, color-mix(in srgb, var(--light-violet) 9%, transparent) 14deg, color-mix(in srgb, var(--light-violet) 3%, transparent) 25deg, transparent 31deg);
  -webkit-mask-image: radial-gradient(110% 110% at 0 0, #000 0, #000 22%, transparent 74%); mask-image: radial-gradient(110% 110% at 0 0, #000 0, #000 22%, transparent 74%);
}
.site-light::after {
  background: conic-gradient(from 288deg at 100% 100%, transparent 0deg, color-mix(in srgb, var(--light-gold) 10%, transparent) 3deg, color-mix(in srgb, var(--light-gold) 7%, transparent) 14deg, color-mix(in srgb, var(--light-gold) 2%, transparent) 25deg, transparent 31deg);
  -webkit-mask-image: radial-gradient(110% 110% at 100% 100%, #000 0, #000 22%, transparent 74%); mask-image: radial-gradient(110% 110% at 100% 100%, #000 0, #000 22%, transparent 74%);
}

/* зерно */
.grain {
  position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: .03; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

main { position: relative; z-index: 1; }

/* пылинки в лучах (js/dust.js): только в зоне двух лучей, ниже контента */
.dust { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }

/* плавный скролл Lenis (js/smooth.js, только мышь) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* кнопки и ссылки */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 30px; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  border-radius: calc(var(--r-btn) * var(--round));
  background: var(--color-primary); color: var(--color-primary-foreground);
  font: 500 15px/1 var(--ff-text); letter-spacing: .03em;
  transition: background-color .25s;
}
.btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--light-gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease-out); }
.btn:hover { background: var(--color-primary-hover); }
.btn:hover::after { transform: scaleX(1); }
.btn:active { background: var(--color-primary-pressed); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--color-disabled); color: var(--color-disabled-foreground); cursor: not-allowed; }
.btn.is-loading { pointer-events: none; color: transparent; }
.btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--color-primary-foreground); border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.link-u {
  position: relative; display: inline-block; text-decoration: none; font-size: 15px; padding-bottom: 4px;
  color: var(--color-text);
}
.link-u::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(.34); transform-origin: 0 50%; transition: transform .5s var(--ease-out); }
.link-u:hover::after { transform: scaleX(1); }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
}