/* GHAF: база. Цвета - css/colors.css (блок [data-theme="dark"]). */

[hidden]{display:none!important}

@font-face{
  font-family:"Geist";
  src:url("../fonts/Geist-var.woff2") format("woff2");
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Geist Mono";
  src:url("../fonts/GeistMono-var.woff2") format("woff2");
  font-weight:400 500;
  font-style:normal;
  font-display:swap;
}

:root{
  --ff-display:"Geist","Inter Tight",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --ff-mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  --pad:clamp(20px,6vw,92px);          /* боковое поле страницы */
  --header-h:72px;
  --round:1;                           /* множитель скруглений (панель настроек) */
  --r-field:calc(0px * var(--round));

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.22,1,.36,1);

  --hdr-z:60;

  --shadow-lift:0 18px 40px rgba(6,16,11,.28);
  --line:1px solid var(--color-border);
  --ink:var(--color-text-inverse);
}

*,*::before,*::after{box-sizing:border-box}

html{
  background:var(--color-background);
  color:var(--color-text);
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:24px;
}

body{
  margin:0;
  min-height:100vh;
  background:var(--color-background);
  color:var(--color-text);
  font-family:var(--ff-display);
  font-size:17px;
  line-height:1.55;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}

main{overflow-x:clip}   /* появление медиа (scale 1.04) не даёт странице стать шире экрана; clip не ломает sticky */
img,picture,svg,canvas{display:block;max-width:100%}
img{height:auto}

h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
h1,h2,h3{text-wrap:balance}
p,li,dd{text-wrap:pretty}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}

::selection{background:var(--color-primary);color:var(--color-primary-foreground)}

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

/* голос 2: моно-метки. Бар шрифтов подменяет только гротеск. */
.mono,
html[data-gf-font] body .mono,
html[data-gf-font] body .mono *{
  font-family:var(--ff-mono)!important;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-weight:400;
  font-size:var(--mono-size,11px);
  line-height:1.4;
}

.vh{
  position:absolute!important;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

/* типографика: три уровня + метка */
.t-h1{
  font-weight:800;
  text-transform:uppercase;
  line-height:.94;
  letter-spacing:-.035em;
  font-size:clamp(40px,6.2vw,104px);
}
.t-h2{
  font-weight:700;
  text-transform:uppercase;
  line-height:.98;
  letter-spacing:-.025em;
  font-size:clamp(30px,4.2vw,68px);
}
.t-text{font-size:clamp(16px,1.15vw,19px);line-height:1.55}
.t-num{
  font-weight:800;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  line-height:1;
}

/* кнопки: прямые углы, второй сегмент с шевроном (как на рефе) */
.btn{
  --b-fill:var(--color-text);
  --b-ink:var(--color-text-inverse);
  --b-line:var(--color-text-inverse);
  display:inline-flex;
  align-items:stretch;
  min-height:48px;
  background:var(--b-fill);
  color:var(--b-ink);
  text-decoration:none;
  border:0;
  cursor:pointer;
  transition:background-color .3s var(--ease-soft),color .3s var(--ease-soft),transform .15s;
}
.btn__label{
  display:flex;align-items:center;
  padding:0 22px;
  --mono-size:13px;
  line-height:1;
  font-weight:500;
}
.btn__seg{
  display:grid;place-items:center;
  width:48px;
  border-left:1px solid var(--b-line);
}
.btn__seg svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;transition:transform .35s var(--ease-soft)}
.btn--ink{--b-fill:var(--color-background);--b-ink:var(--color-text);--b-line:rgba(241,240,230,.4)}
.btn--ghost{
  --b-fill:transparent;--b-ink:var(--color-text);--b-line:var(--color-text);
  box-shadow:inset 0 0 0 1px var(--color-text);
}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled="true"]{
  cursor:not-allowed;background:transparent;color:var(--color-text-muted);
  box-shadow:inset 0 0 0 1px var(--color-border-strong);
  border:0;outline:1px dashed var(--color-border-strong);outline-offset:-1px;
}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--color-primary);color:var(--color-primary-foreground);--b-line:var(--color-primary-foreground)}
  .btn:hover .btn__seg svg{transform:translateX(4px)}
  .btn--ghost:hover{background:var(--color-text);color:var(--color-text-inverse)}
}

/* ссылка в тексте */
.link{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
@media (hover:hover) and (pointer:fine){
  .link:hover{text-decoration-color:var(--color-primary);text-decoration-thickness:2px}
}

/* светлая секция («бумага») */
.paper{
  background:var(--color-surface-inverse);
  color:var(--color-text-inverse);
}

/* зерно: тонкая деталь, не эффект */
.grain{
  position:absolute;inset:0;
  background-image:url("../assets/grain.png");
  background-size:200px 200px;
  opacity:.045;
  mix-blend-mode:overlay;
  pointer-events:none;
}

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