:root{
  --black:#0b0b0d;
  --dark:#141418;
  --gold:#e3b52e;
  --gold-bright:#f6d478;
  --gold-dim:#9a7b28;
  --white:#f2ecdc;
  --muted:#b9ae94;
  --red:#b2242c;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--black);
  color:var(--white);
  font-family:"Old Standard TT",Georgia,serif;
  line-height:1.8;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1100px 520px at 50% -10%, rgba(227,181,46,.08), transparent 60%),
    radial-gradient(900px 500px at 50% 110%, rgba(178,36,44,.06), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 7px);
}
::selection{background:var(--gold);color:#000}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--black)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--gold-dim),var(--gold));border:2px solid var(--black);border-radius:6px}

/* ===== ШАПКА ===== */
header{
  position:relative;z-index:1;text-align:center;
  padding:70px 20px 55px;
  background:linear-gradient(180deg,#000 0%,#101014 100%);
  border-bottom:4px double var(--gold);
}
.flag-frame{
  display:inline-block;padding:10px;margin-bottom:38px;
  border:1px solid var(--gold-dim);
  box-shadow:0 0 0 4px var(--black),0 0 0 5px var(--gold-dim),0 0 60px rgba(227,181,46,.28);
  animation:float 6s ease-in-out infinite;
}
.flag-frame img{display:block;width:min(560px,82vw)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
h1{
  font-family:"Cormorant SC",serif;font-weight:700;
  font-size:clamp(2.1rem,6vw,4rem);letter-spacing:.18em;text-transform:uppercase;
  background:linear-gradient(180deg,var(--gold-bright) 0%,var(--gold) 55%,var(--gold-dim) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 35px rgba(227,181,46,.25);
}
.orn{display:flex;align-items:center;gap:16px;max-width:560px;margin:22px auto}
.orn::before,.orn::after{content:"";height:1px;flex:1}
.orn::before{background:linear-gradient(90deg,transparent,var(--gold-dim))}
.orn::after{background:linear-gradient(90deg,var(--gold-dim),transparent)}
.orn span{color:var(--red);font-size:1.2rem;text-shadow:0 0 12px rgba(178,36,44,.6)}
.hero-sub{color:var(--muted);font-style:italic;letter-spacing:.28em;text-transform:uppercase;font-size:.85rem}

/* ===== НАВИГАЦИЯ ===== */
nav{
  position:sticky;top:0;z-index:20;display:flex;justify-content:center;gap:8px;flex-wrap:wrap;
  padding:14px 10px;background:rgba(11,11,13,.88);backdrop-filter:blur(9px);
  border-bottom:1px solid rgba(227,181,46,.3);
}
.tab-btn{
  position:relative;background:none;border:none;cursor:pointer;
  font-family:"Cormorant SC",serif;font-size:1.05rem;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--gold);
  padding:10px 30px;transition:.3s;
}
.tab-btn::after{
  content:"";position:absolute;left:20%;right:20%;bottom:4px;height:2px;
  background:var(--red);transform:scaleX(0);transition:.3s;
}
.tab-btn:hover::after{transform:scaleX(1)}
.tab-btn.active{
  color:#000;background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  box-shadow:0 0 22px rgba(227,181,46,.4);
}
.tab-btn.active::after{transform:scaleX(0)}

main{position:relative;z-index:1;max-width:960px;margin:0 auto;padding:50px 20px 90px}
.tab{display:none}
.tab.active{display:block;animation:fade .5s ease}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ===== КАРТОЧКИ ===== */
.card{
  position:relative;margin-bottom:34px;padding:36px 42px;
  background:linear-gradient(160deg,#1a1a21,#121216);
  border:1px solid rgba(227,181,46,.25);
  box-shadow:0 8px 30px rgba(0,0,0,.5);
  transition:border-color .3s, transform .3s;
  scroll-margin-top:95px;
}
.card::before{content:"";position:absolute;inset:9px;border:1px solid rgba(227,181,46,.14);pointer-events:none}
.card:hover{border-color:var(--gold);transform:translateY(-3px)}
.card h2{
  display:flex;align-items:baseline;gap:18px;
  font-family:"Cormorant SC",serif;font-size:1.55rem;letter-spacing:.12em;color:var(--gold);
  padding-bottom:12px;margin-bottom:22px;border-bottom:3px double var(--gold-dim);
}
.card h2 .num{
  font-size:2.3rem;line-height:1;color:var(--red);
  text-shadow:0 0 14px rgba(178,36,44,.55);
}
.card p{margin-bottom:15px;text-align:justify}
.card p.lead::first-letter{
  font-family:"Cormorant SC",serif;font-size:3.4em;line-height:.8;
  float:left;padding:6px 12px 0 0;color:var(--gold);
}
.signature{margin-top:45px;text-align:right;font-style:italic;color:var(--gold);font-size:1.25rem;letter-spacing:.1em}

/* содержание */
.toc ol{list-style:none;columns:2;gap:40px}
.toc a{color:var(--muted);text-decoration:none;border-bottom:1px dotted var(--gold-dim);transition:.25s}
.toc a:hover{color:var(--gold-bright);border-bottom-color:var(--gold-bright)}
.toc li{margin-bottom:9px;break-inside:avoid}
.toc li b{color:var(--red);font-weight:700;margin-right:6px}

.placeholder{
  border:1px dashed var(--gold-dim);padding:60px 25px;text-align:center;
  color:var(--muted);font-style:italic;background:rgba(227,181,46,.04);
}
.placeholder .big{display:block;font-size:2.4rem;color:var(--red);margin-bottom:14px;text-shadow:0 0 16px rgba(178,36,44,.5)}

.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.visible{opacity:1;transform:none}

footer{
  position:relative;z-index:1;text-align:center;padding:34px 20px;
  border-top:4px double var(--gold);background:#000;
}
footer .name{font-family:"Cormorant SC",serif;color:var(--gold);letter-spacing:.3em;text-transform:uppercase;font-size:1rem}
footer .small{color:var(--gold-dim);font-size:.78rem;letter-spacing:.2em;margin-top:8px;text-transform:uppercase}

#toTop{
  position:fixed;right:24px;bottom:24px;z-index:30;width:48px;height:48px;
  background:var(--black);border:1px solid var(--gold);color:var(--gold);
  font-size:1.25rem;cursor:pointer;opacity:0;pointer-events:none;transition:.3s;
}
#toTop.show{opacity:1;pointer-events:auto}
#toTop:hover{background:var(--gold);color:#000}

/* ===== TELEGRAM ===== */
.tg-link{
  display:inline-flex;align-items:center;gap:12px;
  margin:20px auto 14px;padding:12px 30px;
  border:1px solid var(--gold);color:var(--gold);
  background:rgba(227,181,46,.06);text-decoration:none;
  font-family:"Cormorant SC",serif;font-size:1rem;letter-spacing:.15em;text-transform:uppercase;
  transition:.3s;
}
.tg-link svg{width:18px;height:18px;fill:currentColor}
.tg-link:hover{background:var(--gold);color:#000;box-shadow:0 0 25px rgba(227,181,46,.45)}
.tg-float{
  position:fixed;left:24px;bottom:24px;z-index:30;width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  background:var(--black);border:1px solid var(--gold);color:var(--gold);
  box-shadow:0 0 18px rgba(227,181,46,.25);transition:.3s;
}
.tg-float svg{width:22px;height:22px;fill:currentColor}
.tg-float:hover{background:var(--gold);color:#000}

@media(max-width:700px){
  .toc ol{columns:1}
  .card{padding:26px 22px}
}