/* Readable text at every viewport; calligraphy is reserved for display lines. */
body { font-size: 17px; }
.brand-emblem {
  background: linear-gradient(90deg, #271514, #622c2a 40%, #48201f 78%, #211312);
  border-inline-color: #a98750;
}
.brand-emblem:after { border-inline-color: #d6b87b66; }
.brand .brand-emblem img {
  filter: drop-shadow(0 1px 1px #0009);
}
.hero h1 em, .parchment h2 em, .landscape h2 em, .closing h2 em {
  font-family: 'Grenze', Georgia, serif;
  font-weight: 450;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.hero { height: auto; min-height: 940px; max-height: none; }
.hero-description { font-size: 18px; max-width: 530px; }
.header nav > a, .header nav > a:not(.nav-join) { font-size: 16px; }
.header nav { gap: 22px; }
.brand small { font-size: 10px; letter-spacing: 1px; }
.eyebrow, .hero .eyebrow, .landscape .eyebrow, .closing .eyebrow {
  font-size: 12px; letter-spacing: 1.7px; line-height: 1.8;
}
.label, .contracts .label, .server-strip .label { font-size: 12px; letter-spacing: 1px; }
.hero-note, .hero-index, .hero-caption span, .hero-caption small,
.server-strip small, .status-detail, .feature-foot, .landscape-note {
  font-size: 13px; line-height: 1.8;
}
.world-copy > p:not(.lead), .world-features p,
.life-heading > p:not(.eyebrow), .contracts p, .economy-note p,
.join .section-intro > p:not(.eyebrow), .join-steps p,
.leaderboard > div > p:not(.eyebrow), .commands-heading > p,
.command-row p, .rules .section-intro > p:not(.eyebrow), .rules-list p,
.faq details p { font-size: 16px; line-height: 1.85; }
.small, .contracts .contract-note, #leaderboard-message,
.guide-downloads, .reward small, .leader-name small { font-size: 14px; line-height: 1.75; }
.text-link, .button, .hero-actions .button, .filters button,
.address-inline, .address-inline span, .search input, code, kbd,
.command-row code { font-size: 15px; }
.search input { min-width: 0; font-size: 16px; }
.filters button { min-height: 44px; padding: 9px 15px; }
.command-row { grid-template-columns: minmax(220px, .85fr) 1.7fr; }
.command-row code { overflow-wrap: anywhere; }
.reward span { font-size: 12px; }
.reward small { white-space: nowrap; }
.contracts article { grid-template-columns: 24px minmax(0, 1fr) 85px; }
.leaderboard-head { font-size: 11px; letter-spacing: .4px; }
.leaderboard-head, .leaderboard-row { grid-template-columns: 24px minmax(0, 1fr) 65px 70px; gap: 12px; }
.leaderboard-row { font-size: 16px; }
.leaderboard-board:before { font-size: 16px; letter-spacing: 1.4px; }
.faq summary { font-size: 23px; }
footer p, .footer-brand small { font-size: 12px; line-height: 1.8; }
.toast { font-size: 15px; }

@media (max-width: 1100px) {
  .header { height: 100px; }
  .menu-toggle { display: flex; gap: 12px; align-items: center; background: none; border: 0; color: var(--text); font-size: 17px; padding: 12px; }
  .header nav { display: none; position: absolute; top: 100px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: #1b1a13fa; padding: 25px 6%; border-bottom: 1px solid var(--line); }
  .header nav.open { display: flex; }
  .header nav > a:not(.nav-join) { font-size: 19px; padding: 6px 0; }
  .header nav .nav-join { font-size: 17px !important; padding: 13px; }
  .brand small { display: block; font-size: 9px; }
  .hero { min-height: 900px; }
}
@media (max-width: 800px) {
  .world, .join, .rules { grid-template-columns: 1fr; }
  .world-features { grid-template-columns: 1fr; }
  .world-features p { max-width: none; }
  .hero h1 { font-size: clamp(48px, 8vw, 70px); }
  .hero-description { max-width: 480px; }
  .server-strip { gap: 26px; }
  .server-address { flex-wrap: wrap; }
}
@media (max-width: 620px) {
  .header { height: 90px; }
  .header nav { top: 90px; }
  .brand { gap: 10px; }
  .brand small { font-size: 8px; letter-spacing: .2px; white-space: normal; max-width: 145px; line-height: 1.5; }
  .brand > span:not(.brand-emblem) { font-size: 21px; letter-spacing: 1px; }
  .menu-toggle { padding: 10px 0; font-size: 16px; gap: 8px; }
  .hero { padding-top: 170px; padding-bottom: 120px; min-height: 880px; }
  .hero h1 { font-size: clamp(44px, 11vw, 65px); }
  .hero-description { font-size: 17px; }
  .hero-note { max-width: 280px; }
  .eyebrow, .hero .eyebrow, .landscape .eyebrow, .closing .eyebrow { font-size: 11px; letter-spacing: 1px; }
  .hero .eyebrow { flex-wrap: wrap; }
  .server-strip { grid-template-columns: 1fr 1fr; gap: 25px 16px; }
  .server-strip strong { font-size: 19px; }
  .server-address { grid-column: 1 / -1; }
  .server-address strong { font-size: 18px; }
  .server-strip .label { font-size: 11px; }
  .server-strip small, .status-detail, .feature-foot, .landscape-note { font-size: 12px; }
  .landscape-note { letter-spacing: .5px; }
  .contracts { padding-inline: 15px; }
  .contracts article { grid-template-columns: minmax(0, 1fr) 78px; gap: 12px; }
  .contract-number { display: none; }
  .contracts h3 { font-size: 25px; }
  .contracts .label { font-size: 11px; letter-spacing: .4px; }
  .contracts p { font-size: 15px; }
  .reward { font-size: 32px; }
  .command-row { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .guide-downloads { gap: 18px; }
  .guide-downloads a { padding-block: 5px; }
  .leaderboard-board { padding-inline: 12px; }
  .leaderboard-head, .leaderboard-row { grid-template-columns: 18px minmax(0, 1fr) 49px 55px; gap: 6px; }
  .leaderboard-head { font-size: 10px; letter-spacing: 0; }
  .leader-name strong { font-size: 20px; }
  .leader-name small { font-size: 12px; }
  .faq summary { font-size: 21px; }
  footer > .text-link { font-size: 15px; }
}

/* Illumination stays in the margins, away from the text of the chronicle. */
.parchment { isolation: isolate; }
.parchment::before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 100px solid transparent;
  border-image: url('illuminated-parchment.png') 320 fill / 100px / 0 round;
  opacity: .94;
  pointer-events: none;
  z-index: -1;
}
.parchment .ornament-rule { color: #865322; }
.parchment .ornament-rule span { font-size: 24px; }
.parchment .section h2 { text-shadow: 0 1px 0 #fff4d6; }
.world-copy .lead:first-letter {
  font-family: 'Grenze', Georgia, serif;
  font-style: italic;
  font-size: 78px;
  color: #793932;
  padding: 5px 13px 4px 9px;
  margin: 5px 9px 0 0;
  border: 3px double #9e783e;
  background: #d9bd7540;
  text-shadow: 1px 1px #f9e5b5;
}
.contracts {
  border: 3px double #a7864d99;
  background: radial-gradient(ellipse at 50% 0, #9270431c, transparent 65%), #171912;
  box-shadow: inset 0 0 0 7px #10120d, inset 0 0 45px #0005, 0 14px 35px #0003;
}
.contracts::before, .contracts::after {
  font-size: 25px;
  color: #d2b57b;
  text-shadow: 0 1px #000;
}
.contracts::before { top: -24px; }
.contracts::after { bottom: -23px; }
.leaderboard-board {
  background: linear-gradient(110deg, #fff9e860, #e7d0a644);
  border: 3px double #92704190;
  box-shadow: inset 0 0 0 7px #ac854317, 0 8px 20px #74573118;
}
.leaderboard-board:before {
  font-family: 'Grenze', Georgia, serif;
  font-style: italic;
  font-size: 26px;
  letter-spacing: .5px;
  text-transform: none;
  content: 'Kronika dobrého jména';
}
.hero::after {
  content: '';
  position: absolute;
  inset: 138px 25px 30px;
  border-inline: 1px solid #d7b97940;
  pointer-events: none;
}
.hero-caption {
  background: linear-gradient(90deg, transparent, #151710aa);
  padding: 16px 24px 16px 40px;
  border-right: 3px double #cfac68;
}
.landscape::after, .closing::before { border: 3px double #dfc28a66; }
.landscape-note { background: #11170cc9; padding: 7px 13px; border: 1px solid #c2a36555; }
@media (max-width: 800px) {
  .parchment::before { border-width: 66px; border-image-width: 66px; }
}
@media (max-width: 620px) {
  .parchment::before { inset: 5px; border-width: 43px; border-image-width: 43px; }
  .hero::after { inset: 130px 10px 22px; border-inline-color: #d7b97925; }
  .world-copy .lead:first-letter { font-size: 63px; }
  .leaderboard-board:before { font-size: 24px; }
}