/* ============================================================
   UMALIFE FOR MEN — служебные документы
   (политика конфиденциальности, условия, удаление данных)

   Подключается вместе со styles.css: оттуда берутся цвета,
   шрифты, .shell, .nav и .foot. Здесь только то, чего на
   лендинге нет, — раскладка длинного документа.
   ============================================================ */

/* --- шапка документа: лаковая полоса, как крышка коробки --- */

.doc-head{
  background:var(--lacquer);
  color:var(--on-dark);
  padding:64px 0 56px;
  border-bottom:3px solid var(--gold);
}

.doc-kicker{
  font-family:var(--label);
  font-size:12px;
  font-weight:400;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold-lit);
  margin-bottom:18px;
}

.doc-title{
  font-family:var(--display);
  font-size:clamp(30px,5vw,52px);
  line-height:1.14;
  max-width:16em;
}

.doc-date{
  margin-top:20px;
  font-size:14px;
  color:var(--on-dark-2);
}

/* --- тело документа ---------------------------------------- */

.doc{ padding:66px 0 88px }

.doc-lead{
  font-size:19px;
  line-height:1.72;
  max-width:44em;
  padding-bottom:34px;
  border-bottom:1px solid var(--rule);
}

/* раздел: номер слева на поле, текст справа —
   как на бланке официального документа */
.doc-sec{
  display:grid;
  grid-template-columns:76px minmax(0,44em);
  gap:0 30px;
  padding:34px 0;
  border-bottom:1px solid var(--rule-2);
}

.doc-num{
  font-family:var(--label);
  font-size:13px;
  letter-spacing:.2em;
  color:var(--gold);
  padding-top:7px;
  border-top:2px solid var(--gold);
  align-self:start;
}

.doc-h{
  font-family:var(--display);
  font-size:23px;
  line-height:1.3;
  margin-bottom:14px;
}

.doc-sec p + p{ margin-top:13px }

.doc-sec ul{
  margin-top:13px;
  display:grid;
  gap:9px;
}

.doc-sec li{
  position:relative;
  padding-left:20px;
  color:var(--ink-2);
}

.doc-sec li::before{
  content:"";
  position:absolute;
  left:2px;
  top:11px;
  width:7px;
  height:1px;
  background:var(--gold);
}

.doc-sec a{
  color:var(--ink);
  border-bottom:1px solid var(--gold);
}
.doc-sec a:hover{ color:var(--gold) }

.doc-note{
  margin-top:16px;
  padding:16px 20px;
  background:var(--paper-lo);
  border-left:2px solid var(--gold);
  font-size:15px;
  color:var(--ink-2);
}

/* --- английская выжимка (для проверки Meta) ---------------- */

.doc-en{
  margin-top:56px;
  padding:38px 0 6px;
  border-top:2px solid var(--ink);
  max-width:44em;
}

.doc-en-tag{
  font-family:var(--label);
  font-size:12px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:16px;
}

.doc-en h2{
  font-family:var(--display);
  font-size:21px;
  margin-bottom:14px;
}

.doc-en p + p{ margin-top:12px }
.doc-en p{ color:var(--ink-2); font-size:16px }

.doc-en a{
  color:var(--ink);
  border-bottom:1px solid var(--gold);
}

/* --- ссылки между документами внизу ------------------------ */

.doc-links{
  display:flex;
  flex-wrap:wrap;
  gap:12px 26px;
  margin-top:14px;
}

.doc-links a{
  font-family:var(--label);
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--on-dark-2);
}
.doc-links a:hover{ color:var(--gold-lit) }

/* --- ссылка «назад на сайт» в шапке ------------------------ */

.doc-back{
  font-family:var(--label);
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-2);
  border-bottom:1px solid var(--rule);
  padding-bottom:2px;
}
.doc-back:hover{ color:var(--ink); border-color:var(--gold) }

/* --- телефон ------------------------------------------------ */

@media (max-width:720px){
  .doc-head{ padding:44px 0 38px }
  .doc{ padding:44px 0 64px }

  .doc-sec{
    grid-template-columns:1fr;
    gap:0;
    padding:28px 0;
  }
  .doc-num{
    display:inline-block;
    margin-bottom:12px;
    padding-top:6px;
  }
  .doc-lead{ font-size:17px }
  .doc-h{ font-size:20px }
}