/* ============================================================
   ПОСТУЧИ ПО ДЕРЕВУ — базовая типографика, палитра, атмосфера
   Эстетика: типографский оттиск / народная гравюра по дереву
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;800;900&family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,600;1,7..72,400&display=swap');

:root {
  /* Бумага и чернила */
  --paper:      #f2e7d5;
  --paper-2:    #e8d9c0;
  --paper-deep: #dcc9ab;
  --ink:        #1e1712;
  --ink-soft:   #4a3b2e;
  --ink-faint:  #8a7761;

  /* Штемпельные акценты */
  --rust:       #b8391c;
  --rust-deep:  #8a2610;
  --amber:      #d98b1f;
  --moss:       #5c6b3a;
  --sky:        #2f5d6e;

  /* Редкость */
  --r-free:      #6d7a4e;
  --r-common:    #8a7761;
  --r-rare:      #2f5d6e;
  --r-epic:      #8a3fa0;
  --r-legend:    #b8391c;
  --r-limited:   #1f7a55;

  --edge: 2px solid var(--ink);
  --shadow-hard: 6px 6px 0 var(--ink);
  --shadow-soft: 0 18px 40px -22px rgba(30, 23, 18, .75);

  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease:   cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(217,139,31,.20), transparent 60%),
    radial-gradient(ellipse 90% 60% at 90% 110%, rgba(92,107,58,.18), transparent 65%);
  color: var(--ink);
  font-family: 'Literata', 'Georgia', serif;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Зерно бумаги поверх всего */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

h1, h2, h3, .display {
  font-family: 'Unbounded', 'Trebuchet MS', sans-serif;
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.02em;
  margin: 0;
}

a { color: var(--rust); text-underline-offset: 3px; }

/* ---------- Кнопки-штампы ---------- */
.btn {
  font-family: 'Unbounded', sans-serif;
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .01em;
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .85em 1.4em;
  border: var(--edge);
  border-radius: 3px;
  background: var(--paper-2);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .16s var(--spring), box-shadow .16s var(--ease), background .2s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: 2px 2px 0 var(--ink-faint); transform: none; }

.btn--hero {
  font-size: clamp(1.05rem, 3.6vw, 1.6rem);
  font-weight: 900;
  padding: .9em 1.6em;
  background: var(--rust);
  color: var(--paper);
  box-shadow: 8px 8px 0 var(--ink);
}
.btn--hero:hover { box-shadow: 11px 11px 0 var(--ink); }
.btn--ghost { background: transparent; box-shadow: none; border-color: var(--ink-faint); }
.btn--ghost:hover { box-shadow: none; background: var(--paper-2); }

/* ---------- Мелочи ---------- */
.tag {
  font-family: 'Unbounded', sans-serif;
  font-size: .62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: .35em .7em;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}

.wrap { width: min(1080px, 92vw); margin-inline: auto; }

[hidden] { display: none !important; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}