/* ==========================================================================
   МОНО МО — светлая редакторская палитра.
   Токены названы по историческим причинам (--black/--white), но по роли:
   --black = фон страницы (тёплый кремовый), --white = основной текст (тёмные чернила).
   ========================================================================== */
:root{
  --black:        #F7F3EC;
  --graphite:     #EFE6D9;
  --card:         #FFFFFF;
  --gold:         #A9812E;   /* рамки, точки, декор */
  --gold-text:    #806021;   /* текст: 5.26 к кремовому, 4.70 к #EFE6D9 */
  --gold-light:   #C9A227;
  --silver:       #635A4E;  /* основной вторичный текст — контраст ≥ 4.5 к кремовому фону */
  --white:        #221D17;
  --muted:        #6B6257;  /* подписи и мета — контраст ≥ 4.5 и на #F7F3EC, и на #EFE6D9 */
  --border-gold:  rgba(169,129,46,.32);
  --line:         rgba(34,29,23,.12);
  --line-strong:  rgba(34,29,23,.28);

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --pad: clamp(20px, 5vw, 64px);
  --section-pad: clamp(64px, 9vw, 128px);
  --ease-lux: cubic-bezier(.16,.84,.32,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--black); }
body{
  margin:0; min-height:100svh; background:var(--black); color:var(--white);
  font-family:var(--sans); font-weight:300; line-height:1.6; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3{ font-family:var(--serif); font-weight:400; margin:0; color:var(--white); }
p{ margin:0; }
::selection{ background:var(--gold); color:var(--card); }

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

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 30px; font-family:var(--sans); font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; white-space:nowrap; transition:all .4s var(--ease-lux); border:1px solid transparent;
}
.btn-gold{
  background:linear-gradient(100deg,#6a4f1b,#8a6825,#7a5c20,#6a4f1b);
  background-size:260% 100%; color:var(--card); font-weight:600;
}
.btn-gold:hover{ background-position:100% 0; box-shadow:0 8px 20px rgba(169,129,46,.25); }
.btn-line{ border-color:var(--line-strong); color:var(--white); background:transparent; cursor:pointer; }
.btn-line:hover{ border-color:var(--gold-text); color:var(--gold-text); }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--white); border-bottom:1px solid var(--line-strong);
  padding-bottom:4px; transition:all .35s var(--ease-lux); width:fit-content;
}
.link-arrow i{ font-style:normal; color:var(--gold-text); transition:transform .35s var(--ease-lux); }
.link-arrow:hover{ color:var(--gold-text); border-color:var(--gold-text); }
.link-arrow:hover i{ transform:translateX(6px); }

/* ---------- Site header ---------- */
.cs-logo{
  font-family:'Marcellus', var(--serif); font-weight:500; font-size:clamp(20px,3vw,26px);
  letter-spacing:.2em; display:inline-flex; gap:.3em;
}
.cs-logo .lm-silver{ color:#3a352c; }
.cs-logo .lm-gold{ color:var(--gold-text); }

/* ---------- Newsletter / subscribe form ---------- */
.cs-form{
  margin:0; display:flex; max-width:420px; border:1px solid var(--line-strong);
  transition:border-color .3s; background:var(--card);
}
.cs-form:focus-within{ border-color:var(--gold-text); }
.cs-form input{
  flex:1; min-width:0; background:transparent; border:none; color:var(--white);
  font-family:var(--sans); font-size:14px; padding:15px 16px;
}
.cs-form input::placeholder{ color:var(--muted); }
.cs-form button{
  border:none; cursor:pointer; padding:15px 24px; font-family:var(--sans); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--card);
  background:linear-gradient(100deg,#8a6d1f,var(--gold-light),var(--gold),#8a6d1f);
  background-size:260% 100%; transition:background-position .5s var(--ease-lux); white-space:nowrap;
}
.cs-form button:hover{ background-position:100% 0; }
.cs-form-note{ margin:12px 0 0; font-size:12px; color:var(--muted); }
.cs-form-note.is-success{ color:var(--gold-text); }

/* ---------- Footer ---------- */
.cs-footer{
  padding:28px var(--pad) 36px; display:flex; flex-wrap:wrap; gap:16px; align-items:center;
  justify-content:space-between; border-top:1px solid var(--line);
}
.cs-contacts, .cs-social{ display:flex; gap:24px; flex-wrap:wrap; }
.cs-contacts a, .cs-social a{ font-size:12.5px; letter-spacing:.04em; color:var(--muted); transition:color .3s; }
.cs-contacts a:hover, .cs-social a:hover{ color:var(--gold-text); }

.reveal{ opacity:1; }

@media (max-width:520px){
  .cs-form{ flex-direction:column; }
  .cs-footer{ flex-direction:column; align-items:flex-start; }
}

/* ---------- Видимый фокус с клавиатуры ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--gold-text); outline-offset:3px;
}

/* Реквизиты продавца под копирайтом: обязательная, но не главная строка —
   поэтому мельче и приглушённее самого копирайта. */
.cs-legal{
  font-size:12px; color:var(--muted); width:100%; text-align:center;
  margin-top:8px; order:3; line-height:1.7;
}
.cs-legal-req{ font-size:11.5px; opacity:.85; }