/* ====== Design tokens ====== */
:root{
  --cl-bg:#FFFDF8; --cl-ink:#1F1A17;
  --cl-accent:#8B0000; --cl-accent-2:#5C3A21; --cl-accent-3:#005F73;
  --cl-sand:#EAD7C3; --cl-cloud:#F6EFE7; --cl-line:#E5D6C6;
  --r-md:14px; --r-lg:20px; --sh-soft:0 6px 24px rgba(0,0,0,.06);
  --tr-fast:.2s ease;
  --fz-h1:clamp(28px,4.8vw,54px);
  --fz-h2:clamp(22px,3vw,34px);
  --fz-h3:clamp(18px,2.4vw,24px);
  --fz-p: clamp(15px,1.4vw,18px);
  --lh:1.65;
  --nav-h:64px;
}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
html,body{
  background:var(--cl-bg);color:var(--cl-ink);
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  margin:0
}
*{box-sizing:border-box}
img{max-width:100%;height:auto;display:block}

h1{font-size:var(--fz-h1);line-height:1.15;color:var(--cl-accent);margin:0 0 10px}
h2{font-size:var(--fz-h2);line-height:1.2;color:var(--cl-accent);margin:0 0 10px}
h3{font-size:var(--fz-h3);line-height:1.25;color:var(--cl-accent-2);margin:0 0 8px}
p,li{font-size:var(--fz-p);line-height:var(--lh)}
section{scroll-margin-top:calc(var(--nav-h) + 12px)}

.section{max-width:1200px;margin:auto;padding:48px 20px}
.container{max-width:1200px;margin:auto;padding:0 20px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--cl-accent-3);color:#fff;border:1px solid transparent;
  padding:12px 20px;border-radius:var(--r-md);box-shadow:var(--sh-soft);
  cursor:pointer;transition:transform var(--tr-fast),opacity var(--tr-fast),background var(--tr-fast)
}
.btn:hover{transform:translateY(-2px);background:#0A6F84}
.btn.alt{background:var(--cl-accent)}
.btn.ghost{background:transparent;border:2px solid var(--cl-accent-2);color:var(--cl-accent-2)}
.btn.ghost:hover{background:var(--cl-accent-2);color:#fff}

.card{background:var(--cl-cloud);border:1px solid var(--cl-line);border-radius:var(--r-lg);box-shadow:var(--sh-soft);overflow:hidden}

/* ====== Navbar ====== */
.navbar{
  position:sticky;top:0;z-index:60;
  background:rgba(255,253,248,.92);
  -webkit-backdrop-filter:saturate(160%) blur(6px);
  backdrop-filter:saturate(160%) blur(6px);
  border-bottom:1px solid var(--cl-line);height:var(--nav-h)
}
.navbar .row{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{height:38px;width:auto}
.brand .title{font-weight:700;color:var(--cl-accent);font-size:18px}

.menu{display:flex;flex-wrap:wrap;gap:10px}
.menu a{
  padding:8px 10px;border-radius:10px;text-decoration:none;color:var(--cl-ink);font-size:15px;
  border:1px solid transparent;transition:background .2s,border-color .2s
}
.menu a:hover{background:#fff;border-color:var(--cl-line)}

.lang-switch{display:flex;gap:6px}
.lang-switch .lang-btn{
  padding:6px 10px;border:1px solid var(--cl-line);border-radius:10px;background:#fff;cursor:pointer;font-size:13px
}
.lang-switch .lang-btn.active{background:var(--cl-sand);border-color:var(--cl-sand);font-weight:600}

/* Burger (mobile) */
.burger{display:none;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--cl-line);border-radius:10px;background:#fff;cursor:pointer}
.burger svg{width:22px;height:22px}

@media(max-width:860px){
  .menu{
    position:absolute;left:0;right:0;top:var(--nav-h);
    background:rgba(255,253,248,.98);border-bottom:1px solid var(--cl-line);padding:6px 12px;display:none
  }
  .menu.open{display:grid;grid-template-columns:1fr;gap:6px}
  .menu a{padding:8px 10px;font-size:13px;line-height:1.2}
  .burger{display:flex}
  .lang-switch{display:none}
  .brand img{height:32px}
  .brand .title{font-size:15px}
  :root{--nav-h:54px}
}

/* ====== Hero ====== */
.hero{position:relative;isolation:isolate;padding:56px 0 40px}
.hero .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center}
.hero .lead{margin:14px 0 22px;color:#3a332d}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.hero .photo{border-radius:20px;overflow:hidden;border:3px solid var(--cl-sand)}
@media(max-width:980px){.hero .grid{grid-template-columns:1fr}}

/* ====== Ethno side ribbons ====== */
.ethno-side{position:fixed;top:0;bottom:0;width:64px;z-index:1;opacity:.18;pointer-events:none;background-repeat:repeat-y;background-size:64px 160px}
.ethno-side.left{left:0}
.ethno-side.right{right:0}
.ethno-side{
  background-image:url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?>\
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="160" viewBox="0 0 64 160">\
<rect width="64" height="160" fill="white"/>\
<path d="M32 16c-10 0-18 8-18 18s8 18 18 18 18-8 18-18-8-18-18-18zm0 8c5.5 0 10 4.5 10 10s-4.5 10-10 10-10-4.5-10-10 4.5-10 10-10z" fill="%238B0000"/>\
<path d="M10 56l22-14 22 14-22 14-22-14z" fill="%23D49B6A"/>\
<path d="M12 92c6-10 16-10 22 0 6-10 16-10 22 0-6 10-16 10-22 0-6 10-16 10-22 0z" fill="%235C3A21"/>\
<path d="M16 130l16-12 16 12-16 12-16-12z" fill="%23005F73"/>\
</svg>');
}
.ethno-wrap{position:relative;z-index:2;padding-left:76px;padding-right:76px}
@media(max-width:980px){
  .ethno-side{width:18px;background-size:18px 120px;opacity:.22}
  .ethno-wrap{padding:0 24px}
}

/* ===== Fade-in logic ===== */
/* по умолчанию видно — чтобы контент не пропадал при сбое JS */
.fade-in{opacity:1;transform:none}
/* если JS пометил <html> классом .js — включаем анимацию появления */
.js .fade-in{opacity:0;transform:translateY(16px);transition:.7s ease}
.js .fade-in.visible{opacity:1;transform:none}
/* явный фолбэк без JS */
.no-js .fade-in{opacity:1 !important;transform:none !important}

/* Footer socials */
.footer-social{text-align:center;margin:40px 0 10px}
.footer-social h2{margin-bottom:14px}
.footer-social .social-icons{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap}
.footer-social .social-link{
  display:flex;align-items:center;gap:8px;text-decoration:none;color:#222;font-weight:500;
  transition:transform .2s ease, box-shadow .2s ease
}
.footer-social .social-link:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.1)}
.footer-social .social-link img{border-radius:8px}

/* Top & bottom wave ornaments */
.ornament{width:100%;height:60px}

/* ===== Theme packs ===== */
:root[data-theme="cool"]{
  --cl-bg:#F6FAFC; --cl-ink:#0F1B2A;
  --cl-accent:#0B7285; --cl-accent-2:#2F4858; --cl-accent-3:#0A6F84;
  --cl-sand:#DDECF3; --cl-cloud:#FFFFFF; --cl-line:#D6E6EE;
}
:root[data-theme="sunset"]{
  --cl-bg:#FFF6EE; --cl-ink:#2A1E19;
  --cl-accent:#9A031E; --cl-accent-2:#7A4A2D; --cl-accent-3:#3C6E71;
  --cl-sand:#F0DEC9; --cl-cloud:#FFF9F3; --cl-line:#EED8C6;
}
:root[data-theme="dark"]{
  --cl-bg:#121212; --cl-ink:#ECECEC;
  --cl-accent:#E4572E; --cl-accent-2:#D9A441; --cl-accent-3:#3A86FF;
  --cl-sand:#2A2A2A; --cl-cloud:#1A1A1A; --cl-line:#333333;
}
:root[data-theme="dark"] .navbar{background:rgba(18,18,18,.9);border-bottom-color:var(--cl-line)}
:root[data-theme="dark"] .menu a:hover{background:#1f1f1f;border-color:var(--cl-line)}

/* Prefs bar (theme + language) */
.prefs{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 20px}
.prefs .theme-switch{display:flex;gap:8px;flex-wrap:wrap}
.prefs .lang-switch{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.theme-btn,.lang-btn{
  padding:6px 10px;border:1px solid var(--cl-line);border-radius:10px;background:#fff;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s
}
.theme-btn.active,.lang-btn.active{background:var(--cl-sand);border-color:var(--cl-sand);font-weight:600}

@media (max-width:860px){
  .prefs{padding:8px 14px}
  .theme-btn{padding:6px 10px;font-size:12px;border-radius:8px}
  .lang-btn{padding:4px 8px;font-size:12px;border-radius:8px}
  .navbar .lang-switch{display:none!important}
  .menu .lang-row{display:none!important}
}

/* Gallery grid */
.slider{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.slider picture img,.slider img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--cl-line)}
@media (max-width:860px){.slider{grid-template-columns:1fr}}

/* Honeypot helper (если когда-то понадобится видимый контейнер) */
.hp-wrap{position:absolute; left:-5000px; width:1px; height:1px; overflow:hidden}

/* A11y: focus & reduced motion */
a:focus-visible, button:focus-visible, .lang-btn:focus-visible, .theme-btn:focus-visible, .burger:focus-visible{
  outline:2px solid var(--cl-accent-3); outline-offset:2px; border-radius:10px
}
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
}