/* ============================================================
   АДЫГА ХАСЭ РА — Brand stylesheet / design tokens
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=PT+Serif:ital,wght@0,400;0,700;1,400&family=PT+Sans:wght@400;700&display=swap');

:root{
  /* Core palette */
  --green:#0E5A3B;        /* Хасэ — primary */
  --green-deep:#093D29;   /* deep field */
  --green-bright:#178A57;  /* digital accent */
  --gold:#C6A24A;          /* primary metallic */
  --gold-lt:#E2C57E;       /* highlight */
  --gold-dk:#9A7A2E;       /* shadow gold */
  --ink:#1A1813;           /* warm near-black */
  --parch:#F4EEE1;         /* warm parchment */
  --parch-2:#EBE3D2;       /* deeper parchment */
  --stone:#B7AE98;         /* muted neutral */
  --line:rgba(26,24,19,.14);

  --ff-display:'Cormorant Garamond', Georgia, serif;
  --ff-serif:'PT Serif', Georgia, serif;
  --ff-sans:'PT Sans', system-ui, sans-serif;

  --maxw:1180px;
  --pad:clamp(20px,5vw,72px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--parch);color:var(--ink);
  font-family:var(--ff-serif);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}

/* ---- Type ---- */
.h-display{font-family:var(--ff-display);font-weight:600;line-height:1.02;letter-spacing:.01em}
.eyebrow{font-family:var(--ff-sans);font-weight:700;text-transform:uppercase;
  letter-spacing:.32em;font-size:12.5px;color:var(--gold-dk)}
.lead{font-family:var(--ff-serif);font-size:clamp(18px,2vw,22px);line-height:1.65}
.kicker-num{font-family:var(--ff-display);font-weight:600;color:var(--gold);font-size:15px;letter-spacing:.05em}

/* ---- Layout ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
section{padding:clamp(64px,9vw,120px) 0}
.sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:14px}
.sec-head .num{font-family:var(--ff-display);font-size:22px;color:var(--gold);font-weight:600}
.sec-title{font-family:var(--ff-display);font-weight:600;font-size:clamp(34px,5vw,58px);line-height:1.02;margin:0}
.sec-intro{max-width:62ch;color:#42402f;margin:18px 0 0}

/* ---- Ornament bands ---- */
.band{height:60px;background:url('assets/ornament-border-gold.svg?v=3') repeat-x center/auto 60px}
.band-sm{height:40px;background:url('assets/ornament-border-gold.svg?v=3') repeat-x center/auto 40px;opacity:.85}
.band-green{background:var(--green)}
.band-green .inner{height:60px;background:url('assets/ornament-border-gold.svg?v=3') repeat-x center/auto 60px}

/* ---- Cards / grids ---- */
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:760px){
  .grid-2, .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .grid-4{grid-template-columns:1fr}
}
.card{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.divider-rule{height:1px;background:var(--line);border:0;margin:0}

/* ---- Swatches ---- */
.sw{border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.sw .chip{height:150px;display:flex;align-items:flex-end;padding:14px}
.sw .meta{padding:12px 14px;background:#fff;font-family:var(--ff-sans);font-size:13px;line-height:1.5}
.sw .meta b{font-family:var(--ff-serif);font-size:15px;display:block}
.sw .meta code{font-size:12px;color:#6b6855}

/* ---- Misc ---- */
.tag{display:inline-block;font-family:var(--ff-sans);font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;padding:5px 11px;border-radius:999px}
.tag.ok{background:rgba(23,138,87,.14);color:#136b44}
.tag.no{background:rgba(150,40,30,.12);color:#8c2a1f}
.muted{color:#6b6855}

/* ---- Mobile Menu Toggle ---- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1000;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--green);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
  background-color: var(--gold-lt);
}
.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
  background-color: var(--gold-lt);
}
@media(max-width:860px) {
  .nav-toggle {
    display: flex;
  }
}

/* ---- Mobile Drawer Menu ---- */
.nav-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 300px;
  max-width: 85%;
  height: 100vh;
  background-color: rgba(9, 61, 41, 0.96);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  z-index: 999;
  box-shadow: -5px 0 25px rgba(0, 0, 0, 0.25);
  transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  padding: 80px 30px 40px;
  border-left: 1px solid rgba(226, 197, 126, 0.2);
}
.nav-drawer.open {
  right: 0;
}
.nav-drawer .drawer-links {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.nav-drawer .drawer-links a {
  color: var(--parch);
  text-decoration: none;
  font-family: var(--ff-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(244, 238, 225, 0.08);
  padding-bottom: 8px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.nav-drawer .drawer-links a:hover {
  color: var(--gold-lt);
  border-color: var(--gold);
}
.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
body.menu-open {
  overflow: hidden;
}