/* Shared classic fantasy skin. Page styles continue to own their content layouts. */
:root {
  color-scheme: dark;
  --ink: #eee3cc;
  --paper: #17191b;
  --navy: #101419;
  --gold: #d8b875;
  --ice: #bdd9e4;
  --line: rgba(199, 166, 103, .23);
  --muted: #b9b5aa;
  --serif: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
}

body {
  background: radial-gradient(ellipse at 15% 20%, #36302255, transparent 48%), var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

::selection { background: #d8b875; color: #17191b; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
img { max-width: 100%; }

/* A restrained metal frame, with room for all translated navigation labels. */
.site-header {
  height: 92px;
  gap: 24px;
  padding-inline: max(28px, calc((100vw - 1360px) / 2));
  background: linear-gradient(180deg, #222527f5, #111518f2);
  border-top: 2px solid #75603a;
  border-bottom: 1px solid #8e7548;
  box-shadow: 0 3px 0 #080b0f, 0 4px 0 #b3924b40, 0 12px 32px #0006;
}

.site-header.scrolled {
  background: #14181bf5;
  box-shadow: 0 1px 0 #b3924b55, 0 8px 30px #0007;
}

.brand-logo { width: 174px; filter: drop-shadow(0 2px 4px #0008); }
.site-nav { gap: clamp(14px, 1.5vw, 25px); }
.site-nav a { color: #d3c7ad; font-size: 10px; letter-spacing: .08em; white-space: nowrap; }
.site-nav a:hover, .site-nav a.active { color: #ffe0a0; }
.language-switcher { flex-shrink: 0; margin: 0; border-color: var(--line); border-radius: 3px; }
.language-switcher .language-option { min-width: 30px; height: 30px; border-radius: 1px; }
.header-cta { flex-shrink: 0; }

/* Bevelled red lacquer buttons recall the game UI without heavy image assets. */
.button {
  position: relative;
  min-height: 50px;
  padding: 16px 25px;
  background: linear-gradient(#952f29, #651c1b);
  border: 1px solid #c59e5a;
  border-radius: 2px;
  color: #ffe8b3;
  box-shadow: inset 0 0 0 2px #341211, inset 0 3px 0 #ffffff20, 0 4px 12px #0005;
  text-shadow: 0 1px 2px #0009;
  font-size: 11px;
  letter-spacing: .12em;
  transition: background .2s, box-shadow .2s, transform .2s;
}

.button:hover {
  background: linear-gradient(#b03d32, #7b241e);
  color: #fff1cf;
  box-shadow: inset 0 0 0 2px #461915, 0 0 22px #c47b2826, 0 5px 14px #0005;
}

.button-small { min-height: 40px; padding: 11px 16px; font-size: 10px; }
.button-amber, .button-light {
  background: linear-gradient(#d4ae67, #a77b3c);
  color: #21190e;
  text-shadow: 0 1px #ffffff33;
  box-shadow: inset 0 0 0 2px #62471f, inset 0 3px 0 #ffffff44, 0 4px 12px #0005;
}
.button-amber:hover, .button-light:hover { background: linear-gradient(#e9c682, #bd914d); color: #21190e; }
.text-link, .gold, .docs-link, .feature-docs-link { color: var(--gold); line-height: 1.6; }

/* Monumental lettering and cool artwork provide the Wrath half of the palette. */
.hero { min-height: 760px; height: 92svh; max-height: 1040px; border-bottom: 1px solid #937644; }
.hero-shade {
  background: linear-gradient(90deg, #071019e8, #07101966 48%, #07101905 80%),
    linear-gradient(0deg, #101419, transparent 38%);
}
.hero:after { height: 100px; background: linear-gradient(transparent, #101419b3); }
.hero-content { padding-top: clamp(200px, 27vh, 290px); padding-bottom: 150px; }
.hero h1 {
  max-width: 780px;
  font-size: clamp(62px, 6.6vw, 96px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.035em;
  text-transform: uppercase;
  color: #f6ecd7;
  text-shadow: 0 3px 0 #0008, 0 8px 30px #0008;
}
.hero h1 i { font-style: normal; font-weight: 700; color: #e3c383; }
.hero h1 i:before { content: '\A'; white-space: pre; }
.hero-copy { max-width: 510px; color: #cbd4d6; font-size: 16px; line-height: 1.8; margin: 25px 0 32px; }
.eyebrow, .eyebrow.dark { color: var(--gold); font-size: 10px; letter-spacing: .19em; }
.eyebrow span { width: 7px; height: 7px; transform: rotate(45deg); background: var(--gold); }
.hero-foot { bottom: 28px; padding-top: 22px; border-top: 1px solid #d4b67833; }
.realm-status { color: #c9c2b3; font-size: 10px; }
.realm-status strong { color: #d8e5c6; }
.scroll-cue { color: #c9c2b3; }

/* Warm stone sections, inset panels and small heraldic details. */
.section { padding-block: 100px; }
.section-kicker { color: #bba778; margin-bottom: 45px; border-color: var(--line); }
.section h2, .section-heading h2, .community h2, .crawl-content h2,
.docs-heading h2, .command-content h2, .rally-intro h2, .rally-section-heading h2,
.rally-fair h2, .rally-season h2, .rally-passport h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(38px, 4.5vw, 62px);
  letter-spacing: -.035em;
  line-height: 1.1;
  color: var(--ink);
}
h2 i, .docs-heading h2 i, .command-content h2 i { font-style: normal; color: var(--gold); }
.intro-grid, .roadmap-grid, .join-grid { gap: 70px; }
.intro-copy, .join-grid > div:last-child { color: var(--muted); font-size: 16px; line-height: 1.8; }
.features, .rally-loop, .docs-section-ink {
  background: radial-gradient(ellipse at 50% 0, #26303966, transparent 70%), #101419;
  border-block: 1px solid var(--line);
  padding-block: 95px;
}
.section-heading { margin-bottom: 40px; }
.section-heading > p { color: var(--muted); }
.feature-grid { gap: 16px; border: 0; }
.feature-card, .feature-card.featured {
  min-height: 310px;
  padding: 27px 24px;
  background: linear-gradient(145deg, #282b2d, #191e23);
  border: 1px solid #79643e80;
  box-shadow: inset 0 0 0 4px #11161a, inset 0 0 0 5px #b1944b1c, 0 12px 20px #0002;
}
.feature-card.featured { background: linear-gradient(145deg, #343025, #1c2227); border-color: #b39150; }
.feature-card:after {
  content: '';
  position: absolute;
  top: -4px;
  right: 20px;
  width: 7px;
  height: 7px;
  border: 1px solid #c3a065;
  background: #242322;
  transform: rotate(45deg);
}
.card-index { position: absolute; right: 25px; top: 29px; color: #b7a78a; }
.feature-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 0 28px;
  background: radial-gradient(circle at 40% 30%, #665437, #282723 72%);
  border: 1px solid #9b7c45;
  border-radius: 3px;
  box-shadow: inset 0 0 0 3px #171b1d, 0 3px 9px #0005;
  font-size: 27px;
}
.feature-card h3 { font-size: 24px; color: #eddbb6; }
.feature-card p { color: var(--muted); line-height: 1.8; }
.pub-crawl { border-block: 1px solid var(--line); }
.crawl-art:before { transform: none; inset: 4% -3%; border: 1px solid #a27b3c70; }
.timeline-item { padding: 27px 0; }
.timeline-item span { color: var(--gold); }
.timeline-item h3 { color: var(--ink); font-size: 25px; }
.timeline-item p { color: var(--muted); }
.community { padding-block: 105px; border-block: 1px solid #8c73464d; }
.community h2 { font-size: clamp(42px, 5vw, 72px); }
.community .eyebrow:after { content: ''; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }
.join small, .join small a { color: #bdb29d; }
.site-footer { background: #0d1013; border-top: 1px solid var(--line); color: #a9a99f; }
.site-footer a { color: #c8b78f; }
.site-footer span { color: #a5a294; }

/* The same palette carries into the guides and event pages. */
.docs-page, .command-docs, .rally-page { background: transparent; color: var(--ink); }
.docs-hero, .command-doc-hero {
  background: linear-gradient(90deg, #0d141cef, #111a23c9),
    url('../images/hero-icecrown.png') center 40% / cover;
  border-bottom: 1px solid #8e7548;
}
.docs-hero h1, .command-doc-hero h1, .rally-hero h1 {
  font-weight: 700;
  font-size: clamp(48px, 6.5vw, 88px);
  line-height: 1.08;
  letter-spacing: -.035em;
  color: var(--ink);
}
.docs-hero h1 i, .command-doc-hero h1 i, .rally-hero h1 i { font-style: normal; }
.docs-notice, .doc-callout, .automatic-system, .rally-note {
  background: #292820;
  border-color: #9c7b45;
  color: #d0c4ad;
}
.docs-jump { flex-wrap: wrap; gap: 12px; }
.docs-jump a { padding: 12px 17px; border: 1px solid var(--line); background: #202426; color: var(--gold); }
.docs-jump a:hover { background: #302e26; color: #f3d9a7; }
.docs-heading > p, .rally-intro p:not(.eyebrow),
.rally-divisions .rally-section-heading > p:last-child, .season-details > p:first-child { color: var(--muted); }
.docs-heading > span, .season-details dt { color: #bda573; }
.module-grid { gap: 16px; background: none; border: 0; }
.module-card, .module-card-featured, .docs-section-ink .module-card,
.docs-section-ink .module-card:nth-child(2n), .docs-section-code .module-card {
  background: linear-gradient(135deg, #282b2c, #1d2225);
  border: 1px solid var(--line);
  color: var(--ink);
}
.module-card-featured { border-color: #9c7d47; }
.module-top, .docs-section-ink .module-top { color: #bcb5a6; }
.module-top b { color: var(--gold); }
.module-card p, .module-card ul { color: var(--muted); }
.module-note { color: #bcb5a6 !important; }
.docs-section-code { background: #141e24; border-block: 1px solid var(--line); }
.docs-section-code .module-grid { background: none; }
.command-sidebar { top: 120px; }
.command-sidebar > p { color: var(--gold); }
.command-sidebar nav a { padding: 12px 10px; color: var(--muted); }
.command-sidebar nav a:hover, .command-sidebar nav a.active { background: #b8994312; color: var(--gold); }
.sidebar-tip, .command-content > section > p:not(.doc-overline), .lead,
.command-channel-grid p, .command-reference-columns dd { color: var(--muted); }
.doc-overline { color: #d6b979 !important; }
.command-channel-grid article, .command-reference-columns section { background: #202426; }
.command-channel-grid span { color: #c6b07d; }
.command-content code { background: #10181e; color: #dcc28d; border: 1px solid #a7894633; }
.reference-list p { color: var(--muted) !important; }
.syntax-card { background: #142530; border: 1px solid #49616b; }
.automatic-system .text-link { color: var(--gold); }
.rally-hero { border-bottom: 1px solid var(--line); }
.rally-hero img, .rally-passport img { border-color: #9c7c45; padding: 5px; background: #171b1e; }
.rally-steps { border-color: var(--line); }
.rally-steps li { border-color: var(--line); background: #1a2025; }
.division-grid article { border: 1px solid #647c80; }
.division-grid article + article { border-color: #a27a3d; }

@media (min-width: 761px) and (max-width: 1100px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .intro-grid, .roadmap-grid, .join-grid { gap: 40px; }
  .timeline-item { grid-template-columns: 1fr; gap: 12px; padding-left: 16px; }
  .crawl-grid { gap: 35px; }
  .crawl-actions { flex-wrap: wrap; gap: 18px; }
}

/* Collapse before the desktop menu can collide with the logo or play button. */
@media (max-width: 1240px) {
  html { scroll-padding-top: 80px; }
  .site-header { height: 80px; gap: 14px; padding-inline: 24px; }
  .nav-toggle {
    display: grid;
    place-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    margin-left: auto;
    background: #ffffff05;
    border: 1px solid var(--line);
    border-radius: 2px;
    color: var(--gold);
    cursor: pointer;
  }
  .nav-toggle span { display: block; width: 22px; height: 1px; background: currentColor; }
  .site-nav {
    display: none;
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: 15px 24px max(22px, env(safe-area-inset-bottom));
    gap: 0;
    background: #151a1dfc;
    border-bottom: 1px solid #8e7548;
    box-shadow: 0 15px 25px #0008;
  }
  .site-header.nav-open .site-nav { display: grid; }
  .site-nav a { padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 11px; }
  .language-switcher { margin: 0; }
  .header-cta { display: inline-flex; }
}

@media (max-width: 760px) {
  .hero { min-height: 750px; height: auto; background-position: 58% center; }
  .hero-shade { background: linear-gradient(90deg, #071019d9, #07101960), linear-gradient(0deg, #101419, transparent); }
  .hero-content { padding-top: 180px; padding-bottom: 145px; }
  .hero h1 { font-size: clamp(48px, 9vw, 72px); }
  .hero-copy { font-size: 15px; max-width: 470px; }
  .hero-actions { gap: 22px; }
  .section, .features { padding-block: 72px; }
  .intro-grid, .roadmap-grid, .join-grid { gap: 30px; }
  .section h2, .section-heading h2, .crawl-content h2 { font-size: clamp(36px, 6.5vw, 48px); }
  .feature-card { min-height: 285px; }
  .feature-card h3 { font-size: 23px; }
  .feature-grid { gap: 14px; }
  .community { padding-block: 80px; }
  .docs-hero, .command-doc-hero { padding-top: 150px; }
  .docs-heading h2, .command-content h2 { font-size: clamp(34px, 6.5vw, 46px); }
  .command-sidebar { position: static; }
  .rally-section-heading h2, .rally-intro h2, .rally-season h2,
  .rally-passport h2, .rally-fair h2 { font-size: clamp(36px, 6.5vw, 48px); }
}

@media (max-width: 479px) {
  .site-header { gap: 9px; padding-inline: max(12px, env(safe-area-inset-left)); }
  .brand-logo { width: 132px; }
  .header-cta { display: none; }
  .language-switcher .language-option { min-width: 27px; height: 28px; }
  .hero { min-height: 710px; background-position: 61% center; }
  .hero-content { padding-top: 165px; padding-bottom: 135px; }
  .hero h1 { font-size: clamp(37px, 10.3vw, 49px); letter-spacing: -.04em; }
  .hero-copy { font-size: 14px; margin-block: 24px; }
  .hero-actions { gap: 20px; }
  .hero-foot { bottom: 24px; }
  .section-kicker { margin-bottom: 32px; }
  .feature-card { min-height: 0; padding: 25px; }
  .feature-icon { margin-bottom: 20px; }
  .feature-card p { font-size: 14px; }
  .docs-notice { margin-top: 24px; }
  .docs-jump { gap: 10px; }
  .docs-jump a { padding: 12px; }
  .docs-hero h1, .command-doc-hero h1, .rally-hero h1 { font-size: clamp(38px, 10vw, 48px); }
  .command-content code { white-space: normal; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
  .button:hover { transform: none; }
}