/* ============================================================
   ФУНДАМЕНТ — цвета, сброс, типографика, кнопки, доступность.
   Подключается первым: всё остальное опирается на переменные
   из :root ниже.
   ============================================================ */

/* ============================================================
   BASE — цветовые переменные, сброс, типографика, доступность.
   Подключается первым: всё остальное опирается на переменные отсюда.
   ============================================================ */
:root{
  --paper:#F6F2EA; --paper-2:#EFE9DD; --ink:#221E18; --ink-soft:#5A5348;
  --line:#DAD1C1; --wood:#B07B4E; --wood-dark:#8A5E37; --white:#FFFDF9;
  --radius:3px; --maxw:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;font-weight:500;line-height:1.1;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--wood-dark);font-weight:600;display:inline-block}

/* accessibility */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:200}
.skip-link:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--wood-dark);outline-offset:2px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;border-radius:2px;font-weight:600;font-size:15px;font-family:'Inter';transition:.2s;cursor:pointer;border:none;text-align:center}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{background:var(--wood-dark)}
.btn-line{background:transparent;border:1px solid var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
/* Светлый вариант — для тёмных секций (.works): текст и рамка светлые,
   на hover инвертируется в заливку светлым с тёмным текстом. */
.btn-line-light{background:transparent;border:1px solid rgba(255,253,249,.35);color:var(--white)}
.btn-line-light:hover{background:var(--white);color:var(--ink);border-color:var(--white)}
.btn-block{width:100%}

/* ---------- scroll reveal (аккуратное появление блоков при скролле) ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;transition-delay:var(--reveal-delay,0s)}
.reveal.revealed{opacity:1;transform:none}