:root{
  --night:#0c0a07;
  --night-2:#141009;
  --gold:#c9a54e;
  --gold-hi:#e7c884;
  --crimson:#8d1b12;
  --parchment:#e8dcc0;
  --ink:#241a10;
  --text:#e6ddc9;
  --muted:#a89a7d;
  --s-small:0.9375rem;
  --s-body:1.0625rem;
  --s-lead:clamp(1.2rem,1.6vw,1.45rem);
  --s-head:clamp(1.6rem,2.8vw,2.4rem);
  --s-display:clamp(2.6rem,6.4vw,5.4rem);
}
*{box-sizing:border-box}
html{background:var(--night)}
html,body{margin:0}
body{
  background:var(--night); color:var(--text);
  font-family:"Lora",Georgia,serif; font-size:var(--s-body); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%}
a{color:var(--gold-hi); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
h1,h2,h3{margin:0; font-family:"Cinzel",Georgia,serif; font-weight:600; line-height:1.06; letter-spacing:.02em}
p{margin:0 0 18px}
p:last-child{margin-bottom:0}

.wrap{max-width:1080px; margin:0 auto; padding:0 clamp(20px,4vw,40px)}
.ornament{color:var(--gold); letter-spacing:.6em; font-size:var(--s-small); text-align:center; margin:0 0 18px}

/* ---------- навигация ---------- */
.topbar{position:absolute; top:0; left:0; right:0; z-index:3; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:20px clamp(20px,4vw,40px)}
.topbar .brand{font-family:"Cinzel",Georgia,serif; font-size:1rem; color:var(--gold-hi); letter-spacing:.14em; text-decoration:none; white-space:nowrap}
.topbar nav{display:flex; gap:22px; flex-wrap:wrap}
.topbar nav a{color:var(--text); text-decoration:none; font-size:var(--s-small); letter-spacing:.02em}
.topbar nav a:hover{color:var(--gold-hi)}
.topbar--solid{position:static; background:var(--night); padding-top:24px; padding-bottom:24px}

/* ---------- герой ---------- */
.hero{position:relative; min-height:100svh; display:grid; align-items:end; overflow:hidden}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; animation:slowZoom 34s ease-in-out infinite alternate}
@keyframes slowZoom{from{transform:scale(1.02)}to{transform:scale(1.1)}}
.hero .shade{position:absolute; inset:0; background:linear-gradient(to top, #0c0a07 6%, rgba(12,10,7,.72) 42%, rgba(12,10,7,.18) 78%); /* taste-skill-ignore: нейтральный скрим под заголовком на фото */}
.hero .inner{position:relative; padding:0 clamp(20px,4vw,40px) clamp(56px,11vh,110px)}
.hero h1{font-size:var(--s-display); color:var(--gold-hi); letter-spacing:.04em; font-weight:700}
.hero .sub{font-family:"Cinzel",Georgia,serif; font-size:var(--s-lead); color:var(--text); margin:16px 0 28px; max-width:34ch; letter-spacing:.01em}
.hero .actions{display:flex; gap:14px; flex-wrap:wrap}

.btn{display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 30px; border:0; border-radius:0; cursor:pointer; font-family:"Cinzel",Georgia,serif; font-size:var(--s-body); font-weight:600; letter-spacing:.06em; background:var(--gold); color:#1a130a; text-decoration:none; transition:background .2s ease, transform .2s ease}
.btn:hover{background:var(--gold-hi)}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:rgba(201,165,78,.14); color:var(--gold-hi)}
.btn--ghost:hover{background:rgba(201,165,78,.26)}

/* ---------- секции ---------- */
section{padding:clamp(60px,9vh,104px) 0}
.section-head{max-width:56ch; margin-bottom:34px}
h2{font-size:var(--s-head); color:var(--gold-hi)}
.section-head p{margin-top:14px; color:var(--muted); font-size:var(--s-body)}
.lead{font-size:var(--s-lead); line-height:1.5; color:var(--text); max-width:60ch}

/* ---------- внутренние страницы ---------- */
.page-head{padding:clamp(32px,7vh,72px) 0 8px}
.page-head h1{font-size:clamp(1.9rem,4vw,3rem); color:var(--gold-hi)}
.page-head .kicker{margin-top:14px; color:var(--muted); max-width:56ch}
.prose{max-width:66ch; padding-bottom:20px}
.prose h2{font-size:var(--s-lead); color:var(--gold-hi); margin:34px 0 12px}
.prose ul{margin:0 0 18px; padding-left:22px; color:var(--text)}
.prose li{margin-bottom:8px}
.prose p{color:var(--text)}
.prose .note{color:var(--muted); font-size:var(--s-small)}

/* новости */
.news{display:flex; flex-direction:column; gap:0}
.news a{display:grid; grid-template-columns:96px 1fr; gap:26px; padding:20px 0; text-decoration:none; color:inherit; transition:background .18s ease}
.news a:hover{background:rgba(201,165,78,.05)}
.news .d{font-family:"Cinzel",Georgia,serif; font-size:var(--s-small); color:var(--muted); letter-spacing:.04em; padding-top:3px}
.news .t{display:block; font-family:"Lora",Georgia,serif; font-size:var(--s-body); color:var(--gold-hi); letter-spacing:0; margin:0 0 6px; line-height:1.35}
.news .x{display:block; font-size:var(--s-body); color:var(--muted); margin:0; max-width:70ch; line-height:1.55}
.news .pin{color:var(--gold); font-size:var(--s-small); letter-spacing:.08em; display:block; margin-bottom:6px}
.news .src{margin-top:22px; font-size:var(--s-small); color:var(--muted)}
.news .src a{color:var(--gold-hi); display:inline}

/* полосы-иллюстрации */
.plate{position:relative; overflow:hidden; height:clamp(220px,36vh,430px)}
.plate img{width:100%; height:100%; object-fit:cover; object-position:center 45%}
.plate .cap{position:absolute; left:0; right:0; bottom:0; padding:12px 0; display:block; background:rgba(12,10,7,.66); color:var(--text); font-size:var(--s-small); letter-spacing:.02em}
.plate .cap span{display:block; max-width:1080px; margin:0 auto; padding:0 clamp(20px,4vw,40px)}

/* рулсеты */
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.tile{background:var(--night-2); color:var(--text); border:0; text-align:left; cursor:pointer; padding:26px 22px; min-height:168px; display:flex; flex-direction:column; justify-content:space-between; font:inherit; transition:background .2s ease, transform .2s ease}
.tile .name{font-family:"Cinzel",Georgia,serif; font-size:var(--s-lead); color:var(--gold-hi); letter-spacing:.05em}
.tile .hint{font-size:var(--s-small); color:var(--muted); margin-top:10px; line-height:1.4}
.tile:hover{background:#1c1710; transform:translateY(-3px)}
.tile[aria-pressed="true"]{background:var(--crimson)}
.tile[aria-pressed="true"] .hint{color:#f0dfc4}

.tome{margin-top:14px; background:var(--parchment); color:var(--ink); padding:clamp(24px,4vw,40px)}
.tome h3{font-size:var(--s-lead); color:#1e1509; margin-bottom:14px}
.tome dl{display:grid; grid-template-columns:auto 1fr; gap:10px 26px; margin:0; font-size:var(--s-body)}
.tome dt{color:#6b5836; font-family:"Cinzel",Georgia,serif; font-size:var(--s-small); letter-spacing:.04em}
.tome dd{margin:0}

/* таблица */
.ledger{background:var(--parchment); color:var(--ink); padding:clamp(20px,4vw,38px)}
.ledger h2{color:#1e1509; font-size:var(--s-head); margin-bottom:8px}
.ledger .note{color:#6b5836; font-size:var(--s-small); margin:0 0 26px}
.ledger .rows{display:flex; flex-direction:column; gap:2px}
.ledger .row{display:grid; grid-template-columns:1fr auto; gap:20px; align-items:baseline; padding:14px 16px; background:rgba(36,26,16,.04); transition:background .18s ease}
.ledger .row:hover{background:rgba(36,26,16,.1)}
.ledger .row .n{font-family:"Cinzel",Georgia,serif; font-size:var(--s-body); letter-spacing:.02em}
.ledger .row small{display:block; font-family:"Lora",serif; font-size:var(--s-small); color:#6b5836; margin-top:2px; letter-spacing:0}
.ledger .row .lv{font-size:var(--s-small); color:#6b5836; font-variant-numeric:tabular-nums; white-space:nowrap}

/* календарь */
.chronicle{display:flex; flex-direction:column; gap:30px}
.entry{display:grid; grid-template-columns:170px 1fr; gap:28px; align-items:start}
.entry time{font-family:"Cinzel",Georgia,serif; font-size:var(--s-small); color:var(--gold); letter-spacing:.06em}
.entry h3{font-size:var(--s-lead); color:var(--gold-hi); margin-bottom:8px}
.entry p{color:var(--muted); margin:0; max-width:46ch}

/* цифры */
.figures{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.fig{background:var(--night-2); padding:28px 22px}
.fig b{display:block; font-family:"Cinzel",Georgia,serif; font-size:var(--s-head); color:var(--gold-hi); line-height:1; letter-spacing:.02em}
.fig span{display:block; margin-top:10px; font-size:var(--s-small); color:var(--muted); line-height:1.4}

/* вопросы */
.faq{display:flex; flex-direction:column; gap:8px; max-width:62ch}
details{background:var(--night-2)}
summary{list-style:none; cursor:pointer; padding:20px 24px; font-family:"Cinzel",Georgia,serif; font-size:var(--s-body); letter-spacing:.02em; color:var(--gold-hi); display:flex; justify-content:space-between; gap:18px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; color:var(--gold)}
details[open] summary::after{content:"–"}
details p{padding:0 24px 22px; margin:0; color:var(--muted)}

/* финал */
.outro{position:relative; overflow:hidden; padding:clamp(80px,14vh,150px) 0; display:grid; place-items:center; text-align:center}
.outro img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 55%}
.outro .shade{position:absolute; inset:0; background:linear-gradient(to bottom, rgba(12,10,7,.9) 0%, rgba(12,10,7,.55) 42%, rgba(12,10,7,.92) 100%); /* taste-skill-ignore: затемнение под текстом */}
.outro .inner{position:relative; padding:0 24px; max-width:640px}
.outro h2{color:var(--gold-hi); margin-bottom:16px}
.outro p{color:var(--text); margin-bottom:26px}

footer{padding:56px 0 40px; color:var(--muted); font-size:var(--s-small)}
footer .mark{font-family:"Cinzel",Georgia,serif; font-size:var(--s-head); color:var(--gold); letter-spacing:.05em; display:block; margin-bottom:18px}
footer p{max-width:62ch; margin:0 0 10px}
footer a{color:var(--muted)}
footer .fnav{display:flex; gap:20px; flex-wrap:wrap; margin:22px 0 26px}
footer .fnav a{color:var(--text); text-decoration:none; font-size:var(--s-small)}
footer .fnav a:hover{color:var(--gold-hi)}

.js .rise{opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s ease}
.js .rise.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .js .rise{opacity:1; transform:none; transition:none}
  .hero img{animation:none}
}

@media (max-width:900px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .figures{grid-template-columns:repeat(2,1fr)}
  .entry{grid-template-columns:1fr; gap:6px}
  .hero{min-height:88svh}
  .hero img{object-position:center 38%}
  .topbar{flex-direction:column; align-items:flex-start; gap:10px}
}