:root{
  --night-0:#080b16; --night-1:#0d1324; --night-2:#151d38; --night-3:#1e2949;
  --gold:#f4c96b; --gold-deep:#cf9a41; --path:#d9a44b;
  --firefly-blue:#a6cdec;
  --cream-0:#f5efe3; --cream-1:#efe7d6; --cream-2:#e7dbc5; --cream-line:#ddceb2;
  --ink:#241f17; --ink-soft:#5c5344; --ink-faint:#8b8272; --body:#332c20;
  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'Manrope', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gutter:clamp(20px,5vw,40px); --col:680px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--cream-0); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased}
img{max-width:100%; height:auto; display:block}
.col{max-width:var(--col); margin:0 auto}

.draft{background:var(--gold); color:#2a2312; font-size:13px; line-height:1.5;
  padding:11px var(--gutter); font-weight:600}
header{background:var(--night-0); color:#eef1f8; padding:18px var(--gutter)}
header .col{display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{font-family:var(--serif); font-size:20px; letter-spacing:.02em; color:#eef1f8;
  text-decoration:none}
.back{font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
  text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px;
  transition:border-color .3s}
.back:hover,.back:focus-visible{border-color:var(--gold-deep)}

.hero{background:var(--night-2); color:var(--cream-0);
  padding:clamp(44px,7vw,76px) var(--gutter) clamp(36px,5vw,56px)}
.kicker{font-size:11.5px; font-weight:600; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); margin:0 0 20px}
.hero h1{font-family:var(--serif); font-weight:600; font-size:clamp(32px,5.4vw,52px);
  line-height:1.1; letter-spacing:-.01em; margin:0 0 22px; text-wrap:balance}
.meta{display:flex; gap:8px 18px; flex-wrap:wrap; font-size:14px; color:#cdbf9f;
  align-items:baseline}
.meta .dot{color:#4a5a86}
.meta .who{font-family:var(--serif); font-style:italic; font-size:16px; color:var(--cream-2)}
.meta .who a{color:var(--cream-2); text-decoration:none;
  border-bottom:1px solid rgba(244,201,107,.45); transition:border-color .3s}
.meta .who a:hover,.meta .who a:focus-visible{border-color:var(--gold)}

article{padding:clamp(40px,6vw,64px) var(--gutter) clamp(48px,7vw,80px)}
article p{font-size:18px; line-height:1.75; margin:0 0 24px; color:var(--body)}
article h2{font-family:var(--serif); font-weight:600; font-size:clamp(24px,3vw,32px);
  line-height:1.15; letter-spacing:-.01em; color:var(--ink); margin:44px 0 16px}
article h3{font-family:var(--serif); font-weight:600; font-size:clamp(20px,2.4vw,25px);
  color:var(--ink); margin:34px 0 14px}
article > .col > p:first-of-type::first-letter{
  font-family:var(--serif); font-size:4.1em; float:left; line-height:.82;
  padding:6px 12px 0 0; color:var(--gold-deep)}
article ul,article ol{margin:0 0 26px; padding-left:0; list-style:none;
  display:flex; flex-direction:column; gap:12px}
article li{position:relative; padding-left:26px; font-size:18px; line-height:1.65;
  color:var(--body)}
article li::before{content:''; position:absolute; left:4px; top:.68em; width:7px; height:7px;
  border-radius:50%; background:var(--path)}
article a{color:var(--gold-deep); text-decoration:none;
  border-bottom:1px solid var(--cream-line); transition:border-color .3s}
article a:hover,article a:focus-visible{border-color:var(--gold-deep)}
article blockquote{margin:34px 0; padding:2px 0 2px 22px; border-left:2px solid var(--gold-deep);
  font-family:var(--serif); font-style:italic; font-size:21px; line-height:1.5; color:var(--ink)}
article blockquote p{font-size:inherit; line-height:inherit; color:inherit; margin:0}
/* Врезки статей. Мятный и сиреневый — цвета брендбука (они заданы в исходном
   ТЗ статей: #E4F0E0 и #EAE6F2), чуть притушены под бежевый фон страницы.
   Пишутся в статье блоком «!!! mint "Узнаёшь себя?"». */
.admonition{margin:32px 0; padding:26px clamp(18px,3.5vw,30px)}
.admonition-title{font-family:var(--sans); font-size:11.5px; font-weight:700;
  letter-spacing:.26em; text-transform:uppercase; margin:0 0 14px; color:#4a6b52}
.admonition p{margin:0 0 14px; font-size:17px; line-height:1.7}
.admonition p:last-child{margin-bottom:0}
.admonition.mint{background:#e6f0e2; border-left:2px solid #8fb79a}
.admonition.lilac{background:#ebe7f3; border-left:2px solid #a496c4}
.admonition.lilac .admonition-title{color:#574a75}
.admonition.final{background:none; padding:8px 0 0; border-top:1px solid var(--cream-line);
  margin-top:40px}
.admonition.final p{font-family:var(--serif); font-style:italic; font-size:21px;
  line-height:1.5; color:var(--ink); padding-top:24px}
.admonition.final .admonition-title{display:none}

article figure{margin:32px 0}
article figcaption{font-size:14px; line-height:1.55; color:var(--ink-faint); margin-top:10px;
  font-style:italic}
article code{font-size:.92em; background:var(--cream-2); padding:2px 6px; border-radius:2px}
article pre{overflow-x:auto; background:var(--cream-2); padding:18px; margin:0 0 26px}
article table{width:100%; border-collapse:collapse; margin:0 0 26px; font-size:16px}
article th,article td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--cream-line)}
.wide{overflow-x:auto}

.to-bot{margin:46px 0 0; padding:34px clamp(20px,4vw,34px);
  background:var(--cream-2); border-top:1px solid var(--cream-line);
  border-bottom:1px solid var(--cream-line); text-align:center}
.to-bot .hint{margin:14px 0 0; font-size:14px; line-height:1.55; color:var(--ink-soft)}
.back-site{margin:26px 0 0; text-align:center}
.back-site a{font-size:14px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--cream-line);
  padding-bottom:3px; transition:color .3s, border-color .3s}
.back-site a:hover,.back-site a:focus-visible{color:var(--gold-deep); border-color:var(--gold-deep)}
.btn{display:inline-block; background:var(--night-2); color:var(--cream-0); font-size:14px;
  font-weight:600; letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  padding:15px 26px; transition:background .3s}
.btn:hover,.btn:focus-visible{background:var(--night-3)}

.next{padding:0 var(--gutter) clamp(48px,7vw,80px)}
.next .lbl{font-size:11.5px; font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 20px}
.next ul{list-style:none; margin:0; padding:0}
.next li{border-top:1px solid var(--cream-line)}
.next li:last-child{border-bottom:1px solid var(--cream-line)}
.next a{display:flex; gap:14px 20px; align-items:baseline; justify-content:space-between;
  padding:18px 2px; text-decoration:none; flex-wrap:wrap}
.next .t{font-family:var(--serif); font-size:20px; color:var(--ink); flex:1 1 260px;
  line-height:1.3}
.next .d{font-size:13px; color:var(--ink-faint); white-space:nowrap;
  font-variant-numeric:tabular-nums}
.next a:hover .t,.next a:focus-visible .t{color:var(--gold-deep)}

.index-head{background:var(--night-2); color:var(--cream-0);
  padding:clamp(44px,7vw,76px) var(--gutter) clamp(32px,4vw,48px)}
.index-head h1{font-family:var(--serif); font-weight:600; font-size:clamp(30px,5vw,46px);
  line-height:1.1; margin:0 0 16px; text-wrap:balance}
.index-head p{margin:0; font-size:17px; line-height:1.6; color:#cdbf9f; max-width:34em}
.index-wrap{padding:clamp(36px,5vw,56px) var(--gutter) clamp(48px,7vw,80px)}
.index{list-style:none; margin:0; padding:0}
.index li{border-top:1px solid var(--cream-line)}
.index li:last-child{border-bottom:1px solid var(--cream-line)}
.index a{display:block; padding:22px 2px; text-decoration:none}
.index .k{font-size:11px; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold-deep); display:block; margin-bottom:8px}
.index .t{font-family:var(--serif); font-size:clamp(20px,2.4vw,25px); line-height:1.25;
  color:var(--ink); display:block; margin-bottom:8px}
.index .x{font-size:15px; line-height:1.6; color:var(--ink-soft); margin:0 0 8px}
.index .d{font-size:13px; color:var(--ink-faint); font-variant-numeric:tabular-nums}
.index a:hover .t,.index a:focus-visible .t{color:var(--gold-deep)}
.empty{padding:clamp(40px,6vw,64px) var(--gutter); text-align:center; color:var(--ink-soft);
  font-family:var(--serif); font-size:20px}

footer{background:var(--night-0); color:#8fa0c0; font-size:13px; line-height:1.7;
  padding:34px var(--gutter)}
footer a{color:var(--firefly-blue); text-decoration:none; border-bottom:1px solid transparent}
footer a:hover,footer a:focus-visible{border-color:var(--firefly-blue)}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}