/* Тема сайта хоругви: кожа и латунь меню KCD2, пергамент кодекса, красные рубрики. Макет: claude.ai/artifact/4aXGrzLW1QYTWwrWNS75N3 */

:root {
  --night: #100c08;
  --bone: #e8dcc2;
  --bone-dim: #b9a988;
  --bone-muted: #a8987a;
  --gold: #d9b56c;
  --gold-dim: #8a6d3b;
  --leather-rule: #3b2d1e;
  --ink: #2a1c10;
  --ink-soft: #3a2816;
  --ink-muted: #4f3b26;
  --ink-faint: #5e4a34;
  --rubric: #8f1d14;
  --rubric-deep: #5e120c;
  --red: #b3321f;
  --display: 'Cormorant Garamond', Georgia, serif;
  --caps: 'Cormorant SC', Georgia, serif;
  --text: 'Alegreya', Georgia, serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--night); }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(ellipse 120% 55% at 50% 0%, #2d2218 0%, #161009 55%, #0d0906 100%) fixed, var(--night);
  color: var(--bone);
  font: 17px/1.5 var(--text);
}

a { color: var(--rubric); }
a:hover { color: var(--rubric-deep); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #d9a857; outline-offset: 2px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Фильтры зерна и пятен лежат в каждой странице: <svg class="defs">…</svg> */
.defs { position: absolute; width: 0; height: 0; }

.parch {
  position: relative;
  isolation: isolate;
  color: var(--ink);
  background:
    radial-gradient(ellipse 70% 60% at 22% 12%, rgba(255, 249, 230, .65), transparent 70%),
    radial-gradient(ellipse 60% 50% at 88% 92%, rgba(140, 95, 40, .24), transparent 70%),
    linear-gradient(172deg, #ecdfc0, #dfcba4 58%, #d5bf94);
  box-shadow: inset 0 0 64px rgba(105, 66, 24, .4), inset 0 0 8px rgba(70, 42, 14, .55), 0 16px 36px rgba(0, 0, 0, .6);
}
.parch::before, .parch::after { content: ""; position: absolute; inset: 0; z-index: -1; mix-blend-mode: multiply; pointer-events: none; }
.parch::before { filter: url(#mottle); opacity: .5; }
.parch::after { filter: url(#grain); opacity: .28; }

.leather {
  position: relative;
  color: var(--bone);
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 220, 160, .06), transparent 60%), linear-gradient(#221a13, #17110c);
  box-shadow: inset 0 0 0 1px var(--leather-rule), inset 0 0 0 4px #17110c, inset 0 0 0 5px #6b5432, 0 14px 30px rgba(0, 0, 0, .55);
}

/* Шапка */
.top { background: linear-gradient(#251c14, #16100b); border-bottom: 1px solid #5a4529; box-shadow: 0 1px 0 #0b0806, 0 10px 26px rgba(0, 0, 0, .5); }
.top-in { max-width: 1320px; margin: 0 auto; padding: 12px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.12; }
.brand-pre { font: 600 15px var(--caps); letter-spacing: .24em; color: #b8a57e; }
.brand-name { font: 700 26px var(--caps); letter-spacing: .1em; color: #ecdcb6; }
.brand-sub { font-size: 13px; color: var(--bone-muted); letter-spacing: .04em; }
.nav-list { flex: 1 1 420px; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 2px; }
.nav { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 11px; font: 600 18px var(--caps); letter-spacing: .07em; color: #b8a57e; text-decoration: none; position: relative; }
.nav:hover { color: #f3e6c4; }
.nav[aria-current="page"] { color: #f3e6c4; }
.nav[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; background: linear-gradient(90deg, transparent, var(--red) 18%, #d9a857 50%, var(--red) 82%, transparent); }

.wrap { max-width: 1320px; margin: 0 auto; padding: 32px 24px 56px; }

.crumbs { font-size: 15px; color: var(--bone-muted); margin-bottom: 6px; }
.crumbs a { color: #c9b893; }
.page-title { margin: 0; font: 700 48px/1.05 var(--display); color: #f1e3c1; }
.lead { margin: 6px 0 0; font-size: 17px; color: var(--bone-dim); max-width: 72ch; }

.rubric { margin: 0; font: 700 22px var(--caps); letter-spacing: .12em; color: var(--rubric); }
.rubric-gold { color: var(--gold); }

/* Кнопки */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 8px 20px; border: 1px solid var(--gold-dim); background: linear-gradient(#2b2117, #1b140e); color: #ead9b2; font: 700 17px var(--caps); letter-spacing: .1em; cursor: pointer; text-decoration: none; box-shadow: inset 0 0 0 1px #120d09, inset 0 1px 0 rgba(255, 230, 180, .12); }
.btn:hover { border-color: #d1a95e; color: #fff3d6; }
.btn:disabled { opacity: .5; cursor: default; }
.btn-red { background: linear-gradient(#93261a, #661810); border-color: #c79a52; color: #f8ead0; }
.btn-red:hover { background: linear-gradient(#a62d1e, #741c12); color: #fff; }
.link-btn { all: unset; cursor: pointer; color: var(--gold); text-decoration: underline; font: inherit; }
.link-btn:hover { color: #f6dc9c; }
.link-btn:focus-visible { outline: 2px solid #d9a857; outline-offset: 2px; }

/* Поля на пергаменте */
.lbl { display: block; font: 700 16px var(--caps); letter-spacing: .1em; color: #6b2a1a; margin-bottom: 4px; }
.fld { width: 100%; min-height: 44px; padding: 6px 10px; font: 500 18px var(--text); color: var(--ink); background: rgba(255, 250, 236, .55); border: 0; border-bottom: 1.5px solid #5b3a1c; border-radius: 0; }
.fld:focus { background: rgba(255, 252, 242, .9); }

/* Закладки-ленты */
.ribbons { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 22px; position: relative; z-index: 2; margin-bottom: -14px; }
.ribbon { display: inline-flex; flex-direction: column; align-items: center; min-width: 96px; min-height: 64px; padding: 10px 14px 20px; border: 0; cursor: pointer; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); font: 700 16px/1.1 var(--caps); letter-spacing: .06em; color: #c9b893; background: linear-gradient(#3e2c1d, #2a1d13); }
.ribbon:hover { filter: brightness(1.15); }
.ribbon small { font: 500 13px var(--text); letter-spacing: 0; opacity: .9; margin-top: 2px; }
.ribbon[aria-pressed="true"] { color: #f8e6bd; background: linear-gradient(#a32a1c, #7a1c12); padding-top: 16px; }

/* Переплёт книги */
.book { position: relative; padding: 18px; border-radius: 6px; background: radial-gradient(ellipse at 50% 0%, rgba(255, 210, 150, .07), transparent 60%), linear-gradient(#3a2416, #22150c); box-shadow: inset 0 0 0 1px #120b06, inset 0 0 0 6px #2c1b10, inset 0 0 0 7px #a4824a, inset 0 0 0 9px #2c1b10, inset 0 0 0 10px #6b5432, 0 24px 50px rgba(0, 0, 0, .7); }
.spread { display: flex; flex-wrap: wrap; }
.page { flex: 1 1 480px; min-width: 0; }
.page-l { padding: 36px 32px 28px 36px; border-radius: 3px 0 0 3px; box-shadow: inset -40px 0 44px -26px rgba(70, 40, 12, .6), inset 0 0 50px rgba(105, 66, 24, .35); }
.page-r { padding: 36px 38px 28px 34px; border-radius: 0 3px 3px 0; box-shadow: inset 40px 0 44px -26px rgba(70, 40, 12, .6), inset 0 0 50px rgba(105, 66, 24, .35); }

.initial { flex: 0 0 auto; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; padding-bottom: 6px; background: var(--rubric); box-shadow: inset 0 0 0 2px #e6d3a8, inset 0 0 0 3px var(--rubric), inset 0 0 0 4px #c9a45c, 0 2px 4px rgba(60, 30, 10, .35); font: 700 54px/1 var(--display); color: #f3e4c0; }

.foot { border-top: 1px solid var(--leather-rule); background: #0e0a07; }
.foot-in { max-width: 1320px; margin: 0 auto; padding: 22px 24px 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: 14px; color: #9a8a6c; }

@media (max-width: 640px) {
  .page-title { font-size: 38px; }
  .page-l, .page-r { padding: 28px 18px 22px; box-shadow: inset 0 0 40px rgba(105, 66, 24, .35); border-radius: 3px; }
  .book { padding: 10px; }
  .ribbons { padding: 0 8px; }
  .ribbon { min-width: 0; flex: 1 1 30%; }
}