:root {
  --bg: #090908;
  --bg-soft: #15110c;
  --ink: #271a0e;
  --ink-soft: #4c351e;
  --paper: #d8b978;
  --paper-light: #f2d79a;
  --gold: #d8a84a;
  --gold-soft: #f2cf75;
  --gold-dark: #6d4618;
  --copper: #7b2a12;
  --copper-light: #b85b25;
  --blue: #153456;
  --line: rgba(216, 168, 74, .46);
  --shadow: rgba(0, 0, 0, .68);
  --max: 1220px;
  --radius: 12px;
  --f-display: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  --f-title: 'Cinzel', Georgia, 'Times New Roman', serif;
  --f-body: 'Lora', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100%;
  margin: 0;
  color: var(--paper-light);
  font-family: var(--f-body);
  background:
    radial-gradient(circle at 50% -10%, rgba(128, 78, 24, .25), transparent 32rem),
    radial-gradient(circle at 20% 20%, rgba(125, 48, 18, .16), transparent 30rem),
    linear-gradient(180deg, #080806, #13100b 38rem, #080806);
}

a { color: inherit; }
img { display: block; max-width: 100%; }

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

.page {
  width: min(var(--max), calc(100% - 28px));
  margin: 16px auto 24px;
}

.site-frame {
  border: 1px solid rgba(226, 170, 74, .65);
  box-shadow:
    0 0 0 2px rgba(42, 24, 9, .9),
    0 0 0 4px rgba(178, 117, 39, .34),
    0 28px 70px rgba(0,0,0,.65);
  background: linear-gradient(180deg, rgba(23,18,12,.98), rgba(9,8,6,.98));
  padding: 12px;
}

.hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(260px, 34vw, 420px);
  border: 1px solid rgba(245, 194, 90, .55);
  background: #120d08;
  box-shadow: inset 0 0 0 2px rgba(56, 30, 10, .85);
}
.hero img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.05));
  pointer-events: none;
}

.lang-switch {
  position: absolute;
  z-index: 3;
  top: clamp(10px, 1.4vw, 18px);
  right: clamp(10px, 1.4vw, 18px);
  display: flex;
  gap: 8px;
}

.lang, .btn, .badge {
  text-decoration: none;
  border: 1px solid rgba(218, 168, 62, .88);
  color: #f8df9b;
  text-shadow: 0 1px 2px rgba(0,0,0,.88);
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -9px 18px rgba(0,0,0,.24),
    0 2px 7px rgba(0,0,0,.45);
}
.lang, .btn {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -10px 22px rgba(0,0,0,.30),
    0 0 0 2px rgba(16, 8, 2, .96),
    0 0 0 3px rgba(170, 115, 26, .46),
    0 4px 12px rgba(0,0,0,.55);
}
.lang {
  min-width: 46px;
  padding: 8px 11px 7px;
  text-align: center;
  font-family: var(--f-title);
  font-weight: 700;
  letter-spacing: .04em;
  background:
    linear-gradient(180deg, rgba(160, 95, 34, .98), rgba(72, 28, 12, .98)),
    #6b2e14;
}
.lang--inactive {
  background:
    linear-gradient(180deg, rgba(45, 68, 91, .95), rgba(18, 32, 49, .96)),
    #193753;
}
.lang:hover, .btn:hover { filter: brightness(1.14); }

.main {
  padding: clamp(14px, 2.2vw, 28px) clamp(8px, 1.6vw, 18px) 0;
}

.intro {
  min-height: clamp(150px, 22vw, 230px);
  margin: 0 0 16px;
  padding: clamp(24px, 4vw, 46px) clamp(24px, 25vw, 330px) clamp(24px, 4vw, 42px) clamp(24px, 5vw, 64px);
  background: url('../img/intro-panel.webp') center/cover no-repeat;
  color: var(--ink);
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.45));
}
.intro h2 {
  margin: 0 0 10px;
  font-family: var(--f-title);
  color: #1c0e04;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.15;
}
.intro p {
  margin: 0;
  max-width: 780px;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  font-weight: 600;
  line-height: 1.58;
  color: #2a1508;
}
.intro p::first-letter {
  float: left;
  font-size: 2.9em;
  line-height: .78;
  padding: .07em .12em 0 0;
  font-family: var(--f-display);
  color: #201108;
}

.cards {
  display: grid;
  gap: 15px;
}
.card {
  position: relative;
  min-height: clamp(180px, 22.56vw, 275px);
  color: var(--ink);
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.52));
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../img/card-frame.webp') center/100% 100% no-repeat;
  pointer-events: none;
  z-index: 2;
}
.card__thumb {
  position: absolute;
  left: 5.71%;
  top: 11.84%;
  right: 57.36%;
  bottom: 12.24%;
  overflow: hidden;
  background: #120d08;
  z-index: 1;
}
.card__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.04) contrast(1.04);
}
.card__body {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(8px, 1vw, 14px);
  margin-left: 44%;
  min-height: inherit;
  padding: clamp(14px, 2.2vw, 34px) clamp(16px, 2.2vw, 30px) clamp(19px, calc(2.2vw + 5px), 35px) clamp(10px, 1.2vw, 18px);
}
.card h2 {
  margin: 0 0 10px;
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 1.8vw, 1.55rem);
  line-height: 1.15;
  color: #221207;
  letter-spacing: .02em;
}
.card p {
  margin: 0;
  max-width: 850px;
  font-size: clamp(0.93rem, 1.2vw, 1.05rem);
  font-weight: 600;
  line-height: 1.55;
  color: #2e1a08;
}
.card__actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.card__actions .badge {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  min-height: unset;
  color: #4a2c10;
  font-family: var(--f-body);
  font-size: .9rem;
  font-variant: normal;
  letter-spacing: normal;
  font-style: italic;
  font-weight: 400;
}
.card__actions .btn { margin-left: auto; margin-right: clamp(8px, 2vw, 24px); }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7em;
  min-height: 22px;
  padding: 4px 22px 4px;
  font-weight: 700;
  font-family: var(--f-title);
  letter-spacing: .03em;
  background:
    linear-gradient(180deg, rgba(175,79,28,.95), rgba(88,28,11,.98));
  color: #ffe7a7;
}
.btn::after {
  content: "↗";
  font-size: 1.05em;
  opacity: .95;
}
.btn--blue {
  background: linear-gradient(180deg, rgba(35,72,105,.96), rgba(14,31,51,.98));
}
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 33px;
  padding: 6px 13px;
  color: #f6dc9d;
  font-size: .88rem;
  font-family: var(--f-title);
  letter-spacing: .03em;
  background: linear-gradient(180deg, rgba(49,37,21,.92), rgba(24,18,12,.95));
}

.footer {
  margin: 18px 0 0;
  min-height: clamp(120px, 33.33vw, 240px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 24px clamp(22px, 12vw, 180px);
  background: url('../img/footer-frame.webp') center/100% auto no-repeat;
  color: #d9b568;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.52));
}
.footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin-bottom: 8px;
  font-family: var(--f-title);
  font-variant: small-caps;
  letter-spacing: .09em;
}
.footer a {
  text-decoration: none;
  color: #e6c176;
}
.footer a:hover { color: #ffe6a6; }
.footer p { margin: 4px 0; font-size: .9rem; }

.splash-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
}
.splash-card {
  width: min(880px, 100%);
  text-align: center;
}
.splash-card .hero {
  min-height: clamp(190px, 36vw, 300px);
}
.splash-box {
  margin: 15px auto 0;
  padding: clamp(24px, 4vw, 38px);
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(245, 218, 160, .92), rgba(211, 171, 97, .94));
  border: 1px solid rgba(239, 190, 91, .75);
  box-shadow:
    inset 0 0 0 3px rgba(59,34,13,.45),
    0 16px 40px rgba(0,0,0,.55);
}
.splash-box h1 {
  margin: 0 0 12px;
  font-family: var(--f-title);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  color: #261508;
  font-weight: 600;
  letter-spacing: .06em;
}
.splash-box p {
  margin: 0 0 14px;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: #3f2814;
}
.splash-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 15px;
}
.splash-actions .btn { min-width: 150px; }
.splash-actions .btn::after { display: none; }

@media (max-width: 900px) {
  .page { width: min(100% - 16px, var(--max)); margin-top: 8px; }
  .site-frame { padding: 8px; }
  .intro {
    background:
      linear-gradient(180deg, rgba(244, 215, 160, .94), rgba(210, 169, 94, .92));
    border: 1px solid rgba(239, 190, 91, .72);
    box-shadow: inset 0 0 0 3px rgba(60,35,14,.40), 0 10px 18px rgba(0,0,0,.45);
    padding: 24px;
  }
}

@media (max-width: 750px) {
  .footer {
    min-height: 125px;
    background: linear-gradient(180deg, rgba(37,28,17,.96), rgba(15,12,8,.98));
    border: 1px solid rgba(239, 190, 91, .55);
    padding: 24px 18px;
  }
  .card {
    display: flex;
    flex-direction: column;
    min-height: unset;
    background:
      linear-gradient(180deg, rgba(224,190,120,.96), rgba(194,151,78,.97));
    border: 1px solid rgba(239, 190, 91, .72);
    box-shadow: inset 0 0 0 3px rgba(60,35,14,.40);
  }
  .card::after { display: none; }
  .card__thumb {
    position: relative;
    left: unset; top: unset; right: unset; bottom: unset;
    width: 100%;
    height: 210px;
    z-index: unset;
  }
  .card__body {
    position: static;
    margin-left: 0;
    min-height: unset;
    padding: 14px 16px 16px;
    gap: 10px;
    z-index: unset;
  }
}

@media (max-width: 560px) {
  .hero { min-height: 225px; }
  .lang-switch { top: 8px; right: 8px; }
  .lang { min-width: 40px; padding: 7px 9px 6px; }
  .card__thumb { height: 170px; }
  .card h2 { font-size: 1.1rem; }
  .btn, .badge { width: 100%; }
}