/* ============================================================
   Freya · base — design tokens, reset, typography utilities
   Джерело: Claude Design «Freya – V3 Folk Direction»
   ============================================================ */

:root {
  /* palette */
  --bg:        #0a0908;
  --bg-deep:   #0e0a09;
  --bg-panel:  #13100e;
  --ivory:     #ece4d9;
  --paper:     #d9cdbb;
  --muted:     #9a8e80;
  --faint:     #5e564d;
  --burgundy:  #7a1717;
  --cherry:    #a4252a;
  --brass:     #b89968;
  --brass-dim: #7a6a4a;

  /* rgb triplets для напівпрозорих рамок/фонів */
  --ivory-rgb:    236, 228, 217;
  --cherry-rgb:   164, 37, 42;
  --brass-rgb:    184, 153, 104;
  --burgundy-rgb: 122, 23, 23;
  --bg-rgb:       10, 9, 8;

  /* placeholder tones */
  --ph-warm-a:   #1a1411; --ph-warm-b:   #231a15;
  --ph-cool-a:   #11141a; --ph-cool-b:   #181c24;
  --ph-deep-a:   #0d0a08; --ph-deep-b:   #13100d;
  --ph-cherry-a: #2a0e0e; --ph-cherry-b: #3a1414;

  /* type */
  --font-display: 'Cinzel', serif;
  --font-serif:   'Cormorant Garamond', serif;
  --font-body:    'Manrope', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  /* layout */
  --gutter: 64px;
  --max:    1440px;
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ivory);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; }
h1, h2, h3, h4, p { margin: 0; }
img, svg { max-width: 100%; }

.page {
  max-width: var(--max);
  margin: 0 auto;
  overflow: hidden;              /* декоративні знаки виходять за межі */
  position: relative;
}

.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }

/* ── Typography utilities ─────────────────────────────── */
.kicker {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--brass);
}
.caps {
  font-family: var(--font-display);
  text-transform: uppercase;
}
.mono {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
}
.serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
.text-cherry { color: var(--cherry); }
.text-ivory  { color: var(--ivory); }
.text-muted  { color: var(--muted); }
.text-faint  { color: var(--faint); }

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

/* ── Responsive gutters ───────────────────────────────── */
@media (max-width: 1100px) { :root { --gutter: 40px; } }
@media (max-width: 720px)  { :root { --gutter: 20px; } }